I'm almost done with the final section of my homepage... the footer.
Any tips on how to float two icons (images) side by side? I'm familiar with hover effects, just need help with positioning them correctly.
Thank you!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Aesthetic Media</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,500' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="styles.js"></script>
</head>
<body>
<header>
<a class="logo" href="main.html">Aesthetic</a>
<nav>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</nav>
<div class="clears"></div>
<div class="maintext">
<h1>We're Aesthetic</h1>
<h2>A Visual Agency from Niagara</h2>
</div>
</header>
<main>
<h2 class="whatwedo">Expertise</h2>
<div class="whatwedobox one"><div class="branding"><img src="images/branding.png" class="branding"><h3>Branding</h3></br><p>Are you looking for the competitive edge that will boost your business ahead of others? Look no further then Aesthetic... We're here to help.</p></div></div>
<div class="whatwedobox two"><div class="motion"><img src="images/motion.png" class="motion"><h3>Motion</h3></br><p>No matter the message you're trying to convey, we at Aesthetic will transform your idea, creating an incredible and memorable audio visual experience.</p></div></div>
<div class="whatwedobox three"><div class="design"><img src="images/design.png" class="branding"><h3>Design</h3></br><p>Our talented team, here at Aesthetic is ready to help take your business to the sky! If you're looking for a professional, user friendly and beautifully designed website, just let us know!</p></div></div>
</main>
<div class="secondary">
<h2>We bring out the beauty in anything and everything.</h2>
<h3>Aesthetic Media</h3>
</div>
<footer>
<a class="logotwo" href="main.html">Aes</a>
<nav>
<li><a href="#" class="facebook" title="Facebook Page"></a></li>
<li><a href="#" class="Mail" title="Contact Us!"></a></li>
</nav>
</footer>
<script src="https://ajax.googleapis.com/ajax/libsLorem/jquery/1.11.2/jquery.min.js"> </script>
</body>
</html>
CSS
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body {
background: white;
}
header {
width: 100%;
height: 550px;
background: white;
background: url('images/main.jpg') center center;
background-size: cover;
padding: 30px 30px 30px 30px;
position: relative;
}
...