Reviews example with pure CSS

Utilities Bootstrap 5Free+ CSS

Reviews example with pure CSS: a hand-crafted, open-source Bootstrap 5 utility. HTML & CSS included, ready to copy.

3.2k views41 downloads5 years ago

gosnippets.com/preview/reviews-example-with-pure-css

Source Code

1<div class="review-container">
2  <h2>Reviews</h2>
3  <label for="search" class="input-field">
4    <i class="fas fa-search"></i>
5    <input id="search" placeholder="Search for reviews ..." type="text">
6  </label>
7  <div class="suggest">
8    <span>expriance</span>
9    <span>quality</span>
10    <span>design</span>
11    <span>size</span>
12    <span>features</span>
13    <span>values</span>
14    <span>replacement</span>
15  </div>
16  
17  <div class="cards">
18    <div class="card">
19      <div class="card-top">
20        <div class="name">
21          <div class="img one" alt="">NF</div>
22           <p>Full Name</p>
23        </div>
24        <div class="rate">
25          <i class="fas fa-star"></i>
26          <i class="fas fa-star"></i>
27          <i class="fas fa-star"></i>
28          <i class="fas fa-star"></i>
29          <i class="fas fa-star-half"></i>
30        </div>
31      </div>
32      
33      <div class="card-content">
34        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem consequuntur, impedit ullam provident deserunt repellendus fuga totam exercitationem minima molestias?</p>
35      </div>
36      
37      <div class="card-action">
38        <span>13 Feb, 2021</span>
39        <button class="btn">
40          <i class="fas fa-external-link-alt"></i>
41          Share
42        </button>
43      </div>
44      
45    </div>
46     <div class="card">
47      <div class="card-top">
48        <div class="name">
49          <div class="img">FN</div>
50           <p>Full Name</p>
51        </div>
52        <div class="rate">
53          <i class="fas fa-star"></i>
54          <i class="fas fa-star"></i>
55          <i class="fas fa-star"></i>
56          <i class="fas fa-star"></i>
57          <i class="fas fa-star-half"></i>
58        </div>
59      </div>
60      
61      <div class="card-content">
62        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem consequuntur, impedit ullam provident deserunt repellendus fuga totam exercitationem minima molestias?</p>
63      </div>
64      
65      <div class="card-action">
66        <span>13 Feb, 2021</span>
67        <button class="btn">
68          <i class="fas fa-external-link-alt"></i>
69          Share
70        </button>
71      </div>
72      
73    </div>
74  </div>
75</div>
76

More Utilities snippets

Auto move mouse cursor snippet

Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.

UtilitiesView →

Bootstrap 5 Ecommerce Product Detail Page Design snippet

Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

UtilitiesView →

Bootstrap 5 Ecommerce single product page design template

Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

UtilitiesView →

Comments(0)

No comments yet — be the first to start the discussion.

1<div class="review-container"> 2 <h2>Reviews</h2> 3 <label for="search" class="input-field"> 4 <i class="fas fa-search"></i> 5 <input id="search" placeholder="Search for reviews ..." type="text"> 6 </label> 7 <div class="suggest"> 8 <span>expriance</span> 9 <span>quality</span> 10 <span>design</span> 11 <span>size</span> 12 <span>features</span> 13 <span>values</span> 14 <span>replacement</span> 15 </div> 16 17 <div class="cards"> 18 <div class="card"> 19 <div class="card-top"> 20 <div class="name"> 21 <div class="img one" alt="">NF</div> 22 <p>Full Name</p> 23 </div> 24 <div class="rate"> 25 <i class="fas fa-star"></i> 26 <i class="fas fa-star"></i> 27 <i class="fas fa-star"></i> 28 <i class="fas fa-star"></i> 29 <i class="fas fa-star-half"></i> 30 </div> 31 </div> 32 33 <div class="card-content"> 34 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem consequuntur, impedit ullam provident deserunt repellendus fuga totam exercitationem minima molestias?</p> 35 </div> 36 37 <div class="card-action"> 38 <span>13 Feb, 2021</span> 39 <button class="btn"> 40 <i class="fas fa-external-link-alt"></i> 41 Share 42 </button> 43 </div> 44 45 </div> 46 <div class="card"> 47 <div class="card-top"> 48 <div class="name"> 49 <div class="img">FN</div> 50 <p>Full Name</p> 51 </div> 52 <div class="rate"> 53 <i class="fas fa-star"></i> 54 <i class="fas fa-star"></i> 55 <i class="fas fa-star"></i> 56 <i class="fas fa-star"></i> 57 <i class="fas fa-star-half"></i> 58 </div> 59 </div> 60 61 <div class="card-content"> 62 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem consequuntur, impedit ullam provident deserunt repellendus fuga totam exercitationem minima molestias?</p> 63 </div> 64 65 <div class="card-action"> 66 <span>13 Feb, 2021</span> 67 <button class="btn"> 68 <i class="fas fa-external-link-alt"></i> 69 Share 70 </button> 71 </div> 72 73 </div> 74 </div> 75</div> 76