Untitled

avatar
unknown
plain_text
2 months ago
4.3 kB
2
Indexable
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
}

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

.header {
    background-color: #ff5722;
    color: white;
    padding: 20px 0;
    text-align: center;
}

.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.home-section, .about-section, .menu-section, .contact-section {
    padding: 50px 0;
    text-align: center;
}

.home-section {
    background-color: #fce4ec;
}

.menu-items {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
}

.menu-item {
    border: 1px solid #ddd;
    padding: 20px;
    width: 300px;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #ff5722;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
}

.contact-form label {
    display: block;
    margin-bottom: 10px;
}

.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
}<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pirk Hub</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">
        <div class="container">
            <h1>Pirk Hub</h1>
            <nav>
                <ul class="nav-links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#menu">Menu</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section id="home" class="home-section">
        <div class="container">
            <h2>Welcome to Pirk Hub</h2>
            <p>Your ultimate dining destination for delicious meals and unforgettable moments.</p>
            <a href="#menu" class="btn">Explore Menu</a>
        </div>
    </section>

    <section id="about" class="about-section">
        <div class="container">
            <h2>About Us</h2>
            <p>Pirk Hub is a family-owned restaurant offering a blend of traditional and modern cuisine, crafted with fresh ingredients and passion.</p>
        </div>
    </section>

    <section id="menu" class="menu-section">
        <div class="container">
            <h2>Our Menu</h2>
            <div class="menu-items">
                <div class="menu-item">
                    <h3>Grilled Chicken</h3>
                    <p>Juicy grilled chicken served with a side of vegetables.</p>
                    <p>$12.99</p>
                </div>
                <div class="menu-item">
                    <h3>Vegan Salad</h3>
                    <p>A refreshing salad with organic vegetables and a light dressing.</p>
                    <p>$9.99</p>
                </div>
                <div class="menu-item">
                    <h3>Chocolate Lava Cake</h3>
                    <p>A warm chocolate cake with a molten center.</p>
                    <p>$6.99</p>
                </div>
            </div>
        </div>
    </section>

    <section id="contact" class="contact-section">
        <div class="container">
            <h2>Contact Us</h2>
            <form class="contact-form">
                <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" rows="4" required></textarea>
                
                <button type="submit" class="btn">Submit</button>
            </form>
        </div>
    </section>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 Pirk Hub. All rights reserved.</p>
        </div>
    </footer>
</body>
</html
Editor is loading...
Leave a Comment