├── README.md ├── index.html └── src ├── style └── styles.css └── images └── mini-logo-milk.svg /README.md: -------------------------------------------------------------------------------- 1 | # Cardápio da Loja Almond-Milk 2 | ![image](https://github.com/beatrizveloso/almond-milk/assets/156534028/c24d6772-3a45-445e-a141-541f72c8bedf) 3 | ![image](https://github.com/beatrizveloso/almond-milk/assets/156534028/bb9f5104-5c6c-41f5-9f82-b7d342e067e4) 4 | ![image](https://github.com/beatrizveloso/almond-milk/assets/156534028/4c46e7f0-e78f-4f66-a26f-3893994f15eb) 5 | ![image](https://github.com/beatrizveloso/almond-milk/assets/156534028/ae5d04f6-6061-476d-9e07-9e225a468146) 6 | 7 | Quem somos nós? 8 | 9 | • Somos uma loja de milkshakes especializada em leite de amêndoas, destinada a pessoas intolerantes à lactose e veganos, para que todos possam desfrutar de um delicioso milkshake cremoso. 10 | 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Almond Milk 8 | 9 | 10 | 35 | 36 |

37 |

38 |

39 |

40 |

41 | 42 |

De Seg. à Sab.

43 |

44 | 45 |

das 09:00h às 21:00h

46 |

47 |

48 |

Praia do Flamengo, 600

49 |

Rio de Janeiro - RJ

50 |

51 |

52 |

+55 011 0002-0922

53 |

////

54 |

55 |

56 |

57 |

58 |

59 |

60 |

61 |

62 |

63 | 64 | 74 |

75 | 76 | 77 | 87 |

88 | 89 |

90 |

91 |

92 |

93 |

CONTATO

94 |

95 |

96 |

97 | 98 | 118 | 119 | 124 | 125 | 126 |

127 |

128 | 132 | 133 | -------------------------------------------------------------------------------- /src/style/styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.cdnfonts.com/css/pt-mono'); 2 | @import url('https://fonts.cdnfonts.com/css/aref-ruqaa'); 3 | 4 | * { 5 | padding: 0; 6 | margin: 0; 7 | box-sizing: border-box; 8 | } 9 | 10 | body { 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | background-color:#FDE8E1; 15 | border: 10px solid #E6CCCD; 16 | } 17 | 18 | main { 19 | display: flex; 20 | justify-content: space-between; 21 | width: 1000px; 22 | height: 800px; 23 | margin-top: 77px; 24 | } 25 | 26 | span { 27 | display: flex; 28 | align-items: center; 29 | gap: 30px; 30 | } 31 | 32 | p { 33 | font-size: 18px; 34 | color: black; 35 | } 36 | 37 | .marker-green { 38 | width: 12px; 39 | height: 12px; 40 | border-radius: 12px; 41 | background-color: #7CD377; 42 | } 43 | 44 | .time-work { 45 | width: 318px; 46 | height: 82px; 47 | display: flex; 48 | flex-direction: column; 49 | justify-content: center; 50 | border-bottom: 2px solid black; 51 | border-right: 2px solid black; 52 | } 53 | 54 | .text-location { 55 | display: flex; 56 | flex-direction: column; 57 | justify-content: center; 58 | width: 318px; 59 | height: 82px; 60 | border-right: 2px solid black; 61 | } 62 | 63 | .text-decoration { 64 | font-size: 18px; 65 | } 66 | 67 | 68 | .hero-wrapper { 69 | display: flex; 70 | flex-direction: column; 71 | gap: 30px; 72 | } 73 | 74 | .hero-wrapper > img { 75 | width: 200px; 76 | height: 200px; 77 | } 78 | 79 | .hero-wrapper > h1 { 80 | font-size: 200px; 81 | } 82 | 83 | main > img { 84 | width: 600px; 85 | height: 700px; 86 | } 87 | 88 | section { 89 | display: flex; 90 | width: 1000px; 91 | margin-bottom: 100px; 92 | gap: 60px; 93 | } 94 | 95 | .title-section { 96 | height: fit-content; 97 | display: flex; 98 | align-items: center; 99 | gap: 51px; 100 | padding-left: 10px; 101 | } 102 | 103 | .line { 104 | width: 255px; 105 | height: 2px; 106 | background-color: black; 107 | } 108 | 109 | .line-contact { 110 | width: 224px; 111 | } 112 | 113 | article > p, li > p { 114 | font-size: 18px; 115 | font-family: 'PT Mono', sans-serif; 116 | color: black; 117 | height: 14px; 118 | } 119 | 120 | li { 121 | display: flex; 122 | align-items: center; 123 | gap: 10px; 124 | list-style: none; 125 | font-family: 'Aref Ruqaa', sans-serif; 126 | font-size: 18px; 127 | padding-bottom: 12px; 128 | } 129 | 130 | .main-menu > h3 { 131 | font-size: 24px; 132 | font-family: 'Aref Ruqaa', sans-serif; 133 | padding-bottom: 26px; 134 | padding-left: 50px; 135 | color: #624343; 136 | } 137 | 138 | menu { 139 | display: flex; 140 | align-items: flex-start; 141 | justify-content: space-between; 142 | gap: 30px; 143 | width: 100%; 144 | height: 300px; 145 | } 146 | 147 | menu > img { 148 | padding-top: 50px; 149 | } 150 | 151 | img { 152 | transition: transform 0.9s; 153 | } 154 | 155 | img:hover { 156 | transform: scale(1.1); 157 | } 158 | 159 | .contact { 160 | display: flex; 161 | flex-direction: column; 162 | } 163 | 164 | form { 165 | width: 600px; 166 | display: flex; 167 | flex-direction: column; 168 | } 169 | 170 | form > div { 171 | display: flex; 172 | width: 100%; 173 | gap: 20px; 174 | } 175 | 176 | div > .column { 177 | display: flex; 178 | flex-grow: 1; 179 | } 180 | 181 | div > .column:last-child { 182 | width: 110px; 183 | } 184 | 185 | .column { 186 | display: flex; 187 | flex-direction: column; 188 | } 189 | 190 | input { 191 | height: 40px; 192 | border: 3px solid #C29A9B; 193 | background-color: transparent; 194 | width: 100%; 195 | } 196 | 197 | textarea { 198 | border: 3px solid #C29A9B; 199 | background-color: transparent; 200 | } 201 | 202 | button { 203 | width: 200px; 204 | height: 40px; 205 | background-color: transparent; 206 | border: 3px solid #C29A9B; 207 | color: #C29A9B; 208 | font-size: 18px; 209 | box-shadow: 5px 5px 0px -2px #e8bcbc, 5px 5px 0px #C29A9B; 210 | } 211 | 212 | label { 213 | line-height: 30px; 214 | } 215 | 216 | form > div:last-child { 217 | display: flex; 218 | justify-content: space-between; 219 | margin-top: 21px; 220 | } 221 | 222 | iframe { 223 | width: 100%; 224 | height: 100%; 225 | } 226 | 227 | map { 228 | height: 226px; 229 | box-shadow: 0px 0px 0px 10px #dab6b7; 230 | margin-top: 60px; 231 | } 232 | 233 | footer { 234 | display: flex; 235 | justify-content: space-around; 236 | width: 100%; 237 | height: 70px; 238 | background-color: #624343; 239 | font-size: 18px; 240 | align-items: center; 241 | box-shadow: 0px 0px 0px 10px #624343; 242 | } 243 | 244 | footer > p { 245 | font-size: 16px; 246 | } 247 | 248 | @media (max-width: 520px) { 249 | 250 | 251 | main { 252 | flex-direction: column; 253 | justify-content: center; 254 | align-items: center; 255 | width: 100%; 256 | height: auto; 257 | } 258 | 259 | main > img { 260 | display: none; 261 | } 262 | 263 | 264 | .hero-wrapper > img { 265 | align-self: center; 266 | } 267 | 268 | .hero-wrapper :nth-child(4) { 269 | font-size: 100px; 270 | } 271 | 272 | section { 273 | margin-top: 50px; 274 | flex-direction: column; 275 | width: 100%; 276 | height: auto; 277 | } 278 | 279 | menu { 280 | justify-content: center; 281 | align-items: center; 282 | } 283 | 284 | menu > img { 285 | display: none; 286 | } 287 | 288 | body { 289 | gap: 80px; 290 | } 291 | 292 | .menu { 293 | display: flex; 294 | flex-direction: column; 295 | gap: 30px; 296 | } 297 | 298 | form { 299 | width: 100%; 300 | padding: 15px; 301 | } 302 | 303 | form :nth-child(3){ 304 | display: flex; 305 | flex-direction: column; 306 | } 307 | 308 | map { 309 | width: 90%; 310 | align-self: center; 311 | } 312 | } 313 | 314 | -------------------------------------------------------------------------------- /src/images/mini-logo-milk.svg: -------------------------------------------------------------------------------- 1 | 10 | --------------------------------------------------------------------------------

////

Sabores Clássicos

Sabores Especiais