Friday, March, 27, 2026

Today This Free Friday I am working on a website project

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>VogueLine – Fashion Redefined</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <!-- NAVIGATION -->
  <nav class="navbar">
    <div class="logo">VogueLine</div>
    <ul class="nav-links">
      <li><a href="#home">Home</a></li>
      <li><a href="#collection">Collection</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </nav>

  <!-- HERO SECTION -->
  <header class="hero" id="home">
    <div class="hero-content">
      <h1>Elevate Your Style</h1>
      <p>Discover the latest trends crafted for bold, modern fashion lovers.</p>
      <button id="shopBtn">Shop Now</button>
    </div>
  </header>

  <!-- COLLECTION -->
  <section class="collection" id="collection">
    <h2>New Collection</h2>
    <div class="grid">
      <div class="item">
        <img src="https://via.placeholder.com/300x400" alt="Outfit 1">
        <h3>Urban Jacket</h3>
        <p>$89</p>
      </div>
      <div class="item">
        <img src="https://via.placeholder.com/300x400" alt="Outfit 2">
        <h3>Classic Denim</h3>
        <p>$69</p>
      </div>
      <div class="item">
        <img src="https://via.placeholder.com/300x400" alt="Outfit 3">
        <h3>Streetwear Hoodie</h3>
        <p>$59</p>
      </div>
    </div>
  </section>

  <!-- ABOUT -->
  <section class="about" id="about">
    <h2>About Us</h2>
    <p>
      VogueLine blends modern aesthetics with timeless craftsmanship.  
      Our mission is to empower confidence through fashion.
    </p>
  </section>

  <!-- FOOTER -->
  <footer>
    <p>© <span id="year"></span> VogueLine. All Rights Reserved.</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>

This part of the is the Html of the website

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  background: #f7f7f7;
  color: #222;
}

/* NAVBAR */
.navbar {
  display: flex;
  justify-content: space-between;
  padding: 1.2rem 2rem;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid #eee;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

.nav-links a:hover {
  color: #000;
}

/* HERO */
.hero {
  height: 90vh;
  background: url("https://images.unsplash.com/photo-1521335629791-ce4aec67dd47?auto=format&fit=crop&w=1200&q=80")
    center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.hero-content button {
  padding: 0.8rem 2rem;
  background: #000;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  transition: 0.3s;
}

.hero-content button:hover {
  background: #444;
}

/* COLLECTION */
.collection {
  padding: 3rem 2rem;
  text-align: center;
}

.collection h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.item img {
  width: 100%;
  border-radius: 10px;
}

.item h3 {
  margin-top: 0.8rem;
  font-size: 1.2rem;
}

.item p {
  color: #666;
}

/* ABOUT */
.about {
  padding: 3rem 2rem;
  text-align: center;
  background: #fff;
}

.about h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.about p {
  max-width: 600px;
  margin: auto;
  color: #555;
}

/* FOOTER */
footer {
  text-align: center;
  padding: 1.5rem;
  background: #111;
  color: #fff;
  margin-top: 2rem;
}

This part of the is the Styles.css of the wesite

// Scroll to collection on button click
document.getElementById("shopBtn").addEventListener("click", () => {
  document.getElementById("collection").scrollIntoView({ behavior: "smooth" });
});

// Dynamic year
document.getElementById("year").textContent = new Date().getFullYear();

This part of the is the JS of the website

Leave a Comment Cancel Reply