JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9" lang="en" itemscope itemtype="http://schema.org/Product"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en" itemscope itemtype="http://schema.org/Product"> <!--<![endif]-->
<!-- To Do:
Sources:
Reason For camera choice
Other Paragraphs
Final Cleanups
-->
<!--
Links:
Canon
Lens: http://www.samys.com/p/Lenses---Zoom/2569A004/EF-70-200mm-f/2.8L-USM-Telephoto-Zoom-Lens/5141.html
Body:http://www.henrys.com/23776-CANON-EOS-5D-MK-II-DIGITAL-SLR-BODY.aspx
Total:2984.99 $
Sigma:
Body:http://www.bhphotovideo.com/c/product/846208-REG/Sigma_C26900_SD1_Merrill_Digital_SLR.html 1799$ Lens:http://www.bhphotovideo.com/c/product/689583-REG/Sigma_589110_70_200mm_F2_8_EX_DG.html 1,249$
Total 3048$
-->
<head>
<meta charset="utf-8">
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/b/378 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Active Mountain - Extreme Mountain Photography</title>
<meta name="description" content="The Nations Leading Mountain Sports Photographer" />
<meta name="keywords" content="Active Mountain Extreme Mountain Photography The Nations Leading Mountain Sports Photographer" />
<meta name="author" content="Denver Barr - 22T">
<link rel="shortcut icon" href="http://22twenty.com/ph/favicon.png" type="image/x-icon" />
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
<!-- CSS: implied media=all...
CSS
@font-face
{
font-family: ProximaNova;
src: url('../font/ProximaNova-Light.otf'),
url('../font/ProximaNova-Light.otf'); /* IE9+ */
}
#firstsection{
width:100%;
height:600px;
background-image: url('http://22twenty.com/ph/img/mountain1.jpeg');
border-bottom:3px solid white;
}
.logo{
padding-top:140px;
font-size:130px;
}
.logo, .sublogo{
color:white;
font-family: ProximaNova;
line-height: 100px;
width:100%;
}
.sublogo{
line-height: 40px;
font-size:50px;
}
#secondsection{
min-height:350px;
width:100%;
background-image: url('http://22twenty.com/ph/img/billie_holiday.png');
}
#thirdsection{
width:100%;
color:white;
text-align: center;
}
#thirdsection h1 h2 h3 h4{
display: inline;
}
#thirdsubsection1{
background-color:#4096EE;
width:50%;
float:left;
height:100%;
}
#thirdsubsection2{
background-color:#356AA0;
width:50%;
float:right;
height:100%;
}
.face{
float:right;
}
.comparetitle{
color:white;
}
.comparetitle h3{
float:left
}
.camera{
margin:auto;
}
.decider{
min-height:208px;
}
#fourthsection1{
width:100%;
height:500px;
background-color: blue;
}