Welcome to Lite UI. Test Link
Home
Landing Page

Travel-X Landing Page

 Hello! Welcome to CodeXimo. 

You are looking for Today i Travel-X Landing Page, then this post is just for you.


You can see the demo here⤵

HTML Basic

The HTML document is structured with a <!DOCTYPE html> declaration to ensure compatibility across browsers.Inside the <html> tag, the <head> section includes the title "Landing Page" and embedded CSS for styling the page.

<!DOCTYPE html>
<html>
<head>
    <title>Landing Page</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <header id="header">
        <nav>
            <div class="logo">Travel-X</div>
            <div class="menu">
                <a href="#">Home</a>
                <a href="#">Hill Stations</a>
                <a href="#">Best Offers</a>
                <a href="#">Our Sites</a>
                <a href="#">Contact</a>
            </div>
            <div class="register">
                <a href="#">Register</a>
            </div>
        </nav>
        <section class="h-text">
            <span>Enjoy</span>
            <h1>International Travel Agency</h1>
            <br>
            <a href="#">Book your Trip</a>
        </section>
    </header>
    <script src="script.js"></script>
</body>
</html>

CSS Styling

Global styles reset padding and margins and apply a box-sizing: border-box rule to all elements to ensure consistent sizing.The header element is set to take up the entire viewport height (100vh) with a background image, covering the entire area with background-size: cover. The background image is initially set to a travel-themed picture.The nav section within the header contains the website's logo ("Travel-X") and navigation menu, styled with white text and a flexbox layout for easy alignment and spacing.The navigation links (.menu a) have a hover effect that animates an underline, enhancing the user experience.The .register link is styled with a distinct button-like appearance, featuring a background color of "indianred" and rounded corners.The .h-text section centers the main heading text ("International Travel Agency") and a call-to-action button ("Book your Trip") in the middle of the screen, with white text and a prominent button also styled in "indianred".

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

header {
    width: 100%;
    height: 100vh;
    background-image: url("https://images.pexels.com/photos/2468773/pexels-photo-2468773.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2");
    background-size: cover;
    font-family: sans-serif;
}
nav {
    width: 100%;
    height: 100px;
    color: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.logo {
    font-size: 2em;
    letter-spacing: 2px;
}

.menu a {
    text-decoration: none;
    color: white;
    padding: 10px 20px;
    font-size: 20px;
    position: relative;
}
.menu a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    border-bottom: 2px solid indianred;
    transition: 0.5s linear;
}
.menu a:hover:before {
    width: 90%;
}
.register a {
    text-decoration: none;
    color: white;
    padding: 10px 20px;
    font-size: 20px;
    background-color: indianred;
    border-radius: 8px;
}
.h-text {
    max-width: 650px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
}
.h-text span {
    letter-spacing: 5px;
}
.h-text h1 {
    font-size: 3.5em;
}
.h-text a {
    text-decoration: none;
    background: indianred;
    color: white;
    padding: 10px 20px;
    letter-spacing: 5px;
}

JavaScript Functionality

The design focuses on a fullscreen header with central text, making it easily adaptable to various screen sizes. The use of relative units (vh, em, px) ensures that the layout adjusts well on different devices.

const images = [
    "https://images.pexels.com/photos/2468773/pexels-photo-2468773.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    "https://images.pexels.com/photos/219998/pexels-photo-219998.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    "https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1600",
    "https://images.pexels.com/photos/21014/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    "https://images.pexels.com/photos/2649404/pexels-photo-2649404.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
];

let currentIndex = 0;

function changeBackground() {
    currentIndex = (currentIndex + 1) % images.length;
    document.querySelector('header').style.backgroundImage = `url(${images[currentIndex]})`;
}

setInterval(changeBackground, 5000); // Change image every 5 seconds
Conclusion 

Congratulations! You've embarked on a journey to create a Travel-X Landing Page. Illuminate your web design skills and captivate your audience with this enchanting tutorial.

Post a Comment