<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<header class="frontPage">
<div class="sideLink"><span>Perfect</span> <a>Takapp.com</a></div>
<div class="container">
<div class="col-sm-6 col-xs-7 header">
<a href><img src="http://i66.tinypic.com/2ztja5v.png" class="logo"/></a>
<div class="headerText">
<h1>Picture Perfect</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="col-md-5 col-sm-4 col-xs-4 col-lg-offset-1">
<div class="phone">
<img src="http://i66.tinypic.com/28lh11w.png" alt="Iphone"/>
</div>
</div>
<div class="col-sm-6 col-xs-12 text-block">
<div class="grey-txt-block move-block">
<h2>Start something new</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
</p>
<p>
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem.
</p>
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="grey-txt-block">
<p>
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</p>
<p>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
</div>
</div>
</div>
</header>
<div class="clearfix"></div>
<section class="mainPage">
<div class="container-fluid gridBox">
<div class="row">
<div class="col-md-3 bg-one smallBox">
<h3>Design quality</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut adipisicing.
</p>
<a>Find out More</a>
</div>
<div class="col-md-3 bg-two smallBox">
<h3>Built to last</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut adipisicing.
</p>
<a>Find out More</a>
</div>
<div class="col-md-3 bg-three smallBox">
<h3>Our Clients</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut adipisicing.
</p>
<a>Get Insights</a>
</div>
<div class="col-md-3 bg-four smallBox">
<h3>How to shoo great</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut adipisicing.
</p>
<a>Find Out More</a>
</div>
</div>
<div class="row">
<div class="col-md-6 bg-five largeBox">
<h3>Sign up & see why</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut adipisicing.
</p>
<a>Get Started Now</a>
</div>
<div class="col-md-3 bg-six smallBox">
<h3>Perfect Picture</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut adipisicing.
</p>
<a>Find Out More</a>
</div>
<div class="col-md-3 bg-seven smallBox">
<h3>Start something new</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut adipisicing.
</p>
<a>Get Started Now</a>
</div>
</div>
</div>
<div class="container-fluid details">
<div class="sideLink"><a href="takpapp.com">TAKPAPP.COM</a></div>
<div class="container">
<h3>A look at the details</h3>
<div class="row detail-container">
<div class="col-sm-3 detailBox">
<h4>Web based</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-sm-3 detailBox">
<h4>Performance</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-sm-3 detailBox">
<h4>Clultral</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-sm-3 detailBox">
<h4>Sustainability</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
</div>
<div class="container-fluid fullimg">
<div class="container">
<div class="col-sm-6 col-xm-12 fullimg-txt">
<h1>More Power behind every pixel.</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<a>See the options</a>
</div>
</div>
</div>
<div class="container-fluid reasons">
<div class="sideLink"><a href>takpapp.com</a></div>
<div class="container">
<h2>Reasons to get onboard</h2>
<div class="row detail-container">
<div class="col-sm-4 detailBox">
<h4>Web based</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-sm-4 detailBox">
<h4>Team login</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-sm-4 detailBox">
<h4>Great Support</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
</div>
<div class="container-fluid price">
<div class="sideLink"><a>takpapp.com</a></div>
<div class="container">
<div class="col-md-6 goSolo">
<span class="legacy">LEGACY</span>
<h3>Go it solo</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
</p>
<button class="btn btn-buy">BUY NOW $9</button>
</div>
<div class="col-md-6 teamPlan">
<span class="mostPopular">MOST POPULAR</span>
<h3>Team Plan</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
</p>
<button class="btn btn-buy">BUY NOW $18</button>
<div></div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-6">
<h4>Get in touch</h4>
<p class="gt-txt">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-md-5 col-md-offset-1">
<h4>Stay in touch</h4>
<div class="input-group">
<label></label>
<input type="email" class="form-control" placeholder="Your Email Address">
<span class="input-group-btn">
<button class="btn btn-sub">Tick</button>
</span>
</div>
<div class="serviceMsg">We don’t send spam. Actually, who are we kiding, we’ll spam<br/> the shit out of you’r inbox</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6col-sm-12 footerMenu">
<div class="col-xs-3 fm1">
<h4>Resources</h4>
<a>Tour</a><br/>
<a>Customers</a><br/>
<a>Pricing and Plans</a><br/>
<a>New Features</a><br/>
<a>Education</a><br/>
</div>
<div class="col-xs-3 fm2">
<h4>Features</h4>
<a>Tour</a><br/>
<a>Customers</a><br/>
<a>Pricing and Plans</a><br/>
<a>New Features</a><br/>
<a>Education</a><br/>
</div>
<div class="col-xs-3 fm3">
<h4>How To's</h4>
<a>Tour</a><br/>
<a>Customers</a><br/>
<a>Pricing and Plans</a><br/>
<a>New Features</a><br/>
<a>Education</a><br/>
</div>
</div>
</div>
</div>
</footer>
*{
margin: 0;
padding: 0;
}
a:hover{cursor: pointer; text-decoration: none;}
body{
font-family: 'Open Sans', sans-serif;
font-size: 14px;
}
.frontPage {
background-image: url(http://i66.tinypic.com/10yme6q.jpg);
background-position-x: 60%;
background-position-y: 90%;
background-size: cover;
background-repeat: no-repeat;
position: relative;
width: 100%;
height: 90vh;
margin-bottom: 0;
}
.logo {
margin-top: 55px;
margin-bottom: 22vh;
}
.headerText {
color: #fff;
max-width: 470px;
}
.headerText p {
font-size: 13px;
line-height: 24px;
text-align: justify;
}
.headerText h1 {
font-family: 'Open Sans Light', sans-serif;
margin-bottom: 1.5rem;
}
.phone {
margin-top: 30vh;
}
.phone img {
height: 90vh;
}
.move-block {
margin-top: -120px;
}
.grey-txt-block p {
color: #aaaaaa;
margin-top: 1.5rem;
text-align: justify;
}
.sideLink{
font-family: 'Open Sans Light', sans-serif;
font-size: 12px;
text-transform: uppercase;
position: absolute;
transform: rotate(270deg);
left: -35px;
margin-top: 30rem;
}
.sideLink span{
color: #c8d9de;
}
.sideLink a{
font-family: 'Open Sans Semibold', sans-serif;
color: #fff;
}
.gridBox{margin-top: 80px;}
.gridBox, .gridBox a{
color: #fff;
}
.smallBox h3, .largeBox h3{
font-family: 'Open Sans Light', sans-serif;
font-size: 30px;
}
.smallBox p, .largeBox p{
font-size: 13px;
margin-top: 20px;
}
.smallBox a, .largeBox a{
font-size: 14px;
font-weight: bold;
position: absolute;
bottom: 50px;
}
.smallBox, .largeBox{
height: 278px;
padding-top: 30px;
padding-left: 30px;
padding-right: 25px;
position: relative;
}
.gridBox .bg-one{
background-color: #f5989d;
}
.gridBox .bg-two{
background-color: #615f7d;
}
.gridBox .bg-three{
background: url(http://i64.tinypic.com/2je34fc.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.gridBox .bg-four{
background-color: #bd8cbf;
}
.gridBox .bg-five{
background: url(http://i63.tinypic.com/14xi3df.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.gridBox .bg-six{
background-color: #82ca9c;
}
.gridBox .bg-seven{
background: url(http://i67.tinypic.com/10d7hmr.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.details{ position: relative; padding: 100px 0px;}
.details .sideLink{
margin-top: 15rem;
margin-left: 15px;
}
.details .sideLink a{ color: #b8b8b8;}
.details h3{
font-family: 'Open Sans Light', sans-serif;
font-size: 35px;
color: #222626;
}
.detail-container{ margin-top: 69px;}
.detailBox h4{
font-family: 'Open Sans Semibold', sans-serif;
margin-left: 10px;
font-size: 13px;
color: #67676d;
}
.details .detailBox p{ text-align: left;}
.detailBox p{
font-size: 14px;
color: #959595;
margin-top: 30px;
text-align: justify;
}
.fullimg{
background: url(http://i65.tinypic.com/svt475.jpg);
background-size: cover;
height: 874px;
color: #fff;
}
.fullimg .container{position: relative;}
.fullimg .fullimg-txt{
margin-top: 40rem;
}
.fullimg .fullimg-txt h1{
font-family: 'Open Sans Light', sans-serif;
font-size: 60px;
}
.fullimg .fullimg-txt p{
font-size: 13px;
margin-top: 40px;
margin-bottom: 25px;
}
.fullimg a{
font-weight: bold;
color: #fff;
}
.reasons{
position: relative;
background-color: #82ca9c ;
color: #fff;
padding: 130px 0px;
}
.reasons .sideLink{
margin-top: 10rem;
margin-left: 2rem;
}
.reasons h2{
font-family: 'Open Sans Light', sans-serif;
font-size: 35px;
}
.reasons .detailBox h4, .reasons .detailBox p{
margin-left: 0;
color: #fff
}
.price{
position: relative;
background-color: #f6f7fa;
padding: 100px 0 145px 0;
}
.price .sideLink{
margin-top: 7.6rem;
margin-left: 3rem;
}
.price .sideLink a{color: #b8b8b8;}
.goSolo .legacy{
font-family: 'Open Sans Extrabold', sans-serif;
font-size: 11px;
color: #fff;
padding: 8px 17px;
background-color: #e1e1e1;
border-radius: 6px;
}
.teamPlan .mostPopular{
font-size: 11px;
font-weight: bold;
padding: 8px 13px;
background-color: #bd8cbf;
border-radius: 6px;
color: #fff;
}
.price .teamPlan{
background-color: #ffffff;
box-shadow: 1px 1px 40px 1px rgba(0,0,0,.2);
}
.price .teamPlan, .price .goSolo{
height: 380px;
padding: 4.7rem 6rem;
}
.price h3{
margin-top: 24px;
margin-bottom: 27px;
font-family: 'Open Sans Light', sans-serif;
font-size: 30.04px;
color: #2e3b4e;
}
.price p{
font-size: 14.02px;
color: #8297a7;
margin-bottom: 30px;
text-align: justify;
}
.price .btn-buy{
background-color: #82ca9c;
padding: 13px 26px;
font-weight: bold;
font-size: 13.02px;
color: #fff;
}
footer{
color: #f6f7fa;
background-color: #192431 ;
padding-top: 130px;
padding-bottom: 157px;
}
footer h4{
font-family: 'Open Sans Semibold', sans-serif;
font-size: 13px;
}
footer p{ text-align: justify;}
footer p, footer a{
font-size: 13px;
color: #f6f7fa;
line-height: 25px;
}
footer .serviceMsg{
font-size: 12px;
color: #57697f;
margin-top: 18px;
}
footer .footerMenu{
margin-top: 70px;
padding: 0;
}
footer .fm1, footer .fm2, footer .fm3{margin-right: 20px;}
footer .gt-txt, footer .input-group{ margin-top: 29px;}
footer .input-group .form-control, footer .input-group .input-group-btn .btn-sub{ height: 58px;}
footer .input-group .form-control{font-size: 1.4em;}
footer .input-group .input-group-btn .btn-sub{
width: 70px;
background-color: #82ca9c;
}
@media screen and (max-width:992px){
.phone img{
height: 80vh;
}
}
@media screen and (max-width:800px){
.sideLink{
display: none;
}
}
@media screen and (max-width: 768px){
.phone{
margin-top: 54vh;
margin-left: -50px;
}
.phone img{
height: 58vh;
}
.text-block{
margin-top: 5vh;
}
}
@media screen and (max-width: 583px){
.phone{
display: none;
}
.text-block{
margin-top: 55vh;
}
.header{
width: 100%;
}
}
@media screen and (max-width: 480px){
.fullimg .fullimg-txt h1{
font-size: 40px;
}
.price .teamPlan, .price .goSolo{
height: auto;
padding: 5rem 3rem;
}
}
@media screen and (max-width: 320px){
.fullimg{
padding: 0px;
}
}
