Página de inicio de alquiler de coches

Abrir en el editor Video Publica tu código

Recomendado

15 May 2024

Página de inicio con efecto de falla: HTML, CSS, Tailwind

6 November 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

texto de animación

Página de inicio con efecto de falla: HTML, CSS, Tailwind

Efecto de texto 3D

HTML

CSS

JS

Recomendado

texto de animación

Página de inicio con efecto de falla: HTML, CSS, Tailwind

Efecto de texto 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS