"Scroll Animation sections "
Bootstrap 4.1.1 Snippet by thina2762

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <link rel="stylesheet" href="Css/styles.css"/> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> </head> <body> <section> <div class="container-fluid"> <div class="row"> <div data-aos="fade-up" data-aos-delay="300" class="col col-lg-4"> <img src="https://drive.google.com/uc?export=view&id=1G-DhXjRFGdTlq9VmhfRiUXmCRHj8zZC5" alt="" class="img-card" > </div> <div data-aos="fade-up" class="col col-lg-8 py-5"> <div class="container py-5"> <h2>Lorem ipsum dolor sit amet.</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum a perferendis ullam necessitatibus similique libero! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis officiis laborum magnam aut perspiciatis, eos ipsum amet corrupti eaque sint vitae alias quaerat, odit numquam nam aperiam adipisci id ratione?</p> <a href="https://tsrtechsolutions.com" target="_blank" class="btn btn-warning">Read More</a> </div> </div> </div> <div class="row bg-light"> <div data-aos="fade-up" data-aos-delay="200" class="col col-lg-8 py-5"> <div class="container py-5"> <h2>Lorem ipsum dolor sit amet.</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum a perferendis ullam necessitatibus similique libero! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis officiis laborum magnam aut perspiciatis, eos ipsum amet corrupti eaque sint vitae alias quaerat, odit numquam nam aperiam adipisci id ratione?</p> <a href="https://tsrtechsolutions.com" target="_blank" class="btn btn-warning">Read More</a> </div> </div> <div data-aos="fade-up" data-aos-delay="200" class="col col-lg-4"> <img src="https://drive.google.com/uc?export=view&id=1C_uISF8_2nM2Z4fSjJU3LpWZ7wJKgKxx" alt="" class="img-card"> </div> </div> <div class="row"> <div data-aos="fade-up" data-aos-delay="300" class="col col-lg-4"> <img src="Img/pexels-tan-danh-818593.jpg" alt="" class="img-card" > </div> <div data-aos="fade-up" data-aos-delay="300" class="col col-lg-8 py-5"> <div class="container py-5"> <h2>Lorem ipsum dolor sit amet. </h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum a perferendis ullam necessitatibus similique libero! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis officiis laborum magnam aut perspiciatis, eos ipsum amet corrupti eaque sint vitae alias quaerat, odit numquam nam aperiam adipisci id ratione?</p> <a href="https://tsrtechsolutions.com" target="_blank" class="btn btn-warning">Read More</a> </div> </div> </div> </div> </section> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> <script> AOS.init(); </script> </body> </html>
.img-card { height: 100%; width: 100%; color:rgba(128, 128, 128, 0.212); border-color: lightslategrey; box-sizing: border-box; }

Related: See More


Questions / Comments: