"Untitled"
Bootstrap 4.1.1 Snippet by saikrishna99666

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Services --> <section class="services"> <div class="container-fluid"> <div class="row"> <div class="col-md-4"> <div class="service-item first-item"> <div class="icon"></div> <h4>Web Design</h4> <p>Credit goes to <a rel="nofollow" href="https://www.pexels.com">Pexels</a> and <a rel="nofollow" href="https://www.rawpixel.com">Raw Pixel</a> for images used in this template. Thank you.</p> </div> </div> <div class="col-md-4"> <div class="service-item second-item"> <div class="icon"></div> <h4>Bootstrap 4</h4> <p>Proin aliquam facilisis ante interdum. Sed nulla feugiat tempus aliquam.</p> </div> </div> <div class="col-md-4"> <div class="service-item third-item"> <div class="icon"></div> <h4>HTML CSS</h4> <p>Proin aliquam facilisis ante interdum. Sed nulla feugiat tempus aliquam.</p> </div> </div> <div class="col-md-4"> <div class="service-item fourth-item"> <div class="icon"></div> <h4>Download Free</h4> <p>We have many free to use CSS web templates on our site for you.</p> </div> </div> <div class="col-md-4"> <div class="service-item fivth-item"> <div class="icon"></div> <h4>Get in touch</h4> <p>You can get the fastest response from <a rel="nofollow" href="https://www.facebook.com/templatemo">templatemo</a> facebook page.</p> </div> </div> <div class="col-md-4"> <div class="service-item sixth-item"> <div class="icon"></div> <h4>Spread a word</h4> <p>Please tell your friends about our website. This is very helpful.</p> </div> </div> </div> </div> </section>
/* Ramayana CSS Template https://templatemo.com/tm-529-ramayana */ @import url(fontawesome.css); @import url("https://fonts.googleapis.com/css?family=Roboto+Slab:400,700"); /* Services */ .services { margin-top: 100px; } .services .container-fluid { padding-left: 13px; padding-right: 13px; } .services .col-md-4 { padding-left: 2px; padding-right: 2px; } .services .service-item { margin-bottom: 3px; background-color: #eaebef; padding: 50px; text-align: center; transition: all 0.5s; } .services .service-item .icon { width: 50px; height: 50px; display: inline-block; margin-bottom: 30px; background-size: cover; background-repeat: no-repeat; transition: all 0.5s; } .services .first-item .icon { background-image: url(../images/icon_01.png); } .services .first-item:hover .icon { background-image: url(../images/icon_hover_01.png); } .services .second-item .icon { background-image: url(../images/icon_02.png); } .services .second-item:hover .icon { background-image: url(../images/icon_hover_02.png); } .services .third-item .icon { background-image: url(../images/icon_03.png); } .services .third-item:hover .icon { background-image: url(../images/icon_hover_03.png); } .services .fourth-item .icon { background-image: url(../images/icon_04.png); } .services .fourth-item:hover .icon { background-image: url(../images/icon_hover_04.png); } .services .fivth-item .icon { background-image: url(../images/icon_05.png); } .services .fivth-item:hover .icon { background-image: url(../images/icon_hover_05.png); } .services .sixth-item .icon { background-image: url(../images/icon_06.png); } .services .sixth-item:hover .icon { background-image: url(../images/icon_hover_06.png); } .services .service-item:hover { background-color: #535ba0; } .services .service-item:hover h4, .services .service-item:hover p { color: #fff; } .services .service-item h4 { margin-bottom: 20px; transition: all 0.5s; } .services .service-item p { margin-bottom: 0px; transition: all 0.5s; } /* Buttons */ section.buttons { margin-top: 90px; border-bottom: none; padding-bottom: 0px; } section.buttons .container-fluid { padding-left: 0px; padding-right: 0px; } .filled-rectangle-button { margin-bottom: 30px; } .filled-rectangle-button a { font-size: 14px; font-weight: 700; text-transform: uppercase; display: inline-block; padding: 8px; width: 100%; text-align: center; letter-spacing: 0.5px; color: #fff; border: 2px solid #535ba0; transition: all 0.5s; background-color: rgba(83,91,160,1); } .filled-rectangle-button a:hover { color: #535ba0; background-color: rgba(83,91,160,0.25); } .border-rectangle-button { margin-bottom: 30px; } .border-rectangle-button a { font-size: 14px; font-weight: 700; text-transform: uppercase; display: inline-block; padding: 8px; width: 100%; text-align: center; letter-spacing: 0.5px; color: #535ba0; border: 2px solid #535ba0; transition: all 0.5s; background-color: rgba(83,91,160,0.0); }

Related: See More


Questions / Comments: