Modello di landing page HTML: agenzia di viaggi

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

26 December 2024

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Landing Page</title>
  </head>
  <body>
    <style>
      *{
        padding: 0;
        margin: 0;
      box-sizing: border-box;
    
      /* calculates content width */
      }
      header{
        width: 100%;
        height: 100vh;
     font-size: 10px;
   background: linear-gradient( rgba(0,0,0,0.8),rgba(0,0,0,0.2)),url(https://www.zensebangkok.com/wp-content/uploads/2021/10/pexels-kenneth-carpina-2468773.jpg);
      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: 3em;
        letter-spacing: 2px;
        text-shadow: 5px 5px 5px indianred;
       
      }
      .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;
        border-top: 2px solid indianred;
        transition: 0.2s linear;
    
      }
      .menu a:hover:before{
width: 100%;
      }
      .register a{
text-decoration: none;
color: white;
padding: 10px 20px;
font-size: 10px;
background: indianred;
border-radius: 8px;
transition: 0.4s;
      }
      .register a:hover{
background: transparent;
border: 1px solid indianred;
font-size: xx-large;

}
      .headertext{
        max-width: 650px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        text-align: center;
      }
      .headertext span{
        letter-spacing: 5px;
      }
      .headertext h1{
        font-size: 4.5em;
      }
      .headertext a{
        text-decoration: none;
        background: indianred;
        color: white;
        padding: 10px 20px;
        letter-spacing: 5px;
        transition: 0.4s;border-radius: 50%;
      }
      .headertext a:hover{
        text-decoration: none;
        background: transparent;
        color: indianred;
        padding: 10px 20px;
        letter-spacing: 8px;
        transition: 0.4s;
        font-size: xx-large;
      }
       </style>
    <header>
      <nav>
        <div class="logo">NOTHERN TRAVELS</div>
        <div class="menu">
          <a href="#">Home</a>
          <a href="#">Hill Station</a>
          <a href="#">About Us</a>
          <a href="#">Contact Us</a>
          <a href="#">Sale Offer</a>
        </div>
        <div class="register"><a href="#">Register</a></div>
      </nav> </header>
      <section class="headertext">
        <span>Enjoy</span>
        <h1>International Travel Agency</h1>
        <br>
        <a href="#">Book Your Trip Now ! </a>
      </section>
  
  </body>
</html>

Modello di landing page HTML: agenzia di viaggi

Consigliato

Un codice di logicarray833

Un codice di lebdev

Un codice di Mete

HTML

CSS

JS

Consigliato

Un codice di logicarray833

Un codice di lebdev

Un codice di Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS