how to design heading style

How to Design Heading Style

/* css */

 section.practice-areas h1{
    background: url(../images/heading-style.png) no-repeat center bottom;
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 50px;
}

html

<section class="practice-areas">
           <div class="container">
              <div class="row">
                  <div class="col-lg-12 col-md-12 col-sm-12">
                     <h1>Our <strong>Practice areas</strong></h1>
                  </div>
              </div>
           </div>
</section>
 

Refrence Sites

////-------Refrence Sites------////

http://www.coffeecup.com/     fluid design help

full width container fluid-container working

/*full width container working*/

.lower-middle-section img {

1. height: auto;
2. max-width: 100%;
3. vertical-align: top;

}

.lower-middle-section img {

1. width: 100%;
2. height: 692px !important;
3. object-fit: cover;

}

.about-charis-jhones .container{ this is container of bootstrap
/*width:100%;*/
/*max-width:100%;*/
   max-width: 85.5em;  define this line
}

.lower-middle-section .container {
    max-width: 85.5em;
    width: 100%;
}

shahzad_samejo@yahoo.com

Start Media Quaries by yasir

/* Start Media Quaries
==================================== */
@media only screen and (min-width: 992px) and (max-width:1199px) {
}

@media only screen and (max-width: 991px) {
.main-nav ul li a span {
display:none;
}

.main-nav ul li.active a {
background:#1e8a7b;
}

.menu {
border:none;
}

.main-nav ul li ul {
background-color: transparent;
opacity: 1;
position: static;
transition: none;
}

.main-nav ul li a {
line-height: 0px;
border-radius: 0;
-o-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-webkit-border-radius: 0;
}

.main-nav ul ul li {
border: none;
}

.mean-container .mean-bar {
position:static !important;
}

.main-nav ul ul a ,
.main-nav ul ul a:link {
line-height: inherit;
}

.main-nav ul ul a ,
.main-nav ul ul a:link {
min-width: inherit;
}

.main-nav ul li ul ul {
margin: 0 !important;
}

header .navigation {
display: none;
}

.menues_container {
background:none;
width:auto;
z-index:0;
}

.main-nav li a i {
color: #fff;
}
}

@media only screen and (max-width: 768px) {
}

@media only screen and (max-width: 640px) {
}

@media only screen and (max-width: 480px) {
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
}

@media (-webkit-max-device-pixel-ratio) {
}

/* ========================= XXX ========================= XXX ========================= */
/* ========================= XXX ========================= XXX ========================= */

set social icons for all with color

set social icons for all with color

CSS

.stay-in-touch ul { list-style:none; padding-top:50px;}
.stay-in-touch li { float:left; width:20%; font-size:16px; color:#000; text-align:center; padding-right:10px;}
.stay-in-touch li a{font-size:16px; color:#000;font-family: 'Roboto', sans-serif;}
.stay-in-touch li a i {width:90px; height:90px; border:1px solid #fff; margin:0 auto 20px; color:#fff; font-size:35px; border-radius:50%; padding-top:28px;}

.stay-in-touch li a:hover i.fa.fa-bell{ background:#432c7b; border:1px solid #432c7b;}
.stay-in-touch li a:hover i.fa.fa-facebook{ background:#3b5998; border:1px solid #3b5998;}
.stay-in-touch li a:hover i.fa.fa-youtube-square{ background:#bb0000; border:1px solid #bb0000;}
.stay-in-touch li a:hover i.fa.fa-twitter{ background:#55acee; border:1px solid #55acee;}
.stay-in-touch li a:hover i.fa.fa-instagram{ background:#125688; border:1px solid #125688;}