diff --git a/app.js b/app.js index e69de29bb..4506fc6be 100644 --- a/app.js +++ b/app.js @@ -0,0 +1,22 @@ +const express = require("express"); +const app = express(); +const port = 3000; + + +app.use(express.static("public")); + +app.get("/", (req, res) => { + res.sendFile(`${__dirname}/views/index.html`); +}); + +app.get("/about", (req, res) => { + res.sendFile(`${__dirname}/views/about.html`); + }); + +app.get("/works", (req, res) => { + res.sendFile(`${__dirname}/views/works.html`); + }); + +app.listen(port, () => { + console.log(`Server is running on port ${port}`); +}); diff --git a/package.json b/package.json new file mode 100644 index 000000000..5f32f1857 --- /dev/null +++ b/package.json @@ -0,0 +1,15 @@ +{ + "name": "lab-express-basic-site", + "version": "1.0.0", + "description": "![logo_ironhack_blue 7](https://user-images.githubusercontent.com/23629340/40541063-a07a0a8a-601a-11e8-91b5-2f13e4e6b441.png)", + "main": "app.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [], + "author": "", + "license": "ISC", + "dependencies": { + "express": "^4.19.2" + } +} diff --git a/public/css/styles.css b/public/css/styles.css new file mode 100644 index 000000000..1b80a296a --- /dev/null +++ b/public/css/styles.css @@ -0,0 +1,165 @@ +@import url("https://fonts.googleapis.com/css2?family=Bangers&display=swap"); + +body { + background-color: #f8f9fa; + font-family: "Bangers", cursive; + font-size: 16px; +} + +img { + height: 100vh; +} + +h1 { + font-size: 3rem; + text-align: center; +} + +h2 { + font-size: 2rem; + text-align: center; +} +a { + font-size: 1rem; + text-align: center; + list-style: none; +} + +ul { + display: flex; + justify-content: space-between; + flex-direction: column; + list-style: none; +} + +li { + font-size: 1rem; + text-align: center; + list-style: none; + margin-top: 1rem; +} + +#navbar-container { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + margin-bottom: 10px; +} + +#navbar { + display: flex; + justify-content: center; + align-items: center; + flex-direction: row; +} + +#navbar a { + margin: 0 1rem; + text-decoration: none; + color: black; + transition: color 0.3s; + font-size: 1.5rem; +} + +#navbar a:hover { + color: #007bff; +} + +#navbar a.active { + color: #007bff; +} + +#navbar a.active::after { + content: ""; + display: block; + width: 0; + height: 2px; + background: #007bff; + transition: width 0.3s; +} + +#navbar a.active:hover::after { + width: 100%; +} + +#hero-section { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 100vh; +} + +#landing-container { + display: flex; + justify-content: space-around; + align-items: center; + height: 100vh; + flex-direction: row; +} + +#landing-container h1 { + font-size: 5rem; +} + +#landing-container img { + width: 50vw; +} + +#personality-container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + flex-direction: column; +} + +#achievements-container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + flex-direction: column; +} + +#about-container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + flex-direction: column; +} + +#about-container img { + width: 50vw; +} + +.line { + border-bottom: 1px solid #888; +} + +#team-containers { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + flex-direction: column; +} + +#team-containers p { + font-size: 1.5rem; + font-style: italic; +} + +#works-container { + display: flex; + justify-content: space-between; + align-items: center; + height: 100vh; + flex-direction: column; +} + +#works-container img { + width: 50vw; +} diff --git a/public/images/about_bart.png b/public/images/about_bart.png new file mode 100644 index 000000000..372a69962 Binary files /dev/null and b/public/images/about_bart.png differ diff --git a/public/images/bart.png b/public/images/bart.png new file mode 100644 index 000000000..11bce6f01 Binary files /dev/null and b/public/images/bart.png differ diff --git a/public/images/burns.png b/public/images/burns.png new file mode 100644 index 000000000..bf16370ce Binary files /dev/null and b/public/images/burns.png differ diff --git a/public/images/love_bart.png b/public/images/love_bart.png new file mode 100644 index 000000000..46c6d7b43 Binary files /dev/null and b/public/images/love_bart.png differ diff --git a/views/about.html b/views/about.html new file mode 100644 index 000000000..55cd16a5c --- /dev/null +++ b/views/about.html @@ -0,0 +1,41 @@ + + + + + + About + + + + +
+

About Us

+

We are a group of people who love Bart Simpson.

+

He is the ultimate badboy.

+

+ He is a prankster, a skateboarder, an underachiever, and a bad student. +

+

+ He sucks at school, is mean to his sister Lisa, loves his parents + though, and is the ultimate skateboarder. +

+

He is the best!

+ Bart Simpson +
+
+
+

Our team

+ +

+ PS: Actually it's just Montgomery Burns who created this website, + shut!!! +

+
+ + diff --git a/views/index.html b/views/index.html new file mode 100644 index 000000000..d7b89fee5 --- /dev/null +++ b/views/index.html @@ -0,0 +1,42 @@ + + + + + + Home + + + + +
+

Bart is the ulimate badboy

+ Bart Simpson +
+
+
+

Bart Simpson

+ +
+
+

Life achievements

+ +
+
+ + diff --git a/views/works.html b/views/works.html new file mode 100644 index 000000000..57b3088e4 --- /dev/null +++ b/views/works.html @@ -0,0 +1,29 @@ + + + + + + Works + + + + +
+

Bart Life's Work

+ + Bart Simpson +
+ +