Página de inicio de alquiler de coches

Abrir en el editor Publica tu código

Recomendado

25 August 2024

Efecto de desplazamiento al navegar CSS puro

17 August 2024

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Car Rental Landing Page</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet"/>
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <link rel="shortcut icon" href="https://i.postimg.cc/gcZdykyW/jeep.png">
    <script src="https://unpkg.com/scrollreveal"></script>
</head>
<body>
    <header>
        <a href="#" class="logo"><img src="https://i.postimg.cc/gcZdykyW/jeep.png" alt="car logo"></a>

<ul class="navbar">
            <li><a href="#home">Home</a></li>
            <li><a href="#ride">Ride</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#reviews">Reviews</a></li>
        </ul>

<section class="home" id="home">
        <div class="text">
            <h1><span>Looking</span> to <br>rent a car</h1>
            <p>Where Will the Road Take You? Rent a Car and Find Out!</p>
            <div class="app-stores">
                <img src="https://i.postimg.cc/tRY8QX2M/ios.png" alt="ios image">
                <img src="https://i.postimg.cc/2yRQKFHm/android.png" alt="android image">
            </div>
        </div>

<div class="form-container">
            <form action="">
                <div class="input-box">
                    <span>Location</span>
                    <input type="search" placeholder="Search Places">
                </div>

<div class="input-box">
                    <span>Return Date</span>
                    <input type="date">
                </div>
                <input type="submit" class="btn">
            </form>
        </div>
    </section>

<section class="ride" id="ride">
        <div class="heading">
            <span>How it's works</span>
            <h1>Rent with 3 easy steps</h1>
        </div>
        <div class="ride-container">
            <div class="box">
                <i class="ri-map-2-line"></i>
                <h2>Choose a Location</h2>
                <p>Browse our wide selection of vehicles according to location</p>
            </div>

<div class="box">
                <i class="ri-calendar-line"></i>
                <h2>Choose a date</h2>
                <p>Choose a date that fits your needs and budget</p>
            </div>

<div class="box">
                <i class="ri-bookmark-line"></i>
                <h2>Book a car</h2>
                <p>Enter your details for a quick and secure booking</p>
            </div>
        </div>
    </section>

<section class="services" id="services">
        <div class="heading">
            <span>Best Services</span>
            <h1>Explore out Top Deals <br> From Top Rated Dealers </h1>
        </div>
        <div class="services-container">
            <div class="box">
                <div class="box-img"><img src="https://i.postimg.cc/T31DwXXs/car1.jpg" alt="car image"></div>
                <p>2025</p>
                <h3>Honda Civic Type R</h3>
                <h2>$45,895 | $276 <span>/month</span></h2>
                <a href="#" class="btn">Rent Now</a>
            </div>

<div class="box">
                <div class="box-img"><img src="https://i.postimg.cc/QdvHd9mB/car2.jpg" alt="car image"></div>
                <p>2025</p>
                <h3>Honda Civic</h3>
                <h2>$28,450 | $171 <span>/month</span></h2>
                <a href="#" class="btn">Rent Now</a>
            </div>

<div class="box">
                <div class="box-img"><img src="https://i.postimg.cc/s2S1QjHT/car3.jpg" alt="car image"></div>
                <p>2025</p>
                <h3>Honda Civic Si</h3>
                <h2>$29,000 | $174 <span>/month</span></h2>
                <a href="#" class="btn">Rent Now</a>
            </div>

<div class="box">
                <div class="box-img"><img src="https://i.postimg.cc/rsYqZ3Yd/car4.jpg" alt="car image"></div>
                <p>2023</p>
                <h3>Honda Civic Type R</h3>
                <h2>$43,000 | $258 <span>/month</span></h2>
                <a href="#" class="btn">Rent Now</a>
            </div>

<div class="box">
                <div class="box-img"><img src="https://i.postimg.cc/jqnj5QCR/car5.jpg" alt="car image"></div>
                <p>2023</p>
                <h3>Honda Civic Type R</h3>
                <h2>$43,000 | $258 <span>/month</span></h2>
                <a href="#" class="btn">Rent Now</a>
            </div>

<div class="box">
                <div class="box-img"><img src="https://i.postimg.cc/DZSFDFRq/car6.jpg" alt="car image"></div>
                <p>2025</p>
                <h3>Porsche Cayman GT4</h3>
                <h2>$100,000 | $600 <span>/month</span></h2>
                <a href="#" class="btn">Rent Now</a>
            </div>
        </div>
    </section>

<section class="about" id="about">
        <div class="heading">
            <span>About Us</span>
            <h1>Best Customer Experience</h1>
        </div>
        <div class="about-container">
            <div class="about-img"><img src="https://i.postimg.cc/KjtmmbFC/about.png" alt="about banner"></div>
            <div class="about-text">
                <span>About us</span>
                <p>We're passionate about providing you with the perfect vehicle for your needs. Whether you're looking for a short-term rental or a long-term purchase, we offer a diverse selection of cars to suit every taste and budget</p>
                <p>Our commitment to excellence begins with our extensive inventory, carefully curated to include a wide range of makes, models, and years. We pride ourselves on maintaining a high standard of vehicle quality, ensuring each car undergoes a rigorous inspection process before being offered for sale or rent</p>
                <a href="#" class="btn">Learn More</a>
            </div>
        </div>
    </section>

<section class="reviews" id="reviews">
        <div class="heading">
            <span>Reviews</span>
            <h1>What our Customers Say</h1>
        </div>
        <div class="reviews-container">
            <div class="box">
                <div class="rev-img"><img src="https://i.postimg.cc/fWCHgFxb/rev1.jpg" alt="review image"></div>
                <h2>Alan Doe</h2>
                <div class="stars">
                    <i class="ri-star-fill"></i>
                    <i class="ri-star-fill"></i>
                    <i class="ri-star-fill"></i>
                    <i class="ri-star-fill"></i>
                    <i class="ri-star-half-fill"></i>
                </div>
                <p>I was impressed with the condition of the vehicle I rented. It was clean, well-maintained, and drove perfectly. It made my road trip so much more enjoyable knowing I was driving a reliable and comfortable car. Highly recommend!</p>
            </div>

<div class="box">
                <div class="rev-img"><img src="https://i.postimg.cc/YSxgCc2G/rev2.jpg" alt="review image"></div>
                <h2>John Ford</h2>
                <div class="stars">
                    <i class="ri-star-fill"></i>
                    <i class="ri-star-fill"></i>
                    <i class="ri-star-fill"></i>
                    <i class="ri-star-fill"></i>
                    <i class="ri-star-fill"></i>
                </div>
                <p>I needed a car for a week, and here I offered the best value for my money. Their prices were competitive, and the overall experience was worth every penny. I wouldn't hesitate to rent from them again!</p>
            </div>

<div class="box">
                <div class="rev-img"><img src="https://i.postimg.cc/Qtx7B6V6/rev3.jpg" alt="review image"></div>
                <h2>Katharina Moss</h2>
                <div class="stars">
                    <i class="ri-star-fill"></i>
                    <i class="ri-star-fill"></i>
                    <i class="ri-star-fill"></i>
                    <i class="ri-star-fill"></i>
                    <i class="ri-star-fill"></i>
                </div>
                <p> The online booking process was easy, the car was ready on time, and the return was just as straightforward. No hidden fees, no hassle - just a great experience from start to finish. I'll definitely be using them again!</p>
            </div>
        </div>
    </section>

<section class="newsletter">
        <h2>Subscribe to Newsletter</h2>
        <div class="box">
            <input type="text" placeholder="Enter your email">
            <a href="#" class="btn">Subscribe</a>
        </div>
    </section>
    <div class="copyright">
        <p>© <span>Dawid Wróbel</span> All rights reserved</p>
        <div class="social">
            <a href="#"><i class="ri-facebook-fill"></i></a>
            <a href="#"><i class="ri-twitter-x-line"></i></a>
            <a href="#"><i class="ri-instagram-line"></i></a>
        </div>
    </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&family=Turret+Road:wght@200;300;400;500;700;800&display=swap');

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

/* Zmienne */
:root {
    --main-color: #FF5733; /* Bardziej żywy odcień pomarańczu */
    --second-color: #FFC107; /* Żółty akcent */
    --text-color: #2D2D2D; /* Ciemniejszy szary dla lepszej czytelności */
    --bg-color: #F8F9FA; /* Jasne tło */
    --gradient: linear-gradient(45deg, #FF5733, #FFC107);
}

/* Scrollbar */
html::-webkit-scrollbar {
    width: 0.5rem;
}
html::-webkit-scrollbar-track {
    background: transparent;
}
html::-webkit-scrollbar-thumb {
    background: var(--main-color);
    border-radius: 5rem;
}

/* Ogólne style dla sekcji */
section {
    padding: 60px 100px;
    background: var(--bg-color);
}

/* Header */
header {
    position: fixed;
    width: 100%;
    top: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFFFFF;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 15px 100px;
    transition: background 0.3s ease;
}

.logo img {
    width: 45px;
    transition: transform 0.3s ease;
}
.logo img:hover {
    transform: scale(1.1);
}

.navbar {
    display: flex;
    gap: 10px;
}
.navbar li {
    position: relative;
}
.navbar a {
    font-size: 1rem;
    padding: 10px 20px;
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.3s ease;
}
.navbar a:hover {
    color: var(--main-color);
}
.navbar a::after {
    content: '';
    width: 0;
    height: 3px;
    background: var(--gradient);
    position: absolute;
    bottom: -4px;
    left: 0;
    transition: width 0.3s ease;
}
.navbar a:hover::after {
    width: 100%;
}

#menu-icon {
    font-size: 28px;
    cursor: pointer;
    z-index: 110;
    display: none;
}

.header-btn a {
    padding: 10px 20px;
    color: var(--text-color);
    font-weight: 500;
    transition: all 0.3s ease;
}
.header-btn .sign-in {
    background: var(--main-color);
    color: #FFFFFF;
    border-radius: 25px;
}
.header-btn .sign-in:hover {
    background: var(--second-color);
    transform: translateY(-2px);
}

/* Home Section */
.home {
    width: 100%;
    min-height: 100vh;
    position: relative;
    background: url('https://i.postimg.cc/nrCy3xwN/Car-Website-1-2x.png') no-repeat center right / cover;
    display: grid;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.text h1 {
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #FFFFFF;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.text span {
    color: var(--second-color);
}
.text p {
    margin: 1rem 0;
    font-size: 1.2rem;
    color: #FFFFFF;
    opacity: 0.9;
}

.app-stores {
    display: flex;
    gap: 1rem;
}
.app-stores img {
    width: 120px;
    transition: transform 0.3s ease;
}
.app-stores img:hover {
    transform: scale(1.05);
}

.form-container form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.95);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    position: absolute;
    bottom: 3rem;
    left: 100px;
}
.input-box {
    flex: 1 1 8rem;
    display: flex;
    flex-direction: column;
}
.input-box span {
    font-weight: 500;
    color: var(--text-color);
}
.input-box input {
    padding: 10px;
    border: 1px solid #DDD;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}
.input-box input:focus {
    border-color: var(--main-color);
    outline: none;
}
.form-container .btn {
    flex: 1 1 8rem;
    padding: 12px;
    background: var(--main-color);
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}
.form-container .btn:hover {
    background: var(--second-color);
    transform: translateY(-2px);
}

/* Heading */
.heading {
    text-align: center;
    margin-bottom: 2rem;
}
.heading span {
    font-weight: 600;
    text-transform: uppercase;
    color: var(--main-color);
}
.heading h1 {
    font-size: 2.5rem;
    color: var(--text-color);
}

/* Ride Section */
.ride-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.ride-container .box {
    text-align: center;
    padding: 20px;
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}
.ride-container .box:hover {
    transform: translateY(-5px);
}
.ride-container .box i {
    font-size: 40px;
    padding: 12px;
    background: var(--bg-color);
    border-radius: 50%;
    color: var(--main-color);
    transition: background 0.3s ease;
}
.ride-container .box i:hover {
    background: var(--gradient);
    color: #FFFFFF;
}
.ride-container .box h2 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem;
}

/* Services Section */
.services-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.services-container .box {
    padding: 15px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}
.services-container .box:hover {
    transform: translateY(-5px);
}
.services-container .box .box-img {
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-radius: 10px;
}
.services-container .box .box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.services-container .box:hover .box-img img {
    transform: scale(1.05);
}
.services-container .box p {
    padding: 5px 10px;
    border: 1px solid var(--text-color);
    border-radius: 8px;
    display: inline-block;
    margin: 1rem 0;
}
.services-container .box h3 {
    font-weight: 600;
    color: var(--text-color);
}
.services-container .box h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--main-color);
}
.services-container .box h2 span {
    font-size: 0.9rem;
    color: var(--text-color);
}
.services-container .box .btn {
    display: block;
    text-align: center;
    background: var(--main-color);
    color: #FFFFFF;
    padding: 10px;
    border-radius: 8px;
    transition: background 0.3s ease, transform 0.2s ease;
}
.services-container .box .btn:hover {
    background: var(--second-color);
    transform: translateY(-2px);
}

/* About Section */
.about-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    align-items: center;
    margin-top: 2rem;
}
.about-img img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.about-text span {
    font-weight: 600;
    color: var(--main-color);
    text-transform: uppercase;
}
.about-text p {
    margin: 1rem 0;
    font-size: 1rem;
    color: var(--text-color);
}
.about-text .btn {
    padding: 12px 25px;
    background: var(--main-color);
    color: #FFFFFF;
    border-radius: 8px;
    transition: background 0.3s ease, transform 0.2s ease;
}
.about-text .btn:hover {
    background: var(--second-color);
    transform: translateY(-2px);
}

/* Reviews Section */
.reviews-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.reviews-container .box {
    padding: 20px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease;
}
.reviews-container .box:hover {
    transform: translateY(-5px);
}
.reviews-container .box .rev-img {
    width: 80px;
    height: 80px;
    margin: 0 auto;
}
.reviews-container .box .rev-img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--second-color);
}
.reviews-container .box h2 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0.5rem 0;
}
.reviews-container .box .stars i {
    color: var(--second-color);
    font-size: 1.1rem;
}
.reviews-container .box p {
    font-style: italic;
    color: var(--text-color);
}

/* Newsletter Section */
.newsletter {
    background: var(--gradient);
    padding: 40px 20px;
    text-align: center;
}
.newsletter h2 {
    color: #FFFFFF;
    font-size: 2rem;
    margin-bottom: 1rem;
}
.newsletter .box {
    display: flex;
    justify-content: center;
    gap: 10px;
    max-width: 400px;
    margin: 0 auto;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 6px 10px;
}
.newsletter .box input {
    border: none;
    outline: none;
    font-size: 1rem;
    flex: 1;
}
.newsletter .box .btn {
    background: var(--main-color);
    color: #FFFFFF;
    padding: 10px 20px;
    border-radius: 8px;
    transition: background 0.3s ease, transform 0.2s ease;
}
.newsletter .box .btn:hover {
    background: var(--second-color);
    transform: translateY(-2px);
}

/* Copyright */
.copyright {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFFFFF;
}
.copyright span {
    font-family: 'Turret Road', sans-serif;
    color: var(--main-color);
}
.social a {
    color: var(--text-color);
    font-size: 22px;
    margin: 0 10px;
    transition: color 0.3s ease;
}
.social a:hover {
    color: var(--main-color);
}

/* Responsywność */
@media (max-width: 1375px) {
    .text {
        display: none;
    }
}

@media (max-width: 991px) {
    header {
        padding: 15px 40px;
    }
    section {
        padding: 50px 40px;
    }
}

@media (max-width: 881px) {
    .home {
        background-position: center;
    }
    .form-container form {
        bottom: 0.2rem;
        left: 40px;
    }
    .text {
        display: initial;
    }
}

@media (max-width: 795px) {
    header {
        padding: 10px 40px;
    }
    #menu-icon {
        display: initial;
    }
    .sign-up {
        display: none;
    }
    .text h1 {
        font-size: 2.5rem;
        width: 320px;
    }
    .text p {
        font-size: 0.9rem;
        width: 320px;
    }
    .home {
        grid-template-columns: 1fr;
    }
    .form-container form {
        position: unset;
    }
    .navbar {
        position: absolute;
        top: -500px;
        left: 0;
        right: 0;
        flex-direction: column;
        background: #FFFFFF;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        transition: top 0.3s ease;
    }
    .navbar.active {
        top: 100%;
    }
    .navbar a {
        padding: 1rem;
        border-left: 3px solid var(--main-color);
        margin: 1rem;
        display: block;
    }
    .navbar a:hover {
        color: #FFFFFF;
        background: var(--main-color);
    }
    .navbar a::after {
        display: none;
    }
    .heading span {
        font-size: 0.9rem;
    }
    .heading h1 {
        font-size: 1.8rem;
    }
    .about-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .about-img {
        padding: 1rem;
        order: 1;
    }
    .about-text {
        order: 2;
    }
}

@media (max-width: 568px) {
    .home {
        background-position: left;
    }
    .text h1 {
        width: 300px;
    }
    .text p {
        width: 300px;
    }
    .form-container {
        padding-top: 2rem;
    }
    .about-text p {
        font-size: 0.9rem;
    }
    .copyright {
        flex-direction: column;
        gap: 1rem;
    }
    .newsletter .box {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 460px) {
    header {
        padding: 8px 20px;
    }
    .logo img {
        width: 35px;
    }
    section {
        padding: 40px 20px;
    }
    .header-btn .sign-in {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
    .text h1 {
        font-size: 2rem;
    }
    .services-container {
        grid-template-columns: 1fr;
    }
}

Página de inicio de alquiler de coches

Recomendado

Efecto de desplazamiento al navegar CSS puro

Juego de Sudokus

Vibraciones de geometría

HTML

CSS

JS

Recomendado

Efecto de desplazamiento al navegar CSS puro

Juego de Sudokus

Vibraciones de geometría

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS