Skip to content

Commit ad53a2b

Browse files
rebecatschiedelrebecatschiedel
committed
Add: Footer structure
1 parent 0ba322d commit ad53a2b

File tree

4 files changed

+68
-24
lines changed

4 files changed

+68
-24
lines changed

‎components/Footer.js

Lines changed: 45 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,53 @@
1+
import Link from "next/link";
12
import footerStyles from "../styles/Footer.module.css";
23

34
export default function Footer() {
45
return (
56
<footer className={footerStyles.footer}>
6-
<a
7-
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
8-
target="_blank"
9-
rel="noopener noreferrer"
10-
className={footerStyles.a}
11-
>
12-
Powered by{" "}
13-
<img
14-
src="/vercel.svg"
15-
alt="Vercel Logo"
16-
className={footerStyles.logo}
17-
/>
18-
</a>
7+
<div className={footerStyles.container}>
8+
<div className={footerStyles.column}>
9+
<ul className={footerStyles.footerList}>
10+
<li className={footerStyles.footerItem}>
11+
<Link href="/about-us">
12+
<a>About Us</a>
13+
</Link>
14+
</li>
15+
<li className={footerStyles.footerItem}>
16+
<Link href="/blog">
17+
<a>Blog</a>
18+
</Link>
19+
</li>
20+
<li className={footerStyles.footerItem}>
21+
<Link href="/contact-us">
22+
<a>Contact Us</a>
23+
</Link>
24+
</li>
25+
</ul>
26+
<img src="/images/web-dev-path-logo-small.png" alt="Logo" />
27+
</div>
28+
<div className={footerStyles.column}>
29+
<div className={footerStyles.subscribe}>
30+
<h2>Subscribe for more</h2>
31+
<p>
32+
Get the answer to the most common questions directly to your email
33+
</p>
34+
<form>
35+
<input type="email" placeholder="Email" />
36+
<button>Subscribe</button>
37+
</form>
38+
<p>*Unsubscribe anytime</p>
39+
</div>
40+
<div className={footerStyles.socialMedia}>
41+
<Link href="#">
42+
<img src="" alt="Github" />
43+
</Link>
44+
<Link href="#">
45+
<img src="" alt="Twitter" />
46+
</Link>
47+
</div>
48+
</div>
49+
</div>
50+
<p>Web Dev Path 2021. All rights reserved.</p>
1951
</footer>
2052
);
2153
}

‎pages/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import styles from "../styles/Home.module.css";
33

44
export default function Home() {
55
return (
6-
<div className={styles.container}>
6+
<div>
77
<Head>
88
<title>Web Dev Path</title>
99
<link rel="icon" href="/favicon.ico" />

‎styles/Footer.module.css

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
11
.footer {
22
width: 100%;
3-
height: 100px;
43
border-top: 1px solid #eaeaea;
5-
display: flex;
6-
justify-content: center;
7-
align-items: center;
84
}
95

10-
.footer img {
11-
margin-left: 0.5rem;
6+
.footer ul {
7+
list-style: none;
8+
padding: 0;
129
}
1310

14-
.footer a {
11+
.container {
1512
display: flex;
16-
justify-content: center;
17-
align-items: center;
13+
justify-content: space-around;
14+
flex-wrap: wrap;
15+
margin: 1rem;
16+
border: 1px solid red;
1817
}
1918

2019
/* code {
@@ -29,3 +28,16 @@
2928
.logo {
3029
height: 1em;
3130
}
31+
32+
@media (min-width: 578px) {
33+
/* .footer {
34+
display: flex;
35+
align-items: center;
36+
flex-direction: column;
37+
} */
38+
39+
.container {
40+
max-width: 800px;
41+
margin: 0 auto;
42+
}
43+
}

‎styles/globals.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ body {
66
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
77
}
88

9-
.a {
9+
a {
1010
color: inherit;
1111
text-decoration: none;
1212
}

0 commit comments

Comments
 (0)