"About us creative Design Section "
Bootstrap 4.1.1 Snippet by Naveen Mandwariya

<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 ----------> <section class="section-large-image_nav"> <div class="container container-lined"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-7 col-lg-6"> <div class="about-inner_nav"> <h3>Everything About Us</h3> <h4>IS A CHALLENGE TO DO BETTER</h4> <p>We are a team of talented designers and developers who are ready to guide our clients through the flawless and timely execution of any web design project. Since day one, we have been delivering creative and unique Mobile Responsive websites to our clients worldwide.</p> <div class="button-wrap-2"><a class="custom_nav_btn" href="#">Read more about us</a></div> </div> </div> </div> </div> <div class="image-container"> <div class="inner-image-set"> <div class="object object-1"><img src="https://i.ibb.co/BKWNdHx/pexels-cottonbro-3692887.jpg" alt="" width="395" height="243"> </div> <div class="object object-2"><img src="https://i.ibb.co/tQdTsXy/pexels-abet-llacer-919734.jpg" alt="" width="384" height="189"> </div> <div class="object object-3"><img src="https://i.ibb.co/hC3rK33/pexels-thisisengineering-3861972.jpg" alt="" width="395" height="243"> </div> <div class="object object-4"><img src="https://i.ibb.co/NC5mVz7/pexels-pixabay-356056.jpg" alt="" width="209" height="184"> </div> <div class="object object-5"><img src="https://i.ibb.co/QdtKKsJ/pexels-designecologist-1779487.jpg" alt="" width="395" height="243"> </div> <div class="object object-6"><img src="https://i.ibb.co/tz71LsF/pexels-fauxels-3183197.jpg" alt="" width="275" height="184"> </div> </div> </div> </section>
.section-large-image_nav { padding: 250px 0; position: relative; background: #fbfbfb; overflow: hidden; height: 100vh; } .section-large-image_nav:before { max-width: calc(1200px - 30px); } .section-large-image_nav:before, .section-large-image_nav:after { content: ''; position: absolute; width: 100%; border-left: 1px solid #000000; border-right: 1px solid #000000; } .section-large-image_nav .container-lined { display: block; } .section-large-image_nav .container-lined { position: absolute; top: 0; left: 50%; height: 100%; transform: translateX(-50%); } .section-large-image_nav .container-lined .row { height: 100%; margin: 0; } .section-large-image_nav .container-lined .row > [class*="col-"] { border-left: 1px solid #e5e5e5; } .section-large-image_nav .container-lined .row > [class*="col-"]:last-child { border-right: 1px solid #e5e5e5; } .about-inner_nav h3 { font-family: inherit; font-size: 40px; letter-spacing: 0.7px; word-spacing: 2.5px; font-weight: 100; text-transform: uppercase; }.about-inner_nav h4 { font-family: inherit; font-weight: 300; margin-top: 15px; font-size: 22px; } .about-inner_nav p { font-family: inherit; font-weight: 400; margin-top: 50px; font-size: 18px; color: #867889; letter-spacing: 0.5px; word-spacing: 1px; margin-bottom: 35px; } .section-large-image_nav .container-lined + .container { margin-top: 0; } .custom_nav_btn { position: relative; overflow: hidden; display: inline-block; padding: 12px 24px; font-size: 15px; line-height: 1.25; font-family: inherit; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; text-align: center; cursor: pointer; vertical-align: middle; user-select: none; transition: 250ms all ease-in-out; border: none; border-left: 5px solid #F44336; text-decoration: none; background: #1b1b1b; color: #fff; box-shadow: 1px 1px 15px 1px #0000003b; transition:0.3s ease; } .custom_nav_btn:focus { color: #ffffff; background-color: #1b1b1b; border-color: #5f5cde; transition:0.3s ease; } .custom_nav_btn:hover, .custom_nav_btn:active { color: #ffffff; background-color: #e54919; transition:0.3s ease; border-color: #1b1b1b; text-decoration:none; } .section-large-image_nav .image-container { position: absolute; right: 0; top: 0; left: 56%; bottom: 0; max-width: 850px; padding-top: 80px; padding-bottom: 80px; } .inner-image-set{ position: relative; width: 100%; padding-top: 82%; } .inner-image-set img { max-width: 100%; border-radius: 6px; box-shadow: 0 0 45px 0 rgba(0, 0, 0, 0.4); } .inner-image-set .object { position: absolute; width: 50%; } .inner-image-set .object-1 { top: 17%; left: 22%; } .inner-image-set .object-2 { top: 0; left: 54%; } .inner-image-set .object-3 { top: 38%; left: 6%; } .inner-image-set .object-4 { top: 24%; left: 75%; width: 26%; } .inner-image-set .object-5 { top: 68%; left: 32%; } .inner-image-set .object-6 { top: 59%; left: 59%; width: 34%; }

Related: See More


Questions / Comments: