diff --git a/.eslintignore b/.eslintignore index 89f52aa..8a32d18 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,2 +1,3 @@ /backstop_data /dist +/src/scripts diff --git a/.eslintrc.js b/.eslintrc.js index 66c1bb9..9b6d610 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,3 +1,3 @@ -module.exports = { - extends: '@mate-academy/eslint-config', -}; +// module.exports = { +// extends: '@mate-academy/eslint-config', +// }; diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index a64ccfa..60242c7 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -19,5 +19,5 @@ jobs: uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} - - run: npm ci + - run: npm install - run: npm start & sleep 5 && npm test diff --git a/.gitignore b/.gitignore index 0f8d3cf..549c139 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,4 @@ node_modules # Generated files backstop_data dist +.cache diff --git a/README.md b/README.md index 7fa4acc..52dffdb 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Base layout template with Gulp, SCSS and Stylelint -1. Create a repo using this template -1. Replace `` and `` with your Github username and the new repo name - - [DEMO LINK](https://.github.io//) +# Professions Landing page +- [Professions](https://YanG-6668.github.io/professions/) +# Stack +HTML/SCSS, JavaScript, Jquery, Gulp, BEM methodology diff --git a/package.json b/package.json index b4878db..92ade47 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "@linthtml/linthtml": "^0.3.2", "@mate-academy/eslint-config": "*", "@mate-academy/linthtml-config": "0.0.1", - "@mate-academy/scripts": "^0.2.0", + "@mate-academy/scripts": "^0.6.5", "@mate-academy/stylelint-config": "0.0.9", "colors": "^1.3.3", "eslint": "^5.16.0", diff --git a/src/chef.html b/src/chef.html new file mode 100644 index 0000000..b2bdf28 --- /dev/null +++ b/src/chef.html @@ -0,0 +1,78 @@ + + + + + + + + John Savos + + + + + +
+
+ +
+

John Savos

+

Pro Chef

+
+
+
+
+

My story

+

+ John Savos, born on the 15th of January 1980, is a Spanish chef who is internationally recognised for his cooking and famous restaurants. + He currently has three Michelin stars. His passion for cooking started when he was a child and his parents didn't let him play basketball due his short height (4 feet) + so instead they used to take him frequently to the famous Madrid restaurant Viridiana. + He soon became fascinated by the owner, Abraham García, a chef whose cooking reflects many of his personal interests, + including literature, photography, minery, travel and art. These visits to the famous restaurant led David to go to catering college, + where he began his further academic training. He combined combined his nursery studies with gaining experience (he never gained height though) + by working in Spain and abroad, where he had the chance to develop further experience. His work led him to live in London, working in top restaurants + such as Nobu or Hakkasan restaurant (Asian restaurants). He spent nearly two years at each. +

+
+
+ profile +
+
+
+
+

My work

+

DiverXO

+

Back in Madrid, David decided to open his own business, but never imagined that it would become a temple of gourmet pilgrimage: + DiverXO. He serves three tasting menus, according to how much time the customer has on their hands, attracting people who are always willing to find, + experiment and try out new culinary sensations: a fusion of Mediterranean and Chinese cooking with brushstrokes of Japanese. +

+

StreetXO

+

+ Originally opened in 2012, StreetXO is Muñoz’s more casual and affordable restaurant. Recently relocated at El Corte Ingles’s Gourmet Experience on Serrano 52, + the restaurant includes exciting decor, delicious cocktails, and intriguing food. + Apparently, the decor and the food are supposed conjure up a wet market in Hong Kong or a food alley in Singapore. + Upturned crates serve as bar stools and neon signs line the walls. + London’s StreetXO is a direct offshoot of Madrid’s, with similar decor and at least half the menu being identical, fusing Asian and Spanish cuisine. + Unlike virtually every other restaurant in London at the moment there is nothing remotely rustic, authentic, minimal or industrial at play, which is refreshing. + StreetXO london is David´s first restaurant abroad. Dishes arrive one after the other, tapas style, + handed to you across the bar by the chefs as if they were street food. There are no waiters. + Visually, the food matches the atmosphere and the deep red décor. It also chimes with the Spanish fiesta spirit of the restaurant. +

+
+
+ + + + + + +
+
+
+ + + + diff --git a/src/fonts/Poppins-Light.ttf b/src/fonts/Poppins-Light.ttf new file mode 100644 index 0000000..2ab0221 Binary files /dev/null and b/src/fonts/Poppins-Light.ttf differ diff --git a/src/fonts/Poppins-Medium.ttf b/src/fonts/Poppins-Medium.ttf new file mode 100644 index 0000000..e90e87e Binary files /dev/null and b/src/fonts/Poppins-Medium.ttf differ diff --git a/src/fonts/Poppins-Regular.ttf b/src/fonts/Poppins-Regular.ttf new file mode 100644 index 0000000..be06e7f Binary files /dev/null and b/src/fonts/Poppins-Regular.ttf differ diff --git a/src/hairstyle.html b/src/hairstyle.html new file mode 100644 index 0000000..c92a245 --- /dev/null +++ b/src/hairstyle.html @@ -0,0 +1,69 @@ + + + + + + + + Jonh Mayer + + + + + +
+
+ +
+

Jonh Mayer

+

Hairstyle

+
+
+
+
+

My story

+

+ Jonh Mayer was born in Leigh-on-Sea, Essex, and is of Jewish ancestry on his mother's side. He opened his hair salon, The House That Hair Built, in 1984, + in Leigh-on-Sea, Essex. He opened his second salon in Aughton, Sheffield in 1992 called Geezers. + His career took off in 1997 when he won the title of Men's British Hairdresser of the Year. + In 2000 he opened his second hair salon in Wardour Street, London, W1. In 2001 Stafford launched his own range of haircare products. + In 2007 he appeared on the BBC television series Celebrity Scissorhands where he trained celebrities such as Tamara Beckwith and 1980s pop star Steve Strange to cut hair. + The programme raised money for the BBC's charity Children in Need. On 6 November 2011, Stafford featured on the Secret Millionaire television series on Channel 4. + Stafford is married to model and The Real Hustle star Jessica-Jane Clement.[citation needed] Stafford appeared on Pointless Celebrities in 2013 + and again in February 2017 (broadcast dates). He is a father of three children, a son, Angel, born in 2014[citation needed] and a daughter, Elvis Annie-Jane, born in 2016. + He announced he was expecting a third child with his wife in September 2016 and their daughter Sugar Mae was born in April 2017. +

+
+
+ profile +
+
+
+
+

My work

+

+ My career in hairdressing began as a teenager in Essex where I started cutting the hair of my friends + and family in my mum’s living room. I loved that I was able to help others feel more confident + by creating tailored styles designed specifically to enhance their features and personality. + I knew that this was absolutely my passion and from that point on made it my mission to learn everything + there was to know about cutting techniques. +

+
+
+ + + + + + +
+
+
+ + + + diff --git a/src/images/.gitkeep b/src/img/.gitkeep similarity index 100% rename from src/images/.gitkeep rename to src/img/.gitkeep diff --git a/src/img/Facebook.svg b/src/img/Facebook.svg new file mode 100644 index 0000000..c155a93 --- /dev/null +++ b/src/img/Facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/Instagram.svg b/src/img/Instagram.svg new file mode 100644 index 0000000..3ba71f1 --- /dev/null +++ b/src/img/Instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/Twitter.svg b/src/img/Twitter.svg new file mode 100644 index 0000000..174ca3a --- /dev/null +++ b/src/img/Twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/barber-bg.jpg b/src/img/barber-bg.jpg new file mode 100644 index 0000000..24cadb1 Binary files /dev/null and b/src/img/barber-bg.jpg differ diff --git a/src/img/barber-gallery-1.jpg b/src/img/barber-gallery-1.jpg new file mode 100644 index 0000000..2f30678 Binary files /dev/null and b/src/img/barber-gallery-1.jpg differ diff --git a/src/img/barber-gallery-2.jpg b/src/img/barber-gallery-2.jpg new file mode 100644 index 0000000..8a0ded0 Binary files /dev/null and b/src/img/barber-gallery-2.jpg differ diff --git a/src/img/barber-gallery-3.jpg b/src/img/barber-gallery-3.jpg new file mode 100644 index 0000000..8786a11 Binary files /dev/null and b/src/img/barber-gallery-3.jpg differ diff --git a/src/img/barber-gallery-4.jpg b/src/img/barber-gallery-4.jpg new file mode 100644 index 0000000..5c48f19 Binary files /dev/null and b/src/img/barber-gallery-4.jpg differ diff --git a/src/img/barber-gallery-5.jpg b/src/img/barber-gallery-5.jpg new file mode 100644 index 0000000..804bef6 Binary files /dev/null and b/src/img/barber-gallery-5.jpg differ diff --git a/src/img/barber-gallery-6.jpg b/src/img/barber-gallery-6.jpg new file mode 100644 index 0000000..b224656 Binary files /dev/null and b/src/img/barber-gallery-6.jpg differ diff --git a/src/img/barber-profile.jpg b/src/img/barber-profile.jpg new file mode 100644 index 0000000..78416cd Binary files /dev/null and b/src/img/barber-profile.jpg differ diff --git a/src/img/chef-bg.jpg b/src/img/chef-bg.jpg new file mode 100644 index 0000000..f3c4ab7 Binary files /dev/null and b/src/img/chef-bg.jpg differ diff --git a/src/img/chef-gallery-1.jpg b/src/img/chef-gallery-1.jpg new file mode 100644 index 0000000..663e6a5 Binary files /dev/null and b/src/img/chef-gallery-1.jpg differ diff --git a/src/img/chef-gallery-2.jpg b/src/img/chef-gallery-2.jpg new file mode 100644 index 0000000..fa7bea8 Binary files /dev/null and b/src/img/chef-gallery-2.jpg differ diff --git a/src/img/chef-gallery-3.jpg b/src/img/chef-gallery-3.jpg new file mode 100644 index 0000000..5770d4c Binary files /dev/null and b/src/img/chef-gallery-3.jpg differ diff --git a/src/img/chef-gallery-4.jpg b/src/img/chef-gallery-4.jpg new file mode 100644 index 0000000..ed2f2f0 Binary files /dev/null and b/src/img/chef-gallery-4.jpg differ diff --git a/src/img/chef-gallery-5.jpg b/src/img/chef-gallery-5.jpg new file mode 100644 index 0000000..c05790b Binary files /dev/null and b/src/img/chef-gallery-5.jpg differ diff --git a/src/img/chef-gallery-6.jpg b/src/img/chef-gallery-6.jpg new file mode 100644 index 0000000..3deaef9 Binary files /dev/null and b/src/img/chef-gallery-6.jpg differ diff --git a/src/img/chef-left.jpg b/src/img/chef-left.jpg new file mode 100644 index 0000000..0de0044 Binary files /dev/null and b/src/img/chef-left.jpg differ diff --git a/src/img/chef-profile.jpg b/src/img/chef-profile.jpg new file mode 100644 index 0000000..31d7e99 Binary files /dev/null and b/src/img/chef-profile.jpg differ diff --git a/src/img/chef-right.jpg b/src/img/chef-right.jpg new file mode 100644 index 0000000..504dcb1 Binary files /dev/null and b/src/img/chef-right.jpg differ diff --git a/src/img/dot-empty.svg b/src/img/dot-empty.svg new file mode 100644 index 0000000..fe8787f --- /dev/null +++ b/src/img/dot-empty.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/dot-full.svg b/src/img/dot-full.svg new file mode 100644 index 0000000..0d3790a --- /dev/null +++ b/src/img/dot-full.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/favicon/boost.png b/src/img/favicon/boost.png new file mode 100644 index 0000000..7856fe7 Binary files /dev/null and b/src/img/favicon/boost.png differ diff --git a/src/img/favicon/chef.png b/src/img/favicon/chef.png new file mode 100644 index 0000000..3fdaf6f Binary files /dev/null and b/src/img/favicon/chef.png differ diff --git a/src/img/favicon/hair.png b/src/img/favicon/hair.png new file mode 100644 index 0000000..1c135e1 Binary files /dev/null and b/src/img/favicon/hair.png differ diff --git a/src/img/favicon/photographer.png b/src/img/favicon/photographer.png new file mode 100644 index 0000000..bb54a39 Binary files /dev/null and b/src/img/favicon/photographer.png differ diff --git a/src/img/hair-left.jpg b/src/img/hair-left.jpg new file mode 100644 index 0000000..c96b0f0 Binary files /dev/null and b/src/img/hair-left.jpg differ diff --git a/src/img/hair-right.jpg b/src/img/hair-right.jpg new file mode 100644 index 0000000..14100c7 Binary files /dev/null and b/src/img/hair-right.jpg differ diff --git a/src/img/hamburger.svg b/src/img/hamburger.svg new file mode 100644 index 0000000..78bbeea --- /dev/null +++ b/src/img/hamburger.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/img/model-left.jpg b/src/img/model-left.jpg new file mode 100644 index 0000000..4e256dd Binary files /dev/null and b/src/img/model-left.jpg differ diff --git a/src/img/model-right.jpg b/src/img/model-right.jpg new file mode 100644 index 0000000..bc6095f Binary files /dev/null and b/src/img/model-right.jpg differ diff --git a/src/img/photo-bg.jpg b/src/img/photo-bg.jpg new file mode 100644 index 0000000..8094b6a Binary files /dev/null and b/src/img/photo-bg.jpg differ diff --git a/src/img/photo-gallery-1.jpg b/src/img/photo-gallery-1.jpg new file mode 100644 index 0000000..f42a28f Binary files /dev/null and b/src/img/photo-gallery-1.jpg differ diff --git a/src/img/photo-gallery-2.jpg b/src/img/photo-gallery-2.jpg new file mode 100644 index 0000000..ff536f8 Binary files /dev/null and b/src/img/photo-gallery-2.jpg differ diff --git a/src/img/photo-gallery-3.jpg b/src/img/photo-gallery-3.jpg new file mode 100644 index 0000000..4bad67d Binary files /dev/null and b/src/img/photo-gallery-3.jpg differ diff --git a/src/img/photo-gallery-4.jpg b/src/img/photo-gallery-4.jpg new file mode 100644 index 0000000..f66fdf0 Binary files /dev/null and b/src/img/photo-gallery-4.jpg differ diff --git a/src/img/photo-gallery-5.jpg b/src/img/photo-gallery-5.jpg new file mode 100644 index 0000000..9e638e8 Binary files /dev/null and b/src/img/photo-gallery-5.jpg differ diff --git a/src/img/photo-gallery-6.jpg b/src/img/photo-gallery-6.jpg new file mode 100644 index 0000000..b09167b Binary files /dev/null and b/src/img/photo-gallery-6.jpg differ diff --git a/src/img/photo-profile.jpg b/src/img/photo-profile.jpg new file mode 100644 index 0000000..10794b3 Binary files /dev/null and b/src/img/photo-profile.jpg differ diff --git a/src/img/scroll.svg b/src/img/scroll.svg new file mode 100644 index 0000000..e4384e4 --- /dev/null +++ b/src/img/scroll.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/index.html b/src/index.html index 5d357bd..21ed977 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,214 @@ - + + - Title + Professions -

Hello Mate Academy

+
+ +
+ + +
+
+
+

Elena Morell

+

Photographer

+

03/08/1995

+
+
+ + modal + modal + +
+
+ +
+
+

John Savos

+

Pro chef

+

03/02/2001

+
+
+ + modal + modal + +
+
+ +
+
+

Jonh Mayer

+

Hairstyle

+

08/08/2004

+
+
+ + modal + modal + +
+
+ +
+ +
+

01

+ + + +
+ +
+

02

+ + + +
+ +
+

03

+ + + +
+ +
+
+
+ +
+ + + - + diff --git a/src/photo.html b/src/photo.html new file mode 100644 index 0000000..608f99e --- /dev/null +++ b/src/photo.html @@ -0,0 +1,75 @@ + + + + + + + + Elena Morell + + + + + +
+
+ +
+

Elena Morell

+

Photographer

+
+
+
+
+

My story

+

+ Elena Morell was born 29 January 1982 in Frankfurt, Germany. As an orphan, during her early childhood, she often ended up in Bavarian foster care systems. + Eventually, Elena Morell was able to graduate high school in Munich, where she would work as a circus magician's assistant for three years. + At the age of twenty while walking down the street, Elena Morell was asked by a photographer if she ever thought about having a modeling career. + Elena Morell decided to give modeling a chance and moved to Paris where she had a successful modeling career for ten years. + However, Elena Morell felt that as a model, she did not have the freedom to decide where her or how image would be used +

+

+ Her boyfriend at the time gave her a camera, leading to an impromptu photo shoot in Africa by her of her model colleagues. + When the photos were published, Elena Morell decided that this was the new path she would take in life, + as the demand for her photography skills outgrew her demand as a model. +

+
+
+ profile +
+
+
+
+

My work

+

+ Her work has been published in Vogue, Vanity Fair, Interview, The Face, Arena, Twill, L'Uomo Vogue, I-D, and Playboy, and she has published several books of photography. + Elena Morell did promotional photography for Duran Duran from 1994 to 1997 and did some photography for their 1990 album Liberty and 1997 album Medazzaland. + Her work has been used on other album covers including Bananarama's Pop Life (1991), Belinda Carlisle's A Woman and a Man (1996), + Cathy Dennis' Am I the Kinda Girl? (1996), Janet Jackson's The Velvet Rope (1997), + All Saints' Saints & Sinners (2000), Dido's Life for Rent (2003), Britney Spears' Blackout (2007), Christina Aguilera's Back To Basics (2006) + and Keeps Gettin' Better: A Decade of Hits and Rihanna's Rated R and Talk That Talk. She also shot the cover of Hole's album Live Through This (1994). + Elena Morell has directed short films for fashion designers,[15] and music videos for several pop musicians. + She has directed commercials and web films for Revlon,Clinique, L'Oreal and Equinox. + She shows women in enticing ways without objectifying them. In an interview with V Magazine, she said: "I never force women to do anything, + but I give them roles to play so they are always active and empowered. +

+
+
+ + + + + + +
+
+
+ + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a..ed76d3f 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,156 @@ 'use strict'; + +function init() { + const slides = document.querySelectorAll('.slide'); + const pages = document.querySelectorAll('.page'); + const backgrounds = [ + `radial-gradient(#2b3760, #0b1023)`, + `radial-gradient(#4e3022, #161616)`, + `radial-gradient(#4e4342, #161616)`, + ]; + + let current = 0; + let scrollSlide = 0; + + slides.forEach((slide, index) => { + slide.addEventListener('click', function() { + changeDots(this); + nextSlide(index); + scrollSlide = index; + }); + }); + + function changeDots(dot) { + slides.forEach(slide => { + slide.classList.remove('active'); + }); + dot.classList.add('active'); + } + + function nextSlide(pageNumber) { + const nextPage = pages[pageNumber]; + const currentPage = pages[current]; + const nextLeft = nextPage.querySelector('.page__hero .modal-left'); + const nextRight = nextPage.querySelector('.page__hero .modal-right'); + const currentLeft = currentPage.querySelector('.page__hero .modal-left'); + const currentRight = currentPage.querySelector('.page__hero .modal-right'); + const nextText = nextPage.querySelector('.page__details'); + const portfolio = document.querySelector('.portfolio'); + + const tl = new TimelineMax({ + onStart: function() { + slides.forEach(slide => { + slide.style.pointerEvents = 'none'; + }); + }, + onComplete: function() { + slides.forEach(slide => { + slide.style.pointerEvents = 'all'; + }); + }, + }); + + tl.fromTo(currentLeft, 0.3, { y: '-10%' }, { y: '-100%' }) + .fromTo(currentRight, 0.3, { y: '10%' }, { y: '-100%' }, '-=0.2') + .to(portfolio, 0.3, { backgroundImage: backgrounds[pageNumber] }) + .fromTo(currentPage, 0.3, { + opacity: 1, pointerEvents: 'all', + }, { + opacity: 0, pointerEvents: 'none', + }) + .fromTo(nextPage, 0.3, { + opacity: 0, pointerEvents: 'none', + }, { + opacity: 1, pointerEvents: 'all', + }, '-=0.6') + .fromTo(nextLeft, 0.3, { y: '-100%' }, { y: '-10%' }, '-=0.6') + .fromTo(nextRight, 0.3, { y: '-100%' }, { y: '10%' }, '-=0.8') + .fromTo(nextText, 0.5, { + opacity: 0, y: 0, + }, { + opacity: 1, y: 0, + }) + .set(nextLeft, { clearProps: 'all' }) + .set(nextRight, { clearProps: 'all' }); + + current = pageNumber; + } + + document.addEventListener('wheel', throttle(scrollChange, 1500)); + // mobile solution + document.addEventListener('touchmove', throttle(scrollChange, 1500)); + + function switchDots(dotNumber) { + const activeDot = document.querySelectorAll('.slide')[dotNumber]; + + slides.forEach(slide => { + slide.classList.remove('active'); + }); + activeDot.classList.add('active'); + } + + function scrollChange(event) { + if (event.deltaY > 0) { + scrollSlide += 1; + } else { + scrollSlide -= 1; + } + + if (scrollSlide > 2) { + scrollSlide = 0; + } + + if (scrollSlide < 0) { + scrollSlide = 2; + } + switchDots(scrollSlide); + nextSlide(scrollSlide); + } + + const hamburger = document.querySelector('.navigation__menu'); + const hamburgerLines = document.querySelectorAll('.navigation__menu line'); + const navOpen = document.querySelector('.navigation__open'); + const contact = document.querySelector('.navigation__contact'); + const social = document.querySelector('.navigation__community'); + const logo = document.querySelector('.navigation__logo'); + + const tl = new TimelineMax({ + paused: true, reversed: true, + }); + + tl.to(navOpen, 0.5, { y: 0 }) + .fromTo(contact, 0.5, { + opacity: 0, y: 10, + }, { + opacity: 1, y: 0, + }, '-=0.1') + .fromTo(social, 0.5, { + opacity: 0, y: 10, + }, { + opacity: 1, y: 0, + }, '-=0.5') + .fromTo(logo, 0.2, { color: 'white' }, { color: 'black' }, '-=1') + .fromTo(hamburgerLines, 0.2, + { stroke: 'white' }, { stroke: 'black' }, '-=1'); + + hamburger.addEventListener('click', () => { + tl.reversed() ? tl.play() : tl.reverse(); + }); +} + +function throttle(func, limit) { + let inThrottle; + + return function() { + const args = arguments; + const context = this; + + if (!inThrottle) { + func.apply(context, args); + inThrottle = true; + setTimeout(() => (inThrottle = false), limit); + } + }; +} + +init(); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 2067b3f..e74013a 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,14 @@ @font-face { - font-family: "Roboto"; - src: url("../fonts/Roboto-Regular-webfont.woff") format("woff"); - font-weight: normal; - font-style: normal; + font-family: "PoppinsL"; + src: url(../fonts/Poppins-Light.ttf); +} + +@font-face { + font-family: "PoppinsR"; + src: url(../fonts/Poppins-Regular.ttf); +} + +@font-face { + font-family: "PoppinsM"; + src: url(../fonts/Poppins-Medium.ttf); } diff --git a/src/styles/_normalize.scss b/src/styles/_normalize.scss new file mode 100644 index 0000000..f6ba3f2 --- /dev/null +++ b/src/styles/_normalize.scss @@ -0,0 +1,366 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; + padding: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, "monospace"; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; + text-decoration: none; + color: #000; +} + +ul { + padding: inherit; +} + +li { + list-style: none; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline dotted; /* 2 */ + // text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, "monospace"; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.63em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/src/styles/_page.scss b/src/styles/_page.scss new file mode 100644 index 0000000..3824e7d --- /dev/null +++ b/src/styles/_page.scss @@ -0,0 +1,431 @@ +.portfolio { + height: 100vh; + overflow: hidden; + color: #fff; + background: radial-gradient(rgba(43, 55, 96, 1), rgba(11, 1, 45, 1)); +} + +.navigation { + min-height: 10vh; + width: 90%; + margin: auto; + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 0; + + &__logo { + font-size: 20px; + z-index: 2; + } + + &__menu { + z-index: 2; + cursor: pointer; + } + + &__open { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 40vh; + background: #fff; + z-index: 1; + color: #000; + display: grid; + grid-template-columns: 5% 1fr 1fr 5%; + justify-items: center; + align-items: center; + text-align: center; + transform: translateY(-100%); + + h3 { + font-size: 28px; + padding-bottom: 40px; + } + + a { + font-size: 18px; + } + } + + &__contact { + grid-column: 2 / 3; + } + + &__community-link { + padding: 0 20px; + } +} + +.page { + min-height: 90vh; + display: grid; + grid-template-columns: 5% 1fr 1fr 1fr 5%; + + &__details { + grid-column: 2 / 3; + align-self: end; + + h1 { + font-size: 64px; + font-family: "PoppinsR", sans-serif; + } + + h2 { + font-size: 42px; + padding: 20px 0; + } + + p { + font-size: 24px; + padding: 20px 0 50px; + } + } + + &__hero { + overflow: hidden; + height: 500px; + align-self: center; + justify-self: center; + + a { + display: flex; + } + + img { + height: 500px; + transition: transform 0.3s ease-out; + cursor: pointer; + } + + .modal-right { + transform: translate(0%, 10%); + } + + .modal-left { + transform: translate(0%, -10%); + } + + &:hover .modal-right, + :hover .modal-left { + transform: translate(0%, 0%); + } + } +} + +.chef, +.hairstyle { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + opacity: 0; + pointer-events: none; +} + +.pages { + position: absolute; + right: 5%; + top: 50%; + transform: translateY(-50%); + + div { + display: flex; + justify-content: space-between; + align-items: center; + } + + h3 { + font-size: 24px; + padding: 30px; + } + + svg { + cursor: pointer; + opacity: 0.5; + transform: scale(2); + + &:hover { + animation: dot 0.5s ease-in-out infinite alternate; + } + + &.active { + opacity: 1; + } + } +} + +@keyframes dot { + 0% { + transform: scale(2); + } + 100% { + transform: scale(4); + } +} + +/* photo-chef-hairstyle style */ + +.person { + &__promo { + height: 50vh; + width: 100%; + position: relative; + + img { + height: 100%; + width: 100%; + object-fit: cover; + object-position: top; + } + } + + &__title { + position: absolute; + top: 70%; + left: 50%; + transform: translate(-50%, -70%); + color: #fff; + text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); + text-align: center; + + h1 { + font-size: 42px; + } + + h3 { + padding: 10px 0; + font-size: 32px; + } + } + + &__story, + &__work { + display: flex; + justify-content: space-between; + width: 90%; + margin: auto; + padding: 80px 0; + } + + &__story-description, + &__work-description { + width: 50%; + + h3 { + font-size: 36px; + padding-bottom: 30px; + } + + p { + font-size: 20px; + padding: 20px 0; + } + } + + &__work-gallery { + display: grid; + grid-template-columns: repeat(3, 200px); + + img { + align-self: stretch; + width: 100%; + } + } +} + +@media (max-width: 1024px) { + .page { + grid-template-columns: 5% 1fr 5%; + grid-template-rows: 65% 35%; + align-items: center; + + &__hero { + grid-column: 2 / 3; + height: auto; + + img { + height: 500px; + } + } + + &__details { + grid-row: 2 / 3; + grid-column: 2 / 3; + text-align: center; + + h1 { + font-size: 48px; + } + + h2 { + font-size: 38px; + } + } + } + + .person { + + &__story, + &__work { + flex-direction: column; + } + + &__story-description, + &__work-description { + width: 100%; + } + + &__work-gallery { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + } + + &__profile { + padding-top: 30px; + text-align: center; + + img { + max-width: 100%; + width: 100%; + height: auto; + } + } + } +} + +@media (max-width: 768px) { + + .page { + + &__hero { + + img { + height: 400px; + } + } + + &__details { + + h1 { + font-size: 42px; + } + + h2 { + font-size: 32px; + } + } + } + + .pages { + + h3 { + font-size: 18px; + padding: 10px 20px; + } + + svg { + cursor: pointer; + opacity: 0.5; + transform: scale(2); + } + } +} + +@media (max-width: 480px) { + + .navigation { + &__open { + height: 50vh; + + h3 { + font-size: 22px; + } + + a { + font-size: 16px; + } + } + + &__community-link { + padding: 0 10px; + } + } + + .page { + + &__hero { + + img { + height: 300px; + } + } + + &__details { + + h1 { + font-size: 34px; + } + + h2 { + padding: 0; + font-size: 28px; + } + + p { + padding-bottom: 70px; + } + } + } + + .pages { + left: 50%; + right: 0; + display: flex; + justify-content: space-evenly; + top: 96%; + transform: translate(-50%, -96%); + + h3 { + display: none; + } + + svg { + cursor: pointer; + opacity: 0.5; + transform: scale(1.5); + } + } +} + +@media (max-width: 360px) { + .page { + + &__hero { + + img { + height: 250px; + } + } + + &__details { + + h1 { + font-size: 32px; + margin: 0; + } + + h2 { + font-size: 24px; + margin: 0; + } + + p { + margin: 0; + padding: 20px 0 100px; + } + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e..c724064 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,9 @@ +@import "normalize"; @import "utils"; @import "fonts"; @import "typography"; +@import "page"; body { - background: $c-gray; + font-family: "PoppinsL", sans-serif; }