Skip to content

Commit 52a4b98

Browse files
rebecatschiedelrebecatschiedel
committed
Add: Home.modules.css for jsx styles in Index.js.
1 parent 42d35e0 commit 52a4b98

File tree

2 files changed

+90
-91
lines changed

2 files changed

+90
-91
lines changed

‎pages/index.js

Lines changed: 10 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,46 @@
11
import Head from "next/head";
2+
import styles from "../styles/Home.module.css";
23

34
export default function Home() {
45
return (
5-
<div className="container">
6+
<div className={styles.container}>
67
<Head>
78
<title>Web Dev Path</title>
89
<link rel="icon" href="/favicon.ico" />
910
</Head>
1011
<main>
11-
<h1 className="title">&lt; Web Dev wannabe? /&gt;</h1>
12-
<div className="description">
12+
<h1 className={styles.title}>&lt; Web Dev wannabe? /&gt;</h1>
13+
<div className={styles.description}>
1314
<p>
1415
Hold our hand and enjoy the road to learn how to start a new
1516
project, the magic behind Github while working in a team
1617
environment, and much more...
1718
</p>
1819
</div>
19-
<hr className="divider" />
20+
<hr className={styles.divider} />
2021

21-
<div className="grid">
22-
<a href="https://nextjs.org/docs" className="card">
22+
<div className={styles.grid}>
23+
<a href="https://nextjs.org/docs" className={styles.card}>
2324
<h3>Documentation &rarr;</h3>
2425
<p>Find in-depth information about Next.js features and API.</p>
2526
</a>
2627

27-
<a href="https://nextjs.org/learn" className="card">
28+
<a href="https://nextjs.org/learn" className={styles.card}>
2829
<h3>Learn &rarr;</h3>
2930
<p>Learn about Next.js in an interactive course with quizzes!</p>
3031
</a>
3132

3233
<a
3334
href="https://github.com/vercel/next.js/tree/master/examples"
34-
className="card"
35+
className={styles.card}
3536
>
3637
<h3>Examples &rarr;</h3>
3738
<p>Discover and deploy boilerplate example Next.js projects.</p>
3839
</a>
3940

4041
<a
4142
href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
42-
className="card"
43+
className={styles.card}
4344
>
4445
<h3>Deploy &rarr;</h3>
4546
<p>
@@ -61,13 +62,6 @@ export default function Home() {
6162
</footer>
6263

6364
<style jsx>{`
64-
.divider {
65-
color: #000;
66-
background-color: #000;
67-
height: 1px;
68-
width: 100%;
69-
}
70-
7165
footer {
7266
width: 100%;
7367
height: 100px;
@@ -92,34 +86,6 @@ export default function Home() {
9286
text-decoration: none;
9387
}
9488
95-
.title a {
96-
color: #0070f3;
97-
text-decoration: none;
98-
}
99-
100-
.title a:hover,
101-
.title a:focus,
102-
.title a:active {
103-
text-decoration: underline;
104-
}
105-
106-
.title {
107-
margin: 0;
108-
line-height: 1.15;
109-
font-size: 4rem;
110-
}
111-
112-
.title {
113-
text-align: center;
114-
}
115-
116-
.description {
117-
line-height: 1.5;
118-
font-size: 1.5rem;
119-
max-width: 700px;
120-
padding: 0 1rem;
121-
}
122-
12389
code {
12490
background: #fafafa;
12591
border-radius: 5px;
@@ -129,56 +95,9 @@ export default function Home() {
12995
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
13096
}
13197
132-
.grid {
133-
display: flex;
134-
align-items: center;
135-
justify-content: center;
136-
flex-wrap: wrap;
137-
138-
max-width: 800px;
139-
margin-top: 3rem;
140-
}
141-
142-
.card {
143-
margin: 1rem;
144-
flex-basis: 45%;
145-
padding: 1.5rem;
146-
text-align: left;
147-
color: inherit;
148-
text-decoration: none;
149-
border: 1px solid #eaeaea;
150-
border-radius: 10px;
151-
transition: color 0.15s ease, border-color 0.15s ease;
152-
}
153-
154-
.card:hover,
155-
.card:focus,
156-
.card:active {
157-
color: #0070f3;
158-
border-color: #0070f3;
159-
}
160-
161-
.card h3 {
162-
margin: 0 0 1rem 0;
163-
font-size: 1.5rem;
164-
}
165-
166-
.card p {
167-
margin: 0;
168-
font-size: 1.25rem;
169-
line-height: 1.5;
170-
}
171-
17298
.logo {
17399
height: 1em;
174100
}
175-
176-
@media (max-width: 600px) {
177-
.grid {
178-
width: 100%;
179-
flex-direction: column;
180-
}
181-
}
182101
`}</style>
183102
</div>
184103
);

‎styles/Home.module.css

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
.divider {
2+
color: #000;
3+
background-color: #000;
4+
height: 1px;
5+
width: 100%;
6+
}
7+
8+
.title a {
9+
color: #0070f3;
10+
text-decoration: none;
11+
}
12+
13+
.title a:hover,
14+
.title a:focus,
15+
.title a:active {
16+
text-decoration: underline;
17+
}
18+
19+
.title {
20+
margin: 0;
21+
line-height: 1.15;
22+
font-size: 4rem;
23+
}
24+
25+
.title {
26+
text-align: center;
27+
}
28+
29+
.description {
30+
line-height: 1.5;
31+
font-size: 1.5rem;
32+
max-width: 700px;
33+
padding: 0 1rem;
34+
}
35+
.grid {
36+
display: flex;
37+
align-items: center;
38+
justify-content: center;
39+
flex-wrap: wrap;
40+
41+
max-width: 800px;
42+
margin-top: 3rem;
43+
}
44+
45+
.card {
46+
margin: 1rem;
47+
flex-basis: 45%;
48+
padding: 1.5rem;
49+
text-align: left;
50+
color: inherit;
51+
text-decoration: none;
52+
border: 1px solid #eaeaea;
53+
border-radius: 10px;
54+
transition: color 0.15s ease, border-color 0.15s ease;
55+
}
56+
57+
.card:hover,
58+
.card:focus,
59+
.card:active {
60+
color: #0070f3;
61+
border-color: #0070f3;
62+
}
63+
64+
.card h3 {
65+
margin: 0 0 1rem 0;
66+
font-size: 1.5rem;
67+
}
68+
69+
.card p {
70+
margin: 0;
71+
font-size: 1.25rem;
72+
line-height: 1.5;
73+
}
74+
75+
@media (max-width: 600px) {
76+
.grid {
77+
width: 100%;
78+
flex-direction: column;
79+
}
80+
}

0 commit comments

Comments
 (0)