I start web building class about 7 week ago and I have this as a final home work , but I have been stuck and confuse for the last 8 day. Can someone please help me to get this done: I have been given an image for HEADER-BACKGROUND ( ) and a HTML SHEET but not to be modify, instead I have been require to create a CSS to style the page as shown below:
–/My Html Not to be Modify/:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ultimate Frisbee - History</title>
<link rel="stylesheet" href="css/hw1.css">
</head>
<body>
<header>
<h1>Ulimate Frisbee History</h1>
<nav>
<a href="index.html">Home</a>
<a href="teams.html">Teams</a>
<a href="history.html" class = "active">History</a>
<a href="http://www.usaultimate.org/index.html" target="_blank">USA Ultimate</a>
</nav>
</header>
<main>
<aside class = "left">
<a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee%2C_Jul_2009_-_17.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Ultimate_Frisbee%2C_Jul_2009_-_19.jpg" alt="Creative Common Ultimate Photo" title="By Ed Yourdon [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons"/> </a>
<a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee_Colorado_Cup_2005.jpg"><img alt="Ultimate Frisbee Colorado Cup 2005" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Ultimate_Frisbee_Colorado_Cup_2005.jpg/512px-Ultimate_Frisbee_Colorado_Cup_2005.jpg"/></a>
<a href="https://www.flickr.com/photos/paradisecoastie/15409853738/" title="Ultimate Frisbee"><img src="https://farm4.staticflickr.com/3948/15409853738_7dbfbfbac7_k.jpg" alt="Ultimate Frisbee"></a>
</aside>
<section class = "right">
<h2>Background</h2>
<p>Ultimate Frisbee/Ultimate has been around in some fashion since the 1960s. Joel Silver is credited with introducing the game to his high school in 1968 after learning about the game at summer camp. The game spread to more college campuses soon afterward.</p>
<p>The Ultimate Players Association was founded in 1979 and began organizing touraments across the country. In 2010, UPA because the <a href = "htpp://http://www.usaultimate.org/index.html">USA Ultimate</a>.</p>
<p>Other than professional tournaments, games of Ultimate are typically played without referess. Instead, players rely on "The Spirit of the Game" to encourage sportsmanship and self-officiating.</p>
<h2>Sources</h2>
<ul>
<li><a href = "https://en.wikipedia.org/wiki/Ultimate_(sport)">Ultimate (sport)</a></li>
<li><a href = "http://www.wfdf.org/">World Flying Disc Federation</a></li>
</ul>
</section>
</main>
</body>
</html>
—/*MY CSS */–: here I am stuck !!
body {
font-family: aria,time new roman, serif;
font-size: 1.5em;
background-color: #B0E2FF;
}
.main {
width:960px;
margin: 0 auto;
}
header {
background-color: royalblue;
height: 205px;
width: auto;
margin:2%;
text-align: center;
}
header {
background: url(images/flywheel.jpg) no-repeat top fixed ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
img {
width: 85%;
height: auto;
display: block;
margin-bottom: 2%;
border:3px solid #000000;
margin: 2%;
margin-left: auto;
margin-right: auto;
}
nav{
font-variant: small-caps;
font-family: Arial, "Times New Roman", serif;
font-size: 150%;
margin-right: 3%;
}
nav a {
min-width: 8em;
float: left;
margin-right: 2em;
margin-left: 35px;
text-align: center;
text-decoration: none;
padding-bottom: 15px;
}
nav a:link,
nav a: visited {
background-color:#BFEFFF;
opacity: 0.1;
width: 20%;
display:inline-block;
padding: 0.4em;
margin: 0 0 0.4em 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius:5;
-o-border-radius:5px;
border-radius: 5px;
}
section {
position: absolute;
top: 240px;
right: 0;
width: 55em;
margin-bottom: 55em;
margin-right: 4%;
}
aside {
background-color: #698B22;
width: 19em;
height: 70em;
margin-left: 2%;
margin-top: 0;
}
–/THIS IS A WEB THAT I AM REQUIRE TO BUILD/–
