-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (130 loc) · 4.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<title>My Landing Page</title>
</head>
<body>
<nav id="navbar">
<div class="logo">
<img src="https://randomuser.me/api/portraits/men/76.jpg" alt="user" />
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
<header>
<button id="toggle" class="toggle">
<i class="fa fa-bars fa-2x"></i>
</button>
<h1>My Landing Page</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus,
adipisci!
</p>
<button class="cta-btn" id="open">Sign Up</button>
</header>
<div class="container"></div>
<h2>What is this landing page about?</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, cupiditate
quo autem quaerat expedita id veritatis, explicabo fugiat laborum veniam
sunt beatae odit ullam rem aliquam est aut earum quidem.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas nisi
numquam sint accusamus adipisci assumenda consequatur repudiandae repellat
excepturi temporibus!
</p>
<h2>Tell Me More</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum soluta
iusto numquam accusamus porro dolores assumenda cumque modi debitis
officiis ad, quia adipisci libero mollitia, sapiente fuga. Eveniet, sed
tempore, quaerat ad quidem a aliquid impedit reiciendis, optio minus
voluptatem.
</p>
<h2>Benefits</h2>
<ul>
<li>Lifetime Access</li>
<li>30 Day Money Back Guarantee</li>
<li>Tailored Customer Support</li>
</ul>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum
tempore fugiat facere, numquam cumque ducimus, deserunt in eos eligendi
eum atque impedit aspernatur temporibus, modi earum! Consequuntur ratione
excepturi earum consequatur tenetur eos! Nobis, nemo eveniet neque numquam
assumenda nesciunt dolorum odio. Culpa repudiandae aspernatur, inventore
voluptatem dolorum, nihil provident molestiae, minima modi amet vitae
consectetur deleniti ipsam cumque at beatae sint quibusdam. Aperiam
eligendi animi neque amet adipisci dolor!
</p>
<!-- modal -->
<div class="modal-container" id="modal">
<div class="modal">
<button class="close-btn" id="close">
<i class="fa fa-times"></i>
</button>
<div class="modal-header">
<h3>Sign Up</h3>
</div>
<div class="modal-content">
<p>Register with us to get offers, support, and more</p>
<form class="modal-form">
<div>
<label for="name">Name</label>
<input
type="text"
id="name"
placeholder="Enter Name"
class="form-input"
/>
</div>
<div>
<label for="email">Email</label>
<input
type="email "
id="email"
placeholder="Enter Email"
class="form-input"
/>
</div>
<div>
<label for="password">Password</label>
<input
type="password"
id="password"
placeholder="Enter Password"
class="form-input"
/>
</div>
<div>
<label for="password2">Confirm Password</label>
<input
type="password"
id="password2"
placeholder="Confirm Password"
class="form-input"
/>
</div>
<input type="submit" value="Submit" class="submit-btn" />
</form>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>