"boxes-hover"
Bootstrap 4.1.1 Snippet by ishu511

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h2 class="ayush">AYUSH THAKUR</h2> <section id="application"> <div class="container"> <!--promite--> <div class="row"> <div class=" text-center col-md-12 window"> <h2>Prominent Features of our<br> <span>Lorem Ipsum<br> Lorem Ipsum is simply dummy </span> </h2> </div> </div> <!--part-3(first-section)--> <div class="row"> <!--part-1--> <div class="col-md-4"> <div class=" text-center design"> <h5>Lorem Ipsum<br> Lorem Ipsum</h5> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p> </div> </div> <!--part-2--> <div class="col-md-4"> <div class=" text-center design"> <h5>Lorem Ipsum<br> Lorem Ipsum</h5> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p> </div> </div> <!--part-3--> <div class="col-md-4"> <div class=" text-center design"> <h5>Lorem Ipsum<br> Lorem Ipsum</h5> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p> </div> </div> </div> <!--part-3(second-section)--> <div class="row"> <!--part-1--> <div class="col-md-4"> <div class=" text-center design"> <h5>Lorem Ipsum<br> Lorem Ipsum</h5> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p> </div> </div> <!--part-2--> <div class="col-md-4"> <div class=" text-center design"> <h5>Lorem Ipsum<br> Lorem Ipsum</h5> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p> </div> </div> <!--part-3--> <div class="col-md-4"> <div class=" text-center design"> <h5>Personalized<br> design consultancy</h5> <p>We provide our clients with personalized design consultancy,which helps decide the right choice forfabric, style and design of furnishings.</p> </div> </div> </div> </div> </section>
body{background-image: -ms-linear-gradient(bottom left, #cb60b3 0%, #C146A1 50%, #A80077 51%, #db36a4 100%); background-image: -moz-linear-gradient(bottom left, #cb60b3 0%, #C146A1 50%, #A80077 51%, #db36a4 100%); background-image: -o-linear-gradient(bottom left, #cb60b3 0%, #C146A1 50%, #A80077 51%, #db36a4 100%); background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0, #cb60b3), color-stop(50, #C146A1), color-stop(51, #A80077), color-stop(100, #db36a4)); background-image: -webkit-linear-gradient(bottom left, #cb60b3 0%, #C146A1 50%, #A80077 51%, #db36a4 100%); background-image: linear-gradient(to top right, #cb60b3 0%, #C146A1 50%, #A80077 51%, #db36a4 100%);} #application { background-image: url("../image/about-us/section.jpg"); padding-top: 33px; padding-bottom: 50px; background-repeat: no-repeat; background-size: cover; } .window span { margin-top: 5px; display: block; font-weight: 500; font-size: 41px; } .window h2 { font-weight: 500; font-size: 44px; margin-bottom: 32px; } .design h5 { color: #d5a440; font-size: 22px; font-weight: 500; } #application p { font-size: 17px; line-height: 30px; margin-bottom: 32px;cursor: pointer; } .col-md-4 .design:hover { box-shadow: 1px 1px 6px rgba(0,0,0,0.8); transition:all ease-in-out 0.5s;} .design { padding: ; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; } .ayush { color: red; text-align: center; width: 100%; font-size: 35px; position: relative;; text-shadow: 2px 2px 1px yellow; }

Related: See More


Questions / Comments: