diff --git a/.github/stale.yml b/.github/stale.yml new file mode 100644 index 000000000..8f5bd8276 --- /dev/null +++ b/.github/stale.yml @@ -0,0 +1,23 @@ +# Configuration for probot-stale - https://github.com/probot/stale + +# Number of days of inactivity before an Issue or Pull Request becomes stale +daysUntilStale: 21 + +# Number of days of inactivity before an Issue or Pull Request with the stale label is closed. +# Set to false to disable. If disabled, issues still need to be closed manually, but will remain marked as stale. +daysUntilClose: 7 + +# Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable +exemptLabels: + - bug + - enhancement + +# Label to use when marking as stale +staleLabel: stale + +# Comment to post when marking as stale. Set to `false` to disable +markComment: > + This pull request has been automatically marked as stale because it didn't have any recent activity. It will be closed if no further activity occurs. Thank you. + +closeComment: > + This pull request has been automatically closed. Thank you. diff --git a/.gitignore b/.gitignore index 3c3629e64..18a991fe0 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,6 @@ +.DS_Store node_modules +package-lock.json +yarn.lock +*.vscode +*.log diff --git a/README.md b/README.md index 6c8eae3c7..cb5525337 100644 --- a/README.md +++ b/README.md @@ -1,34 +1,46 @@ -Express Basic Website -===================== +![logo_ironhack_blue 7](https://user-images.githubusercontent.com/23629340/40541063-a07a0a8a-601a-11e8-91b5-2f13e4e6b441.png) -Pick a celebrity or other topic and use Express with EJS to make a Website for it. +# Express basic website +## Introduction -Requirements ------------- +Pick a person that you admire and build a website that shares some basic information about them. They can be a writer, a musician, a celebrity, or someone you know personally. -**Your Website should have (at least) 3 pages:** +You should use `express` to create your app, build the routing logic with the built-in app routing methods, and serve static content for every request. + +## Requirements + +- Fork this repo +- Clone this repo -1. A home page -2. An "about" page -3. A photo gallery page +## Submission -**Your site should also have a `public/` folder for:** +- Upon completion, run the following commands: -- CSS styling -- images -- (BONUS) some small front end JavaScript (click events, fade ins, popups, etc.) + ```bash + git add . + git commit -m "Solved Lab" + git push origin master + ``` -Send your pull request before next class! +- Create Pull Request so your TAs can check up your work. + +## Instructions + +**Your Website should have (at least) 3 pages:** +1. A **Home** page, that welcomes the visitor and links to the other pages on the website. +2. An **About** page, that shares some basic information about the person. +3. A **Works** page, where you showcase some of the work of the person you chose. +4. Bonus: A **Photo Gallery** page, displaying some pictures of the person/their work. -Structure of Your Code ----------------------- +You should go through the following steps: -Your starter code only has an empty `app.js` file. -In addition to that, you will need: +1. Run `npm init -y` to create a package.json file. +2. Run `npm install express` to install the Express package. +3. Create a `views/` directory that will hold your `.html` files. +4. Create a `public/` directory that will hold other static files, such as your CSS stylesheets, scripts and images. +5. Build your Express app in `app.js`. +6. Polish your HTML, stylesheets and scripts. -1. a `package.json` file (run `npm init` to create one) -2. to install `express` and `ejs` with npm (dont' forget to `--save`) -3. a `views/` folder for your EJS files (remember they just contain HTML right now) -4. a `public/` folder for your publicly available files like CSS, images and (bonus) JavaScript +Happy coding! 💙 diff --git a/app.js b/app.js new file mode 100644 index 000000000..22c463838 --- /dev/null +++ b/app.js @@ -0,0 +1,27 @@ +const express = require('express'); +const app = express(); +app.use(express.static('public')); + + +app.get('/', (request, response, next) =>{ + response.sendFile(__dirname + '/views/home.html') +}); + +app.get('/about', (request, response, next) =>{ + response.sendFile(__dirname + '/views/about.html') +}); + +app.get('/works', (request, response, next) =>{ + response.sendFile(__dirname + '/views/works.html') +}); + +app.get('/photosGal', (request, response, next) =>{ + response.sendFile(__dirname + '/views/photoGal.html') +}); + + + + +app.listen(3000, () => { + console.log('My first app listening on port 3000!'); + }); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 000000000..d8c34aced --- /dev/null +++ b/package.json @@ -0,0 +1,23 @@ +{ + "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" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/Elko-Lemiso/lab-express-basic-site.git" + }, + "keywords": [], + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/Elko-Lemiso/lab-express-basic-site/issues" + }, + "homepage": "https://github.com/Elko-Lemiso/lab-express-basic-site#readme", + "dependencies": { + "express": "^4.17.1" + } +} diff --git a/public/images/back.svg b/public/images/back.svg new file mode 100644 index 000000000..39e0ce450 --- /dev/null +++ b/public/images/back.svg @@ -0,0 +1 @@ + diff --git a/public/images/elon1.jpg b/public/images/elon1.jpg new file mode 100644 index 000000000..614140776 Binary files /dev/null and b/public/images/elon1.jpg differ diff --git a/public/images/elon2.png b/public/images/elon2.png new file mode 100644 index 000000000..a03c86add Binary files /dev/null and b/public/images/elon2.png differ diff --git a/public/images/elon3.jpg b/public/images/elon3.jpg new file mode 100644 index 000000000..d0dbfb075 Binary files /dev/null and b/public/images/elon3.jpg differ diff --git a/public/images/elon4.jpg b/public/images/elon4.jpg new file mode 100644 index 000000000..3c43356dc Binary files /dev/null and b/public/images/elon4.jpg differ diff --git a/public/images/elon5.jpg b/public/images/elon5.jpg new file mode 100644 index 000000000..f6b4c3946 Binary files /dev/null and b/public/images/elon5.jpg differ diff --git a/public/images/elon6.jpg b/public/images/elon6.jpg new file mode 100644 index 000000000..7670d8324 Binary files /dev/null and b/public/images/elon6.jpg differ diff --git a/public/images/elon7.jpg b/public/images/elon7.jpg new file mode 100644 index 000000000..ca51be4ac Binary files /dev/null and b/public/images/elon7.jpg differ diff --git a/public/images/elon8.jpg b/public/images/elon8.jpg new file mode 100644 index 000000000..782fe896e Binary files /dev/null and b/public/images/elon8.jpg differ diff --git a/public/images/elonWeed.jpg b/public/images/elonWeed.jpg new file mode 100644 index 000000000..c66c75e57 Binary files /dev/null and b/public/images/elonWeed.jpg differ diff --git a/public/styles/style.css b/public/styles/style.css new file mode 100644 index 000000000..1ed864c04 --- /dev/null +++ b/public/styles/style.css @@ -0,0 +1,148 @@ +body{ + background-color: cornsilk; +} +#home{ + display: flex; + flex-direction: row; +} +.margin { + margin-left: 20%; +} +#text{ + text-align: center; + margin-right: 20%; +} +#elon-head{ + width: 50%; + -webkit-animation: shake-lr 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both; + animation: shake-lr 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both; +} +.back{ + width: 11%; + position: absolute; +} +h1{ + color: rgb(31, 30, 30); + font-size: 8rem; + font-style: oblique; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + margin: 0; +} +#text a{ + text-decoration: none; + color: darkgoldenrod; + font-size: 2rem; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-style: oblique; + padding: 10px; +} +#text a:hover{ + color: rgb(31, 30, 30) !important; + transition: all 0.4s ease 0s; +} +.container{ + display: flex; + flex-direction: row; + align-content: center; + justify-content: space-evenly; +} +.paragraph{ + font-size: 1.5rem; + text-align: left; + width: 50vw; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-style: oblique; + font-weight: 600; + margin-left: 2%; + line-height: 200%; +} +#image{ + width: 50%; + justify-self: right; + align-self: center; + margin-top: 40%; + margin-left: 20%; +} +.img{ + width: 30%; + margin: 1%; +} +/* ---------------------------------------------- + * Generated by Animista on 2020-5-26 16:7:22 + * Licensed under FreeBSD License. + * See http://animista.net/license for more info. + * w: http://animista.net, t: @cssanimista + * ---------------------------------------------- */ + +/** + * ---------------------------------------- + * animation shake-lr + * ---------------------------------------- + */ + @-webkit-keyframes shake-lr { + 0%, + 100% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + } + 10% { + -webkit-transform: rotate(8deg); + transform: rotate(8deg); + } + 20%, + 40%, + 60% { + -webkit-transform: rotate(-10deg); + transform: rotate(-10deg); + } + 30%, + 50%, + 70% { + -webkit-transform: rotate(10deg); + transform: rotate(10deg); + } + 80% { + -webkit-transform: rotate(-8deg); + transform: rotate(-8deg); + } + 90% { + -webkit-transform: rotate(8deg); + transform: rotate(8deg); + } + } + @keyframes shake-lr { + 0%, + 100% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + } + 10% { + -webkit-transform: rotate(8deg); + transform: rotate(8deg); + } + 20%, + 40%, + 60% { + -webkit-transform: rotate(-10deg); + transform: rotate(-10deg); + } + 30%, + 50%, + 70% { + -webkit-transform: rotate(10deg); + transform: rotate(10deg); + } + 80% { + -webkit-transform: rotate(-8deg); + transform: rotate(-8deg); + } + 90% { + -webkit-transform: rotate(8deg); + transform: rotate(8deg); + } + } + \ No newline at end of file diff --git a/starter-code/app.js b/starter-code/app.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/views/about.html b/views/about.html new file mode 100644 index 000000000..6ee231995 --- /dev/null +++ b/views/about.html @@ -0,0 +1,26 @@ + + + + + + Document + + + +
+
+
+ +

ELON MUSK

+
+
+

A mordern alloy of Thomas Edison, Henry Ford, Howard Hughes and Steve Jobs, Elon Musk is the man behind payPal, Tesla Motors, SpaceX and SolarCity, each of which have sent shock waves throughout business and industry.

+

More than any other executive today, Musk has dedicated his energies and his vast fortune to building a future that is rich and as far reaching as a science fiction fantasy.

+
+
+
+ +
+
+ + \ No newline at end of file diff --git a/views/home.html b/views/home.html new file mode 100644 index 000000000..a36a5358c --- /dev/null +++ b/views/home.html @@ -0,0 +1,21 @@ + + + + + + + Document + + +
+ +
+

ELON MUSK

+ ABOUT THIS DUDE
+ WHERE DOES THIS DUDE WORK?
+ SOME PHOTOS OF DIS GUY +
+ +
+ + \ No newline at end of file diff --git a/views/photoGal.html b/views/photoGal.html new file mode 100644 index 000000000..6bf094411 --- /dev/null +++ b/views/photoGal.html @@ -0,0 +1,22 @@ + + + + + + + Document + + + +
+ + + +
+
+ + + +
+ + \ No newline at end of file diff --git a/views/works.html b/views/works.html new file mode 100644 index 000000000..a93324604 --- /dev/null +++ b/views/works.html @@ -0,0 +1,21 @@ + + + + + + + Document + + + +

ELON MUSK

+
+
+

One of the most interesting things about how Elon Musk works is the fact that he does work -- because, really, he doesn't have to. His ventures in the Internet world earned him a considerable fortune. By his early 30s, he was already worth about $200 million. But when people ask him why he hasn't retired -- or bought himself an island, for that matter -- he claims he'd simply get bored. Instead, Elon Musk decided to enter one of the riskiest, costliest, most unforgiving businesses there is: the space business.

+
+
+

Unlike many of the other private attempts to enter space, Musk's rockets are built to enter Earth orbit or beyond, which is a bigger challenge than merely reaching suborbital heights (something SpaceShipOne accomplished). And although Musk has proven his business savvy through several successful ventures (he's linked to PayPal, for one), he's surprised everyone with his space aspirations. Not easily discouraged, he explained in one interview that people are too easily frightened by risk -- in fact, they all too often overestimate the risk involved

+
+
+ + \ No newline at end of file