Skip to content

Instantly share code, notes, and snippets.

@JamesHusband
Created January 15, 2018 14:57
Show Gist options
  • Save JamesHusband/427913106ff5f938b025ea4d9dc08904 to your computer and use it in GitHub Desktop.
Save JamesHusband/427913106ff5f938b025ea4d9dc08904 to your computer and use it in GitHub Desktop.
HOW NOW TO DO CSS
/* 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