-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (123 loc) · 5.39 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 http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>EdTech</title>
<link rel="stylesheet" href="assets/dist/css/style.css" />
</head>
<body>
<header class="flex flex-row flex-jc-c flex-ai-c">
<h1>EdTech</h1>
<img src="assets/images/search.svg" alt="search icon" />
<button class="button header__button header__login hide">LogIn</button>
<button class="button header__button header__signup">SignUp</button>
</header>
<section class="body__wrapper flex flex-row">
<!-- form -->
<form class="form form__signup hide">
<h2>Sign Up to Your Account</h2>
<h3>
And Get Access to hundred of free tutorials over a wide variety of
topics.
</h3>
<div class="form__progress flex flex-row flex-ai-c">
<div class="circle circle-1"></div>
<div class="line line-1"></div>
<div class="circle circle-2"></div>
<div class="line line-2"></div>
<div class="circle circle-3"></div>
<div class="line line-3"></div>
<div class="circle circle-4"></div>
</div>
<div class="form__email form__input">
<label for="email">Enter Email id:</label>
<input type="text" placeholder="Email" name="email" autocomplete="off"/>
<p class="form__email__message"></p>
</div>
<div class="form__username form__input">
<label for="username">Enter Username:</label>
<input type="text" placeholder="username" name="username" autocomplete="off"/>
<p class="form__email__message"></p>
</div>
<div class="form__password form__input">
<label for="password">Enter Password</label>
<input type="text" placeholder="password" name="password" autocomplete="off"/>
<p class="form__email__message"></p>
</div>
<div class="form__confirm-password form__input">
<label for="confirm-password">Confirm Password</label>
<input
type="text"
placeholder="confirm-password"
name="confirm-password"
autocomplete="off"
/>
<p class="form__email__message"></p>
</div>
<div class="form__terms-and-condition flex flex-row flex-jc-c flex-ai-c">
<input type="checkbox" name="terms-and-condition" autocomplete="off"/>
<label for="terms-and-condition"
>I have read all the terms and condition and willing to
signup.</label
>
<p class="form__email__message"></p>
</div>
<button class="button form__button form__prev">Prev</button>
<button class="button form__button form__next mr-1em hide">Next</button>
<button class="button form__button form__signup__button hide">SignUp</button>
<div class="separate flex flex-ai-c">
<div class="line"></div>
<h3>OR</h3>
<div class="line"></div>
</div>
<div class="options flex flex-row flex-jc-c">
<img src="assets/images/Vector.svg" alt="google icon" />
<img src="assets/images/facebook.svg" alt="facebook icon" />
<img src="assets/images/github.svg" alt="github icon" />
</div>
</form>
<section class="images images__signup hide">
<img src="assets/images/man-walking.svg" alt="man-walking" class="man-walking"/>
<img src="assets/images/autumn-trees.svg" alt="autumn-trees" class="autumn-trees"/>
<img src="assets/images/plant-1.svg" alt="plant-1" class="plant-1"/>
</section>
<form class="form form__signin">
<h2>Sign In to Your Account</h2>
<h3>
We Provide 100 of free Tutorials over a wide variety of topics
</h3>
<div class="form__email form__input">
<label for="email">Enter Email id:</label>
<input type="text" placeholder="Email" name="email" autocomplete="off"/>
<p class="form__email__message"></p>
</div>
<div class="form__password form__input">
<label for="password">Enter Password</label>
<input type="text" placeholder="password" name="password" autocomplete="off"/>
<p class="form__email__message"></p>
</div>
<button class="button form__button form__signin__button">SignIn</button>
<a href="#">Forgot Password</a>
<div class="separate flex flex-ai-c">
<div class="line"></div>
<h3>OR</h3>
<div class="line"></div>
</div>
<div class="options flex flex-row flex-jc-c">
<img src="assets/images/Vector.svg" alt="google icon" />
<img src="assets/images/facebook.svg" alt="facebook icon" />
<img src="assets/images/github.svg" alt="github icon" />
</div>
</form>
<section class="images images__signin">
<img src="assets/images/circle-bg.svg" alt="circle" class="circle-bg">
<img src="assets/images/like-button.svg" alt="like button" class="like-button">
<img src="assets/images/woman-writing.svg" alt="woman writing" class="woman-writing">
<img src="assets/images/speech-modal-1.svg" alt="speech-modal-1" class="speech-modal">
</section>
</section>
<script src="assets/js/script.js"></script>
</body>
</html>