diff --git a/about.jpg b/about.jpg new file mode 100644 index 0000000..d963fb0 Binary files /dev/null and b/about.jpg differ diff --git a/app1.png b/app1.png new file mode 100644 index 0000000..e47c875 Binary files /dev/null and b/app1.png differ diff --git a/app2.png b/app2.png new file mode 100644 index 0000000..edeccf4 Binary files /dev/null and b/app2.png differ diff --git a/dish.svg b/dish.svg new file mode 100644 index 0000000..627776f --- /dev/null +++ b/dish.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + diff --git a/home.png b/home.png new file mode 100644 index 0000000..58753e2 Binary files /dev/null and b/home.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..99a0553 --- /dev/null +++ b/index.html @@ -0,0 +1,478 @@ + + + + + + + + + + + + + Responsive website food + + + + + + + + + + + +
+ +
+
+
+

Tasty food

+

Try the best food of
the week.

+ View Menu +
+ + +
+
+ + +
+
+
+ About us +

We cook the best
tasty food

+

We cook the best food in the entire city, with excellent customer service, the best meals and at the best price, visit us.

+ Explore history +
+ + +
+
+ + +
+ Offering +

Our amazing services

+ +
+
+ + + + + + + + + + + + +

Excellent food

+

We offer our clients excellent quality services for many years, with the best and delicious food in the city.

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Fast food

+

We offer our clients excellent quality services for many years, with the best and delicious food in the city.

+
+ +
+ + + + + + + + + + + + + + + + + + +

Delivery

+

We offer our clients excellent quality services for many years, with the best and delicious food in the city.

+
+
+
+ + + + + +
+
+
+ App +

App is aviable

+

Find our application and download it, you can make reservations, food orders, see your deliveries on the way and much more.

+
+ + +
+
+ + +
+
+ + +
+
+
+ Let's talk +

Contact us

+

If you want to reserve a table in our restaurant, contact us and we will attend you quickly, with our 24/7 chat service.

+
+ +
+ Contact us now +
+
+
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..fa571fc --- /dev/null +++ b/main.js @@ -0,0 +1,107 @@ +/*==================== SHOW MENU ====================*/ +const showMenu = (toggleId, navId) =>{ + const toggle = document.getElementById(toggleId), + nav = document.getElementById(navId) + + // Validate that variables exist + if(toggle && nav){ + toggle.addEventListener('click', ()=>{ + // We add the show-menu class to the div tag with the nav__menu class + nav.classList.toggle('show-menu') + }) + } +} +showMenu('nav-toggle','nav-menu') + +/*==================== REMOVE MENU MOBILE ====================*/ +const navLink = document.querySelectorAll('.nav__link') + +function linkAction(){ + const navMenu = document.getElementById('nav-menu') + // When we click on each nav__link, we remove the show-menu class + navMenu.classList.remove('show-menu') +} +navLink.forEach(n => n.addEventListener('click', linkAction)) + +/*==================== SCROLL SECTIONS ACTIVE LINK ====================*/ +const sections = document.querySelectorAll('section[id]') + +function scrollActive(){ + const scrollY = window.pageYOffset + + sections.forEach(current =>{ + const sectionHeight = current.offsetHeight + const sectionTop = current.offsetTop - 50; + sectionId = current.getAttribute('id') + + if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){ + document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link') + }else{ + document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link') + } + }) +} +window.addEventListener('scroll', scrollActive) + +/*==================== CHANGE BACKGROUND HEADER ====================*/ +function scrollHeader(){ + const nav = document.getElementById('header') + // When the scroll is greater than 200 viewport height, add the scroll-header class to the header tag + if(this.scrollY >= 200) nav.classList.add('scroll-header'); else nav.classList.remove('scroll-header') +} +window.addEventListener('scroll', scrollHeader) + +/*==================== SHOW SCROLL TOP ====================*/ +function scrollTop(){ + const scrollTop = document.getElementById('scroll-top'); + // When the scroll is higher than 560 viewport height, add the show-scroll class to the a tag with the scroll-top class + if(this.scrollY >= 560) scrollTop.classList.add('show-scroll'); else scrollTop.classList.remove('show-scroll') +} +window.addEventListener('scroll', scrollTop) + +/*==================== DARK LIGHT THEME ====================*/ +const themeButton = document.getElementById('theme-button') +const darkTheme = 'dark-theme' +const iconTheme = 'bx-sun' + +// Previously selected topic (if user selected) +const selectedTheme = localStorage.getItem('selected-theme') +const selectedIcon = localStorage.getItem('selected-icon') + +// We obtain the current theme that the interface has by validating the dark-theme class +const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light' +const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'bx-moon' : 'bx-sun' + +// We validate if the user previously chose a topic +if (selectedTheme) { + // If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark + document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme) + themeButton.classList[selectedIcon === 'bx-moon' ? 'add' : 'remove'](iconTheme) +} + +// Activate / deactivate the theme manually with the button +themeButton.addEventListener('click', () => { + // Add or remove the dark / icon theme + document.body.classList.toggle(darkTheme) + themeButton.classList.toggle(iconTheme) + // We save the theme and the current icon that the user chose + localStorage.setItem('selected-theme', getCurrentTheme()) + localStorage.setItem('selected-icon', getCurrentIcon()) +}) + +/*==================== SCROLL REVEAL ANIMATION ====================*/ +const sr = ScrollReveal({ + origin: 'top', + distance: '30px', + duration: 2000, + reset: true +}); + +sr.reveal(`.home__data, .home__img, + .about__data, .about__img, + .services__content, .menu__content, + .app__data, .app__img, + .contact__data, .contact__button, + .footer__content`, { + interval: 200 +}) \ No newline at end of file diff --git a/movil-app.png b/movil-app.png new file mode 100644 index 0000000..a48bf2f Binary files /dev/null and b/movil-app.png differ diff --git a/pizza.svg b/pizza.svg new file mode 100644 index 0000000..60a42b3 --- /dev/null +++ b/pizza.svg @@ -0,0 +1,152 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/plate1.png b/plate1.png new file mode 100644 index 0000000..b6cadcc Binary files /dev/null and b/plate1.png differ diff --git a/plate2.png b/plate2.png new file mode 100644 index 0000000..6326491 Binary files /dev/null and b/plate2.png differ diff --git a/plate3.png b/plate3.png new file mode 100644 index 0000000..25044c7 Binary files /dev/null and b/plate3.png differ diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..a16a80e --- /dev/null +++ b/styles.css @@ -0,0 +1,554 @@ +/*===== GOOGLE FONTS =====*/ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); + +/*===== VARIABLES CSS =====*/ +:root { + --header-height: 3rem; + + /*========== Colors ==========*/ + --first-color: #069C54; + --first-color-alt: #048654; + --title-color: #393939; + --text-color: #707070; + --text-color-light: #A6A6A6; + --body-color: #FBFEFD; + --container-color: #FFFFFF; + + /*========== Font and typography ==========*/ + --body-font: 'Poppins', sans-serif; + --biggest-font-size: 2.25rem; + --h1-font-size: 1.5rem; + --h2-font-size: 1.25rem; + --h3-font-size: 1rem; + --normal-font-size: .938rem; + --small-font-size: .813rem; + --smaller-font-size: .75rem; + + /*========== Font weight ==========*/ + --font-medium: 500; + --font-semi-bold: 600; + + /*========== Margenes ==========*/ + --mb-1: .5rem; + --mb-2: 1rem; + --mb-3: 1.5rem; + --mb-4: 2rem; + --mb-5: 2.5rem; + --mb-6: 3rem; + + /*========== z index ==========*/ + --z-tooltip: 10; + --z-fixed: 100; +} + +@media screen and (min-width: 768px){ + :root{ + --biggest-font-size: 4rem; + --h1-font-size: 2.25rem; + --h2-font-size: 1.5rem; + --h3-font-size: 1.25rem; + --normal-font-size: 1rem; + --small-font-size: .875rem; + --smaller-font-size: .813rem; + } +} + +/*========== BASE ==========*/ +*,::before,::after{ + box-sizing: border-box; +} + +html{ + scroll-behavior: smooth; +} + +/*========== Variables Dark theme ==========*/ +body.dark-theme{ + --title-color: #F1F3F2; + --text-color: #C7D1CC; + --body-color: #1D2521; + --container-color: #27302C; +} + +/*========== Button Dark/Light ==========*/ +.change-theme{ + position: absolute; + right: 1rem; + top: 1.8rem; + color: var(--text-color); + font-size: 1rem; + cursor: pointer; +} + +body{ + margin: var(--header-height) 0 0 0; + font-family: var(--body-font); + font-size: var(--normal-font-size); + background-color: var(--body-color); + color: var(--text-color); + line-height: 1.6; +} + +h1,h2,h3,p,ul{ + margin: 0; +} + +ul{ + padding: 0; + list-style: none; +} + +a{ + text-decoration: none; +} + +img{ + max-width: 100%; + height: auto; +} + +/*========== CLASS CSS ==========*/ +.section{ + padding: 4rem 0 2rem; +} + +.section-title, .section-subtitle{ + text-align: center; +} + +.section-title{ + font-size: var(--h1-font-size); + color: var(--title-color); + margin-bottom: var(--mb-3); +} + +.section-subtitle{ + display: block; + color: var(--first-color); + font-weight: var(--font-medium); + margin-bottom: var(--mb-1); +} + +/*========== LAYOUT ==========*/ +.bd-container{ + max-width: 960px; + width: calc(100% - 2rem); + margin-left: var(--mb-2); + margin-right: var(--mb-2); +} + +.bd-grid{ + display: grid; + gap: 1.5rem; +} + +.l-header{ + width: 100%; + position: fixed; + top: 0; + left: 0; + z-index: var(--z-fixed); + background-color: var(--body-color); +} + +/*========== NAV ==========*/ +.nav{ + max-width: 1024px; + height: var(--header-height); + display: flex; + justify-content: space-between; + align-items: center; +} + +@media screen and (max-width: 768px){ + .nav__menu{ + position: fixed; + top: -100%; + left: 0; + width: 100%; + padding: 1.5rem 0 1rem; + text-align: center; + background-color: var(--body-color); + transition: .4s; + box-shadow: 0 4px 4px rgba(0,0,0,.1); + border-radius: 0 0 1rem 1rem; + z-index: var(--z-fixed); + } +} + +.nav__item{ + margin-bottom: var(--mb-2); +} + +.nav__link, .nav__logo, .nav__toggle{ + color: var(--text-color); + font-weight: var(--font-medium); +} + +.nav__logo:hover{ + color: var(--first-color); +} + +.nav__link{ + transition: .3s; +} + +.nav__link:hover{ + color: var(--first-color); +} + +.nav__toggle{ + font-size: 1.3rem; + cursor: pointer; +} + +/* Show menu */ +.show-menu{ + top: var(--header-height); +} + +/* Active menu */ +.active-link{ + color: var(--first-color); +} + +/* Change background header */ +.scroll-header{ + box-shadow: 0 2px 4px rgba(0,0,0,.1); +} + +/* Scroll top */ +.scrolltop{ + position: fixed; + right: 1rem; + bottom: -20%; + display: flex; + justify-content: center; + align-items: center; + padding: .3rem; + background: rgba(6,156,84,.5); + border-radius: .4rem; + z-index: var(--z-tooltip); + transition: .4s; + visibility: hidden; +} + +.scrolltop:hover{ + background-color: var(--first-color-alt); +} + +.scrolltop__icon{ + font-size: 1.8rem; + color: var(--body-color); +} + +/* Show scrolltop */ +.show-scroll{ + visibility: visible; + bottom: 1.5rem; +} + +/*========== HOME ==========*/ +.home__container{ + height: calc(100vh - var(--header-height)); + align-content: center; +} + +.home__title{ + font-size: var(--biggest-font-size); + color: var(--first-color); + margin-bottom: var(--mb-1); +} + +.home__subtitle{ + font-size: var(--h1-font-size); + color: var(--title-color); + margin-bottom: var(--mb-4); +} + +.home__img{ + width: 300px; + justify-self: center; +} + +/*========== BUTTONS ==========*/ +.button{ + display: inline-block; + background-color: var(--first-color); + color: #FFF; + padding: .75rem 1rem; + border-radius: .5rem; + transition: .3s; +} + +.button:hover{ + background-color: var(--first-color-alt); +} + +/*========== ABOUT ==========*/ +.about__data{ + text-align: center; +} + +.about__description{ + margin-bottom: var(--mb-3); +} + +.about__img{ + width: 280px; + border-radius: .5rem; + justify-self: center; +} + +/*========== SERVICES ==========*/ +.services__container{ + row-gap: 2.5rem; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); +} + +.services__content{ + text-align: center; +} + +.services__img{ + width: 64px; + height: 64px; + fill: var(--first-color); + margin-bottom: var(--mb-2); +} + +.services__title{ + font-size: var(--h3-font-size); + color: var(--title-color); + margin-bottom: var(--mb-1); +} + +.services__description{ + padding: 0 1.5rem; +} + +/*========== MENU ==========*/ +.menu__container{ + grid-template-columns: repeat(2, 1fr); + justify-content: center; +} + +.menu__content{ + position: relative; + display: flex; + flex-direction: column; + background-color: var(--container-color); + border-radius: .5rem; + box-shadow: 0 2px 4px rgba(3,74,40,.15); + padding: .75rem; +} + +.menu__img{ + width: 100px; + align-self: center; + margin-bottom: var(--mb-2); +} + +.menu__name, .menu__preci{ + font-weight: var(--font-semi-bold); + color: var(--title-color); +} + +.menu__name{ + font-size: var(--normal-font-size); +} + +.menu__detail, .menu__preci{ + font-size: var(--small-font-size); +} + +.menu__detail{ + margin-bottom: var(--mb-1); +} + +.menu__button{ + position: absolute; + bottom: 0; + right: 0; + display: flex; + padding: .625rem .813rem; + border-radius: .5rem 0 .5rem 0; +} + +/*========== APP ==========*/ +.app__data{ + text-align: center; +} + +.app__description{ + margin-bottom: var(--mb-5); +} + +.app__stores{ + margin-bottom: var(--mb-4); +} + +.app__store{ + width: 120px; + margin: 0 var(--mb-1); +} + +.app__img{ + width: 230px; + justify-self: center; +} + +/*========== CONTACT ==========*/ +.contact__container{ + text-align: center; +} + +.contact__description{ + margin-bottom: var(--mb-3); +} + +/*========== FOOTER ==========*/ +.footer__container{ + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + row-gap: 2rem; +} + +.footer__logo{ + font-size: var(--h3-font-size); + color: var(--first-color); + font-weight: var(--font-semi-bold); +} + +.footer__description{ + display: block; + font-size: var(--small-font-size); + margin: .25rem 0 var(--mb-3); +} + +.footer__social{ + font-size: 1.5rem; + color: var(--title-color); + margin-right: var(--mb-2); +} + +.footer__title{ + font-size: var(--h2-font-size); + color: var(--title-color); + margin-bottom: var(--mb-2); +} + +.footer__link{ + display: inline-block; + color: var(--text-color); + margin-bottom: var(--mb-1); +} + +.footer__link:hover{ + color: var(--first-color); +} + +.footer__copy{ + text-align: center; + font-size: var(--small-font-size); + color: var(--text-color-light); + margin-top: 3.5rem; +} + +/*========== MEDIA QUERIES ==========*/ +@media screen and (min-width: 576px){ + .home__container, + .about__container, + .app__container{ + grid-template-columns: repeat(2,1fr); + align-items: center; + } + + .about__data, .about__initial, + .app__data, .app__initial, + .contact__container, .contact__initial{ + text-align: initial; + } + + .about__img, .app__img{ + width: 380px; + order: -1; + } + + .contact__container{ + grid-template-columns: 1.75fr 1fr; + align-items: center; + } + .contact__button{ + justify-self: center; + } +} + +@media screen and (min-width: 768px){ + body{ + margin: 0; + } + + .section{ + padding-top: 8rem; + } + + .nav{ + height: calc(var(--header-height) + 1.5rem); + } + .nav__list{ + display: flex; + } + .nav__item{ + margin-left: var(--mb-5); + margin-bottom: 0; + } + .nav__toggle{ + display: none; + } + + .change-theme{ + position: initial; + margin-left: var(--mb-2); + } + + .home__container{ + height: 100vh; + justify-items: center; + } + + .services__container, + .menu__container{ + margin-top: var(--mb-6); + } + + .menu__container{ + grid-template-columns: repeat(3, 210px); + column-gap: 4rem; + } + .menu__content{ + padding: 1.5rem; + } + .menu__img{ + width: 130px; + } + + .app__store{ + margin: 0 var(--mb-1) 0 0; + } +} + +@media screen and (min-width: 960px){ + .bd-container{ + margin-left: auto; + margin-right: auto; + } + + .home__img{ + width: 500px; + } + + .about__container, + .app__container{ + column-gap: 7rem; + } +} diff --git a/styles.scss b/styles.scss new file mode 100644 index 0000000..0e3d8f3 --- /dev/null +++ b/styles.scss @@ -0,0 +1,536 @@ +/*===== GOOGLE FONTS =====*/ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); + +/*===== VARIABLES CSS =====*/ +:root{ + --header-height: 3rem; + + /*========== Colors ==========*/ + --first-color: #069C54; + --first-color-alt: #048654; + --title-color: #393939; + --text-color: #707070; + --text-color-light: #A6A6A6; + --body-color: #FBFEFD; + --container-color: #FFFFFF; + + /*========== Font and typography ==========*/ + --body-font: 'Poppins', sans-serif; + + --biggest-font-size: 2.25rem; + --h1-font-size: 1.5rem; + --h2-font-size: 1.25rem; + --h3-font-size: 1rem; + --normal-font-size: .938rem; + --small-font-size: .813rem; + --smaller-font-size: .75rem; + + @media screen and (min-width: 768px){ + --biggest-font-size: 4rem; + --h1-font-size: 2.25rem; + --h2-font-size: 1.5rem; + --h3-font-size: 1.25rem; + --normal-font-size: 1rem; + --small-font-size: .875rem; + --smaller-font-size: .813rem; + } + + /*========== Font weight ==========*/ + --font-medium: 500; + --font-semi-bold: 600; + + /*========== Margenes ==========*/ + --mb-1: .5rem; + --mb-2: 1rem; + --mb-3: 1.5rem; + --mb-4: 2rem; + --mb-5: 2.5rem; + --mb-6: 3rem; + + /*========== z index ==========*/ + --z-tooltip: 10; + --z-fixed: 100; +} + +/*========== BASE ==========*/ +*,::before,::after{ + box-sizing: border-box; +} +html{ + scroll-behavior: smooth; +} + +/*========== Variables Dark theme ==========*/ +body.dark-theme{ + --title-color: #F1F3F2; + --text-color: #C7D1CC; + --body-color: #1D2521; + --container-color: #27302C; +} + +/*========== Button Dark/Light ==========*/ +.change-theme { + position: absolute; + right: 1rem; + top: 1.8rem; + color: var(--text-color); + font-size: 1rem; + cursor: pointer; +} + +body{ + margin: var(--header-height) 0 0 0; + font-family: var(--body-font); + font-size: var(--normal-font-size); + background-color: var(--body-color); + color: var(--text-color); + line-height: 1.6; +} +h1,h2,h3,ul,p{ + margin: 0; +} + +ul{ + padding: 0; + list-style: none; +} +a{ + text-decoration: none; +} +img{ + max-width: 100%; + height: auto; +} + +/*========== CLASS CSS ==========*/ +.section{ + padding: 4rem 0 2rem; + + &-title, &-subtitle{ + text-align: center; + } + + &-title{ + font-size: var(--h1-font-size); + color: var(--title-color); + margin-bottom: var(--mb-3); + } + &-subtitle{ + display: block; + color: var(--first-color); + font-weight: var(--font-medium); + margin-bottom: var(--mb-1) + } +} + +/*========== LAYOUT ==========*/ +.bd-container{ + max-width: 960px; + width: calc(100% - 2rem); + margin-left: var(--mb-2); + margin-right: var(--mb-2); +} + +.bd-grid{ + display: grid; + gap: 1.5rem; +} + +.l-header{ + width: 100%; + position: fixed; + top: 0; + left: 0; + z-index: var(--z-fixed); + background-color: var(--body-color); +} + +/*========== NAV ==========*/ +.nav{ + max-width: 1024px; + height: var(--header-height); + display: flex; + justify-content: space-between; + align-items: center; + + &__menu{ + @media screen and (max-width: 768px){ + position: fixed; + top: -100%; + left: 0; + width: 100%; + padding: 1.5rem 0 1rem; + text-align: center; + background-color: var(--body-color); + transition: .4s; + box-shadow: 0 4px 4px rgba(0,0,0,.1); + border-radius: 0 0 1rem 1rem; + z-index: var(--z-fixed); + } + } + &__item{ + margin-bottom: var(--mb-2); + } + &__link, &__logo, &__toggle{ + color: var(--text-color); + font-weight: var(--font-medium); + } + &__logo{ + &:hover{ + color: var(--first-color); + } + } + &__link{ + transition: .3s; + + &:hover{ + color: var(--first-color); + } + } + &__toggle{ + font-size: 1.3rem; + cursor: pointer; + } +} + +/* Show menu */ +.show-menu{ + top: var(--header-height); +} +/* Active menu */ +.active-link{ + color: var(--first-color); +} + +/* Change background header */ +.scroll-header{ + box-shadow: 0 2px 4px rgba(0,0,0,.1); +} + +/* Scroll top */ +.scrolltop{ + position: fixed; + right: 1rem; + bottom: -20%; + display: flex; + justify-content: center; + align-items: center; + padding: .3rem; + background: rgba(6, 156, 84, .5); + border-radius: .4rem; + z-index: var(--z-tooltip); + transition: .4s; + visibility: hidden; + + &:hover{ + background-color: var(--first-color-alt); + } + + &__icon{ + font-size: 1.8rem; + color: var(--body-color); + } +} + +.show-scroll{ + visibility: visible; + bottom: 1.5rem; +} + +/*========== HOME ==========*/ +.home{ + &__container{ + height: calc(100vh - var(--header-height)); + align-content: center; + } + &__title{ + font-size: var(--biggest-font-size ); + color: var(--first-color); + margin-bottom: var(--mb-1); + } + &__subtitle{ + font-size: var(--h1-font-size); + color: var(--title-color); + margin-bottom: var(--mb-4); + } + &__img{ + width: 300px; + justify-self: center; + } +} + +/*========== BUTTONS ==========*/ +.button{ + display: inline-block; + background-color: var(--first-color); + color: #FFF; + padding: .75rem 1rem; + border-radius: .5rem; + transition: .3s; + + &:hover{ + background-color: var(--first-color-alt); + } +} + + +/*========== ABOUT ==========*/ +.about{ + &__data{ + text-align: center; + } + &__description{ + margin-bottom: var(--mb-3); + } + &__img{ + width: 280px; + border-radius: .5rem; + justify-self: center; + } +} + +/*========== SERVICES ==========*/ +.services{ + &__container{ + row-gap: 2.5rem; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + } + &__content{ + text-align: center; + } + &__img{ + width: 64px; + height: 64px; + fill: var(--first-color); + margin-bottom: var(--mb-2); + } + &__title{ + font-size: var(--h3-font-size); + color: var(--title-color); + margin-bottom: var(--mb-1); + } + &__description{ + padding: 0 1.5rem; + } +} + +/*========== MENU ==========*/ +.menu{ + &__container{ + grid-template-columns: repeat(2, 1fr); + justify-content: center; + } + &__content{ + position: relative; + display: flex; + flex-direction: column; + background-color: var(--container-color); + border-radius: .5rem; + box-shadow: 0 2px 4px rgba(3, 74, 40, 0.15); + padding: .75rem; + } + &__img{ + width: 100px; + align-self: center; + margin-bottom: var(--mb-2); + } + &__name, &__preci{ + font-weight: var(--font-semi-bold); + color: var(--title-color); + } + &__name{ + font-size: var(--normal-font-size); + } + &__detail, &__preci{ + font-size: var(--small-font-size); + } + &__detail{ + margin-bottom: var(--mb-1); + } + &__button{ + position: absolute; + bottom: 0; + right: 0; + display: flex; + font-size: 1.25rem; + padding: .625rem .813rem; + border-radius: .5rem 0 .5rem 0; + } +} + +/*========== APP ==========*/ +.app{ + &__data{ + text-align: center; + } + &__description{ + margin-bottom: var(--mb-5); + } + &__stores{ + margin-bottom: var(--mb-4); + } + &__store{ + width: 120px; + margin: 0 var(--mb-1); + } + &__img{ + width: 230px; + justify-self: center; + } +} + +/*========== CONTACT ==========*/ +.contact{ + &__container{ + text-align: center; + } + &__description{ + margin-bottom: var(--mb-3); + } +} + +/*========== FOOTER ==========*/ +.footer{ + &__container{ + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + row-gap: 2rem; + } + &__logo{ + font-size: var(--h3-font-size); + color: var(--first-color); + font-weight: var(--font-semi-bold); + } + &__description{ + display: block; + font-size: var(--small-font-size); + margin: .25rem 0 var(--mb-3); + } + &__social{ + font-size: 1.5rem; + color: var(--title-color); + margin-right: var(--mb-2); + } + &__title{ + font-size: var(--h2-font-size); + color: var(--title-color); + margin-bottom: var(--mb-2); + } + &__link{ + display: inline-block; + color: var(--text-color); + margin-bottom: var(--mb-1); + + &:hover{ + color: var(--first-color); + } + } + &__copy{ + text-align: center; + font-size: var(--small-font-size); + color: var(--text-color-light); + margin-top: 3.5rem; + } +} + +/*========== MEDIA QUERIES ==========*/ +@media screen and (min-width: 576px){ + .home__container, + .about__container, + .app__container{ + grid-template-columns: repeat(2, 1fr); + align-items: center; + } + + .about__data, .about__initial, + .app__data, .app__initial, + .contact__container, .contact__initial{ + text-align: initial; + } + + .about__img, .app__img{ + width: 380px; + order: -1; + } + + .contact{ + &__container{ + grid-template-columns: 1.75fr 1fr; + align-items: center; + } + &__button{ + justify-self: center; + } + } +} + +@media screen and (min-width: 768px){ + body{ + margin: 0; + } + + .section{ + padding-top: 8rem; + } + + .nav{ + height: calc(var(--header-height) + 1.5rem); + + &__list{ + display: flex; + } + &__item{ + margin-left: var(--mb-5); + margin-bottom: 0; + } + &__toggle{ + display: none; + } + } + + .change-theme{ + position: initial; + margin-left: var(--mb-2); + } + + .home__container{ + height: 100vh; + justify-items: center; + } + + .services__container, + .menu__container{ + margin-top: var(--mb-6); + } + + .menu{ + &__container{ + grid-template-columns: repeat(3, 210px); + column-gap: 4rem; + } + &__content{ + padding: 1.5rem; + } + &__img{ + width: 130px; + } + } + + .app__store{ + margin: 0 var(--mb-1) 0 0; + } +} + +@media screen and (min-width: 960px){ + .bd-container{ + margin-left: auto; + margin-right: auto; + } + + .home__img{ + width: 500px; + } + + .about__container, .app__container{ + column-gap: 7rem; + } +} \ No newline at end of file diff --git a/truck.svg b/truck.svg new file mode 100644 index 0000000..a3cfcb9 --- /dev/null +++ b/truck.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + +