From c3f7033bb4669f8e3a684906f118a709a8f7456c Mon Sep 17 00:00:00 2001 From: Andrew Lee Date: Wed, 10 Feb 2021 15:56:33 +0000 Subject: New pages --- pages/career.js | 28 ++++++++++ pages/childhood-adulthood.js | 28 ++++++++++ pages/index.js | 24 +++++---- styles/Home.module.css | 11 ++-- styles/Page.module.css | 118 +++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 197 insertions(+), 12 deletions(-) create mode 100644 pages/career.js create mode 100644 pages/childhood-adulthood.js create mode 100644 styles/Page.module.css diff --git a/pages/career.js b/pages/career.js new file mode 100644 index 0000000..66b4c38 --- /dev/null +++ b/pages/career.js @@ -0,0 +1,28 @@ +import Head from 'next/head' +import styles from '../styles/Page.module.css' +import Link from 'next/link' +import Button from '@material-ui/core/Button' + +export default function Career() { + return ( +
+ + Lawrence Hill Project + + +
+ + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+ + +
+ ) +} diff --git a/pages/childhood-adulthood.js b/pages/childhood-adulthood.js new file mode 100644 index 0000000..b0cb0c8 --- /dev/null +++ b/pages/childhood-adulthood.js @@ -0,0 +1,28 @@ +import Head from 'next/head' +import styles from '../styles/Page.module.css' +import Link from 'next/link' +import Button from '@material-ui/core/Button' + +export default function ChildhoodAdulthood() { + return ( +
+ + Lawrence Hill Project + + +
+ + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+ + +
+ ) +} diff --git a/pages/index.js b/pages/index.js index 02a173d..0e13c27 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,6 +1,7 @@ import Head from 'next/head' import styles from '../styles/Home.module.css' import Button from '@material-ui/core/Button'; +import Link from 'next/link' export default function Home() { return ( @@ -10,21 +11,26 @@ export default function Home() {
-

Welcome to Andrew's Lawrence Hill Project!

+
+

Welcome to Lawrence Hill website!

+

Made by Andrew Lee in Next.JS

+

- + + + +
+ + +
) diff --git a/styles/Home.module.css b/styles/Home.module.css index 42e7e60..a2c5476 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -47,9 +47,14 @@ } .title { - margin: 0; - line-height: 1.15; - font-size: 4rem; + margin: 10px; + text-align: center; +} + +.titlelawrence +{ + margin: 5px; + text-align: center; } .title, diff --git a/styles/Page.module.css b/styles/Page.module.css new file mode 100644 index 0000000..1121b96 --- /dev/null +++ b/styles/Page.module.css @@ -0,0 +1,118 @@ +.container { + min-height: 100vh; + padding: 0 0.5rem; + display: flex; + flex-direction: column; +} + +.main { + padding: 5rem 0; + flex: 1; + display: flex; + flex-direction: column; +} + +.footer { + width: 100%; + height: 100px; + border-top: 1px solid #eaeaea; + display: flex; + justify-content: center; + align-items: center; +} + +.footer img { + margin-left: 0.5rem; +} + +.footer a { + display: flex; + 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; + line-height: 1.15; + font-size: 4rem; +} + +.title, +.description { + text-align: center; +} + +.description { + line-height: 1.5; + font-size: 1.5rem; +} + +.code { + background: #fafafa; + border-radius: 5px; + padding: 0.75rem; + font-size: 1.1rem; + font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, + Bitstream Vera Sans Mono, Courier New, monospace; +} + +.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; + } +} -- cgit v1.2.3