Home
Hacker Development
landing page

landing page

web Design

This tailwind example is contributed by Hacker Development, on 01-May-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is Front page

Landing Page

Author Hacker Development

297

Fork Fullscreen

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title><link rel="preload" as="image" imagesrcset="https://developergtm.in/wp-content/uploads/2024/03/Screenshot-202024-03-10-20103614.png" imagesizes="(max-width: 749px) 100vw, 749px" /><link rel="preload" as="font" href="https://developergtm.in/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v3.1" type="font/woff2" crossorigin="anonymous" />
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
    integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
      * {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .header-top {
    display: flex;
    justify-content: center;
    padding: 10px 30px;
    column-gap: 813px;
    align-items: center;
    height: 20px;
    background-color: rgba(255, 20, 145, 0.822);
  }
  
  .header-top .logo {
    display: flex;
    column-gap: 10px;
  }
  
  .header-top .header-item {
    display: flex;
    column-gap: 10px;
  }
  
  .header-top .header-item a {
    text-decoration: none;
    font-size: 20px;
    color: black;
  }
  
  .header {
    display: flex;
    justify-content: center;
    padding: 10px 30px;
    column-gap: 290px;
    align-items: center;
    height: 50px;
    background-color: white;
  }
  
  .header .header-item {
    display: flex;
    column-gap: 30px;
  }
  
  .header .header-item a {
    text-decoration: none;
    font-size: 20px;
    color: black;
  }
  
  .header .header-item .home-btn {
    border-bottom: 2px solid black;
  }
  
  .header .shop-icon {
    display: flex;
    column-gap: 10px;
  }
  
  .header .shop-icon i {
    cursor: pointer;
  }
  
  .home {
    background-image: linear-gradient(299deg, #c2efeb, #baceed);
    background-size: cover;
    height: 465px;
    width: 100%;
  }
  
  .home .slide {
    display: flex;
    column-gap: 5px;
    margin-top: -70px;
    justify-content: center;
    align-items: center;
  }
  
  .home .slide .one {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    border: 1px solid black;
  }
  
  .home .slide .two {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: flex;
    background: darkgray;
  }
  
  .home .slide span {
    width: 10px;
    cursor: pointer;
    height: 10px;
    border-radius: 50%;
    display: flex;
    background: darkgray;
  }
  
  .home .main-sec {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px;
    padding-top: 80px;
  }
  
  .home .main-sec .left .txt {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
  }
  
  .home .left .txt p {
    font-size: 3rem;
    color: black;
  }
  
  .home .left .txt button {
    padding: 15px 20px;
    border: none;
    width: fit-content;
    box-shadow: rgba(111, 87, 130, 0.32) 0px 12px 30px 0px;
    background-color: rgba(255, 20, 145, 0.822);
    cursor: pointer;
  }
  
  .home .left {
    width: 46vw;
    padding: 30px;
  }
  
  .home .right {
    width: 46vw;
  }
  
  .product-box {
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .product-box .main-box {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 20px;
  }
  
  .product-box .main-box .box {
    width: 350px;
    height: 360px;
    background-image: linear-gradient(143deg, #c79969, transparent);
    border-radius: 8px;
    padding: 20px;
    overflow: hidden;
  }
  
  .product-box .main-box .box .txt {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }
  
  .product-box .main-box .box .txt button {
    padding: 10px 20px;
    border: none;
    background: white;
    width: fit-content;
    cursor: pointer;
  }
  
  .product-box img {
    width: 450px;
  }
  
  .product-box .main-box .box2 {
    width: 350px;
    height: 360px;
    background-image: linear-gradient(143deg, #7a7b87, transparent);
    border-radius: 8px;
    padding: 20px;
    overflow: hidden;
  }
  
  .product-box .main-box .box2 .txt {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }
  
  .product-box .main-box .box2 .txt button {
    padding: 10px 20px;
    border: none;
    background: white;
    width: fit-content;
    cursor: pointer;
  }
  
  .product-box .head {
    width: 230px;
    margin-left: 116px;
  }
  
  .product-box .main-box .box3 {
    width: 350px;
    height: 360px;
    background-image: linear-gradient(143deg, #75c9c6, transparent);
    border-radius: 8px;
    padding: 20px;
    overflow: hidden;
  }
  
  .product-box .main-box .box3 .txt {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }
  
  .product-box .main-box .box3 .txt button {
    padding: 10px 20px;
    border: none;
    background: white;
    width: fit-content;
    cursor: pointer;
  }
  
  .product-box .box3 .air {
    margin-left: 39px;
    width: 372px;
    margin-top: -65px;
  }
  
  .trending {
    height: 300px;
    /* background-color: #75c9c6; */
    width: auto;
    padding: 30px;
  }
  
  .trending .txt {
    display: flex;
    justify-content: center;
  }
  
  .trending .main-box {
    display: flex;
    justify-content: center;
    column-gap: 40px;
    margin-top: 20px;
  }
  
  .trending .main-box .box {
  
    width: 271px;
    height: 256px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    row-gap: 13px;
  }
  
  .trending .main-box .box img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
  }
  
  .popular {
    height: 850px;
    /* background-color: #75c9c6; */
    width: auto;
    padding: 30px;
  }
  
  .popular .txt {
    display: flex;
    justify-content: center;
  }
  
  .popular .main-box {
    display: flex;
    justify-content: center;
    column-gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
    row-gap: 20px;
    height: 820px;
  }
  
  .popular .main-box .box img {
    height: 220px;
  }
  
  .popular .main-box .box {
    padding: 20px;
    width: 255px;
    display: flex;
    flex-direction: column;
    row-gap: 11px;
    background-image: linear-gradient(231deg, #e7eff1, #baffec);
    border-radius: 8px;
  }
  
  .popular .main-box .box .offer p {
    background-color: deeppink;
    color: white;
    width: fit-content;
    padding: 6px 16px;
    font-family: cursive;
    position: absolute;
    margin-top: 18px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  
  .popular .main-box .box .dis {
    display: flex;
    column-gap: 68px;
    margin-top: 10px;
  }
  
  .popular .main-box .box .clr {
    display: flex;
    column-gap: 10px;
  }
  
  .popular .main-box .box .clr .one {
    width: 15px;
    height: 15px;
    display: flex;
    background: rgb(3, 3, 3);
    border-radius: 50%;
  }
  
  .popular .main-box .box .clr .two {
    width: 15px;
    height: 15px;
    display: flex;
    background: rgb(214, 214, 52);
    border-radius: 50%;
  }
  
  .popular .main-box .box .clr .three {
    width: 15px;
    height: 15px;
    display: flex;
    background: rgb(110, 104, 8);
    border-radius: 50%;
  }
  
  .popular .main-box button {
    padding: 10px 20px;
    border: 1px solid black;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .foot-sec {
    height: 300px;
    background-color: whitesmoke;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
  }
  
  .foot-sec .main-txt-box {
    display: flex;
    column-gap: 20px;
    align-items: center;
    justify-content: center;
  }
  
  .foot-sec .main-txt-box .txt1 {
    /* background: red; */
    width: 300px;
    display: flex;
    flex-direction: column;
    row-gap: 9px;
    padding: 20px;
  }
  
  .foot-sec .main-txt-box .txt1 .social i {
    font-size: 20px;
  }
  
  .foot-sec .main-txt-box .txt2 {
    /* background: blue; */
    width: 220px;
    display: flex;
    flex-direction: column;
    row-gap: 9px;
    padding: 20px;
  }
  
  .foot-sec .main-txt-box .txt2 .item {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }
  
  .foot-sec .main-txt-box .txt2 .item a {
    text-decoration: none;
    color: darkgray;
  }
  
  .foot-sec .main-txt-box .txt3 {
    /* background: orange; */
    width: 220px;
    display: flex;
    flex-direction: column;
    row-gap: 9px;
    padding: 20px;
  }
  
  .foot-sec .main-txt-box .txt3 .item {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }
  
  .foot-sec .main-txt-box .txt3 .item a {
    text-decoration: none;
    color: darkgray;
  }
  
  .foot-sec .main-txt-box .txt4 {
    /* background: yellowgreen; */
    width: 300px;
    display: flex;
    flex-direction: column;
    row-gap: 9px;
    padding: 20px;
  }
  
  .foot-sec .main-txt-box .txt4 .sub input {
    width: 15vw;
    height: 3vw;
    padding-left: 20px;
  }
  
  .foot-sec .main-txt-box .txt4 p {
    color: darkgray;
  }
  
  .foot-sec .main-txt-box .txt4 .sub i {
    background: white;
    border: 1px solid;
    padding: 12px;
    cursor: pointer;
  }
  
  .copy{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
  }
  
  .copy .deve{
    color: blueviolet;
  }
    </style>
</head>

<body>
  <nav class="header-top">
    <div class="logo">
      <i class="fa-brands fa-facebook"></i>
      <i class="fa-brands fa-youtube"></i>
      <i class="fa-brands fa-twitter"></i>
      <i class="fa-brands fa-square-instagram"></i>
    </div>
    <div class="header-item">
      <p>Free Delivery On Order</p>
      <i class="fa-solid fa-arrow-right"></i>
    </div>
  </nav>
  <nav class="header">
    <div class="logo">
      <h1>DeveloperGTM</h1>
    </div>
    <div class="header-item">
      <a class="home-btn" href="/">Home</a>
      <a href="/">Product</a>
      <a href="/">Contact Us</a>
    </div>

<section class="home">
    <div class="main-sec">
      <div class="left">
        <div class="txt">
          <p>Airponds Collection</p>
          <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum quam, vel incidunt ipsum nesciunt.
          </h4>
          <button>Shop Now <i class="fa-solid fa-arrow-right"></i></button>
        </div>
      </div>
      <div class="right">
        <img decoding="async" width="550px" src="airponds-transformed.png" alt="">
      </div>
    </div>
    <div class="slide">
      <span class="one"><span class="two"></span></span>
      <span></span>
      <span></span>
    </div>
  </section>

<section class="product-box">
    <div class="main-box">
      <div class="box">
        <div class="txt">
          <h1>Best TV</h1>
          <p>Lorem ipsum dolor sit amet.</p>
          <button>Shop Now</button>
        </div>
        <img decoding="async" src="tv-transformed.png" alt="">
      </div>

<div class="box2">
        <div class="txt">
          <h1>Speakers</h1>
          <p>Lorem ipsum dolor sit amet.</p>
          <button>Shop Now</button>
        </div>
        <img decoding="async" class="head" src="headphones-transformed.png" alt="">
      </div>

<div class="box3">
        <div class="txt">
          <h1>Airpond</h1>
          <p>Lorem ipsum dolor sit amet.</p>
          <button>Shop Now</button>
        </div>
        <img decoding="async" class="air" src="airpods-pro-2nd-generation-8deGVY7-600-transformed.png" alt="">
      </div>
    </div>
  </section>

<section class="trending">
    <div class="txt">
      <h1>Trending item</h1>
    </div>
    <div class="main-box">
      <div class="box">
        <img decoding="async"
          src="https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8Y2FtZXJhfGVufDB8fDB8fHww"
          alt="">
        <p>Camera</p>
      </div>

<div class="box">
        <img decoding="async"
          src="https://images.unsplash.com/photo-1508614589041-895b88991e3e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fGRyb25lfGVufDB8fDB8fHww"
          alt="">
        <p>Drone</p>
      </div>

<div class="box">
        <img decoding="async"
          src="https://images.unsplash.com/photo-1583394838336-acd977736f90?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8aGVhZHBob25lc3xlbnwwfHwwfHx8MA%3D%3D"
          alt="">
        <p>Headphones</p>
      </div>

<div class="box">
        <img decoding="async"
          src="https://images.unsplash.com/photo-1545454675-3531b543be5d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8c3BlYWtlcnxlbnwwfHwwfHx8MA%3D%3D"
          alt="">
        <p>Speakers</p>
      </div>
    </div>
  </section>

<section class="popular">
    <div class="txt">
      <h1>Popular Now</h1>
    </div>
    <div class="main-box">
      <div class="box">
        <div class="offer">
          <p>10%</p>
        </div>
        <img decoding="async" width="250px"
          src="https://images.unsplash.com/photo-1567581935884-3349723552ca?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8bW9iaWxlfGVufDB8fDB8fHww"
          alt="">
        <div class="dis">
          <p>Lorem ipsum dolor.</p>
          <p>20,000</p>
        </div>
        <div class="clr">
          <span class="one"></span>
          <span class="two"></span>
          <span class="three"></span>
        </div>
      </div>

<div class="box">
        <div class="offer">
          <p>10%</p>
        </div>
        <img decoding="async" width="250px"
          src="https://images.unsplash.com/photo-1589003077984-894e133dabab?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fHNwZWFrZXJzfGVufDB8fDB8fHww"
          alt="">
        <div class="dis">
          <p>Lorem ipsum dolor.</p>
          <p>20,000</p>
        </div>
        <div class="clr">
          <span class="one"></span>
          <span class="two"></span>
          <span class="three"></span>
        </div>
      </div>

<div class="box">
        <div class="offer">
          <p>10%</p>
        </div>
        <img decoding="async" width="250px"
          src="https://images.unsplash.com/photo-1700825238268-a29fb711e4dc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8amJsJTIwaGVhZHBob25lc3xlbnwwfHwwfHx8MA%3D%3D"
          alt="">
        <div class="dis">
          <p>Lorem ipsum dolor.</p>
          <p>20,000</p>
        </div>
        <div class="clr">
          <span class="one"></span>
          <span class="two"></span>
          <span class="three"></span>
        </div>
      </div>

<div class="box">
        <div class="offer">
          <p>10%</p>
        </div>
        <img decoding="async" width="250px"
          src="https://images.unsplash.com/photo-1593704212686-6d52058fb516?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8Y2FtZXJhJTIwbGVuc3xlbnwwfHwwfHx8MA%3D%3D"
          alt="">
        <div class="dis">
          <p>Lorem ipsum dolor.</p>
          <p>20,000</p>
        </div>
        <div class="clr">
          <span class="one"></span>
          <span class="two"></span>
          <span class="three"></span>
        </div>
      </div>

<div class="box">
        <div class="offer">
          <p>10%</p>
        </div>
        <img decoding="async" width="250px"
          src="https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8YWlycG9kc3xlbnwwfHwwfHx8MA%3D%3D"
          alt="">
        <div class="dis">
          <p>Lorem ipsum dolor.</p>
          <p>20,000</p>
        </div>
        <div class="clr">
          <span class="one"></span>
          <span class="two"></span>
          <span class="three"></span>
        </div>
      </div>

<div class="box">
        <div class="offer">
          <p>10%</p>
        </div>
        <img decoding="async" width="250px"
          src="https://images.unsplash.com/photo-1578054041218-5ee0003926dd?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3BlYWtlcnxlbnwwfHwwfHx8MA%3D%3D"
          alt="">
        <div class="dis">
          <p>Lorem ipsum dolor.</p>
          <p>20,000</p>
        </div>
        <div class="clr">
          <span class="one"></span>
          <span class="two"></span>
          <span class="three"></span>
        </div>
      </div>

<div class="box">
        <div class="offer">
          <p>10%</p>
        </div>
        <img decoding="async" width="250px"
          src="https://plus.unsplash.com/premium_photo-1683141496040-eeef9702269f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8c3BlYWtlcnxlbnwwfHwwfHx8MA%3D%3D"
          alt="">
        <div class="dis">
          <p>Lorem ipsum dolor.</p>
          <p>20,000</p>
        </div>
        <div class="clr">
          <span class="one"></span>
          <span class="two"></span>
          <span class="three"></span>
        </div>
      </div>

<div class="box">
        <div class="offer">
          <p>10%</p>
        </div>
        <img decoding="async" width="250px"
          src="https://images.unsplash.com/photo-1706886271924-d15eb005091d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8Y2FtZXJhJTIwY29sbGVjdGlvbnxlbnwwfHwwfHx8MA%3D%3D"
          alt="">
        <div class="dis">
          <p>Lorem ipsum dolor.</p>
          <p>20,000</p>
        </div>
        <div class="clr">
          <span class="one"></span>
          <span class="two"></span>
          <span class="three"></span>
        </div>
      </div>

<section class="foot-sec">
    <div class="main-txt-box">
      <div class="txt1">
        <h1>About Us</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam repellat mollitia possimus necessitatibus vero temporibus, ullam architecto quo. Tempora, ducimus.</p>
        <div class="social">
          <i class="fa-brands fa-facebook"></i>
          <i class="fa-brands fa-youtube"></i>
          <i class="fa-brands fa-twitter"></i>
          <i class="fa-brands fa-square-instagram"></i>
        </div>
      </div>

<div class="txt2">
        <h1>Quick Link</h1>
        <div class="item">
          <a href="/">FAQs</a>
          <a href="/">Find a Store location</a>
          <a href="/">Privacy Policy</a>
          <a href="/">Refund Policy</a>
        </div>
      </div>

<div class="txt3">
        <h1>Quick Link</h1>
        <div class="item">
          <a href="/">FAQs</a>
          <a href="/">Find a Store location</a>
          <a href="/">Privacy Policy</a>
          <a href="/">Refund Policy</a>
        </div>
      </div>

<div class="txt4">
        <h1>Subscribe</h1>
        <p>Lorem ipsum dolor sit, amet.</p>
        <div class="sub">
          <input type="text" placeholder="Enter your email..">
          <i class="fa-solid fa-arrow-right"></i>
        </div>
      </div>
    </div>

</body>

</html>

Related Examples

Login Form
Login Form With google icon

Author:
Md. Tofayel islam

4 months ago

999
Landing page

Author:
Freja Jensen

2 years ago

12.6k
Landing page template
Template de landing page com vídeo

Author:
viva afro

2 months ago

196
Single Page Portfolio

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

5 months ago

1.6k
Home
html , css

Author:
Hacker Development

1 month ago

44
Hero Section
Home hero section search bar

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

6.6k
Animated Coming Soon Page 1
animated coming soon landing page

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

3.6k
Hero Beer

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

3.9k
A Fullscreen Hero Section

Author:
Hasan AlDoy (McDoy)

4 months ago

777
Animated Coming Soon Page 1
animated coming soon landing page

Author:
Repal co

3 months ago

339
Animated Coming Soon Page 2
Animated Coming soon Page

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

2.8k
My Personal Landing page
This HTML document showcases Aydin Vesali Moghaddam's personal portfolio, highlighting his journey in web development. The page features a responsive design that adapts to various screen sizes, ensuring a seamless user experience across devices. It includes a personal introduction, a brief overview of Aydin's tech journey, and a contact form for visitors to subscribe to updates. Additionally, the page provides links to Aydin's Discord, website, and Twitter, offering multiple avenues for connecting and staying updated on his projects.

Author:
AyDin VM

1 year ago

5.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components