HTML to be implemented:
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
<meta name="author" content="your name" />
<meta name="description" content="" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="page">
<div id="logo">
<h1><a href="/" id="logoLink">My First Website</a></h1>
</div>
<div id="nav">
<ul>
<li><a href="#/home.html">Home</a></li>
<li><a href="#/about.html">About</a></li>
<li><a href="#/contact.html">Contact</a></li>
</ul>
</div>
<div id="content">
<h2>Home</h2>
<p>
This is my first webpage! I was able to code all the HTML and CSS in order to make it. Watch out world of web design here I come!
</p>
<p>
I can use my skills here to create websites for my business, my friends and family, my C.V, blog or articles. As well as any games or more experiment stuff (which is what the web is really all about).
</p>
</div>
<div id="footer">
<p>
Webpage made by <a href="/" target="_blank">any thing in here</a>
</p>
</div>
</div>
</body>
</html>
CCS Code to support the HTML
p{ line-height: 1em; }
h1, h2, h3, h4{
color: orange;
font-weight: normal;
line-height: 1.1em;
margin: 0 0 .5em 0;
}
h1{ font-size: 1.7em; }
h2{ font-size: 1.5em; }
a{
color: black;
text-decoration: none;
}
a:hover,
a:active{ text-decoration: underline; }
body{
font-family: arial; font-size: 80%; line-height: 1.2em; width: 100%; margin: 0; background: #eee;
}
#page{ margin: 20px; }
/* or on different lines like below */
#logo{
width: 35%;
margin-top: 5px;
font-family: georgia;
display: inline-block;
}
#nav{
width: 60%;
display: inline-block;
text-align: right;
float: right;
}
#nav ul{}
#nav ul li{
display: inline-block;
height: 62px;
}
#nav ul li a{
padding: 20px;
background: orange;
color: white;
}
#nav ul li a:hover{
background-color: #ffb424;
box-shadow: 0px 1px 1px #666;
}
#nav ul li a:active{ background-color: #ff8f00; }
#content{
margin: 30px 0;
background: white;
padding: 20px;
clear: both;
}
#footer{
border-bottom: 1px #ccc solid;
margin-bottom: 10px;
}
#footer p{
text-align: right;
text-transform: uppercase;
font-size: 80%;
color: grey;
}
#content,
ul li a{ box-shadow: 0px 1px 1px #999; }
No comments:
Post a Comment