-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
149 lines (144 loc) · 5.8 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!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.0">
<meta name="description" content="Quant FireFly - High end processors!">
<meta property="og:title" content="Quant FireFly - High end processors!">
<meta property="og:type" content="webpage">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta name="theme-color" content="#FF7A00">
<script src="https://kit.fontawesome.com/bae5c522cf.js" crossorigin="anonymous" defer></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Prosto+One&display=swap" as="style"
onload="this.onload=null;this.rel='stylesheet'"> <!--To speed up page parsing-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css">
<title>Quant FireFly</title>
</head>
<body>
<div class="menu-button-container">
<button id="menu-button" class="menu-btn-stripes" aria-label="Open/Close the menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
<nav class="menu-nav">
<ul class="menu-container">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section class="start-page">
<div class="startpage-flexbox">
<div class="picture">
<picture>
<source media="(max-witdh: 480px)" srcset="/img/gadget_mobile.webp">
<source media="(min-width: 601px) and (max-width: 1199px)" srcset="/img/gadget_tablet.webp">
<source media="(min-width: 1200px) and (max-width: 1399px)" srcset="/img/smaller_desktop.webp">
<source media="(min-width: 1400px)" srcset="/img/gadget_desktop.webp">
<img src="/img/gadget_mobile.webp" alt="motherboard with processor">
</picture>
</div>
<div class="startpage-container">
<div class="firefly-container">
<img src="/img/firefly-logo-notext.svg" id="firefly" alt="The happy firefly maskot 'Fly'">
<h1>Quant Firefly</h1>
<h2 class="first-quantum">First Quantum Processor</h2>
</div>
<p class="header_text"></p>
<button class="learnMore-btn">Learn More</button>
</div>
<div class="subscribe-newsletter">
<h2>Subscribe To Our News Letter!</h2>
<form>
<input id="email" type="text" placeholder="E-Mail">
<button id="submitBtn" disabled class="disabledBtn">Submit</button>
</form>
</div>
</div>
</section>
<section class="products">
<h3 class="cards-header">Which FireFly are you?</h3>
<hr>
<div id="cards-holder" class="cards-holder"></div>
</section>
<footer>
<div class="footer-content-container">
<div class="find-us-container">
<h3>Find us</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.<br><br>
Example street 123a<br>
+46-705556789<br>
info@firefly.com
</p>
</div>
<div class="quick-links-container">
<h3>Quick links</h3>
<ul>
<li><a href="#">FireFly Drivers</a></li>
<li><a href="#">Models</a></li>
<li><a href="#">Find us on amazon</a></li>
<li><a href="#">Getting started</a></li>
<li><a href="#">Newsletter</a></li>
</ul>
</div>
<div class="follow-us-container">
<h3 class="hidden-h3-mobile">Follow us</h3>
<ul class="icon-mobile-list">
<li>
<a href="#" aria-label="Visit our facebook page!" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-facebook"></i>
</a>
</li>
<li>
<a href="#" aria-label="Visit our twitter page!" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-twitter"></i>
</a>
</li>
<li>
<a href="#" aria-label="Visit our linkedIn page!" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</li>
<li>
<a href="#" aria-label="Send us an email" target="_blank" rel="noopener noreferrer">
<i class="fa-solid fa-envelope"></i>
</a>
</li>
</ul>
</div>
<div class="title-container">
<h3>Title</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi
repudiandae.
</p>
</div>
</div>
<div class="copywright">
<p>© 2016-2023 Quantum Firefly, LLC, <span>All Rights Reserved</span></p>
</div>
</footer>
<div id="cookies">
<div class="cookies" >
<p class="cookies-text">Allow cookies for this website</p>
<div>
<button class="cookies-btn">Decline</button>
<button class="cookies-btn" id="acceptCookiesBtn">Accept</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<script src="/src/main.js" type="module"></script>
<script src="/src/startpage.js" type="module"></script>
<script src="/src/menu.js" type="module"></script>
<script src="/src/subscribe-newsletter.js" type="module"></script>
<script src="/src/cookies.js" type="module"></script>
</body>
</html>