Skip to content

Commit 8f93ea7

Browse files
rebecatschiedelrebecatschiedel
authored
Merge pull request #43 from MarianaSouza/feature/add-footer
Feature/add footer
2 parents fea86b7 + c37e583 commit 8f93ea7

File tree

14 files changed

+195
-56
lines changed

14 files changed

+195
-56
lines changed

‎components/Footer.js

Lines changed: 49 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,58 @@
1+
import Link from "next/link";
12
import footerStyles from "../styles/Footer.module.css";
3+
import layoutStyles from "../styles/Layout.module.css";
4+
import { linksNav, linksSocial } from "../utils/links";
25

36
export default function Footer() {
47
return (
58
<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}
9+
<div
10+
className={`${layoutStyles.widthContainer} ${footerStyles.container}`}
1111
>
12-
Powered by{" "}
13-
<img
14-
src="/vercel.svg"
15-
alt="Vercel Logo"
16-
className={footerStyles.logo}
17-
/>
18-
</a>
12+
<div className={footerStyles.columnLeft}>
13+
<ul className={footerStyles.footerList}>
14+
{linksNav.map((link) => (
15+
<li className={footerStyles.footerItem} key={link.href}>
16+
<Link href={link.href}>
17+
<a>{link.text}</a>
18+
</Link>
19+
</li>
20+
))}
21+
</ul>
22+
<img
23+
className={footerStyles.logo}
24+
src="/images/web-dev-path-logo-small.png"
25+
alt="Logo"
26+
/>
27+
</div>
28+
<div className={footerStyles.columnRight}>
29+
<div className={footerStyles.subscribe}>
30+
<h2>Subscribe for more</h2>
31+
<p className={footerStyles.text}>
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+
{linksSocial.map((link) => (
42+
<Link href={link.href} key={link.text}>
43+
<img
44+
className={footerStyles.socialMedia}
45+
src={link.src}
46+
alt={link.text}
47+
/>
48+
</Link>
49+
))}
50+
</div>
51+
</div>
52+
</div>
53+
<p className={`${layoutStyles.widthContainer} ${footerStyles.copyright}`}>
54+
Web Dev Path 2021. All rights reserved.
55+
</p>
1956
</footer>
2057
);
2158
}

‎components/Layout.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default function Layout({ children }) {
66
return (
77
<>
88
<Nav />
9-
<div className={styles.container}>
9+
<div className={`${styles.widthContainer} ${styles.container}`}>
1010
<main className={styles.main}>{children}</main>
1111
</div>
1212
<Footer />

‎components/Nav.js

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import Link from "next/link";
22
import { useEffect, useState } from "react";
33
import styles from "../styles/Nav.module.css";
4+
import layoutStyles from "../styles/Layout.module.css";
5+
import { linksNav } from "../utils/links";
46

57
export default function Nav() {
68
const [active, setActive] = useState(false);
@@ -21,7 +23,9 @@ export default function Nav() {
2123

2224
return (
2325
<header className={styles.header}>
24-
<div className={`${styles.navContainer} ${styles.row}`}>
26+
<div
27+
className={`${styles.navContainer} ${styles.row} ${layoutStyles.widthContainer}`}
28+
>
2529
<div className={styles.align}>
2630
<Link href="/">
2731
<img
@@ -40,21 +44,13 @@ export default function Nav() {
4044
</div>
4145
<nav className={`${active ? styles.navVisible : styles.nav}`}>
4246
<ul className={styles.navList}>
43-
<li className={styles.navItem}>
44-
<Link href="/about-us">
45-
<a className={styles.navLink}>About Us</a>
46-
</Link>
47-
</li>
48-
<li className={styles.navItem}>
49-
<Link href="/blog">
50-
<a className={styles.navLink}>Blog</a>
51-
</Link>
52-
</li>
53-
<li className={styles.navItem}>
54-
<Link href="/contact-us">
55-
<a className={styles.navLink}>Contact Us</a>
56-
</Link>
57-
</li>
47+
{linksNav.map((link) => (
48+
<li className={styles.navItem} key={link.href}>
49+
<Link href={link.href}>
50+
<a className={styles.navLink}>{link.text}</a>
51+
</Link>
52+
</li>
53+
))}
5854
</ul>
5955
</nav>
6056
</div>

‎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" />

‎public/favicon.ico

320 Bytes
Binary file not shown.

‎public/images/svg/iconmonstr-github.svg

Lines changed: 1 addition & 0 deletions
Loading

‎public/images/svg/iconmonstr-twitter.svg

Lines changed: 1 addition & 0 deletions
Loading

‎public/vercel.svg

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎styles/Footer.module.css

Lines changed: 113 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,127 @@
11
.footer {
22
width: 100%;
3-
height: 100px;
4-
border-top: 1px solid #eaeaea;
3+
}
4+
5+
.footerList {
6+
list-style: none;
7+
padding: 0;
8+
}
9+
10+
.container {
11+
padding: 1rem 0;
12+
margin: 1rem;
13+
border-top: 1px solid #666;
14+
border-bottom: 1px solid #666;
15+
}
16+
17+
.columnLeft {
518
display: flex;
6-
justify-content: center;
19+
justify-content: space-between;
720
align-items: center;
821
}
922

10-
.footer img {
11-
margin-left: 0.5rem;
23+
.footerItem + .footerItem {
24+
margin-top: 0.5rem;
25+
}
26+
27+
.footerItem:hover,
28+
.footerItem:focus {
29+
color: #666;
30+
}
31+
32+
.logo {
33+
border-radius: 50%;
34+
height: 4.5em;
35+
}
36+
37+
.subscribe {
38+
text-align: center;
39+
}
40+
41+
.subscribe h2 {
42+
margin-bottom: 0.8rem;
43+
font-size: 1.8rem;
44+
}
45+
46+
.subscribe p {
47+
margin-top: 0.2rem;
48+
font-size: 0.8rem;
49+
color: #696969;
1250
}
1351

14-
.footer a {
52+
.subscribe .text {
53+
font-size: 1rem;
54+
color: #000;
55+
}
56+
57+
.socialMedia {
58+
margin: 1.8rem 0 1rem;
1559
display: flex;
1660
justify-content: center;
17-
align-items: center;
1861
}
1962

20-
/* code {
21-
background: #fafafa;
22-
border-radius: 5px;
23-
padding: 0.75rem;
24-
font-size: 1.1rem;
25-
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
26-
Bitstream Vera Sans Mono, Courier New, monospace;
27-
} */
63+
.socialMedia + .socialMedia {
64+
margin-left: 1rem;
65+
}
2866

29-
.logo {
30-
height: 1em;
67+
.socialMedia img:hover {
68+
opacity: 65%;
69+
}
70+
71+
.copyright {
72+
font-size: 0.8rem;
73+
color: #696969;
74+
text-align: center;
75+
}
76+
77+
@media (min-width: 578px) {
78+
.container {
79+
margin: 0 auto;
80+
display: flex;
81+
flex-direction: row;
82+
justify-content: space-between;
83+
}
84+
85+
.columnLeft {
86+
display: flex;
87+
flex-direction: column;
88+
}
89+
90+
.columnRight {
91+
width: 55%;
92+
display: flex;
93+
flex-direction: column;
94+
}
95+
96+
.subscribe {
97+
text-align: left;
98+
}
99+
100+
.subscribe h2 {
101+
margin-top: 0.5rem;
102+
}
103+
104+
.subscribe input {
105+
height: 1.8rem;
106+
width: 65%;
107+
}
108+
109+
.subscribe button {
110+
height: 1.8rem;
111+
width: 30%;
112+
}
113+
114+
.socialMedia {
115+
justify-content: flex-end;
116+
margin: 1rem 1rem 0.5rem 0;
117+
}
118+
119+
.socialMedia img {
120+
height: 2.5rem;
121+
}
122+
123+
.copyright {
124+
margin: 1rem auto;
125+
text-align: left;
126+
}
31127
}

‎styles/Home.module.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
.description {
3030
line-height: 1.5;
3131
font-size: 1.5rem;
32-
max-width: 700px;
32+
text-align: center;
3333
padding: 0 1rem;
3434
}
3535

@@ -39,7 +39,6 @@
3939
justify-content: center;
4040
flex-wrap: wrap;
4141

42-
max-width: 800px;
4342
margin-top: 3rem;
4443
}
4544

0 commit comments

Comments
 (0)