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);
+ }
+}