-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
84 lines (80 loc) · 3.98 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
<!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="style.css">
<title>My Landing Page</title>
</head>
<body>
<nav>
<div class="logo">
<img src="https://randomuser.me/api/portraits/men/49.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 Langing Page</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, ex.</p>
<button id="open" class="cta-btn">Sign Up</button>
</header>
<div class="container">
<h2>What is this page about</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae eligendi corporis vitae odit rerum ipsa eos quo neque qui, perferendis quis a inventore rem tenetur enim non eaque nulla amet.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias velit, fugiat similique dolor doloremque provident et? Necessitatibus nam libero corrupti?</p>
<h2>Tell Me More</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem provident soluta explicabo sapiente? Natus, debitis. Consectetur, explicabo? Rem quos id optio beatae, accusamus fugit vero eum nisi facilis hic ipsam ducimus! Reprehenderit eaque voluptatem aperiam vero sint iste nihil quasi?</p>
<h2>Benefits</h2>
<ul>
<li>Lifetime Access</li>
<li>30 day trial</li>
<li>Great Customer Support</li>
</ul>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis harum blanditiis laboriosam molestiae fugit, natus laborum assumenda quasi quas fugiat ut, aliquam cum culpa perferendis dolorum id possimus placeat repudiandae quae esse minima eveniet? Tempore modi quam quos, atque debitis ratione, dolore assumenda maiores placeat, inventore incidunt. Quas, voluptatum ad reiciendis beatae aliquid tempore! Libero, facilis enim! Consequuntur, ad ipsa. Eveniet, architecto unde. Adipisci, sit? Nulla aliquam cupiditate repudiandae voluptate!</p>
</div>
<!-- Model -->
<div class="model-container" id="model">
<div class="model">
<button class="close-btn" id="close">
<i class="fa fa-times"></i>
</button>
<div class="model-header">
<h3>Sign Up</h3>
</div>
<div class="model-content">
<p>Register with us to get offers support and more</p>
<form class="model-form">
<div>
<label for="name">Name</label>
<input class="form-input" type="text" id="name" placeholder="Enter your name">
</div>
<div>
<label for="email">Email</label>
<input class="form-input" type="email" id="email" placeholder="Enter your email">
</div>
<div>
<label for="password">Password</label>
<input class="form-input" type="password" id="password" placeholder="Enter your password">
</div>
<div>
<label for="password2">Confirm Password</label>
<input class="form-input" type="password" id="password2" placeholder="Confirm Password">
</div>
<input type="submit" value="Submit" class="submit-btn">
</form>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/14bcfebee6.js" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>