fbpx
2-10 Home Buyers Warranty Logo
Phone Icon800.414.6780 Cart Icon Start my quote
Phone Icon800.414.6780 Cart Icon Start my quote

Color Palette

Primary #FC4C02
Insurance Orange
Secondary #702F8A
Insurance Purple
Light Purple #C7D0FF
Hero sub text
Light Gray #F5F5F5
Background gray

Typography

Heading 1
Futura PT W01 Bold | Color: #FC4C02 | 80px/85px
Heading 2
Futura PT W01 Bold | Color: #702F8A | 46px/55px
Heading 3
Futura PT W01 Bold | Color: #FC4C02 | 28px/36px
Paragraph
Futura PT W01 Book | Color: #000000 | 18px/24px
Disclaimer
Futura PT W01 Book | Color: #000000 | 14px/16px

Buttons

Get a quote
<a href="#" class="insBtn">Get a quote</a>
Copied!
Learn more
<a href="#" class="insBtn pBtn" target="_blank">Learn more</a>
Copied!

Components

Banners

No Banner Components Found.

Heros

Primary Hero
Primary Insurance Hero

Contact us

Need help from 2-10?
Let’s talk.

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.

HTML
CSS
<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!

Elements

No Element Components Found.