Yves-saints/DIVINE ORDER ®

## DIVINE ORDER ®
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>DIVINE ORDER</title>
  <link rel="stylesheet" href="style.css" />
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto&display=swap" rel="stylesheet" />
</head>
<body>
  <header>
    <div class="container">
      <div class="logo">DIVINE ORDER</div>
      <nav>
        <a href="#">Home</a>
        <a href="#">Shop</a>
        <a href="#">Lookbook</a>
        <a href="#">About</a>
        <a href="#">Cart</a>
      </nav>
    </div>
  </header>

  <section class="hero">
    <div class="container">
      <h1>AW25 DROP — OUT NOW</h1>
      <a href="#" class="btn">Shop Collection</a>
    </div>
  </section>

  <section class="featured-products container">
    <h2>Featured Products</h2>
    <div class="products-grid">
      <div class="product-card">
        <img src="https://via.placeholder.com/300x400?text=Product+1" alt="Product 1" />
        <h3>Oversized Hoodie</h3>
        <p>$120</p>
      </div>
      <div class="product-card">
        <img src="https://via.placeholder.com/300x400?text=Product+2" alt="Product 2" />
        <h3>Distressed Jeans</h3>
        <p>$150</p>
      </div>
      <div class="product-card">
        <img src="https://via.placeholder.com/300x400?text=Product+3" alt="Product 3" />
        <h3>Signature Tee</h3>
        <p>$60</p>
      </div>
    </div>
  </section>

  <section class="about container">
    <h2>Defined by Discipline. Elevated by Style.</h2>
    <p>
      DIVINE ORDER is a streetwear collective focused on timeless, elevated basics with a modern edge.
      Rooted in minimalism and crafted with care, our pieces empower you to move with confidence and purpose.
    </p>
    <a href="#" class="btn-outline">Read About the Brand</a>
  </section>

  <section class="instagram-grid container">
    <h2>Follow Us</h2>
    <div class="insta-grid">
      <img src="https://via.placeholder.com/150?text=IG+1" alt="Instagram 1" />
      <img src="https://via.placeholder.com/150?text=IG+2" alt="Instagram 2" />
      <img src="https://via.placeholder.com/150?text=IG+3" alt="Instagram 3" />
      <img src="https://via.placeholder.com/150?text=IG+4" alt="Instagram 4" />
      <img src="https://via.placeholder.com/150?text=IG+5" alt="Instagram 5" />
      <img src="https://via.placeholder.com/150?text=IG+6" alt="Instagram 6" />
    </div>
  </section>

  <footer>
    <div class="container">
      <p>© 2025 DIVINE ORDER</p>
      <nav>
        <a href="#">Terms</a>
        <a href="#">Privacy</a>
        <a href="#">Instagram</a>
        <a href="#">Contact</a>
      </nav>
    </div>
  </footer>
</body>
</html>

## gistfile1.txt
/* Fonts */
body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  background: #fff;
  color: #111;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  margin: 0 0 1rem 0;
}

.container {
  width: 90%;
  max-width: 1100px;
  margin: auto;
}

header {
  border-bottom: 1px solid #eee;
  padding: 1rem 0;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 2px;
}

nav {
  display: flex;
  gap: 1.5rem;
}

nav a {
  text-decoration: none;
  color: #111;
  font-weight: 500;
  transition: color 0.3s ease;
}

nav a:hover {
  color: #555;
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero {
  background: #f5f5f5 url('https://images.unsplash.com/photo-1521335629791-ce4aec67ddbc?auto=format&fit=crop&w=1400&q=80') no-repeat center center/cover;
  color: #111;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  padding: 0 1rem;
}

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

.btn {
  background: #111;
  color: #fff;
  padding: 0.8rem 2rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.3s ease;
}

.btn:hover {
  background: #444;
}

.featured-products {
  padding: 3rem 0;
}

.products-grid {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  flex-wrap: wrap;
}

.product-card {
  flex: 1 1 30%;
  max-width: 300px;
  text-align: center;
}

.product-card img {
  width: 100%;
  border-radius: 4px;
}

.about {
  padding: 3rem 0;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.btn-outline {
  border: 2px solid #111;
  padding: 0.6rem 1.8rem;
  font-weight: 700;
  text-decoration: none;
  color: #111;
  border-radius: 2px;
  transition: background 0.3s ease, color 0.3s ease;
  display: inline-block;
  margin-top: 1rem;
}

.btn-outline:hover {
  background: #111;
  color: #fff;
}

.instagram-grid {
  padding: 3rem 0;
}

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

.insta-grid img {
  width: 100%;
  border-radius: 4px;
}

footer {
  border-top: 1px solid #eee;
  padding: 1rem 0;
  background: #fff;
}

footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

footer nav a {
  margin-left: 1rem;
  color: #555;
  font-weight: 400;
  text-decoration: none;
  font-size: 0.9rem;
}

footer nav a:hover {
  color: #111;
}

@media(max-width: 768px) {
  .products-grid {
    flex-direction: column;
    align-items: center;
  }
  nav {
    gap: 1rem;
  }
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>DIVINE ORDER</title>
	<link rel="stylesheet" href="style.css" />
	<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto&display=swap" rel="stylesheet" />
	</head>
	<body>
	<header>
	<div class="container">
	<div class="logo">DIVINE ORDER</div>
	<nav>
	<a href="#">Home</a>
	<a href="#">Shop</a>
	<a href="#">Lookbook</a>
	<a href="#">About</a>
	<a href="#">Cart</a>
	</nav>
	</div>
	</header>

	<section class="hero">
	<div class="container">
	<h1>AW25 DROP — OUT NOW</h1>
	<a href="#" class="btn">Shop Collection</a>
	</div>
	</section>

	<section class="featured-products container">
	<h2>Featured Products</h2>
	<div class="products-grid">
	<div class="product-card">
	<img src="https://via.placeholder.com/300x400?text=Product+1" alt="Product 1" />
	<h3>Oversized Hoodie</h3>
	<p>$120</p>
	</div>
	<div class="product-card">
	<img src="https://via.placeholder.com/300x400?text=Product+2" alt="Product 2" />
	<h3>Distressed Jeans</h3>
	<p>$150</p>
	</div>
	<div class="product-card">
	<img src="https://via.placeholder.com/300x400?text=Product+3" alt="Product 3" />
	<h3>Signature Tee</h3>
	<p>$60</p>
	</div>
	</div>
	</section>

	<section class="about container">
	<h2>Defined by Discipline. Elevated by Style.</h2>
	<p>
	DIVINE ORDER is a streetwear collective focused on timeless, elevated basics with a modern edge.
	Rooted in minimalism and crafted with care, our pieces empower you to move with confidence and purpose.
	</p>
	<a href="#" class="btn-outline">Read About the Brand</a>
	</section>

	<section class="instagram-grid container">
	<h2>Follow Us</h2>
	<div class="insta-grid">
	<img src="https://via.placeholder.com/150?text=IG+1" alt="Instagram 1" />
	<img src="https://via.placeholder.com/150?text=IG+2" alt="Instagram 2" />
	<img src="https://via.placeholder.com/150?text=IG+3" alt="Instagram 3" />
	<img src="https://via.placeholder.com/150?text=IG+4" alt="Instagram 4" />
	<img src="https://via.placeholder.com/150?text=IG+5" alt="Instagram 5" />
	<img src="https://via.placeholder.com/150?text=IG+6" alt="Instagram 6" />
	</div>
	</section>

	<footer>
	<div class="container">
	<p>© 2025 DIVINE ORDER</p>
	<nav>
	<a href="#">Terms</a>
	<a href="#">Privacy</a>
	<a href="#">Instagram</a>
	<a href="#">Contact</a>
	</nav>
	</div>
	</footer>
	</body>
	</html>
	/* Fonts */
	body {
	font-family: 'Roboto', sans-serif;
	margin: 0;
	background: #fff;
	color: #111;
	line-height: 1.6;
	}

	h1, h2, h3 {
	font-family: 'Playfair Display', serif;
	margin: 0 0 1rem 0;
	}

	.container {
	width: 90%;
	max-width: 1100px;
	margin: auto;
	}

	header {
	border-bottom: 1px solid #eee;
	padding: 1rem 0;
	background: #fff;
	position: sticky;
	top: 0;
	z-index: 100;
	}

	.logo {
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: 2px;
	}

	nav {
	display: flex;
	gap: 1.5rem;
	}

	nav a {
	text-decoration: none;
	color: #111;
	font-weight: 500;
	transition: color 0.3s ease;
	}

	nav a:hover {
	color: #555;
	}

	header .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	.hero {
	background: #f5f5f5 url('https://images.unsplash.com/photo-1521335629791-ce4aec67ddbc?auto=format&fit=crop&w=1400&q=80') no-repeat center center/cover;
	color: #111;
	height: 70vh;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-direction: column;
	padding: 0 1rem;
	}

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

	.btn {
	background: #111;
	color: #fff;
	padding: 0.8rem 2rem;
	font-weight: 700;
	text-decoration: none;
	border-radius: 2px;
	transition: background 0.3s ease;
	}

	.btn:hover {
	background: #444;
	}

	.featured-products {
	padding: 3rem 0;
	}

	.products-grid {
	display: flex;
	gap: 2rem;
	justify-content: space-between;
	flex-wrap: wrap;
	}

	.product-card {
	flex: 1 1 30%;
	max-width: 300px;
	text-align: center;
	}

	.product-card img {
	width: 100%;
	border-radius: 4px;
	}

	.about {
	padding: 3rem 0;
	text-align: center;
	max-width: 700px;
	margin: 0 auto;
	}

	.btn-outline {
	border: 2px solid #111;
	padding: 0.6rem 1.8rem;
	font-weight: 700;
	text-decoration: none;
	color: #111;
	border-radius: 2px;
	transition: background 0.3s ease, color 0.3s ease;
	display: inline-block;
	margin-top: 1rem;
	}

	.btn-outline:hover {
	background: #111;
	color: #fff;
	}

	.instagram-grid {
	padding: 3rem 0;
	}

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

	.insta-grid img {
	width: 100%;
	border-radius: 4px;
	}

	footer {
	border-top: 1px solid #eee;
	padding: 1rem 0;
	background: #fff;
	}

	footer .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	}

	footer nav a {
	margin-left: 1rem;
	color: #555;
	font-weight: 400;
	text-decoration: none;
	font-size: 0.9rem;
	}

	footer nav a:hover {
	color: #111;
	}

	@media(max-width: 768px) {
	.products-grid {
	flex-direction: column;
	align-items: center;
	}
	nav {
	gap: 1rem;
	}
	}