Viral Facebook

1<style>
2  .pill-container {
3    padding: 8px 12px;
4    background-color: #1877F2; /* Set background color to #1877F2 */
5    border-radius: 20px; /* Adjust as needed to give the pill shape */
6    display: inline-block; /* Ensure it wraps content properly */
7    position: relative; /* Add position relative for centering */
8  }
9
10  .pill-container img {
11    vertical-align: middle; /* Align the image vertically */
12  }
13
14  .pill-container span {
15    margin-left: 8px; /* Adjust as needed to give space between image and text */
16    color: #ffffff; /* Set text color to white */
17  }
18
19  /* Center the pill horizontally */
20  .center {
21    display: flex;
22    justify-content: center;
23    align-items: center;
24  }
25
26  /* Gradient border */
27  .pill-border {
28    position: absolute;
29    top: -4px;
30    left: -4px;
31    right: -4px;
32    bottom: -4px;
33    border-radius: 24px; /* Match the border radius of the pill */
34    background: linear-gradient(135deg, #26F0FF, #E82356);
35    z-index: -1;
36  }
37</style>
38
39<div class="center">
40  <div class="pill-container">
41    <div class="pill-border"></div>
42    <img src="https://cdn.shopify.com/s/files/1/0812/1414/4845/files/facebook.png?v=1709554524" alt="Facebook Logo">
43    <span>Over 4M Views on Facebook</span>
44  </div>
45</div>