. Red Bull Sugarfree Landing Page – Free HTML CSS JS | Coodeverse

Red Bull Sugarfree Product Landing Page – Free HTML CSS JS Download

This is a free, copy-paste ready product landing page built entirely with vanilla HTML, CSS, and JavaScript — no libraries, no npm, no build tools required. Inspired by the Red Bull Sugarfree energy drink brand, it showcases how to build a polished, responsive, and interactive product page from scratch. Perfect for frontend portfolios, practice projects, and client landing page templates.

The project demonstrates real-world UI patterns including CSS keyframe animations, SVG illustration, interactive JavaScript state management, and mobile-first responsive design — all in a single, self-contained HTML file that you can open in any browser without a server.

What's Included in the Download

Who Is This For?

Web design students, self-taught developers, and anyone learning to build modern product pages. The code is well-structured and easy to read, making it an ideal study project and portfolio piece. The Red Bull Sugarfree landing page is one of the most popular free HTML CSS JS projects on Coodeverse with over 12,800 downloads and a 4.9/5 rating from the developer community.

License

Released under Creative Commons Attribution 4.0 International (CC BY 4.0). Free for personal and commercial use with attribution to Coodeverse. Replace Red Bull brand elements with your own branding for commercial deployment. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Red Bull Sugarfree - Wings Without Sugar</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7db9e8 100%);
      min-height: 100vh;
      padding: 20px;
      overflow-x: hidden;
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
    }
    
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes shimmer {
      0% { background-position: -1000px 0; }
      100% { background-position: 1000px 0; }
    }
    
    .main-container {
      max-width: 1400px;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.98);
      border-radius: 24px;
      padding: 40px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(10px);
      animation: fadeInUp 0.6s ease-out;
    }
    
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 50px;
      flex-wrap: wrap;
      gap: 20px;
    }
    
    .logo {
      font-size: 2.5rem;
      font-weight: 900;
      background: linear-gradient(135deg, #0066cc, #00ccff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: flex;
      align-items: center;
      gap: 12px;
      letter-spacing: -1px;
    }
    
    .logo-icon {
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, #ff4757, #ff6348);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
      box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4);
    }
    
    nav {
      display: flex;
      gap: 12px;
      background: rgba(240, 246, 252, 0.8);
      padding: 8px;
      border-radius: 16px;
      backdrop-filter: blur(10px);
    }
    
    .nav-btn {
      background: transparent;
      border: none;
      border-radius: 12px;
      color: #1e3c72;
      padding: 12px 24px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }
    
    .nav-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      opacity: 0;
      transition: opacity 0.3s;
      z-index: -1;
    }
    
    .nav-btn:hover, .nav-btn.active {
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
    }
    
    .nav-btn:hover::before, .nav-btn.active::before {
      opacity: 1;
    }
    
    .header-icons {
      display: flex;
      gap: 12px;
    }
    
    .icon {
      width: 48px;
      height: 48px;
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
    }
    
    .icon:hover {
      transform: translateY(-4px) rotate(10deg);
      box-shadow: 0 8px 25px rgba(245, 87, 108, 0.5);
    }
    
    .product-section {
      display: grid;
      grid-template-columns: 1fr 400px;
      gap: 60px;
      margin-bottom: 50px;
      position: relative;
    }
    
    .product-content {
      animation: fadeInUp 0.8s ease-out 0.2s both;
    }
    
    .badge {
      display: inline-block;
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      color: white;
      padding: 8px 20px;
      border-radius: 50px;
      font-size: 0.85rem;
      font-weight: 700;
      margin-bottom: 20px;
      box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    
    h1 {
      font-size: 4rem;
      font-weight: 900;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 20px;
      line-height: 1.1;
      letter-spacing: -2px;
    }
    
    .reviews {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
      padding: 12px 24px;
      border-radius: 50px;
      font-weight: 600;
      color: #2d3436;
      margin-bottom: 24px;
      box-shadow: 0 4px 15px rgba(253, 203, 110, 0.4);
    }
    
    .stars {
      color: #ff6348;
      font-size: 1.2rem;
    }
    
    .description {
      font-size: 1.2rem;
      line-height: 1.8;
      color: #4a5568;
      margin-bottom: 30px;
    }
    
    .info-card {
      background: linear-gradient(135deg, #e0f7ff 0%, #b3e5fc 100%);
      border-radius: 16px;
      padding: 24px;
      margin-bottom: 24px;
      border-left: 5px solid #0066cc;
      box-shadow: 0 4px 15px rgba(0, 102, 204, 0.1);
      transition: all 0.3s;
    }
    
    .info-card:hover {
      transform: translateX(5px);
      box-shadow: 0 8px 25px rgba(0, 102, 204, 0.2);
    }
    
    .info-card strong {
      color: #0066cc;
      font-size: 1.1rem;
      display: block;
      margin-bottom: 8px;
    }
    
    .info-card ul {
      list-style: none;
      padding-left: 0;
    }
    
    .info-card li {
      padding: 8px 0;
      color: #1e3c72;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .info-card li::before {
      content: '✓';
      display: inline-block;
      width: 24px;
      height: 24px;
      background: #0066cc;
      color: white;
      border-radius: 50%;
      text-align: center;
      line-height: 24px;
      font-weight: bold;
      flex-shrink: 0;
    }
    
    .price-section {
      display: flex;
      align-items: center;
      gap: 20px;
      margin: 30px 0;
    }
    
    .price {
      font-size: 3.5rem;
      font-weight: 900;
      background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .old-price {
      font-size: 1.8rem;
      color: #cbd5e0;
      text-decoration: line-through;
    }
    
    .save-badge {
      background: #ff6348;
      color: white;
      padding: 6px 16px;
      border-radius: 50px;
      font-weight: 700;
      font-size: 0.9rem;
    }
    
    .button-group {
      display: flex;
      gap: 16px;
      margin-bottom: 30px;
      flex-wrap: wrap;
    }
    
    .btn {
      padding: 18px 40px;
      border: none;
      border-radius: 16px;
      font-size: 1.1rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    
    .btn::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
    }
    
    .btn:hover::before {
      width: 300px;
      height: 300px;
    }
    
    .btn-primary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    }
    
    .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
    }
    
    .btn-secondary {
      background: white;
      color: #667eea;
      border: 3px solid #667eea;
    }
    
    .btn-secondary:hover {
      background: #667eea;
      color: white;
      transform: translateY(-3px);
      box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    }
    
    .quantity-selector {
      display: flex;
      align-items: center;
      gap: 16px;
      background: #f7fafc;
      padding: 8px;
      border-radius: 12px;
      border: 2px solid #e2e8f0;
    }
    
    .quantity-btn {
      width: 40px;
      height: 40px;
      border: none;
      background: #667eea;
      color: white;
      border-radius: 8px;
      font-size: 1.4rem;
      cursor: pointer;
      transition: all 0.3s;
      font-weight: bold;
    }
    
    .quantity-btn:hover {
      background: #5568d3;
      transform: scale(1.1);
    }
    
    .quantity-display {
      font-size: 1.4rem;
      font-weight: 700;
      color: #2d3748;
      min-width: 40px;
      text-align: center;
    }
    
    .social-links {
      display: flex;
      gap: 12px;
      margin-top: 30px;
    }
    
    .social-btn {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .social-btn:nth-child(1) {
      background: linear-gradient(135deg, #1da1f2, #0d8bd9);
      color: white;
    }
    
    .social-btn:nth-child(2) {
      background: linear-gradient(135deg, #e1306c, #c13584);
      color: white;
    }
    
    .social-btn:nth-child(3) {
      background: linear-gradient(135deg, #4267B2, #385898);
      color: white;
    }
    
    .social-btn:hover {
      transform: translateY(-5px) scale(1.1);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    }
    
    .product-showcase {
      position: relative;
      animation: fadeInUp 0.8s ease-out 0.4s both;
    }
    
    .product-image-container {
      position: relative;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 24px;
      padding: 40px;
      box-shadow: 0 20px 60px rgba(102, 126, 234, 0.4);
      overflow: hidden;
    }
    
    .product-image-container::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
      );
      animation: shimmer 3s infinite;
    }
    
    .product-image {
      width: 100%;
      height: auto;
      animation: float 3s ease-in-out infinite;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
    }
    
    .variants-grid {
      display: grid;
      gap: 16px;
      margin-top: 30px;
    }
    
    .variant-card {
      background: white;
      border-radius: 16px;
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 20px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      transition: all 0.3s;
      border: 3px solid transparent;
    }
    
    .variant-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
      border-color: #667eea;
    }
    
    .variant-image {
      width: 70px;
      height: 70px;
      object-fit: contain;
      border-radius: 12px;
      background: #f7fafc;
      padding: 8px;
    }
    
    .variant-info h3 {
      font-size: 1.1rem;
      color: #2d3748;
      margin-bottom: 5px;
    }
    
    .variant-price {
      font-size: 1.3rem;
      font-weight: 700;
      color: #667eea;
    }
    
    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      margin: 40px 0;
    }
    
    .feature-card {
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      border-radius: 16px;
      padding: 24px;
      text-align: center;
      transition: all 0.3s;
    }
    
    .feature-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    }
    
    .feature-icon {
      font-size: 3rem;
      margin-bottom: 12px;
    }
    
    .feature-title {
      font-weight: 700;
      color: #2d3748;
      margin-bottom: 8px;
    }
    
    .feature-desc {
      color: #4a5568;
      font-size: 0.9rem;
    }
    
    footer {
      text-align: center;
      padding: 30px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 20px;
      color: white;
      margin-top: 50px;
    }
    
    footer h2 {
      font-size: 2.5rem;
      margin-bottom: 10px;
      font-weight: 900;
    }
    
    footer p {
      font-size: 1.2rem;
      opacity: 0.9;
    }
    
    @media (max-width: 1024px) {
      .product-section {
        grid-template-columns: 1fr;
      }
      
      h1 {
        font-size: 3rem;
      }
      
      .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      }
    }
    
    @media (max-width: 768px) {
      .main-container {
        padding: 20px;
      }
      
      header {
        flex-direction: column;
        align-items: flex-start;
      }
      
      nav {
        width: 100%;
        flex-wrap: wrap;
      }
      
      h1 {
        font-size: 2.5rem;
      }
      
      .button-group {
        flex-direction: column;
      }
      
      .btn {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <div class="main-container">
    <header>
      <div class="logo">
        <div class="logo-icon">⚡</div>
        RedBull
      </div>
      <nav>
        <button class="nav-btn active">Energy Drink</button>
        <button class="nav-btn">Sugarfree</button>
        <button class="nav-btn">Zero</button>
        <button class="nav-btn">Tropical</button>
      </nav>
      <div class="header-icons">
        <div class="icon">⚙️</div>
        <div class="icon">🔔</div>
        <div class="icon">🛒</div>
      </div>
    </header>

    <div class="product-section">
      <div class="product-content">
        <span class="badge">🔥 Bestseller</span>
        <h1>Red Bull Sugarfree</h1>
        <div class="reviews">
          <span class="stars">★★★★★</span>
          <span>4.8/5 (932 Reviews)</span>
        </div>
        <p class="description">
          Wings without sugars. Red Bull Sugarfree delivers the same energy boost with a crisp, 
          refreshing taste and zero sugar. Perfect for those who want sustained energy without compromise.
        </p>

        <div class="info-card">
          <strong>🧪 Key Ingredients</strong>
          <p>Carbonated Water, Taurine, Caffeine, B Vitamins (B3, B5, B6, B12), Sucralose & Acesulfame K</p>
        </div>

        <div class="info-card">
          <strong>🎯 How to Enjoy</strong>
          <ul>
            <li>Chill before serving for maximum refreshment</li>
            <li>Enjoy straight from the can or poured over ice</li>
            <li>Perfect pre-workout or mid-afternoon boost</li>
          </ul>
        </div>

        <div class="features-grid">
          <div class="feature-card">
            <div class="feature-icon">⚡</div>
            <div class="feature-title">80mg Caffeine</div>
            <div class="feature-desc">Energy boost</div>
          </div>
          <div class="feature-card">
            <div class="feature-icon">🎯</div>
            <div class="feature-title">Zero Sugar</div>
            <div class="feature-desc">No calories</div>
          </div>
          <div class="feature-card">
            <div class="feature-icon">💪</div>
            <div class="feature-title">B-Vitamins</div>
            <div class="feature-desc">Enhanced focus</div>
          </div>
        </div>

        <div class="price-section">
          <div class="price">$2.99</div>
          <div class="old-price">$3.99</div>
          <div class="save-badge">Save 25%</div>
        </div>

        <div class="button-group">
          <div class="quantity-selector">
            <button class="quantity-btn" onclick="changeQuantity(-1)">−</button>
            <span class="quantity-display" id="quantity">1</span>
            <button class="quantity-btn" onclick="changeQuantity(1)">+</button>
          </div>
          <button class="btn btn-primary" onclick="addToCart()">🛒 Add to Cart</button>
          <button class="btn btn-secondary">💝 Buy Bundle & Save</button>
        </div>

        <div class="social-links">
          <button class="social-btn">🐦</button>
          <button class="social-btn">📷</button>
          <button class="social-btn">📘</button>
        </div>
      </div>

      <div class="product-showcase">
        <div class="product-image-container">
          <svg class="product-image" viewBox="0 0 200 400" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <linearGradient id="canGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#e3f2fd;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#90caf9;stop-opacity:1" />
              </linearGradient>
            </defs>
            <rect x="50" y="50" width="100" height="300" rx="10" fill="url(#canGradient)" stroke="#1976d2" stroke-width="3"/>
            <ellipse cx="100" cy="50" rx="50" ry="15" fill="#bbdefb" stroke="#1976d2" stroke-width="2"/>
            <ellipse cx="100" cy="350" rx="50" ry="15" fill="#64b5f6" stroke="#1976d2" stroke-width="2"/>
            <text x="100" y="120" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#1976d2" text-anchor="middle">Red Bull</text>
            <text x="100" y="180" font-family="Arial, sans-serif" font-size="12" fill="#0d47a1" text-anchor="middle">SUGARFREE</text>
            <text x="100" y="320" font-family="Arial, sans-serif" font-size="10" fill="#1976d2" text-anchor="middle">250ml</text>
          </svg>
        </div>

        <div class="variants-grid">
          <div class="variant-card">
            <svg class="variant-image" viewBox="0 0 60 120" xmlns="http://www.w3.org/2000/svg">
              <rect x="10" y="10" width="40" height="100" rx="5" fill="#90caf9" stroke="#1976d2" stroke-width="2"/>
              <text x="30" y="50" font-size="8" fill="#fff" text-anchor="middle" font-weight="bold">Sugar</text>
              <text x="30" y="60" font-size="8" fill="#fff" text-anchor="middle" font-weight="bold">Free</text>
            </svg>
            <div class="variant-info">
              <h3>Red Bull Sugarfree</h3>
              <div class="variant-price">$2.99</div>
            </div>
          </div>
          <div class="variant-card">
            <svg class="variant-image" viewBox="0 0 60 120" xmlns="http://www.w3.org/2000/svg">
              <rect x="10" y="10" width="40" height="100" rx="5" fill="#ff6b6b" stroke="#c92a2a" stroke-width="2"/>
              <text x="30" y="55" font-size="10" fill="#fff" text-anchor="middle" font-weight="bold">Original</text>
            </svg>
            <div class="variant-info">
              <h3>Red Bull Original</h3>
              <div class="variant-price">$2.99</div>
            </div>
          </div>
          <div class="variant-card">
            <svg class="variant-image" viewBox="0 0 60 120" xmlns="http://www.w3.org/2000/svg">
              <rect x="10" y="10" width="40" height="100" rx="5" fill="#495057" stroke="#212529" stroke-width="2"/>
              <text x="30" y="55" font-size="10" fill="#fff" text-anchor="middle" font-weight="bold">Zero</text>
            </svg>
            <div class="variant-info">
              <h3>Red Bull Zero</h3>
              <div class="variant-price">$2.99</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <footer>
      <h2>Ready to Take Off? 🚀</h2>
      <p>Get your wings with Red Bull Sugarfree today!</p>
    </footer>
  </div>

  <script>
    let quantity = 1;
    let cartCount = 0;

    function changeQuantity(delta) {
      quantity = Math.max(1, quantity + delta);
      document.getElementById('quantity').textContent = quantity;
    }

    function addToCart() {
      cartCount += quantity;
      alert('Added ' + quantity + ' can(s) to cart!\nTotal: ' + cartCount);
      const btn = event.target;
      btn.textContent = '✓ Added!';
      btn.style.background = 'linear-gradient(135deg,#11998e,#38ef7d)';
      setTimeout(() => {
        btn.textContent = '🛒 Add to Cart';
        btn.style.background = 'linear-gradient(135deg,#667eea,#764ba2)';
      }, 2000);
    }

    document.querySelectorAll('.nav-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
      });
    });

    document.querySelectorAll('.variant-card').forEach(card => {
      card.addEventListener('click', function() {
        alert('Switching to ' + this.querySelector('h3').textContent);
      });
    });

    document.querySelectorAll('.icon, .social-btn').forEach(icon => {
      icon.addEventListener('click', function() {
        this.style.transform = 'scale(0.9)';
        setTimeout(() => { this.style.transform = ''; }, 200);
      });
    });
  </script>
</body>
</html>

Frequently Asked Questions

Common questions about this free HTML CSS JS project.

Yes — 100% free. The complete source code is available under Creative Commons Attribution 4.0. No sign-up, no credit card, no watermarks. Download instantly by clicking the button above.

A single self-contained HTML file with all CSS and JavaScript embedded. Includes floating SVG can, add-to-cart interaction, quantity selector, variant switcher, shimmer animation, and full mobile responsiveness. Open in any browser instantly.

No. Pure vanilla HTML, CSS, and JavaScript only. Zero dependencies, no build step, no package manager. Works in Chrome, Firefox, Safari, and Edge right out of the box.

Yes, with attribution to Coodeverse as required by CC BY 4.0. Replace the Red Bull brand elements with your own branding for any commercial use — the Red Bull name is used here for educational purposes only.

Right-click the downloaded ZIP → Properties → check "Unblock" at the bottom (if shown) → Apply → OK. Then extract. This removes the Windows security flag on files downloaded from the internet.

Browse all free projects at coodeverse.com/projects — Epic Animated Delete, Cosmos Star Animation, Particle Fireworks, Holographic Login, Neon Toggle Switch and many more. All free with full source code.