Skip to content

Commit a6ccefd

Browse files
iamshaunjpiamshaunjp
committed
lesson-6
1 parent 5159f0c commit a6ccefd

File tree

4 files changed

+43
-135
lines changed

4 files changed

+43
-135
lines changed

‎pages/index.js

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
import Head from 'next/head'
2-
import Footer from '../comps/Footer'
3-
import Navbar from '../comps/Navbar'
42
import Link from 'next/link'
53
import styles from '../styles/Home.module.css'
64

75
export default function Home() {
86
return (
97
<div>
10-
<h1>Homepage</h1>
11-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus animi impedit suscipit architecto, odio inventore nostrum non neque dicta. Quam magni accusantium culpa distinctio tempore iure accusamus, dolorem nobis odit.</p>
12-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus animi impedit suscipit architecto, odio inventore nostrum non neque dicta. Quam magni accusantium culpa distinctio tempore iure accusamus, dolorem nobis odit.</p>
8+
<h1 className={styles.title}>Homepage</h1>
9+
<p className={styles.text}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus animi impedit suscipit architecto, odio inventore nostrum non neque dicta. Quam magni accusantium culpa distinctio tempore iure accusamus, dolorem nobis odit.</p>
10+
<p className={styles.text}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus animi impedit suscipit architecto, odio inventore nostrum non neque dicta. Quam magni accusantium culpa distinctio tempore iure accusamus, dolorem nobis odit.</p>
1311
<Link href="/ninjas/">
14-
<a>See Ninja Listing</a>
12+
<a className={styles.btn}>See Ninja Listing</a>
1513
</Link>
1614
</div>
1715
)

‎styles/Home.module.css

Lines changed: 15 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,18 @@
1-
.container {
2-
min-height: 100vh;
3-
padding: 0 0.5rem;
4-
display: flex;
5-
flex-direction: column;
6-
justify-content: center;
7-
align-items: center;
8-
}
9-
10-
.main {
11-
padding: 5rem 0;
12-
flex: 1;
13-
display: flex;
14-
flex-direction: column;
15-
justify-content: center;
16-
align-items: center;
17-
}
18-
19-
.footer {
20-
width: 100%;
21-
height: 100px;
22-
border-top: 1px solid #eaeaea;
23-
display: flex;
24-
justify-content: center;
25-
align-items: center;
26-
}
27-
28-
.footer img {
29-
margin-left: 0.5rem;
30-
}
31-
32-
.footer a {
33-
display: flex;
34-
justify-content: center;
35-
align-items: center;
36-
}
37-
38-
.title a {
39-
color: #0070f3;
40-
text-decoration: none;
41-
}
42-
43-
.title a:hover,
44-
.title a:focus,
45-
.title a:active {
46-
text-decoration: underline;
47-
}
48-
491
.title {
50-
margin: 0;
51-
line-height: 1.15;
52-
font-size: 4rem;
53-
}
54-
55-
.title,
56-
.description {
2+
color: #333;
3+
padding-bottom: 20px;
574
text-align: center;
585
}
59-
60-
.description {
61-
line-height: 1.5;
62-
font-size: 1.5rem;
63-
}
64-
65-
.code {
66-
background: #fafafa;
67-
border-radius: 5px;
68-
padding: 0.75rem;
69-
font-size: 1.1rem;
70-
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
71-
Bitstream Vera Sans Mono, Courier New, monospace;
72-
}
73-
74-
.grid {
75-
display: flex;
76-
align-items: center;
77-
justify-content: center;
78-
flex-wrap: wrap;
79-
max-width: 800px;
80-
margin-top: 3rem;
81-
}
82-
83-
.card {
84-
margin: 1rem;
85-
flex-basis: 45%;
86-
padding: 1.5rem;
87-
text-align: left;
88-
color: inherit;
89-
text-decoration: none;
90-
border: 1px solid #eaeaea;
91-
border-radius: 10px;
92-
transition: color 0.15s ease, border-color 0.15s ease;
93-
}
94-
95-
.card:hover,
96-
.card:focus,
97-
.card:active {
98-
color: #0070f3;
99-
border-color: #0070f3;
100-
}
101-
102-
.card h3 {
103-
margin: 0 0 1rem 0;
104-
font-size: 1.5rem;
105-
}
106-
107-
.card p {
108-
margin: 0;
109-
font-size: 1.25rem;
110-
line-height: 1.5;
111-
}
112-
113-
.logo {
114-
height: 1em;
115-
}
116-
117-
@media (max-width: 600px) {
118-
.grid {
119-
width: 100%;
120-
flex-direction: column;
121-
}
122-
}
6+
.text {
7+
color: #777;
8+
}
9+
.btn {
10+
display: block;
11+
width: 150px;
12+
padding: 8px 0;
13+
margin: 20px auto;
14+
background: #4979ff;
15+
border-radius: 4px;
16+
color: white;
17+
text-align: center;
18+
}

‎styles/Jobs.module.css

Whitespace-only changes.

‎styles/globals.css

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,30 @@
1-
html,
1+
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap');
2+
23
body {
3-
padding: 0;
4-
margin: 0;
5-
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
6-
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
4+
background: #f2f2f2;
5+
color: #333;
6+
font-family: "Nunito";
77
}
8-
98
a {
10-
color: inherit;
9+
color: #333;
1110
text-decoration: none;
1211
}
13-
14-
* {
15-
box-sizing: border-box;
12+
.content {
13+
max-width: 960px;
14+
margin: 0 auto;
15+
}
16+
nav {
17+
margin: 10px auto 80px;
18+
padding: 10px 0;
19+
display: flex;
20+
justify-content: flex-end;
21+
align-items: flex-end;
22+
border-bottom: 1px solid #ddd;
1623
}
24+
nav a {
25+
margin-left: 12px;
26+
}
27+
nav .logo {
28+
margin-right: auto;
29+
}
30+

0 commit comments

Comments
 (0)