├── .gitignore ├── thumb-1.jpg ├── thumb-2.jpg ├── .babelrc ├── public ├── images │ ├── thumb.png │ ├── gallery.png │ ├── movies │ │ ├── 01.jpg │ │ ├── 02.jpg │ │ ├── 03.jpg │ │ ├── 04.jpg │ │ ├── 05.jpg │ │ ├── 06.jpg │ │ ├── 07.jpg │ │ ├── 08.jpg │ │ ├── 09.jpg │ │ └── 10.jpg │ └── icon │ │ ├── align-left.svg │ │ ├── angle-left.svg │ │ ├── angle-right.svg │ │ ├── close.svg │ │ └── info-alt.svg ├── styles │ ├── sections │ │ ├── _menu.scss │ │ ├── _profile.scss │ │ ├── _movies.scss │ │ ├── _breadcrumb.scss │ │ └── _information.scss │ ├── style.scss │ └── style.css └── js │ ├── script-min.js │ └── script.js ├── readme.md ├── views ├── _movies.pug ├── index.pug └── _icons.pug ├── package.json ├── server.js └── data └── artists.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | mynotes -------------------------------------------------------------------------------- /thumb-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aurelkurtula/basic-express-js-setup/HEAD/thumb-1.jpg -------------------------------------------------------------------------------- /thumb-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aurelkurtula/basic-express-js-setup/HEAD/thumb-2.jpg -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015-node5", "stage-3"], 3 | "plugins": [] 4 | } -------------------------------------------------------------------------------- /public/images/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aurelkurtula/basic-express-js-setup/HEAD/public/images/thumb.png -------------------------------------------------------------------------------- /public/images/gallery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aurelkurtula/basic-express-js-setup/HEAD/public/images/gallery.png -------------------------------------------------------------------------------- /public/images/movies/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aurelkurtula/basic-express-js-setup/HEAD/public/images/movies/01.jpg -------------------------------------------------------------------------------- /public/images/movies/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aurelkurtula/basic-express-js-setup/HEAD/public/images/movies/02.jpg -------------------------------------------------------------------------------- /public/images/movies/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aurelkurtula/basic-express-js-setup/HEAD/public/images/movies/03.jpg -------------------------------------------------------------------------------- /public/images/movies/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aurelkurtula/basic-express-js-setup/HEAD/public/images/movies/04.jpg -------------------------------------------------------------------------------- /public/images/movies/05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aurelkurtula/basic-express-js-setup/HEAD/public/images/movies/05.jpg -------------------------------------------------------------------------------- /public/images/movies/06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aurelkurtula/basic-express-js-setup/HEAD/public/images/movies/06.jpg -------------------------------------------------------------------------------- /public/images/movies/07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aurelkurtula/basic-express-js-setup/HEAD/public/images/movies/07.jpg -------------------------------------------------------------------------------- /public/images/movies/08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aurelkurtula/basic-express-js-setup/HEAD/public/images/movies/08.jpg -------------------------------------------------------------------------------- /public/images/movies/09.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aurelkurtula/basic-express-js-setup/HEAD/public/images/movies/09.jpg -------------------------------------------------------------------------------- /public/images/movies/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aurelkurtula/basic-express-js-setup/HEAD/public/images/movies/10.jpg -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | 2 | A very basic introduction of express.js. You can read my tutorial on how to get started with react [here]() 3 | 4 | The design looks like this: 5 | 6 | ![](./thumb-1.jpg) 7 | 8 | There are three pages in total 9 | 10 | ![](./thumb-2.jpg) -------------------------------------------------------------------------------- /views/_movies.pug: -------------------------------------------------------------------------------- 1 | each movie, i in movies 2 | article.movies__article 3 | img.movies__img(src=`images/movies/${movie.img}.jpg`) 4 | h2.movies__h2 5 | span.movies__number 0#{i+1} 6 | span.movies__side 7 | span.movies__title=movie.title 8 | span.movies__year=movie.year 9 | -------------------------------------------------------------------------------- /public/styles/sections/_menu.scss: -------------------------------------------------------------------------------- 1 | 2 | .menu{ 3 | position: absolute; 4 | top: 3rem; 5 | right: 3rem; 6 | z-index: 3; 7 | z-index: 10; 8 | span{ 9 | padding: 2px 6px; 10 | color: white; 11 | text-decoration: none; 12 | float: left; 13 | display: block; 14 | } 15 | svg{ 16 | margin: 3px; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /public/js/script-min.js: -------------------------------------------------------------------------------- 1 | "use strict";var my=function e(l){return l};console.log(my("abc"));var menu=document.getElementsByClassName("menu")[0],profile=document.getElementsByClassName("profile")[0];menu.addEventListener("click",function(e){e.preventDefault(),"profile show"==profile.classList.value?profile.classList.value="profile hide":profile.classList.value="profile show"}); -------------------------------------------------------------------------------- /public/styles/sections/_profile.scss: -------------------------------------------------------------------------------- 1 | .profile{ 2 | width: 100%; 3 | height: 35vh; 4 | background: $red url("https://upload.wikimedia.org/wikipedia/commons/e/ea/Chaplin_The_Kid_edit.jpg"); 5 | background-size: cover; 6 | background-position: 0 -140px; 7 | position: fixed; 8 | z-index: 1; 9 | top: 0; 10 | } 11 | .profile.show{ 12 | z-index: 20; 13 | position: relative; 14 | } -------------------------------------------------------------------------------- /public/js/script.js: -------------------------------------------------------------------------------- 1 | var my =(test)=>{ 2 | return test 3 | } 4 | 5 | console.log(my('abc') ); 6 | var menu = document.getElementsByClassName('menu')[0]; 7 | var profile = document.getElementsByClassName('profile')[0]; 8 | 9 | menu.addEventListener('click', (e) => { 10 | e.preventDefault() 11 | if(profile.classList.value == "profile show"){ 12 | profile.classList.value = "profile hide" 13 | } else{ 14 | profile.classList.value = "profile show" 15 | } 16 | }) -------------------------------------------------------------------------------- /public/images/icon/align-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /public/images/icon/angle-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /public/images/icon/angle-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /public/images/icon/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quick", 3 | "version": "1.0.0", 4 | "description": ":) ", 5 | "scripts": { 6 | "start": "nodemon --exec babel-node server.js" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "" 11 | }, 12 | "author": "Aurel kurtula", 13 | "license": "MIT", 14 | "homepage": "", 15 | "dependencies": { 16 | "express": "^4.16.2", 17 | "pug": "^2.0.0-rc.4" 18 | }, 19 | "devDependencies": { 20 | "babel-preset-stage-3": "^6.22.0", 21 | "babel-cli": "*", 22 | "babel-core": "*", 23 | "babel-preset-es2015-node5": "*", 24 | "babel-register": "*" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | import express from 'express'; 2 | import data from './data/artists.json' 3 | const app = express(); 4 | app.set('view engine', 'pug'); 5 | app.use(express.static(__dirname + '/public')); 6 | 7 | 8 | 9 | app.get('/', (req,res) =>{ 10 | res.redirect('/charles') 11 | }) 12 | 13 | app.get('/charles', (req, res) => { 14 | res.render('index', data.artist[0]) 15 | }) 16 | app.get('/marilyn', (req, res) => { 17 | res.render('index', data.artist[1]) 18 | }) 19 | app.get('/jean', (req, res) => { 20 | res.render('index', data.artist[2]) 21 | }) 22 | 23 | const port = process.env.PORT || 5656; 24 | app.listen(port, () => { 25 | console.log(`http://localhost:${port}`) 26 | }) -------------------------------------------------------------------------------- /public/images/icon/info-alt.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /views/index.pug: -------------------------------------------------------------------------------- 1 | include _icons 2 | doctype html 3 | html 4 | head 5 | title=title 6 | link(rel='stylesheet', href='/styles/style.css') 7 | meta(name='viewport' content='windth=device-width, initial-scale=1') 8 | body 9 | .wrap 10 | .profile.hide(style='background-image: url(' + bgImage + ');') 11 | a(href='#').menu 12 | span Movies 13 | +icon('menu') 14 | .movies 15 | include _movies 16 | .information 17 | h1.information__name 18 | small=firstname 19 | | #{lastname} 20 | p.information__description= content 21 | .breadcrumb 22 | ul 23 | li 24 | a(href="charles") Charles Chaplin 25 | a(href="marilyn") Marilyn Monroe 26 | a(href="jean") Jean Simmons 27 | script(src='js/script.js') 28 | -------------------------------------------------------------------------------- /public/styles/sections/_movies.scss: -------------------------------------------------------------------------------- 1 | .hide{ 2 | .movies{ 3 | display: none; 4 | } 5 | } 6 | .movies { 7 | &:after{ 8 | content: ''; 9 | position: fixed; 10 | width: 100%; 11 | height: 100%; 12 | background: $black; 13 | z-index: -1; 14 | top:0; 15 | } 16 | height: 100vh; 17 | z-index: 7; 18 | padding-top: 40px; 19 | article{ 20 | overflow: auto; 21 | margin: 15px auto; 22 | display: block; 23 | z-index: 13; 24 | @include b(max700){ 25 | width: 90%; 26 | } 27 | 28 | @include b(700){ 29 | width: 50%; 30 | } 31 | 32 | @include b(950){ 33 | width: 80%; 34 | } 35 | 36 | @include b(1570){ 37 | width: 50%; 38 | } 39 | h2{ 40 | float: left; 41 | margin: 45px 20px; 42 | } 43 | } 44 | &__number{ 45 | font-size: 6rem; 46 | color: $red; 47 | font-weight: 900; 48 | padding-right: 5px; 49 | float: left; 50 | } 51 | &__side{ 52 | float: left; 53 | margin: 13px auto auto 5px; 54 | } 55 | &__title{ 56 | color: $gray; 57 | font-size: 1.7rem; 58 | } 59 | &__year{ 60 | display: block; 61 | color: $red; 62 | font-size: 70%; 63 | } 64 | img{ 65 | width: 100px; 66 | float: left; 67 | } 68 | } -------------------------------------------------------------------------------- /public/styles/sections/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .breadcrumb{ 2 | border-top: 3px solid black; 3 | position: fixed; 4 | background: white; 5 | bottom: 0; 6 | left: 0; 7 | z-index: 6; 8 | width: 100%; 9 | //display: flex; 10 | ul{ 11 | float: right; 12 | } 13 | li{ 14 | list-style: none; 15 | display: flex; 16 | a{ 17 | text-decoration: none; 18 | padding: 30px 30px 15px 30px; 19 | display: block; 20 | font-weight: bolder; 21 | font-size: 1.6rem; 22 | color: $red; 23 | border-bottom: 15px solid transparent; 24 | &:hover{ 25 | border-bottom: 15px solid $red; 26 | } 27 | } 28 | } 29 | @include b(700){ 30 | width: 65%; 31 | } 32 | img{ 33 | display: none; 34 | 35 | } 36 | &__meta{ 37 | margin-left: 3rem; 38 | 39 | &__title{ 40 | font-size: 3rem; 41 | font-weight: 900; 42 | color: $black; 43 | display: block; 44 | } 45 | &__tag{ 46 | color: $red; 47 | font-weight: 900; 48 | } 49 | } 50 | 51 | &__navigator{ 52 | display: flex; 53 | margin-right: 0; 54 | a{ 55 | padding: 55px; 56 | display: block; 57 | float: left; 58 | &:hover{ 59 | background: darken(white, 10%); 60 | } 61 | } 62 | } 63 | } -------------------------------------------------------------------------------- /public/styles/sections/_information.scss: -------------------------------------------------------------------------------- 1 | .information{ 2 | margin-top: 35vh; 3 | padding: 40px 0 220px 30px; 4 | z-index: 3; 5 | position: relative; 6 | background: white; 7 | @include b(950){ 8 | margin-top: 0; 9 | padding: 70px 0 0 30px; 10 | } 11 | @include b(1570){ 12 | padding: 100px 100px 0 100px; 13 | } 14 | &__heading{ 15 | font-size: 1.3rem; 16 | font-weight: 50; 17 | color: $gray; 18 | @include b(700) { 19 | font-size: 2rem; 20 | } 21 | &__number{ 22 | font-size: 3rem; 23 | color: $red; 24 | color: $red; 25 | font-weight: 900; 26 | @include b(700) { 27 | font-size: 3.5em; 28 | } 29 | } 30 | } 31 | &__name{ 32 | font-size: 5rem; 33 | font-weight: 900; 34 | text-transform: uppercase; 35 | color: $black; 36 | line-height: 3.5rem; 37 | margin: 20px auto 50px auto; 38 | @include b(700) { 39 | font-size: 6.7rem; 40 | line-height: 4rem; 41 | } 42 | small{ 43 | font-size: 2.5rem; 44 | display: block; 45 | @include b(700) { 46 | font-size: 3.5rem; 47 | } 48 | } 49 | 50 | } 51 | &__description{ 52 | color: $gray; 53 | width: 70%; 54 | margin: 30px auto auto 55px; 55 | font-size: 1.4rem; 56 | line-height: 2.5rem; 57 | @include b(700) { 58 | font-size: 1.7rem; 59 | line-height: 2.5rem; 60 | } 61 | } 62 | } -------------------------------------------------------------------------------- /public/styles/style.scss: -------------------------------------------------------------------------------- 1 | @media screen { * , *:after,*:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } }* {margin: auto; padding: auto;} 2 | html { font-size: 62.5%; } /*base sizee*/ 3 | @import url('https://fonts.googleapis.com/css?family=Roboto:400,700,900'); 4 | body { font-size: 1.4rem; font-family: 'Roboto', sans-serif;} /* =14px all type sizes are relative to the base size*/ 5 | $red: #E54C20; 6 | $gray: #BCBCBC; 7 | $black: lighten(black, 10%); 8 | @mixin b($point) { 9 | @if $point == max700 { 10 | @media (max-width: 700px) { @content; } 11 | } 12 | @if $point == 700 { 13 | @media (min-width: 700px) { @content; } 14 | } 15 | @else if $point == 950 { 16 | @media (min-width: 950px) { @content; } 17 | } 18 | @else if $point == 1570 { 19 | @media (min-width: 1570px) { @content; } 20 | } 21 | } 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | @import 'sections/_profile'; 32 | @import 'sections/_information'; 33 | @import 'sections/_breadcrumb'; 34 | @import 'sections/_menu'; 35 | @import 'sections/_movies'; 36 | .wrap{ 37 | @include b(950){ 38 | display: flex; 39 | } 40 | } 41 | .information{ order: 1;} 42 | .profile{ order: 2;} 43 | .information, .profile{ 44 | @include b(950) { 45 | width: 50%; 46 | height: 100vh; 47 | overflow: hidden; 48 | position: relative; 49 | background-position: 0 0; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /views/_icons.pug: -------------------------------------------------------------------------------- 1 | mixin icon(icon) 2 | if(icon=='menu') 3 | 4 | if(icon=='left') 5 | 6 | if(icon=='right') 7 | 8 | if(icon=='close') 9 | 10 | if(icon=='info') 11 | 12 | -------------------------------------------------------------------------------- /data/artists.json: -------------------------------------------------------------------------------- 1 | { 2 | "artist": [ 3 | { 4 | "firstname": "Charles", 5 | "lastname": "Chaplin", 6 | "tag": "The Little Tramp", 7 | "content": "Considered to be one of the most pivotal stars of the early days of Hollywood, Charlie Chaplin lived an interesting life both in his films and behind the camera. He is most recognized as an icon of the silent film era, often associated with his popular character, the Little Tramp", 8 | "bgImage": "https://upload.wikimedia.org/wikipedia/commons/e/ea/Chaplin_The_Kid_edit.jpg", 9 | "movies": [ 10 | { 11 | "title": "The great dictator", 12 | "year": "1940", 13 | "img": "01" 14 | }, 15 | { 16 | "title": "Modern Times", 17 | "year": "1936", 18 | "img": "03" 19 | }, 20 | { 21 | "title": "The haplin Revue", 22 | "year": "1959", 23 | "img": "04" 24 | }, 25 | { 26 | "title": "Limelight", 27 | "year": "1952", 28 | "img": "02" 29 | } 30 | ] 31 | }, 32 | { 33 | "firstname": "Marilyn", 34 | "lastname": "Monroe", 35 | "tag": "Fear is stupid. So are regrets.", 36 | "content": "Marilyn Monroe was an American actress, comedienne, singer, and model. She became one of the world's most enduring iconic figures and is remembered both for her winsome embodiment of the Hollywood sex symbol and her tragic personal and professional struggles within the film industry.", 37 | "bgImage": "https://c2.staticflickr.com/4/3861/14551832204_5d2775f95d_b.jpg", 38 | "movies": [ 39 | { 40 | "title": "Gentlemen Prefer Blondes", 41 | "year": "1953", 42 | "img": "08" 43 | }, 44 | { 45 | "title": "The Seven Year Itch", 46 | "year": "1955", 47 | "img": "09" 48 | }, 49 | { 50 | "title": "The Prince and the Showgirl", 51 | "year": "1957", 52 | "img": "10" 53 | } 54 | ] 55 | }, 56 | { 57 | "firstname": "Jean", 58 | "lastname": "Simmons", 59 | "tag": "Once you've gone beyond the vanity of the business, you'll take on the tough roles", 60 | "content": "Demure British beauty Jean Simmons was born January 31, 1929 in Crouch End, London. As a 14-year-old dance student, she was plucked from her school to play Margaret Lockwood's precocious sister in Give Us the Moon (1944), and she went on to make a name for herself in such major British productions as Caesar and Cleopatra (1945)", 61 | "bgImage": "https://c2.staticflickr.com/4/3758/9081522016_0db0e6e703_b.jpg", 62 | "movies": [ 63 | { 64 | "title": "Spartacus", 65 | "year": "1960", 66 | "img": "05" 67 | }, 68 | { 69 | "title": "Howl's Moving Castle", 70 | "year": "2004", 71 | "img": "06" 72 | }, 73 | { 74 | "title": "Young Bess", 75 | "year": "1953", 76 | "img": "07" 77 | } 78 | ] 79 | } 80 | ] 81 | } -------------------------------------------------------------------------------- /public/styles/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Roboto:400,700,900"); 2 | @media screen { 3 | *, *:after, *:before { 4 | -webkit-box-sizing: border-box; 5 | -moz-box-sizing: border-box; 6 | box-sizing: border-box; } } 7 | 8 | * { 9 | margin: auto; 10 | padding: auto; } 11 | 12 | html { 13 | font-size: 62.5%; } 14 | 15 | /*base sizee*/ 16 | body { 17 | font-size: 1.4rem; 18 | font-family: 'Roboto', sans-serif; } 19 | 20 | /* =14px all type sizes are relative to the base size*/ 21 | .profile { 22 | width: 100%; 23 | height: 35vh; 24 | //background: #E54C20 url("https://upload.wikimedia.org/wikipedia/commons/e/ea/Chaplin_The_Kid_edit.jpg"); 25 | background-size: cover; 26 | background-position: 0; 27 | position: fixed; 28 | z-index: 1; 29 | top: 0; } 30 | 31 | .profile.show { 32 | z-index: 20; 33 | position: relative; } 34 | 35 | .information { 36 | margin-top: 35vh; 37 | padding: 40px 0 220px 30px; 38 | z-index: 3; 39 | position: relative; 40 | background: white; } 41 | @media (min-width: 950px) { 42 | .information { 43 | margin-top: 0; 44 | padding: 70px 0 0 30px; } } 45 | @media (min-width: 1570px) { 46 | .information { 47 | padding: 100px 100px 0 100px; } } 48 | .information__heading { 49 | font-size: 1.3rem; 50 | font-weight: 50; 51 | color: #BCBCBC; } 52 | @media (min-width: 700px) { 53 | .information__heading { 54 | font-size: 2rem; } } 55 | .information__heading__number { 56 | font-size: 3rem; 57 | color: #E54C20; 58 | color: #E54C20; 59 | font-weight: 900; } 60 | @media (min-width: 700px) { 61 | .information__heading__number { 62 | font-size: 3.5em; } } 63 | .information__name { 64 | font-size: 5rem; 65 | font-weight: 900; 66 | text-transform: uppercase; 67 | color: #1a1919; 68 | line-height: 3.5rem; 69 | margin: 20px auto 50px auto; } 70 | @media (min-width: 700px) { 71 | .information__name { 72 | font-size: 6.7rem; 73 | line-height: 4rem; } } 74 | .information__name small { 75 | font-size: 2.5rem; 76 | display: block; } 77 | @media (min-width: 700px) { 78 | .information__name small { 79 | font-size: 3.5rem; } } 80 | .information__description { 81 | color: #BCBCBC; 82 | width: 70%; 83 | margin: 30px auto auto 55px; 84 | font-size: 1.4rem; 85 | line-height: 2.5rem; } 86 | @media (min-width: 700px) { 87 | .information__description { 88 | font-size: 1.7rem; 89 | line-height: 2.5rem; } } 90 | 91 | .breadcrumb { 92 | border-top: 3px solid black; 93 | position: fixed; 94 | background: white; 95 | bottom: 0; 96 | left: 0; 97 | z-index: 6; 98 | width: 100%; } 99 | .breadcrumb ul { 100 | float: right; } 101 | .breadcrumb li { 102 | list-style: none; 103 | display: flex; } 104 | .breadcrumb li a { 105 | text-decoration: none; 106 | padding: 30px 30px 15px 30px; 107 | display: block; 108 | font-weight: bolder; 109 | font-size: 1.6rem; 110 | color: #E54C20; 111 | border-bottom: 15px solid transparent; } 112 | .breadcrumb li a:hover { 113 | border-bottom: 15px solid #E54C20; } 114 | @media (min-width: 700px) { 115 | .breadcrumb { 116 | width: 65%; } } 117 | .breadcrumb img { 118 | display: none; } 119 | .breadcrumb__meta { 120 | margin-left: 3rem; } 121 | .breadcrumb__meta__title { 122 | font-size: 3rem; 123 | font-weight: 900; 124 | color: #1a1919; 125 | display: block; } 126 | .breadcrumb__meta__tag { 127 | color: #E54C20; 128 | font-weight: 900; } 129 | .breadcrumb__navigator { 130 | display: flex; 131 | margin-right: 0; } 132 | .breadcrumb__navigator a { 133 | padding: 55px; 134 | display: block; 135 | float: left; } 136 | .breadcrumb__navigator a:hover { 137 | background: #e6e5e5; } 138 | 139 | .menu { 140 | position: absolute; 141 | top: 3rem; 142 | right: 3rem; 143 | z-index: 3; 144 | z-index: 10; } 145 | .menu span { 146 | padding: 2px 6px; 147 | color: white; 148 | text-decoration: none; 149 | float: left; 150 | display: block; } 151 | .menu svg { 152 | margin: 3px; } 153 | 154 | .hide .movies { 155 | display: none; } 156 | 157 | .movies { 158 | height: 100vh; 159 | z-index: 7; 160 | padding-top: 40px; } 161 | .movies:after { 162 | content: ''; 163 | position: fixed; 164 | width: 100%; 165 | height: 100%; 166 | background: #1a1919; 167 | z-index: -1; 168 | top: 0; } 169 | .movies article { 170 | overflow: auto; 171 | margin: 15px auto; 172 | display: block; 173 | z-index: 13; } 174 | @media (max-width: 700px) { 175 | .movies article { 176 | width: 90%; } } 177 | @media (min-width: 700px) { 178 | .movies article { 179 | width: 50%; } } 180 | @media (min-width: 950px) { 181 | .movies article { 182 | width: 80%; } } 183 | @media (min-width: 1570px) { 184 | .movies article { 185 | width: 50%; } } 186 | .movies article h2 { 187 | float: left; 188 | margin: 45px 20px; } 189 | .movies__number { 190 | font-size: 6rem; 191 | color: #E54C20; 192 | font-weight: 900; 193 | padding-right: 5px; 194 | float: left; } 195 | .movies__side { 196 | float: left; 197 | margin: 13px auto auto 5px; } 198 | .movies__title { 199 | color: #BCBCBC; 200 | font-size: 1.7rem; } 201 | .movies__year { 202 | display: block; 203 | color: #E54C20; 204 | font-size: 70%; } 205 | .movies img { 206 | width: 100px; 207 | float: left; } 208 | 209 | @media (min-width: 950px) { 210 | .wrap { 211 | display: flex; } } 212 | 213 | .information { 214 | order: 1; } 215 | 216 | .profile { 217 | order: 2; } 218 | 219 | @media (min-width: 950px) { 220 | .information, .profile { 221 | width: 50%; 222 | height: 100vh; 223 | overflow: hidden; 224 | position: relative; 225 | background-position: 0 0; } } 226 | --------------------------------------------------------------------------------