-
Notifications
You must be signed in to change notification settings - Fork 0
/
login.html
124 lines (100 loc) · 12.4 KB
/
login.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css"
href="https://mdbootstrap.com/api/snippets/static/download/MDB5-Pro-Advanced_3.10.1/css/mdb.min.css">
<link rel="stylesheet" type="text/css"
href="https://mdbootstrap.com/api/snippets/static/download/MDB5-Pro-Advanced_3.10.1/plugins/css/all.min.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<section class="vh-100">
<div class="container-fluid">
<div class="row d-flex justify-content-between h-100">
<div class="col-md-5 col-lg-4 col-xxl-3 bg-card d-flex align-items-center justify-content-around">
<form>
<div class="text-center">
<a class="button" href="#">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg height="60px" width="60px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 503.467 503.467" xml:space="preserve"
fill="<svg height="200px" width="200px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 503.467 503.467" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g transform="translate(1 1)"> <path style="fill:#F1F4FA;" d="M270.349,272.067c25.6,45.227,20.48,96.427-11.947,115.2c-32.427,18.773-80.213-2.56-105.813-46.933 c-25.6-45.227-20.48-96.427,11.947-115.2C196.962,205.507,244.749,226.84,270.349,272.067"></path> <g> <path style="fill: #3A36DB;" d="M455.522,139.8c9.387,52.053,42.667,119.467,42.667,187.733c0,93.867-76.8,170.667-170.667,170.667 c-17.92,0-34.987-2.56-51.2-7.68c11.093-3.413,22.187-8.533,32.427-14.507c81.92-46.933,109.227-151.893,62.293-232.96 c-34.133-58.88-96.427-100.693-130.56-141.653c-7.68-8.533-15.36-17.067-23.04-23.893c23.04-50.347,60.587-74.24,109.227-74.24 C393.229,3.267,438.456,45.934,455.522,139.8"></path> <path style="fill: #3A36DB;" d="M258.402,387.267c32.427-18.773,38.4-70.827,11.947-115.2 c-25.6-45.227-73.387-65.707-105.813-46.933s-38.4,70.827-11.947,115.2C178.189,384.707,225.122,406.04,258.402,387.267 M276.322,490.52c-75.093,24.747-159.573-5.973-200.533-76.8C41.656,354.84,36.536,278.894,18.616,229.4 C-13.811,139.8,4.109,80.067,61.282,46.787c50.347-29.013,102.4-21.333,156.16,29.867c7.68,6.827,15.36,15.36,23.04,23.893 c34.133,40.107,96.427,81.92,130.56,141.653c46.933,81.92,19.627,186.027-62.293,232.96 C298.509,481.987,287.416,487.107,276.322,490.52"></path> </g> </g> <path style="fill:#06152B;" d="M225.269,503.467c-60.587,0-119.467-31.573-151.893-87.04c-22.187-38.4-32.427-83.627-40.96-123.733 c-5.12-22.187-9.387-43.52-16.213-60.587C-15.371,143.36-0.864,80.214,60.576,44.373c61.44-34.987,123.733-17.067,184.32,55.467 c11.947,14.507,28.16,29.013,45.227,44.373c29.867,27.307,64,58.88,86.187,97.28c23.04,40.107,29.867,87.893,17.067,133.12 c-11.947,45.227-40.96,82.773-81.92,105.813C285.002,495.787,255.136,503.467,225.269,503.467z M121.162,34.987 c-18.773,0-37.547,5.12-56.32,16.213C7.669,84.48-5.984,144.214,23.882,228.693c5.973,17.92,11.093,39.253,16.213,61.44 c8.533,39.253,18.773,84.48,40.107,122.027c46.08,79.36,147.627,106.667,226.987,60.587l0,0 c38.4-22.187,65.707-58.027,77.653-100.693c11.093-42.667,5.973-87.893-16.213-126.293c-21.333-37.547-54.613-68.267-84.48-95.573 c-17.067-15.36-33.28-30.72-46.08-45.227C199.669,58.88,160.416,34.987,121.162,34.987z M337.056,503.467 c-2.56,0-4.267-1.707-4.267-4.267s1.707-4.267,4.267-4.267c88.747-4.267,157.867-77.653,157.867-166.4 c0-42.667-13.653-86.187-25.6-124.587c-6.827-22.187-13.653-43.52-17.067-62.293C436.042,53.76,394.229,8.534,328.522,8.534 c-38.4,0-69.12,15.36-90.453,45.227c-1.707,1.707-4.267,2.56-5.973,0.853c-1.707-1.707-2.56-4.267-0.853-5.973 C254.282,16.214,287.562,0,328.522,0c70.827,0,115.2,46.933,132.267,139.947c3.413,18.773,10.24,39.253,17.067,61.44 c11.947,39.253,25.6,82.773,25.6,127.147C503.456,421.547,430.069,498.347,337.056,503.467L337.056,503.467z M232.949,398.507 c-10.24,0-20.48-2.56-30.72-6.827c-20.48-9.387-39.253-26.453-52.053-49.493c-27.307-46.933-20.48-101.547,13.653-121.173 c34.987-19.627,84.48,1.707,111.787,48.64l0,0c27.307,46.933,20.48,101.547-13.653,121.173 C252.576,395.947,243.189,398.507,232.949,398.507z M191.989,222.72c-8.533,0-17.067,1.707-24.747,5.973 c-30.72,17.92-34.987,66.56-10.24,109.227c11.947,21.333,29.013,37.547,48.64,46.08c18.773,8.533,36.693,8.533,52.053,0 c30.72-17.92,34.987-66.56,10.24-109.227l0,0C249.162,242.347,218.442,222.72,191.989,222.72z M243.189,298.667 c-1.707,0-3.413-0.853-3.413-2.56C223.562,264.534,191.989,256,191.136,256c-2.56-0.853-3.413-2.56-3.413-5.12 c0.853-2.56,2.56-3.413,5.12-3.413c1.707,0,35.84,9.387,53.76,45.227c0.853,1.707,0,4.267-1.707,5.973 C244.896,298.667,244.042,298.667,243.189,298.667z"></path> </g></svg>">
<g id="SVGRepo_bgCarrier" stroke-width="0" />
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
<g id="SVGRepo_iconCarrier">
<g transform="translate(1 1)">
<path style="fill:#F1F4FA;"
d="M270.349,272.067c25.6,45.227,20.48,96.427-11.947,115.2c-32.427,18.773-80.213-2.56-105.813-46.933 c-25.6-45.227-20.48-96.427,11.947-115.2C196.962,205.507,244.749,226.84,270.349,272.067" />
<g>
<path style="fill:var(--main-indigo-color);"
d="M455.522,139.8c9.387,52.053,42.667,119.467,42.667,187.733c0,93.867-76.8,170.667-170.667,170.667 c-17.92,0-34.987-2.56-51.2-7.68c11.093-3.413,22.187-8.533,32.427-14.507c81.92-46.933,109.227-151.893,62.293-232.96 c-34.133-58.88-96.427-100.693-130.56-141.653c-7.68-8.533-15.36-17.067-23.04-23.893c23.04-50.347,60.587-74.24,109.227-74.24 C393.229,3.267,438.456,45.934,455.522,139.8" />
<path style="fill:var(--main-indigo-color);"
d="M258.402,387.267c32.427-18.773,38.4-70.827,11.947-115.2 c-25.6-45.227-73.387-65.707-105.813-46.933s-38.4,70.827-11.947,115.2C178.189,384.707,225.122,406.04,258.402,387.267 M276.322,490.52c-75.093,24.747-159.573-5.973-200.533-76.8C41.656,354.84,36.536,278.894,18.616,229.4 C-13.811,139.8,4.109,80.067,61.282,46.787c50.347-29.013,102.4-21.333,156.16,29.867c7.68,6.827,15.36,15.36,23.04,23.893 c34.133,40.107,96.427,81.92,130.56,141.653c46.933,81.92,19.627,186.027-62.293,232.96 C298.509,481.987,287.416,487.107,276.322,490.52" />
</g>
</g>
<path style="fill:var(--secondary-bg-color);"
d="M225.269,503.467c-60.587,0-119.467-31.573-151.893-87.04c-22.187-38.4-32.427-83.627-40.96-123.733 c-5.12-22.187-9.387-43.52-16.213-60.587C-15.371,143.36-0.864,80.214,60.576,44.373c61.44-34.987,123.733-17.067,184.32,55.467 c11.947,14.507,28.16,29.013,45.227,44.373c29.867,27.307,64,58.88,86.187,97.28c23.04,40.107,29.867,87.893,17.067,133.12 c-11.947,45.227-40.96,82.773-81.92,105.813C285.002,495.787,255.136,503.467,225.269,503.467z M121.162,34.987 c-18.773,0-37.547,5.12-56.32,16.213C7.669,84.48-5.984,144.214,23.882,228.693c5.973,17.92,11.093,39.253,16.213,61.44 c8.533,39.253,18.773,84.48,40.107,122.027c46.08,79.36,147.627,106.667,226.987,60.587l0,0 c38.4-22.187,65.707-58.027,77.653-100.693c11.093-42.667,5.973-87.893-16.213-126.293c-21.333-37.547-54.613-68.267-84.48-95.573 c-17.067-15.36-33.28-30.72-46.08-45.227C199.669,58.88,160.416,34.987,121.162,34.987z M337.056,503.467 c-2.56,0-4.267-1.707-4.267-4.267s1.707-4.267,4.267-4.267c88.747-4.267,157.867-77.653,157.867-166.4 c0-42.667-13.653-86.187-25.6-124.587c-6.827-22.187-13.653-43.52-17.067-62.293C436.042,53.76,394.229,8.534,328.522,8.534 c-38.4,0-69.12,15.36-90.453,45.227c-1.707,1.707-4.267,2.56-5.973,0.853c-1.707-1.707-2.56-4.267-0.853-5.973 C254.282,16.214,287.562,0,328.522,0c70.827,0,115.2,46.933,132.267,139.947c3.413,18.773,10.24,39.253,17.067,61.44 c11.947,39.253,25.6,82.773,25.6,127.147C503.456,421.547,430.069,498.347,337.056,503.467L337.056,503.467z M232.949,398.507 c-10.24,0-20.48-2.56-30.72-6.827c-20.48-9.387-39.253-26.453-52.053-49.493c-27.307-46.933-20.48-101.547,13.653-121.173 c34.987-19.627,84.48,1.707,111.787,48.64l0,0c27.307,46.933,20.48,101.547-13.653,121.173 C252.576,395.947,243.189,398.507,232.949,398.507z M191.989,222.72c-8.533,0-17.067,1.707-24.747,5.973 c-30.72,17.92-34.987,66.56-10.24,109.227c11.947,21.333,29.013,37.547,48.64,46.08c18.773,8.533,36.693,8.533,52.053,0 c30.72-17.92,34.987-66.56,10.24-109.227l0,0C249.162,242.347,218.442,222.72,191.989,222.72z M243.189,298.667 c-1.707,0-3.413-0.853-3.413-2.56C223.562,264.534,191.989,256,191.136,256c-2.56-0.853-3.413-2.56-3.413-5.12 c0.853-2.56,2.56-3.413,5.12-3.413c1.707,0,35.84,9.387,53.76,45.227c0.853,1.707,0,4.267-1.707,5.973 C244.896,298.667,244.042,298.667,243.189,298.667z" />
</g>
</svg>
</a>
<h5 class="p-3">Log in</h5>
</div>
<div class="d-grid gap-2 d-md-block">
<button class="btn btn-primary btn-lg me-1" href="#!" role="button">
<img class="px-2" src="./icons/Google.svg" alt="Google logo">
Google
</button>
<button class="btn btn-primary btn-lg" href="#!" role="button">
<img class="px-2" src="./icons/Facebook.svg" alt="Facebook logo">
Facebook</button>
</div>
<div class="divider d-flex align-items-center my-4">
<p class="text-center fw-bold mx-3 mb-0">Or</p>
</div>
<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" id="form1Example13" class="form-control form-control-lg" />
<label class="form-label" for="form1Example13">Email address</label>
</div>
<!-- Password input -->
<div class="form-outline mb-4">
<i id="eye-password" class="fas fa-eye-slash trailing"></i>
<input type="password" id="form1Example24" class="form-control form-control-lg" />
<label class="form-label" for="form1Example24">Password</label>
</div>
<div class="d-flex justify-content-around align-items-center mb-4">
<!-- Checkbox -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form1Example3" checked />
<label class="form-check-label" for="form1Example3"> Remember me </label>
</div>
<a class="ps-4" style="color: var(--main-indigo-color)" href="./recover.html">Reset Password?</a>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary btn-lg btn-block">Sign in</button>
<div class="text-center mt-4">
<span>Don’t have account yet?</span><a class="ms-2" style="color: var(--main-indigo-color)"
href="./sign-up.html">New Account</a>
</div>
</form>
</div>
<div class="col-md-6 col-lg-7 col-xl-8 d-flex align-items-center justify-content-center d-none d-sm-block">
<div class="container">
<object type="image/svg+xml" data="./img/Illustration-login.svg"></object>
</div>
</div>
</div>
</div>
</section>
<script src="./js/theme.js"></script>
<script src="https://mdbootstrap.com/api/snippets/static/download/MDB5-Pro-Advanced_3.10.1/js/mdb.min.js"></script>
<script
src="https://mdbootstrap.com/api/snippets/static/download/MDB5-Pro-Advanced_3.10.1/plugins/js/all.min.js"></script>
<script src="./js/showPassword.js"></script>
</body>
</html>