Moving on from where we left off, we’ll create the remaining site sections: CTA section, About us, Testimonials, Blog section, Contact area and Footer. We’ll also create the responsive media queries and our custom JavaScript.
7. CTA Section
This section has a nice background from OnextraPixel, a short paragraph and CTA button.
Step 1 – CTA section HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!--section CTA--> <section class="section-cta add-padding clearfix"> <div class="container"> <div class="row"> <div class="col-md-12"> <p class="cta-text">We create awesome designs <span>that you'll love!<span></p> <p class="cta-button"> <a href="#" class="button button-lg button-ghost-inverse">Let's work together!</a> </p> </div><!--end col-md-12--> </div><!--end row--> </div><!--end container--> </section><!--end section CTA--> |
Since it’s a new section, we have to add some padding and a clearfix. We have to clear the items because we will float the CTA button to the left.
Step 2 – CTA section CSS
We already defined the general CSS styles, so our CSS is very simple:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/*========== CTA SECTION ==========*/ .section-cta { background-color: @color-accent; color: @color-text-light; background-image: url("../img/cta-bg.png"); } .cta-text, .cta-button { margin-bottom: 0; } .cta-text { font-size: 1.5rem; text-transform: uppercase; font-weight: 600; display: inline-block; } .cta-button { float: right; } |
8. About Us Section
This main section is divided in 2 small-subsections: the top about us part and our team subsection.
In the About us part we have an accordion with 3 panels and 4 skill bars. To get the code for this components go to Bootstrap site and check the provided examples: accordions and progress bar.
Step 1 – About us section HTML
Copy the examples and add your text content:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
<!--section about--> <section class="section-about add-padding" id="about"> <div class="container"> <div class="row"> <div class="heading text-center"> <h2>About us</h2> <p class="subheading">Read more about our work ethic</p> </div> <div class="col-md-6 col-sm-6 accordions"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel"> <div class="panel-heading active" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Our Company </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste voluptatem pariatur tempore aperiam. Tempore et consectetur, doloribus accusantium nisi vero voluptates, dolorum labore vitae aspernatur. Explicabo, perferendis quas corporis mollitia. </div> </div> </div> <div class="panel"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Our Mission </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. </div> </div> </div> <div class="panel"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Our Story </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute. </div> </div> </div> </div> </div> <div class="col-md-6 col-sm-6 skill-bars"> <div class="skill clearfix"> <h5>Web Design</h5> <span class="pull-right">90%</span> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"> <span class="sr-only">90% Complete</span> </div> </div> </div><!--end skill--> <div class="skill clearfix"> <h5>App Development</h5> <span class="pull-right">50%</span> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"> <span class="sr-only">50% Complete</span> </div> </div> </div><!--end skill--> <div class="skill clearfix"> <h5>Graphic Design</h5> <span class="pull-right">70%</span> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"> <span class="sr-only">70% Complete</span> </div> </div> </div><!--end skill--> <div class="skill clearfix"> <h5>Photography</h5> <span class="pull-right">83%</span> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="83" aria-valuemin="0" aria-valuemax="100" style="width: 83%;"> <span class="sr-only">83% Complete</span> </div> </div> </div><!--end skill--> </div><!--end skill-bars--> </div><!--end row--> </div><!--end container--> </section><!--end section about--> |
This might seem like an overly-complicated HTML, but this is just the copy & pasted code from the examples with some minor adjustments. The only real thing added is the active
class added to the expanded accordion. We’ll use this class in our JavaScript to indicate the active state of the other accordion panels as well.
Step 2 – About Us Section CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
/*========== ABOUT SECTION ==========*/ /*========== accordions ==========*/ .panel-group { margin-bottom: @margin; &:last-child { margin-bottom: 0; } } .panel { border: 1px solid @color-border; border-radius: 5px; } .panel > .panel-heading { background-color: @color-light-bg; color: @color-text; } .panel-heading { padding: @margin/2 @margin; border-top-right-radius: 5px; border-top-left-radius: 5px; a { display: block; } } .panel-heading.active { background-color: @color-accent; color: @color-text-light; } .panel > .panel-heading.active + .panel-collapse > .panel-body { background-color: @color-alternate; border: 1px solid @color-accent; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .panel > .panel-heading + .panel-collapse > .panel-body { padding: @margin/2 @margin; font-weight: 300; } /*========== skills ==========*/ .skill { h5 { display: inline-block; text-transform: none; margin-top: 0; margin-bottom: @margin/2; } &:hover { h5, span { color: @color-accent; } .progress { background-color: @color-alternate; .transition(background-color); } } } .progress { height: @margin/2; background-color: #ededed; box-shadow: none; margin-bottom: @margin; } .progress-bar { .transition(width 1.5s ease-in-out); } |
To match the look of the site with the look of the designed template, we have to overwrite some Bootstrap styles. The CSS added is very simple and very short.
The biggest change that we have to make to our skill bars is to make them smaller and change the color. This is achieved with some minimal CSS styles.
Step 3 – Our team HTML
This section features some flat card inspired design.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<!--section team--> <section class="section-team"> <div class="container"> <div class="row"> <div class="heading text-center"> <h2>Our team</h2> <p class="subheading">meet our awesome team</p> </div> <div class="col-md-3 col-sm-6 col-xs-6"> <div class="team-box text-center"> <figure> <img src="img/team-1.png" alt="Team picture" class="img-responsive"> </figure> <h5 class="team-name">John Smith</h5> <p class="team-role">CEO & founder</p> <ul class="social list-inline"> <li><a href="#"><i class="fa fa-google"></i></a></li> <li><a href="#"><i class="fa fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> </ul> </div><!--end team box--> </div><!--end col-md-3--> <div class="col-md-3 col-sm-6 col-xs-6"> <div class="team-box text-center"> <figure> <img src="img/team-2.png" alt="Team picture" class="img-responsive"> </figure> <h5 class="team-name">Jess Smith</h5> <p class="team-role">designer</p> <ul class="social list-inline"> <li><a href="#"><i class="fa fa-google"></i></a></li> <li><a href="#"><i class="fa fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-dribbble"></i></a></li> <li><a href="#"><i class="fa fa-github"></i></a></li> </ul> </div><!--end team box--> </div><!--end col-md-3--> <div class="col-md-3 col-sm-6 col-xs-6"> <div class="team-box text-center"> <figure> <img src="http://lorempicsum.com/futurama/267/264/6" alt="Team picture" class="img-responsive"> </figure> <h5 class="team-name">Jim Berger</h5> <p class="team-role">developer</p> <ul class="social list-inline"> <li><a href="#"><i class="fa fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-github"></i></a></li> </ul> </div><!--end team box--> </div><!--end team box--> <div class="col-md-3 col-sm-6 col-xs-6"> <div class="team-box text-center"> <figure> <img src="http://lorempicsum.com/futurama/267/264/1" alt="Team picture" class="img-responsive"> </figure> <h5 class="team-name">Ben Reids</h5> <p class="team-role">marketing</p> <ul class="social list-inline"> <li><a href="#"><i class="fa fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> </ul> </div><!--end team box--> </div><!--end team box--> </div> <!-- end row --> </div><!-- end container --> </section><!--end section team--> |
This section’s HTML has similar structure and classes as the previous examples: column classes, text-center, list-inline are Bootstrap classes. The image is inside a figure
element and the social icons are from FontAwesome.
Step 4 – Our team CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
/*========== TEAM SECTION ==========*/ .section-team { margin-bottom: @margin; } .team-box { background-color: @color-light-bg; border: 1px solid @color-border; border-radius: 5px; margin-bottom: @margin; &:hover { background-color: @color-alternate; border: 1px solid @color-accent; .team-role { color: @color-accent; border-bottom: 1px solid @color-accent; } .transition(all); } figure { position: relative; margin-bottom: @margin*1.5; } img { border-top-right-radius: 5px; border-top-left-radius: 5px; width: 100%; } .team-name { display: block; color: @color-text-light; background-color: @color-accent; border-radius: 5px; padding: @margin/2 @margin; position:absolute; bottom: 100px; left: 50%; transform: translate(-50%, 0); } .team-role { font-style: italic; font-weight: 400; padding-bottom: @margin/2; margin-bottom: @margin/2; border-bottom: 1px solid @color-border; } .social a { font-size: 1.125rem; color: @color-text; &:hover { color: @color-accent; } } } |
Our team-box
creates the flat card inspired design. To achieve this we added some rules regarding color, margins and borders and some hover state rules. To create the top rounded corners for our image we used this CSS property: border-top-right-radius: 5px;
and border-top-left-radius: 5px;
for the left corner. The figure
element has the position set to relative so that the team-name
can be absolutely positioned over the image.

9. Testimonials Section
This sections uses another Bootstrap component: carousel. The code is based on the Bootstrap example.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!--section testimonials--> <div class="container-fluid text-center" id="testimonials"> <div class="row"> <section class="hero hero-testimonial"> <div class="overlay add-padding"> <div class="heading text-center"> <h2>Testimonials</h2> <p class="subheading">see what our clients have to say about us</p> <i class="fa fa-quote-left quote"></i> </div> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Wrapper for carousel items --> <div class="carousel-inner"> <div class="item active"> <blockquote class="fancy-quote text-center"> <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium sequi architecto consectetur deleniti totam! Maiores labore, laborum non omnis, repudiandae totam iure eaque dolore velit. Quasi illo aliquid, quo praesentium."</p> <footer><cite>Jane Janet</cite></footer> </blockquote> </div> <div class="item"> <blockquote class="fancy-quote text-center"> <p>"Totam iure eaque dolore velit. Quasi illo aliquid, quo praesentium. Totam iure eaque dolore velit. Quasi illo aliquid, quo praesentium."</p> <footer><cite>Lorelai Clarkson</cite></footer> </blockquote> </div> <div class="item"> <blockquote class="fancy-quote text-center"> <p>"Sint reprehenderit, consequuntur vero impedit deleniti rerum ea debitis qui ipsa quod nesciunt? Eum, ut maiores praesentium."</p> <footer><cite>Jay Adabessi</cite></footer> </blockquote> </div> </div> <!-- Carousel indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel controls --> <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div><!--end overlay--> </section> <!--end hero section --> </div> <!--end row --> </div><!-- end container-fluid --> |
The testimonials are placed in blockquote
element with a class of fancy-quote
for easy styling.
Step 2 – The Testimonials CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
/*========== TESTIMONIALS SECTION ==========*/ .hero-testimonial { background-image: url("../img/testimonials-bg.jpg"); .overlay { padding-bottom: 4.5rem; } h2 { color: @color-text-light; position: relative; } .quote.fa { background-color: @color-accent; border-radius: 50%; padding: @margin/2; margin-top: @margin; } .heading { margin-bottom: @margin/2; } } .fancy-quote { text-transform: none; border: none; font-style: italic; margin: 0 auto; width: 50%; cite { color: @color-accent; text-transform: uppercase; font-size: 1rem; font-family: @font-header; font-style: normal; font-weight: 600; } } blockquote footer::before { content: none; } .carousel-indicators { bottom: -@margin*2; .active { background-color: @color-accent; border-color: @color-accent; } } |
The CSS is very basic: we just have to set the background image and specify some margins and colors. To create the circle, we have to set the border radius to 50%.

10. Blog Section
In this section we’re showing our latest 3 articles from our blog. The design is similar to the team-box section.
Step 1 – Blog section HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<!--section blog --> <section class="section-blog add-padding" id="blog"> <div class="container"> <div class="row"> <div class="heading text-center"> <h2>Our blog</h2> <p class="subheading">read our latest news</p> </div> <div class="blog-list clearfix"> <div class="col-md-4"> <div class="blog-box"> <figure> <img src="http://lorempicsum.com/simpsons/450/240/2" alt="Article picture" class="img-responsive"> </figure> <p class="meta text-center"> <a href="#" class="meta-date">06 <span>jun<span></a> <a href="#" class="meta-comments"><i class="fa fa-comments"></i>23</a> </p> <div class="content text-center"> <a href="#"><h4>An interesting title</h4></a> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis ratione culpa error enim libero ipsam cupiditate architecto.</p> <a href="#" class="button button-md button-secondary">Read Article</a> </div> </div><!--end blog-box--> </div><!--end col-md-4--> <div class="col-md-4"> <div class="blog-box"> <figure> <img src="http://lorempicsum.com/simpsons/450/240/5" alt="Article picture" class="img-responsive"> </figure> <p class="meta text-center"> <a href="#" class="meta-date">06 <span>jun<span></a> <a href="#" class="meta-comments"><i class="fa fa-comments"></i>23</a> </p> <div class="content text-center"> <a href="#"><h4>An interesting title</h4></a> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis ratione culpa error enim libero ipsam cupiditate architecto.</p> <a href="#" class="button button-md button-secondary">Read Article</a> </div> </div><!--end blog-box--> </div><!--end col-md-4--> <div class="col-md-4"> <div class="blog-box"> <figure> <img src="http://lorempicsum.com/simpsons/450/240/1" alt="Article picture" class="img-responsive"> </figure> <p class="meta text-center"> <a href="#" class="meta-date">06 <span>jun<span></a> <a href="#" class="meta-comments"><i class="fa fa-comments"></i>23</a> </p> <div class="content text-center"> <a href="#"><h4>An interesting title</h4></a> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis ratione culpa error enim libero ipsam cupiditate architecto.</p> <a href="#" class="button button-md button-secondary">Read Article</a> </div> </div><!--end blog-box--> </div><!--end col-md-4--> </div><!--end blog-list--> <p class="text-center"> <a href="#" class="button button-md button-ghost">Read our Blog</a> </p> </div> <!-- end row --> </div><!-- end container --> </section><!--end section-blog--> |
Step 2 – Blog section CSS
The techniques used are similar with the ones used in Our Team subsection.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
/*========== BLOG SECTION ==========*/ .blog-box { border: 1px solid @color-border; border-radius: 5px; margin-bottom: @margin; &:hover { background-color: @color-alternate; border-color: @color-accent; } h4 { margin-top: 0; color: @color-accent; &:hover { color: @color-text; } } figure { position: relative; } img { border-top-right-radius: 5px; border-top-left-radius: 5px; width: 100%; } .content { padding: @margin @margin/2; } .meta { position: absolute; top: 1px; left: 16px; a { color: @color-text-light; } .meta-date { background-color: @color-accent; display: block; width: 62px; height: 70px; border-top-left-radius: 5px; font-size: 1.5rem; font-weight: 400; padding-top: 12px; span { font-size: 0.875rem; display: block; text-transform: uppercase; } } .meta-comments, .fa { font-size: 0.75rem; } .meta-comments { background-color: @color-dark; width: 62px; height: 25px; display: block; border-bottom-right-radius: 5px; .fa { margin-right: 6px; } } } } .blog-list { margin-bottom: @margin; } |
To the display the meta information over the image, we used absolute positioning and to keep the design consistent with our PSD document, we set the meta-date box width to 62 pixels and the height to 70 pixels. The meta-comments box has a height of 25px.

11. Contact section
This section consists of an unordered list that shows our Agency contact information and a contact form.
Step 1 – Contact section HTML
The icons used are from FontAwesome. The second list item, the one that displays our social media icons, contains an unordered list.
Our contact form spans 8 columns and since this is an example, it has a novalidate
property. This means that if you submit the form, it will not validate.
Each form input is placed inside a paragraph and has a label.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!--section contact--> <section class="section-contact add-padding alternate-bg" id="contact"> <div class="container"> <div class="row"> <div class="heading text-center"> <h2>Contact us</h2> <p class="subheading">keep in touch</p> </div> <div class="col-md-4 col-sm-5"> <ul class="contact-information"> <li><i class="fa fa-phone"></i>555-123-456</li> <li> <i class="fa fa-share-alt"></i> <ul class="social-icons list-inline"> <li><a href="#"><i class="fa fa-google"></i></a></li> <li><a href="#"><i class="fa fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-dribbble"></i></a></li> <li><a href="#"><i class="fa fa-github"></i></a></li> </ul> </li> <span> <li><i class="fa fa-envelope"></i><a href="#">office@theagency.com</a></li> <li><i class="fa fa-map-marker"></i>23 short street, Earth</li> </span> </ul> </div><!--end col-md-4--> <div class="col-md-8 col-sm-7"> <div class="row"> <form action="" method="POST" class="contact-form clearfix" novalidate> <p class="col-md-6 name-input"> <label for="name">Name:</label> <input type="text" name="name" id="name" placeholder="Name"/> </p> <p class="col-md-6"> <label for="email">E-mail:</label> <input type="email" name="email" id="email" placeholder="E-mail"/> </p> <p class="col-md-12"> <label for="subject">Subject:</label> <input type="text" name="subject" id="subject" placeholder="Subject"/> </p> <p class="col-md-12"> <label for="message">Message:</label> <textarea name="message" id="message" cols="30" rows="5" placeholder="Message"></textarea> </p> <p class="form-button"> <input type="submit" class="button button-md button-ghost" value="Send message"> </p> </form> </div><!--end row--> </div><!--end col-md-8--> </div><!--end row--> </div><!--end container--> </section><!--end section contact--> |
Step 2 – ui.less
Until now we’ve placed our less code inside the main.less file, but to keep our project clean and maintainable we will define our form styles in the ui.less file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
/*========== FORMS ==========*/ input[type="text"], input[type="email"], textarea { width: 100%; padding: @margin/4 @margin/2; border: 1px solid @color-border; border-radius: 5px; font-style: italic; &:focus, &:hover { border: 1px solid @color-accent; .transition(all); } } textarea { max-height: (@margin*10); max-width: 100%; } label { display: block; font-weight: 400; text-transform: uppercase; font-family: @font-header; } input[type="submit"] { background: transparent; } |
The input element’s width is set 100% so that they will be the same width as the parent container.
Step 3 – Contact section CSS
The styling for the contact section is pretty basic: we define some margins, paddings and colors:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
/*========== CONTACT SECTION ==========*/ .section-contact { margin-top: -@margin; } .contact-information { list-style: none; margin: 0; padding: 0; li { .fa { color: @color-accent; font-size: 1.125rem; margin-right: @margin; } padding: @margin 0 @margin @margin; &:hover { background-color: darken(@color-alternate, 5%); .transition(background-color); } } .social-icons { display: inline-block; li { margin: 0; padding: 0; .fa { margin-right: @margin/2; color: @color-text; &:hover { color: @color-accent; } } } } } /*========== contact form ==========*/ .contact-form { .name-input { padding-right: @margin; } p:last-child { margin-bottom: 0; } input[type="submit"] { margin-left: 15px; } } |
13. Google Map
Maps are a popular element in contact sections and allows the uses or potential client to easily locate you on the map.
To add a Google map, follow the instructions provided by Google here.
Step 1 – The HTML
1 2 3 4 |
<!--section map--> <section class="section-map"> <iframe class="embed-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11397.121382633872!2d26.105588972568555!3d44.42741126518615!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0000000000000000%3A0x2b1089f802abaddc!2sPalace+of+Parliament!5e0!3m2!1sen!2sro!4v1436141781179" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> </section><!-- end section map --> |
The HTML code is very simple: just add the iframe code provided by Google. To easily style the map, I added the embed-map
class.
Step 2 – The CSS
1 2 3 4 5 6 7 8 9 10 11 12 |
/*========== MAP SECTION ==========*/ .section-map { height: @margin*10; background: @color-border; .embed-map { height: 100%; width: 100%; } } |
This css code is very basic. I specified the height, added a background color in case the map doesn’t load and width and height of 100%.
14. Footer section
The footer section is the last part of our site design.
We’ll display social icons and a short copyright information.
Step 1 – Footer HTML
1 2 3 4 5 6 7 8 9 10 |
<footer class="main-footer text-center add-padding"> <ul class="social-icons list-inline"> <li><a href="#"><i class="fa fa-google"></i></a></li> <li><a href="#"><i class="fa fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-dribbble"></i></a></li> <li><a href="#"><i class="fa fa-github"></i></a></li> </ul> <p class="copyright">©2015<a href="http://acasaprogramming.ro"> The Agency</a></p> </footer> |
Step 2 – Footer CSS
We will write the footer CSS in a new file named footer.less. Inside this file we’ll define some css rules regarding color:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/*====================================== = FOOTER SECTION = ======================================*/ .main-footer { color: @color-text-light; background-color: @color-dark; .social-icons a { color: @color-text-light; &:hover { color: @color-accent; } } p { font-weight: 700; margin-bottom: 0; } } |
The final result:

15. JavaScript
Now it’s time to add some JavaScript to filter the portfolio and add additional functionality to our site.
Step 1 – initialising the JavaScript
To intialize our JavaScript we have to add the following code in our custom.js file:
1 2 3 4 5 6 7 |
$(document).ready(function() { fixedNavbar(); //sticky navbar activeAccordion(); //change active accordion color smoothScroll(); shuffleme.init(); //filter portfolio }); |
As you can see, I created 4 functions for our site: fixedNavbar()
will make our white header fixed on top, hiding the blue contact information header. activeAccordion()
adds the active css class to the active accordion and removes it when it’s no longer need it.
smoothScroll()
creates a smooth scrolling effect when the user click a menu link and shuffle.init
is the function responsible with portfolio filtering.
Step 2 – Making the navigation header sticky
Add this code in the custom.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function fixedNavbar() { var $header = $('nav'); $(window).scroll(function() { var scroll = $(this).scrollTop(); if( scroll >= 48 ) { $header.addClass('navbar-fixed-top'); $('body').addClass('add-nav-padding'); } else { $header.removeClass('navbar-fixed-top'); $('body').removeClass('add-nav-padding'); } }); }; |
When the user scrolls more than 48 pixels (2 baselines – the height of the blue header), we add the navbar-fixed-top
to the nav and we add some padding to the body to compensate for the sticky header height.
Step 3 – Active accordion style
When the user clicks on accordion panel we have to offer feedback by adding the active class. We can very easily do this with JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function activeAccordion() { $('#accordion > .panel').on('show.bs.collapse', function (e) { var heading = $(this).find('.panel-heading'); heading.addClass("active"); }); $('#accordion > .panel').on('hidden.bs.collapse', function (e) { var heading = $(this).find('.panel-heading'); heading.removeClass("active"); }); }; |
Step 4 – Smooth scroll
To create a smooth scrolling effect, I used a snippet from the awesome CSS-tricks site.
When the user clicks on a link from the navigation menu, we’ll append the section id to our web address and then smoothly scroll to content in 900 milliseconds.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function smoothScroll() { //code snippet from -> https://css-tricks.com/snippets/jquery/smooth-scrolling/ $("#navigation ul li a[href^='#']").click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); // store hash target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top - 90 }, 900); window.location.hash = hash; } } }); } |
Step 5 – Filtering the portfolio
To filter our portfolio we’ll use the same techniques that we covered in our article Filterable portfolio with Shuffle.JS and Bootstrap 3.
We have to identify the target items: the grid, the filter menu and the item size.
1 2 3 |
var $grid = $('#grid'), $filterOptions = $('.portfolio-sorting li'), $sizer = $grid.find('.shuffle_sizer'), |
The setupFilters function allows us to filter the portfolio by identifying the active filter menu item. Listen() function adds a short delay between our filtered items, ensuring that our script runs properly.
The final shuffle.init() function:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
var shuffleme = (function( $ ) { 'use strict'; var $grid = $('#grid'), $filterOptions = $('.portfolio-sorting li'), $sizer = $grid.find('.shuffle_sizer'), init = function() { // None of these need to be executed synchronously setTimeout(function() { listen(); setupFilters(); }, 100); // instantiate the plugin $grid.shuffle({ itemSelector: '[class*="col-"]', sizer: $sizer }); }, // Set up button clicks setupFilters = function() { var $btns = $filterOptions.children(); $btns.on('click', function(e) { e.preventDefault(); var $this = $(this), isActive = $this.hasClass( 'active' ), group = isActive ? 'all' : $this.data('group'); // Hide current label, show current label in title if ( !isActive ) { $('.portfolio-sorting li a').removeClass('active'); } $this.toggleClass('active'); // Filter elements $grid.shuffle( 'shuffle', group ); }); $btns = null; }, // Re layout shuffle when images load. This is only needed // below 768 pixels because the .picture-item height is auto and therefore // the height of the picture-item is dependent on the image // I recommend using imagesloaded to determine when an image is loaded // but that doesn't support IE7 listen = function() { var debouncedLayout = $.throttle( 300, function() { $grid.shuffle('update'); }); // Get all images inside shuffle $grid.find('img').each(function() { var proxyImage; // Image already loaded if ( this.complete && this.naturalWidth !== undefined ) { return; } // If none of the checks above matched, simulate loading on detached element. proxyImage = new Image(); $( proxyImage ).on('load', function() { $(this).off('load'); debouncedLayout(); }); proxyImage.src = this.src; }); // Because this method doesn't seem to be perfect. setTimeout(function() { debouncedLayout(); }, 500); }; return { init: init }; }( jQuery )); |
16. Media Queries
The final piece of the puzzle is adding some media queries to make our website look good on smaller resolutions. To know at what width you design “breaks”, you can resize your browser or Right Click and select Inspect Element and then choose Device mode if you’re on Chrome or Responsive Design Mode if you’re on Firefox.
We’ll add our CSS code in a new file called media-query.less and we’ll import it in our styles.less: @import 'media-query.less';
.
Step 1 – 1200px width
When we resize our site to 1200 pixels, we can see that our design breaks: our navigation menu it’s pushed under the logo, our team’s name is displayed on 2 lines and our testimonial text is to narrow.
To easily fix this, we have to create a media query that targets this resolution and fixes these issues:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
@media (max-width: 1200px) { /*========== NAVBAR ==========*/ .navbar-header { float: none; } .navbar-left, .navbar-right { float: none !important; margin:0; } .navbar-toggle { display: block; margin: @margin; } .navbar-collapse.collapse { display: none!important; } .navbar-nav { float: none!important; } .navbar-nav>li { float: none; } .collapse.in { display:block !important; } .navbar-collapse.in { overflow-y: auto !important; } .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; box-shadow: none; } .navbar-nav { background-color: @color-alternate; border: 2px solid @color-accent; border-radius: 5px; margin-bottom: @margin; } .navbar-nav > li { margin: @margin/2 0; padding: 0; } .navbar-nav > li > a { text-align: center; margin: 0; padding: 0; } .navbar-nav > .open > a, .navbar-nav > .open > a:hover, .navbar-nav > .open > a:focus, .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus, .navbar-nav > li > a:hover { border: none; margin: 0; padding: 0; } /*========== TEAM SECTION ==========*/ .team-box .team-name { padding: @margin/2; } /*========== TESTIMONIALS SECTION ==========*/ .fancy-quote { width: 70%; } } |
The navbar CSS code seems the most complex and that’s because we have to overwrite a lot of Bootstrap CSS styles: we have to remove the float properties of our elements and then we have to style our menu items color and background to match our site’s look and feel. To style those elements, I designed in the browser by inspecting elements and directly modifying values in the CSS rules editor.
To fix our team name issues, I’ve set the padding to half a margin: 12px. For our testimonials section, I’ve increased the width to 70%.


Step 2 – 990px width
At 990px width some new issues arise: the text in our CTA banner secion is to big and our team name padding size is to small.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@media (max-width: 990px) { /*========== CTA SECTIONS ==========*/ .section-cta p { font-size: 1.125rem; } /*========== TEAM SECTION ==========*/ .team-box .team-name { padding: @margin/2 @margin; } } |
Step 3 – 767px width
At this screen resolution, we can very easily see that the margin between our elements in the Services and About us Sections is too small. In our contact area seems like a good idea to center our content and display the contact information inline.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
@media (max-width: 767px) { /*========== SERVICE SECTION ==========*/ .service-box { margin-bottom: @margin*2; } .section-services { margin-bottom: -@margin*2; } /*========== ABOUT US SECTION ==========*/ .accordions { margin-bottom: @margin*2; } /*========== CONTACT SECTION ==========*/ .contact-information { text-align: center; margin-bottom: @margin; li { display: inline-block; padding-right: @margin/2; margin-left: @margin; } span { display: block; } } .contact-form .form-button { text-align: center; } } |
Step 4 – 680px width
Our CTA section’s items are too big for this resolution. In our media query we simply have to decrease the font size and paddings:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@media (max-width: 680px) { .section-cta { .button { padding: @margin/4 @margin/2; } p { font-size: 1rem; } } } |
Step 5 – 630px width
Our blue top header seems now overcrowded, so I decided to remove the email and phone information and only display the social icons in the center.
The Hero section text and buttons are too big, so we have to decrease their size and we can now center the content of our CTA section.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
@media (max-width: 630px) { /*========== TOP HEADER ==========*/ .header-top { .contact { display: none; } .social-icons { text-align: center; float: none !important; } } /*========== HERO SECTION ==========*/ .hero { h2 { font-size: 2.25rem; } .hero-subheading { font-size: 1.125rem; } .hero-buttons .button { padding: @margin/4 @margin/2; } } /*========== CTA SECTION ==========*/ .section-cta { text-align: center; } .cta-button { margin-top: @margin; float: none; text-align: center; } } |
Step 6 – 500px width
To improve our Hero section appearance I modified the line height and button’s padding.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@media (max-width: 500px) { .hero-subheading { line-height: 1.5; } .hero-buttons { .button { padding: @margin/4 @margin/2; } } } |
Step 7 – 450px width
At this small resolution, I want to display our blue The Agency heading part on its own line. To do this, we have to add a display: block
property.
The padding between our links in the portfolio menu is to big, so I removed the padding completely and we fixed some issues with our team name.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
@media (max-width: 450px) { /*========== HERO SECTION ==========*/ .hero { h2 span { display: block; } } /*========== PORTFOLIO SECTION ==========*/ .portfolio-sorting li { padding: 0; } /*========== TEAM SECTION ==========*/ .team-box .team-name { padding: @margin/2; font-size: 0.875rem; } } |
Step 8 – Really small screen resolution
At 398px the hero buttons and portfolio filter buttons are shown on their own line and we have to add some margin-top to add some spacing between them.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
@media (max-width: 398px) { .hero { .hero-buttons a:last-child { margin-top: @margin/2; display: inline-block; } } .portfolio-sorting li:last-child { margin-top: @margin/2; } } |
At 300px I decided to remove our agency name and only display the logo:
1 2 3 4 5 6 7 |
@media (max-width: 300px) { .navbar-brand h1 { display: none; } } |
Conclusion
We finished this massive series and we built a clean and modern design agency portfolio template.
I hope you found this tutorial useful and learned some new techniques along the way. If you have any questions or suggestions to improve the code, feel free to leave a comment in the comment section bellow.