Travel website hero section Page:

Travel website hero section Page

About This:

In the realm of web design, the hero section of a website plays a pivotal role in capturing visitors' attention and setting the tone for their online experience. In this article, we will delve into the creation of a stunning travel website hero section using HTML and CSS, brought to you by Dev.Trinetra.

Getting Started with HTML:

Begin by structuring the HTML for your hero section. Create a container div to hold the content and divide it into relevant sections such as the main heading, subheading, and a call-to-action button. Don't forget to add semantic tags for accessibility and SEO optimization.

    
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="chrome" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Travel Website Hero Section</title>

    <link href="http://fonts.cdnfonts.com/css/clash-display" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap"
      rel="stylesheet">

    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="container">
      <nav class="nav">
        <a class="logo">Travelzz <br>By Trinetra</a>
        <div class="nav-menu">
          <ul class="nav-list">
            <li class="nav-item"><a href="">About</a></li>
            <li class="nav-item"><a href="">Booking</a></li>
            <li class="nav-item"><a href="">Pricing</a></li>
            <li class="nav-item"><a href="">Contact</a></li>
          </ul>
        </div>
      </nav>

      <section class="main">
        <div class="text-box">
          <h1 class="main-heading">
            <span>Traveling</span> opens
            door to creating
            memories
          </h1>
          <p class="sub-heading">
            Travel and explore the most Beautiful
            Destinations across the Globe.
          </p>
        </div>
        <div class="features">
          <div class="feature">
            <div class="feature-text">
              <h2>20K+</h2>
              <p>Happy Customers</p>
            </div>
            <div class="feature-img">
              <img src="Images\guilherme-stecanella.jpg" alt="">
            </div>
          </div>
          <div class="feature">
            <div class="feature-img">
              <img src="Images\suliman-sallehi.jpg" alt="">
            </div>
            <div class="feature-text">
              <h2>12K+</h2>
              <p>Travel Destinations</p>
            </div>
          </div>
        </div>
      </section>

      <figure class="hero-image">
        <img src="Images\florian-van-duyn.jpg" alt="" class="hero-image" />
      </figure>

      <section class="middle">

        <a href="#" class="btn">Explore</a>

        <form class="search-wrapper">
          <input type="text" placeholder="Search your Destination...">
          <button type="submit">Search</button>
          <figure>
            <img src="Images\philip-warp.jpg" alt="">
          </figure>
          <object data="Images\Vector 19.svg"></object>
        </form>

        <h1 class="watermark">Travel</h1>

      </section>
    </div>
  </body>

</html>

Styling with CSS:

Now, let's add some style to make your hero section visually appealing. Use CSS to set the background image, customize text styles, and add subtle animations for a modern touch.

  
:root {
  --clr-primary: #e78c2f;
  --clr-secondary: #049c7b;
  --clr-bg: #f3f3ed;
  --clr-text-dark: #262626;
  --clr-text-light: #545454;
}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  background-color: var(--clr-bg);
  height: 100vh;
  overflow: hidden;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  width: 100%;
  height: 100%;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
}

.nav {
  height: 96px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav .logo {
  font-family: "Clash Display", sans-serif;
  font-size: 32px;
  color: #049c7b;
  font-weight: 700;
}
.nav .nav-list {
  display: flex;
  gap: 32px;
}
.nav-item a {
  font-weight: 500;
  font-size: 17px;
  color: rgb(255, 162, 0);
  padding: 4px 2px;
}

.main {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.text-box {
  align-self: center;
}
.main-heading {
  font-size: 56px;
  font-weight: 900;
  font-family: "Clash Display", sans-serif;
  line-height: 1.15;
  color: var(--clr-text-dark);
  margin-bottom: 10px;
}
.main-heading span {
  color: var(--clr-primary);
}
.sub-heading {
  font-weight: 500;
  width: 40ch;
  color: var(--clr-text-light);
  margin-bottom: 40px;
}

.features {
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.feature {
  display: flex;
  gap: 16px;
  align-items: center;
}
.feature-text {
  flex-grow: 1;
}
.feature-text h2 {
  font-family: "Clash Display", sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--clr-text-dark);
}
.feature-text p {
  font-size: 16px;
  font-weight: 300;
  color: var(--clr-text-light);
}
.feature-img {
  width: 120px;
  height: 170px;
}
.feature-img img {
  object-fit: cover;
  border-radius: 200px;
}

.hero-image {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 350px;
  height: 450px;
  z-index: -1;
}
.hero-image img {
  object-fit: cover;
  border-bottom-left-radius: 1000px;
  border-bottom-right-radius: 1000px;
}

.middle {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.btn:link,
.btn:visited {
  font-family: "Clash Display", sans-serif;
  font-weight: 500;
  letter-spacing: 2px;
  background-color: var(--clr-primary);
  color: white;
  padding: 20px 80px;
  border-radius: 200px;
  text-transform: uppercase;
}
.search-wrapper {
  width: 70%;
  position: relative;
  margin-top: 80px;
}
.search-wrapper input {
  font-family: inherit;
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  color: white;
  padding: 18px 32px;
  background-color: var(--clr-text-dark);
  border-radius: 200px;
  border: 0;
}
.search-wrapper input:focus {
  outline: none;
}
.search-wrapper input::placeholder {
  color: white;
}
.search-wrapper button {
  position: absolute;
  top: 10px;
  right: 24px;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  background-color: var(--clr-secondary);
  color: white;
  padding: 0 32px;
  border-radius: 100px;
  cursor: pointer;
}
.search-wrapper figure {
  position: absolute;
  top: -130px;
  left: 105%;
  width: 150px;
  height: 150px;
}
.search-wrapper figure img {
  border-radius: 50%;
}
.search-wrapper object {
  position: absolute;
  top: -64px;
  left: 94%;
}

.middle h1 {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 220px;
  font-weight: 800;
  color: var(--clr-secondary);
  opacity: 0.1;
  line-height: 0.5;
  z-index: -1;
  text-transform: uppercase;
}

Why a Compelling Hero Section Matters:

The hero section is the first thing users see when they land on your travel website. It's an opportunity to showcase the beauty of destinations, invoke wanderlust, and provide a glimpse of the unique experiences your platform offers. A well-designed hero section can significantly impact user engagement and conversion rates.

Youtube Demo

Conclusion:

A visually striking and user-friendly hero section sets the stage for an immersive travel website experience. With the combination of HTML and CSS, you can create a captivating entry point that entices visitors to explore the wonders your platform has to offer. Enhance your website's allure and leave a lasting impression on every traveler with the help of Dev.Trinetra's web design insights. Start your journey into the world of web development and design with us!

Click Here for Source Code -

Thank you for using Dev.Trinetra.

Facebook SDK (Plugin)

Travel website hero section Page:

Post a Comment

Team Profile With Animation Effect

Developer Trinetra.

Contact form

Facebook SDK (Plugin)

Travel website hero section Page:

You may like these posts

Post a Comment

Contact form