htmlbeginnermit
Hero with Social Proof
A hero with an avatar stack and rating line.
3.5k1.2k1.3k584
About this module
A centered hero with a row of overlapping avatars, a 5-star rating and 'trusted by' copy — classic social proof.
#hero#social proof#avatars
Source code
Installation
- 1
Create the files
Create `index.html` and `style.css` in the same folder.
- 2
Paste the code
Copy each file's source into its matching file.
- 3
Open in the browser
Open `index.html` in any modern browser.
Usage
- 1
Copy the HTML
Paste the section markup where you need it.
<link rel="stylesheet" href="style.css" /> <section class="mh-sec mh-proof-hero"> <div class="mh-container mh-center"> <span class="mh-eyebrow">Trusted by 2,000+ teams</span> <h1 class="mh-h1">Build websites people remember</h1> <p class="mh-sub">Copy production-ready modules and launch in hours, not weeks.</p> <div class="mh-proof"> <div class="mh-stack"><i>A</i><i>B</i><i>C</i><i>D</i><i>+1k</i></div> <div class="mh-rate">★★★★★ <span>4.9 average rating</span></div> </div> <a href="#" class="mh-btn">Start building free</a> </div> </section>