Split UI Landing Page

chihuahua rescue international

Great things come
in small packages.

Save a life today.

"It’s like Tinder, but for chihuahua adoption."

- Julie M, happy chihuahua owner

Saving lives since 2012

Chihuahua Rescue International has rescued thousands of lovely
chihuahuas since 2012. Our results would only be possible with
our amazing community! We have volunteers around the world
from adoption counsellors to web developers. Our app is the
#1 dog adoption app both on the Google Play store and in the
Apple Store. Contact us today to get involved.

name:scooter

gender:male

age:3 weeks

hobbies:naps & snacks

chihuahua rescue international 2015

Source: http://codepen.io/picks/19/
Code:

chihuahua rescue international

Great things come
in small packages.

Save a life today.

"It’s like Tinder, but for chihuahua adoption."

- Julie M, happy chihuahua owner

Saving lives since 2012

Chihuahua Rescue International has rescued thousands of lovely
chihuahuas since 2012. Our results would only be possible with
our amazing community! We have volunteers around the world
from adoption counsellors to web developers. Our app is the
#1 dog adoption app both on the Google Play store and in the
Apple Store. Contact us today to get involved.

name:scooter

gender:male

age:3 weeks

hobbies:naps & snacks

chihuahua rescue international 2015

CSS:
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);body,h1,h2,h3,h4,h5,p,blockquote{padding:0;margin:0}a{color:#353535}a:active,a:visited{color:#353535}a:hover{color:#f00}p{font-weight:300}html{height:100%}body{color:#fff;;font-family:'Open Sans',sans-serif;text-align:center;position:relative;height:100%;background:#C44938}.puppy.puppy1{margin-left:10%;}@media (max-width:675px){body{font-size:80%}}#contentWrap{overflow:hidden;height:100%;min-height:47em;}#contentWrap .left,#contentWrap .right{height:100%;box-sizing:border-box;overflow:hidden;position:relative;width:calc(99.999999% * 1/2)}#contentWrap .left:nth-child(n),#contentWrap .right:nth-child(n){float:left;margin-right:0;clear:none}#contentWrap .left:last-child,#contentWrap .right:last-child{margin-right:0}#contentWrap .left:nth-child(2n),#contentWrap .right:nth-child(2n){margin-right:0}#contentWrap .left:nth-child(2n+1),#contentWrap .right:nth-child(2n+1){clear:left}#contentWrap .left{padding:0 10% 0 10%;text-align:left;box-shadow:2px 2px 2px 1px rgba(0,0,0,.5);z-index:15;background:#F65C46}#contentWrap .left header{padding:3.5em 0 0;overflow:hidden}#contentWrap .left header svg{width:20px;float:left}#contentWrap .left header h1{padding:.2em 0 0 1em;font-size:3em;font-weight:300;float:left}#contentWrap .left h3{padding:4em 0 0;font-size:1.3em;font-weight:400;line-height:1.2}#contentWrap .left h3 br{display:none}#contentWrap .left h4{font-size:1.5em}#contentWrap .left blockquote{padding:5em 0 0;font-size:.8em}#contentWrap .left p.quoteSource{font-size:.7em}#contentWrap .left blockquote,#contentWrap .left p.quoteSource{width:95%;text-align:right}#contentWrap .left h5{padding:2em 0 0;font-size:1.4em}#contentWrap .left p.copyParagraph{padding:1em 0;line-height:1.5}#contentWrap .left h5,#contentWrap .left p.copyParagraph{}#contentWrap .right{width:calc(99.999999% * 1/2);background:#C44938}#contentWrap .right:nth-child(n){float:left;margin-right:0;clear:none}#contentWrap .right:last-child{margin-right:0}#contentWrap .right:nth-child(2n){margin-right:0}#contentWrap .right:nth-child(2n+1){clear:left}#contentWrap .right .salmonStrip{height:1em;width:100%;background:#F77C6B;z-index:1}#contentWrap .right #sliderFrame{width:100%;height:467px;position:relative}#contentWrap .right #sliderFrame .image{width:100%;height:467px;background:50% 25% no-repeat;background-size:cover;position:absolute;top:0;left:0}#contentWrap .right #sliderFrame .image.image1{background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/233461/puppy-in-cup.jpg);z-index:5}#contentWrap .right #puppyInfoBox{padding:507px 0 0;clear:both}#contentWrap .right #puppyInfoBox .puppy p{font-weight:300;overflow:hidden}#contentWrap .right #puppyInfoBox .puppy p .infoLeft{width:calc(99.99% * 5/12-(12px-12px * 5/12));text-align:right}#contentWrap .right #puppyInfoBox .puppy p .infoLeft:nth-child(n){float:left;margin-right:12px;clear:none}#contentWrap .right #puppyInfoBox .puppy p .infoLeft:last-child{margin-right:0}#contentWrap .right #puppyInfoBox .puppy p .infoLeft:nth-child(12n){margin-right:0}#contentWrap .right #puppyInfoBox .puppy p .infoLeft:nth-child(12n+1){clear:left}#contentWrap .right #puppyInfoBox .puppy p .infoRight{width:calc(99.99% * 7/12-(30px-30px * 7/12));text-align:left}#contentWrap .right #puppyInfoBox .puppy p .infoRight:nth-child(n){float:left;margin-right:30px;clear:none}#contentWrap .right #puppyInfoBox .puppy p .infoRight:last-child{margin-right:0}#contentWrap .right #puppyInfoBox .puppy p .infoRight:nth-child(12n){margin-right:0}#contentWrap .right #puppyInfoBox .puppy p .infoRight:nth-child(12n+1){clear:left}#contentWrap .right .ctaRow a.ctaButton{padding:.25em;margin:9.75em auto 0;color:#fff;text-decoration:none;display:block;clear:both;width:13em;border:1px solid #fff;border-radius:20px}#contentWrap .right .ctaRow a.ctaButton:hover{background:#F77C6B;border-color:#F77C6B}#contentWrap .right footer{position:absolute;bottom:1em;right:1em}#contentWrap .right footer p{font-size:70%; margin-left:25%;}@media (max-width:675px){#contentWrap{min-height:67em}}@media (max-width:675px){#contentWrap .left,#contentWrap .right{width:calc(99.999999% * 1/1);height:auto}#contentWrap .left:nth-child(n),#contentWrap .right:nth-child(n){float:left;margin-right:0;clear:none}#contentWrap .left:last-child,#contentWrap .right:last-child{margin-right:0}#contentWrap .left:nth-child(1n),#contentWrap .right:nth-child(1n){margin-right:0}#contentWrap .left:nth-child(1n+1),#contentWrap .right:nth-child(1n+1){clear:left}}@media (max-width:675px){#contentWrap .left{min-height:15em;box-shadow:none}}@media (max-width:675px){#contentWrap .left h3{padding:2em 0 0}}@media (min-width:1000px) and (max-width:1275px){#contentWrap .left h3 br{display:block}}@media (min-width:1000px) and (max-width:1275px){#contentWrap .left h3,#contentWrap .left h4{margin-left:10%}}@media (max-width:1000px){#contentWrap .left blockquote,#contentWrap .left p.quoteSource{display:none}}@media (max-width:1000px){#contentWrap .left h5{padding:4em 0 0}}@media (min-width:675px) and (max-width:1000px){#contentWrap .left h5,#contentWrap .left p.copyParagraph{font-size:90%}}@media (max-width:675px){#contentWrap .left h5,#contentWrap .left p.copyParagraph{display:none}}@media (max-width:675px){#contentWrap .right #puppyInfoBox{padding:40px 0 40px 18px;position:absolute;bottom:1%;left:2.5%;border-radius:100%;z-index:10;background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/233461/salmon-circle-with-shadow.png) no-repeat 50% 50%}}@media (max-width:675px){#contentWrap .right .ctaRow a.ctaButton{padding:1em;margin:3em auto 3em;font-size:1.5em}}