Created
January 15, 2018 14:57
-
-
Save JamesHusband/427913106ff5f938b025ea4d9dc08904 to your computer and use it in GitHub Desktop.
HOW NOW TO DO CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* MAIN CSS */ | |
body { | |
background: url('https://lsm-public-bucket.s3.amazonaws.com/sfsg/creativesuites/dracular/desktop/bg_desktop.png'); | |
background-size: cover; | |
} | |
#wrapper { | |
width: 1040px; | |
padding-left: 20px; | |
padding-right: 20px; | |
} | |
#container { | |
position: relative; | |
width: 1040px; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
#wrapper .content-container { | |
width: 100%; | |
height: 100%; | |
} | |
#wrapper .content-container .mobileOnlyArea { | |
display: none; | |
} | |
/* OFFER (LEFT SIDE) */ | |
#wrapper .content-container #offer { | |
height: 100%; | |
min-height: 600px; | |
background: #2A5571; | |
border-right: #30B9E6 5px solid; | |
} | |
#wrapper .content-container #offer .offerText { | |
background: #719EBC; | |
width: 80%; | |
max-width: 450px; | |
padding: 15px 0 15px 0; | |
margin: 25px auto 0 auto; | |
color: #FFF; | |
text-align: center; | |
} | |
/* OFFER HEADING */ | |
#wrapper .content-container #offer .offerText h1 { | |
margin: 0 0 10px 0; | |
font-size: 80px; | |
line-height: 1; | |
font-weight: bold; | |
font-family: 'Futura lt', Helvetica, Arial, 'san-serif'; | |
} | |
#wrapper .content-container #offer .offerText h2 { | |
margin: 0; | |
font-size: 45px; | |
font-weight: bold; | |
font-family: 'Futura lt', Helvetica, Arial, 'san-serif'; | |
} | |
/* OFFER IMAGES */ | |
#wrapper .content-container #offer .imageSelections { | |
min-width: 535px; | |
max-width: 535px; | |
margin: 0 auto; | |
display: block; | |
position: relative; | |
} | |
#wrapper .content-container #offer .imageSelections #offerImg { | |
min-width: 535px; | |
max-width: 535px; | |
margin: 20px auto 30px auto; | |
display: block; | |
} | |
#wrapper .content-container #offer .imageSelections .offerGif { | |
position: absolute; | |
top: 168px; | |
left: 177px; | |
} | |
#wrapper .content-container #offer .imageSelections .offerGif img { | |
width: 165px; | |
height: 75px; | |
} | |
/* FOOTER */ | |
#wrapper .content-container #offer .footer { | |
text-align: center; | |
color: #FFFFFF; | |
} | |
#wrapper .content-container #offer .footer a { | |
color: #FFFFFF; | |
} | |
#wrapper .content-container #offer .footer .container { | |
width: auto; | |
} | |
/* FORM (RIGHT SIDE) */ | |
#wrapper .content-container #form { | |
height: 100%; | |
background: url('img/form_bg.png'); | |
background-size: cover; | |
} | |
#wrapper .content-container #form #steps #logo { | |
width: 25%; | |
min-width: 165px; | |
margin: 25px auto; | |
display: block; | |
} | |
/* FORM SETTINGS */ | |
#wrapper .content-container #form #steps .form-group #mainForm .formContainer { | |
width: 70%; | |
max-width: 400px; | |
margin: 0 auto; | |
padding: 15px 0 30px 0; | |
background: rgba(113,158,188,.7); | |
} | |
#wrapper .content-container #form #steps .form-group #mainForm .formContainer .formCopy { | |
width: 80%; | |
min-width: 300px; | |
text-align: center; | |
margin: 0 auto 15px auto; | |
color: #FFFFFF; | |
font-size: 15px; | |
} | |
#wrapper .content-container #form #steps .form-group #mainForm .formContainer .input_container { | |
width: 80%; | |
margin: 0 auto 15px auto; | |
} | |
#wrapper .content-container #form #steps .form-group #mainForm .formContainer .input_container label { | |
margin-left: 20px; | |
color: #FFFFFF; | |
} | |
#wrapper .content-container #form #steps .form-group #mainForm .formContainer .input_container .formIcon { | |
top: auto; | |
} | |
#wrapper .content-container #form #steps .form-group #mainForm .formContainer .input_container .formIcon i.fa-mobile { | |
font-size: 35px; | |
margin-top: 8px; | |
} | |
#wrapper .content-container #form #steps .form-group #mainForm .formContainer .formReq { | |
width: 80%; | |
margin: 25px auto 0 auto; | |
padding: 5px 0; | |
font-weight: bold; | |
font-size: 10px; | |
text-align: center; | |
color: #FFFFFF; | |
} | |
#wrapper .content-container #form #steps .form-group #mainForm .formContainer .formReq p { | |
margin: 0; | |
} | |
#wrapper .content-container #form #steps .form-group #mainForm #submit { | |
width: 93%; | |
max-width: 400px; | |
margin: 30px auto 0 auto; | |
display: block; | |
} | |
#wrapper .content-container .largeDesktopFooter { | |
display: none; | |
} | |
/* FORM VALIDATION BIT */ | |
#wrapper .content-container #form #steps .form-group #mainForm .formContainer .input_container label.error { | |
display: none !important; | |
} | |
#wrapper .content-container #form #steps .form-group #mainForm .formContainer .input_container .formValidationIcon { | |
font-size: 20px; | |
position: absolute; | |
top: 40px; | |
right: 10px; | |
} | |
#wrapper .content-container #form #steps .form-group #mainForm .formContainer .input_container .formValidationIcon i.fa-check { | |
color: green; | |
display: none; | |
} | |
#wrapper .content-container #form #steps .form-group #mainForm .formContainer .input_container .formValidationIcon i.fa-times { | |
color: red; | |
display: none; | |
} | |
#wrapper .content-container #form #steps .form-group #mainForm .formContainer .input_container .formValidationIcon i.active { | |
display: block; | |
} | |
.formTick { | |
font-size: 24px; | |
line-height: 50px; | |
position: absolute; | |
top: 25px; | |
right: 0; | |
display: none; | |
width: 52px; | |
height: 50px; | |
text-align: center; | |
color: green; | |
} | |
.formCross { | |
font-size: 24px; | |
line-height: 50px; | |
position: absolute; | |
top: 25px; | |
right: 0; | |
display: none; | |
width: 52px; | |
height: 50px; | |
text-align: center; | |
color: red; | |
} | |
/* LARGE DESKTOP */ | |
@media screen and (min-width : 1300px) { | |
#wrapper { | |
} | |
.content-container { | |
max-width: 1300px; | |
padding: 50px 80px 80px 80px; | |
margin: 0 auto; | |
} | |
#wrapper .content-container #offer { | |
background: #2A5571; | |
border: #30B9E6 5px solid; | |
min-height: 750px; | |
max-height: 750px; | |
} | |
#wrapper .content-container #offer .offerText { | |
width: 90%; | |
max-width: 500px; | |
} | |
#wrapper .content-container #offer .offerText h1 { | |
font-size: 95px; | |
} | |
#wrapper .content-container #offer .imageSelections { | |
margin-left: -20px; | |
} | |
#wrapper .content-container #offer .imageSelections .offerGif { | |
top: 186px; | |
left: 195px; | |
} | |
#wrapper .content-container #offer .imageSelections .offerGif img { | |
width: 183px; | |
height: 82px; | |
} | |
#wrapper .content-container #offer .imageSelections #offerImg { | |
margin-top: 50px; | |
min-width: 590px; | |
max-width: 590px; | |
} | |
#wrapper .content-container #offer .footer { | |
display: none; | |
} | |
#wrapper .content-container .largeDesktopFooter { | |
display: block; | |
} | |
#wrapper .content-container .largeDesktopFooter .footer { | |
color: #FFFFFF; | |
text-align: center; | |
margin-top: 50px; | |
} | |
#wrapper .content-container .largeDesktopFooter .footer a { | |
color: #FFFFFF; | |
} | |
#wrapper .content-container #form { | |
border: #30B9E6 5px solid; | |
border-left: none; | |
min-height: 750px; | |
max-height: 750px; | |
background-position: 55%; | |
} | |
.formTick { | |
top: 8px; | |
} | |
.formCross { | |
top: 8px; | |
} | |
} | |
/* LARGE DESKTOP, LOW HEIGHT */ | |
@media screen and (min-width : 1300px) and (max-height : 900px) { | |
#wrapper { | |
} | |
.content-container { | |
max-width: 1300px; | |
padding: 20px 80px 80px 80px; | |
margin: 0 auto; | |
} | |
#wrapper .content-container #offer { | |
background: #2A5572; | |
border: #30B9E6 5px solid; | |
min-height: 600px; | |
max-height: 600px; | |
} | |
#wrapper .content-container #offer .offerText { | |
width: 90%; | |
max-width: 500px; | |
} | |
#wrapper .content-container #offer .offerText h1 { | |
font-size: 90px; | |
} | |
#wrapper .content-container #offer .imageSelections { | |
margin: 0 auto; | |
min-width: 528px; | |
max-width: 528px; | |
} | |
#wrapper .content-container #offer .imageSelections .offerGif { | |
top: 166px; | |
left: 175px; | |
} | |
#wrapper .content-container #offer .imageSelections .offerGif img { | |
width: 164px; | |
height: 75px; | |
} | |
#wrapper .content-container #offer .imageSelections #offerImg { | |
margin-top: 0; | |
min-width: 528px; | |
max-width: 528px; | |
} | |
#wrapper .content-container #offer .footer { | |
display: none; | |
} | |
#wrapper .content-container .largeDesktopFooter { | |
display: block; | |
} | |
#wrapper .content-container .largeDesktopFooter .footer { | |
color: #FFFFFF; | |
text-align: center; | |
margin-top: 50px; | |
} | |
#wrapper .content-container .largeDesktopFooter .footer a { | |
color: #FFFFFF; | |
} | |
#wrapper .content-container #form { | |
border: #30B9E6 5px solid; | |
border-left: none; | |
min-height: 600px; | |
max-height: 600px; | |
background-position: 55%; | |
} | |
#wrapper .content-container #form #steps #logo { | |
margin: 20px auto; | |
min-width: 165px; | |
} | |
#wrapper .content-container #form #steps .form-group #mainForm .formContainer .input_container .formIcon { | |
top: 19px; | |
} | |
#wrapper .content-container #form #steps .form-group #mainForm .formContainer .input_container { | |
margin: 0 auto 10px auto; | |
} | |
#wrapper .content-container #form #steps .form-group #mainForm .formContainer { | |
padding: 15px 0; | |
} | |
#wrapper .content-container #form #steps .form-group #mainForm .formContainer .input_container .formField { | |
height: 40px; | |
} | |
#wrapper .content-container #form #steps .form-group #mainForm .formContainer .formReq { | |
margin-top: 15px; | |
} | |
#wrapper .content-container #form #steps .form-group #mainForm #submit { | |
width: 85%; | |
margin-top: 20px; | |
} | |
#wrapper .content-container #offer .footer { | |
margin-top: 30px; | |
} | |
} | |
/* DESKTOP BREAKPOINTS */ | |
@media screen and (max-width : 1100px) { | |
#wrapper .content-container #offer .imageSelections { | |
min-width: 450px; | |
max-width: 450px; | |
} | |
#wrapper .content-container #offer .imageSelections #offerImg { | |
min-width: 450px; | |
max-width: 450px; | |
} | |
#wrapper .content-container #offer .imageSelections .offerGif { | |
top: 141px; | |
left: 149px; | |
} | |
#wrapper .content-container #offer .imageSelections .offerGif img { | |
width: 139px; | |
height: 63px; | |
} | |
#wrapper .content-container #offer .offerText h1 { | |
font-size: 70px; | |
} | |
#wrapper .content-container #offer .offerText h2 { | |
font-size: 35px; | |
} | |
} | |
@media screen and (max-width : 995px) { | |
#wrapper .content-container #offer .offerText h1 { | |
font-size: 60px; | |
} | |
#wrapper .content-container #offer .offerText h2 { | |
font-size: 35px; | |
} | |
#wrapper .content-container #form #steps .form-group #mainForm .formContainer .formCopy { | |
min-width: 270px; | |
} | |
} | |
@media screen and (max-width : 865px) { | |
#wrapper .content-container #offer .offerText h1 { | |
font-size: 50px; | |
} | |
#wrapper .content-container #offer .offerText h2 { | |
font-size: 35px; | |
} | |
#wrapper .content-container #offer .imageSelections { | |
min-width: 400px; | |
max-width: 400px; | |
} | |
#wrapper .content-container #offer .imageSelections #offerImg { | |
min-width: 400px; | |
max-width: 400px; | |
} | |
#wrapper .content-container #offer .imageSelections .offerGif { | |
top: 126px; | |
left: 132px; | |
} | |
#wrapper .content-container #offer .imageSelections .offerGif img { | |
width: 124px; | |
height: 55px; | |
} | |
#wrapper .content-container #form #steps .form-group #mainForm .formContainer .formCopy { | |
min-width: 230px; | |
} | |
} | |
.modal-open .modal { | |
color: black; | |
text-align: left; | |
} | |
.modal-open .modal a { | |
color: black !important; | |
} | |
.modal.fade .modal-dialog { | |
-webkit-transition: -webkit-transform 0s ease-out; | |
-o-transition: -o-transform 0s ease-out; | |
transition: transform 0s ease-out; | |
-webkit-transform: translate(0); | |
-ms-transform: translate(0); | |
-o-transform: translate(0); | |
transform: translate(0); | |
} | |
::-webkit-input-placeholder { | |
/* WebKit, Blink, Edge */ | |
color: #DE0054; | |
font-family: arial; | |
} | |
:-moz-placeholder { | |
/* Mozilla Firefox 4 to 18 */ | |
color: #DE0054; | |
opacity: 1; | |
font-family: arial; | |
} | |
::-moz-placeholder { | |
/* Mozilla Firefox 19+ */ | |
color: #DE0054; | |
opacity: 1; | |
font-family: arial; | |
} | |
:-ms-input-placeholder { | |
/* Internet Explorer 10-11 */ | |
color: #DE0054; | |
font-family: arial; | |
} | |
::-ms-input-placeholder { | |
/* Microsoft Edge */ | |
color: #DE0054; | |
font-family: arial; | |
} | |
#logo { | |
width: 9em; | |
padding: 12px 0; | |
} | |
.modal-header { | |
background: #DE0054; | |
color: #FFF; | |
} | |
.modal-body a:hover { | |
text-decoration: underline; | |
}.close { | |
text-shadow: none; | |
opacity: 1; | |
} | |
.input_container { | |
background: white; | |
height: 53px; | |
border: 3px #DE0054 solid; | |
position: relative; | |
display: block; | |
width: 100%; | |
margin: 0 0 9px 0; | |
padding: 0; | |
} | |
.formField { | |
box-sizing: border-box; | |
height: 100%; | |
width: 85%; | |
float: left; | |
outline: none; | |
border: none; | |
} | |
.formCross { | |
font-size: 24px; | |
line-height: 50px; | |
top: 5px; | |
display: none; | |
width: 52px; | |
height: 50px; | |
text-align: center; | |
color: red; | |
width: 15%; | |
float: right; | |
text-align: center; | |
} | |
.formTick { | |
font-size: 24px; | |
line-height: 50px; | |
top: 5px; | |
display: none; | |
width: 52px; | |
height: 50px; | |
text-align: center; | |
color: red; | |
width: 15%; | |
float: right; | |
text-align: center; | |
} | |
.fa { | |
color: #DE0054; | |
font-size: 1.5em; | |
} | |
.formContainer { | |
margin: 0 21px; | |
} | |
a { | |
color: #FFF; | |
} | |
a:hover { | |
color: #FFF; | |
text-decoration: underline; | |
cursor: pointer; | |
} | |
.formIcon { | |
padding-top: 4px; | |
width: 15%; | |
float: left; | |
text-align: center; | |
} | |
.toptext { | |
width: 100%; | |
text-align: center; | |
} | |
.belowtext { | |
width: 100%; | |
text-align: center; | |
color: white; | |
position: relative; | |
font-size: 1.3em; | |
margin-top: .8em; | |
} | |
#offerimage { | |
width: 54em; | |
} | |
.belowtext .formCopy { | |
color: white; | |
width: 100%; | |
text-align: center; | |
font-size: 1.5em; | |
line-height: 10px; | |
} | |
.firstline { | |
color: white; | |
text-align: center; | |
font-size: 1.5em; | |
margin-bottom: 0; | |
} | |
.secondline { | |
color: white; | |
text-align: center; | |
font-size: 1.5em; | |
padding-bottom: 13px; | |
} | |
.center { | |
margin: 0 auto; | |
width: 1038px; | |
margin-bottom: 50px; | |
margin-top: -16px; | |
} | |
.slotmachine { | |
margin: 0 auto; | |
width: 49.7%; | |
text-align: center; | |
display: inline-block; | |
} | |
.slotimage { | |
margin: 0 auto; | |
padding: 0; | |
margin-top: -227px; | |
} | |
.formcontent { | |
margin: 0 auto; | |
text-align: center; | |
display: inline-block; | |
margin-top: 50px; | |
} | |
.footerclass { | |
color: #FFF; | |
width: 100%; | |
text-align: center; | |
} | |
.footerimage { | |
width: 19em; | |
padding-bottom: 10px; | |
} | |
.footertextfirstline { | |
width: 100%; | |
text-align: center; | |
font-size: 16px; | |
padding-bottom: 13px; | |
} | |
.footertextsecondline { | |
width: 100%; | |
text-align: center; | |
margin-bottom: 0; | |
font-size: 15px; | |
} | |
.footertextthirdline { | |
width: 100%; | |
text-align: center; | |
font-size: 15px; | |
} | |
.submitbutton { | |
height: 57px; | |
color: white; | |
font-size: 1em; | |
text-align: center; | |
background-image: url(https://lsm-public-bucket.s3.amazonaws.com/sfsg/creativesuites/dracular/mobile/cta_mobile.png); | |
padding: 0; | |
background-repeat: no-repeat; | |
width: 87%; | |
background-size: 100%; | |
display: inline-block; | |
margin-top: 25px; | |
} | |
.gifimage { | |
text-align: center; | |
clear: both; | |
margin-top: -30px; | |
} | |
.imagesize { | |
margin-top: -534px; | |
} | |
.toptext { | |
font-size: 31px; | |
color: white; | |
font-family: Crimson Text; | |
font-weight: 400; | |
text-align: center; | |
padding-top: 20px; | |
} | |
.contentbox { | |
font-family: Lato; | |
font-weight: 400; | |
background-image: url(https://lsm-public-bucket.s3.amazonaws.com/sfsg/creativesuites/dracular/desktop/contentbox_desktop.png); | |
background-size: 100% 100%; | |
margin: auto 123px; | |
width: 795px; | |
margin-top: -37px; | |
padding-bottom: 31px; | |
} | |
.motionpicture { | |
margin: auto auto; | |
width: 609px; | |
height: 417px; | |
padding-top: 59px; | |
} | |
.bottombutton { | |
text-align: center; | |
position: relative; | |
padding: 0 20px; | |
font-family: Lato; | |
font-weight: 700; | |
} | |
.topbar { | |
height: auto; | |
margin: 0 0; | |
} | |
.titlelogo { | |
width: 47%; | |
display: inline-block; | |
text-align: right; | |
} | |
.sfsglogo { | |
width: 41%; | |
display: inline-block; | |
text-align: right; | |
} | |
.opcard { | |
width: 230px; | |
background-color: #FFF; | |
display: inline-block; | |
padding: 33px 20px; | |
text-align: center; | |
padding-bottom: 35px; | |
} | |
.pagesubmitbutton { | |
height: 60px; | |
color: white; | |
font-size: 1.5em; | |
text-align: center; | |
margin-top: 1.5em; | |
background: none; | |
padding: 0; | |
background-color: #DE0054; | |
border: none; | |
width: 65%; | |
font-family: Lato; | |
font-weight: 700; | |
margin-left: 50px; | |
} | |
.topline { | |
font-family: Lato; | |
font-weight: 400; | |
} | |
.midline, .btmline { | |
font-family: Lato; | |
font-weight: 700; | |
} | |
.offertext { | |
font-size: 24px; | |
text-align: center; | |
width: 100%; | |
margin-top: 37px; | |
line-height: 48px; | |
} | |
.offerp { | |
line-height: 27px; | |
} | |
.connectorpipe { | |
width: 100%; | |
position: relative; | |
text-align: center; | |
clear: both; | |
font-size: 3em; | |
} | |
.connectorpipeleft, .connectorpiperight { | |
width: 50%; | |
text-align: center; | |
float: left; | |
line-height: 32px; | |
} | |
.topconnectorpipe { | |
width: 100%; | |
position: relative; | |
text-align: center; | |
clear: both; | |
font-size: 3em; | |
margin-top: -97px; | |
margin-bottom: 40px; | |
color: grey; | |
} | |
.topconnectorpipeleft, .topconnectorpiperight { | |
width: 50%; | |
text-align: center; | |
float: left; | |
line-height: 32px; | |
} | |
.opcardlogo { | |
height: 51px; | |
width: 146px; | |
} | |
.centralposition { | |
width: 100%; | |
text-align: center; | |
} | |
.gifimage { | |
width: 100%; | |
text-align: center; | |
background: url(https://lsm-public-bucket.s3.amazonaws.com/sfsg/creativesuites/dracular/desktop/videoborder_desktop.png); | |
background-repeat: no-repeat; | |
background-position: center; | |
background-size: contain; | |
height: 493px; | |
margin: auto 0; | |
position: relative; | |
margin-top: -10px; | |
} | |
body .container { | |
width: 100%; | |
background-color: black; | |
margin-top: 45px; | |
text-align: center; | |
color: white; | |
padding-top: 10px; | |
} | |
.extraspace { | |
margin-left: 20px; | |
} | |
@media screen and (min-width : 1900px) { | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment