Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS for landing pages
/* start langind page banner offers */
@media (min-width: 790px) {
.page-sec1 {
margin-top: 35px;
}
}
.page-sec1 {
float:left;
width:100%;
box-sizing: content-box;
position:relative;
}
.page-sec1 img{
float:left;
width:100%;
max-width: 100% !important;
}
.banner-text{
float:left;
position: absolute;
left: 50px;
bottom:16px;
text-align: left;
}
.banner-text h2{
float:left;
width:100%;
color: #276a58;
font-size: 47px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
line-height: 47px;
margin: 0 0 10px 0;
}
.banner-text h3{
float:left;
width:100%;
color: #276a58;
font-size:28px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
line-height: 28px;
margin: 0 0 10px 0;
}
.banner-text ul{
margin:0 0 0 -27px;
padding: 0;
}
.banner-text ul li{
float:left;
padding: 0 72px 0 27px;
color: #276a58;
font-size:24px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
line-height: 72px;
list-style: none;
background:url(images/arrow.png) no-repeat 0 0;
}
.banner-text ul li:last-child{
padding-right:0;
}
.page-sec2 {
float:left;
width:100%;
text-align: center;
padding: 20px 0 40px 0;
position:relative;
}
.page-sec2 h4, .page-sec2 h1 {
color: #000;
font-size: 24px;
font-family: 'Montserrat', sans-serif !important;
font-weight: 600;
line-height: 28px;
margin: 0 0 20px 0;
}
.page-sec2 > p{
color: #000;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
line-height:18px;
}
.page-row{
margin:0 -22px;
}
.page-col4{
float:left;
width:33.333%;
padding: 0 22px;
margin: 0 0 40px 0;
}
body.page-id-1201 .page-col4 {
padding: 0 12px;
}
.col-inner{
float:left;
width:100%;
background: #0b4170;
padding: 20px;
color: #fff;
height: 426px;
}
body.page-id-1191 .col-inner {
height: 580px;
}
body.page-id-1201 .col-inner {
height: 608px;
}
#offer-form-content form ::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #0b4170;
}
#offer-form-content form ::-moz-placeholder {
/* Firefox 19+ */
color: #0b4170;
}
#offer-form-content form :-ms-input-placeholder {
/* IE 10+ */
color: #0b4170;
}
#offer-form-content form :-moz-placeholder {
/* Firefox 18- */
color: #0b4170;
}
@media (min-width: 900px) {
body.page-id-1201 .col-inner {
height: 460px;
}
}
@media (max-width: 768px) {
body.page-id-1201 .col-inner {
height: auto;
}
body.page-id-1191 .col-inner {
height: auto;
}
}
.col-inner h5{
text-transform: none;
letter-spacing: initial;
color: #fff;
font-size: 18px;
font-family: 'Montserrat', sans-serif !important;
font-weight: 600;
line-height: 22px;
border-bottom: solid 1px #ffffff;
padding: 0 0 10px;
margin: 0 0 6px 0;
}
.col-inner p{
font-size: 14px;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
line-height:18px;
color: #fff;
}
.col-inner ul{
margin: 0;
padding: 0 0 0 13px;
text-align: left;
}
.col-inner ul li{
font-size: 14px;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
line-height:28px;
margin: 0;
color: #fff;
}
.col-inner.last-box ul li {
line-height: 21px;
}
/* contact fomr inputs */
#offer-form-content form input {
border-radius: 0;
margin-bottom: 0;
height: 40px;
}
#offer-form-content input[type="submit"] {
border-radius: 6px;
display:inline-block;
border: none;
width:185px !important;
padding: 9.5px 0;
color: #fff;
background: #0b4170;
text-transform: uppercase;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
#offer-form-content input[type="submit"]:hover {
color: #fff;
background: #444;
}
.form-sec{
float:right;
width:310px;
height:503px;
margin:-556px 23px 0 0;
border:solid 2px #0b4170;
border-radius: 4px;
padding: 23px 18px 0 18px;
background: rgba(255, 255, 255, 0.6);
}
.form-img{
float:left;
width:100%;
margin: 0 0 15px 0;
}
.form-sec h2{
color: #0b4170;
font-size: 31px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
line-height:31px;
margin: 0 0 22px 0;
letter-spacing: initial;
}
/* for invisalign ad */
@media (min-width: 1024px) {
.page-id-1898 .form-sec h2 {
color: #fff;
}
}
.form-row{
float:left;
width:100%;
margin: 0 0 20px 0;
}
.form-input{
float:left;
width: 100%;
background: #fff;
border: solid 1px #fff;
height: 40px;
padding: 0 12px;
color: #959595;
font-size: 12px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
.wpcf7-not-valid{
border-color:red !important;
}
.wpcf7-not-valid-tip{
display:none !important;
}
body div.wpcf7-response-output {
margin: 0;
padding: 0;
font-size: 11px;
border: none !important;
float: left;
margin-top: -13px;
line-height: 14px;
width: 100%;
margin-bottom: 10px;
}
/* specific for theme */
.page-template-offer-template #content-wrap {
padding: 0 0 ;
}
.page-id-807 .breadcrumb{
display:none !important;
}
.page-sec1-banner{
float:left;
width:100%;
position:relative;
}
.banner-text2{
float:left;
position: absolute;
left:23px;
top:63px;
text-align: left;
}
.white-border {
border-color:#fff;
}
.banner-text2 h2{
float:left;
width:100%;
color: #276a58;
font-size: 114px !important;
font-family: 'Montserrat', sans-serif;
font-weight: 600 !important;
line-height: 114px;
margin: 0 0 20px 0;
}
.banner-text2 h2 span{
float:left;
}
.banner-text2 h2 i{
font-style: normal;
font-size: 52px;
float:left;
line-height: 52px;
}
.banner-text2 h2 small{
font-size: 60px;
float:left;
line-height: 60px;
}
.banner-text2 h3{
float:left;
width:100%;
margin: 0 0 30px 0;
}
.banner-text2 ul{
float:left;
width:100%;
margin:0;
padding: 0;
}
.banner-text2 ul li{
list-style: none;
float: left;
clear: both;
width: 212px;
height: 72px;
background:url(images/bg.png) no-repeat 0 0;
padding: 0 0 0 28px;
color: #fff;
font-size: 36px !important;
font-family: 'Montserrat', sans-serif;
font-weight: 600 !important;
line-height: 72px;
}
.banner-text2 ul li h6{
font-size:24px !important;
line-height: 28px;
padding: 8px 0 0 0;
}
.inner-container img{
max-width:80%;
}
#why-choose-us-text p {
padding: 0 30px;
}
@media screen and (max-width: 1024px) {
.banner-text ul li {
padding: 0 30px 0 27px;
font-size: 16px;
}
.col-inner {
height: 434px;
}
.form-sec {
float: right;
width: 100%;
height: auto;
margin:0 0 20px;
border: none;
border-radius: 0;
padding: 25px 30px 0 30px;
background: #e1e1e1;
}
.form-img{
display:none;
}
.page-sec2 {
padding: 0 0 40px 0;
}
.form-sec h2 {
text-align: left;
}
.page-inner {
padding: 0;
}
}
@media screen and (max-width: 800px) {
.form-sec {
float: right;
width: 100%;
height: auto;
margin:0 0 20px;
border: none;
border-radius: 0;
padding: 25px 30px 0 30px;
background: #e1e1e1;
}
.form-img{
display:none;
}
.page-sec2 {
padding: 0 0 40px 0;
}
.form-sec h2 {
text-align: left;
}
.page-inner {
padding: 0;
}
.banner-text {
left: 30px;
}
.banner-text h2 {
font-size: 30px;
line-height: 30px;
}
.banner-text h3 {
font-size: 18px;
line-height: 18px;
}
.banner-text ul li {
padding: 0 45px 0 24px;
font-size: 15px;
background-size: auto 50px;
line-height: 50px;
}
.banner-text ul {
margin: 0 0 0 -24px;
}
.page-sec2 h4, .page-sec2 h1 {
padding: 0 30px;
font-size: 18px;
line-height: 22px;
}
.page-row {
margin: 0;
}
.page-col4 {
float: left;
width: 100%;
padding: 0 30px;
margin: 0 0 30px 0;
}
.col-inner {
height: auto;
}
.page-sec2 > p {
padding: 0 30px;
}
}
@media screen and (max-width: 479px) {
.banner-text ul li {
padding: 0 20px 0 20px;
font-size: 12px;
background-size: auto 40px;
line-height: 40px;
}
.banner-text2 h2 {
font-size: 70px !important;
}
.banner-text2 h2 small,.banner-text2 h2 i {
font-style: normal;
font-size: 30px;
float: left;
line-height: 60px;
}
}
/* dental implants banner images */
.mobile-banner {
display: none;
}
@media (max-width: 479px) {
.desktop-banner {
display: none;
}
.mobile-banner {
display: block;
}
}
/* end landing page CSS */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.