My girlfriend and a friend started a Kiwanis club around here, so I figured it would be a good opportunity to try coding my first website. I'm pretty new to coding still and it's pretty basic, so I'm just looking for general pointers or any bad practices I may be doing.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kiwanis of Kennett Square</title>
<meta charset="utf-8">
<link href="css/styles.css" type="text/css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Ruda' rel='stylesheet' type='text/css'>
</head>
<body class="body">
<div id="page">
<header class="mainHeader">
<div class="socialBar">
<img id="logo" src="images/kiwanis_logo_transparent.png" alt="Kiwanis Logo">
<h1 align="right">Kiwanis of Kennett Square</h1>
<h2>Find us on: </h2>
<a href="https://www.facebook.com/kiwanisKSQ" target="_blank"><img id="socialLogo" src="images/facebook.png" alt="Facebook"></a>
<a href="http://www.twitter.com" target="_blank"><img id="socialLogo" src="images/twitter.png" alt="Twitter"></a>
<a href="http://www.instagram.com" target="_blank"><img id="socialLogo" src="images/instagram.png" alt="Instagram"></a>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<content class="content">
<img src="images/masthead.jpg" alt="Masthead">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet felis nulla. Aliquam at ligula porttitor, eleifend quam at, congue urna. Duis vehicula aliquam lectus, sed pharetra orci aliquet et. Pellentesque felis sem, auctor a erat eu, dignissim gravida enim. Ut eget est justo. In ac pharetra ipsum. In a metus feugiat, aliquam metus in, lobortis lectus. Integer non dolor felis. Suspendisse condimentum a ex faucibus tempus. Curabitur blandit mi aliquam, aliquam libero et, hendrerit tortor. Vivamus non tortor ultrices, auctor arcu ut, luctus risus. Ut a elementum leo, quis porta augue.
</p>
<br>
<p>
Suspendisse eget enim arcu. In arcu dui, faucibus eget vehicula eget, hendrerit ut urna. Nunc venenatis vestibulum luctus. Etiam magna purus, posuere rutrum diam sed, porttitor condimentum velit. Proin dapibus ligula eget tellus efficitur, a maximus lectus tristique. Duis nunc risus, vehicula at dignissim sed, vehicula ut libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed odio lobortis, viverra ipsum ut, tincidunt enim. Fusce est nulla, viverra sed blandit eget, ullamcorper sed ipsum. Donec laoreet euismod tortor, vel dapibus turpis semper a. Duis et lacus nec odio volutpat eleifend id ac mauris. Duis non orci sed urna congue rutrum. Pellentesque id dapibus eros, ut cursus elit. Cras at tellus id nulla posuere tempor. Sed eu pulvinar nibh. Sed eleifend pellentesque imperdiet.
</p>
<br>
<p>
Nunc et orci mauris. Nulla at odio lorem. Donec condimentum commodo elit vitae aliquam. Integer eget sagittis elit. Nulla facilisi. Aenean vel vehicula felis. Integer nec sapien et dui semper sagittis. Vivamus eu ex ut urna mattis iaculis. Maecenas auctor accumsan iaculis. Donec in arcu nisl.
</p>
</content>
<div class="mainFooter">
<p>Email us at: <a href="mailto:[email protected]" target="_top">[email protected]</a>
</p>
</div>
</div>
</body>
</html>
.body {
font-family: 'Ruda', sans-serif;
font-size: 87.5%;
background-color:#efefef;
margin: 0 auto;
width: 60%;
clear:both;
line-height:1.5;
}
/*
======= MAIN HEADER =======
*/
.mainHeader {
margin:5px auto 5px auto;
}
.mainHeader img {
width: 15%;
display: inline;
margin: 0 auto 0 auto;
padding: 5px 0 5px 0;
}
.mainHeader li {
font-size: 150%;
display:inline;
margin: 0px 25px;
font-weight: bold;
letter-spacing: .5px;
}
.mainHeader nav {
background-color: #00457C;
}
.mainHeader ul {
text-align: center;
padding: 10px;
}
.mainHeader h1 {
color: #193365;
display: inline;
font-size: 300%;
padding: 0px 0px 0px 50px;
}
/*
======= SOCIAL BAR =======
*/
.socialBar {
text-align: right;
}
.socialBar h2 {
display: inline;
padding-right: 5px;
}
.socialBar h1 {
display: block;
}
.socialBar img {
width: 4%;
padding: 0px 5px 0px 5px;
}
.socialBar a {
display:inline;
}
#logo {
float:left;
width:12%;
}
/*
======= MAIN CONTENT =======
*/
.content p {
width: 90%;
margin: 0 auto;
padding: 10px 0px 10px 0px;
}
.content img {
width:75%;
display:block;
margin: 0 auto;
padding: 5px 0 5px 0;
}
#contactform {
display:block;
margin-left:auto;
margin-right:auto;
}
a {
text-decoration: none;
text-transform:uppercase;
color: white;
}
a:hover {
text-decoration: underline;
}
/*
======= MAIN FOOTER =======
*/
.mainFooter {
background-color: #00457C;
font-size: 150%;
margin: 0px auto 0px auto;
color:white;
text-align: right;
width:100%;
}
.mainFooter p {
padding: 10px;
}
