-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (113 loc) · 3.68 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">
<title>Moz Burgers</title>
<link rel="stylesheet" href="css/main.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body class="loginBack flex center">
<div class="loginCard flex center">
<div class="loginImgHolder flex center">
<div class="text flex center column">
<h1>Welcome Back</h1>
<p>To be the leading burger destination recognized for our exceptional service, quality ingredients, and
innovative menu, creating a welcoming and inclusive environment where every customer feels valued
and
delighted.</p>
</div>
</div>
<div class="loginForm m-sm-0 m-3">
<div class="logoArea flex align-center">
<div class="logo me-2"></div>
<h2 class="fs-2">Moz Burgers</h2>
</div>
<p class="fs-4">Please Enter Your Login Details</p>
<div class="formField">
<p>Enter Your Email Address</p>
<input type="text">
<div class="formField">
<p>Enter Your Password</p>
<input type="password">
</div>
<h6 class="float-end mt-2 mb-3 orangeFont">Forgot Password</h6>
<input type="button" class="mozButton" value="Login">
<h6 class="mt-2 orangeFont">Registration only allowed with a admin</h6>
</div>
</div>
</body>
<style>
.loginBack {
background-color: var(--orangePrimary);
height: 100vh;
width: 100%;
}
.loginCard {
background-color: white;
height: 694px;
width: min(1200px, 100%);
}
.loginImgHolder {
background-image: url(images/login/loginImage.png);
background-position: center;
background-size: cover;
width: 529px;
height: 532px;
border-radius: 62px 62px 0px 62px;
color: var(--lightFont);
padding: 30px;
margin-right: 40px;
}
.loginImgHolder .text p {
font-size: larger;
text-align: justify;
}
.loginImgHolder .text {
backdrop-filter: blur(10px);
padding: 5px;
}
@media (max-width: 1100px) {
.loginImgHolder {
display: none;
}
}
.loginForm {
width: min(100%, 399px);
height: 385px;
font-weight: 600;
}
.logo {
background-image: url(images/login/logo.png);
height: 48px;
width: 60px;
background-size: cover;
}
.formField input {
width: 100%;
border: solid 2.5px var(--orangeFontColor);
height: 47px;
border-radius: 15px 15px 0 15px;
margin-top: 0;
padding-left: 10px;
color: var(--orangeFontColor);
}
.formField input:focus {
border: solid 2.5px var(--orangeFontColor);
outline: none;
}
.mozButton {
background-color: var(--orangePrimary);
color: var(--lightFont) !important;
font-size: 26px;
}
.formField p {
margin-bottom: 0;
padding-bottom: 5px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</html>