Task1

Css exam Telerik Academy

by Naydenov_it

HTML

<body>
	<div id="wrapper">
		<header>
			<h1>
				Nikolay Kostov's blog
			</h1>
			<nav id="nav">
				<ul>
					<li>about</li>
					<li>blog</li>
					<li>speaking</li>
					<li>books</li>
				</ul>
			</nav>
			<div class="clear"></div>
		</header>
		<div id="searchBar">
			<div id="archives">
				/ <a href="/archive/2011/">2011</a>
				/ <a href="/archive/2012/">2012</a>
				/ <a href="/archive/2013/">2013</a>
				/ <a href="/archive/2014/">2014</a>
			</div>
			<div id="search">
				<a href="/search/">Search</a>
			</div>
			<div class="clear"></div>
		</div>
		<div id="content">
			<h1>Good luck!</h1>
			<article>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl odio, semper quis sapien aliquam, volutpat ornare ligula. Etiam facilisis elit libero, quis luctus leo convallis in. Aenean bibendum eros eu viverra condimentum. Proin bibendum sollicitudin placerat. Donec bibendum ac dolor id dignissim. In ultricies ipsum eget nisi eleifend iaculis. Quisque arcu lacus, suscipit eu sollicitudin at, porttitor non purus.</p>
				<p>Maecenas convallis enim magna, sed vehicula est lobortis a. Nunc iaculis non enim id molestie. Sed rhoncus dictum massa eu faucibus. Maecenas commodo nisi eu nunc hendrerit, eu malesuada dui congue. Donec mattis, sem quis tempus feugiat, dolor risus interdum tortor, at facilisis urna nisl molestie nunc. Phasellus felis lorem, elementum accumsan neque ut, imperdiet hendrerit velit. Sed leo magna, semper mollis ullamcorper eu, interdum sed odio. Fusce mauris lacus, fermentum ut accumsan et, vestibulum in lorem. Vivamus ultrices vitae erat sed ornare. Sed mattis libero non sagittis vehicula.</p>
				<p>Mauris mollis mi vel purus pellentesque ultricies. Ut quis ipsum a odio placerat ullamcorper a a dui. Maecenas accumsan eget urna eu ultrices. Nunc bibendum non dui vel lobortis. Proin accumsan purus et vehicula fermentum. Duis non varius odio, id pharetra nunc. Sed sodales sapien a imperdiet viverra. Curabitur...

CSS

* {
    margin: 0;
    padding: 0;
}

html, body {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#wrapper {
    width: 960px;
    margin: 0;
    margin-left: 5px;
}

.clear {
    clear: both;
}

header {
    background-color: #F6F5E9;
    background-image: url(images/header-bg.png);
    background-repeat: repeat;
}

    header h1 {
        text-transform: uppercase;
        font-size: 1em;
        color: #575E5B;
        padding-top: 15px;
        padding-left: 15px;
    }

    header nav#nav {
        float: right;
        position: relative;
        top: -20px;
        right: -5px;
        padding-right: 10px;
    }

        header nav#nav ul {
        }

            header nav#nav ul li {
                list-style-type: none;
                display: inline-block;
                padding-right: 15px;
                color: #575E5B;
                font-size: 0.9em;
            }

    header div.clear {
    }

div#searchBar {
    background-color: black;
    color: white;
    display: block;
    height: 35px;
}

    div#searchBar div#archives {
        display: inline-block;
        padding-top: 8px;
        padding-left: 10px;
    }

        div#searchBar div#archives a {
            color: #C6C6C6;
            font-size: 0.9em;
            text-decoration: none;
        }

    div#searchBar div#search {
        display: inline-block;
        float: right;
        position: relative;
        right: 10px;
        top: -20px;
    }

        div#searchBar div#search a {
            color: #C6C6C6;
            font-size: 0.9em;
            text-decoration: none;
        }

div#content {
    padding-top: 15px;
}

    div#content h1 {
        font-size: 1.5em;
        color: #575E5B;
    }

    div#content article {
    }

        div#content article p {
            color: #575E5B;
            padding-top: 13px;
            font-size: 0.9em;
        }

            div#content article p:first-of-type {
                margin-top:...