Modelo de site de produto HTML

Abrir no Editor Publique Seu Código

Recomendado

14 May 2024

29 May 2025

<header class="bg-image">
  <div class="container text--center">
    <h1>Awesome Product</h1>
    <h2>The product that takes your experience to the next level.</h2>
    <a href="#" class="btn btn-transparent">Get Yours Now!</a>
  </div>
</header>

<section class="product-overview">
  <div class="container">
    <div class="col-3 text--center">
      <img src="http://store.storeimages.cdn-apple.com/4044/as-images.apple.com/is/image/AppleInc/aos/published/images/H/D1/HD162/HD162?wid=800&hei=800&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1400749861094" alt="Product image" class="details-img--ball"/>
    </div>
    <div class="col-7 details">
      <h3>The Product You’ve Been Waiting For</h3>
      <p>Discover the ultimate in quality and innovation. Built to enhance every aspect of your daily life, this product redefines what’s possible. From premium materials to state-of-the-art technology, it offers an experience like no other.</p>
    </div>
  </div>
</section>

<section class="section--primary">
  <div class="container features-container">
    <div class="col-3 features text--center">
      <i class="fa fa-bolt"></i>
      <p>Boost your lifestyle with unparalleled efficiency and performance.</p>
    </div>
    <div class="col-3 features text--center">
      <i class="fa fa-bank"></i>
      <p>Exceptional value meets high quality - grab yours now for a limited-time deal!</p>
    </div>
    <div class="col-3 features text--center">
      <i class="fa fa-heart"></i>
      <p>Need a companion? This product is designed to be your perfect match.</p>
    </div>
  </div>
</section>

<section class="section--primary--alt">
  <div class="container text--center">
    <h3>Take It Anywhere, Anytime</h3>
    <p>Whether at home or on the go, this product is ready to accompany you. Its sleek design and durability make it an essential for any lifestyle.</p>
  </div>
</section>

<section class="section--primary--light">
  <div class="container text--center">
    <blockquote class="testimonial">
      <p>“I can't imagine life without it! The best purchase I've made in years.”</p>
      <cite>– Satisfied Customer</cite>
    </blockquote>
  </div>
</section>

<section class="section--primary--alt bg-image bg-image-2">
  <div class="container text--center">
    <h3>Why Choose This Product?</h3>
    <div class="col-5 text--left">
      <ul>
        <li>Top-rated by users</li>
        <li>Exceptional quality and value</li>
        <li>Guaranteed satisfaction</li>
        <li>Supports eco-friendly practices</li>
        <li>Great for all ages</li>
      </ul>
    </div>
    <div class="col-5 text--left">
      <ul>
        <li>Enhances productivity</li>
        <li>Made with premium materials</li>
        <li>Stylish and durable</li>
        <li>Easy to use</li>
        <li>Backed by customer support</li>
      </ul>
    </div>
  </div>
</section>

<section class="call-to-action text--center">
  <div class="container">
    <h3>Ready to experience the difference?</h3>
    <a href="#" class="btn">Order Now!</a>
  </div>
</section>

<footer>
  <div class="container">
    <ul class="footer-links">
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Home</a></li>
    </ul>
    <p>© 2024 Awesome Company. All rights reserved.</p>
  </div>
</footer>

CSS

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,700,800,300);
* {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 100%;
  line-height: 1.45;
  color: #1a1a1a;
}

a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}

img {
  max-width: 100%;
}

.btn {
  display: inline-block;
  margin: 1rem 0;
  color: #fff;
  font-weight: 500;
  font-size: 1.3rem;
  background: #f76c6c;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 5px;
  padding: 0.8rem 1rem 0.9rem;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
@media (max-width: 43.75em) {
  .btn {
    padding: 0.5rem 0.7rem 0.6rem;
    font-size: 1rem;
  }
}
.btn:hover {
  background: #f88c8c;
  color: #fff;
}
.btn:focus, .btn:active, .btn:focus:active {
  background: #e65050;
  border-color: #e65050;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5) inset;
}

.container {
  margin: 0 auto;
  width: 90%;
  max-width: 900px;
}

header {
  color: white;
  background: #f76c6c;
  padding: 10rem 0;
  text-align: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
@media (max-width: 43.75em) {
  header {
    padding: 2rem 0;
  }
}
header h1 {
  font-size: 3rem;
  margin: 0 0 1rem;
}
@media (max-width: 43.75em) {
  header h1 {
    font-size: 2rem;
  }
}
header h2 {
  font-weight: 300;
  font-size: 1.5rem;
  margin: 0 0 1rem;
}
@media (max-width: 43.75em) {
  header h2 {
    font-size: 1.5rem;
  }
}

section {
  background: #fff;
  color: #333;
  padding: 3.5rem 0;
}
@media (max-width: 43.75em) {
  section {
    padding: 2rem 0;
  }
}
section.section--primary {
  background: #f76c6c;
  color: #fff;
}
section.section--primary--alt {
  background: #ff9a8b;
  color: #fff;
}
section.section--primary--light {
  background: rgba(247, 108, 108, 0.1);
}
section.section--grey {
  background: #444;
  color: #fff;
}
section.section--grey--light {
  background: #5c5c5c;
  color: #fff;
}
section h3 {
  text-align: center;
  font-size: 2rem;
  font-weight: 300;
  margin: 0 0 1rem;
}
@media (max-width: 43.75em) {
  section h3 {
    font-size: 1.5rem;
  }
}
section li {
  font-size: 1.2rem;
  font-weight: 300;
}
section p {
  font-size: 1.2rem;
  font-weight: 300;
}

.col, .col-5, .col-3, .col-7 {
  margin: 0 1.5%;
  display: inline-block;
  vertical-align: top;
}

.col-7 {
  width: 64%;
}
@media (max-width: 43.75em) {
  .col-7 {
    width: 100%;
    margin: 0;
  }
}

.col-3 {
  width: 29%;
}
@media (max-width: 43.75em) {
  .col-3 {
    width: 100%;
    margin: 0;
  }
}

.col-5 {
  width: 30%;
}
@media (max-width: 34.375em) {
  .col-5 {
    width: 60%;
    margin: 0;
  }
}

.details {
  text-align: left;
}
.details h3 {
  font-size: 2rem;
  text-align: left;
}

@media (max-width: 43.75em) {
  .details-img--ball {
    height: 200px;
    width: auto;
    margin: 0 auto;
  }
}

.features {
  text-align: center;
  padding: 1rem;
}
.features:hover {
  background: rgba(255, 255, 255, 0.1);
}
@media (max-width: 43.75em) {
  .features {
    width: 100%;
    margin: 0;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  .features:last-child {
    border: none;
  }
}
.features i {
  font-size: 4rem;
  margin: 0 0 2rem 0;
}
@media (max-width: 43.75em) {
  .features i {
    font-size: 1.5rem;
    width: 2rem;
    text-align: center;
    margin: 0 0 1rem 0;
    float: left;
  }
}
.features p {
  margin: 0 0 1rem 0;
  font-size: 1rem;
}
@media (max-width: 43.75em) {
  .features p {
    margin-left: 3rem;
  }
}

blockquote {
  position: relative;
  margin: 0;
  padding: 0;
  text-align: center;
}
blockquote:before {
  display: inline-block;
  color: #f76c6c;
  font-size: 2rem;
  content: "“";
}
blockquote p {
  margin: 0;
  display: inline;
  font-size: 1.5rem;
}
@media (max-width: 43.75em) {
  blockquote p {
    font-size: 1.2rem;
  }
}
blockquote cite {
  font-size: 1rem;
  display: block;
  margin: 0.5rem 0 0 1.2rem;
  text-style: italic;
}
@media (max-width: 43.75em) {
  blockquote cite {
    font-size: 0.8rem;
  }
}
blockquote cite:before {
  content: "–";
}

footer {
  background: #3b3b3b;
  color: #fff;
  padding: 2rem 0;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}
footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
footer ul li {
  display: inline-block;
}
footer ul li a {
  display: block;
  padding: 0.4rem 0.7rem;
  font-size: 0.9rem;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
}
footer ul li a:hover {
  color: white;
}

.text--center {
  text-align: center;
}

.text--left {
  text-align: left;
}

.bg-image {
  background: #f76c6c;
  text-align: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.bg-image:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: #333 url("http://orbotix.wpengine.netdna-cdn.com/wp-content/uploads/2013/07/Faster-4H5B55491.jpg") no-repeat top center;
  background-size: cover;
  background-attachment: fixed;
  filter: blur(5px);
  opacity: 0.8;
  transform: scale(1.1);
}
.bg-image.bg-image-2:before {
  opacity: 0.6;
  background-image: url("http://orbotix.wpengine.netdna-cdn.com/wp-content/uploads/2013/07/Kids3.jpg");
  background-position: center center;
}

Modelo de site de produto HTML

Recomendado

curiosidades (modelo)

Um site de jornal responsivo

HTML

CSS

JS

Recomendado

curiosidades (modelo)

Um site de jornal responsivo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS