Skip to content

Instantly share code, notes, and snippets.

@nrbnayon

nrbnayon/index.html

Last active September 2, 2024 15:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nrbnayon/c59caed4038ffa28e27697b8b1c15529 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nrbnayon/c59caed4038ffa28e27697b8b1c15529 to your computer and use it in GitHub Desktop.
Download ZIP
DOM manipulation test
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/b848eab2bb.js" crossorigin="anonymous"></script>
<title>Handmade Jewelry</title>
</head>
<body>
<!-- Top Sale Alert -->
<div class="sale-alert">
<p class="sale-message">
<a href="#">30% Off Sitewide | Code: MEMORIAL30 - 20% Off Fine | Code: FINE20</a>
<a href="/sitwide">30% Off Sitewide | Code: MEMORIAL30</a>
<a href="#">20% Off Fine | Code: FINE20</a>
</p>
</div>
<!-- Navbar -->
<nav class="navbar">
<div class="nav-left">
<ul class="nav-links">
<li><a href="#">New</a></li>
<li><a href="#">Shop By</a></li>
<li><a href="#">Best Sellers</a></li>
<li><a href="#">Bridal</a></li>
<li><a href="#">Clearance</a></li>
</ul>
</div>
<div class="logo">
<div>
<h1>JAMES MICHELLE</h1>
</div>
</div>
<div class="nav-actions">
<a href="#">Search</a>
<a href="#">Account</a>
<div class="cart">
<span>Cart</span>
<a href="#">
<img src="./images/cart.png" alt="Cart">
</a>
</div>
</div>
</nav>
<!-- Mobile-navbar -->
<nav class="mobile-nav">
<div class="menu-icon"><i class="fa-solid fa-bars"></i></div>
<div class="mobile-logo">
<div>
<h1>JAMES MICHELLE</h1>
</div>
</div>
<div class="cart-icon">
<a href="#">
<img src="./images/cart.png" alt="Cart">
</a>
</div>
</nav>
<!-- Hero Section -->
<section>
<div class="hero-container">
<!-- Dynamic content goes here -->
</div>
</section>
<!-- Banner Section -->
<section class="banner-container">
<div class="banner">
<div class="banner-content">
<p class="top-text">up to</p>
<h2>30% OFF SITEWIDE</h2>
<p>30% Off Sitewide | Code: <strong class="text-underline" s>MEMORIAL30</strong></p>
<p>20% Off Fine | Code: <strong class="text-underline">FINE20</strong></p>
<a href="#" class="shop-button">SHOP THE SALE</a>
<p class="exclusions">Excludes Gift Cards, Bridal Bands, Bridal Rings, Swimwear, Jewelry Sets, Shinery
products,
Gift Boxes, and Ring Sizers.</p>
</div>
</div>
</section>
<!-- Product Section -->
<section class="product-container">
<!-- Accessibility Button -->
<button class="accessibility-button">
<i class="fa-solid fa-universal-access"></i>
</button>
<!-- Products -->
<div class="product">
<div class="product-box">
<img src="images/necklaces.png" alt="Necklace" class="product-image">
</div>
<p class="product-label">NECKLACES</p>
</div>
<div class="product">
<div class="product-box">
<img src="images/ear.png" alt="Earrings" class="product-image">
</div>
<p class="product-label">EARRINGS</p>
</div>
<div class="product">
<div class="product-box">
<img src="images/rng.png" alt="Rings" class="product-image">
</div>
<p class="product-label">RINGS</p>
</div>
<!-- Chat With Us Button -->
<button class="chat-button">
<i class="fa-regular fa-comment"></i> Chat with us
</button>
</section>
<script src="./JS/script.js"></script>
</body>
</html>
Raw
script.js
document.addEventListener("DOMContentLoaded", function () {
// Top Sale Alert section
const saleLinks = document.querySelectorAll(".sale-message a");
let currentIndex = 0;
function toggleLinks() {
saleLinks.forEach((link) => link.classList.remove("active"));
saleLinks[currentIndex].classList.add("active");
currentIndex = (currentIndex + 1) % saleLinks.length;
}
setInterval(toggleLinks, 5000);
// Create the Hero Section with
const categoryContainer = document.createElement("div");
categoryContainer.classList.add("mobile-category-container");
const categoryList = document.createElement("ul");
categoryList.classList.add("mobile-category-list");
const categories = [
{
imgSrc: "images/best-sellers.png",
alt: "Best Sellers",
text: "Best Sellers",
link: "best-sellers",
},
{ imgSrc: "images/new.png", alt: "New", text: "New", link: "new" },
{
imgSrc: "images/necklaces.png",
alt: "Necklaces",
text: "Necklaces",
link: "necklaces",
},
{ imgSrc: "images/rings.png", alt: "Rings", text: "Rings", link: "rings" },
{
imgSrc: "images/ear.png",
alt: "Earrings",
text: "Earrings",
link: "earrings",
},
{
imgSrc: "images/bracelets.png",
alt: "Bracelets",
text: "Bracelets",
link: "bracelets",
},
{
imgSrc: "images/personalized.png",
alt: "Personalized",
text: "Personalized",
link: "personalized",
},
{ imgSrc: "images/fine.png", alt: "Fine", text: "Fine", link: "fine" },
{
imgSrc: "images/clearance.png",
alt: "Clearance",
text: "Clearance",
link: "clearance",
},
];
categories.forEach((category) => {
const listItem = document.createElement("li");
listItem.classList.add("mobile-category-item");
const link = document.createElement("a");
link.href = category.link;
link.classList.add("mobile-category-link");
const image = document.createElement("img");
image.src = category.imgSrc;
image.alt = category.alt;
image.classList.add("mobile-category-image");
const span = document.createElement("span");
span.textContent = category.text;
span.classList.add("mobile-category-text");
link.appendChild(image);
link.appendChild(span);
listItem.appendChild(link);
categoryList.appendChild(listItem);
});
categoryContainer.appendChild(categoryList);
const heroSection = document.querySelector(".hero-container");
heroSection.parentNode.insertBefore(categoryContainer, heroSection);
const style = document.createElement("style");
style.textContent = `
.mobile-category-container {
width: 100%;
overflow-x: scroll;
margin: 10px 0;
padding: 10px 0;
background-color: #fff;
}
.mobile-category-list {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
padding: 0;
margin: 0;
list-style: none;
}
.mobile-category-item {
flex: 0 0 auto;
width: 86px;
text-align: center;
}
.mobile-category-link {
display: block;
text-decoration: none;
color: #000;
}
.mobile-category-image {
width: 86px;
height: 86px;
border-radius: 50%;
object-fit: cover;
background-color: #f4f4f4;
}
.mobile-category-text {
display: block;
margin-top: 8px;
font-size: 14px;
color: #464846;
}
`;
document.head.appendChild(style);
});
Raw
styles.css
@font-face {
font-family: 'GothamBook';
src: url('./font/GothamBook.woff2') format('woff2'),
url('./font/GothamBook.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'GothamBook', sans-serif;
color: #333;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.sale-alert {
background-color: #000;
color: #fff;
text-align: center;
padding: 5px 0;
font-size: 14px;
overflow: hidden;
position: relative;
}
.sale-alert a {
color: #fff;
text-decoration: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transition: opacity 0.5s linear;
}
.sale-alert a.active {
opacity: 1;
position: relative;
}
/* Navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background-color: #fff;
position: relative;
}
.nav-left {
display: flex;
align-items: center;
gap: 30px;
width: 40%;
}
.mobile-nav {
display: none;
}
.nav-links {
display: flex;
gap: 25px;
list-style: none;
margin: 0;
/* width: 100%; */
}
.nav-links a {
text-decoration: none;
color: #181a18;
font-size: 13px;
font-weight: normal;
padding-bottom: 5px;
position: relative;
}
.nav-links a:hover::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #000;
left: 0;
bottom: 0;
}
.logo {
display: flex;
justify-content: start;
align-items: center;
width: 30%;
}
.logo h1 {
font-size: 20px;
color: #181a18;
font-weight: normal;
letter-spacing: 8px;
margin-left: 20px;
cursor: pointer;
}
.nav-actions {
display: flex;
gap: 20px;
justify-content: end;
align-items: center;
width: 30%;
}
.nav-actions a {
text-decoration: none;
color: #181a18;
font-size: 13px;
font-weight: normal;
position: relative;
}
.cart {
display: flex;
align-items: center;
gap: 5px;
color: #181a18;
font-size: 13px;
font-weight: normal;
}
.cart img {
width: 20px;
height: auto;
}
/* Banner section */
.banner-container {
width: 100%;
height: 600px;
margin: 30px auto;
padding: 10px 20px;
}
.banner {
position: relative;
height: 100%;
background: url('images/hero3.jpeg') center center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
padding-right: 50px;
padding-left: 50px;
box-sizing: border-box;
color: white;
}
.banner-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 450px;
text-align: center;
margin-right: 10%;
margin-left: auto;
}
.banner-content .top-text {
font-size: 16px;
align-self: flex-start;
width: 100%;
text-align: left;
margin-left: 18%;
margin-bottom: -12px;
}
.banner h2 {
font-size: 60px;
font-weight: normal;
letter-spacing: 3px;
margin-bottom: 20px;
margin-top: 0;
padding: 0;
}
.banner p {
font-size: 18px;
margin-bottom: 10px;
}
.banner .shop-button {
display: inline-block;
margin-top: 20px;
padding: 10px 40px;
background-color: white;
color: black;
text-decoration: none;
font-weight: bold;
font-size: 16px;
border-radius: 5px;
}
.text-underline {
text-decoration-line: underline;
text-underline-offset: 2px;
}
.banner .exclusions {
width: 80%;
margin: auto;
margin-top: 10px;
font-size: 12px;
color: #ebe4e4;
}
/* Accessibility Button */
.accessibility-button {
position: fixed;
bottom: 20px;
left: 20px;
background-color: #fff;
border: none;
cursor: pointer;
padding: 10px;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.accessibility-button i {
font-size: 24px;
color: #000;
}
/* Chat Button */
.chat-button {
position: fixed;
bottom: 20px;
right: 20px;
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Product Section */
.product-container {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 20px;
padding: 50px 20px;
background-color: #fff;
}
.product {
width: 300px;
height: 350px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
text-align: center;
background-color: #fff;
}
.product-box {
width: 300px;
height: 300px;
background-color: #f4f4f4;
display: flex;
align-items: center;
justify-content: center;
}
.product-image {
width: 100%;
height: 100%;
max-height: 300px;
}
.product-label {
font-size: 14px;
font-weight: bold;
color: #333;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Media Queries for Mobile */
@media screen and (max-width: 768px) {
.sale-alert {
width: 100%;
height: 50px;
padding: 5px 10px;
}
.sale-alert a {
top: 8px;
}
/* Navbar */
.navbar {
display: none;
}
.mobile-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
width: 100%;
height: 80px;
cursor: pointer;
}
.mobile-nav h1 {
font-size: 20px;
color: #181a18;
font-weight: normal;
letter-spacing: 5px;
}
.mobile-nav img {
width: 20px;
height: auto;
}
/* Banner Section */
.banner-container {
width: 100%;
padding: 0;
height: auto;
}
.banner-content {
padding: 0;
margin: 30% auto 5% auto;
width: 100%;
text-align: center;
color: black;
}
.banner {
background: url('images/paper.jpg') center center/cover no-repeat;
padding: 10% auto;
margin: 0;
}
.banner-container h2 {
font-size: 40px;
letter-spacing: 4px;
}
.banner .shop-button {
background-color: black;
color: white;
}
.banner-content p {
font-size: 14px;
margin: 0;
}
.banner-content .top-text {
font-size: 16px;
align-self: flex-start;
margin-left: 14%;
margin-bottom: -10px;
}
.banner .exclusions {
font-size: 16px;
margin-top: 20px;
width: 100%;
color: black;
}
/* Product Section */
.product-container {
flex-direction: row;
justify-content: space-evenly;
align-items: center;
padding: 10px;
margin: 70px auto;
}
.product {
width: 116px;
height: 200px;
}
.product-box {
width: 100%;
height: 200px;
gap: 20px;
margin-bottom: 20px;
}
.product-label {
font-size: 12px;
}
/* Chat Button */
.chat-button {
bottom: 10px;
right: 10px;
padding: 10px;
border-radius: 15px;
font-size: 12px;
}
/* Accessibility Button */
.accessibility-button {
bottom: 10px;
left: 10px;
padding: 8px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment