-
Notifications
You must be signed in to change notification settings - Fork 0
/
build-a-product-landing-page.html
111 lines (105 loc) · 4.63 KB
/
build-a-product-landing-page.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/caf46e5448.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="build-a-product-landing-page.css">
</head>
<body>
<div class="page-wrap">
<header id="header">
<div class="logo">
<img id="header-img" alt="Amy Hang logo"src="https://amyhangin.github.io/hosted-assets/Youtube logo.png"/>
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#About">About</a></li>
<li><a class="nav-link" href="#Features">Features</a></li>
<li><a class="nav-link" href="#Products">Products</a></li>
</ul>
</nav>
</header>
<section>
<img src="https://amyhangin.github.io/hosted-assets/pexels-karolina-grabowska-5705956.jpg" alt="blank postcard washi tape stationary products">
</section>
<div class="container">
<section id="About">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/G_z4OAyVXr8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
</iframe>
</section>
<div class="container">
<section id="Features">
<div class="feature-grid">
<div class="icon"><i class="fa-solid fa-check-to-slot fa-4x"></i></div>
<div class="description">
<h2>High Quality Material</h2>
<p>Made with recycled materials. We vow to be environmentally sustainable. We do our best to ensure the best for our travelers and customers.</p>
</div>
</div>
<div class="feature-grid">
<div class="icon"><i class="fa-regular fa-face-smile-beam fa-4x"></i></div>
<div class="description">
<h2>Add Cuteness and Happiness</h2>
<p>Jot down thoughts of the day and look back on the positivities with our travel-friendly journals. Add a bit of creativity with our stickers and bookmarks. </p>
</div>
</div>
<div class="feature-grid">
<div class="icon"><i class="fa-regular fa-hand-peace fa-4x"></i></div>
<div class="description">
<h2>Made for You</h2>
<p>Create mindful memories. We are able to emboss your name whereever you like on the cover of the journal to give it a little personality.</p>
</div>
</div>
</section>
<section id="Products">
<div class="product" id="travel-journal">
<div class="title">Travel Journal</div>
<h2>$9.97</h2>
<ul>
<li>Compacted.</li>
<li>Perfect for tossing into your backpack to write about your travels.</li>
<li>Mindfulness.</li>
</ul>
<button class="select">select</button>
</div>
<div class="product" id="photo-stickers">
<div class="title">Photo Stickers</div>
<h2>$6.97</h2>
<ul>
<li>My printed travel photos on matte or vinyl stickers.</li>
<li>Aesthetic vibes for journals, mood boards, or other decorating purposes.</li>
<li>Great for sticker collectors.</li>
</ul>
<button class="select">select</button>
</div>
<div class="product" id="transparent-photo-cards">
<div class="title">Transparent Photo Cards / Bookmarks</div>
<h2>$5.97</h2>
<ul>
<li>My printed travel photos on see-through cards.</li>
<li>Wonderful for use in books or as decorations.</li>
<li>Wonderful gift for book lovers.</li>
</ul>
<button class="select">select</button>
</div>
</section>
<section id="sign-up">
<h2>Relaxing Travel Essentials</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" name="email" placeholder="Enter your email address" type="email" required />
<input class="submit-button" id="submit" type="submit" value="Stay in Touch" />
</form>
</section>
<footer>
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms and Conditions</a></li>
<li><a href="#">Contact</a></li>
</ul>
<span>Copyright 2022, Amy Hang in</span>
</footer>
</div>
</div>
</body>
</html>