Skip to content

Commit fb0a4e9

Browse files
AncientNimbusAncientNimbus
committed
feat: Add footer structure
ref O-95
1 parent d5925bd commit fb0a4e9

File tree

3 files changed

+150
-49
lines changed

3 files changed

+150
-49
lines changed

‎css/style.css‎

Lines changed: 95 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,23 @@
88
--h2-size: 3rem;
99
--h3-size: 2rem;
1010
--h1-color: rgb(255, 255, 255);
11+
--std-gap: 1rem;
1112
}
1213

1314
body {
1415
display: flex;
16+
align-items: center;
1517
justify-content: center;
18+
flex-direction: column;
1619
}
1720

1821
a {
1922
color: inherit;
2023
text-decoration: none;
2124
}
2225

23-
.page {
26+
.page,
27+
footer .footer-content {
2428
margin: 34px 55px;
2529
max-width: var(--max-width);
2630
}
@@ -29,6 +33,7 @@ a {
2933
margin: 0;
3034
padding: 0;
3135
}
36+
3237
.social-bar li {
3338
list-style: none;
3439
display: inline;
@@ -37,12 +42,17 @@ a {
3742

3843
.profile,
3944
.bg-wrap,
40-
.about-me {
45+
.about-me,
46+
footer img {
4147
filter: var(--drop-shadow);
4248
}
4349

50+
footer,
4451
.bg-wrap {
4552
width: 100vw;
53+
}
54+
55+
.bg-wrap {
4656
position: absolute;
4757
top: 0;
4858
transform: translate(0%, -20%);
@@ -78,15 +88,25 @@ header {
7888
height: 80%;
7989
display: flex;
8090
flex-direction: column;
81-
justify-content: space-around;
91+
justify-content: space-between;
8292
background-color: beige;
8393
padding: 34px;
8494
}
8595

86-
.about-me h2 {
96+
.profile-summary {
97+
display: flex;
98+
flex-direction: column;
99+
gap: var(--std-gap);
100+
}
101+
102+
.profile-summary h2 {
87103
font-size: var(--h2-size);
88104
}
89105

106+
.profile-summary p {
107+
font-size: calc(var(--h2-size) * 0.4);
108+
}
109+
90110
.about-me .social-bar {
91111
font-size: var(--h3-size);
92112
align-self: flex-end;
@@ -100,11 +120,82 @@ header {
100120

101121
footer {
102122
background-color: var(--primary-color);
123+
display: flex;
124+
flex-direction: column;
125+
align-items: center;
126+
}
127+
128+
.footer-content {
129+
display: grid;
130+
grid-template: 3fr 1fr / 1fr 1fr;
131+
justify-items: center;
132+
gap: 2rem;
133+
}
134+
135+
.footer-content address {
136+
display: flex;
137+
flex-direction: column;
138+
justify-items: center;
139+
gap: 1rem;
140+
}
141+
142+
.footer-content h2 {
143+
font-size: var(--h2-size);
144+
}
145+
146+
.footer-content :not(h2) {
147+
font-size: 1rem;
148+
}
149+
150+
.footer-content .social-bar i {
151+
font-size: var(--h3-size);
152+
}
153+
154+
.footer-content address ul {
155+
list-style: none;
156+
margin: 0;
157+
padding: 0;
158+
}
159+
160+
.footer-content img {
161+
max-width: 100%;
162+
max-height: 250px;
163+
align-self: center;
164+
object-fit: cover;
165+
}
166+
167+
.credit {
168+
grid-column: 1 / span 2;
169+
align-self: center;
170+
justify-self: center;
171+
text-align: center;
172+
width: 100%;
103173
}
104174

105175
@media (max-width: 500px) {
106176
.page {
107177
margin: 34px 34px;
108178
background-color: blue;
109179
}
180+
181+
header {
182+
grid-template: auto auto / 1fr;
183+
}
184+
185+
.footer-content {
186+
grid-template: repeat(3, auto) / 1fr;
187+
}
188+
189+
.footer-content .social-bar {
190+
align-self: center;
191+
}
192+
193+
.footer-content img {
194+
padding: 0;
195+
}
196+
197+
.credit {
198+
grid-column: 1;
199+
grid-row: 2;
200+
}
110201
}

‎images/footer_shot.webp‎

192 KB
Loading

‎index.html‎

Lines changed: 55 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,85 +3,85 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<link rel="apple-touch-icon" sizes="57x57" href="./images/favicon.ico" />
6+
<link rel="apple-touch-icon" sizes="57x57" href="images/favicon.ico" />
77
<link
88
rel="apple-touch-icon"
99
sizes="60x60"
10-
href="./images/favicon.ico/apple-icon-60x60.png"
10+
href="images/favicon.ico/apple-icon-60x60.png"
1111
/>
1212
<link
1313
rel="apple-touch-icon"
1414
sizes="72x72"
15-
href="./images/favicon.ico/apple-icon-72x72.png"
15+
href="images/favicon.ico/apple-icon-72x72.png"
1616
/>
1717
<link
1818
rel="apple-touch-icon"
1919
sizes="76x76"
20-
href="./images/favicon.ico/apple-icon-76x76.png"
20+
href="images/favicon.ico/apple-icon-76x76.png"
2121
/>
2222
<link
2323
rel="apple-touch-icon"
2424
sizes="114x114"
25-
href="./images/favicon.ico/apple-icon-114x114.png"
25+
href="images/favicon.ico/apple-icon-114x114.png"
2626
/>
2727
<link
2828
rel="apple-touch-icon"
2929
sizes="120x120"
30-
href="./images/favicon.ico/apple-icon-120x120.png"
30+
href="images/favicon.ico/apple-icon-120x120.png"
3131
/>
3232
<link
3333
rel="apple-touch-icon"
3434
sizes="144x144"
35-
href="./images/favicon.ico/apple-icon-144x144.png"
35+
href="images/favicon.ico/apple-icon-144x144.png"
3636
/>
3737
<link
3838
rel="apple-touch-icon"
3939
sizes="152x152"
40-
href="./images/favicon.ico/apple-icon-152x152.png"
40+
href="images/favicon.ico/apple-icon-152x152.png"
4141
/>
4242
<link
4343
rel="apple-touch-icon"
4444
sizes="180x180"
45-
href="./images/favicon.ico/apple-icon-180x180.png"
45+
href="images/favicon.ico/apple-icon-180x180.png"
4646
/>
4747
<link
4848
rel="icon"
4949
type="image/png"
5050
sizes="192x192"
51-
href="./images/favicon.ico/android-icon-192x192.png"
51+
href="images/favicon.ico/android-icon-192x192.png"
5252
/>
5353
<link
5454
rel="icon"
5555
type="image/png"
5656
sizes="32x32"
57-
href="./images/favicon.ico/favicon-32x32.png"
57+
href="images/favicon.ico/favicon-32x32.png"
5858
/>
5959
<link
6060
rel="icon"
6161
type="image/png"
6262
sizes="96x96"
63-
href="./images/favicon.ico/favicon-96x96.png"
63+
href="images/favicon.ico/favicon-96x96.png"
6464
/>
6565
<link
6666
rel="icon"
6767
type="image/png"
6868
sizes="16x16"
69-
href="./images/favicon.ico/favicon-16x16.png"
69+
href="images/favicon.ico/favicon-16x16.png"
7070
/>
71-
<link rel="manifest" href="./images/favicon.ico/manifest.json" />
71+
<link rel="manifest" href="images/favicon.ico/manifest.json" />
7272
<meta name="msapplication-TileColor" content="#ffffff" />
7373
<meta
7474
name="msapplication-TileImage"
75-
content="./images/favicon.ico/ms-icon-144x144.png"
75+
content="images/favicon.ico/ms-icon-144x144.png"
7676
/>
7777
<meta name="theme-color" content="#ffffff" />
78-
<link rel="stylesheet" href="./css/reset.css" />
7978
<link
8079
rel="stylesheet"
8180
type="text/css"
8281
href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/bold/style.css"
8382
/>
84-
<link rel="stylesheet" href="./css/style.css" />
83+
<link rel="stylesheet" href="css/reset.css" />
84+
<link rel="stylesheet" href="css/style.css" />
8585
<title>Homepage Demo by Ancient Nimbus</title>
8686
</head>
8787
<body>
@@ -94,14 +94,16 @@
9494
<h1>Jane Doe</h1>
9595
</div>
9696
<div class="about-me">
97-
<h2>About Me</h2>
98-
<p>
99-
Lorem ipsum dolor sit amet at esse kasd lorem at gubergren sed.
100-
Lorem takimata eirmod ut eirmod elitr dolore erat eirmod takimata
101-
accusam amet et sit illum quis gubergren illum. Veniam tempor amet
102-
dolore aliquam amet ullamcorper clita labore stet gubergren stet
103-
amet.
104-
</p>
97+
<div class="profile-summary">
98+
<h2>About Me</h2>
99+
<p>
100+
Lorem ipsum dolor sit amet at esse kasd lorem at gubergren sed.
101+
Lorem takimata eirmod ut eirmod elitr dolore erat eirmod takimata
102+
accusam amet et sit illum quis gubergren illum. Veniam tempor amet
103+
dolore aliquam amet ullamcorper clita labore stet gubergren stet
104+
amet.
105+
</p>
106+
</div>
105107
<ul class="social-bar">
106108
<li>
107109
<a
@@ -139,7 +141,9 @@ <h3 class="project-title">Project name</h3>
139141
</div>
140142
</section>
141143
</main>
142-
<footer>
144+
</div>
145+
<footer>
146+
<div class="footer-content">
143147
<address>
144148
<h2>Contact Me</h2>
145149
<p>
@@ -165,25 +169,31 @@ <h2>Contact Me</h2>
165169
>
166170
</li>
167171
</ul>
172+
<ul class="social-bar">
173+
<li>
174+
<a
175+
href="https://github.com/AncientNimbus/top-homepage-demo"
176+
target="_blank"
177+
rel="noopener noreferrer"
178+
><i class="ph-bold ph-github-logo"></i
179+
></a>
180+
</li>
181+
<li>
182+
<a href=""><i class="ph-bold ph-linkedin-logo"></i></a>
183+
</li>
184+
<li>
185+
<a href=""><i class="ph-bold ph-x-logo"></i></a>
186+
</li>
187+
</ul>
168188
</address>
169-
<ul class="social-bar">
170-
<li>
171-
<a
172-
href="https://github.com/AncientNimbus/top-homepage-demo"
173-
target="_blank"
174-
rel="noopener noreferrer"
175-
><i class="ph-bold ph-github-logo"></i
176-
></a>
177-
</li>
178-
<li>
179-
<a href=""><i class="ph-bold ph-linkedin-logo"></i></a>
180-
</li>
181-
<li>
182-
<a href=""><i class="ph-bold ph-x-logo"></i></a>
183-
</li>
184-
</ul>
185-
<img src="" alt="" />
186-
</footer>
187-
</div>
189+
<img src="/images/footer_shot.webp" alt="" />
190+
<div class="credit">
191+
<p>
192+
©
193+
<a href="https://github.com/AncientNimbus">Ancient Nimbus</a> MMXXV
194+
</p>
195+
</div>
196+
</div>
197+
</footer>
188198
</body>
189199
</html>

0 commit comments

Comments
 (0)