For this lab you will create two HTML5 pages a main and seco

For this lab, you will create two HTML5 pages (a main and secondary) with on external CSS page to create a theme and layout of your choice. Your HTML5 pages must contain at a minimum: Two-column jello layout (each page) CSS background image positioned with CSS (each page) CSS border formatting (each page) One figure with a caption (at least one page) A favicon (each page) A banner with rounded corners and effects (each page) At least one floated image to the right (at least one page) At least one floated image to the left (at least one page) Navigation with a CSS-formatted unordered list (each page) Pseudo-classes for hyperlinks (each page) Other pseudo elements as appropriate (each page) Image gallery (at least one page) Header text with image (each page) Contact information and copyright within both page footers (each page) At least three specific HTML5 tags found in Chapter4 and Chapter6 (each page)

<head>
<title>Responsive Layout</title>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<link rel=\"stylesheet\" type=\"text/css\" href=\"reset.css\">
<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">
</head>
<body>
<div id=\"container\">

<header id=\"header\">
<h1 id=\"title\">Responsive Layout</h1>
</header>

<nav id=\"menu\" class=\"clearfix\">
<ul>
<li><a href=\"#\">Home</a></li>
<li><a href=\"#\">Portfolio</a></li>
<li><a href=\"#\">About</a></li>
<li><a href=\"#\">Contact</a></li>
</ul>
</nav>

<section id=\"content\">
<h2>Built with CSS3 and HTML5</h2>

</section>

<aside id=\"sidebar\">
<h3>This is the Sidebar</h3>

</aside>

<footer id=\"footer\" class=\"clearfix\">
Copyright &copy Andor Nagy 2015
</footer>
</div>
</body>
</html>

css
.........

nav {
width: 97%;
background-color: #E64A19;
padding: 0 1.5% 0 1.5%;
}
nav ul li {
display: inline-block;
padding: 15px 1.5% 15px 1.5% ;
}
nav ul li a {
text-decoration: none;
color: #ffffff;
font-size: 1.2em;
}
nav ul li a:hover {
color: #000000;
text-decoration: none;
}

#content {
float: left;
padding: 3%;
width: 64%;
}

aside {
float: right;
padding: 3%;
width: 24%;
background-color: #eee;
}

footer{
width: 94%;
padding: 3%;
background-color: #FF5722;
border-top: 5px solid #E64A19;
color: #fff;
text-align: center;
}

@media all and (max-width : 768px) {
header {
text-align: center;
}
nav {
text-align: center;
}
#content {
width: 94%;
padding: 3%;
}
#sidebar {
width: 94%;
padding: 3%;
border-top: 3px solid #E64A19;
}
}

@media all and (max-width : 330px) {
nav ul li {
display:block;
width: 94%;
}
}

For this lab, you will create two HTML5 pages (a main and secondary) with on external CSS page to create a theme and layout of your choice. Your HTML5 pages mu

For this lab you will create two HTML5 pages a main and seco

Solution

Get Help Now

Submit a Take Down Notice