Skip to content

Commit 818f9cc

Browse files
shansitadsshansitads
committed
widened landing and footer at bottom for ultra wide screens
1 parent ad717fa commit 818f9cc

File tree

2 files changed

+146
-79
lines changed

2 files changed

+146
-79
lines changed

‎src/components/Footer.js‎

Lines changed: 45 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -5,57 +5,53 @@ import {
55
AiFillInstagram,
66
AiFillYoutube,
77
} from "react-icons/ai";
8-
import { FaXTwitter } from "react-icons/fa6";
98

109
function Footer() {
1110
return (
12-
<Container fluid className="footer">
13-
<Row>
14-
<Col md="4" className="footer-copywright">
15-
<h3>Copyright @ 2025 BrainHack Vanderbilt</h3>
16-
</Col>
17-
<Col md="4" className="footer-body">
18-
<ul className="footer-icons">
19-
<li className="social-icons">
20-
<a
21-
href="https://github.com/brainhack-vandy"
22-
style={{ color: "white" }}
23-
target="_blank"
24-
rel="noopener noreferrer"
25-
>
26-
<AiFillGithub />
27-
</a>
28-
</li>
29-
<li className="social-icons">
30-
<a
31-
href="https://www.youtube.com/@BrainHackVanderbilt"
32-
style={{ color: "white" }}
33-
target="_blank"
34-
rel="noopener noreferrer"
35-
>
36-
<AiFillYoutube />
37-
</a>
38-
</li>
39-
<li className="social-icons">
40-
<a
41-
href="https://www.instagram.com/brainhackvu/"
42-
style={{ color: "white" }}
43-
target="_blank"
44-
rel="noopener noreferrer"
45-
>
46-
<AiFillInstagram />
47-
</a>
48-
</li>
49-
</ul>
50-
</Col>
51-
<Col md="4" className="footer-recognitions">
52-
<span>
53-
<h3>Design based on{" "}
11+
<footer className="footer">
12+
<Container>
13+
<Row>
14+
<Col md={4} className="footer-copywright">
15+
<h3>Copyright @ 2025 BrainHack Vanderbilt</h3>
16+
</Col>
17+
<Col md={4} className="footer-body">
18+
<ul className="footer-icons">
19+
<li className="social-icons">
20+
<a
21+
href="https://github.com/brainhack-vandy"
22+
target="_blank"
23+
rel="noopener noreferrer"
24+
>
25+
<AiFillGithub />
26+
</a>
27+
</li>
28+
<li className="social-icons">
29+
<a
30+
href="https://www.youtube.com/@BrainHackVanderbilt"
31+
target="_blank"
32+
rel="noopener noreferrer"
33+
>
34+
<AiFillYoutube />
35+
</a>
36+
</li>
37+
<li className="social-icons">
38+
<a
39+
href="https://www.instagram.com/brainhackvu/"
40+
target="_blank"
41+
rel="noopener noreferrer"
42+
>
43+
<AiFillInstagram />
44+
</a>
45+
</li>
46+
</ul>
47+
</Col>
48+
<Col md={4} className="footer-recognitions">
49+
<h3>
50+
Design based on{" "}
5451
<a
5552
href="https://github.com/soumyajit4419/Portfolio"
5653
target="_blank"
5754
rel="noopener noreferrer"
58-
style={{ color: "white", fontSize: "10px"}}
5955
>
6056
soumyajit4419
6157
</a>{" "}
@@ -64,7 +60,6 @@ function Footer() {
6460
href="https://brainhackwestern.github.io/"
6561
target="_blank"
6662
rel="noopener noreferrer"
67-
style={{ color: "white", fontSize: "10px"}}
6863
>
6964
Brainhack Western
7065
</a>
@@ -73,15 +68,15 @@ function Footer() {
7368
href="https://storyset.com/"
7469
target="_blank"
7570
rel="noopener noreferrer"
76-
style={{ color: "white", fontSize: "10px"}}
7771
>
7872
Storyset
7973
</a>
8074
.
81-
</h3></span>
82-
</Col>
83-
</Row>
84-
</Container>
75+
</h3>
76+
</Col>
77+
</Row>
78+
</Container>
79+
</footer>
8580
);
8681
}
8782

‎src/style.css‎

Lines changed: 101 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@ html {
1010
--imp-text-color: #c770f0;
1111
}
1212

13+
#root {
14+
min-height: 100vh;
15+
display: flex;
16+
flex-direction: column;
17+
}
18+
1319
.purple {
1420
color: var(--imp-text-color) !important;
1521
}
@@ -340,22 +346,44 @@ button:focus {
340346
position: relative;
341347
z-index: 0;
342348
background-image: var(--image-gradient), url(../public/assets/home-bg.jpg);
343-
background-position: top center;
349+
background-position: center;
344350
background-repeat: no-repeat;
345-
padding: 30px 0 !important;
351+
background-size: cover;
352+
min-height: 100vh;
353+
padding: 0 !important;
354+
display: flex;
355+
align-items: center;
346356
}
347357

348358
.home-content {
359+
width: 100%;
349360
padding: 9rem 0 2rem !important;
350361
color: whitesmoke;
351362
text-align: left;
352363
}
353364

365+
.home-header {
366+
padding-top: 80px !important;
367+
padding-left: 3rem;
368+
}
369+
354370
.content-wrapper {
355371
display: flex;
356372
flex-direction: column;
357373
gap: 2rem;
358-
padding-left: 50px;
374+
padding-left: 0;
375+
}
376+
377+
.home-image-container {
378+
display: flex;
379+
align-items: center;
380+
justify-content: center;
381+
padding: 2rem;
382+
}
383+
384+
.home-image {
385+
max-height: 450px;
386+
width: auto;
359387
}
360388

361389
.heading {
@@ -372,6 +400,26 @@ button:focus {
372400
color: #cd5ff8;
373401
}
374402

403+
@media (max-width: 767px) {
404+
.home-header {
405+
padding-left: 1.5rem;
406+
padding-right: 1.5rem;
407+
}
408+
409+
.content-wrapper {
410+
padding-left: 0;
411+
gap: 1.5rem;
412+
}
413+
414+
.home-image-container {
415+
padding: 1rem;
416+
}
417+
418+
.home-image {
419+
max-height: 350px;
420+
}
421+
}
422+
375423
.type-wrapper {
376424
margin: 0;
377425
}
@@ -582,49 +630,73 @@ button:focus {
582630
/* --------- */
583631
/* Footer */
584632
/* --------- */
633+
section {
634+
flex: 1 0 auto;
635+
}
636+
585637
.footer {
638+
flex-shrink: 0;
586639
background-color: rgb(10, 4, 22);
587-
bottom: 0 !important;
588-
padding-top: 10px !important;
589-
padding-bottom: 8px !important;
640+
padding: 20px 0 !important;
641+
position: relative;
642+
width: 100%;
643+
border-top: 1px solid rgba(255, 255, 255, 0.1);
590644
}
591645

592-
.footer-copywright {
646+
.footer-copywright,
647+
.footer-body,
648+
.footer-recognitions {
593649
text-align: center !important;
650+
padding: 5px 0;
594651
}
595652

596-
.footer-recognitions {
597-
text-align: center !important;
598-
font-size: .7em;
599-
padding-top: 12px !important;
653+
.footer h3 {
654+
font-size: 1em;
655+
color: white !important;
656+
margin: 0.5em 0;
600657
}
601658

602-
.footer-body {
603-
z-index: 1;
604-
text-align: center !important;
659+
.footer-icons {
660+
list-style-type: none;
661+
margin: 0;
662+
padding: 0;
663+
display: flex;
664+
justify-content: center;
665+
align-items: center;
666+
gap: 20px;
667+
}
668+
669+
.footer a {
670+
color: white !important;
671+
}
672+
673+
.social-icons a {
674+
color: white !important;
675+
font-size: 1.5em;
676+
transition: all 0.3s ease-in-out;
677+
}
678+
679+
.social-icons a:hover {
680+
transform: scale(1.2);
681+
color: var(--imp-text-color) !important;
605682
}
606683

607684
@media (max-width: 767px) {
608-
.footer-copywright {
609-
text-align: center !important;
685+
.footer {
686+
padding: 15px 0 !important;
610687
}
611688

612-
.footer-body {
613-
text-align: center !important;
689+
.footer h3 {
690+
font-size: 0.9em;
614691
}
615-
}
616692

617-
.footer h3 {
618-
font-size: 1em;
619-
color: white !important;
620-
margin-top: 0.5em !important;
621-
margin-bottom: 0.5em !important;
622-
}
693+
.footer-icons {
694+
gap: 15px;
695+
}
623696

624-
.footer-icons {
625-
margin-top: 0.5em !important;
626-
margin-bottom: 0.5em !important;
627-
padding: 0 !important;
697+
.social-icons a {
698+
font-size: 1.3em;
699+
}
628700
}
629701

630702
.blockquote-footer {

0 commit comments

Comments
 (0)