-
Notifications
You must be signed in to change notification settings - Fork 0
/
login.css
62 lines (53 loc) · 2.81 KB
/
login.css
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
/* login.css */
body {
margin: 0; /* sets the margin of the body element to 0 */
padding: 0; /* sets the padding of the body element to 0 */
display: flex; /* uses flexbox to align and distribute items horizontally */
justify-content: center; /* centers the items horizontally within the body */
align-items: center; /* centers the items vertically within the body */
height: 100vh; /* makes the body cover the full height of the viewport */
background-color: #ecf0f1; /* sets the background color of the body */
font-family: 'Space Grotesk', sans-serif; /* updated font family */
}
.login-container {
width: 80%; /* sets the width of the login container to cover most of the viewport */
max-width: 500px; /* sets the maximum width for the login container */
padding: 40px; /* sets the padding inside the login container */
border-radius: 20px; /* rounds the corners of the login container */
background-color: #ecf0f1; /* sets the background color of the login container */
box-shadow: 5px 5px 10px #bdc3c7, -5px -5px 10px #ffffff; /* applies a neumorphic box shadow effect to the login container */
}
.neumorphic-form {
display: flex; /* uses flexbox to align and distribute items horizontally */
flex-direction: column; /* sets the direction of the flex items to be vertical */
align-items: center; /* centers the items horizontally within the flex container */
}
.form-group {
margin-bottom: 20px; /* sets the bottom margin of the form group */
}
label {
font-weight: bold; /* sets the font weight of the label element to bold */
}
input[type="text"],
input[type="password"] {
width: 100%; /* sets the width of the input elements to 100% */
padding: 15px; /* sets the padding inside the input elements */
border: none; /* removes the border of the input elements */
border-radius: 10px; /* rounds the corners of the input elements */
background-color: #ecf0f1; /* sets the background color of the input elements */
box-shadow: inset 5px 5px 10px #bdc3c7, inset -5px -5px 10px #ffffff; /* applies a neumorphic box shadow effect to the input elements */
}
button {
padding: 15px 30px; /* sets the padding inside the button */
border: none; /* removes the border of the button */
border-radius: 10px; /* rounds the corners of the button */
background-color: #ecf0f1; /* sets the background color of the button */
box-shadow: 5px 5px 10px #bdc3c7, -5px -5px 10px #ffffff; /* applies a neumorphic box shadow effect to the button */
cursor: pointer; /* changes the cursor to a pointer when hovering over the button */
}
button:hover {
transform: translateY(2px); /* translates the button 2 pixels down when hovering over it */
}
button:active {
transform: translateY(0); /* resets the translation of the button when it is clicked */
}