├── assets ├── Cafe.svg:Zone.Identifier ├── Xicara.svg:Zone.Identifier ├── galho.svg:Zone.Identifier ├── grao.svg:Zone.Identifier ├── graosnoar.png:Zone.Identifier ├── copo.png ├── logo.png ├── image1.png ├── image2.png ├── graosnoar.png ├── logo.png:Zone.Identifier ├── image1.png:Zone.Identifier └── image2.png:Zone.Identifier ├── .vscode └── settings.json ├── favicons ├── favicon.ico ├── apple-icon.png ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon-96x96.png ├── ms-icon-70x70.png ├── apple-icon-57x57.png ├── apple-icon-60x60.png ├── apple-icon-72x72.png ├── apple-icon-76x76.png ├── ms-icon-144x144.png ├── ms-icon-150x150.png ├── ms-icon-310x310.png ├── android-icon-36x36.png ├── android-icon-48x48.png ├── android-icon-72x72.png ├── android-icon-96x96.png ├── apple-icon-114x114.png ├── apple-icon-120x120.png ├── apple-icon-144x144.png ├── apple-icon-152x152.png ├── apple-icon-180x180.png ├── android-icon-144x144.png ├── android-icon-192x192.png ├── apple-icon-precomposed.png ├── favicon.ico:Zone.Identifier ├── apple-icon.png:Zone.Identifier ├── manifest.json:Zone.Identifier ├── apple-icon-57x57.png:Zone.Identifier ├── apple-icon-60x60.png:Zone.Identifier ├── apple-icon-72x72.png:Zone.Identifier ├── apple-icon-76x76.png:Zone.Identifier ├── browserconfig.xml:Zone.Identifier ├── favicon-16x16.png:Zone.Identifier ├── favicon-32x32.png:Zone.Identifier ├── favicon-96x96.png:Zone.Identifier ├── ms-icon-144x144.png:Zone.Identifier ├── ms-icon-150x150.png:Zone.Identifier ├── ms-icon-310x310.png:Zone.Identifier ├── ms-icon-70x70.png:Zone.Identifier ├── android-icon-144x144.png:Zone.Identifier ├── android-icon-192x192.png:Zone.Identifier ├── android-icon-36x36.png:Zone.Identifier ├── android-icon-48x48.png:Zone.Identifier ├── android-icon-72x72.png:Zone.Identifier ├── android-icon-96x96.png:Zone.Identifier ├── apple-icon-114x114.png:Zone.Identifier ├── apple-icon-120x120.png:Zone.Identifier ├── apple-icon-144x144.png:Zone.Identifier ├── apple-icon-152x152.png:Zone.Identifier ├── apple-icon-180x180.png:Zone.Identifier ├── apple-icon-precomposed.png:Zone.Identifier ├── browserconfig.xml └── manifest.json ├── README.md ├── script.js ├── index.html └── style.css /assets/Cafe.svg:Zone.Identifier: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/Xicara.svg:Zone.Identifier: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/galho.svg:Zone.Identifier: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/grao.svg:Zone.Identifier: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/graosnoar.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /assets/copo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/assets/copo.png -------------------------------------------------------------------------------- /assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/assets/logo.png -------------------------------------------------------------------------------- /assets/image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/assets/image1.png -------------------------------------------------------------------------------- /assets/image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/assets/image2.png -------------------------------------------------------------------------------- /assets/graosnoar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/assets/graosnoar.png -------------------------------------------------------------------------------- /favicons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/favicon.ico -------------------------------------------------------------------------------- /favicons/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/apple-icon.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Projeto Cafeteria 2 | 3 | Projeto construido com html, css e JS para praticar as tecnologias. -------------------------------------------------------------------------------- /favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/favicon-16x16.png -------------------------------------------------------------------------------- /favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/favicon-32x32.png -------------------------------------------------------------------------------- /favicons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/favicon-96x96.png -------------------------------------------------------------------------------- /favicons/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/ms-icon-70x70.png -------------------------------------------------------------------------------- /favicons/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/apple-icon-57x57.png -------------------------------------------------------------------------------- /favicons/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/apple-icon-60x60.png -------------------------------------------------------------------------------- /favicons/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/apple-icon-72x72.png -------------------------------------------------------------------------------- /favicons/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/apple-icon-76x76.png -------------------------------------------------------------------------------- /favicons/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/ms-icon-144x144.png -------------------------------------------------------------------------------- /favicons/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/ms-icon-150x150.png -------------------------------------------------------------------------------- /favicons/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/ms-icon-310x310.png -------------------------------------------------------------------------------- /favicons/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/android-icon-36x36.png -------------------------------------------------------------------------------- /favicons/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/android-icon-48x48.png -------------------------------------------------------------------------------- /favicons/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/android-icon-72x72.png -------------------------------------------------------------------------------- /favicons/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/android-icon-96x96.png -------------------------------------------------------------------------------- /favicons/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/apple-icon-114x114.png -------------------------------------------------------------------------------- /favicons/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/apple-icon-120x120.png -------------------------------------------------------------------------------- /favicons/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/apple-icon-144x144.png -------------------------------------------------------------------------------- /favicons/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/apple-icon-152x152.png -------------------------------------------------------------------------------- /favicons/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/apple-icon-180x180.png -------------------------------------------------------------------------------- /favicons/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/android-icon-144x144.png -------------------------------------------------------------------------------- /favicons/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/android-icon-192x192.png -------------------------------------------------------------------------------- /favicons/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renatarko/cafeteria/HEAD/favicons/apple-icon-precomposed.png -------------------------------------------------------------------------------- /favicons/favicon.ico:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/apple-icon.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/manifest.json:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/apple-icon-57x57.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/apple-icon-60x60.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/apple-icon-72x72.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/apple-icon-76x76.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/browserconfig.xml:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/favicon-16x16.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/favicon-32x32.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/favicon-96x96.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/ms-icon-144x144.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/ms-icon-150x150.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/ms-icon-310x310.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/ms-icon-70x70.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/android-icon-144x144.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/android-icon-192x192.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/android-icon-36x36.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/android-icon-48x48.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/android-icon-72x72.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/android-icon-96x96.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/apple-icon-114x114.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/apple-icon-120x120.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/apple-icon-144x144.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/apple-icon-152x152.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/apple-icon-180x180.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /favicons/apple-icon-precomposed.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=C:\Users\Renata Karolina\Downloads\2666b10ed9111de6fd00d5b1aeb9aa82.ico.zip 4 | -------------------------------------------------------------------------------- /assets/logo.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=https://www.remove.bg/ 4 | HostUrl=https://o.remove.bg/downloads/20de6854-f0ca-4131-bf58-e08aac1f1788/Design_sem_nome__11_-removebg-preview.png 5 | -------------------------------------------------------------------------------- /assets/image1.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=https://www.remove.bg/ 4 | HostUrl=https://o.remove.bg/downloads/3505b6fa-76ce-470f-86bb-5ef7006b5d18/Design_sem_nome__12_-removebg-preview.png 5 | -------------------------------------------------------------------------------- /assets/image2.png:Zone.Identifier: -------------------------------------------------------------------------------- 1 | [ZoneTransfer] 2 | ZoneId=3 3 | ReferrerUrl=https://www.remove.bg/ 4 | HostUrl=https://o.remove.bg/downloads/bcb43a97-55bc-4df9-99da-b4881c8d2e57/Design_sem_nome__13_-removebg-preview.png 5 | -------------------------------------------------------------------------------- /favicons/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | #ffffff -------------------------------------------------------------------------------- /favicons/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "App", 3 | "icons": [ 4 | { 5 | "src": "\/android-icon-36x36.png", 6 | "sizes": "36x36", 7 | "type": "image\/png", 8 | "density": "0.75" 9 | }, 10 | { 11 | "src": "\/android-icon-48x48.png", 12 | "sizes": "48x48", 13 | "type": "image\/png", 14 | "density": "1.0" 15 | }, 16 | { 17 | "src": "\/android-icon-72x72.png", 18 | "sizes": "72x72", 19 | "type": "image\/png", 20 | "density": "1.5" 21 | }, 22 | { 23 | "src": "\/android-icon-96x96.png", 24 | "sizes": "96x96", 25 | "type": "image\/png", 26 | "density": "2.0" 27 | }, 28 | { 29 | "src": "\/android-icon-144x144.png", 30 | "sizes": "144x144", 31 | "type": "image\/png", 32 | "density": "3.0" 33 | }, 34 | { 35 | "src": "\/android-icon-192x192.png", 36 | "sizes": "192x192", 37 | "type": "image\/png", 38 | "density": "4.0" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // ScrollReveal 2 | 3 | window.sr = ScrollReveal({ reset: true }) 4 | 5 | sr.reveal('.home-text', {duration: 1000, delay: 100}) 6 | sr.reveal('.image-cafe', {duration: 1000, delay: 100}) 7 | 8 | sr.reveal('.about-text', {duration: 1500, delay: 100}) 9 | sr.reveal('.about-image', {duration: 1500, delay: 100}) 10 | 11 | sr.reveal('.products-text',{duration: 1500, delay: 100} ) 12 | sr.reveal('.products-image',{duration: 1500, delay: 100} ) 13 | 14 | sr.reveal('.contact-text', {duration: 1500, delay: 300}) 15 | sr.reveal('.input', {interval: 16, 16 | delay: 200, 17 | duration: 1000 18 | }) 19 | 20 | 21 | // Menu responsive 22 | 23 | const btnMobile = document.querySelector(".btn-mobile") 24 | 25 | function showMenu() { 26 | const nav = document.querySelector(".nav"); 27 | nav.classList.toggle("show"); 28 | 29 | const links = document.querySelectorAll("nav ul li a"); 30 | 31 | for (let link of links) { 32 | link.addEventListener("click", function () { 33 | nav.classList.remove("show"); 34 | }); 35 | } 36 | } 37 | 38 | btnMobile.addEventListener("click", showMenu); 39 | 40 | // Theme Ligth 41 | 42 | const input = document.querySelector(".btn-theme"); 43 | const body = document.querySelector("body"); 44 | const header = document.querySelector("header"); 45 | const firstText = document.querySelectorAll("h2"); 46 | const text = document.querySelectorAll(".text"); 47 | const title = document.querySelector(".title"); 48 | const subTitle = document.querySelector(".sub-title"); 49 | const logoText = document.querySelector(".logo-text"); 50 | const sociais = document.querySelector(".sociais"); 51 | const icones = document.querySelector(".icones") 52 | const name = document.querySelector(".name") 53 | const textImage = document.querySelector(".text-image") 54 | 55 | const toggleThemeMode = () => { 56 | body.classList.toggle("ligth-theme"); 57 | header.classList.toggle("ligth-theme"); 58 | title.classList.toggle("ligth-theme"); 59 | subTitle.classList.toggle("ligth-theme"); 60 | logoText.classList.toggle("ligth-theme"); 61 | sociais.classList.toggle("ligth-theme"); 62 | icones.classList.toggle("ligth-theme"); 63 | name.classList.toggle("ligth-theme"); 64 | textImage.classList.toggle("ligth-theme"); 65 | 66 | firstText.forEach((text) => text.classList.toggle("ligth-theme")); 67 | text.forEach((text) => text.classList.toggle("ligth-theme")); 68 | }; 69 | 70 | input.onchange = toggleThemeMode; 71 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | Cafeteria | Brasil Café 32 | 33 | 34 | 35 |
36 | 39 | 40 |
41 | 45 | 56 |
57 |
58 | 59 |
60 |
61 | 62 | 73 | 74 |
75 | imagem 76 |
77 |
78 |
79 | 80 |
81 |
82 | 97 | 98 |
99 | 100 |

Seu café em qualquer lugar

101 |
102 | 103 |
104 |
105 | 106 |
107 |
108 | 120 | 121 |
122 |
123 | 124 | 125 | imagem1 126 |
127 |
128 |
129 |
130 | 131 |
132 |
133 | 143 | 144 |
145 |
146 | 147 | 148 | 149 | 150 |
151 |
152 |
153 |
154 | 155 | 167 | 168 | 169 | 170 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,500&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: "Poppins", sans-serif; 8 | } 9 | 10 | a { 11 | text-decoration: none; 12 | } 13 | 14 | img { 15 | width: 100%; 16 | height: auto; 17 | } 18 | 19 | li { 20 | list-style: none; 21 | } 22 | 23 | input, 24 | textarea { 25 | outline: none; 26 | } 27 | 28 | html { 29 | scroll-behavior: smooth; 30 | } 31 | 32 | body { 33 | background-color: rgb(37, 19, 9); 34 | display: flex; 35 | flex-direction: column; 36 | position: relative; 37 | height: auto; 38 | justify-content: center; 39 | } 40 | 41 | header { 42 | background-color: rgb(37, 19, 9); 43 | width: 100%; 44 | height: 120px; 45 | display: flex; 46 | justify-content: space-between; 47 | align-items: center; 48 | padding-left: 2rem; 49 | padding-right: 2rem; 50 | position: fixed; 51 | top: 0; 52 | left: 0; 53 | z-index: 100; 54 | } 55 | 56 | .logo { 57 | width: 4.5rem; 58 | /* padding: 0.8rem; */ 59 | } 60 | 61 | .div-nav{ 62 | display: flex; 63 | gap: 2rem; 64 | align-items: center; 65 | } 66 | 67 | .menu { 68 | display: flex; 69 | gap: 5rem; 70 | } 71 | 72 | .menu a { 73 | display: block; 74 | } 75 | 76 | .btn-mobile { 77 | display: none; 78 | } 79 | 80 | header .menu .icones-menu { 81 | color: #fff; 82 | font-weight: 600; 83 | font-size: 1.1rem; 84 | position: relative; 85 | transition: color 0.2s; 86 | } 87 | 88 | header .menu .icones-menu:hover, 89 | header .menu .icones-menu.active { 90 | color: #e5c173; 91 | } 92 | 93 | header .menu .icones-menu::after { 94 | content: ""; 95 | width: 0%; 96 | height: 1px; 97 | background-color: #e5c173; 98 | position: absolute; 99 | left: 0; 100 | bottom: -0.5rem; 101 | 102 | transition: width 0.2s; 103 | } 104 | 105 | header .menu .icones-menu:hover::after, 106 | header .menu .icones-menu.icones-menu.active::after { 107 | width: 100%; 108 | } 109 | 110 | /* Theme */ 111 | 112 | .switch { 113 | position: relative; 114 | width: 3rem; 115 | height: 1.5rem; 116 | } 117 | 118 | .switch input { 119 | opacity: 0; 120 | width: 0; 121 | height: 0; 122 | } 123 | 124 | .slider { 125 | position: absolute; 126 | cursor: pointer; 127 | top: 0; 128 | left: 0; 129 | right: 0; 130 | bottom: 0; 131 | background-color: #e5c173; 132 | -webkit-transition: 0.4s; 133 | transition: 0.4s; 134 | border-radius: 34px; 135 | z-index: 300; 136 | } 137 | 138 | .slider::before { 139 | position: absolute; 140 | content: ""; 141 | height: 1.2rem; 142 | width: 1.2rem; 143 | left: 0.3rem; 144 | top: 50%; 145 | background-color: rgb(37, 19, 9); 146 | transition: 0.4s; 147 | border-radius: 20px; 148 | transform: translateY(-50%); 149 | transition: 0.4s; 150 | } 151 | 152 | input:checked + .slider { 153 | background-color: rgb(37, 19, 9); 154 | } 155 | 156 | input:checked + .slider::before { 157 | left: calc(100% - 1.7rem); 158 | background-color: #e5c173; 159 | } 160 | 161 | body.ligth-theme, header.ligth-theme { 162 | background-color: #eeecec; 163 | } 164 | 165 | header.ligth-theme .menu .icones-menu { 166 | color: rgb(37, 19, 9); 167 | } 168 | 169 | .sub-title.ligth-theme, .secundy-text.ligth-theme, .logo-text.ligth-theme, .sociais.ligth-theme, .name.ligth-theme, .text-image.ligth-theme { 170 | color: #bf7c15; 171 | } 172 | 173 | .text.ligth-theme, .first-text.ligth-theme, .title.ligth-theme { 174 | color: rgb(37, 19, 9); 175 | } 176 | 177 | 178 | /* Layout */ 179 | .section { 180 | padding: 10rem; 181 | } 182 | 183 | .container { 184 | display: flex; 185 | justify-content: center; 186 | align-items: center; 187 | gap: 3rem; 188 | } 189 | 190 | .img-container { 191 | text-align: center; 192 | } 193 | 194 | .text-container { 195 | width: 500px; 196 | text-align: left; 197 | } 198 | 199 | /* Seção Apresentação: home */ 200 | .image-galho-home { 201 | max-width: 400px; 202 | position: absolute; 203 | top: 0; 204 | right: 0; 205 | z-index: -10; 206 | } 207 | 208 | .title { 209 | font-size: 3rem; 210 | color: #e5c173; 211 | text-transform: uppercase; 212 | } 213 | 214 | .sub-title { 215 | font-size: 3rem; 216 | color: #fff; 217 | font-weight: 600; 218 | text-transform: uppercase; 219 | } 220 | 221 | .text { 222 | color: #fff; 223 | line-height: 28px; 224 | margin-top: 20px; 225 | } 226 | 227 | .image-cafe { 228 | min-width: 200px; 229 | z-index: 200; 230 | } 231 | 232 | .image-grao-home { 233 | max-width: 200px; 234 | position: absolute; 235 | top: 500px; 236 | left: 40px; 237 | z-index: -1; 238 | } 239 | 240 | /* Seção about */ 241 | 242 | .about { 243 | order: 2; 244 | } 245 | 246 | .image-xicara { 247 | width: 500px; 248 | /* max-width: 600px; */ 249 | height: auto; 250 | order: 1; 251 | overflow: hidden; 252 | } 253 | 254 | .text-image { 255 | color: #e5c173; 256 | font-size: 1.05rem; 257 | order: 1; 258 | } 259 | 260 | .first-text { 261 | color: #fff; 262 | font-size: 1.05rem; 263 | text-transform: uppercase; 264 | } 265 | .secundy-text { 266 | color: #e5c173; 267 | font-size: 3rem; 268 | line-height: 50px; 269 | margin-top: 20px; 270 | text-transform: uppercase; 271 | } 272 | 273 | .about { 274 | position: relative; 275 | } 276 | 277 | .image-galho-about { 278 | position: absolute; 279 | width: 500px; 280 | top: 1300px; 281 | left: -50px; 282 | z-index: -1; 283 | transform: rotate(180deg); 284 | } 285 | 286 | /* Seção Produtos */ 287 | 288 | .name { 289 | color: #e5c173; 290 | font-size: 1.3rem; 291 | font-weight: 600; 292 | } 293 | 294 | .image-container { 295 | position: relative; 296 | } 297 | 298 | .image-grao-products { 299 | position: absolute; 300 | width: 400px; 301 | top: 0px; 302 | left: 0px; 303 | z-index: -1; 304 | transform: rotate(-32deg); 305 | } 306 | 307 | .image-grao-products1 { 308 | display: none; 309 | position: absolute; 310 | width: 400px; 311 | top: 50px; 312 | left: 0px; 313 | z-index: -1; 314 | transform: rotate(-32deg); 315 | } 316 | 317 | .image-products { 318 | width: 335px; 319 | } 320 | 321 | /* Seção Contato */ 322 | .contact { 323 | padding: 4rem 0; 324 | } 325 | 326 | .container-form { 327 | width:400px; 328 | display: flex; 329 | justify-content: center; 330 | margin-top: 30px; 331 | } 332 | 333 | .contact-whats { 334 | width: auto; 335 | margin-top: 2rem; 336 | display: flex; 337 | } 338 | 339 | .whats { 340 | width: 180px; 341 | background-color: #e5c173; 342 | padding: 0.6rem; 343 | border-radius: 10px; 344 | color: #251309; 345 | text-align: center; 346 | opacity: 0.8; 347 | font-weight: 600; 348 | } 349 | 350 | .whats:hover { 351 | opacity: 1; 352 | } 353 | 354 | form { 355 | width: 100%; 356 | display: grid; 357 | justify-items: center; 358 | gap: 1rem; 359 | } 360 | 361 | .input { 362 | width: 100%; 363 | padding: 8px; 364 | border-radius: 10px; 365 | border: none; 366 | } 367 | 368 | .input:focus { 369 | border: 3px solid #bf7c15; 370 | } 371 | 372 | 373 | .form-textarea { 374 | width: 100%; 375 | display: flex; 376 | flex-direction: column; 377 | align-items: center; 378 | gap: 2rem; 379 | } 380 | 381 | textarea { 382 | width: 95%; 383 | height: 5rem; 384 | } 385 | 386 | .button { 387 | width: 100%; 388 | padding: 0.6rem; 389 | border: none; 390 | background: #e5c173; 391 | color: rgb(37, 19, 9); 392 | border-radius: 10px; 393 | font-weight: 600; 394 | cursor: pointer; 395 | transition: 0.2s; 396 | opacity: 0.8; 397 | } 398 | 399 | .button:hover { 400 | opacity: 1; 401 | } 402 | 403 | /* footer */ 404 | footer { 405 | width: 100%; 406 | height: 6rem; 407 | display: flex; 408 | align-items: center; 409 | justify-content: space-between; 410 | margin-top: 10rem; 411 | margin-bottom: 2rem; 412 | padding: 6rem 4rem; 413 | } 414 | 415 | .logo-text { 416 | font-size: 1.6rem; 417 | color: #e5c173; 418 | font-weight: 600; 419 | border-radius: 10px; 420 | } 421 | 422 | .sociais { 423 | color: #e5c173; 424 | font-weight: 600; 425 | text-align: center; 426 | } 427 | 428 | .icons-container { 429 | display: flex; 430 | flex-direction: column; 431 | align-items: center; 432 | gap: 2rem; 433 | } 434 | 435 | .icons { 436 | display: flex; 437 | gap: 2rem; 438 | } 439 | 440 | .icons-container .icones { 441 | background-color: #e5c173; 442 | padding: 7px; 443 | opacity: 0.5; 444 | border-radius: 50%; 445 | } 446 | 447 | .icones { 448 | font-size: 1.7rem; 449 | color: #251309; 450 | transition: all 0.3s; 451 | } 452 | 453 | .icones:hover { 454 | border-radius: 50%; 455 | transform: scale(1.3); 456 | opacity: 1; 457 | } 458 | 459 | @media (max-width: 1310px) { 460 | .spacing { 461 | margin-top: 4rem; 462 | } 463 | 464 | } 465 | 466 | 467 | @media (max-width: 995px) { 468 | .title { 469 | font-size: 2.3rem; 470 | } 471 | .sub-title { 472 | font-size: 2.3rem; 473 | } 474 | .first-text { 475 | font-size: 0.9rem; 476 | } 477 | .secundy-text { 478 | font-size: 2.3rem; 479 | } 480 | .text { 481 | font-size: 1rem; 482 | } 483 | } 484 | 485 | @media (max-width: 910px) { 486 | .section { 487 | padding: 6rem 3rem; 488 | } 489 | 490 | .container { 491 | flex-direction: column; 492 | justify-items: center; 493 | } 494 | 495 | .text-container { 496 | text-align: center; 497 | } 498 | 499 | .secundy-text { 500 | padding: 0 2rem; 501 | } 502 | 503 | .text{ 504 | padding: 0 4rem; 505 | } 506 | 507 | .menu { 508 | display: block; 509 | position: absolute; 510 | width: 100%; 511 | top: 100px; 512 | right: 0; 513 | background-color: rgba(37, 19, 9, 0.956); 514 | transition: 0.4s; 515 | height: 0; 516 | z-index: 100; 517 | visibility: hidden; 518 | overflow-y: hidden; 519 | } 520 | 521 | header .nav .menu .icones-menu { 522 | margin-top: 3rem; 523 | padding: 1rem; 524 | font-size: 2rem; 525 | color: #e5c173; 526 | text-align: center; 527 | } 528 | 529 | .nav.show .menu { 530 | height: calc(100vh - 100px); 531 | visibility: visible; 532 | } 533 | 534 | .btn-mobile { 535 | display: flex; 536 | cursor: pointer; 537 | background: transparent; 538 | border: none; 539 | } 540 | 541 | .hamburguer { 542 | border-top: 2px solid #e5c173; 543 | width: 30px; 544 | cursor: pointer; 545 | } 546 | 547 | .hamburguer::after, 548 | .hamburguer::before { 549 | content: ""; 550 | display: block; 551 | height: 2px; 552 | width: 30px; 553 | background-color: #e5c173; 554 | margin-top: 5px; 555 | transition: 0.3s; 556 | position: relative; 557 | } 558 | 559 | .nav.show .hamburguer { 560 | border-top-color: transparent; 561 | } 562 | 563 | .nav.show .hamburguer::before { 564 | transform: rotate(135deg); 565 | } 566 | 567 | .nav.show .hamburguer::after { 568 | transform: rotate(-135deg); 569 | top: -7px; 570 | } 571 | 572 | .about-text { 573 | order: 1; 574 | } 575 | 576 | .about-image { 577 | order: 2; 578 | } 579 | 580 | .contact { 581 | padding: 0; 582 | } 583 | 584 | .contact-whats { 585 | justify-content: center; 586 | align-items: center; 587 | } 588 | 589 | .image-galho-home { 590 | max-width: 300px; 591 | } 592 | 593 | .image-galho-about { 594 | max-width: 350px; 595 | top: 1800px; 596 | left: -30px; 597 | } 598 | 599 | .image-grao-home { 600 | top: 710px; 601 | left: 20; 602 | } 603 | 604 | .image-cafe { 605 | width: 400px; 606 | } 607 | 608 | .image-xicara { 609 | width: 400px; 610 | } 611 | 612 | footer { 613 | flex-direction: column; 614 | justify-content: center; 615 | } 616 | 617 | .container-form { 618 | width: 80% 619 | } 620 | 621 | } 622 | 623 | @media (max-width: 600px) { 624 | 625 | .text-container { 626 | width: auto; 627 | } 628 | 629 | .image-xicara { 630 | width: 310px; 631 | } 632 | 633 | .image-grao-products { 634 | width: 350px; 635 | top: 0px; 636 | left: -20px; 637 | } 638 | 639 | .image-galho-about { 640 | max-width: 300px; 641 | top: 1950px; 642 | left: -50px; 643 | } 644 | 645 | .image-grao-home { 646 | top: 600px; 647 | left: 0; 648 | } 649 | 650 | .image-products { 651 | width: 235px; 652 | } 653 | } 654 | 655 | @media (max-width: 560px) { 656 | .text { 657 | padding: 0 1rem; 658 | } 659 | 660 | .image-cafe { 661 | width: 380px; 662 | } 663 | 664 | .image-xicara { 665 | width: 340px; 666 | } 667 | 668 | .image-grao-products { 669 | width: 300px; 670 | top: 10px; 671 | left: 0px; 672 | } 673 | 674 | .image-galho-about { 675 | top: 1800px 676 | } 677 | 678 | .text { 679 | padding: 0; 680 | } 681 | } 682 | 683 | @media (max-width: 485px) { 684 | .image-galho-about { 685 | top: 1900px; 686 | } 687 | .container-form { 688 | width: 100%; 689 | } 690 | 691 | .image-grao-products { 692 | width: 200px; 693 | top: 120px; 694 | left:5px; 695 | } 696 | .image-grao-products1 { 697 | display: block; 698 | width: 200px; 699 | top: 120px; 700 | left: 50px; 701 | } 702 | 703 | .image-cafe { 704 | width: 300px; 705 | } 706 | 707 | .image-xicara { 708 | width: 290px; 709 | } 710 | } 711 | 712 | @media (max-width: 385px) { 713 | .section { 714 | padding: 6rem 1rem; 715 | } 716 | .image-galho-home{ 717 | top:0; 718 | } 719 | .image-galho-about { 720 | top: 1700px; 721 | } 722 | 723 | } 724 | 725 | @media (max-width: 375px) { 726 | .image-grao-products { 727 | width: 180px; 728 | top: 120px; 729 | left:5px; 730 | } 731 | .image-grao-products1 { 732 | width: 180px; 733 | top: 120px; 734 | left: 70px; 735 | } 736 | } 737 | 738 | @media (max-width: 340px){ 739 | .title { 740 | font-size: 1.9rem; 741 | } 742 | .sub-title { 743 | font-size: 1.9rem; 744 | } 745 | .secundy-text{ 746 | font-size: 1.9rem; 747 | } 748 | .text { 749 | padding: .9rem; 750 | font-size: .8rem; 751 | } 752 | .image-cafe { 753 | width: 250px; 754 | } 755 | } 756 | 757 | /* ScrollReveal */ 758 | 759 | .home-text, .image-cafe, .about-text, .about-image, .products-text, .products-image, .contact-text, .input { 760 | visibility: hidden; 761 | 762 | } --------------------------------------------------------------------------------