CSS Project 2 – Complete HTML and CSS code

CSS

0 Comments

Here's the complete HTML and CSS code for CSS Project 2 (styling our website header).

HTML

<div id="header">
	<a id="logo" href="/">
        <img src="https://www.delidded.com/logo.png" alt="Delidded.com Logo" height="36">
    </a>

	<ul id="menu">
		<li><a href="/html/">HTML</a></li>
		<li><a href="/css/">CSS</a></li>
		<li><a href="/javascript/">JavaScript</a></li>
	</ul>

	<ul id="menu-right">
		<li><a href="/login/">Login</a></li>
	</ul>
</div>

<div id="main">
	<h2>Delidded Web Design</h2>

	<p>Welcome to <span class="domain">delidded.com</span>.</p>
</div>

CSS

body {
	margin: 0;
}

#header {
	background-color: #2DAACD;
	height: 40px;
}

#logo {
	margin-right: 20px;
	margin-left: 10px;
}

#logo img {
	border: none;
}

#menu,
#menu-right {
	margin: 0;
	padding: 0;
	display: inline-block;
	vertical-align: top;
}

#header ul li {
	margin-right: 20px;
	display: inline-block;
	line-height: 40px;
}

#header a {
	color: white;
	text-decoration: none;
}

#main {
	padding: 10px;
}

#menu-right {
    float: right;
}

.domain {
	color: green;
	font-weight: bold;
}

Result

Leave a Comment