Skip to content

Commit bfd5c6b

Browse files
KinanGH98KinanGH98
committed
1. Created a dashboard page.
2. Green login page now uses a local background image instead of remote. 3. Purple login page's background is now a gradient.
1 parent 14269ad commit bfd5c6b

13 files changed

+446
-162
lines changed

‎favicon.ico

0 Bytes
Binary file not shown.

‎green-login-page.html

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<script crossorigin="anonymous" src="https://kit.fontawesome.com/8955b6fb14.js"></script>
6+
<meta content="width=device-width, initial-scale=1" name="viewport">
7+
<title>Tranquil Login</title>
8+
<link href="styles.css" rel="stylesheet">
9+
<style>
10+
:root {
11+
--ctaColor: rgba(32, 192, 93, 0.938);
12+
--inputTintColor: rgba(11, 230, 66, 0.116);
13+
--inputActiveColor: rgba(9, 114, 35, 0.116);
14+
}
15+
16+
html {
17+
min-height: 100%;
18+
font-weight: 600;
19+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
20+
color: white;
21+
}
22+
23+
h2 {
24+
text-align: center;
25+
letter-spacing: 1px;
26+
}
27+
28+
form {
29+
background: linear-gradient(to right, #15995794, #15579998);
30+
border-radius: 15px;
31+
padding: 18px 20px;
32+
margin: auto;
33+
width: 80%;
34+
max-width: 500px;
35+
display: flex;
36+
flex-direction: column;
37+
}
38+
39+
input {
40+
color: inherit;
41+
font-family: inherit;
42+
font-weight: inherit;
43+
margin-bottom: 20px;
44+
height: 35px;
45+
border-radius: 8px;
46+
border: 0;
47+
background-color: rgba(240, 248, 255, 0.432);
48+
text-indent: 10px;
49+
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.356);
50+
outline: none;
51+
}
52+
53+
input[type="text"]:focus,
54+
input[type="password"]:focus {
55+
box-shadow: 0 0 0 2px white;
56+
}
57+
58+
input[type="submit"]:hover,
59+
input[type="submit"]:focus,
60+
input[type="button"]:focus,
61+
input[type="button"]:hover {
62+
background-color: var(--inputTintColor);
63+
}
64+
65+
input[type="submit"]:active,
66+
input[type="button"]:active {
67+
background-color: var(--inputActiveColor);
68+
}
69+
70+
::placeholder {
71+
color: inherit;
72+
opacity: .7;
73+
margin-left: 70px;
74+
}
75+
76+
body {
77+
background-size: cover;
78+
background: url("images/green-login-background.jpg") no-repeat center;
79+
background-size: cover;
80+
margin: 0;
81+
height: 98vh;
82+
}
83+
84+
input[type="submit"] {
85+
margin-top: 30px;
86+
background-color: var(--ctaColor);
87+
cursor: pointer;
88+
width: 100%;
89+
text-indent: revert;
90+
}
91+
92+
.signupBtn {
93+
border: 2px solid var(--ctaColor);
94+
background-color: rgba(0, 0, 0, 0);
95+
cursor: pointer;
96+
width: 100%;
97+
text-indent: revert;
98+
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
99+
}
100+
101+
.buttons {
102+
display: flex;
103+
width: 100%;
104+
align-items: baseline;
105+
flex-direction: row;
106+
gap: 20px;
107+
margin-bottom: 10px;
108+
}
109+
110+
label {
111+
margin-left: 5px;
112+
margin-bottom: 5px;
113+
}
114+
115+
.container {
116+
display: flex;
117+
justify-content: center;
118+
align-items: center;
119+
height: 90%;
120+
}
121+
122+
</style>
123+
</head>
124+
125+
<body>
126+
<a class="nav-back" href="index.html"><i class="fa-solid fa-arrow-left"></i></a>
127+
<div class="container">
128+
<form>
129+
<h2>Welcome</h2>
130+
<label for="email">Email</label>
131+
<input id="email" name="email" placeholder="Enter your email..." type="text">
132+
<label for="password">Password</label>
133+
<input id="password" name="password" placeholder="Enter your password..." type="password">
134+
<div class="buttons">
135+
<input name="Password" onclick="printData()" type="submit" value="LOGIN">
136+
<input class="signupBtn" type="button" value="SIGNUP">
137+
</div>
138+
</form>
139+
</div>
140+
<script>
141+
function printData() {
142+
let email = document.getElementById('email').value;
143+
let pass = document.getElementById('password').value;
144+
alert('Hi ' + email + ', Your pass is : ' + pass);
145+
}
146+
</script>
147+
</body>
148+
149+
</html>

‎images/green-login-background.jpg

354 KB
Loading

‎images/index-card-body.svg

Lines changed: 13 additions & 0 deletions
Loading

‎images/index-profile-pic.jpg

80.7 KB
Loading

‎index-styles.css

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
:root {
2+
--i-radius: 20px;
3+
--image-border-radius: var(--i-radius) var(--i-radius) var(--i-radius) 60px;
4+
--glass-color: rgba(95, 62, 97, 0.5);
5+
--main-color: rgba(0, 0, 0, 0.75);
6+
--whole-page-margin: 50px;
7+
}
8+
9+
html {
10+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
11+
color: #eaeaea;
12+
}
13+
14+
body {
15+
margin: 0;
16+
background: linear-gradient(109.6deg, rgb(123, 90, 224) 11.2%, rgb(164, 46, 253) 32.6%, rgb(213, 56, 234) 62.7%, rgb(251, 138, 52) 100.2%);
17+
}
18+
19+
.header {
20+
margin: auto;
21+
background-color: var(--main-color);
22+
height: 60px;
23+
}
24+
25+
.header-links {
26+
display: flex;
27+
justify-content: space-evenly;
28+
align-items: center;
29+
flex-wrap: wrap;
30+
height: 100%;
31+
}
32+
33+
.header-link {
34+
color: inherit;
35+
font-style: normal;
36+
font-size: 16px;
37+
text-decoration: none;
38+
}
39+
40+
.bio-container {
41+
display: flex;
42+
flex-direction: row;
43+
flex-wrap: wrap;
44+
justify-content: center;
45+
gap: 20px;
46+
padding: 35px;
47+
background-color: var(--glass-color);
48+
margin: var(--whole-page-margin);
49+
border-radius: 50px;
50+
max-width: 1000px;
51+
}
52+
53+
.bio-text {
54+
max-width: 700px;
55+
font-size: 20px;
56+
margin-top: 0;
57+
}
58+
59+
.profile-pic {
60+
width: 250px;
61+
height: 250px;
62+
border-radius: 500px;
63+
}
64+
65+
#projects-header {
66+
text-align: center;
67+
margin: 0;
68+
}
69+
70+
.page-container {
71+
margin-top: var(--whole-page-margin);
72+
display: flex;
73+
align-items: center;
74+
flex-wrap: wrap;
75+
justify-content: center;
76+
gap: 25px;
77+
}
78+
79+
.card {
80+
border-radius: 35px;
81+
overflow: hidden;
82+
cursor: pointer;
83+
}
84+
85+
.card:hover > .card-image-container > .card-image {
86+
transform: scale(1.05);
87+
}
88+
89+
.card-image {
90+
width: 400px;
91+
border-radius: var(--image-border-radius);
92+
transition: transform 0.25s, background 2s;
93+
object-fit: cover;
94+
}
95+
96+
.card-image-container {
97+
overflow: hidden;
98+
border-radius: var(--image-border-radius);
99+
}
100+
101+
.card-title {
102+
margin-top: 70px;
103+
margin-bottom: 5px;
104+
margin-left: 10px;
105+
}
106+
107+
.card-desc {
108+
margin-bottom: 10px;
109+
margin-left: 10px;
110+
}
111+
112+
.card-cta {
113+
font-weight: bold;
114+
font-size: 17px;
115+
text-decoration: none;
116+
background-color: var(--main-color);
117+
-webkit-backdrop-filter: blur(10px);
118+
backdrop-filter: blur(10px);
119+
color: inherit;
120+
padding: 13px;
121+
border-radius: 17px;
122+
text-indent: 15px;
123+
margin-top: 23px;
124+
/*margin-left: 120px;*/
125+
/*width: 60%;*/
126+
text-align: center;
127+
}
128+
129+
.card-lower-part {
130+
display: flex;
131+
flex-direction: column;
132+
gap: 10px;
133+
padding: 10px;
134+
--radius: 20px;
135+
border-radius: 0 var(--radius) var(--radius) var(--radius);
136+
background-image: url("images/index-card-body.svg");
137+
background-repeat: no-repeat;
138+
background-size: cover;
139+
position: relative;
140+
top: -50px;
141+
height: 250px;
142+
width: 381px;
143+
}
144+
145+
#header-website-logo {
146+
line-height: 0;
147+
position: absolute;
148+
margin: 7px;
149+
margin-left: 25px;
150+
}
151+
152+
.footer {
153+
height: 300px;
154+
background-color: var(--main-color);
155+
margin-top: var(--whole-page-margin);
156+
margin-bottom: 0;
157+
display: flex;
158+
justify-content: space-around;
159+
align-items: center;
160+
}
161+
162+
#footer-website-logo {
163+
line-height: 0;
164+
}
165+
166+
.footer-links {
167+
display: flex;
168+
flex-direction: column;
169+
justify-content: space-evenly;
170+
align-items: center;
171+
flex-wrap: wrap;
172+
height: 100%;
173+
}

0 commit comments

Comments
 (0)