Our mission is to help make it easy for you to enjoy home ownership. If you have questions or need any help, we have a bunch of ways you can contact us.
<div class="px-md-1 px-lg-5"> <section class="mt-md-5 newHero altHero purpleHero"> <div class="row no-gutters"> <div class="col-lg-5 align-items-center"> <div class="d-flex align-items-center heroLeft"> <div> <h1 class="mb-2 mb-xl-5">Contact us</h1> <h3 class="mb-2">Need help from 2-10?<br>Let’s talk.</h3> <p>Our mission is to help make it easy for you to enjoy home ownership. If you have questions or need any help, we have a bunch of ways you can contact us.</p> </div> </div> </div> <div class="col-lg-7"> <div class="heroRight"> <div class="heroPhoto"></div> </div> </div> </div> </section> </div>
Copied!
/* Hero */ .newHero { position: relative; overflow: hidden; margin: 0 auto; max-width: 760px; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; } .newHero .heroLeft { height: 100%; padding: 40px 24px 24px 24px; background: linear-gradient(180deg, rgba(20,27,77,1) 0%, rgba(112,47,138,1) 100%); } .newHero .heroLeft h1 { font-family:"Futura PT W01 Bold"; font-size: 36px; font-weight: 500; line-height: 1em; color: #FC4C02; } .newHero .heroLeft h3 { margin-top: 16px !important; color: #fff; font-size: 23px; line-height: 1.1em; } .newHero .heroLeft p { color: #fff; font-size: 20px; max-width: 500px; } .newHero .heroRight { padding: 20% 0 0 10%; min-height: 360px; height: 100%; background: #fafafa; } .newHero .heroRight:before { content: ''; position: absolute; z-index: 200; top: -1px; left: 0; background: url('/wp-content/uploads/2021/11/hero-clip-top-purple.svg') top center no-repeat; background-size: 101%; width: 100%; height: 150px; } .newHero .heroFeature { position: relative; z-index: 150; max-width: 365px; padding-bottom: 40%; } .newHero .heroPhoto { position: absolute; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; background: url('/wp-content/uploads/2021/11/contact-us.jpg') center center no-repeat; background-size: cover; } .icon-container { max-width: 285px; } .icon-container .dispatch { max-width: 150px; } .icon-container .bbb { max-width: 125px; } @media only screen and (min-width: 768px) { .newHero { border-radius: 25px; } .newHero .heroLeft { padding: 48px 96px; } .newHero .heroRight:before { background-size: 100%; } } @media only screen and (min-width: 992px) { .newHero { max-width: 1640px; } .newHero .heroLeft { padding: 24px 0 24px 24px; background: linear-gradient(90deg, rgba(20,27,77,1) 0%, rgba(112,47,138,1) 100%); } .newHero .heroRight { padding: 10% 0 0 20%; } .newHero .heroRight:before { top: 0; left: -1px; background: url('/wp-content/uploads/2021/11/hero-clip-purple.svg') center left no-repeat; background-size: contain; width: 122px; height: 100%; } .newHero .heroLeft h3 { font-size: 36px; } .icon-container { max-width: 365px; } .icon-container .dispatch { max-width: 180px; } .icon-container .bbb { max-width: 165px; } } @media only screen and (min-width: 1200px) { .newHero .heroLeft { padding: 48px; } .newHero .heroLeft h1 { font-size: 70px; } .newHero .heroRight { min-height: 560px; } }
Copied!