Jayson Intership solved lab

app.js

@@ -0,0 +1,22 @@
+const express = require("express");
+//creation of our own server
+const app = express();
+
+//making everything inside of public available
+app.use(express.static("public"));
+
+//adding custom middleware to set correct MIME type
+app.use((request,response, next)=>{
+    if(request.url.endsWith('.css')){
+        response.setHeader('Content-Type','text/css');
+    }
+    next();
+})
+
+//routes
+app.get('/home',(request,response,next)=>response.sendFile(__dirname + '/views/home-page.html'));
+app.get('/about',(request,response,next)=>response.sendFile(__dirname + '/views/about-page.html'));
+app.get('/works',(request,response,next)=>response.sendFile(__dirname + '/views/works-page.html'));
+app.get('/gallery',(request,response,next)=>response.sendFile(__dirname + '/views/gallery-page.html'));
+//starting server
+app.listen(3000, ()=> console.log("Application listening on port 3000!"))

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "lab-express-basic",
+  "version": "1.0.0",
+  "description": "<img src=\"https://imgur.com/XOS1Vdh.png\"  width=\"150px\" height=\"150px\">",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.18.2"
+  }
+}

public/stylesheets/style.css

@@ -0,0 +1,215 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;1,300;1,400&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+body {
+  /* background: #081b29; */
+  color: #ededed;
+}
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 20px 10%;
+  background: transparent;
+  display: flex;
+  justify-content: space-between;
+  align-items: centre;
+  z-index: 100;
+}
+.logo {
+  position: relative;
+  font-size: 25px;
+  color: #ededed;
+  text-decoration: none;
+  font-weight: 600;
+}
+.logo::before{
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width:100%;
+  height:100%;
+  background:#081b29;
+  animation: showRight 1s ease forwards ;
+  animation-delay: .4s;
+}
+.navbar a {
+  font-size: 18px;
+  color: #ededed;
+  text-decoration: none;
+  font-weight: 500;
+  margin-left: 35px;
+  transition: 3s;
+}
+.navbar a:hover,
+.navbar a.active {
+  color: #00abf0;
+}
+.home {
+  height: 100vh;
+  background: url('/images/robert.jpg') no-repeat;
+  background-size: cover;
+  background-position: center;
+  display: flex;
+  align-items: center;
+  padding: 0 10%;
+}
+.home-content {
+  margin: 20px;
+  max-width: 600px;
+}
+.home-content h1 {
+  position: relative;
+  font-size: 56px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+.home-content h1::before{
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width:100%;
+  height:100%;
+  background:#081b29;
+  animation: showRight 1s ease forwards ;
+  animation-delay: 1s;
+}
+.home-content h3 {
+  position: relative;
+  font-size: 32px;
+  font-weight: 700;
+  color: #00abf0;
+}
+.home-content h3::before{
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width:100%;
+  height:100%;
+  background:#081b29;
+  animation: showRight 1s ease forwards ;
+  animation-delay: 1.3s;
+}
+.home-content p {
+  position:relative;
+  font-size: 16px;
+}
+.home-content p::before{
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width:100%;
+  height:100%;
+  background:#081b29;
+  animation: showRight 1s ease forwards ;
+  animation-delay: 1.6s;
+}
+.home-sci {
+  position: absolute;
+  bottom: 40px;
+  width: 170px;
+  display: flex;
+  justify-content: space-between;
+}
+.home-sci a {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  background: transparent;
+  border: 2px solid;
+  border-radius: 50%;
+  font-size: 20px;
+  color: #00abf0;
+  text-decoration: none;
+  z-index: -1;
+  overflow: hidden;
+  transition:5s;
+
+}
+.home-sci a:hover{
+    color: #081b29;
+}
+.home-sci a::before{
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height:100%;
+    background:#00abf0;
+    z-index: -1;
+    transition: .5s;
+
+}
+.home-sci a:hover::before{
+    width: 100%;
+}
+
+.home-ingHover{
+  position: absolute;
+  top:0;
+  right:30px;
+  width: 500px;
+  height:100% ;
+  background:transparent ;
+  /* border:2px solid red; */
+  transition: 3s;
+}
+.home-ingHover:hover{
+  background: #081b29;
+  opacity: .8;
+}
+
+
+/* KEYFRAMES ANIMATION */
+@keyframes showRight {
+  100%{
+    width:0;
+  }
+}
+
+/* about section and gallery */
+.about {
+  height: 100vh;
+  background: url('/images/robertrdj.jpg') no-repeat;
+  background-size: contain;
+  background-color: #081b29;
+  background-position: center;
+  display: flex;
+  align-items: center;
+  padding: 0 10%;
+}
+.gallery{
+  padding: 20px;
+  background: #081b29;
+  background-size: cover;
+
+}
+.gallery table{
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.gallery td{
+  padding:10px;
+  vertical-align: bottom;
+}
+.gallery img{
+  max-width: 100%;
+  height: 100%;
+  display: block;
+  margin: 0 auto;
+}

views/about-page.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>About</title>
+    <link rel="stylesheet" href="/stylesheets/style.css" />
+    <link
+      href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <header class="header">
+      <a href="/images/rdjlogo.jpg" class="logo">RDJ</a>
+      <nav class="navbar">
+        <a href="/home" class="active">Home</a>
+        <a href="/about">About</a>
+        <a href="/works">Works</a>
+        <a href="/gallery">Gallery</a>
+      </nav>
+    </header>
+    <section class="about">
+      <div class="home-content">
+        <h1>Life story</h1>
+        <p>
+          Robert John Downey Jr. was born on April 4, 1965, in Manhattan, New
+          York City,the younger of two children. His father, Robert Downey Sr.,
+          was an actor and filmmaker, while his mother, Elsie Ann (née Ford),
+          was an actress who appeared in Downey Sr.'s films.Downey's father was
+          of half Lithuanian Jewish, one-quarter Hungarian Jewish, and
+          one-quarter Irish descent,while Downey's mother had Scottish, German,
+          and Swiss ancestry.He and his older sister Allyson grew up in
+          Greenwich Village.
+        </p>
+        <p>
+          During his childhood, Downey had minor roles in his father's films. He
+          made his acting debut at the age of five, playing a sick puppy in the
+          absurdist comedy Pound (1970), and then at seven appeared in the
+          surrealist Western Greaser's Palace (1972). At the age of 10, he was
+          living in England and studied classical ballet as part of a larger
+          curriculum. He attended the Stagedoor Manor Performing Arts Training
+          Center in upstate New York as a teenager. When his parents divorced in
+          1978, Downey moved to California with his father, but in 1982, he
+          dropped out of Santa Monica High School, and moved back to New York to
+          pursue an acting career full-time.
+        </p>
+      </div>
+      <div class="home-sci">
+        <a href="#"><i class="bx bxl-facebook"></i></a>
+        <a href="#"><i class="bx bxl-twitter"></i></a>
+        <a href="#"><i class="bx bxl-instagram"></i></a>
+      </div>
+      <span class="home-ingHover"></span>
+    </section>
+  </body>
+</html>

views/gallery-page.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>About</title>
+    <link rel="stylesheet" href="/stylesheets/style.css" />
+    <link
+      href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <header class="header">
+      <a href="/images/rdjlogo.jpg" class="logo">RDJ</a>
+      <nav class="navbar">
+        <a href="/home" class="active">Home</a>
+        <a href="/about">About</a>
+        <a href="/works">Works</a>
+        <a href="/gallery">Gallery</a>
+      </nav>
+    </header>
+    <section class="gallery">
+        <table>
+            <tr>
+                <td><img src="/images/ironman.jpg"/></td>
+                <td><img src="/images/rdj2.jpg"/></td>
+                <td><img src="/images/rdj3.jpg"/></td>
+            </tr>
+            <tr>
+                <td><img src="/images/strauss.jpg"/></td> 
+                <td><img src="/images/robertrdj.jpg"/></td> 
+                <td><img src="/images/rdj4.jpg"/></td>
+            </tr>
+        </table>
+    </section>
+  </body>
+
+</html>

views/home-page.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Favorite actor</title>
+    <link rel="stylesheet" href="/stylesheets/style.css">
+    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
+
+  </head>
+  <body>
+      <header class="header">
+        <a href="/images/rdjlogo.jpg" class="logo">RDJ</a>
+        <nav class="navbar">
+            <a href="/home" class="active">Home</a>
+            <a href="/about">About</a>
+            <a href="/works">Works</a>
+            <a href="/gallery">Gallery</a>
+        </nav>
+      </header>
+
+      <section class="home">
+        <div class="home-content">
+            <h1>Hello there, This is Robert Downey Jr </h1>
+            <h3>My favorite movie actor of all time, this universe, the entire multiverse and beyond</h3>
+            <p>Robert John Downey Jr. (born April 4, 1965) is an American actor. Downey's career has been characterized by critical success in his young adult roles and a surge in popular and commercial success after he achieved sobriety in the early 2000s. His films as a leading actor have grossed over $14 billion worldwide, making him one of the highest-grossing actors of all time.In 2008, Downey was named by Time magazine among the 100 most influential people in the world, and from 2013 to 2015, he was listed by Forbes as Hollywood's highest-paid actor.Downey is best known for playing the role of Iron Man in various Marvel films.</p>
+
+            </div>
+        </div>
+        <div class="home-sci">
+            <a href="#"><i class='bx bxl-facebook'></i></a>
+            <a href="#"><i class='bx bxl-twitter' ></i></a>
+            <a href="#"><i class='bx bxl-instagram' ></i></a>
+        </div>
+
+       <span class="home-ingHover"></span>
+      </section>
+  </body>
+</html>