<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="about-section"> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-12 about-text"> <div class="section-heading space-overflow"> <h1 class="section-title"> <span> About Us </span> </h1> </div> <div class="space-t-40 space-b-40"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do incididunt ipsumaliqua. Sit amet consectetur adipiscing elit. Aenean et tortor at risus viverra adipiscing at. A scelerisque purus semper eget duis at. Non sodales neque sodales ut etiam. Ornare arcu odio ut sem nulla pharetra diam. Eget magna fermentum iaculis eu non diam phasellus. </p> </div> <a class="custom-btn-nav" href="#"> READ MORE </a> </div> <div class="col-lg-8 col-md-12 about_img space-60 p-0"> <div class="about-image-box"> <div class="shape-1"></div> <div class="shape-2"></div> <div class="about-iiner-image-box"> <div class="layout-33"></div> </div> <img src="https://i.ibb.co/p4hdbPK/photo-1558959356-878a1a39e824.jpg"> </div> </div> </div> </div> </section>

/*Nav Css for about us section */ .about-section{ background: linear-gradient(1deg, rgba(239, 239, 239, 0.4) 26%, rgb(245, 243, 255) 73%); padding:70px 0; } .about-image-box { position: relative; flex: 1; max-width: 100%; } .shape-1{ width: 531px; height: 384px; background-image: none; margin: 264px auto 0 72px; color: #ffffff; background-color: #6c5ce7; } .shape-2{ width: 447px; height: 382px; background-image: none; margin: -603px auto 0 0; border-color: #6c5ce7; stroke: #6c5ce7; border-style: solid; border-width: 16px; } .about-iiner-image-box{ width: 393px; min-height: 248px; background-image: url(https://i.ibb.co/yNV1BhY/m.png); background-position: 50% 50%; margin: 39px 0 0 auto; } .about-image-box img{ border-width: 0; object-fit: cover; display: block; vertical-align: middle; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; width: 564px; height: 526px; box-shadow: 0 0 35px 0 rgba(0,0,0,0.5); object-position: 28.7% 100%; background-position: 28.7% 100%; margin: -713px 0 0 auto; } .layout-33{ position: relative; flex: 1; max-width: 100%; } .about_img{ border: 21px solid transparent; text-align: left; background-color: transparent !important; opacity: 1; position: relative; display: flex; background-clip: padding-box; background-origin: padding-box; } .section-title{ color: #6b5be6; text-transform: capitalize; font-weight: bold; letter-spacing: 0.7px; font-size: 3.75rem; line-height: 50px; padding-bottom: 10px; font-family: 'Oswald', sans-serif; } .about-text p { line-height: 30px; margin-bottom: 10px; font-family: 'Montserrat', sans-serif; font-size: 15px; color: #000 !important; } .about_img:before{ content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .p-0{ padding:0; } a.custom-btn-nav { border: 2px solid #6c5ce7; color: #000; width: 150px; display: inline-block; text-align: center; padding: 12px; box-shadow: 1px 2px 0px 0px #6b5be6; } .about-text{ padding:180px 0; } /*Media query for mobile view */ @media only screen and (max-width: 767px) { .about-text { padding: 15px; } .p-0{ padding:15px; } .about-image-box img{ width: 268px; height: 332px; margin-top: -463px; margin-right: 0; margin-bottom: 0; } .about-iiner-image-box { width: 212px; min-height: 264px; margin-top: -82px; } .shape-1{ width: 255px; height: 201px; margin-top: 210px; margin-right: 40px; margin-left: auto; } .shape-2{ height: 249px; width: 261px; margin-top: -378px; margin-right: auto; margin-left: 0; } .about_img{ min-height: 533px; } } /*Media query for mobile view closed */ /*Nav Css for about us section closed */