├── assets ├── img │ ├── bife.jpg │ ├── logo.ico │ ├── batata.jpg │ ├── ifood.png │ ├── ava_fenix.png │ ├── avaliacao.png │ ├── bisteca.jpg │ ├── calabresa.png │ ├── carneSeca.jpg │ ├── logoHome.png │ ├── moqueca.png │ ├── omelete.jpg │ ├── salsicha.jpg │ ├── ava_brenda.png │ ├── ava_victor.png │ ├── carnePanela.jpg │ ├── localizacao.png │ ├── parmegiana.jpg │ ├── wallpaper1.jpg │ ├── frangoGrelhado.jpg │ └── frangoPassarinho.jpg └── css │ ├── root.css │ ├── scrollbar.css │ ├── media.css │ └── style.css ├── README.md └── index.html /assets/img/bife.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeffersonRPM/Landing-page-comida-bebida/HEAD/assets/img/bife.jpg -------------------------------------------------------------------------------- /assets/img/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeffersonRPM/Landing-page-comida-bebida/HEAD/assets/img/logo.ico -------------------------------------------------------------------------------- /assets/img/batata.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeffersonRPM/Landing-page-comida-bebida/HEAD/assets/img/batata.jpg -------------------------------------------------------------------------------- /assets/img/ifood.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeffersonRPM/Landing-page-comida-bebida/HEAD/assets/img/ifood.png -------------------------------------------------------------------------------- /assets/img/ava_fenix.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeffersonRPM/Landing-page-comida-bebida/HEAD/assets/img/ava_fenix.png -------------------------------------------------------------------------------- /assets/img/avaliacao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeffersonRPM/Landing-page-comida-bebida/HEAD/assets/img/avaliacao.png -------------------------------------------------------------------------------- /assets/img/bisteca.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeffersonRPM/Landing-page-comida-bebida/HEAD/assets/img/bisteca.jpg -------------------------------------------------------------------------------- /assets/img/calabresa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeffersonRPM/Landing-page-comida-bebida/HEAD/assets/img/calabresa.png -------------------------------------------------------------------------------- /assets/img/carneSeca.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeffersonRPM/Landing-page-comida-bebida/HEAD/assets/img/carneSeca.jpg -------------------------------------------------------------------------------- /assets/img/logoHome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeffersonRPM/Landing-page-comida-bebida/HEAD/assets/img/logoHome.png -------------------------------------------------------------------------------- /assets/img/moqueca.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeffersonRPM/Landing-page-comida-bebida/HEAD/assets/img/moqueca.png -------------------------------------------------------------------------------- /assets/img/omelete.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeffersonRPM/Landing-page-comida-bebida/HEAD/assets/img/omelete.jpg -------------------------------------------------------------------------------- /assets/img/salsicha.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeffersonRPM/Landing-page-comida-bebida/HEAD/assets/img/salsicha.jpg -------------------------------------------------------------------------------- /assets/img/ava_brenda.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeffersonRPM/Landing-page-comida-bebida/HEAD/assets/img/ava_brenda.png -------------------------------------------------------------------------------- /assets/img/ava_victor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeffersonRPM/Landing-page-comida-bebida/HEAD/assets/img/ava_victor.png -------------------------------------------------------------------------------- /assets/img/carnePanela.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeffersonRPM/Landing-page-comida-bebida/HEAD/assets/img/carnePanela.jpg -------------------------------------------------------------------------------- /assets/img/localizacao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeffersonRPM/Landing-page-comida-bebida/HEAD/assets/img/localizacao.png -------------------------------------------------------------------------------- /assets/img/parmegiana.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeffersonRPM/Landing-page-comida-bebida/HEAD/assets/img/parmegiana.jpg -------------------------------------------------------------------------------- /assets/img/wallpaper1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeffersonRPM/Landing-page-comida-bebida/HEAD/assets/img/wallpaper1.jpg -------------------------------------------------------------------------------- /assets/img/frangoGrelhado.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeffersonRPM/Landing-page-comida-bebida/HEAD/assets/img/frangoGrelhado.jpg -------------------------------------------------------------------------------- /assets/img/frangoPassarinho.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeffersonRPM/Landing-page-comida-bebida/HEAD/assets/img/frangoPassarinho.jpg -------------------------------------------------------------------------------- /assets/css/root.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --white-color: #ffffff; 3 | --black-color: #000000; 4 | --gray-color: #C0C0C0; 5 | --darkgray-color: #0F0F0F; 6 | --invertido-color: #3f3f3f; 7 | --lightgray-color: #f3f3f3; 8 | --logo-red: #ed1c24; 9 | --logo-blue: #99d9ea; 10 | --gap: 3rem; 11 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | A simple landing page made in HTML and CSS has five anchors. The theme chosen is related to a restaurant in my city. In this project, grid, accessibility, responsive design, mobile, transitions, among others, were addressed. 2 | 3 | ![fullpage](https://user-images.githubusercontent.com/48998618/221754316-7b1dbd50-d0ea-4eda-bd98-4e96f17178be.png) 4 | -------------------------------------------------------------------------------- /assets/css/scrollbar.css: -------------------------------------------------------------------------------- 1 | ::-webkit-scrollbar { 2 | width: 0.5rem; 3 | } 4 | 5 | ::-webkit-scrollbar-track { 6 | box-shadow: inset 0 0 5px grey; 7 | border-radius: 10px; 8 | } 9 | 10 | ::-webkit-scrollbar-thumb { 11 | background: var(--black-color); 12 | border-radius: 10px; 13 | } 14 | 15 | ::-webkit-scrollbar-thumb:hover { 16 | background: var(--invertido-color); 17 | } -------------------------------------------------------------------------------- /assets/css/media.css: -------------------------------------------------------------------------------- 1 | @media all and (max-width: 639px) { 2 | 3 | ::-webkit-scrollbar { 4 | width: 0rem; 5 | } 6 | 7 | .main-content { 8 | max-width: 140rem; 9 | margin: 0 auto; 10 | padding: var(--gap); 11 | } 12 | 13 | h2 { 14 | font-size: 3.5rem; 15 | } 16 | 17 | h3 { 18 | font-size: 2.5rem; 19 | } 20 | 21 | h4 { 22 | font-size: 2rem; 23 | } 24 | 25 | h5 { 26 | font-size: 1.7rem; 27 | } 28 | 29 | .menu { 30 | bottom: 0; 31 | text-align: center; 32 | } 33 | 34 | .menu-content, 35 | .menu-content ul { 36 | flex-direction: column; 37 | justify-content: center; 38 | } 39 | 40 | .menu-content { 41 | height: 100vh; 42 | } 43 | 44 | .menu { 45 | position: fixed; 46 | top: 0; 47 | left: 0; 48 | right: 0; 49 | width: 100%; 50 | z-index: 1; 51 | border-bottom: 0.1rem solid var(--gray-color); 52 | background-color: var(--white-color); 53 | } 54 | 55 | .menu { 56 | display: none; 57 | } 58 | 59 | .menu-spacing { 60 | height: 4.6rem !important; 61 | } 62 | 63 | .close-menu-label::after { 64 | content: '☰'; 65 | position: fixed; 66 | z-index: 2; 67 | top: 1rem; 68 | right: 2rem; 69 | color: var(--black-color); 70 | font-size: 3rem; 71 | line-height: 3rem; 72 | width: 3rem; 73 | height: 3rem; 74 | text-align: center; 75 | padding: 0.3rem; 76 | border-radius: 10px; 77 | cursor: pointer; 78 | background-color: var(--white-color); 79 | } 80 | 81 | .close-menu:checked~.menu { 82 | display: block; 83 | } 84 | 85 | .close-menu:checked~.close-menu-label::after { 86 | content: '×'; 87 | color: var(--darkgray-color); 88 | } 89 | 90 | .anchor1-bg { 91 | background-size: cover; 92 | background-position: center center; 93 | animation: bg-animation 90s linear 0s infinite alternate; 94 | } 95 | 96 | .sobre-content { 97 | display: grid; 98 | align-items: center; 99 | gap: var(--gap); 100 | min-height: 100vh; 101 | grid-template-columns: 1fr; 102 | } 103 | 104 | .grid-comida { 105 | display: grid; 106 | grid-template-columns: 1fr; 107 | } 108 | 109 | .grid-porcoes { 110 | display: grid; 111 | grid-template-columns: 1fr; 112 | } 113 | 114 | .home-text-bg { 115 | background-color: var(--white-color); 116 | border-top-left-radius: 5rem; 117 | border-top-right-radius: 5rem; 118 | border-bottom-right-radius: 5rem; 119 | border-bottom-left-radius: 5rem; 120 | box-shadow: 0px 0px 5px 5px var(--black-color); 121 | padding: 2rem; 122 | text-align: center; 123 | display: flex; 124 | flex-direction: column; 125 | align-items: center; 126 | justify-content: center; 127 | } 128 | 129 | .sobre-content-ajuste { 130 | min-height: 0vh; 131 | } 132 | 133 | } 134 | 135 | @media all and (min-width: 640px) and (max-width: 1250px) { 136 | 137 | .main-content { 138 | max-width: 140rem; 139 | margin: 0 auto; 140 | padding: 1rem; 141 | } 142 | 143 | h2 { 144 | font-size: 4rem; 145 | } 146 | 147 | h3 { 148 | font-size: 3.5rem; 149 | } 150 | 151 | h4 { 152 | font-size: 3rem; 153 | } 154 | 155 | h5 { 156 | font-size: 2.7rem; 157 | } 158 | 159 | .menu ul li a { 160 | font-family: 'Montserrat', sans-serif; 161 | font-weight: 700; 162 | display: block; 163 | padding: 2rem; 164 | font-size: 1.8rem; 165 | color: inherit; 166 | position: relative; 167 | } 168 | 169 | .anchor1-bg { 170 | animation: bg-animation 80s linear 0s infinite alternate; 171 | } 172 | 173 | .sobre-content { 174 | display: grid; 175 | align-items: center; 176 | gap: var(--gap); 177 | min-height: 100vh; 178 | grid-template-columns: 1fr; 179 | } 180 | 181 | .grid-comida { 182 | display: grid; 183 | grid-template-columns: 1fr 1fr; 184 | } 185 | 186 | .grid-porcoes { 187 | display: grid; 188 | grid-template-columns: 1fr 1fr; 189 | } 190 | 191 | .home-text-bg { 192 | background-color: var(--white-color); 193 | border-top-left-radius: 5rem; 194 | border-top-right-radius: 5rem; 195 | border-bottom-right-radius: 5rem; 196 | border-bottom-left-radius: 5rem; 197 | box-shadow: 0px 0px 5px 5px var(--black-color); 198 | padding: 2rem; 199 | text-align: center; 200 | display: flex; 201 | flex-direction: column; 202 | align-items: center; 203 | justify-content: center; 204 | } 205 | 206 | .sobre-content-ajuste { 207 | min-height: 0vh; 208 | } 209 | 210 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Comida & Bebida 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 38 | 39 |
40 | 41 |
42 |
43 |

Venha conhecer

44 |

Comida & Bebida

45 |

Aqui você encontra comida caseira, porções, petiscos, bebidas e muito mais

46 |
47 |
48 |
49 | 50 |
51 | 52 |
53 |
54 |

Comida Caseira

55 |
56 |
57 | Imagem de um bife a cavalo (bife e ovo), batatas fritas, arroz e salada. 59 | Imagem de uma bisteca suína com macarrão ao alho e óleo. 61 | Imagem de uma carne de panela. 62 | Imagem de uma carne seca. 63 | Imagem de uma parmegiana de frango com arroz. 65 | Imagem de um omelete com duas rodelas de tomates cortadas ao lado. 67 | Imagem de um macarrão com salsicha. 68 | Imagem de um prato com frango grelhado com arroz e feijão. 70 |
71 |
72 |
73 | 74 |
75 |
76 |
77 |

Porções

78 |
79 |
80 | Imagem de uma porção de frango a passarinho. 82 | Imagem de uma porção de batata. 83 | Imagem de uma porção de calabresa. 84 | Imagem de uma moqueca de cação. 85 |
86 |
87 |
88 | 89 |
90 | 91 |
92 |
93 |

Avaliações

94 |
95 |
96 | Imagem da nota de avaliação - 4.8. 98 | Brenda avaliou o restaurante com nota 5.0 e comentou 'Primeiro pedido de muitos, simplesmente maravilhoso!'. 100 | Felix avaliou o restaurante com nota 5.0 e comentou 'Muito boa'. 102 | Victor avaliou o restaurante com nota 5.0 e comentou 'vale muito a pena.amei'. 104 |
105 |
106 | 107 |
108 | 109 |
110 |
111 |
112 |
113 |

Localização

114 |

Icone de Localização Sorocaba, SP

116 |
Funcionamento
117 |

Todos os dias - 24h

118 |
119 |
120 |
121 |
122 |

Acesse:

123 | Icone do ifood, direciona para a pagina do restaurante Comida & Bebida 126 |
127 |
128 |
129 |
130 | 131 | 137 | 138 | 139 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-size: 62.5%; 9 | scroll-behavior: smooth; 10 | } 11 | 12 | body { 13 | font-family: 'Open Sans', sans-serif; 14 | font-size: 1.9rem; 15 | background-color: var(--white-color); 16 | } 17 | 18 | h1, 19 | h2, 20 | h3, 21 | h4, 22 | h5, 23 | h6 { 24 | font-family: 'Montserrat', sans-serif; 25 | text-transform: uppercase; 26 | } 27 | 28 | h1 { 29 | font-size: 6rem; 30 | } 31 | 32 | h2 { 33 | font-size: 5.5rem; 34 | } 35 | 36 | h3 { 37 | font-size: 5rem; 38 | } 39 | 40 | h4 { 41 | font-size: 4.5rem; 42 | } 43 | 44 | h5 { 45 | font-size: 4rem; 46 | } 47 | 48 | h6 { 49 | font-size: 3.5rem; 50 | } 51 | 52 | a { 53 | text-decoration: none; 54 | } 55 | 56 | .section { 57 | min-height: 100vh; 58 | } 59 | 60 | .logoHome { 61 | height: 6rem; 62 | width: 6rem; 63 | display: block; 64 | margin-top: 0.5rem; 65 | margin-bottom: 0.5rem; 66 | } 67 | 68 | img:hover.logoHome { 69 | background-color: var(--gray-color); 70 | border-radius: 30px; 71 | } 72 | 73 | .menu { 74 | position: fixed; 75 | top: 0; 76 | left: 0; 77 | right: 0; 78 | width: 100%; 79 | z-index: 1; 80 | border-bottom: 0.1rem solid var(--gray-color); 81 | background-color: var(--white-color); 82 | } 83 | 84 | .main-content { 85 | max-width: 140rem; 86 | margin: 0 auto; 87 | padding: var(--gap); 88 | } 89 | 90 | .menu-content { 91 | display: flex; 92 | justify-content: space-between; 93 | align-items: center; 94 | padding-top: 0; 95 | padding-bottom: 0; 96 | } 97 | 98 | .menu ul { 99 | list-style: none; 100 | display: flex; 101 | } 102 | 103 | .menu ul li a { 104 | font-family: 'Montserrat', sans-serif; 105 | font-weight: 700; 106 | display: block; 107 | padding: 2rem; 108 | font-size: 2rem; 109 | color: inherit; 110 | position: relative; 111 | } 112 | 113 | .menu ul li a::after { 114 | content: ''; 115 | position: absolute; 116 | bottom: 1rem; 117 | left: 50%; 118 | width: 0; 119 | height: 0.2rem; 120 | background-color: var(--black-color); 121 | transition: all 300ms ease-in-out; 122 | } 123 | 124 | .menu ul li a:hover { 125 | background-color: var(--gray-color); 126 | border-radius: 30px; 127 | } 128 | 129 | .menu ul li a:hover::after { 130 | width: 50%; 131 | left: 25%; 132 | } 133 | 134 | .menu-spacing { 135 | height: 6rem; 136 | } 137 | 138 | .anchor1-bg { 139 | background-image: url(../img/wallpaper1.jpg); 140 | background-repeat: repeat-x; 141 | animation: bg-animation 20s linear 0s infinite alternate; 142 | } 143 | 144 | @keyframes bg-animation { 145 | 0% { 146 | background-position: 0 0; 147 | } 148 | 149 | 100% { 150 | background-position: 100% 0; 151 | } 152 | } 153 | 154 | .home-content { 155 | display: grid; 156 | grid-template-columns: 1fr; 157 | align-items: center; 158 | gap: var(--gap); 159 | min-height: 100vh; 160 | } 161 | 162 | .home-img { 163 | max-width: 100%; 164 | height: auto; 165 | } 166 | 167 | .home-text-bg { 168 | background-color: var(--white-color); 169 | border-top-left-radius: 13rem; 170 | border-top-right-radius: 1rem; 171 | border-bottom-right-radius: 13rem; 172 | border-bottom-left-radius: 1rem; 173 | box-shadow: 0px 0px 5px 5px var(--black-color); 174 | padding: 2rem; 175 | text-align: center; 176 | display: flex; 177 | flex-direction: column; 178 | align-items: center; 179 | justify-content: center; 180 | } 181 | 182 | .home-text-bg h2 { 183 | color: var(--logo-blue); 184 | text-shadow: 0.5px 0.5px 1px var(--black-color), 0.5px -0.5px 1px var(--black-color), -0.5px 0.5px 1px var(--black-color), -0.5px -0.5px 1px var(--black-color); 185 | } 186 | 187 | .home-text-bg h3 { 188 | color: var(--logo-red); 189 | text-shadow: 0.5px 0.5px 1px var(--black-color), 0.5px -0.5px 1px var(--black-color), -0.5px 0.5px 1px var(--black-color), -0.5px -0.5px 1px var(--black-color); 190 | } 191 | 192 | .comida-h2 { 193 | text-align: center; 194 | color: var(--logo-red); 195 | display: grid; 196 | align-items: center; 197 | gap: var(--gap); 198 | text-shadow: 0.5px 0.5px 1px var(--black-color), 0.5px -0.5px 1px var(--black-color), -0.5px 0.5px 1px var(--black-color), -0.5px -0.5px 1px var(--black-color); 199 | } 200 | 201 | .alinhamento { 202 | display: grid; 203 | gap: var(--gap); 204 | min-height: 100vh; 205 | place-content: center; 206 | } 207 | 208 | .grid-spacing { 209 | padding: 1rem; 210 | width: 100%; 211 | overflow: hidden; 212 | } 213 | 214 | .grid-comida { 215 | display: grid; 216 | grid-template-columns: repeat(4, 1fr); 217 | grid-template-rows: repeat(2, 1fr); 218 | } 219 | 220 | .grid-comida img { 221 | transition: all 300ms ease-in-out; 222 | } 223 | 224 | .grid-comida img:hover { 225 | transform: translate(-3%, 3%) scale(1.2) rotate(5deg); 226 | } 227 | 228 | .grid-spacing-avaliacoes { 229 | margin: 2rem 0rem 0rem 0rem; 230 | width: 100%; 231 | overflow: hidden; 232 | border: -1rem solid var(--white-color); 233 | border-radius: 10px; 234 | box-shadow: 0px 0px 5px 5px var(--darkgray-color); 235 | } 236 | 237 | .grid-spacing-avaliacoes-nota { 238 | text-align: center; 239 | margin: 2rem 0rem 0rem 0rem; 240 | overflow: hidden; 241 | border: -1rem solid var(--white-color); 242 | border-radius: 10px; 243 | box-shadow: 0px 0px 5px 5px var(--darkgray-color); 244 | } 245 | 246 | .avaliacoes-h2 { 247 | text-align: center; 248 | color: var(--logo-red); 249 | display: grid; 250 | align-items: center; 251 | gap: var(--gap); 252 | text-shadow: 0.5px 0.5px 1px var(--black-color), 0.5px -0.5px 1px var(--black-color), -0.5px 0.5px 1px var(--black-color), -0.5px -0.5px 1px var(--black-color); 253 | } 254 | 255 | .grid-avaliacoes { 256 | display: flex; 257 | flex-direction: column; 258 | align-items: center; 259 | justify-content: center; 260 | } 261 | 262 | .grid-porcoes { 263 | display: grid; 264 | grid-template-columns: repeat(4, 1fr); 265 | } 266 | 267 | .grid-porcoes img { 268 | transition: all 300ms ease-in-out; 269 | } 270 | 271 | .bg-lightgray { 272 | background-color: var(--lightgray-color); 273 | } 274 | 275 | .grid-porcoes img:hover { 276 | transform: translate(-3%, 3%) scale(1.2) rotate(5deg); 277 | } 278 | 279 | .sobre-content { 280 | display: grid; 281 | align-items: center; 282 | gap: var(--gap); 283 | min-height: 100vh; 284 | grid-template-columns: 1fr 1fr; 285 | } 286 | 287 | .sobre-content-ajuste { 288 | display: flex; 289 | flex-direction: column; 290 | align-items: center; 291 | justify-content: center; 292 | min-height: 100vh; 293 | } 294 | 295 | 296 | .sobre-text-bg { 297 | background-color: var(--white-color); 298 | border-top-left-radius: 1rem; 299 | border-top-right-radius: 13rem; 300 | border-bottom-right-radius: 1rem; 301 | border-bottom-left-radius: 13rem; 302 | box-shadow: 0px 0px 5px 5px var(--black-color); 303 | padding: 2rem; 304 | text-align: center; 305 | width: 100%; 306 | } 307 | 308 | .sobre-localizacao { 309 | width: 25px; 310 | vertical-align: bottom; 311 | } 312 | 313 | .sobre-espacamento { 314 | margin: 1rem 0; 315 | } 316 | 317 | .sobre-ifood { 318 | width: 105px; 319 | } 320 | 321 | img.sobre-ifood.sobre-espacamento:hover { 322 | transform: scale(1.1); 323 | } 324 | 325 | .footer-cl { 326 | text-align: center; 327 | padding: 1rem 0 1rem 0; 328 | font-family: 'Montserrat', sans-serif; 329 | color: var(--black-color); 330 | 331 | } 332 | 333 | .close-menu { 334 | display: none; 335 | } 336 | 337 | div img.grid-spacing { 338 | border-radius: 30px; 339 | } --------------------------------------------------------------------------------