HTML Source Code :-
<!DOCTYPE html><html><head><title>Bootstrap Hero Section</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="style.css"></head><body><div class="mt-5"><!-- ======= Values Section ======= --><section id="values" class="values"><div class="container" data-aos="fade-up"><div class="row"><div class="col-lg-4" data-aos="fade-up" data-aos-delay="200"><div class="box"><img src="https://pngimg.com/uploads/student/student_PNG140.png" class="img-fluid" alt=""><h3>Indian Coding Wala</h3><p class="color">These are just a few examples of values that people may hold. Everyone has their own unique set of values that shape their worldview and guide their decisions. </p><button type="button" class="btn btn-primary">Read More</button></div></div><div class="col-lg-4 mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="400"><div class="box"><img src="https://pngimg.com/uploads/student/student_PNG140.png" class="img-fluid" alt=""><h3>Indian Coding Wala</h3><p class="color">These are just a few examples of values that people may hold. Everyone has their own unique set of values that shape their worldview and guide their decisions. </p><button type="button" class="btn btn-primary">Read More</button></div></div><div class="col-lg-4 mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="600"><div class="box"><img src="https://pngimg.com/uploads/student/student_PNG140.png" class="img-fluid" alt=""><h3>Indian Coding Wala</h3><p class="color">These are just a few examples of values that people may hold. Everyone has their own unique set of values that shape their worldview and guide their decisions. </p><button type="button" class="btn btn-primary">Read More</button></div></div></div></div></section></div><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script></body></html>
CSS Source Code :-
/*--------------------------------------------------------------# Values--------------------------------------------------------------*/.values .box {padding: 30px;box-shadow: 0px 0 5px rgba(1, 41, 112, 0.08);text-align: center;transition: 0.3s;height: 100%;background-color: #080c13;}.values .box img {padding: 30px 50px;transition: 0.5s;transform: scale(1.1);}.values .box h3 {font-size: 24px;color: #fbfcff;font-weight: 700;margin-bottom: 18px;}.color{color: aliceblue;}.values .box:hover {box-shadow: 0px 0 30px rgba(255, 255, 255, 0.08);}.values .box:hover img {transform: scale(1);}
Social Plugin