Untitled

HTML

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title>Wilmington Academy</title>
</head>


<body>

<header>
	<div class="container1">
		<img class="logo" src="AcademyLogo.png">
		<nav>
			<ul class="nav">
				<li><a class="indexheader" href="index.html">Wilmington Academy</a></li>
				<li><a href="about.html">Year Groups</a></li>
			</ul>
		</nav>
	</div>
</header>


<div class="paragraph1" style="text-align: left; width:40%;"><h2>ABOUT US</h2>Wilmington Aademy is a school based in Kent. People come here for one of the best non grammar schools in Kent, Wilmington Academy is bound to get your grades up. Parents send there children here for the best possible education they can get if whether or not they pass there 11plus,  </p>
 <img src="picture1.jpg">
 </div>

<div class="paragraph2" style="text-align: right; width:40%; ">
<h2>OFSTED RATINGS</h2>
<p>Ofsted rated our school good, we can tell that they mean this because in their response they said this "You and your leadership team have maintained a good quality of education since
the last inspection. You are ambitious and passionate about pupils being provided
with the best educational opportunities." you can check out the whole review on the school website.</p>
<img  src="ofsted.png">
</div>

<footer class="footer-basic-centered">


			<p class="footer-company-name">Wilmington Academy &copy; 2015</p>

		</footer>


</body>
</html>


CSS

.title {
  color: blue;
}

body {
    margin:0;
}
header {
    width:100%;
    height:100px;
    background:#191d26;
    box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 3px;
}
.container1 {
  width:900px;
  margin:0 auto;
}

.HeaderBackground {
  border-bottom:1px solid #ccc;
}

header .logo {
  width:150px;
  margin:0 auto;
  margin-top:10px;
  float:left;
  -webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav {
  list-style-type:none;
  float:right;
  margin-top:40px;
}
.nav li {
  float:left;
}
.nav li a {
  background:#191d26;
  padding:10px 20px;
  margin-right:10px;
  border-radius:3px;
  text-decoration:none;
  color:#fff;
  -webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
font-family: 'Roboto', sans-serif;
text-transform:uppercase;
font-size:12px;
}
.nav li a:hover{
  color:#24b1be;
  border-bottom: 2px #5da044 solid;
  -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}


.paragraph1 {
width:100%;
overflow: hidden;
padding: 0 0 0 10px;
}

.paragraph1 p {
font-size: 15px;
font-family: 'Roboto', sans-serif;
float: left;
}


.footer-basic-centered{
  background-color: #191d26;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  font: normal 18px sans-serif;

  padding: 45px;
}

.footer-basic-centered .footer-company-name{
  color:  #8f9296;
  font-size: 14px;
  margin: 0;
}