-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (105 loc) · 4.9 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<link rel="stylesheet" href="css/style.css" />
<title>Arise Energy</title>
</head>
<body>
<header>
<nav class="header__nav">
<div class="header__logo">
<h4>ARISE</h4>
<div class="header__logo-overlay"></div>
</div>
<ul class="header__menu">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#products">Products</a>
</li>
<li>
<a href="#supplemental-facts">Details</a>
</li>
<li>
<a href="#about-us"> About Us</a>
</li>
</ul>
<ul class="header__menu-mobile" data-aos="fade-down">
<li>
<img src="assets/menu.svg" alt="menu" />
</li>
</ul>
</nav>
</header>
<section class="hero" id="#home">
<div class="hero-image">
<img src="assets/can-hero.png" alt="product-img">
<div class="hero-image__overlay"></div>
</div>
<div class="hero-content">
<div class="hero-content-info">
<h1>Feel the Energy Arising Within!</h1>
<p>A Pre-workout drink like never before. Unleash your full potential with Arise and take those sets till failure.</p>
</div>
</div>
</section>
<section class="about-us" id="about-us" >
<div class="about-us__image">
<div class="about-us__image-can2"><img src="assets/can-img-3.png" alt="product-img-2"></div>
</div>
<div class="about-us__content">
<p class="arise__description"> ABOUT US</p>
<h3 class="arise__title"> Our Mission: Revolutionizing Pre-Workout</h3>
<p class="arise__description">At Arise Energy, we believe that pre-workout should be as dynamic as your routine. That's why we've reimagined the standard powdered formula into a refreshing, carbonated energy drink – delivering the perfect blend of fizz and fuel to power your performance.</p>
</div>
</section>
<section class="products" id="products">
<h2 class="products__title">Our Products</h2>
<div class="products__catalogue">
<article class="products__card">
<img class="products__card-image" src="assets/blueberry.png" alt="blueberry" />
<h4 class="products__card-title">Blueberry</h4>
<div class="products__card-details flex-between">
<div class="products__card-rating">
<img src="assets/star.svg" alt="star" />
<p>4.9</p>
</div>
<p class="products__card-price">$3.49</p>
</div>
</article>
<article class="products__card active-card">
<img class="products__card-image" src="assets/peach.png" alt="peach" />
<h4 class="products__card-title">Peach</h4>
<div class="products__card-details flex-between">
<div class="products__card-rating">
<img src="assets/star.svg" alt="star" />
<p>5.0</p>
</div>
<p class="products__card-price">$3.49</p>
</div>
</article>
<article class="products__card">
<img class="products__card-image" src="assets/lime.png" alt="lime" />
<h4 class="products__card-title">Lime</h4>
<div class="products__card-details flex-between">
<div class="products__card-rating">
<img src="assets/star.svg" alt="star" />
<p>4.7</p>
</div>
<p class="products__card-price">$3.49</p>
</div>
</article>
</div>
<div class="products__info">
<p>
Our energy drinks are meticulously crafted to power your workout with a blend of all the traditional pre-workout ingredients you need. Choose from blueberry, peach or lime! Each flavor is packed with the power of key ingredients—like caffeine, beta-alanine, creatine, and L-citrulline—to boost focus, enhance endurance, and push your limits. Whether you’re hitting the gym or powering through a high-intensity session, our energy drinks deliver the perfect blend of taste and performance to fuel every rep and set.
</p>
</div>
</section>
<script src="js/script.js" type="module"></script>
</body>
</html>