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> 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> 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> 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