-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
73 lines (71 loc) · 5.13 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="styles.css">
<title>C-Glow — Geek & Gorgeous</title>
<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=Noto+Sans&family=Roboto+Mono:wght@400;500;600;700&family=Roboto:ital,wght@0,300;0,400;1,400&display=swap" rel="stylesheet">
</head>
<body>
<header id="header">
<img id="header-img" src="https://storage.googleapis.com/geekandgorgeous/assets/logo_rose_large.png" alt="Geek & Gorgeous logo" loading="lazy"/>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#c-glow">C-GLOW</a></li>
<li><a class="nav-link" href="#about">ABOUT VIT C</a></li>
<li><a class="nav-link" href="#how-to-use">HOW TO USE</a></li>
<li><a class="nav-link" href="#ingredients">INGREDIENTS</a></li>
<li><a class="nav-link" href="#video">REVIEW</a></li>
</nav>
</header>
<main>
<div id="container">
<div id="c-glow">
<img id="serum-image" alt="c-glow image" src="https://cdn.shopify.com/s/files/1/0376/5803/4313/products/Geek_GorgeousC-GlowVitaminCSerumAustralia1_800x.png?v=1644372602">
<p class="image-text" id="c-glow-text">A super-light, water-like 15% Vitamin C + extra antioxidants (Ferulic Acid & a smaller amount of Vitamin E) formula to give the skin environmental protection, boost collagen and even the skin tone.
<br><br>
<em>30ml</em>
<br><br>
<span class="little-title">Skin type</span>: all skin types - please do a patch test if you have sensitive skin
<br><br>
<span class="little-title">Skin concern</span>: dark spots, aging, dull & uneven skin
<br><br>
<em>Cruelty-free | Vegan | Fragrance & Essential oil free | Gluten-free | Malassezia-safe | Pregnancy-safe</em>
</p>
</div>
<div class="blue-container">
<div id="about">
<p class="image-text" id="about-text">Pure Vitamin C (or Ascorbic Acid) is a 3-in-1, clinically proven superstar that gives the skin environmental protection (antioxidant), boosts the skin's own collagen production and fades hyperpigmentation. This water-light formula contains 15% Vitamin C & extra antioxidants to give a healthy glow, even and firm the skin.</p>
<img id="about-image" alt="Girl with lemon" src="https://cdn.shopify.com/s/files/1/2028/2057/articles/Evidence-Based_c8012682-6c94-4aeb-8e83-f20cdcd53b73_1024x400.jpg?v=1646244589">
</div>
</div>
<div id="how-to-use">
<img id="how-to-use-img" src="https://www.esteelauder.com/media/export/cms_2.0/vto-skincare/Skincare_quiz-683x683.jpg" alt="creams"/>
<p id="how-to-use-text" class="image-text">Apply a few drops to the face after cleansing, before using other serums and/or creams. Ideal to use in the AM, but can be applied in the PM as well. As the C-Glow formula is water-like, we recommend that you put a drop directly onto your face and quickly pat it on with your other hand.
<br><br>
<span class="little-title">Shelf life</span>: 6 months from production (unopened), 3 months PAO (period after opening).</p>
</div>
<div class="blue-container">
<div id="ingredients">
<p id="ingredients-text" class="image-text"><span class="little-title">key ingredients</span>:<br><br>
<strong>Vitamin C (ascorbic acid – 15%)</strong> – A clinically proven active that gives the skin environmental protection (antioxidant), boosts collagen production and fades hyperpigmentation. Also gives an instant glow to the skin.
<br><br>
<strong>Ferulic acid + Vitamin E</strong> – Antioxidants that help to stabilize Vitamin C and increase its antioxidant power. The formula contains a high amount of Ferulic Acid, and a smaller amount of vitamin E.
<br><br>
<strong>Dimethyl Isosorbide</strong> – A new-generation solvent that aids the proper penetration of Vitamin C + solubilizes the high amount of Ferulic Acid into the formula.
<br><br><br><br>
<span class="little-title">full inci list</span>:<br><br>
Water, (L-)Ascorbic Acid, Dimethyl Isosorbide, Butylene Glycol, Peg/Ppg/Polybutylene Glycol-8/5/3 Glycerin, Ferulic Acid, Tocopherol, Phenoxyethanol, Ethylhexylglycerin, Sodium Hydroxide</p>
</div>
</div>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/NLw2HX1Ehcs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</main>
<footer>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label for="form" id="email-label">Geek skincare tips, news & offers in your inbox:<br><br><input id="email" name="email" placeholder="your e-mail address" type="email"></label>
<input id="submit" type="submit" value="Subscribe">
</form>
</footer>
</body>
</html>