diff --git a/basics/assets-metadata-css-starter/pages/index.js b/basics/assets-metadata-css-starter/pages/index.js index d9b5863..52cc6e9 100644 --- a/basics/assets-metadata-css-starter/pages/index.js +++ b/basics/assets-metadata-css-starter/pages/index.js @@ -1,37 +1,38 @@ -import Link from 'next/link' +import Link from 'next/link'; import Head from 'next/head' +import styles from '../styles/Home.module.css'; export default function Home() { return ( -
+
Create Next App
-

- Read this page! +

+ Read this page!

-

+

Get started by editing pages/index.js

-
- +
+

Documentation →

Find in-depth information about Next.js features and API.

 - +

Learn →

Learn about Next.js in an interactive course with quizzes!

Examples →

Discover and deploy boilerplate example Next.js projects.

@@ -39,7 +40,7 @@ export default function Home() {

Deploy →

@@ -56,20 +57,11 @@ export default function Home() { rel="noopener noreferrer" > Powered by{' '} - Vercel Logo + Vercel

) -} +} \ No newline at end of file diff --git a/basics/assets-metadata-css-starter/styles/Home.module.css b/basics/assets-metadata-css-starter/styles/Home.module.css index 1be53ac..b825756 100644 --- a/basics/assets-metadata-css-starter/styles/Home.module.css +++ b/basics/assets-metadata-css-starter/styles/Home.module.css @@ -1,6 +1,10 @@ .container { min-height: 100vh; - padding: 1rem 0.5rem 0; + padding: 0 0.5rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } .title a { @@ -24,86 +28,64 @@ text-align: center; } -.heroImage { - margin-bottom: 1rem; +.title, +.description { + text-align: center; } -.secondaryHeading { - margin: 0 0 1rem; + +.description { + line-height: 1.5; + font-size: 1.5rem; } -.input { - padding: 0.5rem; - width: 300px; - margin-bottom: 1rem; -} - -.countries { - display: grid; - grid-gap: 1rem; -} - -.country { - border: 1px solid #000; - border-radius: 0.25rem; - padding: 0.25rem 0.5rem; -} - -.codeSampleBlock { - padding: 3rem 0; -} - -.codeSampleBlock p { - font-size: 1.3rem; - margin-bottom: 1rem; -} - -.footer { - width: 100%; - height: 100px; - border-top: 1px solid #eaeaea; +.grid { display: flex; - justify-content: center; align-items: center; + justify-content: center; + flex-wrap: wrap; + + max-width: 800px; + margin-top: 3rem; +} + +.card { + margin: 1rem; + flex-basis: 45%; + padding: 1.5rem; + text-align: left; + color: inherit; + text-decoration: none; + border: 1px solid #eaeaea; + border-radius: 10px; + transition: color 0.15s ease, border-color 0.15s ease; +} + +.card:hover, +.card:focus, +.card:active { + color: #0070f3; + border-color: #0070f3; +} + +.card h3 { + margin: 0 0 1rem 0; + font-size: 1.5rem; +} + +.card p { + margin: 0; + font-size: 1.25rem; + line-height: 1.5; } .logo { - margin-left: 0.5rem; - max-width: 72px; + height: 1em; } -.footer a { - display: flex; - justify-content: center; - align-items: center; -} - -@media (min-width: 800px) { - .countries { - grid-template-columns: 1fr 1fr; - } -} - -@media (min-width: 1024px) { - .heroImage { - margin: 0 auto 1rem; - max-width: 50vw; - } - - .secondaryHeading { - text-align: center; - } - - .input { - margin: 0 auto 1rem; - display: block; - } - - .countries { - grid-template-columns: 1fr 1fr 1fr; - } - - .codeSampleBlock { - text-align: center; +@media (max-width: 600px) { + .grid { + width: 100%; + flex-direction: column; } } diff --git a/basics/learn-starter/pages/index.js b/basics/learn-starter/pages/index.js index 0443431..b32798f 100644 --- a/basics/learn-starter/pages/index.js +++ b/basics/learn-starter/pages/index.js @@ -1,36 +1,37 @@ import Head from 'next/head' +import styles from '../styles/Home.module.css'; export default function Home() { return ( -
+
Create Next App
-

+

Welcome to Next.js!

-

+

Get started by editing pages/index.js

-
- +
+

Documentation →

Find in-depth information about Next.js features and API.

 - +

Learn →

Learn about Next.js in an interactive course with quizzes!

Examples →

Discover and deploy boilerplate example Next.js projects.

@@ -38,7 +39,7 @@ export default function Home() {

Deploy →

@@ -55,20 +56,11 @@ export default function Home() { rel="noopener noreferrer" > Powered by{' '} - Vercel + Vercel

) -} +} \ No newline at end of file diff --git a/basics/learn-starter/styles/Home.module.css b/basics/learn-starter/styles/Home.module.css new file mode 100644 index 0000000..b825756 --- /dev/null +++ b/basics/learn-starter/styles/Home.module.css @@ -0,0 +1,91 @@ +.container { + min-height: 100vh; + padding: 0 0.5rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.title a { + color: #0070f3; + text-decoration: none; +} + +.title a:hover, +.title a:focus, +.title a:active { + text-decoration: underline; +} + +.title { + margin: 0 0 1rem; + line-height: 1.15; + font-size: 3.6rem; +} + +.title { + text-align: center; +} + +.title, +.description { + text-align: center; +} + + +.description { + line-height: 1.5; + font-size: 1.5rem; +} + +.grid { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + + max-width: 800px; + margin-top: 3rem; +} + +.card { + margin: 1rem; + flex-basis: 45%; + padding: 1.5rem; + text-align: left; + color: inherit; + text-decoration: none; + border: 1px solid #eaeaea; + border-radius: 10px; + transition: color 0.15s ease, border-color 0.15s ease; +} + +.card:hover, +.card:focus, +.card:active { + color: #0070f3; + border-color: #0070f3; +} + +.card h3 { + margin: 0 0 1rem 0; + font-size: 1.5rem; +} + +.card p { + margin: 0; + font-size: 1.25rem; + line-height: 1.5; +} + +.logo { + height: 1em; +} + +@media (max-width: 600px) { + .grid { + width: 100%; + flex-direction: column; + } +} diff --git a/basics/learn-starter/styles/globals.css b/basics/learn-starter/styles/globals.css new file mode 100644 index 0000000..95bfb35 --- /dev/null +++ b/basics/learn-starter/styles/globals.css @@ -0,0 +1,38 @@ +html, +body { + padding: 0; + margin: 0; + font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, + Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; +} + +a { + color: inherit; + text-decoration: none; +} + +* { + box-sizing: border-box; +} + +img { + max-width: 100%; + height: auto; +} + +h1, +h2, +p, +ul { + margin: 0; +} + +ul { + padding: 0; + list-style: none; +} + +button { + padding: 0.5rem 1rem; + font-weight: bold; +} diff --git a/basics/navigate-between-pages-starter/pages/index.js b/basics/navigate-between-pages-starter/pages/index.js index fc9c360..b32798f 100644 --- a/basics/navigate-between-pages-starter/pages/index.js +++ b/basics/navigate-between-pages-starter/pages/index.js @@ -1,36 +1,37 @@ import Head from 'next/head' +import styles from '../styles/Home.module.css'; export default function Home() { return ( -
+
Create Next App
-

- Learn Next.js! +

+ Welcome to Next.js!

-

+

Get started by editing pages/index.js

-
- +
+

Documentation →

Find in-depth information about Next.js features and API.

 - +

Learn →

Learn about Next.js in an interactive course with quizzes!

Examples →

Discover and deploy boilerplate example Next.js projects.

@@ -38,7 +39,7 @@ export default function Home() {

Deploy →

@@ -55,20 +56,11 @@ export default function Home() { rel="noopener noreferrer" > Powered by{' '} - Vercel Logo + Vercel

) -} +} \ No newline at end of file diff --git a/basics/navigate-between-pages-starter/styles/Home.module.css b/basics/navigate-between-pages-starter/styles/Home.module.css new file mode 100644 index 0000000..b825756 --- /dev/null +++ b/basics/navigate-between-pages-starter/styles/Home.module.css @@ -0,0 +1,91 @@ +.container { + min-height: 100vh; + padding: 0 0.5rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.title a { + color: #0070f3; + text-decoration: none; +} + +.title a:hover, +.title a:focus, +.title a:active { + text-decoration: underline; +} + +.title { + margin: 0 0 1rem; + line-height: 1.15; + font-size: 3.6rem; +} + +.title { + text-align: center; +} + +.title, +.description { + text-align: center; +} + + +.description { + line-height: 1.5; + font-size: 1.5rem; +} + +.grid { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + + max-width: 800px; + margin-top: 3rem; +} + +.card { + margin: 1rem; + flex-basis: 45%; + padding: 1.5rem; + text-align: left; + color: inherit; + text-decoration: none; + border: 1px solid #eaeaea; + border-radius: 10px; + transition: color 0.15s ease, border-color 0.15s ease; +} + +.card:hover, +.card:focus, +.card:active { + color: #0070f3; + border-color: #0070f3; +} + +.card h3 { + margin: 0 0 1rem 0; + font-size: 1.5rem; +} + +.card p { + margin: 0; + font-size: 1.25rem; + line-height: 1.5; +} + +.logo { + height: 1em; +} + +@media (max-width: 600px) { + .grid { + width: 100%; + flex-direction: column; + } +} diff --git a/basics/navigate-between-pages-starter/styles/globals.css b/basics/navigate-between-pages-starter/styles/globals.css new file mode 100644 index 0000000..95bfb35 --- /dev/null +++ b/basics/navigate-between-pages-starter/styles/globals.css @@ -0,0 +1,38 @@ +html, +body { + padding: 0; + margin: 0; + font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, + Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; +} + +a { + color: inherit; + text-decoration: none; +} + +* { + box-sizing: border-box; +} + +img { + max-width: 100%; + height: auto; +} + +h1, +h2, +p, +ul { + margin: 0; +} + +ul { + padding: 0; + list-style: none; +} + +button { + padding: 0.5rem 1rem; + font-weight: bold; +}