Category: Sections

Full-width Video Section

Markup

<section class="video-area">
    <div class="video-area-bg">
        <a class="mfp-iframe video-play-btn" href="https://www.youtube.com/watch?v=4XLQpRI_wOQ"><i class="fa fa-play"></i></a>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-6">
                <h3>Make More Happen</h3>
                <p>When independent agents give back to their communities, hey become agents of change promise celebrate their efforts with the Make More Happen Awards, which include a donation to the nonprofits where they volunteer, share and give.</p>
                <ul class="check-icon">
                    <li>Get timely updates through conference calls, webcasts and presentations.</li>
                    <li>Are you a member of the media? Our Newsroom contains our press kit.</li>
                    <li>We develop and grow business leaders.</li>
                    <li>We always want to keep your home safe and steady.</li>
                </ul>
            </div>
        </div>
    </div>
</section>

Style

    /* Base CSS */
    .alignleft {
        float: left;
        margin-right: 15px;
    }
    .alignright {
        float: right;
        margin-left: 15px;
    }
    .aligncenter {
        display: block;
        margin: 0 auto 15px;
    }
    a:focus { outline: 0 solid }
    img {
        max-width: 100%;
        height: auto;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0 0 15px;
        font-weight: 700;
    }
    body {
    
    }
    a:hover { text-decoration: none }
    
    .video-area-bg {background-image: url(../img/make-more-happen.jpg);background-color: #ddd;background-position: center;background-size: cover}
    
    .check-icon li:before {font-family: fontAwesome; content:"\f00c"}
    
    
    .video-area {
        padding: 83px 0;
        position: relative;
        margin: 100px 0;
    }
    .video-area-bg {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 45%;
    }
    .video-play-btn {
        background: #1fa663 none repeat scroll 0 0;
        border-radius: 50%;
        color: #fff;
        display: inline-block;
        font-size: 30px;
        height: 80px;
        line-height: 80px;
        margin-top: -40px;
        position: absolute;
        right: -40px;
        text-align: center;
        top: 50%;
        width: 80px;
    }
    body {
        color: #909090;
    }
    h3 {
        color: #333;
    }
    ul.check-icon {
        color: #666;
        font-size: 15px;
        list-style: outside none none;
        margin: 0;
        padding: 0;
    }
    .check-icon li {
        padding-bottom: 10px;
        padding-left: 30px;
        position: relative;
    }
    .check-icon li::before {
        color: #1fa663;
        left: 0;
        position: absolute;
        top: 0;
    }
Mark up url: Click here

Quotation Form Section

Get a quote

Markup

<section class="section-padding">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="quote-form-wrap">
                    <img src="assets/img/quote-girl.png" alt="Get a quote">
                    <div class="blue-quote-form">
                        <h3>Get a quote</h3>
                        
                        <form action="index.html">
                            <div class="row">
                                <div class="col-md-6">
                                    <input type="text" name="name" placeholder="Name">
                                </div>
                                <div class="col-md-6">
                                    <input type="email" name="email" placeholder="Email">
                                </div>
                            </div>
                            <p><textarea name="message" id="message" cols="30" rows="10"></textarea></p>
                            
                            <div class="blue-form-submit">
                                <button type="submit">Get a quote</button>
                            </div> 
                        </form>
                              
                    </div>
                </div>
            </div>
        </div>
    </div> 
</section>

 Style

    /* Base CSS */
    .alignleft {
        float: left;
        margin-right: 15px;
    }
    .alignright {
        float: right;
        margin-left: 15px;
    }
    .aligncenter {
        display: block;
        margin: 0 auto 15px;
    }
    a:focus { outline: 0 solid }
    img {
        max-width: 100%;
        height: auto;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0 0 15px;
        font-weight: 700;
    }
    body {
        font-family: 'Lato', sans-serif;
    }
    a:hover { text-decoration: none }
    
    .section-padding {padding: 80px 0}
    
    
    .quote-form-wrap img {
        display: block;
        margin: auto;
    }
    .blue-quote-form {
        background: #2ab6fb none repeat scroll 0 0;
        margin-top: -83px;
        max-width: 750px;
        padding: 25px 100px 50px;
    }
    .blue-quote-form h3 {
        color: #fff;
        font-size: 26px;
        margin-bottom: 50px;
        position: relative;
        text-align: center;
        text-transform: uppercase;
    }
    .blue-quote-form h3::before {
        background: #fff none repeat scroll 0 0;
        bottom: -20px;
        content: "";
        height: 2px;
        left: 50%;
        margin-left: -55px;
        position: absolute;
        width: 110px;
    }
    .blue-quote-form h3::after {
        background: #2ab6fb none repeat scroll 0 0;
        border: 2px solid #fff;
        border-radius: 50%;
        bottom: -25px;
        content: "";
        height: 13px;
        left: 50%;
        margin-left: -6.5px;
        position: absolute;
        width: 13px;
    }
    .blue-quote-form input, .blue-quote-form textarea {
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
        border: medium none;
    }
    .blue-quote-form input, .blue-quote-form textarea {
        border-bottom: 1px solid #aae2fd;
        color: #fff;
        padding: 10px 0;
        width: 100%;
    }
    .blue-quote-form textarea {
        height: 100px;
    }
    .blue-form-submit {
        margin-top: 20px;
        text-align: center;
    }
    .blue-form-submit button[type="submit"] {
        background: #fff none repeat scroll 0 0;
        border: medium none;
        border-radius: 5px;
        color: #2ab6fb;
        padding: 10px;
        text-transform: uppercase;
    }
Mark up url: Click here

Blog Section

Markup

<section class="section-padding">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="section-title">
                    <h2>Latest News</h2>
                    <p>Duis autem vel eum iriure dolor in hendrerit in vumtate</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="single-blog-box">
                    <div class="blog-box-bg blog-box-bg-1"></div>
                    <div class="blog-box-content">
                        <p class="blog-meta">
                            <span><a href=""><i class="fa fa-user"></i> Fahmid Hossain</a></span>
                            <span><i class="fa fa-calendar"></i> 22 December,2017</span>
                        </p>
                        <h3>A Short Guide to Talking About</h3>
                        <p>Duis autem vel eum iriure dolor in hen sse molestie consequat, vel illum.</p>
                        <a href="" class="blog-readmore-btn">Read more</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="single-blog-box">
                    <div class="blog-box-bg blog-box-bg-2"></div>
                    <div class="blog-box-content">
                        <p class="blog-meta">
                            <span><a href=""><i class="fa fa-user"></i> Fahmid Hossain</a></span>
                            <span><i class="fa fa-calendar"></i> 22 December,2017</span>
                        </p>
                        <h3>A Short Guide to Talking About</h3>
                        <p>Duis autem vel eum iriure dolor in hen sse molestie consequat, vel illum.</p>
                        <a href="" class="blog-readmore-btn">Read more</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="single-blog-box">
                    <div class="blog-box-bg blog-box-bg-3"></div>
                    <div class="blog-box-content">
                        <p class="blog-meta">
                            <span><a href=""><i class="fa fa-user"></i> Fahmid Hossain</a></span>
                            <span><i class="fa fa-calendar"></i> 22 December,2017</span>
                        </p>
                        <h3>A Short Guide to Talking About</h3>
                        <p>Duis autem vel eum iriure dolor in hen sse molestie consequat, vel illum.</p>
                        <a href="" class="blog-readmore-btn">Read more</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Style

    /* Base CSS */
    .alignleft {
        float: left;
        margin-right: 15px;
    }
    .alignright {
        float: right;
        margin-left: 15px;
    }
    .aligncenter {
        display: block;
        margin: 0 auto 15px;
    }
    a:focus { 
        outline: 0 solid 
    }
    img {
        max-width: 100%;
        height: auto;
    }
    h1,h2,h3,h4,h5,h6 {
        margin: 0 0 15px;
        font-weight: 700;
        color: #222;
    }
    h2 {
        font-size: 32px;
    }
    body {
        font-family: 'Open Sans', sans-serif;
        color: #565656;
        font-size: 17px;    
    }
    a:hover { 
        text-decoration: none;
    }
    .blog-box-bg-1 {
        background-image: url(../img/latest-news-img-1.jpg);
    }
    .blog-box-bg-2 {
        background-image: url(../img/latest-news-img-2.jpg);
    }
    .blog-box-bg-3 {
        background-image: url(../img/latest-news-img-3.jpg);
    }
    .section-title {
        color: #565656;
        font-size: 17px;
        margin-bottom: 70px;
        text-align: center;
    }
    .section-title h2 {
        color: #222;
        position: relative;
        font-size: 32px;
        margin: 0 0 40px;
    }
    .section-title h2::before {
        background: #1a1a1a none repeat scroll 0 0;
        bottom: -20px;
        content: "";
        height: 2px;
        left: 50%;
        margin-left: -10px;
        position: absolute;
        width: 20px;
        z-index: 1;
    }
    .section-title h2::after {
        background: #f87900 none repeat scroll 0 0;
        bottom: -20px;
        content: "";
        height: 2px;
        left: 50%;
        margin-left: -30px;
        position: absolute;
        width: 60px;
    }
    section.section-padding {
        padding: 80px 0;
    }
    .blog-box-bg {
        background-color: #ddd;
        background-size: cover;
        height: 200px;
        border: 1px solid #F87900;
        background-position: center;
    }
    .blog-box-bg {
        border-bottom: 0px solid #F87900;
    }
    .blog-box-content {
        border: 1px solid #f4f4f4;
        padding: 20px;
        transition: 0.3s;
    }
    .blog-meta i.fa {
        color: #f87900;
    }
    .blog-meta a {
        color: #565656;
    }
    .blog-meta {
        font-size: 14px;
    }
    .blog-meta span {
        margin-right: 10px;
    }
    .blog-meta span:last-child {
        margin-right: 0px;
    }
    .blog-box-content h3 {
        font-size: 20px;
    }
    .blog-box-content h3 {
        margin-top: 15px;
    }
    .blog-readmore-btn {
        background: #F87900;
        color: #fff;
        padding: 10px 20px;
        display: inline-block;
        border-radius: 3px;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 14px;
        margin-top: 5px;
        transition: 0.3s;
    }
    .blog-readmore-btn:hover {
        background: #333;
        color:#fff;
    }
    .single-blog-box:hover .blog-box-content {
        border: 1px solid #F87900;
    }

Special Notes

Bootstrap Heading Font size

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
Mark up url: Click here