In this tutorial, i will show you The Basic Structure of HTML 5 and CSS 3. Please dont hesitate to ask me your questions or a part that you don't get it. I havent finished it on purpose, coz i want you to code the footer urself by following this structures.
HTML Codes
<!DOCTYPE html>
<html>
<head>
<title>Creating Web Sites with HTML 5 and CSS 3</title>
<meta charset="utf-8"/>
<meta name="description" content=" HTML 5 Structure " />
<meta name="keywords" content="html5, css3"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/apple.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<nav>
<ul>
<li><a href="#">Main</a> </li>
<li><a href="#">Store</a> </li>
<li><a href="#">Mac</a> </li>
<li><a href="#">iPod</a> </li>
<li><a href="#">iPhone</a> </li>
<li><a href="#">iPad</a> </li>
<li><a href="#">iTunes</a> </li>
<li><a href="#">Support</a> </li>
<li><input class="searchbar" type="search" value="Search" name="search"></li>
</ul>
</nav>
<div id="navBottom">
<ul id="navBottomLeft">
<li>Final Cut Pro X </li>
</ul>
<ul id="navBottomRight">
<li> Top Features</li>
<li>All Features </li>
<li> Tech Specs </li>
<li> Buy Now </li>
</ul>
</div>
<article class="articleFooter">
<hgroup>
<h1>Final Cut Pro X</h1>
<h2>Everything just changed in post.</h2>
<h3>Download it now from the Mac App Store for $ 299.99</h3>
</hgroup>
</article>
</header>
<section>
<header>
<p> <img src="img/macbook.png" alt="MacBook Pro" title="MacBook Pro"> </p>
</header>
<article class="article">
<div class="video">
<img src="img/video.png" alt="Video" title="Video">
</div>
<div class="videoNote" >
<p> Watch the <br>Final Cut Pro <br>Overview </p>
</div>
<div class="specs">
<ul>
<li><p><h1>Revolutionary video editing</h1></p>
<p>With the Magnetic Timeline, Clip Connections, and other innovative features, editing is faster, more fluid,
and more flexible than ever before.Learn more</p>
<p><img src="img/article_1.png" alt="Article A"></p> <!--If you have video files instead then you can use <video> </video> in HTML5 -->
</li>
<li>
<p><h1>Powerful ogranization</h1></p>
<p>Final Cut Pro X makes it easy to organize and find your media, with automatic content analysis and
streamlined keywording tools.
<br> Learn more
</p>
<p><img src="img/article_2.png" alt="Article B"></p> <!--If you have video files instead then you can use <video> </video> in HTML5 -->
</li>
<li>
<p> <h1>Incredible performance</h1> </p>
<p>New 64-bit architecture. A ColorSync-managed color pipeline. Work at blazing speeds and with extraordinary quality.
<br>Learn more</p>
<p><img src="img/article_3.png" alt="Article C"></p> <!--If you have video files instead then you can use <video> </video> in HTML5 -->
</li>
</ul>
</div>
</article>
</section>
<footer></footer>
</div>
</body>
</html>
CSS Codes
/* BODY ---------------------- */
html, body
{
padding: 0px;
margin: 0px;
height: 100%;
color: whitesmoke;
font-family: 'Open Sans', sans-serif;
}
body
{
background-image: url(../img/bg-top.jpg),url(../img/bg.png);
width: 100%;
height: 100%;
background-repeat: no-repeat, repeat-y;
background-position:top center;
}
/* Text and Links ---------------------- */
h1{
font-weight: bolder;
color: #ffffff;
}
h2{
font-weight: bold;
}
h3{
color:#95c2eb;
font-weight: bold;
}
/* WRAPPER ( CONTENT ) ---------------------- */
#wrapper{
width: 1040px;
height: auto;
margin: 20px auto;
}
/* HEADER ---------------------- */
header{
width:980px;
height: 350px;
margin: 0 auto;
}
/* NAVIGATION ---------------------- */
nav{
font-size: 1.143em;
height: 40px;
line-height: 30px;
margin: 0 auto;
text-align: center;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 10px;
background-image: url(../img/button-bg.jpg); background-repeat: repeat;
}
nav ul{
list-style: none;
margin: 0 auto;
}
nav ul li {
float: left;
display: inline;
}
nav a:link, nav a:visited {
color: #fff;
display: inline-block;
height: 30px;
padding: 5px 20px;
text-decoration: none;
}
nav a:hover, nav a:active,
nav .active a:link, nav .active a:visited {
background: #CF5C3F;
color: #fff;
text-shadow: none !important;
}
nav li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.searchbar{
width:50px;
height:30px;
color:black;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#navBottom{
font-size: 1.143em;
line-height: 30px;
margin: 35px auto;
text-align: center;
height:auto;
width:980px;
}
#navBottomLeft{
width: 40%;
list-style: none;
margin:0;
padding:0;
float:left;
}
#navBottomLeft li{
float: left;
display: inline;
}
#navBottomRight{
width: 60%;
list-style: none;
margin:0;
padding:0;
float:left;
text-align:right;
}
#navBottomRight li{
display: inline;
text-align: right;
padding-left: 25px;
}
/* MAIN HEADER FOOTER ---------------------- */
.articleFooter{
font-size: 1.143em;
line-height: 30px;
margin:150px auto;
text-align: center;
}
/* SECTION ---------------------- */
section {
width: 1040px;
height: auto;
margin: 0 auto;
}
section header{
width: 1040px;
height: 640px;
}
.article{
width: 980px;
height: 1000px;
margin:0 auto;
margin-top: -70px;
background-image:url("../img/section_bg.png"); background-repeat:no-repeat;
}
.video{
width: 485px;
height: 100px;
margin: 50px 0 0 0;
float: left;
text-align: right;
padding-right: 15px;
}
.videoNote{
width: 480px;
height: 100px;
margin: 50px 0 0 0;
float: right;
color: #47a2d9;
font-size: 15px;
line-height: 1em;
padding: 0;
}
.specs{
width: 980px;
height: 560px;
float: left;
}
.specs ul{
list-style: none;
margin: 0;
padding: 0;
height: 100%;
}
.specs ul li {
width:275px;
height: 100%;
float: left;
text-align: left;
padding: 10px 20px 0 30px;
color: #c8c8c8;
}
PSD File
HTML Codes
<!DOCTYPE html>
<html>
<head>
<title>Creating Web Sites with HTML 5 and CSS 3</title>
<meta charset="utf-8"/>
<meta name="description" content=" HTML 5 Structure " />
<meta name="keywords" content="html5, css3"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/apple.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<nav>
<ul>
<li><a href="#">Main</a> </li>
<li><a href="#">Store</a> </li>
<li><a href="#">Mac</a> </li>
<li><a href="#">iPod</a> </li>
<li><a href="#">iPhone</a> </li>
<li><a href="#">iPad</a> </li>
<li><a href="#">iTunes</a> </li>
<li><a href="#">Support</a> </li>
<li><input class="searchbar" type="search" value="Search" name="search"></li>
</ul>
</nav>
<div id="navBottom">
<ul id="navBottomLeft">
<li>Final Cut Pro X </li>
</ul>
<ul id="navBottomRight">
<li> Top Features</li>
<li>All Features </li>
<li> Tech Specs </li>
<li> Buy Now </li>
</ul>
</div>
<article class="articleFooter">
<hgroup>
<h1>Final Cut Pro X</h1>
<h2>Everything just changed in post.</h2>
<h3>Download it now from the Mac App Store for $ 299.99</h3>
</hgroup>
</article>
</header>
<section>
<header>
<p> <img src="img/macbook.png" alt="MacBook Pro" title="MacBook Pro"> </p>
</header>
<article class="article">
<div class="video">
<img src="img/video.png" alt="Video" title="Video">
</div>
<div class="videoNote" >
<p> Watch the <br>Final Cut Pro <br>Overview </p>
</div>
<div class="specs">
<ul>
<li><p><h1>Revolutionary video editing</h1></p>
<p>With the Magnetic Timeline, Clip Connections, and other innovative features, editing is faster, more fluid,
and more flexible than ever before.Learn more</p>
<p><img src="img/article_1.png" alt="Article A"></p> <!--If you have video files instead then you can use <video> </video> in HTML5 -->
</li>
<li>
<p><h1>Powerful ogranization</h1></p>
<p>Final Cut Pro X makes it easy to organize and find your media, with automatic content analysis and
streamlined keywording tools.
<br> Learn more
</p>
<p><img src="img/article_2.png" alt="Article B"></p> <!--If you have video files instead then you can use <video> </video> in HTML5 -->
</li>
<li>
<p> <h1>Incredible performance</h1> </p>
<p>New 64-bit architecture. A ColorSync-managed color pipeline. Work at blazing speeds and with extraordinary quality.
<br>Learn more</p>
<p><img src="img/article_3.png" alt="Article C"></p> <!--If you have video files instead then you can use <video> </video> in HTML5 -->
</li>
</ul>
</div>
</article>
</section>
<footer></footer>
</div>
</body>
</html>
CSS Codes
/* BODY ---------------------- */
html, body
{
padding: 0px;
margin: 0px;
height: 100%;
color: whitesmoke;
font-family: 'Open Sans', sans-serif;
}
body
{
background-image: url(../img/bg-top.jpg),url(../img/bg.png);
width: 100%;
height: 100%;
background-repeat: no-repeat, repeat-y;
background-position:top center;
}
/* Text and Links ---------------------- */
h1{
font-weight: bolder;
color: #ffffff;
}
h2{
font-weight: bold;
}
h3{
color:#95c2eb;
font-weight: bold;
}
/* WRAPPER ( CONTENT ) ---------------------- */
#wrapper{
width: 1040px;
height: auto;
margin: 20px auto;
}
/* HEADER ---------------------- */
header{
width:980px;
height: 350px;
margin: 0 auto;
}
/* NAVIGATION ---------------------- */
nav{
font-size: 1.143em;
height: 40px;
line-height: 30px;
margin: 0 auto;
text-align: center;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 10px;
background-image: url(../img/button-bg.jpg); background-repeat: repeat;
}
nav ul{
list-style: none;
margin: 0 auto;
}
nav ul li {
float: left;
display: inline;
}
nav a:link, nav a:visited {
color: #fff;
display: inline-block;
height: 30px;
padding: 5px 20px;
text-decoration: none;
}
nav a:hover, nav a:active,
nav .active a:link, nav .active a:visited {
background: #CF5C3F;
color: #fff;
text-shadow: none !important;
}
nav li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.searchbar{
width:50px;
height:30px;
color:black;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#navBottom{
font-size: 1.143em;
line-height: 30px;
margin: 35px auto;
text-align: center;
height:auto;
width:980px;
}
#navBottomLeft{
width: 40%;
list-style: none;
margin:0;
padding:0;
float:left;
}
#navBottomLeft li{
float: left;
display: inline;
}
#navBottomRight{
width: 60%;
list-style: none;
margin:0;
padding:0;
float:left;
text-align:right;
}
#navBottomRight li{
display: inline;
text-align: right;
padding-left: 25px;
}
/* MAIN HEADER FOOTER ---------------------- */
.articleFooter{
font-size: 1.143em;
line-height: 30px;
margin:150px auto;
text-align: center;
}
/* SECTION ---------------------- */
section {
width: 1040px;
height: auto;
margin: 0 auto;
}
section header{
width: 1040px;
height: 640px;
}
.article{
width: 980px;
height: 1000px;
margin:0 auto;
margin-top: -70px;
background-image:url("../img/section_bg.png"); background-repeat:no-repeat;
}
.video{
width: 485px;
height: 100px;
margin: 50px 0 0 0;
float: left;
text-align: right;
padding-right: 15px;
}
.videoNote{
width: 480px;
height: 100px;
margin: 50px 0 0 0;
float: right;
color: #47a2d9;
font-size: 15px;
line-height: 1em;
padding: 0;
}
.specs{
width: 980px;
height: 560px;
float: left;
}
.specs ul{
list-style: none;
margin: 0;
padding: 0;
height: 100%;
}
.specs ul li {
width:275px;
height: 100%;
float: left;
text-align: left;
padding: 10px 20px 0 30px;
color: #c8c8c8;
}
PSD File
Wow! Thanks for this helpful tutorial!
ReplyDeleteThanks a lot. Let me know if you have any questions :)
ReplyDeleteBookmarked your page! Very helpful indeed. I also have a blog about CSS and HTML but I have not updated it with CSS3 yet. :)
ReplyDeletehttp://roldanherbosablog.wordpress.com/2013/12/21/structure-of-an-html-document/
http://roldanherbosablog.wordpress.com/2013/12/20/css-structure-basics/
I am actually building a website right now and I am falling in love with CSS3. ♥♥♥
Hi Roldan,
DeleteI have been swamped by a lot of projects at my work. I just saw this. But hopefully you have been learning some CSS 3. Let me know if you need any help.