Scribd
Upload
3 views8 pages

Document

The document is an HTML template for a website called RE-PLAY, which focuses on selling recycled sports materials. It features a navigation bar, a hero section promoting sustainable materials, and a product grid showcasing current raw ware for sale. The footer includes copyright information and a tagline about circular economy in sports.

Uploaded by

shamuldoodh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views8 pages

Document

The document is an HTML template for a website called RE-PLAY, which focuses on selling recycled sports materials. It features a navigation bar, a hero section promoting sustainable materials, and a product grid showcasing current raw ware for sale. The footer includes copyright information and a tagline about circular economy in sports.

Uploaded by

shamuldoodh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-


scale=1.0">

<title>RE-PLAY | Sports Waste & Recycled Gear</title>

<style>

:root {

--primary-green: #27ae60;

--dark-sport: #2c3e50;

--accent-orange: #e67e22;

--light-gray: #f9f9f9;

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Oswald', sans-serif; /* Great for sports feel */

body {

background-color: var(--light-gray);

color: var(--dark-sport);

}
/* Navigation */

nav {

display: flex;

justify-content: space-between;

align-items: center;

padding: 1rem 5%;

background: #fff;

border-bottom: 3px solid var(--primary-green);

position: sticky;

top: 0;

z-index: 100;

.logo {

font-size: 1.8rem;

font-weight: 800;

color: var(--dark-sport);

text-transform: uppercase;

.logo span { color: var(--primary-green); }

nav ul { display: flex; list-style: none; }

nav ul li { margin-left: 1.5rem; }

nav ul li a {

text-decoration: none;

color: var(--dark-sport);
font-weight: 600;

text-transform: uppercase;

/* Hero Section */

.hero {

background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),

url('[Link]
05a232554f77?auto=format&fit=crop&w=1500&q=80');

background-size: cover;

background-position: center;

height: 70vh;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

color: white;

text-align: center;

padding: 0 10%;

.hero h1 { font-size: 4rem; line-height: 1; margin-bottom: 1rem; }

.hero p { font-size: 1.2rem; margin-bottom: 2rem; max-width: 700px; }

.cta-group { display: flex; gap: 1rem; }

.btn {
padding: 1rem 2.5rem;

text-decoration: none;

font-weight: bold;

text-transform: uppercase;

border-radius: 4px;

transition: 0.3s;

.btn-primary { background: var(--primary-green); color: white; }

.btn-secondary { background: white; color: var(--dark-sport); }

.btn:hover { transform: scale(1.05); }

/* Product Grid */

.inventory {

padding: 4rem 5%;

max-width: 1200px;

margin: auto;

.section-title {

text-align: center;

font-size: 2.5rem;

margin-bottom: 3rem;

text-transform: uppercase;

.grid {
display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 2rem;

.item-card {

background: white;

border-radius: 8px;

overflow: hidden;

box-shadow: 0 4px 15px rgba(0,0,0,0.1);

.item-img {

height: 200px;

background: #ddd;

display: flex;

align-items: center;

justify-content: center;

font-weight: bold;

color: #999;

.item-content { padding: 1.5rem; }

.price { color: var(--primary-green); font-size: 1.5rem; font-weight: bold;


}

footer {
background: var(--dark-sport);

color: white;

padding: 3rem 5%;

text-align: center;

margin-top: 4rem;

</style>

<link href="[Link]
family=Oswald:wght@400;700&display=swap" rel="stylesheet">

</head>

<body>

<nav>

<div class="logo">RE-<span>PLAY</span> SPORTS</div>

<ul>

<li><a href="#">Shop Materials</a></li>

<li><a href="#">Bulk Ware</a></li>

<li><a href="#">Our Mission</a></li>

<li><a href="#">Cart (0)</a></li>

</ul>

</nav>

<header class="hero">

<h1>DON'T LET THE GAME END.</h1>

<p>Sustainable raw materials sourced from professional arenas. From


recycled turf to shredded sneaker soles—give sports waste a second
life.</p>

<div class="cta-group">
<a href="#" class="btn btn-primary">Browse Ware</a>

<a href="#" class="btn btn-secondary">Sell Your Waste</a>

</div>

</header>

<section class="inventory">

<h2 class="section-title">Current Raw Ware</h2>

<div class="grid">

<div class="item-card">

<div class="item-img" style="background: #eee;">[ Image:


Recycled Turf ]</div>

<div class="item-content">

<h3>Premium Field Turf Rolls</h3>

<p>Decommissioned high-grade synthetic grass. Perfect for


landscaping or gym flooring.</p>

<p class="price">$12.00 / sq yd</p>

</div>

</div>

<div class="item-card">

<div class="item-img" style="background: #eee;">[ Image:


Rubber Crumb ]</div>

<div class="item-content">

<h3>SBR Rubber Granules</h3>

<p>Cleaned rubber sourced from recycled athletic footwear.


Ideal for safety surfacing.</p>

<p class="price">$0.85 / lb</p>

</div>

</div>
<div class="item-card">

<div class="item-img" style="background: #eee;">[ Image:


Netting ]</div>

<div class="item-content">

<h3>Professional Ball Netting</h3>

<p>Heavy-duty nylon netting from stadium backstops. Resilient


and UV protected.</p>

<p class="price">$45.00 / bundle</p>

</div>

</div>

</div>

</section>

<footer>

<p>&copy; 2026 RE-PLAY SPORTS CIRCULAR ECONOMY INC.</p>

<p style="font-size: 0.8rem; margin-top: 10px;">Turning the world's


playing fields into the world's resources.</p>

</footer>

</body>

</html>

You might also like