Built without a framework — no React, no Tailwind, no build step. Pure HTML, CSS, and vanilla JS, proving the fundamentals are solid underneath every abstraction in the rest of my work.
Hero with seasonal collection, cursor-follow image previews on category hover, product grids with hover name/price overlays, and a sticky nav with animated dropdowns.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://kit.fontawesome.com/20dffc9a4f.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="nav.css"> <script src="nav.js" defer></script> <script src="app.js" defer></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&family=Oranienbaum&display=swap" rel="stylesheet"> <title>Betjeman & Barton</title> </head> <script> class SiteNav extends HTMLElement { async connectedCallback() { const html = await (await fetch('nav.html')).text(); this.innerHTML = html; } } customElements.define('site-nav', SiteNav); </script> <!-- Nav --> <site-nav></site-nav> <body> <div class="hero"> <div class="cta"> <div class="cta_container"> <a href="item_page.html">Discover</a> </div> <div class="hero_subtitle">A World of Sweetness</div> </div> </div> <div class="highlight_product"> <div class="highlight_nav"> <span class="category">Autumn Selection</span> <a href="item_page.html">See all<i class="fa-solid fa-arrow-right"></i></a> </div> <div class="img_container" id="autum_selection_img"> <a href="#" data-name="Autumn Blend" data-price="$12"><img src="img/2455.webp"></a> <a href="#" data-name="Spiced Chai" data-price="$15"><img src="img/2470.webp"></a> <a href="#" data-name="Pumpkin Tea" data-price="$18"><img src="img/2634.webp"></a> <a href="#" data-name="Maple Delight" data-price="$20"><img src="img/3811.webp"></a> </div> </div> <div class="listing_container"> <div class="listing_item" data-image="img/cursor/flavored.webp" data-href="/item_page.html"> <span>Our Flavored Tea</span> </div> <div class="listing_item" data-image="img/cursor/Sous-Categorie_Boites_125g_12036_R_S.webp" data-href="/item_page.html"> <span>Grands Crus & Rare Teas</span> </div> <div class="listing_item" data-image="img/cursor/2871.webp" data-href="/item_page.html"> <span>The Iconic Ones</span> </div> <div class="listing_item" data-image="img/cursor/christmas.webp" data-href="/item_page.html"> <span>The Art of Tea</span> </div> </div> <div class="story_container"> <div class="story"> <div class="title">A house of excellence since 1919</div> <div class="description">For over a century, Betjeman & Barton has been selecting and blending exceptional teas, combining tradition and creativity.</div> <a href="/item_page.html">Discover</a> </div> <img src="img/3_ef0652e2-c2c6-429e-ae7e-8aa2d526aa43.webp"> </div> <div class="best_seller_container"> <div class="best_seller"> <span>Best Seller</span> <a href="/item_page.html">Discover <i class="fa-solid fa-arrow-right"></i></a> </div> <div class="best_seller_items"> <a href="#"><img src="img/1751.webp"></a> <a href="#"><img src="img/2835.webp"></a> <a href="#"><img src="img/1661.webp"></a> <a href="#"><img src="img/SD-boite_de_Noel_2025_-_ouverte.webp"></a> <a href="#"><img src="img/1677.webp"></a> <a href="#"><img src="img/1693.webp"></a> </div> </div> <div class="news_letter"> <span>Newsletter</span> <p>Sign up and find all our new products, selections and exceptional invitations</p> <input type="text" id="email" placeholder="Drop your email here"> <input class="submit" type="submit" value="Sign up for Newsletter"> </div> </body> </html>