Create Values Card Using Bootstrap & CSS With Source Code By Indian Coding Wala

Omnath Dubey 5/12/2023 10:18:00 AM

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://www.pngmart.com/files/15/Smiling-Business-Man-Standing-PNG-Image.png" class="img-fluid" alt="">
<h3>Indian Coding Wala</h3>
<p>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://www.pngmart.com/files/15/Smiling-Business-Man-Standing-PNG-Image.png" class="img-fluid" alt="">
<h3>Indian Coding Wala</h3>
<p>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://www.pngmart.com/files/15/Smiling-Business-Man-Standing-PNG-Image.png" class="img-fluid" alt="">
<h3>Indian Coding Wala</h3>
<p>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: #b3cfff;
}

.values .box img {
  padding: 30px 50px;
  transition: 0.5s;
  transform: scale(1.1);
}

.values .box h3 {
  font-size: 24px;
  color: #012970;
  font-weight: 700;
  margin-bottom: 18px;
}

.values .box:hover {
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
}

.values .box:hover img {
  transform: scale(1);
}

 

Omnath Dubey

Posted by Omnath Dubey