HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
374x301
156 KB
Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script

Open in browser
<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BLACK STYLE BARBERSHOP | Barbearia em Luanda</title>
  <meta name="description" content="BLACK STYLE BARBERSHOP — cortes modernos, barba e tratamento capilar em Luanda. Agende o seu horário pelo WhatsApp.">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      scroll-behavior: smooth;
    }
    body {
      font-family: Arial, Helvetica, sans-serif;
      background: #080808;
      color: #fff;
      line-height: 1.6;
    }
    a {
      text-decoration: none;
      color: inherit;
    }
    .container {
      width: 90%;
      max-width: 1150px;
      margin: auto;
    }
    /* ================= HEADER ================= */
    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      background: rgba(0, 0, 0, 0.92);
      border-bottom: 1px solid #222;
      backdrop-filter: blur(10px);
    }
    .nav {
      min-height: 75px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .logo {
      font-size: 21px;
      font-weight: 900;
      letter-spacing: 2px;
    }
    .logo span {
      color: #d4af37;
    }
    nav {
      display: flex;
      gap: 25px;
    }
    nav a {
      color: #ddd;
      font-size: 14px;
      transition: 0.3s;
    }
    nav a:hover {
      color: #d4af37;
    }
    .menu-btn {
      display: none;
      font-size: 27px;
      cursor: pointer;
    }
    /* ================= HERO ================= */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      background:
        linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.82)),
        url("https://images.unsplash.com/photo-1503951914875-452162b0f3f1?auto=format&fit=crop&w=1800&q=85")
        center/cover no-repeat;
      padding-top: 75px;
    }
    .hero-content {
      max-width: 700px;
    }
    .tag {
      color: #d4af37;
      font-weight: bold;
      letter-spacing: 3px;
      font-size: 13px;
      margin-bottom: 15px;
    }
    .hero h1 {
      font-size: clamp(45px, 8vw, 82px);
      line-height: 0.98;
      margin-bottom: 25px;
      text-transform: uppercase;
    }
    .hero h1 span {
      color: #d4af37;
    }
    .hero p {
      max-width: 570px;
      color: #ddd;
      font-size: 18px;
      margin-bottom: 35px;
    }
    .buttons {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
    }
    .btn {
      display: inline-block;
      padding: 15px 25px;
      border-radius: 5px;
      font-weight: bold;
      transition: .3s;
    }
    .btn-primary {
      background: #d4af37;
      color: #080808;
    }
    .btn-primary:hover {
      transform: translateY(-3px);
      background: #f0cf59;
    }
    .btn-outline {
      border: 1px solid #777;
      color: #fff;
    }
    .btn-outline:hover {
      border-color: #d4af37;
      color: #d4af37;
    }
    /* ================= SECTIONS ================= */
    section {
      padding: 95px 0;
    }
    .section-title {
      text-align: center;
      margin-bottom: 55px;
    }
    .section-title small {
      color: #d4af37;
      letter-spacing: 3px;
      font-weight: bold;
    }
    .section-title h2 {
      font-size: 42px;
      margin-top: 10px;
    }
    .section-title p {
      color: #aaa;
      max-width: 600px;
      margin: 12px auto 0;
    }
    /* ================= ABOUT ================= */
    .about {
      background: #101010;
    }
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 55px;
      align-items: center;
    }
    .about-image {
      min-height: 450px;
      background:
        url("https://images.unsplash.com/photo-1621605815971-fbc98d665033?auto=format&fit=crop&w=1000&q=85")
        center/cover;
      border-radius: 8px;
    }
    .about-text h3 {
      font-size: 32px;
      margin-bottom: 20px;
    }
    .about-text p {
      color: #bbb;
      margin-bottom: 18px;
    }
    .features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 30px;
    }
    .feature {
      border-left: 2px solid #d4af37;
      padding-left: 15px;
    }
    .feature strong {
      display: block;
      color: #fff;
    }
    .feature span {
      color: #999;
      font-size: 14px;
    }
    /* ================= SERVICES ================= */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .service {
      background: #121212;
      border: 1px solid #242424;
      padding: 30px 20px;
      border-radius: 8px;
      transition: .3s;
    }
    .service:hover {
      transform: translateY(-7px);
      border-color: #d4af37;
    }
    .service-icon {
      font-size: 35px;
      margin-bottom: 18px;
    }
    .service h3 {
      margin-bottom: 10px;
    }
    .service p {
      color: #999;
      font-size: 14px;
      margin-bottom: 20px;
    }
    .price {
      color: #d4af37;
      font-weight: bold;
      font-size: 18px;
    }
    /* ================= GALLERY ================= */
    .gallery {
      background: #101010;
    }
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
    }
    .gallery-item {
      height: 300px;
      overflow: hidden;
      border-radius: 7px;
    }
    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: .5s;
    }
    .gallery-item:hover img {
      transform: scale(1.08);
    }
    /* ================= REVIEWS ================= */
    .reviews-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .review {
      background: #121212;
      border: 1px solid #242424;
      padding: 30px;
      border-radius: 8px;
    }
    .stars {
      color: #d4af37;
      margin-bottom: 15px;
    }
    .review p {
      color: #bbb;
      font-style: italic;
      margin-bottom: 20px;
    }
    .review strong {
      font-size: 14px;
    }
    /* ================= CTA ================= */
    .cta {
      background:
        linear-gradient(rgba(0,0,0,.78), rgba(0,0,0,.85)),
        url("https://images.unsplash.com/photo-1622286342621-4bd786c2447c?auto=format&fit=crop&w=1800&q=85")
        center/cover fixed;
      text-align: center;
    }
    .cta h2 {
      font-size: clamp(35px, 6vw, 60px);
      margin-bottom: 15px;
    }
    .cta p {
      color: #ccc;
      margin-bottom: 30px;
    }
    /* ================= CONTACT ================= */
    .contact {
      background: #101010;
    }
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
    }
    .contact-box {
      background: #151515;
      padding: 30px;
      border-radius: 8px;
      border: 1px solid #242424;
    }
    .contact-item {
      margin-bottom: 25px;
    }
    .contact-item small {
      color: #d4af37;
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    .contact-item span {
      color: #ccc;
    }
    .map {
      min-height: 330px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #242424;
    }
    .map iframe {
      width: 100%;
      height: 100%;
      min-height: 330px;
      border: 0;
    }
    /* ================= FOOTER ================= */
    footer {
      background: #050505;
      border-top: 1px solid #222;
      padding: 35px 0;
      text-align: center;
    }
    footer p {
      color: #777;
      font-size: 13px;
    }
    footer strong {
      color: #d4af37;
    }
    /* ================= WHATSAPP ================= */
    .whatsapp {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #25D366;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      z-index: 2000;
      box-shadow: 0 5px 20px rgba(0,0,0,.4);
      transition: .3s;
    }
    .whatsapp:hover {
      transform: scale(1.1);
    }
    /* ================= MOBILE ================= */
    @media (max-width: 850px) {
      nav {
        display: none;
        position: absolute;
        top: 75px;
        left: 0;
        width: 100%;
        background: #080808;
        flex-direction: column;
        padding: 25px;
        border-bottom: 1px solid #222;
      }
      nav.active {
        display: flex;
      }
      .menu-btn {
        display: block;
      }
      .about-grid,
      .contact-grid {
        grid-template-columns: 1fr;
      }
      .services-grid {
        grid-template-columns: 1fr 1fr;
      }
      .reviews-grid {
        grid-template-columns: 1fr;
      }
      .gallery-grid {
        grid-template-columns: 1fr 1fr;
      }
    }
    @media (max-width: 550px) {
      .hero h1 {
        font-size: 48px;
      }
      .hero p {
        font-size: 16px;
      }
      section {
        padding: 70px 0;
      }
      .section-title h2 {
        font-size: 34px;
      }
      .services-grid,
      .gallery-grid {
        grid-template-columns: 1fr;
      }
      .features {
        grid-template-columns: 1fr;
      }
      .about-image {
        min-height: 330px;
      }
      .buttons {
        flex-direction: column;
      }
      .btn {
        text-align: center;
      }
    }
  </style>
</head>
<body>
  <!-- ================= HEADER ================= -->
  <header>
    <div class="container nav">
      <a href="#inicio" class="logo">
        BLACK <span>STYLE</span>
      </a>
      <div class="menu-btn" onclick="toggleMenu()">☰</div>
      <nav id="menu">
        <a href="#inicio">Início</a>
        <a href="#sobre">Sobre</a>
        <a href="#servicos">Serviços</a>
        <a href="#galeria">Galeria</a>
        <a href="#avaliacoes">Avaliações</a>
        <a href="#contacto">Contacto</a>
      </nav>
    </div>
  </header>
  <!-- ================= HERO ================= -->
  <section class="hero" id="inicio">
    <div class="container">
      <div class="hero-content">
        <div class="tag">
          BARBEARIA PREMIUM • LUANDA
        </div>
        <h1>
          O seu estilo.<br>
          A nossa <span>arte.</span>
        </h1>
        <p>
          Cortes modernos, barba impecável e atendimento premium.
          Na BLACK STYLE BARBERSHOP, cada detalhe foi pensado para
          deixar você no seu melhor.
        </p>
        <div class="buttons">
          <a
            class="btn btn-primary"
            href="https://wa.me/244900000000?text=Olá%20BLACK%20STYLE!%20Gostaria%20de%20agendar%20um%20horário."
            target="_blank">
            📱 Agendar pelo WhatsApp
          </a>
          <a class="btn btn-outline" href="#servicos">
            Ver serviços
          </a>
        </div>
      </div>
    </div>
  </section>
  <!-- ================= ABOUT ================= -->
  <section class="about" id="sobre">
    <div class="container">
      <div class="about-grid">
        <div class="about-image"></div>
        <div class="about-text">
          <div class="tag">SOBRE NÓS</div>
          <h3>
            Mais do que um corte.<br>
            Uma experiência.
          </h3>
          <p>
            A BLACK STYLE BARBERSHOP nasceu para homens que valorizam
            estilo, confiança e qualidade.
          </p>
          <p>
            Trabalhamos com técnicas modernas e atenção aos detalhes
            para criar um visual que combina com cada cliente.
          </p>
          <div class="features">
            <div class="feature">
              <strong>Profissionais</strong>
              <span>Barbeiros experientes</span>
            </div>
            <div class="feature">
              <strong>Qualidade</strong>
              <span>Produtos selecionados</span>
            </div>
            <div class="feature">
              <strong>Ambiente</strong>
              <span>Confortável e moderno</span>
            </div>
            <div class="feature">
              <strong>Atendimento</strong>
              <span>Foco em cada cliente</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- ================= SERVICES ================= -->
  <section id="servicos">
    <div class="container">
      <div class="section-title">
        <small>NOSSOS SERVIÇOS</small>
        <h2>Escolha o seu estilo</h2>
        <p>
          Serviços profissionais para deixar o seu visual sempre impecável.
        </p>
      </div>
      <div class="services-grid">
        <div class="service">
          <div class="service-icon">✂️</div>
          <h3>Corte Masculino</h3>
          <p>
            Cortes clássicos e modernos personalizados para o seu estilo.
          </p>
          <div class="price">5.000 Kz</div>
        </div>
        <div class="service">
          <div class="service-icon">🧔</div>
          <h3>Barba</h3>
          <p>
            Modelagem e acabamento profissional para uma barba impecável.
          </p>
          <div class="price">3.000 Kz</div>
        </div>
        <div class="service">
          <div class="service-icon">🔥</div>
          <h3>Corte + Barba</h3>
          <p>
            O combo completo para renovar completamente o seu visual.
          </p>
          <div class="price">7.000 Kz</div>
        </div>
        <div class="service">
          <div class="service-icon">💎</div>
          <h3>Premium</h3>
          <p>
            Corte, barba, lavagem e acabamento premium.
          </p>
          <div class="price">10.000 Kz</div>
        </div>
      </div>
    </div>
  </section>
  <!-- ================= GALLERY ================= -->
  <section class="gallery" id="galeria">
    <div class="container">
      <div class="section-title">
        <small>GALERIA</small>
        <h2>O nosso trabalho</h2>
        <p>
          Alguns estilos realizados pela nossa equipa.
        </p>
      </div>
      <div class="gallery-grid">
        <div class="gallery-item">
          <img
            src="https://images.unsplash.com/photo-1621605815971-fbc98d665033?auto=format&fit=crop&w=900&q=85"
            alt="Corte masculino">
        </div>
        <div class="gallery-item">
          <img
            src="https://images.unsplash.com/photo-1622286342621-4bd786c2447c?auto=format&fit=crop&w=900&q=85"
            alt="Barbeiro trabalhando">
        </div>
        <div class="gallery-item">
          <img
            src="https://images.unsplash.com/photo-1503951914875-452162b0f3f1?auto=format&fit=crop&w=900&q=85"
            alt="Barbearia">
        </div>
        <div class="gallery-item">
          <img
            src="https://images.unsplash.com/photo-1599351431202-1e0f0137899a?auto=format&fit=crop&w=900&q=85"
            alt="Barba masculina">
        </div>
        <div class="gallery-item">
          <img
            src="https://images.unsplash.com/photo-1517832207067-4db24a2ae47c?auto=format&fit=crop&w=900&q=85"
            alt="Cliente na barbearia">
        </div>
        <div class="gallery-item">
          <img
            src="https://images.unsplash.com/photo-1620331311520-246422fd82f9?auto=format&fit=crop&w=900&q=85"
            alt="Estilo masculino">
        </div>
      </div>
    </div>
  </section>
  <!-- ================= REVIEWS ================= -->
  <section id="avaliacoes">
    <div class="container">
      <div class="section-title">
        <small>CLIENTES</small>
        <h2>O que dizem de nós</h2>
      </div>
      <div class="reviews-grid">
        <div class="review">
          <div class="stars">★★★★★</div>
          <p>
            "Excelente atendimento. O barbeiro entendeu exatamente
            o corte que eu queria."
          </p>
          <strong>— Carlos M.</strong>
        </div>
        <div class="review">
          <div class="stars">★★★★★</div>
          <p>
            "Ambiente muito bom e profissionais de qualidade.
            Já virei cliente."
          </p>
          <strong>— João P.</strong>
        </div>
        <div class="review">
          <div class="stars">★★★★★</div>
          <p>
            "O corte ficou perfeito. Atendimento rápido e muito profissional."
          </p>
          <strong>— Daniel K.</strong>
        </div>
      </div>
    </div>
  </section>
  <!-- ================= CTA ================= -->
  <section class="cta">
    <div class="container">
      <h2>Pronto para mudar o visual?</h2>
      <p>
        Reserve o seu horário agora e venha conhecer a BLACK STYLE.
      </p>
      <a
        class="btn btn-primary"
        href="https://wa.me/244900000000?text=Olá%20BLACK%20STYLE!%20Quero%20marcar%20um%20horário."
        target="_blank">
        AGENDAR AGORA
      </a>
    </div>
  </section>
  <!-- ================= CONTACT ================= -->
  <section class="contact" id="contacto">
    <div class="container">
      <div class="section-title">
        <small>CONTACTO</small>
        <h2>Venha visitar-nos</h2>
      </div>
      <div class="contact-grid">
        <div class="contact-box">
          <div class="contact-item">
            <small>📍 ENDEREÇO</small>
            <span>Luanda, Angola</span>
          </div>
          <div class="contact-item">
            <small>📱 WHATSAPP</small>
            <span>+244 900 000 000</span>
          </div>
          <div class="contact-item">
            <small>🕐 HORÁRIO</small>
            <span>
              Segunda a Sábado — 08:00 às 20:00<br>
              Domingo — 09:00 às 15:00
            </span>
          </div>
          <a
            class="btn btn-primary"
            href="https://wa.me/244900000000"
            target="_blank">
            Falar no WhatsApp
          </a>
        </div>
        <div class="map">
          <iframe
            src="https://www.google.com/maps?q=Luanda,Angola&output=embed"
            loading="lazy">
          </iframe>
        </div>
      </div>
    </div>
  </section>
  <!-- ================= FOOTER ================= -->
  <footer>
    <div class="container">
      <p>
        © 2026 <strong>BLACK STYLE BARBERSHOP</strong>.
        Todos os direitos reservados.
      </p>
    </div>
  </footer>
  <!-- ================= WHATSAPP FLOAT ================= -->
  <a
    class="whatsapp"
    href="https://wa.me/244900000000?text=Olá!%20Gostaria%20de%20agendar%20um%20horário."
    target="_blank"
    aria-label="WhatsApp">
    ☎
  </a>
  <script>
    function toggleMenu() {
      document.getElementById("menu").classList.toggle("active");
    }
    document.querySelectorAll("nav a").forEach(link => {
      link.addEventListener("click", () => {
        document.getElementById("menu").classList.remove("active");
      });
    });
  </script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
1079KB
Transfer Size
2426KB
Content Size
275.0ms
Dom Content Loaded
424.0ms
First Paint
767.0ms
Load Time
Domain Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests
Timings (ms)
Total Time
Content Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests