Untitled

mail@pastecode.io avatar
unknown
plain_text
5 months ago
4.6 kB
4
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Punch Craft - Boxing T-Shirts</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>Punch Craft</h1>
            <nav>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#products">Products</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section id="home" class="hero">
        <div class="container">
            <h2>Welcome to Punch Craft</h2>
            <p>Your ultimate destination for premium boxing t-shirts.</p>
        </div>
    </section>

    <section id="about">
        <div class="container">
            <h2>About Us</h2>
            <p>Punch Craft is dedicated to providing high-quality, stylish t-shirts for boxing enthusiasts. Our designs are inspired by the sport and crafted with care to ensure you look and feel your best, whether you're in the ring or out on the town.</p>
        </div>
    </section>

    <section id="products">
        <div class="container">
            <h2>Our Products</h2>
            <div class="product-grid">
                <div class="product">
                    <img src="tshirt1.jpg" alt="Boxing T-Shirt 1">
                    <h3>Classic Boxer Tee</h3>
                    <p>$25.00</p>
                    <a href="#" class="btn">Buy Now</a>
                </div>
                <div class="product">
                    <img src="tshirt2.jpg" alt="Boxing T-Shirt 2">
                    <h3>Knockout Tee</h3>
                    <p>$30.00</p>
                    <a href="#" class="btn">Buy Now</a>
                </div>
                <div class="product">
                    <img src="tshirt3.jpg" alt="Boxing T-Shirt 3">
                    <h3>Champion's Tee</h3>
                    <p>$35.00</p>
                    <a href="#" class="btn">Buy Now</a>
                </div>
            </div>
        </div>
    </section>

    <section id="contact">
        <div class="container">
            <h2>Contact Us</h2>
            <form action="submit_form.php" method="post">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
                <label for="message">Message:</label>
                <textarea id="message" name="message" required></textarea>
                <button type="submit" class="btn">Send</button>
            </form>
        </div>
    </section>

    <footer>
        <div class="container">
            <p>&copy; 2024 Punch Craft. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 80%;
    margin: 0 auto;
}

header {
    background-color: #333;
    color: #fff;
    padding: 1rem 0;
}

header h1 {
    display: inline;
}

nav {
    display: inline;
    float: right;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-left: 1rem;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

.hero {
    background: url('hero.jpg') no-repeat center center/cover;
    color: #fff;
    text-align: center;
    padding: 2rem 0;
}

.hero h2 {
    margin: 0;
}

section {
    padding: 2rem 0;
}

.product-grid {
    display: flex;
    gap: 2rem;
    justify-content: space-around;
}

.product {
    text-align: center;
}

.product img {
    width: 100%;
    max-width: 200px;
    height: auto;
}

.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 1rem;
}

.btn:hover {
    background-color: #555;
}

form {
    display: flex;
    flex-direction: column;
}

form label {
    margin-top: 1rem;
}

form input, form textarea {
    padding: 0.5rem;
    margin-top: 0.5rem;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    margin-top: 2rem;
}
Leave a Comment