From a0dcaea030fb8580c8711333cd7354e8ea7675b5 Mon Sep 17 00:00:00 2001 From: K V VINITHA Date: Thu, 15 Feb 2024 13:41:05 -0800 Subject: [PATCH] Express JS --- 02-express-tutorial/app.js | 17 +- 02-express-tutorial/authorize.js | 13 + 02-express-tutorial/final/01-http-basics.js | 47 ++-- 02-express-tutorial/final/04-express-app.js | 30 ++- 02-express-tutorial/final/06-basic-json.js | 17 +- .../final/09-middleware-use.js | 40 +-- .../final/10-middleware-options.js | 45 ++-- 02-express-tutorial/final/11-methods.js | 131 +++++----- 02-express-tutorial/logger.js | 9 + 02-express-tutorial/package-lock.json | 104 +++++++- 02-express-tutorial/package.json | 3 +- 02-express-tutorial/public/browser-app.js | 6 + 02-express-tutorial/public/logo.svg | 17 ++ 02-express-tutorial/public/styles.css | 247 ++++++++++++++++++ 14 files changed, 574 insertions(+), 152 deletions(-) create mode 100644 02-express-tutorial/authorize.js create mode 100644 02-express-tutorial/logger.js create mode 100644 02-express-tutorial/public/browser-app.js create mode 100644 02-express-tutorial/public/logo.svg create mode 100644 02-express-tutorial/public/styles.css diff --git a/02-express-tutorial/app.js b/02-express-tutorial/app.js index ce296a6ee3..36dc1a5939 100644 --- a/02-express-tutorial/app.js +++ b/02-express-tutorial/app.js @@ -1 +1,16 @@ -console.log('Express Tutorial') +const express = require("express"); +const app = express(); + +app.get("/", (req, res) => { + const method = req.method; + + res.send("Home"); +}); + +app.get("/abput", (req, res) => { + res.send("About"); +}); + +app.listen(5000, () => { + console.log("server is listening to port"); +}); diff --git a/02-express-tutorial/authorize.js b/02-express-tutorial/authorize.js new file mode 100644 index 0000000000..be213bc928 --- /dev/null +++ b/02-express-tutorial/authorize.js @@ -0,0 +1,13 @@ +const authorize = (req, res, next) => { + const { user } = req.query; + if (user === "vini") { + // adding a property of user to req object + req.user = { name: "vini", id: "4" }; + next(); + } else { + res.status(401).send("Unauthorised"); + } + + next(); +}; +module.exports = authorize; diff --git a/02-express-tutorial/final/01-http-basics.js b/02-express-tutorial/final/01-http-basics.js index b76f108caa..03d3307ca8 100644 --- a/02-express-tutorial/final/01-http-basics.js +++ b/02-express-tutorial/final/01-http-basics.js @@ -1,26 +1,27 @@ -const http = require('http') +const http = require("http"); const server = http.createServer((req, res) => { - // console.log(req.method) - const url = req.url - // home page - if (url === '/') { - res.writeHead(200, { 'content-type': 'text/html' }) - res.write('

home page

') - res.end() - } - // about page - else if (url === '/about') { - res.writeHead(200, { 'content-type': 'text/html' }) - res.write('

about page

') - res.end() - } - // 404 - else { - res.writeHead(404, { 'content-type': 'text/html' }) - res.write('

page not found

') - res.end() - } -}) + // console.log(req.method) + // console.log(req.url) + const url = req.url; + // home page + if (url === "/") { + res.writeHead(200, { "content-type": "text/html" }); + res.write("

home page

"); + res.end(); + } + // about page + else if (url === "/about") { + res.writeHead(200, { "content-type": "text/html" }); + res.write("

about page

"); + res.end(); + } + // 404 + else { + res.writeHead(404, { "content-type": "text/html" }); + res.write("

page not found

"); + res.end(); + } +}); -server.listen(5000) +server.listen(5000); diff --git a/02-express-tutorial/final/04-express-app.js b/02-express-tutorial/final/04-express-app.js index fb4843d3da..e178aee764 100644 --- a/02-express-tutorial/final/04-express-app.js +++ b/02-express-tutorial/final/04-express-app.js @@ -1,19 +1,25 @@ -const express = require('express') -const path = require('path') +const express = require("express"); -const app = express() +// to get absolute path of the file +const path = require("path"); + +const app = express(); // setup static and middleware -app.use(express.static('./public')) +/* +app.use() is used to set up middleware. express.static is a built in middleware. +static assets are files that server doen't have to change , example image files,CSS files +*/ +app.use(express.static("./public")); -app.get('/', (req, res) => { - res.sendFile(path.resolve(__dirname, './navbar-app/index.html')) -}) +app.get("/", (req, res) => { + res.sendFile(path.resolve(__dirname, "./navbar-app/index.html")); +}); -app.all('*', (req, res) => { - res.status(404).send('resource not found') -}) +app.all("*", (req, res) => { + res.status(404).send("resource not found"); +}); app.listen(5000, () => { - console.log('server is listening on port 5000....') -}) + console.log("server is listening on port 5000...."); +}); diff --git a/02-express-tutorial/final/06-basic-json.js b/02-express-tutorial/final/06-basic-json.js index 9d1dc0e4ec..25a9a7856b 100644 --- a/02-express-tutorial/final/06-basic-json.js +++ b/02-express-tutorial/final/06-basic-json.js @@ -1,10 +1,11 @@ -const express = require('express') -const app = express() -const { products } = require('./data') -app.get('/', (req, res) => { - res.json(products) -}) +const express = require("express"); +// invoke express +const app = express(); +const { products } = require("./data"); +app.get("/", (req, res) => { + res.json(products); +}); app.listen(5000, () => { - console.log('Server is listening on port 5000....') -}) + console.log("Server is listening on port 5000...."); +}); diff --git a/02-express-tutorial/final/09-middleware-use.js b/02-express-tutorial/final/09-middleware-use.js index 9e575efee6..0417eeb022 100644 --- a/02-express-tutorial/final/09-middleware-use.js +++ b/02-express-tutorial/final/09-middleware-use.js @@ -1,24 +1,24 @@ -const express = require('express') -const app = express() -const logger = require('./logger') -const authorize = require('./authorize') +const express = require("express"); +const app = express(); +const logger = require("./logger"); +const authorize = require("./authorize"); // req => middleware => res -app.use([logger, authorize]) +app.use([logger, authorize]); // api/home/about/products -app.get('/', (req, res) => { - res.send('Home') -}) -app.get('/about', (req, res) => { - res.send('About') -}) -app.get('/api/products', (req, res) => { - res.send('Products') -}) -app.get('/api/items', (req, res) => { - console.log(req.user) - res.send('Items') -}) +app.get("/", (req, res) => { + res.send("Home"); +}); +app.get("/about", (req, res) => { + res.send("About"); +}); +app.get("/api/products", (req, res) => { + res.send("Products"); +}); +app.get("/api/items", (req, res) => { + console.log(req.user); + res.send("Items"); +}); app.listen(5000, () => { - console.log('Server is listening on port 5000....') -}) + console.log("Server is listening on port 5000...."); +}); diff --git a/02-express-tutorial/final/10-middleware-options.js b/02-express-tutorial/final/10-middleware-options.js index a3bdb0bd6b..643cadf1e5 100644 --- a/02-express-tutorial/final/10-middleware-options.js +++ b/02-express-tutorial/final/10-middleware-options.js @@ -1,28 +1,31 @@ -const express = require('express') -const app = express() -const morgan = require('morgan') -const logger = require('./logger') -const authorize = require('./authorize') +const express = require("express"); +const app = express(); +const morgan = require("morgan"); +const logger = require("./logger"); +const authorize = require("./authorize"); // req => middleware => res +// 1. use vs route +// 2. options - our own/express/ third party middle wares + // app.use([logger, authorize]) // app.use(express.static('./public')) -app.use(morgan('tiny')) +app.use(morgan("tiny")); -app.get('/', (req, res) => { - res.send('Home') -}) -app.get('/about', (req, res) => { - res.send('About') -}) -app.get('/api/products', (req, res) => { - res.send('Products') -}) -app.get('/api/items', (req, res) => { - console.log(req.user) - res.send('Items') -}) +app.get("/", (req, res) => { + res.send("Home"); +}); +app.get("/about", (req, res) => { + res.send("About"); +}); +app.get("/api/products", (req, res) => { + res.send("Products"); +}); +app.get("/api/items", (req, res) => { + console.log(req.user); + res.send("Items"); +}); app.listen(5000, () => { - console.log('Server is listening on port 5000....') -}) + console.log("Server is listening on port 5000...."); +}); diff --git a/02-express-tutorial/final/11-methods.js b/02-express-tutorial/final/11-methods.js index 9e7ee1e90b..1ca6ba68d2 100644 --- a/02-express-tutorial/final/11-methods.js +++ b/02-express-tutorial/final/11-methods.js @@ -1,80 +1,81 @@ -const express = require('express') -const app = express() -let { people } = require('./data') +const express = require("express"); +const app = express(); +let { people } = require("./data"); // static assets -app.use(express.static('./methods-public')) +// express.static is a built in middleware +app.use(express.static("./methods-public")); // parse form data -app.use(express.urlencoded({ extended: false })) +app.use(express.urlencoded({ extended: false })); // parse json -app.use(express.json()) +app.use(express.json()); -app.get('/api/people', (req, res) => { - res.status(200).json({ success: true, data: people }) -}) +app.get("/api/people", (req, res) => { + res.status(200).json({ success: true, data: people }); +}); -app.post('/api/people', (req, res) => { - const { name } = req.body - if (!name) { - return res - .status(400) - .json({ success: false, msg: 'please provide name value' }) - } - res.status(201).json({ success: true, person: name }) -}) +app.post("/api/people", (req, res) => { + const { name } = req.body; + if (!name) { + return res + .status(400) + .json({ success: false, msg: "please provide name value" }); + } + res.status(201).json({ success: true, person: name }); +}); -app.post('/api/postman/people', (req, res) => { - const { name } = req.body - if (!name) { - return res - .status(400) - .json({ success: false, msg: 'please provide name value' }) - } - res.status(201).json({ success: true, data: [...people, name] }) -}) +app.post("/api/postman/people", (req, res) => { + const { name } = req.body; + if (!name) { + return res + .status(400) + .json({ success: false, msg: "please provide name value" }); + } + res.status(201).json({ success: true, data: [...people, name] }); +}); -app.post('/login', (req, res) => { - const { name } = req.body - if (name) { - return res.status(200).send(`Welcome ${name}`) - } +app.post("/login", (req, res) => { + const { name } = req.body; + if (name) { + return res.status(200).send(`Welcome ${name}`); + } - res.status(401).send('Please Provide Credentials') -}) + res.status(401).send("Please Provide Credentials"); +}); -app.put('/api/people/:id', (req, res) => { - const { id } = req.params - const { name } = req.body +app.put("/api/people/:id", (req, res) => { + const { id } = req.params; + const { name } = req.body; - const person = people.find((person) => person.id === Number(id)) + const person = people.find((person) => person.id === Number(id)); - if (!person) { - return res - .status(404) - .json({ success: false, msg: `no person with id ${id}` }) - } - const newPeople = people.map((person) => { - if (person.id === Number(id)) { - person.name = name - } - return person - }) - res.status(200).json({ success: true, data: newPeople }) -}) + if (!person) { + return res + .status(404) + .json({ success: false, msg: `no person with id ${id}` }); + } + const newPeople = people.map((person) => { + if (person.id === Number(id)) { + person.name = name; + } + return person; + }); + res.status(200).json({ success: true, data: newPeople }); +}); -app.delete('/api/people/:id', (req, res) => { - const person = people.find((person) => person.id === Number(req.params.id)) - if (!person) { - return res - .status(404) - .json({ success: false, msg: `no person with id ${req.params.id}` }) - } - const newPeople = people.filter( - (person) => person.id !== Number(req.params.id) - ) - return res.status(200).json({ success: true, data: newPeople }) -}) +app.delete("/api/people/:id", (req, res) => { + const person = people.find((person) => person.id === Number(req.params.id)); + if (!person) { + return res + .status(404) + .json({ success: false, msg: `no person with id ${req.params.id}` }); + } + const newPeople = people.filter( + (person) => person.id !== Number(req.params.id), + ); + return res.status(200).json({ success: true, data: newPeople }); +}); app.listen(5000, () => { - console.log('Server is listening on port 5000....') -}) + console.log("Server is listening on port 5000...."); +}); diff --git a/02-express-tutorial/logger.js b/02-express-tutorial/logger.js new file mode 100644 index 0000000000..5d4e3b217a --- /dev/null +++ b/02-express-tutorial/logger.js @@ -0,0 +1,9 @@ +const logger = (req, res, next) => { + const method = req.method; + const url = req.url; + const time = new Date().getFullYear(); + console.log(method, url, time); + next(); +}; + +module.exports = logger; diff --git a/02-express-tutorial/package-lock.json b/02-express-tutorial/package-lock.json index 417394ff8b..1d8bf22741 100644 --- a/02-express-tutorial/package-lock.json +++ b/02-express-tutorial/package-lock.json @@ -5,10 +5,12 @@ "requires": true, "packages": { "": { + "name": "2-express-tutorial", "version": "1.0.0", "license": "ISC", "dependencies": { - "express": "^4.17.1" + "express": "^4.17.1", + "morgan": "^1.10.0" }, "devDependencies": { "nodemon": "^2.0.7" @@ -160,6 +162,17 @@ "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "dev": true }, + "node_modules/basic-auth": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz", + "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==", + "dependencies": { + "safe-buffer": "5.1.2" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", @@ -1127,6 +1140,42 @@ "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", "dev": true }, + "node_modules/morgan": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz", + "integrity": "sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==", + "dependencies": { + "basic-auth": "~2.0.1", + "debug": "2.6.9", + "depd": "~2.0.0", + "on-finished": "~2.3.0", + "on-headers": "~1.0.2" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/morgan/node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/morgan/node_modules/depd": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", + "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/morgan/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -1214,6 +1263,14 @@ "node": ">= 0.8" } }, + "node_modules/on-headers": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz", + "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==", + "engines": { + "node": ">= 0.8" + } + }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -1919,6 +1976,14 @@ "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "dev": true }, + "basic-auth": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz", + "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==", + "requires": { + "safe-buffer": "5.1.2" + } + }, "binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", @@ -2676,6 +2741,38 @@ "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", "dev": true }, + "morgan": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz", + "integrity": "sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==", + "requires": { + "basic-auth": "~2.0.1", + "debug": "2.6.9", + "depd": "~2.0.0", + "on-finished": "~2.3.0", + "on-headers": "~1.0.2" + }, + "dependencies": { + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "requires": { + "ms": "2.0.0" + } + }, + "depd": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", + "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==" + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + } + } + }, "ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -2734,6 +2831,11 @@ "ee-first": "1.1.1" } }, + "on-headers": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz", + "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==" + }, "once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", diff --git a/02-express-tutorial/package.json b/02-express-tutorial/package.json index be7d86b24c..7b5cf9015c 100644 --- a/02-express-tutorial/package.json +++ b/02-express-tutorial/package.json @@ -10,7 +10,8 @@ "author": "", "license": "ISC", "dependencies": { - "express": "^4.17.1" + "express": "^4.17.1", + "morgan": "^1.10.0" }, "devDependencies": { "nodemon": "^2.0.7" diff --git a/02-express-tutorial/public/browser-app.js b/02-express-tutorial/public/browser-app.js new file mode 100644 index 0000000000..b37d1be152 --- /dev/null +++ b/02-express-tutorial/public/browser-app.js @@ -0,0 +1,6 @@ +const navToggle = document.querySelector('.nav-toggle') +const links = document.querySelector('.links') + +navToggle.addEventListener('click', function () { + links.classList.toggle('show-links') +}) diff --git a/02-express-tutorial/public/logo.svg b/02-express-tutorial/public/logo.svg new file mode 100644 index 0000000000..cccc49be15 --- /dev/null +++ b/02-express-tutorial/public/logo.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/02-express-tutorial/public/styles.css b/02-express-tutorial/public/styles.css new file mode 100644 index 0000000000..3de663e79b --- /dev/null +++ b/02-express-tutorial/public/styles.css @@ -0,0 +1,247 @@ +/* +=============== +Fonts +=============== +*/ +@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap"); + +/* +=============== +Variables +=============== +*/ + +:root { + /* dark shades of primary color*/ + --clr-primary-1: hsl(205, 86%, 17%); + --clr-primary-2: hsl(205, 77%, 27%); + --clr-primary-3: hsl(205, 72%, 37%); + --clr-primary-4: hsl(205, 63%, 48%); + /* primary/main color */ + --clr-primary-5: hsl(205, 78%, 60%); + /* lighter shades of primary color */ + --clr-primary-6: hsl(205, 89%, 70%); + --clr-primary-7: hsl(205, 90%, 76%); + --clr-primary-8: hsl(205, 86%, 81%); + --clr-primary-9: hsl(205, 90%, 88%); + --clr-primary-10: hsl(205, 100%, 96%); + /* darkest grey - used for headings */ + --clr-grey-1: hsl(209, 61%, 16%); + --clr-grey-2: hsl(211, 39%, 23%); + --clr-grey-3: hsl(209, 34%, 30%); + --clr-grey-4: hsl(209, 28%, 39%); + /* grey used for paragraphs */ + --clr-grey-5: hsl(210, 22%, 49%); + --clr-grey-6: hsl(209, 23%, 60%); + --clr-grey-7: hsl(211, 27%, 70%); + --clr-grey-8: hsl(210, 31%, 80%); + --clr-grey-9: hsl(212, 33%, 89%); + --clr-grey-10: hsl(210, 36%, 96%); + --clr-white: #fff; + --clr-red-dark: hsl(360, 67%, 44%); + --clr-red-light: hsl(360, 71%, 66%); + --clr-green-dark: hsl(125, 67%, 44%); + --clr-green-light: hsl(125, 71%, 66%); + --clr-black: #222; + --ff-primary: "Roboto", sans-serif; + --ff-secondary: "Open Sans", sans-serif; + --transition: all 0.3s linear; + --spacing: 0.1rem; + --radius: 0.25rem; + --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); + --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); + --max-width: 1170px; + --fixed-width: 620px; +} +/* +=============== +Global Styles +=============== +*/ + +*, +::after, +::before { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + font-family: var(--ff-secondary); + background: var(--clr-grey-10); + color: var(--clr-grey-1); + line-height: 1.5; + font-size: 0.875rem; +} +ul { + list-style-type: none; +} +a { + text-decoration: none; +} +h1, +h2, +h3, +h4 { + letter-spacing: var(--spacing); + text-transform: capitalize; + line-height: 1.25; + margin-bottom: 0.75rem; + font-family: var(--ff-primary); +} +h1 { + font-size: 3rem; +} +h2 { + font-size: 2rem; +} +h3 { + font-size: 1.25rem; +} +h4 { + font-size: 0.875rem; +} +p { + margin-bottom: 1.25rem; + color: var(--clr-grey-5); +} +@media screen and (min-width: 800px) { + h1 { + font-size: 4rem; + } + h2 { + font-size: 2.5rem; + } + h3 { + font-size: 1.75rem; + } + h4 { + font-size: 1rem; + } + body { + font-size: 1rem; + } + h1, + h2, + h3, + h4 { + line-height: 1; + } +} +/* global classes */ + +/* section */ +.section { + padding: 5rem 0; +} + +.section-center { + width: 90vw; + margin: 0 auto; + max-width: 1170px; +} +@media screen and (min-width: 992px) { + .section-center { + width: 95vw; + } +} +main { + min-height: 100vh; + display: grid; + place-items: center; +} + +/* +=============== +Navbar +=============== +*/ +nav { + background: var(--clr-white); + box-shadow: var(--light-shadow); +} +.nav-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem; +} +.nav-toggle { + font-size: 1.5rem; + color: var(--clr-primary-5); + background: transparent; + border-color: transparent; + transition: var(--transition); + cursor: pointer; +} +.nav-toggle:hover { + color: var(--clr-primary-1); + transform: rotate(90deg); +} +.logo { + height: 40px; +} +.links a { + color: var(--clr-grey-3); + font-size: 1rem; + text-transform: capitalize; + letter-spacing: var(--spacing); + display: block; + padding: 0.5rem 1rem; + transition: var(--transition); +} +.links a:hover { + background: var(--clr-primary-8); + color: var(--clr-primary-5); + padding-left: 1.5rem; +} +.social-icons { + display: none; +} +.links { + height: 0; + overflow: hidden; + transition: var(--transition); +} +.show-links { + height: 10rem; +} +@media screen and (min-width: 800px) { + .nav-center { + max-width: 1170px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem; + } + .nav-header { + padding: 0; + } + .nav-toggle { + display: none; + } + .links { + height: auto; + display: flex; + } + .links a { + padding: 0; + margin: 0 0.5rem; + } + .links a:hover { + padding: 0; + background: transparent; + } + .social-icons { + display: flex; + } + .social-icons a { + margin: 0 0.5rem; + color: var(--clr-primary-5); + transition: var(--transition); + } + .social-icons a:hover { + color: var(--clr-primary-7); + } +}