diff --git a/, b/, new file mode 100644 index 0000000..e69de29 diff --git a/app.js b/app.js index e69de29..3bd3471 100644 --- a/app.js +++ b/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!")) \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..a54d916 --- /dev/null +++ b/package.json @@ -0,0 +1,15 @@ +{ + "name": "lab-express-basic", + "version": "1.0.0", + "description": "", + "main": "app.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [], + "author": "", + "license": "ISC", + "dependencies": { + "express": "^4.18.2" + } +} diff --git a/public/images/ironman.jpg b/public/images/ironman.jpg new file mode 100644 index 0000000..95023fe Binary files /dev/null and b/public/images/ironman.jpg differ diff --git a/public/images/rdj2.jpg b/public/images/rdj2.jpg new file mode 100644 index 0000000..bd78011 Binary files /dev/null and b/public/images/rdj2.jpg differ diff --git a/public/images/rdj3.jpg b/public/images/rdj3.jpg new file mode 100644 index 0000000..939afce Binary files /dev/null and b/public/images/rdj3.jpg differ diff --git a/public/images/rdj4.jpg b/public/images/rdj4.jpg new file mode 100644 index 0000000..7eb42d2 Binary files /dev/null and b/public/images/rdj4.jpg differ diff --git a/public/images/rdjlogo.jpg b/public/images/rdjlogo.jpg new file mode 100644 index 0000000..8b398a9 Binary files /dev/null and b/public/images/rdjlogo.jpg differ diff --git a/public/images/robert.jpg b/public/images/robert.jpg new file mode 100644 index 0000000..0a60abf Binary files /dev/null and b/public/images/robert.jpg differ diff --git a/public/images/robertrdj.jpg b/public/images/robertrdj.jpg new file mode 100644 index 0000000..4c626dc Binary files /dev/null and b/public/images/robertrdj.jpg differ diff --git a/public/images/strauss.jpg b/public/images/strauss.jpg new file mode 100644 index 0000000..758e105 Binary files /dev/null and b/public/images/strauss.jpg differ diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css new file mode 100644 index 0000000..2429e58 --- /dev/null +++ b/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; +} diff --git a/views/about-page.html b/views/about-page.html new file mode 100644 index 0000000..3c0cfce --- /dev/null +++ b/views/about-page.html @@ -0,0 +1,58 @@ + + + + + + + About + + + + +
+ + +
+
+
+

Life story

+

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

+

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

+
+
+ + + +
+ +
+ + diff --git a/views/gallery-page.html b/views/gallery-page.html new file mode 100644 index 0000000..713a631 --- /dev/null +++ b/views/gallery-page.html @@ -0,0 +1,40 @@ + + + + + + + About + + + + +
+ + +
+
+ + + + + + + + + + + +
+
+ + + diff --git a/views/home-page.html b/views/home-page.html new file mode 100644 index 0000000..b775c2a --- /dev/null +++ b/views/home-page.html @@ -0,0 +1,40 @@ + + + + + + + Favorite actor + + + + + +
+ + +
+ +
+
+

Hello there, This is Robert Downey Jr

+

My favorite movie actor of all time, this universe, the entire multiverse and beyond

+

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.

+ +
+ +
+ + + +
+ + +
+ + diff --git a/views/works-page.html b/views/works-page.html new file mode 100644 index 0000000..4d3a4b8 --- /dev/null +++ b/views/works-page.html @@ -0,0 +1,53 @@ + + + + + + + Works + + + + +
+ + +
+
+
+

Popular Works

+

+ In 2007, Downey was cast as the title character in the film Iron + Man,[78] with director Jon Favreau explaining the choice by stating: + "Downey wasn't the most obvious choice, but he understood what makes + the character tick. He found a lot of his own life experience in 'Tony + Stark'."Favreau insisted on having Downey as he repeatedly + claimed that Downey would be to Iron Man what Johnny Depp is to the + Pirates of the Caribbean series: a lead actor who could both elevate + the quality of the film and increase the public's interest in + it.For the role, Downey had to gain more than 20 + pounds (9 kilograms) of muscle in five months to look like he "had the + power to forge iron". Iron Man was released worldwide between + April 30 and May 3, 2008, grossing over $585 million worldwide and + receiving rave reviews which cited Downey's performance as a highlight + of the film. By October 2008, Downey had agreed to star in + two Iron Man sequels, as part of the Iron Man franchise, as well as + The Avengers, featuring the superhero team that Stark joins, based on + Marvel's comic book series The Avengers.He first reprised the + role in a small appearance as Iron Man's alter ego Tony Stark in the + 2008 film The Incredible Hulk, as a part of Marvel Studios' depicting + the same Marvel Universe on film by providing continuity among the + movies. +

+
+
+ +