Responsive Icon Box Snippet for Website Icon Sections Boost Your Design

Discover a responsive icon box snippet for creating stunning icon sections on your website. Enhance user experience with customizable website icons and sleek responsive snippets.

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<section id="fw_icon_snippet_3">
    <div class="container">
      <div class="heading">
        <h2>Who we are?</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
        <div class="row">
            <div class="col-md-4 col-sm-6">
                <div class="content">
                    <div class="icon">
                      <i class="bi bi-rocket"></i>
                    </div>
                    <h3>our mission</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="content">
                  <div class="icon">
                    <i class="bi bi-eye"></i>
                  </div>
                    <h3>our vision</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="content">
                  <div class="icon">
                    <i class="bi bi-gem"></i>
                  </div>
                  <h3>our value</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
                </div>
            </div>
        </div>
    </div>
</section>

CSS

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
body {
  font-family: "Nunito", sans-serif;
}
#fw_icon_snippet_3{
  padding: 50px 0;
  background: #0c0f16;
  color: #fff;
}
#fw_icon_snippet_3 .heading{
  display: flex;
  margin-bottom: 50px;
}
#fw_icon_snippet_3 .heading h2{
  flex: 0 0 30%;
  margin: 0;
  font-weight: 700;
}
#fw_icon_snippet_3 .heading p{
  color: #b1b1b1;
  margin: 0;
}
#fw_icon_snippet_3 .content{
  padding: 25px;
  background: #181c24;
  text-align: center;
}
#fw_icon_snippet_3 .content .icon{
  color: #ffc200;
  font-size: 40px;
  margin-bottom: 15px;
}
#fw_icon_snippet_3 .content h3{
  font-size: 24px;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 10px;
}
#fw_icon_snippet_3 .content p{
  color: #b1b1b1;
  margin: 0;
}
@media (max-width: 767.9px){
  #fw_icon_snippet_3 .content{
    margin-bottom: 30px;
    padding: 20px;
  }
  #fw_icon_snippet_3 .heading{
    flex-direction: column;
  }
  #fw_icon_snippet_3 .heading h2{
    margin-bottom: 10px;
  }
}

JS

Width:

Height:

This responsive icon box snippet is built using Bootstrap, offering a sleek and modern design to showcase your business’s mission, vision, and values. The snippet is fully customizable and ideal for creating visually engaging sections on your website. With icons representing core concepts and clean typography, it enhances user experience and keeps the layout mobile-responsive. Perfect for companies looking to communicate key principles through concise and impactful content.

Make a Comment

Your email address will not be published. Required fields are marked *

Related Snippet

Responsive Coming Soon Template with Countdown | Modern Design

Responsive Coming Soon Template with Countdown | Modern Design

11-Sep-2024 Updated : 23-Sep-2024

Two Column Lightbox Image Gallery Snippet

Two Column Lightbox Image Gallery Snippet

18-Sep-2024 Updated : 18-Sep-2024

Enhance Engagement with Social Media Chatbots

Enhance Engagement with Social Media Chatbots

07-Oct-2024 Updated : 07-Oct-2024

Customizable Website Counter Script with Scroll Activation

Customizable Website Counter Script with Scroll Activation

12-Sep-2024 Updated : 12-Sep-2024

Snippets Categories