For this lab, you will create two HTML5 pages (a main and secondary) with on ext
ID: 3925946 • Letter: F
Question
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)Explanation / Answer
<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 -->
<header id="header">
<h1 id="title">Responsive Layout</h1>
</header>
<!-- Navigation -->
<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>
<!-- Main Content area -->
<section id="content">
<h2>Built with CSS3 and HTML5</h2>
<!-- Main content -->
</section>
<!-- Sidebar -->
<aside id="sidebar">
<h3>This is the Sidebar</h3>
<!-- Sidebar content -->
</aside>
<!-- Footer -->
<footer id="footer" class="clearfix">
Copyright © 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%;
}
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.