Build Responsive Social Media Widget Using HTML and CSS

Social media widgets integration with the website plays a unique role in the marketing ecosystem, be it about increasing reach, engaging users, or event conversions.

First I using latest version of Bootstrap Framework And FontAwesome Icon

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>

HTML Code:

<ul class="mx-0 list-unstyled social-three text-center row">
  <!--twitter-->
  <li class="col-lg-2 py-3 border bg-twitter-lt">
    <a class="d-block text-twitter" rel="noopener noreferrer" href="#" target="_blank">
      <i class="fab fa-twitter fa-2x"></i>
      <span class="d-block fw-bold">5,867</span>
      <small class="d-block">Follower</small>
    </a>
  </li>
  <!--facebook-->
  <li class="col-lg-2 py-3 border bg-facebook-lt">
    <a class="d-block text-facebook" rel="noopener noreferrer" href="#" target="_blank">
      <i class="fab fa-facebook-f fa-2x"></i>
      <span class="d-block fw-bold">5,867</span>
      <small class="d-block">Fans</small>
    </a>
  </li>
  <!--linkedin-->
  <li class="col-lg-2 py-3 border bg-linkedin-lt">
    <a class="d-block text-linkedin" rel="noopener noreferrer" href="#" target="_blank">
      <i class="fab fa-linkedin fa-2x"></i>
      <span class="d-block fw-bold">1,186</span>
      <small class="d-block">Followers</small>
    </a>
  </li>
  <!--youtube-->
  <li class="col-lg-2 py-3 border bg-youtube-lt">
    <a class="d-block text-youtube" rel="noopener noreferrer" href="#" target="_blank">
      <i class="fab fa-youtube fa-2x"></i>
      <span class="d-block fw-bold">2,419</span>
      <small class="d-block">Subscribers</small>
    </a>
  </li>
  <!--vimeo-->
  <li class="col-lg-2 py-3 border bg-vimeo-lt">
    <a class="d-block text-vimeo" rel="noopener noreferrer" href="#" target="_blank">
      <i class="fab fa-vimeo-v fa-2x"></i>
      <span class="d-block fw-bold">1,215</span>
      <small class="d-block">Subscribers</small>
    </a>
  </li>
  <!--instagram-->
  <li class="col-lg-2 py-3 border bg-instagram-lt">
    <a class="d-block text-instagram" rel="noopener noreferrer" href="#" target="_blank">
      <i class="fab fa-instagram fa-2x"></i>
      <span class="d-block fw-bold">4,856</span>
      <small class="d-block">Followers</small>
    </a>
  </li>
  <!--end instagram-->
  <!--dribbble-->
  <li class="col-lg-2 py-3 border bg-dribbble-lt">
    <a class="d-block text-dribbble" rel="noopener noreferrer" href="#" target="_blank">
      <i class="fab fa-dribbble fa-2x"></i>
      <span class="d-block fw-bold">4,856</span>
      <small class="d-block">Followers</small>
    </a>
  </li>
  <!--end dribbble-->
  <!--github-->
  <li class="col-lg-2 py-3 border bg-github-lt">
    <a class="d-block text-github" rel="noopener noreferrer" href="#" target="_blank">
      <i class="fab fa-github fa-2x"></i>
      <span class="d-block fw-bold">4,856</span>
      <small class="d-block">Followers</small>
    </a>
  </li>
  <!--end github-->
  <!--pinterest-->
  <li class="col-lg-2 py-3 border bg-pinterest-lt">
    <a class="d-block text-pinterest" rel="noopener noreferrer" href="#" target="_blank">
      <i class="fab fa-pinterest fa-2x"></i>
      <span class="d-block fw-bold">4,856</span>
      <small class="d-block">Followers</small>
    </a>
  </li>
  <!--end pinterest-->
  <!--vk-->
  <li class="col-lg-2 py-3 border bg-vk-lt">
    <a class="d-block text-vk" rel="noopener noreferrer" href="#" target="_blank">
      <i class="fab fa-vk fa-2x"></i>
      <span class="d-block fw-bold">4,856</span>
      <small class="d-block">Followers</small>
    </a>
  </li>
  <!--end vk-->
  
  <!--flickr-->
  <li class="col-lg-2 py-3 border bg-flickr-lt">
    <a class="d-block text-flickr" rel="noopener noreferrer" href="#" target="_blank">
      <i class="fab fa-flickr fa-2x"></i>
      <span class="d-block fw-bold">4,856</span>
      <small class="d-block">Followers</small>
    </a>
  </li>
  <!--end flickr-->
  <!--rss-->
  <li class="col-lg-2 py-3 border bg-rss-lt">
    <a class="d-block text-rss" rel="noopener noreferrer" href="#" target="_blank">
      <i class="fas fa-rss fa-2x"></i>
      <span class="d-block fw-bold">4,856</span>
      <small class="d-block">Followers</small>
    </a>
  </li>
  <!--end rss-->
</ul>

CSS Code:

a{
  text-decoration: none !important;
}
.bg-facebook {
  color: #ffffff !important;
  background: #3b5998 !important;
}

.text-facebook {
  color: #3b5998 !important;
}

.bg-facebook-lt {
  color: #3b5998 !important;
  background: rgba(59, 89, 152, 0.05) !important;
}

.bg-twitter {
  color: #ffffff !important;
  background: #1da1f2 !important;
}

.text-twitter {
  color: #1da1f2 !important;
}

.bg-twitter-lt {
  color: #1da1f2 !important;
  background: rgba(29, 161, 242, 0.05) !important;
}

.bg-linkedin {
  color: #ffffff !important;
  background: #0a66c2 !important;
}

.text-linkedin {
  color: #0a66c2 !important;
}

.bg-linkedin-lt {
  color: #0a66c2 !important;
  background: rgba(10, 102, 194, 0.05) !important;
}

.bg-google {
  color: #ffffff !important;
  background: #dc4e41 !important;
}

.text-google {
  color: #dc4e41 !important;
}

.bg-google-lt {
  color: #dc4e41 !important;
  background: rgba(220, 78, 65, 0.05) !important;
}

.bg-youtube {
  color: #ffffff !important;
  background: #ff0000 !important;
}

.text-youtube {
  color: #ff0000 !important;
}

.bg-youtube-lt {
  color: #ff0000 !important;
  background: rgba(255, 0, 0, 0.05) !important;
}

.bg-vimeo {
  color: #ffffff !important;
  background: #1ab7ea !important;
}

.text-vimeo {
  color: #1ab7ea !important;
}

.bg-vimeo-lt {
  color: #1ab7ea !important;
  background: rgba(26, 183, 234, 0.05) !important;
}

.bg-dribbble {
  color: #ffffff !important;
  background: #ea4c89 !important;
}

.text-dribbble {
  color: #ea4c89 !important;
}

.bg-dribbble-lt {
  color: #ea4c89 !important;
  background: rgba(234, 76, 137, 0.05) !important;
}

.bg-github {
  color: #ffffff !important;
  background: #181717 !important;
}

.text-github {
  color: #181717 !important;
}

.bg-github-lt {
  color: #181717 !important;
  background: rgba(24, 23, 23, 0.05) !important;
}

.bg-instagram {
  color: #ffffff !important;
  background: #e4405f !important;
}

.text-instagram {
  color: #e4405f !important;
}

.bg-instagram-lt {
  color: #e4405f !important;
  background: rgba(228, 64, 95, 0.05) !important;
}

.bg-pinterest {
  color: #ffffff !important;
  background: #bd081c !important;
}

.text-pinterest {
  color: #bd081c !important;
}

.bg-pinterest-lt {
  color: #bd081c !important;
  background: rgba(189, 8, 28, 0.05) !important;
}

.bg-vk {
  color: #ffffff !important;
  background: #6383a8 !important;
}

.text-vk {
  color: #6383a8 !important;
}

.bg-vk-lt {
  color: #6383a8 !important;
  background: rgba(99, 131, 168, 0.05) !important;
}

.bg-rss {
  color: #ffffff !important;
  background: #ffa500 !important;
}

.text-rss {
  color: #ffa500 !important;
}

.bg-rss-lt {
  color: #ffa500 !important;
  background: rgba(255, 165, 0, 0.05) !important;
}

.bg-flickr {
  color: #ffffff !important;
  background: #0063dc !important;
}

.text-flickr {
  color: #0063dc !important;
}

.bg-flickr-lt {
  color: #0063dc !important;
  background: rgba(0, 99, 220, 0.05) !important;
}
RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply