Página de inicio de Chef personal

2,453 zegarkidawida

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

16 August 2024

Fondo de puntos animados

15 May 2025

Botones de neón

5 September 2025

Fragmento de código del formulario de inicio de sesión HTML

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Chef Website Landing Page</title>
    <link rel="stylesheet" href="style.css">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
    <header>
        <a href="#" class="logo">Chef</a>
        <i class='bx bx-menu' id="menu-icon"></i>

<ul class="navbar">
            <li><a href="#home">Home</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#chefs">Our Chefs</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </header>

<section class="home" id="home">
        <div class="home-text">
            <h3>More than Faster</h3>
            <h1>Be the fastest <br>In delivery <br>Your <span>Food</span></h1>
                <p>Select chefs known for their quick service and efficient order processing</p>
                <a href="#" class="btn">Contact Here</a>
        </div>

<section class="services" id="services">
        <div class="heading">
            <p>What we serve</p>
            <h2>Your Favorite Food <br>Delivery Partner</h2>
        </div>

<div class="services-container">
            <div class="box">
                <img src="https://i.postimg.cc/FH6Kckmn/order.png" alt="order image">
                <h2>Easy to Order</h2>
                <p>We ensure that your personal chef has a system in place for quick order preparation</p>
            </div>

<div class="box">
                <img src="https://i.postimg.cc/qvNJkBnc/ship.png" alt="ship image">
                <h2>Fastest Delivery</h2>
                <p>This includes readiness to handle peak times and using efficient cooking methods</p>
            </div>

<div class="box">
                <img src="https://i.postimg.cc/mZVBC1yN/deliver.png" alt="deliver image">
                <h2>Best Quality</h2>
                <p>We use spill-proof and sturdy containers to keep food intact during transit</p>
            </div>
        </div>
    </section>

<section class="chefs" id="chefs">
        <div class="heading">
            <p>Our Chefs</p>
            <h2>Our Awesome Chefs'</h2>
        </div>

<div class="chefs-container">
            <div class="chef-box">
                <img src="https://i.postimg.cc/SNC0VXWv/chef1.png" alt="chefs image">
                <div class="text">
                    <h2>John Watson</h2>
                    <p>With a passion for Asian cuisine, John participated in the last International Chinese Culinary Competition that started in Vancouver. He loves to bring to your customers diverse international dishes</p>
                    <a href="#" class="btn">Hire Now</a>
                </div>
            </div>

<div class="chef-box">
                <img src="https://i.postimg.cc/zf9Sdfwx/chef2.png" alt="chefs image">
                <div class="text">
                    <h2>Alexa Gomez</h2>
                    <p>With a desire for competition, Alexa participated in many chef competitions, including the MasterChef España. In these competitions, he honed his skills and creativity in the kitchen</p>
                    <a href="#" class="btn">Hire Now</a>
                </div>
            </div>

<div class="chef-box">
                <img src="https://i.postimg.cc/Xv3n9fmL/chef3.jpg" alt="chefs image">
                <div class="text">
                    <h2>Richard Walker</h2>
                    <p>With in-depth culinary knowledge of 20 years in the area, throughout his career, Richard has taken on roles as a mentor and teacher. His spirit has a passion for teaching and excellence in the culinary field</p>
                    <a href="#" class="btn">Hire Now</a>
                </div>
            </div>
        </div>
    </section>

<section class="contact" id="contact">
        <div class="heading">
            <p>Have Any Questions?</p>
            <h2>Contact Us</h2>
        </div>

<div class="copyright">
        <p>© Dawid Wróbel All Rights Reserved</p>
    </div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    box-sizing: border-box;
    scroll-padding-top: 2rem;
    list-style: none;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
}

:root {
    --main-color: #f54744;
    --text-color: #2f2f2f;
    --bg-color: #fff;

--big-font: 3.2rem;
    --h2-font: 2rem;
}

section { padding: 50px 10%; }
body { color: var(--text-color); background: var(--bg-color); }

header {
    position: fixed;
    width: 100%;
    top: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff4f3;
    padding: 18px 10%;
}

.logo { font-size: 1.2rem; font-weight: 600; color: var(--main-color); }
.navbar { display: flex; }
    .navbar a {
        font-size: 1rem;
        padding: 10px 20px;
        color: var(--text-color);
        font-weight: 500;
        transition: .5s ease;
    }

.navbar a:hover { background: var(--main-color); color: #fff; border-radius: 2rem; }

#menu-icon {
    font-size: 2rem;
    cursor: pointer;
    display: none;
}

.home {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    background: #fff4f3;
    gap: 1.5rem;
}

.home-img img { width: 90%; }

.home-text h3 {
    color: var(--main-color);
    font-size: 1rem;
    font-weight: 400;
    padding: 10px;
    width: 160px;
    border-radius: 2rem;
    background: #feeceb;
}

.home-text h1 { font-size: var(--big-font); }
.home-text span { color: var(--main-color); }
.home-text p { min-width: 80%; margin: 1rem 0 1.1rem; }

.btn {
    background: var(--main-color);
    display: inline-block;
    padding: 10px 20px;
    border-radius: 2rem;
    color: #fff;
}

.btn:hover { background: #fc5552; }

.heading { text-align: center; }
    .heading p { text-transform: uppercase; font-weight: 500; color: var(--main-color); }
    .heading h2 { font-size: var(--h2-font); }

.services-container { 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, auto));
    gap: 1.5rem;
    margin-top: 4rem;
}

.box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.box img { width: 100px; height: 100px; object-fit: contain; }
    .box h2 { font-size: 1.2rem; margin: 1.7rem 0 1rem; }

.chefs .chefs-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.chefs .chefs-container .chef-box {
        position: relative;
        height: 420px;
        flex: 1 1 18rem;
        overflow: hidden;
    }

.chefs .chefs-container .chef-box img { width: 100%; height: 100%; object-fit: cover; }
        .chefs .chefs-container .chef-box .text {
            position: absolute;
            top: -100%;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            padding: 20px;
            padding-top: 8rem;
            background: rgba(255, 244, 243, .78);
            transition: .5s ease;    
        }
        .chefs .chefs-container .chef-box:hover .text { top: 0; }
            .chef-box .text h2 { font-size: 1.2rem; }
            .chef-box .text p { margin: 0.4rem 0 1rem; }

.contact-form { display: flex; justify-content: center; margin-top: 4rem; }
    .contact-form form { display: flex; flex-direction: column; }
        .contact-form form input, textarea {
            width: 400px;
            padding: 14px;
            margin-bottom: 10px;
            border-radius: .5rem;
            border: none;
            outline: none;
            background: #fff4f3;
        }

.contact-form form input textarea { resize: none; height: 200px; }

.contact-form form .contact-button {
            font-weight: 500;
            color: #fff;
            background: var(--main-color);
            cursor: pointer;
        }

.contact-form form .contact-button:hover { background: #fc5552; }

.copyright { padding: 20px; text-align: center; }

@media (max-width: 991px) {
    header { padding: 10px 4%; }
    section { padding: 50px 4%; }

:root {
        --big-font: 2.7rem;
        --h2-font: 1.7rem;
    }
}

@media (max-width: 768px) {
    :root {
        --big-font: 2rem;
        --h2-font: 1.4rem;
    }

#menu-icon { display: initial; color: var(--text-color); }

header .navbar {
        position: absolute;
        top: -400px;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        text-align: center;
        background: #fff4f3;
        box-shadow: 0px 4px 4px rgb(0, 0, 0 / 10%);
        transition: .5s;
    }

.navbar.active { top: 100%; }
        .navbar a { padding: 1.5rem; display: block; }
            .navbar a:hover { background: none; color: var(--main-color); }

.home { grid-template-columns: 1fr; }
    .home-text { padding-top: 2rem; }
}

@media (max-width: 415px) {
    .contact-form form input, textarea { width: auto; }
}