Web-Design-mini-projects/starblade.html at main · advitagelli/Web-Design-mini-projects · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html>
  <main>

  <!-- head - contains links and meta tags -->
  <head>
    <title>StarBlade Lightsabers</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="StarBlade Lightsabers Product landing page" />
    <link rel="stylesheet" href="./starblade-styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />


    <link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  </head>

  <!-- header  -->
  <header id="header">
      <div>
        <img id="header-img" src="https://preview.redd.it/yyavg8y7zjz41.png?auto=webp&s=0f066d40fc751ffb564a3f5f699fa64023df7983" alt="logo">
        <p>StarBlade Lightsabers</p>
      </div>
      <nav id="nav-bar">
        <ul>
          <li><a class="nav-link" href="#Features">Features</a></li>
          <li><a class="nav-link" href="#Details">Details</a></li>
          <li><a class="nav-link" href="#Pricing">Pricing</a></li>
          <li><a class="nav-link" href="#FAQ">FAQ</a></li>
        </ul>
      </nav>
  </header>

<!-- body -->
  <body>
    <h3>Experience the power and precision of the galaxy's finest lightsabers</h3>

      <iframe id="video" src="https://www.youtube.com/embed/nP1TOFErFRY?start=60&end=130&autoplay=1&controls=0&loop=1&playlist=nP1TOFErFRY&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    <form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
      <label><input name="email" type="email" id="email" placeholder="Enter your email address"></label>
      <input type="submit" id="submit" value="Get Started">
    </form>

<section id="Features">
  <h2> Features </h2>
  <ul>
    <li><img src="https://saberspro.com/cdn/shop/files/1_250x.svg?v=1678462639"><div class="title">Customizable Colors</div> </li> <div class="descr-feature">Choose from a spectrum of colors to match your style and allegiance.</div>
    <li><img src="https://saberspro.com/cdn/shop/files/4_250x.svg?v=1678462639"><div class="title">Realistic Sound Effects</div></li><div class="descr-feature">Authentic sound effects that react to every swing and clash, straight out of the movies.</div>
    <li><img src="https://saberspro.com/cdn/shop/files/3_250x.svg?v=1678462639"><div class="title">Durable Build</div></li><div class="descr-feature">Crafted with high-quality materials for intense dueling so you can engage in epic battles without worrying about wear and tear.</div>
  </ul>
</section>

<section id="Details">
  <h2> Details </h2>
  <h4>Specifications</h4>
  <ul>
    <li>Dimensions: Hilt: 11 inches; Blade: 32 inches</li>
    <li>Weight: 1.5 lbs</li>
    <li>Materials: Aircraft-grade aluminum hilt, polycarbonate blade</li>
    <li>Battery: Rechargeable lithium-ion battery</li>
    <li>Sound Effects: 10 different sound profiles</li>
  </ul>

  <h4>Compatibility</h4>
  <ul>
    <li>Compatible with StarBlade accessories and charging stations.</li>
  </ul>
</section>

<section id="Pricing">
  <h2> Pricing Information </h2>
  <h4>Pricing Plans</h4>
  <div class="pri-boxes">
    <div class="price-box">Single Saber: $149.99 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRl75bC37WZAxYPYtRs9Va9XKwIHZzYIY54Lw&s"></div>
    <div class="price-box">Dual Set: $279.99 <img src="https://m.media-amazon.com/images/I/71g-DM2gFbL._AC_UF894,1000_QL80_.jpg"></div>
    <div class="price-box">Collector’s Edition: $499.99 <img src="https://pbs.twimg.com/media/FwW3FdBWcAAatb0?format=jpg&name=4096x4096"></div>
  </div>

  <div class="discount">Limited Time Offer: 15% off your first purchase with code FORCE15.</div>

  <h4>Money-Back Guarantee</h4>
  <p>Risk-Free Purchase: 30-day money-back guarantee if you're not satisfied.</p>
</section>

<section id="Reviews">
  <h2> Customer Reviews </h2>

<div class="revs">

<div class="review one">
<div class="customer">Luke S.</div>
<div class="rating">★★★★★</div>
<div class="review-desc">"The StarBlade lightsaber feels like a real weapon from a galaxy far, far away! The sound effects are spot on, and the customizable colors make it perfect for any situation. I've used it for cosplay and friendly duels, and it's held up incredibly well. The rechargeable battery lasts a long time, and the build quality is exceptional. Highly recommended for any Star Wars fan!"</div></div>

  <div class="review two"><div class="customer">Leia O.</div>
  <div class="rating">★★★★☆</div>
  <div class="review-desc">"I love the customizable colors! It's perfect for any cosplay or just showing off to friends. The hilt design is both sleek and comfortable to hold, and the blade is incredibly durable. The sound effects make every swing and clash feel real. It's also great that the saber comes with a money-back guarantee, though I doubt anyone would want to return it. Absolutely worth every penny!"</div></div>

  <div class="review three"><div class="customer">Han S.</div>
  <div class="rating">★★★☆☆</div>
  <div class="review-desc">"This lightsaber is the closest thing to the real deal! The hilt's craftsmanship is top-notch, and the blade's brightness is impressive. I especially appreciate the different sound profiles – it really adds to the immersion. My only minor gripe is that the charging port could be a bit more accessible. Other than that, it's a fantastic product that I enjoy using both for display and for dueling."</div></div>

  <div class="review four"><div class="customer">Kylo R.</div>
  <div class="rating">★★★★★</div>
  <div class="review-desc">"A must-have for any Star Wars fan – the quality is unparalleled. The StarBlade lightsaber is incredibly sturdy and feels great in hand. The variety of colors and sound effects make it versatile for any occasion. The USB charging is convenient, and the battery life is impressive. I've already recommended it to several friends who are also thrilled with their purchases. This lightsaber exceeds all my expectations!"</div></div>
</div>
</section>


<section id="FAQ">
  <h2>Frequently Asked Questions</h2>
  <div class="question">How do I charge the lightsaber?</div>
  <div class="response">The StarBlade lightsaber comes with a USB charging cable that connects to any standard outlet or USB port.</div>

  <div class="question">Is the lightsaber safe for dueling?</div>
  <div class="response">Yes, it is built with a durable polycarbonate blade designed for heavy dueling.</div>

  <div class="question">Can I change the sound effects?</div>
  <div class="response">Yes, the lightsaber comes with 10 different sound profiles that you can switch between.</div>
</section>
  </body>

  <!-- footer -->
  <footer>
    <pre><p>456 StarBlade Way
    Spaceport City
        CA 94016</p>
</pre>
<pre><p>support@starblade.com
         1-800-555-7890
    </p></pre>
    <pre><p>Follow us
<a href="https://www.facebook.com"><i class="fab fa-facebook"></i></a><a href="https://twitter.com"><i class="fab fa-twitter"></i></a><a href="https://www.instagram.com"><i class="fab fa-instagram"></i></a></p></pre>
  </footer>
  </main>
</html>