HTML for beginners

HTML code !!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Facilities</a></li>
<li><a href="#">Overview</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</body>
</html>

CSS Code :

#menu
{
list-style:none;
margin:30px auto 0px auto;
width:600px;
height:45px;
padding:0px 20px 0px 20px;

border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;

background:#666666;
background: -moz-linear-gradient(top, #000, #999);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to( #999));

box-shadow: inset 1px 1px 10px #FFFFFF;
-moz-box-shadow: inset 1px 1px 10px #FFFFFF;
-webkit-box-shadow: inset 1px 1px 10px #FFFFFF;
border:1px solid #000;

}
#menu li
{
float:left;
padding:4px 10px 4px 10px;
display: block;
position:relative;
text-align:center;
margin-right:30px;
margin-top:7px;
border:none;

}

#menu li a
{
text-decoration:none;
color:#999999;
text-shadow:1px 1px 10px #FFCC99;
}
#menu li:hover a
{
color:#FFF;
text-shadow:1px 1px 10px #CCC;
}

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; }

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; }

HTML for beginners

Friday, 25 October 2013

Creating a simple Vertical menu bar through HTML and CSS

HTML code !!

CSS Code :

Basic HTML and CSS Code for bigners

HTML to be implemented:

CCS Code to support the HTML