[AMST WDFT Elko Lemiso]

.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.

.gitignore

@@ -1 +1,6 @@
+.DS_Store
 node_modules
+package-lock.json
+yarn.lock
+*.vscode
+*.log

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! 💙

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

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"
+  }
+}

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

views/about.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="styles/style.css">
+</head>
+<body>
+    <div class="container">
+        <div >
+            <div>
+                <a href="/"><img  class="back"src="images/back.svg" alt=""></a>
+                <h1 class="margin">ELON MUSK</h1>
+            </div>
+            <div class="paragraph">
+                <p>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. </p>
+                <p>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.</p>
+            </div>
+        </div>
+        <div>
+            <img id="image" src="images/elon3.jpg" alt="">
+        </div>
+    </div>
+</body>
+</html>

views/home.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles/style.css">
+    <title>Document</title>
+</head>
+<body>
+    <div id="home">
+        <img id= "elon-head" src="images/elon2.png" alt="">
+        <div id="text">
+            <h1>ELON MUSK</h1>
+            <a href="/about">ABOUT THIS DUDE</a><br>
+            <a href="/works">WHERE DOES THIS DUDE WORK?</a><br>
+            <a href="/photosGal">SOME PHOTOS OF DIS GUY</a>
+        </div>
+
+    </div>
+</body>
+</html>

views/photoGal.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles/style.css">
+    <title>Document</title>
+</head>
+<body>
+    <a href="/"><img  class="back"src="images/back.svg" alt=""></a>
+    <div class="container">
+        <img class = "img" src="images/elon1.jpg" alt="">
+        <img class = "img" src="images/elon8.jpg" alt="">
+        <img class = "img" src="images/elon4.jpg" alt="">
+    </div>
+    <div class="container">
+        <img class = "img" src="images/elon5.jpg" alt="">
+        <img class = "img" src="images/elon6.jpg" alt="">
+        <img class = "img" src="images/elonWeed.jpg" alt="">
+    </div>
+</body>
+</html>