RWD - Andrews Home Page Landing

RWD - Andrews Home Page Landing

by Andrew Pougher

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="andrewBox">
    <div class="andrewBox-content  wrapper">
        <div class="andrewBox-content-text">
             <h1 class="andrewBox-title">ANDREW POUGHER - DESIGNER</h1>

             <h2 class="andrewBox-subtitle">
                <span class="andrewBox-subtitle-text">
                    Creator of BrandOral, Dermamor Ltd and a range of digital media.
                </span>
            </h2>
 <a href="#plans" class="btn  btn-pougher  js-smoothScroll">View Work <i class="fa fa-arrow-down"></i></a>

        </div>
        <!- /.andrewBox-content-text ->
    </div>
    <!- /.andrewBox-content ->
</div>

CSS

* {
  border-radius: 0 !important;
  -moz-border-radius: 0 !important;
}

html {
  background:#eee;
  font-family:sans-serif;
  -ms-text-size-adjust:100%;
  -webkit-text-size-adjust:100%
}

body {
  margin:0
}

a:focus {
  outline:thin dotted
}

a:active,a:hover {
  outline:0
}

div.andrewBox {
  background:url(http://lorempixel.com/800/1000/) no-repeat center center fixed;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover
}

.andrewBox {
  height:600px;
  position:relative;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
  -webkit-transition:height 400ms linear;
  -moz-transition:height 400ms linear;
  -o-transition:height 400ms linear;
  -ms-transition:height 400ms linear;
  transition:height 400ms linear
}

@media (max-width: 767px) {
.andrewBox {
  height:400px
}
}

@media (min-width: 768px) and (max-width: 1199px) {
.andrewBox {
  height:500px
}
}

@media (min-width: 1500px) {
.andrewBox {
  height:700px
}
}

@media (min-width: 1900px) {
.andrewBox {
  height:800px
}
}

.andrewBox-content-text {
  position:absolute;
  bottom:70px;
  -webkit-transition:bottom .3s linear;
  -moz-transition:bottom .3s linear;
  -o-transition:bottom .3s linear;
  -ms-transition:bottom .3s linear;
  transition:bottom .3s linear
}

.andrewBox-content-text:before,.andrewBox-content-text:after {
  content:" ";
  display:table
}

.andrewBox-content-text:after {
  clear:both
}

.andrewBox-content-text .btn {
  float:right
}

@media (max-width: 767px) {
.andrewBox-content-text .btn {
  font-size:16px;
  font-size:1rem;
  padding-top:10px;
  padding-top:.625rem;
  padding-bottom:10px;
  padding-bottom:.625rem;
  padding-right:16px;
  padding-right:1rem;
  padding-left:16px;
  padding-left:1rem
}
}

@media (min-width: 768px) and (max-width: 1199px) {
.andrewBox-content-text {
  max-width:65%
}
}

@media (max-width: 767px) {
.andrewBox-content-text {
  max-width:70%;
 ...