Skip to content

Commit bc70fdd

Browse files
KinanGH98KinanGH98
committed
1. Added header and footer to the dashboard page.
2. Some bug fixes in the projects pages. 3. Reduces green login page screenshot size. 4. Dashboard cards are now mobile friendly.
1 parent bfd5c6b commit bc70fdd

File tree

6 files changed

+175
-48
lines changed

6 files changed

+175
-48
lines changed

‎green-login-page.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,6 @@
7474
}
7575

7676
body {
77-
background-size: cover;
7877
background: url("images/green-login-background.jpg") no-repeat center;
7978
background-size: cover;
8079
margin: 0;
@@ -123,7 +122,7 @@
123122
</head>
124123

125124
<body>
126-
<a class="nav-back" href="index.html"><i class="fa-solid fa-arrow-left"></i></a>
125+
<a class="nav-back" href="index.html#projects-header"><i class="fa-solid fa-arrow-left"></i></a>
127126
<div class="container">
128127
<form>
129128
<h2>Welcome</h2>

‎index-styles.css

Lines changed: 109 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,18 @@ body {
1818

1919
.header {
2020
margin: auto;
21+
padding: 0 20px;
2122
background-color: var(--main-color);
22-
height: 60px;
23+
display: flex;
24+
justify-content: space-evenly;
25+
align-items: center;
26+
min-height: 60px;
2327
}
2428

2529
.header-links {
30+
width: 75%;
2631
display: flex;
27-
justify-content: space-evenly;
28-
align-items: center;
29-
flex-wrap: wrap;
30-
height: 100%;
32+
justify-content: space-around;
3133
}
3234

3335
.header-link {
@@ -37,12 +39,71 @@ body {
3739
text-decoration: none;
3840
}
3941

42+
.hamburger {
43+
color: rgb(110, 73, 149);
44+
border: 0;
45+
border-radius: 500px;
46+
font-size: 16px;
47+
width: 42px;
48+
height: 42px;
49+
display: none;
50+
align-items: center;
51+
justify-content: center;
52+
cursor: pointer;
53+
background-color: #eaeaea;
54+
}
55+
56+
@media all and (max-width: 800px) {
57+
.header {
58+
flex-direction: column;
59+
justify-content: space-between;
60+
padding: 20px;
61+
}
62+
63+
.mobile-header {
64+
margin-top: 7px;
65+
display: flex;
66+
justify-content: space-between;
67+
align-items: center;
68+
width: 100%;
69+
}
70+
71+
.hamburger {
72+
display: flex;
73+
}
74+
75+
.header-links {
76+
margin-top: 15px;
77+
flex-direction: column;
78+
align-items: center;
79+
justify-content: space-evenly;
80+
gap: 25px;
81+
}
82+
83+
.header-links {
84+
display: none;
85+
}
86+
87+
.header-link {
88+
font-size: 20px;
89+
}
90+
}
91+
92+
.hamburger:hover {
93+
background-color: #c5c5c5;
94+
}
95+
96+
.hamburger:active {
97+
background-color: #818181;
98+
}
99+
40100
.bio-container {
41101
display: flex;
42102
flex-direction: row;
43103
flex-wrap: wrap;
44104
justify-content: center;
45-
gap: 20px;
105+
align-items: center;
106+
gap: 30px;
46107
padding: 35px;
47108
background-color: var(--glass-color);
48109
margin: var(--whole-page-margin);
@@ -51,11 +112,17 @@ body {
51112
}
52113

53114
.bio-text {
54-
max-width: 700px;
115+
max-width: 50%;
55116
font-size: 20px;
56117
margin-top: 0;
57118
}
58119

120+
@media all and (max-width: 1024px) {
121+
.bio-text {
122+
max-width: 90%;
123+
}
124+
}
125+
59126
.profile-pic {
60127
width: 250px;
61128
height: 250px;
@@ -68,17 +135,18 @@ body {
68135
}
69136

70137
.page-container {
138+
margin: auto;
71139
margin-top: var(--whole-page-margin);
72140
display: flex;
73141
align-items: center;
74142
flex-wrap: wrap;
75143
justify-content: center;
76144
gap: 25px;
145+
width: 90%;
77146
}
78147

79148
.card {
80149
border-radius: 35px;
81-
overflow: hidden;
82150
cursor: pointer;
83151
}
84152

@@ -87,10 +155,10 @@ body {
87155
}
88156

89157
.card-image {
90-
width: 400px;
158+
width: 100%;
159+
max-width: 400px;
91160
border-radius: var(--image-border-radius);
92161
transition: transform 0.25s, background 2s;
93-
object-fit: cover;
94162
}
95163

96164
.card-image-container {
@@ -121,8 +189,6 @@ body {
121189
border-radius: 17px;
122190
text-indent: 15px;
123191
margin-top: 23px;
124-
/*margin-left: 120px;*/
125-
/*width: 60%;*/
126192
text-align: center;
127193
}
128194

@@ -138,36 +204,49 @@ body {
138204
background-size: cover;
139205
position: relative;
140206
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;
207+
max-width: 381px;
150208
}
151209

152210
.footer {
153-
height: 300px;
211+
min-height: 300px;
154212
background-color: var(--main-color);
155213
margin-top: var(--whole-page-margin);
156214
margin-bottom: 0;
157215
display: flex;
158-
justify-content: space-around;
216+
justify-content: space-evenly;
159217
align-items: center;
160-
}
161-
162-
#footer-website-logo {
163-
line-height: 0;
218+
flex-wrap: wrap;
219+
padding: 30px;
220+
gap: 25px;
164221
}
165222

166223
.footer-links {
167224
display: flex;
168-
flex-direction: column;
169-
justify-content: space-evenly;
225+
flex-direction: row;
226+
justify-content: space-between;
170227
align-items: center;
171228
flex-wrap: wrap;
172-
height: 100%;
229+
gap: 25px;
230+
}
231+
232+
.footer-text {
233+
padding-left: 15px;
234+
border-left: 2px solid #dadada;
235+
}
236+
237+
.footer-link {
238+
color: inherit;
239+
font-style: normal;
240+
font-size: 35px;
241+
text-decoration: none;
242+
}
243+
244+
@media all and (max-width: 800px) {
245+
.footer-text {
246+
border-left: 0;
247+
border-top: 2px solid #dadada;
248+
padding-left: 0;
249+
padding-top: 42px;
250+
padding-bottom: 15px;
251+
}
173252
}

‎index.html

Lines changed: 61 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,21 @@
55
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
66
name="viewport">
77
<meta content="ie=edge" http-equiv="X-UA-Compatible">
8-
<title>Dashboard</title>
8+
<title>Dashboard | Welcome to Kinan's website.</title>
9+
<script crossorigin="anonymous" src="https://kit.fontawesome.com/8955b6fb14.js"></script>
910
<link href="index-styles.css" rel="stylesheet">
1011
</head>
1112
<body>
1213
<header>
1314
<div class="header">
14-
<a href="index.html" id="header-website-logo"><img
15-
alt="Website logo."
16-
src="website-logo.png"
17-
width="45px"></a>
15+
<div class="mobile-header">
16+
<a href="index.html" style="line-height: 0;"><img
17+
alt="Website logo."
18+
src="website-logo.png"
19+
width="45px"></a>
20+
<button class="hamburger" onclick="toggleHamburgerMenu()"><i class="fa-solid fa-bars fa-flip-both"></i>
21+
</button>
22+
</div>
1823
<div class="header-links">
1924
<a class="header-link" href="">Coming soon...</a>
2025
<a class="header-link" href="">Coming soon...</a>
@@ -24,7 +29,7 @@
2429
</header>
2530
<div style="display: flex; justify-content: center">
2631
<div class="bio-container">
27-
<div class="bio-text"><h3>Hi! I'm Kinan</h3>
32+
<div class="bio-text"><h3 style="margin: 0;">Hi! I'm Kinan</h3>
2833
<br>A web development enthusiast. This website is my playground for learning and
2934
experimenting with code. Here you'll find projects I'm working on, from the basics to new things I'm
3035
exploring.
@@ -60,15 +65,58 @@ <h2 class="card-title">Amethyst Login</h2>
6065
<footer>
6166
<div class="footer">
6267
<div class="footer-links">
63-
<a class="header-link" href="mailto:kinangh98@gmail.com">kinangh98@gmail.com</a>
64-
<a class="header-link" href="https://facebook.com/ahmedkinan.ghbash">Facebook</a>
65-
<a class="header-link" href="https://github.com/KinanGH98/">GitHub</a>
68+
<a class="footer-link" href="mailto:kinangh98@gmail.com"><i class="fa-solid fa-envelope"></i></a>
69+
<a class="footer-link" href="https://facebook.com/ahmedkinan.ghbash"><i
70+
class="fa-brands fa-facebook"></i></a>
71+
<a class="footer-link" href="https://github.com/KinanGH98/"><i class="fa-brands fa-github"></i></a>
72+
</div>
73+
<div class="footer-text">
74+
<a href="index.html" id="footer-website-logo"><img
75+
alt="Website logo."
76+
src="website-logo.png"
77+
width="80px"></a>
78+
<br><br>
79+
Made by Kinan, a web development student.
80+
<br>
81+
<br>
82+
Made with HTML, CSS, and a sprinkle of JavaScript.
83+
<br>
84+
<br>
85+
This website is a constant experiment. Check back often to see the updates!
6686
</div>
67-
<a href="index.html" id="footer-website-logo"><img
68-
alt="Website logo."
69-
src="website-logo.png"
70-
width="100px"></a>
7187
</div>
7288
</footer>
89+
90+
<script>
91+
const hamburgerMenu = document.querySelector(".header-links");
92+
window.onresize = menuResized;
93+
let menuOpened;
94+
95+
function toggleHamburgerMenu()
96+
{
97+
if (menuOpened)
98+
{
99+
hamburgerMenu.style.display = "none";
100+
menuOpened = false;
101+
} else if (!menuOpened)
102+
{
103+
hamburgerMenu.style.display = "flex";
104+
menuOpened = true;
105+
}
106+
}
107+
108+
function menuResized()
109+
{
110+
// Enable the links div on desktop.
111+
if (window.innerWidth > 800 && !menuOpened)
112+
{
113+
toggleHamburgerMenu();
114+
return;
115+
}
116+
117+
// Disable the links div on mobile.
118+
if (window.innerWidth < 800 && menuOpened) toggleHamburgerMenu();
119+
}
120+
</script>
73121
</body>
74122
</html>

‎pages-screenshots/green-login-page.jpg

-255 KB
Loading

‎purple-login_page.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
<html lang="en">
33

44
<head>
5+
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
6+
name="viewport">
57
<script crossorigin="anonymous" src="https://kit.fontawesome.com/8955b6fb14.js"></script>
68
<title>Amethyst Login</title>
79
<link href="styles.css" rel="stylesheet">
@@ -18,7 +20,6 @@
1820
}
1921

2022
body {
21-
/*background-color: rgb(36, 36, 36);*/
2223
height: 98vh;
2324
margin: 0;
2425
background: linear-gradient(110.6deg, rgb(156, 116, 129) -18.3%, rgb(67, 54, 74) 16.4%, rgb(47, 48, 67) 68.2%, rgb(27, 23, 36) 99.1%);
@@ -82,7 +83,7 @@
8283
</head>
8384

8485
<body>
85-
<a class="nav-back" href="index.html"><i class="fa-solid fa-arrow-left"></i></a>
86+
<a class="nav-back" href="index.html#projects-header"><i class="fa-solid fa-arrow-left"></i></a>
8687
<div class="container">
8788
<form>
8889
<fieldset>

‎styles.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,6 @@
1414
background-color: #615C5C;
1515
}
1616

17-
.nav-back:focus {
17+
.nav-back:active {
1818
background-color: #3d3a3a;
1919
}

0 commit comments

Comments
 (0)