without gap box in css



Html

<div class="fullbg">

<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="row">
<div class="cl_1oner">
<h3><i class="fa fa-book" aria-hidden="true" style="font-size:30px;"></i> &nbsp; OUR COURSES</h3>
<p>We are very happy to introduce many dynamic courses which includes many new and great features happy to …</p>


<div class="pointp"> Better designed programs for you</div>
<div class="pointp"> Online Availability to sources</div>
<div class="pointp"> Helping Board in your learning management</div>

<div class="text-center mrrtp30"><a class="primary button bordered-light" href="#">Find out More!</a></div>

</div>
</div>
</div>

<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="row">
<div class="cl_2tow">

<h3><i class="fa fa-users" aria-hidden="true" style="font-size:30px;"></i> &nbsp; OUR COURSES</h3>
<p>We are very happy to introduce many dynamic courses which includes many new and great features happy to …</p>


<div class="pointp"> Better designed programs for you</div>
<div class="pointp"> Online Availability to sources</div>
<div class="pointp"> Helping Board in your learning management</div>

<div class="text-center mrrtp30"><a class="primary button bordered-light" href="#">MEET OUR TEACHERS!</a></div>

</div>
</div>
</div>

<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="row">
<div class="cl_3three">

<h3><i class="fa fa-sign-out" aria-hidden="true" style="font-size:30px;"></i> &nbsp; OUR COURSES</h3>
<p>We are very happy to introduce many dynamic courses which includes many new and great features happy to …</p>


<div class="pointp"> Better designed programs for you</div>
<div class="pointp"> Online Availability to sources</div>
<div class="pointp"> Helping Board in your learning management</div>

<div class="text-center mrrtp30"><a class="primary button bordered-light" href="#">ADMISSION PROCCESS</a></div>

</div>
</div>
</div>

</div>


Css



.clr{ clear:both;}
.fullbg{ width:100%; float:left; display:block; margin-top:200px;}

.cl_1oner{ background: linear-gradient(rgba(10,104,177,.92),rgba(10,104,177,.92)),transparent  url(imges/courses.jpg) center center/cover repeat scroll; width:100%; float:left; display:block; min-height:300px; padding:50px 60px 55px 65px;}

.cl_1oner h3{ font-size:25px; font-weight:bold; text-align:center; color:#FFFFFF; }
.cl_1oner p{ font-size:13px; font-weight:normal; color:#FFFFFF; line-height:25px; margin-bottom:15px; text-align:center;} 
 
.cl_2tow{ background: linear-gradient(rgba(23,72,115,.92),rgba(23,72,115,.92)),transparent  url(imges/admission.jpg) center center/cover repeat scroll; width:100%; float:left; display:block; min-height:300px; padding:50px 60px 55px 65px;}

.cl_2tow h3{ font-size:25px; font-weight:bold; text-align:center; color:#FFFFFF; }
.cl_2tow p{ font-size:13px; font-weight:normal; color:#FFFFFF; line-height:25px; margin-bottom:15px; text-align:center;} 
 

.cl_3three{ background: linear-gradient(rgba(10,104,177,.92),rgba(10,104,177,.92)),transparent  url(imges/geography-teacher-4-1024x683.jpg) center center/cover repeat scroll; width:100%; float:left; display:block; min-height:300px; padding:50px 60px 55px 65px;}


.cl_3three h3{ font-size:25px; font-weight:bold; text-align:center; color:#FFFFFF; }
.cl_3three p{ font-size:13px; font-weight:normal; color:#FFFFFF; line-height:25px; margin-bottom:15px; text-align:center;} 
 
 .pointp{ font-size:13px; font-weight:normal; color:#FFFFFF; line-height:25px; text-align:left;}
.pointp::before { font-family: "FontAwesome"; content:'\f046'; display: inline-block; vertical-align: middle; padding-right: 3px;  }


.bordered-light {
    background-color: transparent !important;
    border: 1px solid #FFF;
 padding: .85em 1em;
  background-color: #2199e8;
    color: #fefefe;
}



.button {
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'Montserrat',sans-serif;
}
 
 .button.primary:hover {
   background-color: #e79800 !important;
    color: #fefefe !important;
}
.mrrtp30{ margin-top:30px;}








No comments:

Post a Comment