-
Notifications
You must be signed in to change notification settings - Fork 0
/
products.html
100 lines (87 loc) · 5.22 KB
/
products.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="cOOda is the most amazing fictional soda in the world.">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cOOda | Products</title>
<!-- CSS and Favicon -->
<link rel="stylesheet" href="styles/css/style.css">
<link rel="icon" type="image/x-icon" href="img/icon/favicon.ico">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer">
<!-- JavaScript -->
<script defer src="scripts/header.js"></script>
<script defer type="module" src="scripts/database.js"></script>
</head>
<body>
<header class="header">
<div class="header__top">
<h1 class="heading-logo"><a href="index.html">cOOda</a></h1>
<span class="header__button">
<span class="header__icon"></span>
</span>
<ul class="header__list">
<li class="header__item">
<a href="about.html" class="header__link">About Us</a>
</li>
<li class="header__item">
<a href="products.html" class="header__link">Products</a>
</li>
<li class="header__item">
<a href="resources.html" class="header__link">Resources</a>
</li>
</ul>
</div>
<div class="header__bottom">
<ul class="header__list header__list--bottom">
<li class="header__item--bottom">
<a href="about.html" class="header__link header__link--bottom">About Us</a>
</li>
<li class="header__item--bottom">
<a href="products.html" class="header__link header__link--bottom">Products</a>
</li>
<li class="header__item--bottom">
<a href="resources.html" class="header__link header__link--bottom">Resources</a>
</li>
</ul>
</div>
</header>
<main>
<section class="section-products">
<div class="section-products__main">
<h1 class="heading-1 mb-lg">The fastest growing fictional soda brand!</h1>
<p class="paragraph mb-sm">We've got a little bit of everything to suit your taste.</p>
<span class="span__small">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus a assumenda, dolores quod quos cum, reprehenderit veniam consequatur voluptatem explicabo nemo error quis, illum architecto non! Voluptate blanditiis doloribus nam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse neque cupiditate maxime ipsum ipsam ex, vero distinctio necessitatibus fuga qui blanditiis animi id libero placeat illo mollitia totam, sit illum.</span>
<span class="span__small">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid enim velit rerum saepe quos iste cumque voluptatem? Praesentium iusto explicabo minus enim eos, sit quos illum nemo reprehenderit, rem magnam.</span>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__logo">
<h1 class="heading-logo"><a href="index.html">cOOda</a></h1>
<h2 class="heading-2 font-blue">cool + soda</h2>
</div>
<div class="footer__info mb-md">
<p class="paragraph font-white">Subscribe and this fictional soda might become a reality! <span class="span__small">(Not really)</span></p>
<ul class="footer__list">
<li class="footer__item"><a href="about.html" class="footer__link">About Us</a></li>
<li class="footer__item"><a href="products.html" class="footer__link">Products</a></li>
<li class="footer__item"><a href="resources.html" class="footer__link">Resources</a></li>
</ul>
<div class="footer__input-container">
<input type="email" name="email" id="email" class="footer__input" placeholder="Your email">
<button class="footer__button">→</button>
</div>
<div class="footer__icon-container">
<a href="https://www.instagram.com" aria-label="Instagram" target="_blank" class="footer__icon-link"><i class="footer__icon fa-brands fa-instagram"></i></a>
<a href="https://www.facebook.com" aria-label="Facebook" target="_blank" class="footer__icon-link"><i class="footer__icon fa-brands fa-facebook-f"></i></a>
<a href="https://www.youtube.com" aria-label="Youtube" target="_blank" class="footer__icon-link"><i class="footer__icon fa-brands fa-youtube"></i></a>
<a href="https://www.twitter.com" aria-label="Twitter" target="_blank" class="footer__icon-link"><i class="footer__icon fa-brands fa-twitter"></i></a>
</div>
</div>
<span class="span__small font-white">© 2022 cOOda</span>
</footer>
</body>
</html>