produto

Abrir no Editor Publique Seu Código

Recomendado

27 November 2024

Modelo de site de produto HTML

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./style.css" />
    <title>product</title>
  </head>
  <body>
    <nav>
      <div class="logo" style="display: flex; align-items: center">
        <h1>Product</h1>
      </div>
   
      <ul class="nav-links">
        <li><a href="">product</a></li>
        <li><a href="">Customers</a></li>
        <li><a href="">pricing</a></li>
        <li><a href="">Resources</a></li>
        <li><a href="">Sign in</a></li>

<hgroup class="hero">
          <div class="container1">
            <div class="hero-content">
              <div class="hero-text">
                
                <h1>Work at the speed of thought</h1>
                <p>
                    Tools, tutorials, design and innovation experts, all in one place! The most intuitive way to imagine your next user experience.
                </p>
                <div>
                  <a href="#" class="btn">Get started</a>
                  <a href="#" class="btn btn-outline" style="margin-left: 15px"
                    >►Watch the Video</a
                  >
                </div>
              </div>
              <div class="hero-image">
               <img src="./d83917ef-78e9-4130-8dee-d5b74dd78970.jpg" alt="">
              </div>
            </div>
          </div>
        </hgroup>
        <h1 class="help">Product was Built Specifically <br> for You</h1><br><br>

<div class="container">
          <div class="card">
            <h3>First click tests</h3><br>
         <p>While most people enjoy <br>casino gambling</p>
          </div>
          <div class="card">
            <h3>Design surveys</h3>
        <p>Sports betting, lottery and <br> bingo playing for the fun</p>
          </div>
          <div class="card">
            <h3>Preference tests</h3>
         <p>The Myspace page defines <br> the individual</p>
          </div>
          <div class="card">
           <h3>Five second tests
          </h3>
         <p>Personal choices and the <br> overall personality of the <br> person.</p>
          </div>
        </div>
              
              </div>
            </div>
          </div>
        </header>

<section  class="purchase">
          <div class="container">
            <a href="#" class="btn">SIGN UP NOW</a>
          </div>
        </div>
            </div>
          </div>
        </section>
        <section class="hero">
            <div class="container1">
              <div class="hero-content">
                <div class="hero-text">
                  <h3>Effortless Validation for</h3>
                  <h1>Management</h1>
                  <p>
                    The Myspace page defines the individual, his or her characteristics, traits, personal choices and the overall personality of the person.
                  </p>
                <h4>Accessory makers</h4>
                <p>While most people enjoy casino gambling, sports betting, lottery and bingo playing for the fun</p>
                <h4>Alterationists</h4>
                <p>If you are looking for a new way to promote your business that won't cost you more money,</p>
                </div>
                <div class="hero-image">
                 <img src="./bdabec61-9249-4141-a948-50c356cbffee.jpg" alt="">
                </div>
              </div>
            </div>
          </section>
          <section class="hero">
            <div class="container1">
                <div class="hero-content">
                  <div class="hero-image">
                   <img src="./3bdba051-5c9f-4ff0-bd00-d8338869acf8 1.jpg" alt="">
                  </div>
                <div class="hero-text">
                    <h3>Easier decision making for</h3>
                    <h1>Customer Support</h1>
                    <p>
                        The Myspace page defines the individual, his or her characteristics, traits, personal choices and the overall personality of the person.
                    </p>
                    <h3>Never worry about overpaying for your energy again.</h3><br>
                <h3>We will only switch you to energy companies that we trust and will treat you right
                </h3><br>
                <h3>We track the markets daily and know where the savings are.</h3>
                 </div>
              </div>
            </div>
          </section>
          <section class="hero">
            <div class="container1">
              <div class="hero-content">
                <div class="hero-text">
                  <h3>Optimisation for</h3>
                  <h1>Collaborative</h1>
                  <p>
                    Few would argue that, despite the advancements of feminism over the past three decades, women still face a double standard when it comes to their behavior.
                  </p>
                <h3>Accessory makers</h3>
                <p>While most people enjoy casino gambling, sports betting, lottery and bingo playing for the fun</p>
                <h4>Alterationists</h4>
                <p>If you are looking for a new way to promote your business that won't cost you more money,</p>
                </div>
                <div class="hero-image">
                 <img src="./7b7bfe11-c22c-4c1d-80e3-d6d6e7c7cfb6.jpg" alt="">
                </div>
              </div>
            </div>
            <section class="product">
              <h1>Contents Strategies</h1>
              <p>
                We focus on erconomics and meeting you where you work . it's a keystroke
                away.
              </p>
              <div class="card1">
                <div class="product-item">
                  <img
                    src="./27e2f067-cf12-412b-bd9f-d1fe2084f3db.jpg"
                    alt="Classic Burger"
                  />
                  <p>By <b>Wahid Ari</b> / 03 March 2019</p>
                  <h2>
                    Increasing Prosperity <br />
                    With Positive thinking
                  </h2>
                  
                </div>
                <div class="product-item">
                  <img
                    src="./58cd3f51-6a88-4b96-a372-b950903adb99.jpg"
                    alt="Cheese Burger"
                  />
                  <p>By <b>Wahid Ari</b> | 03 March 2019</p>
                  <h2>
                    Motivation Is The First <br />
                    Step To Success
                  </h2>
                  
                </div>
                <div class="product-item">
                  <img
                    src="./4948214e-8bad-47f0-9478-405a697d0ca3.jpg"
                    alt="Veggie Burger"
                  />
                  <p>By <b> Wahid Ari</b> | 03 March 2019</p>
                  <h2>Success Steps For Your Personal Or Business</h2>
                  
                </div>
              </div>
            </section>
            <h1 class="help">Price Table</h1>
            <h4 class="help">We offer competitife price</h4><br>
            <div class="container">
              <div class="card">
                <h1>free</h1>
                <h5>Brief price description</h5>
                <h1>0</h1>
                <h5>Only 2 Operators</h5>
                <h5>Notifications</h5>
                <h5>Landing Pages</h5>
                <a href="#"><button class="bord">Order Now</button></a>
                
              </div>
              <div class="card">
                <h1>Standard</h1>
                <h5>Brief price description</h5>
                <h1>5</h1>
                <h5>5+vOperators</h5>
                <h5>Notifications</h5>
                <h5>Landing Pages</h5>
                <a href="#"><button class="bord">Order Now</button></a>
              </div>
              <div class="card">
                <h1>Premium</h1>
                <h5>Brief price description</h5>
                <h1>10</h1>
                <h5>10+ Operators</h5>
                <h5>Notifications</h5>
                <h5>Landing Pages</h5>
                <a href="#"><button class="bord">Order Now</button></a>
              </div>
            </div><br><br><br><br><br><br><br>
            <h1 class="help">What Clients Say</h1>
            <p class="help">Problems trying to resolve the conflict between <br> the two major realms of Classical physics: Newtonian mechanics</p>
            <br><br>
            <div class="container">
              <div class="card">
                ⭐⭐⭐⭐⭐
             <p>Product helps you see how many <br> more days you need to work to <br>reach your financial goal.</p>
              </div>
              <div class="card">
                ⭐⭐⭐⭐⭐
            <p>Product helps you see how many <br> more days you need to work to <br>reach your financial goal.</p>
              </div>
              <div class="card">
                ⭐⭐⭐⭐⭐
             <p>Product helps you see how many <br> more days you need to work to <br>reach your financial goal.</p>
            </div>
            
          </div>
          <div class="wrapporr">
            <div class="card5">
              <div class="card-text">
                
                <h3>
                    Join 100 Compannies who <br> boost their business with <br> Product
                </h3>
                <br>
                <button class="buton">Get this</button>
              </div>
              <div
                class="card7-image"
                
                
                style="background-image: url('./e8875e2d-fb1a-4c09-a733-8286a1114bd7.jpg')"
                
              
                ></div>
              </div>
            </div>
          </div>
        <header class="header-class">
          <ul>
            <li><a href="#" data-text="Home">Resource</a></li>
    
            <li><a href="#" data-text="About">About Us</a></li>
    
            <li><a href="#" data-text="Portfolio">Blog</a></li>
    
            <li><a href="#" data-text="Team">Contact</a></li>
    
            <li><a href="#" data-text="Contact">FAQ</a></li>
          </ul>
          <ul>
            <li><a href="#" data-text="Home">Legal Stuff</a></li>
    
            <li><a href="#" data-text="About">Disclaimer</a></li>
    
            <li><a href="#" data-text="Portfolio">Financing</a></li>
    
            <li><a href="#" data-text="Team">Prifacy Policy</a></li>
    
            <li><a href="#" data-text="Contact">Terms of Service</a></li>
          </ul>
          <ul>
            <h3>
              Knowing you're always on <br />
              the best energy deal.
            </h3>
            <br />
            <input class="trust" type="text" /><br />
            <br />
            <button class="button-1">Sign up Now</button>
          </ul>
        </header>

</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  color: hsl(180, 5%, 4%);
  font-family: sans-serif;
  letter-spacing: 1px;
  font-weight: 300;
}
body {
  overflow-x: hidden;
}
nav {
  height: 4.5rem;
  width: 100vw;
  background-color: hsl(228, 26%, 96%);
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  position: fixed;
  z-index: 10;
  gap: 200px;
}

.nav-links {
  display: flex;
  list-style: none;
  width: 88vw;
  padding: 0 0.7vw;
  justify-content: space-evenly;
  align-items: center;
  text-transform: uppercase;
}
.nav-links li a {
  text-decoration: none;
  margin: 0 0.7vw;
}
.nav-links li a:hover {
  color: #61dafb;
}

.login-button1 {
  background-color: transparent;
  border: 1px solid hsl(180, 4%, 5%);
  border-radius: 2em;
  padding: 0.6rem 0.8rem;
  margin-left: 2vw;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 3px;
}

.login-button {
  background-color: green;
  border: 1px solid hsl(180, 4%, 5%);
  border-radius: 2em;
  padding: 0.6rem 0.8rem;
  margin-left: 2vw;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 3px;
}

.join-button {
  color: #131418;
  background-color: #0f0f0f;
  border: 1.5px solid #61dafb;
  /* border-radius: 2em; */
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
  cursor: pointer;
}

@media screen and (max-width: 800px) {
  nav {
    position: fixed;
    z-index: 3;
  }

.nav-links {
    position: fixed;
    background: #131418;
    height: 100vh;
    width: 100%;
    flex-direction: column;
    clip-path: circle(50px at 90% -20%);
    -webkit-clip-path: circle(50px at 90% -10%);
    transition: all 1s ease-out;
    pointer-events: none;
    color: black;
  }

.nav-links li {
    opacity: 0;
  }
  .nav-links li:nth-child(1) {
    transition: all 0.5s ease 0.2s;
  }
  .nav-links li:nth-child(2) {
    transition: all 0.5s ease 0.4s;
  }
  .nav-links li:nth-child(3) {
    transition: all 0.5s ease 0.6s;
  }
  .nav-links li:nth-child(4) {
    transition: all 0.5s ease 0.7s;
  }
  .nav-links li:nth-child(5) {
    transition: all 0.5s ease 0.8s;
  }
  .nav-links li:nth-child(6) {
    transition: all 0.5s ease 0.9s;
    margin: 0;
  }
  .nav-links li:nth-child(7) {
    transition: all 0.5s ease 1s;
    margin: 0;
  }
  li.fade {
    opacity: 1;
  }
}
/*Animating Hamburger Icon on Click*/
.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
  transition: all 0.7s ease;
  width: 0;
}
.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}
.help {
  display: flex;
  justify-content: center;
  align-items: center;
}
body {
  font-family: "Roboto", sans-serif;
  line-height: 1.6;
  color: #333;
  overflow-x: hidden;
}
.container1 {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.hero {
  background: linear-gradient(135deg, #e7f0fd, #ffffff);
  padding: 120px 0 60px;
  overflow: hidden;
}
.hero-content {
  display: flex;
  align-items: center;
  gap: 60px;
}
.hero-text {
  flex: 1;
}
.hero-image {
  flex: 1;
  text-align: center;
}
.hero-image img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
  transition: transform 0.5s ease;
}

.badge {
  display: inline-block;
  background-color: #1428a0;
  color: #fff;
  padding: 5px 15px;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 20px;
}
h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  line-height: 1.2;
}
.hero p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  color: #666;
}
.btn {
  display: inline-block;
  background-color: green;
  color: #fff;
  padding: 12px 30px;
  text-decoration: none;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
}

.purchase {
  background-color: #f8f9fa;
  padding: 100px 0;
}
.product {
  padding: 50px 20px;
  text-align: center;
}

.card1 {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.product-item {
  max-width: 300px;
  text-align: center;
}

.product-item img {
  width: 100%;
  border-radius: 10px;
}
.imagine {
  height: 100px;
  width: 100px;
}

.container {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 100vh; */
  /* margin: 0; */
  gap: 10px;
}
.card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 300px;
  padding: 20px;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.card h1 {
  font-size: 20px;
  margin: 0;
  color: #333;
}
.card p {
  font-size: 14px;
  color: #666;
  margin: 10px 0;
}
.card button {
  padding: 10px 20px;
  background-color: hsl(126, 100%, 50%);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}
.wrapporr {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
}

.card5 {
  display: flex;
  align-items: center;
  background: rgb(0, 128, 0);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  width: 35%;
  height: 20%;
}

.card-text {
  padding: 20px;
  flex: 1;
}

.card-text h1 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.card-text h3 {
  margin: 10px 0 0;
  color: hsl(0, 50%, 98%);
}

.card7-image {
  margin: 30px;
  width: 150px;
  height: 150px;
  background-size: cover;
  background-position: center;
}
.buton {
  border-radius: 7px;
  height: 30px;
  width: 80px;
  color: green;
}
* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}
.header-class {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: hsl(0, 12%, 97%);
  overflow: hidden;
  gap: 200px;
}

ul li a {
  position: relative;
  display: block;
  color: black;
  text-decoration: none;
}
.button-1 {
  border-radius: 4px;
  height: 30px;
  width: 100px;
  background-color: green;
  color: white;
}
.trust {
  height: 30px;
  width: 300px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

produto

Recomendado

Produtos de Cartões

produto2

Modelo de site de produto HTML

HTML

CSS

JS

Recomendado

Produtos de Cartões

produto2

Modelo de site de produto HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS