-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathflavors.html
143 lines (134 loc) · 6.88 KB
/
flavors.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
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SOLIS Energy: Our Flavors</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link href="css/styles.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oxygen&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
<link rel="icon" type="image/x-icon" href="images/logos/SOLIS_FAVICON.png">
<link rel="stylesheet" href="https://use.typekit.net/lvu2tyx.css">
<link rel="stylesheet" href="css/planets.css">
</head>
<body class="flavors-bg">
<nav class="navbar main-bg navbar-expand-lg mobile navbar-dark border-bottom border-2 border-brand">
<div class="container-fluid">
<input name="search" type="search" class="search" placeholder="Search">
<button class="navbar-toggler hamburber" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-nav">
<ul class="navbar-nav ">
<li class="nav-item"><a class="nav-link text-light" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link text-light" href="flavors.html">Flavors</a></li>
<li class="nav-item"><a class="nav-link text-light" href="events.html">Events</a></li>
<li class="nav-item"><a class="nav-link text-light" href="sponsor.html">Sponsors</a></li>
<li class="nav-item"><a class="nav-link text-light" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
<nav class="navbar main-bg navbar-expand desktop navbar-dark border-bottom border-2 border-brand">
<div class="container-fluid">
<a href="index.html" class="navbar-brand">SOLIS</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link text-light rounded" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link text-light rounded" href="flavors.html">Flavors</a></li>
<li class="nav-item"><a class="nav-link text-light rounded" href="events.html">Events</a></li>
<li class="nav-item"><a class="nav-link text-light rounded" href="sponsor.html">Sponsors</a></li>
<li class="nav-item"><a class="nav-link text-light rounded" href="contact.html">Contact</a></li>
<input name="search" type="search" class="search m-2" placeholder="Search">
</ul>
</div>
</nav>
<header class="text-center">
<div class="container-fluid">
<a class="logo-img" href="index.html"><img src="images/logos/SOLIS_LOGO_SLOGAN(2).png" alt="solis banner"></a>
</div>
</header>
<main class="bg-stars">
<div class="container-fluid">
<div class="mobile">
<p class="flavor-p mobile">Click on a can to learn more about our flavors!</p>
<div class="container flavor-carousel">
<div id="flavor-carousel" class="carousel slide pb-4" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="7000">
<a href="milkyway.html"><img src="images/cans/png/TM_MILKY-WAY-VANILLA-CREME.png" alt="Milky Way Vanilla Cream"></a>
</div>
<div class="carousel-item" data-bs-interval="7000">
<a href="venus.html"><img src="images/cans/png/TM_VENUS_LEMON-LIME.png" alt="Venus Lemon Lime"></a>
</div>
<div class="carousel-item" data-bs-interval="7000">
<a href="mars.html"><img src="images/cans/png/TM_MARS-MANGO.png" alt="Mars Mango"></a>
</div>
<div class="carousel-item" data-bs-interval="7000">
<a href="jupiter.html"><img src="images/cans/png/TM_JUPITERBERRY.png" alt="JupiterBerry"></a>
</div>
<div class="carousel-item" data-bs-interval="7000">
<a href="saturn.html"><img src="images/cans/png/TM_SATURN-ROCKY-RINGS.png" alt="Saturn Rocky Rings"></a>
</div>
<div class="carousel-item " data-bs-interval="7000">
<a href="uranus.html"><img src="images/cans/png/TM_URANUS-RASPBERRY.png" alt="Uranus Raspberry"></a>
</div>
<div class="carousel-item" data-bs-interval="7000">
<a href="neptune.html"><img src="images/cans/png/TM_NEPTUNE-WINTER-PUNCH.png" alt="Neptune Winter Punch"></a>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#flavor-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#flavor-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<div class="desktop">
<p class="flavor-p-dt">Click on a Planet to learn more about our flavors!</p>
<div class="planets-wrapper mb-4">
<a href="milkyway.html" class="milkyway"></a>
<a href="venus.html" class="venus"></a>
<a href="mars.html" class="mars"></a>
<a href="jupiter.html" class="jupiter"></a>
<a href="saturn.html" class="saturn"></a>
<a href="uranus.html" class="uranus"></a>
<a href="neptune.html" class="neptune"></a>
</div>
</div>
</div>
</main>
<div class="container-fluid main-bg footer-nav border-top border-2 border-brand">
<footer>
<ul class="nav justify-content-center">
<li class="nav-item">
<a href="index.html" class="nav-link px-2 text-white rounded">Home</a>
</li>
<li class="nav-item">
<a href="flavors.html" class="nav-link px-2 text-white rounded">Flavors</a>
</li>
<li class="nav-item">
<a href="events.html" class="nav-link px-2 text-white rounded">Events</a>
</li>
<li class="nav-item">
<a href="sponsor.html" class="nav-link px-2 text-white rounded">Sponsors</a>
</li>
<li class="nav-item">
<a href="contact.html" class="nav-link px-2 text-white rounded">Contact</a>
</li>
</ul>
<p class="text-center text-white pb-1">© 2023 SOLIS, Inc. <i class="icons bi bi-instagram"></i><i class="icons bi bi-twitter"></i><i class="icons bi bi-facebook"></i></p>
</footer>
</div>
<!--------------------------------------------->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>