-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (123 loc) · 5.45 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./normalize.css">
<link rel="stylesheet" href="./style.css">
<title>Product Landing Page</title>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
</head>
<body>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<header id="header">
<div class="logo"><img src="./assets/holotrip.svg" id="header-img"></div>
<nav id="nav-bar">
<ul>
<li>
<a href="#features" class="nav-link">Features</a>
</li>
<li>
<a href="#explainer" class="nav-link">How it works</a>
</li>
<li>
<a href="#pricing" class="nav-link">Pricing</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="wrapper">
<h1 class="main-claim">Beautiful Virtual Vacations!</h1>
<form class="subscribe" action="https://www.freecodecamp.com/email-submit" id="form">
<input type="email" name="email" required id="email" placeholder="enter your email address">
<input type="submit" class="button" id="submit" value="start your escape!">
</form>
<div id="features" class="jumplink">
<div class="feature">
<div class="imgcontainer"><img src="./assets/feature1.svg" alt="placeholder"></div>
<div class="featuretext">
<h2>Dazzling Sounds</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
</div>
</div>
<div class="feature">
<div class="imgcontainer"><img src="./assets/feature2.svg" alt="placeholder"></div>
<div class="featuretext">
<h2>Staggering Landscapes</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
</div>
</div>
<div class="feature">
<div class="imgcontainer"><img src="./assets/feature3.svg" alt="placeholder"></div>
<div class="featuretext">
<h2>Safe Return</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
</div>
</div>
</div>
<div id="explainer" class="jumplink">
<h2>Usage of our basic implantless gear:</h2>
<video id="video" src="./assets/holodeck.mp4" controls></video>
</div>
<div id="pricing" class="jumplink">
<div class="pricecards">
<div class="card basic">
<div class="group">
<h3>Basic</h3>
<p class="pricetag">99€/m</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
</div>
<input type="submit" class="button" value="select">
</div>
<div class="card premium">
<div class="group">
<h3>Premium</h3>
<p class="pricetag">199€/m</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<input type="submit" class="button" value="select">
</div>
<div class="card gold">
<div class="group">
<h3>Gold</h3>
<p class="pricetag">349€/m</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
</div>
<input type="submit" class="button" value="select">
</div>
</div>
</div>
<footer class="footer">
<p>Copyright <script>document.write(new Date().getFullYear())</script>, HoloTrip Inc.</p>
<nav>
<ul>
<li>
<a href="#" class="nav-link">Privacy</a>
</li>
<li>
<a href="#" class="nav-link">Terms</a>
</li>
<li>
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
</nav>
</footer>
</div>
</main>
<script>
$(window).scroll(function() {
if ($("html").scrollTop() > 0) {
$("header").css({"box-shadow": "0 .2em .5em rgba(0,0,0,.2)", "background": "rgba(242, 242, 242, .8)"})
} else {
$("header").css({"box-shadow": "none", "background": "rgb(235 235 235)"});
};
});
</script>
</body>
</html>