├── .gitignore ├── 10_exacttime ├── css │ └── styles.css ├── img │ ├── banner1.jpg │ ├── banner2.jpg │ ├── banner3.jpg │ ├── banner4.jpg │ ├── favicon.ico │ ├── insta1.jpg │ ├── insta2.jpg │ ├── insta3.jpg │ ├── insta4.jpg │ ├── insta5.jpg │ ├── insta6.jpg │ ├── relogio1.png │ ├── relogio2.png │ ├── relogio3.png │ ├── relogio4.png │ ├── relogio5.png │ ├── relogio6.png │ ├── relogio7.png │ └── relogio8.png └── index.html ├── 11_helpers ├── css │ └── styles.css └── index.html ├── 12_utilities ├── css │ └── styles.css └── index.html ├── 13_imovi ├── css │ └── styles.css ├── img │ ├── banner-1.jpg │ ├── banner-2.jpg │ ├── banner-3.jpg │ ├── favicon.ico │ ├── imovi-icon.png │ ├── infobanner.jpg │ ├── project-1.jpg │ ├── project-2.jpg │ ├── project-3.jpg │ ├── project-4.jpg │ ├── project-5.jpg │ └── project-6.jpg └── index.html ├── 14_projeto_agencia_html_css ├── css │ ├── reset.css │ └── styles.css ├── img │ ├── capa.jpg │ ├── capa2.jpg │ └── rodape.jpg └── index.html ├── 1_intro └── 1_instalacao_cdn │ └── index.html ├── 2_primeiros_passos ├── 1_instalacao_arquivos │ ├── css │ │ └── bootstrap.css │ ├── index.html │ └── js │ │ └── bootstrap.js └── 2_instalacao_npm │ ├── index.html │ ├── package-lock.json │ └── package.json ├── 3_layout ├── 1_aulas │ ├── css │ │ └── styles.css │ └── index.html └── 2_tarefa │ ├── css │ └── styles.css │ └── index.html ├── 4_icones ├── 1_aulas │ ├── css │ │ └── styles.css │ └── index.html └── 2_tarefa │ ├── css │ └── styles.css │ └── index.html ├── 5_art ├── css │ └── styles.css ├── img │ ├── art_logo.svg │ ├── favicon.ico │ ├── g_1.jpg │ ├── g_2.jpg │ ├── g_3.jpg │ ├── g_4.jpg │ ├── g_5.jpg │ └── g_6.jpg └── index.html ├── 6_conteudo ├── 1_aulas │ ├── css │ │ └── styles.css │ ├── img │ │ ├── avatar.png │ │ └── g_1.jpg │ └── index.html └── 2_tarefa │ ├── css │ └── styles.css │ ├── img │ └── paisagem.jpg │ └── index.html ├── 7_forms ├── 1_aulas │ ├── css │ │ └── styles.css │ └── index.html ├── 2_validacoes │ ├── css │ │ └── styles.css │ ├── index.html │ └── js │ │ └── scripts.js └── 3_tarefa │ ├── css │ └── styles.css │ └── index.html ├── 8_projeto_com_forms ├── css │ └── styles.css ├── img │ ├── hello.svg │ └── sign_in.svg ├── login.html └── register.html └── 9_componentes ├── 1_aulas ├── css │ └── styles.css └── index.html ├── 2_aulas ├── css │ └── styles.css ├── index.html └── js │ └── scripts.js └── 3_tarefa ├── css └── styles.css ├── img ├── img_1.jpg ├── img_2.jpg └── img_3.jpg ├── index.html └── js └── scripts.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /10_exacttime/css/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: 'Montserrat', sans-serif; 3 | } 4 | 5 | body { 6 | background-color: #252525; 7 | color: #FFF; 8 | } 9 | 10 | .primary-bg-color { 11 | background-color: #252525; 12 | } 13 | 14 | .secondary-bg-color { 15 | background-color: #C09578; 16 | } 17 | 18 | .light-bg-color { 19 | background-color: #FCF5EB 20 | } 21 | 22 | .dark-bg-color { 23 | background-color: #101010; 24 | } 25 | 26 | .primary-color { 27 | color: #C09578; 28 | } 29 | 30 | .secondary-color { 31 | color: #626262; 32 | } 33 | 34 | .light-color { 35 | color: #FCF5EB 36 | } 37 | 38 | /* NAVBAR */ 39 | #navbar .navbar-nav { 40 | flex-direction: row; 41 | justify-content: flex-end; 42 | } 43 | 44 | #navbar .navbar-nav li { 45 | margin-left: 1em; 46 | } 47 | 48 | #navbar a, 49 | #navbar button { 50 | color: #FFF; 51 | } 52 | 53 | #navbar li { 54 | position: relative; 55 | } 56 | 57 | #navbar i { 58 | font-size: 20px; 59 | } 60 | 61 | #navbar span { 62 | position: absolute; 63 | top: -8px; 64 | right: -8px; 65 | width: 20px; 66 | height: 20px; 67 | border-radius: 50%; 68 | background-color: #EF3636; 69 | text-align: center; 70 | } 71 | 72 | #bag-item span { 73 | left: 20px; 74 | } 75 | 76 | .navbar-brand { 77 | font-weight: 700; 78 | width: 100%; 79 | text-align: center; 80 | } 81 | 82 | @media(min-width: 768px) { 83 | .navbar-brand { 84 | text-align: left; 85 | } 86 | } 87 | 88 | #navbar-items { 89 | justify-content: space-between; 90 | } 91 | 92 | @media(min-width: 768px) { 93 | #navbar-items { 94 | display: flex; 95 | min-width: 80%; 96 | } 97 | } 98 | 99 | #search-form, 100 | #news-form { 101 | width: 100%; 102 | margin: 2em 0; 103 | } 104 | 105 | @media(min-width: 768px) { 106 | #search-form, 107 | #news-form { 108 | width: 50%; 109 | margin: 0; 110 | } 111 | } 112 | 113 | #search-form, 114 | #news-form { 115 | border: 2px solid #626262; 116 | border-radius: 3px; 117 | padding: 5px 15px; 118 | } 119 | 120 | #search-form input, 121 | #news-form input { 122 | background-color: transparent; 123 | border: none; 124 | color: #FFF; 125 | } 126 | 127 | #search-form input:focus, 128 | #news-form input:focus { 129 | box-shadow: none; 130 | } 131 | 132 | #search-form input::placeholder, 133 | #news-form input::placeholder { 134 | color: #FFF; 135 | } 136 | 137 | /* BOTTOM NAVBAR */ 138 | #bottom-navbar-container .container { 139 | justify-content: flex-end; 140 | } 141 | 142 | #bottom-navbar-container a { 143 | color: #FFF; 144 | font-weight: 600; 145 | } 146 | 147 | .navbar-toggler { 148 | font-size: 1.5em; 149 | } 150 | 151 | /* BANNERS */ 152 | #banners-container { 153 | padding: 0; 154 | } 155 | 156 | .carousel-caption { 157 | bottom: 5em; 158 | padding: 1em; 159 | left: 12%; 160 | right: 12%; 161 | } 162 | 163 | .carousel-caption h5 { 164 | font-size: 1.8em; 165 | } 166 | 167 | @media(min-width: 768px) { 168 | #slider .carousel-item, 169 | #slider img { 170 | height: 600px; 171 | } 172 | 173 | .carousel-caption { 174 | left: 23%; 175 | right: 23%; 176 | } 177 | 178 | .carousel-caption h5 { 179 | font-size: 4em; 180 | } 181 | } 182 | 183 | /* MINI BANNERS */ 184 | #mini-banners { 185 | margin-top: -3em; 186 | z-index: 10; 187 | } 188 | 189 | #mini-banners .col-12 { 190 | z-index: 1; 191 | height: 300px; 192 | padding: 1.5em; 193 | position: relative; 194 | display: flex; 195 | flex-direction: column; 196 | justify-content: space-between; 197 | } 198 | 199 | @media(min-width: 768px) { 200 | #mini-banners .col-12 { 201 | max-width: 30%; 202 | } 203 | } 204 | 205 | #mini-banners .col-12 h2 { 206 | text-transform: uppercase; 207 | max-width: 50px; 208 | font-size: 2.2em; 209 | font-weight: 700; 210 | line-height: 1em; 211 | } 212 | 213 | #mini-banners .col-12 img { 214 | height: 220px; 215 | position: absolute; 216 | right: 1rem; 217 | bottom: 1rem; 218 | } 219 | 220 | #mini-banners .col-12 a { 221 | font-weight: bold; 222 | color: #FFF; 223 | font-size: .8rem; 224 | transition: .5s; 225 | } 226 | 227 | #mini-banners .col-12 a:hover { 228 | color: #101010; 229 | } 230 | 231 | #mini-banners #mini-banner-1 a:hover { 232 | color: #C09578; 233 | } 234 | 235 | #mini-banners #mini-banner-3 a { 236 | color: #101010; 237 | } 238 | 239 | #mini-banners #mini-banner-3 a:hover { 240 | color: #C09578; 241 | } 242 | 243 | /* BEST SELLERS */ 244 | #best-sellers { 245 | padding: 4em 0; 246 | } 247 | 248 | #best-sellers .row { 249 | margin: 0; 250 | } 251 | 252 | #best-sellers .col-md-3 { 253 | padding: 0; 254 | } 255 | 256 | .title { 257 | text-transform: uppercase; 258 | font-weight: 900; 259 | font-size: 2.5em; 260 | margin-bottom: 1em; 261 | text-align: center; 262 | } 263 | 264 | @media(min-width: 768px) { 265 | .title { 266 | text-align: left; 267 | } 268 | } 269 | 270 | .card { 271 | text-align: center; 272 | border-radius: 0; 273 | } 274 | 275 | .card img { 276 | width: 140px; 277 | margin: 2em auto; 278 | } 279 | 280 | .card .card-category { 281 | font-size: .8rem; 282 | } 283 | 284 | .card .card-text { 285 | margin: 2em 0; 286 | font-weight: bold; 287 | } 288 | 289 | .btn { 290 | background-color: transparent; 291 | border-color: #C09578; 292 | } 293 | 294 | .btn:hover { 295 | background-color: #C09578; 296 | border-color: #C09578; 297 | } 298 | 299 | /* BOTTOM BANNER */ 300 | #bottom-banner { 301 | background-color: #101010; 302 | padding: 6em; 303 | margin-bottom: 4em; 304 | text-align: center; 305 | } 306 | 307 | #bottom-banner .offer-subtitle, 308 | #bottom-banner h2 { 309 | text-transform: uppercase; 310 | font-weight: bold; 311 | } 312 | 313 | #bottom-banner .btn { 314 | margin: 2em; 315 | font-weight: bold; 316 | padding: 1em; 317 | } 318 | 319 | #bottom-banner img { 320 | max-width: 175px; 321 | } 322 | 323 | @media(min-width: 768px) { 324 | #bottom-banner h2 { 325 | font-size: 6em; 326 | } 327 | } 328 | 329 | /* NEW PRODUCTS */ 330 | 331 | #new-products { 332 | margin-bottom: 5rem; 333 | } 334 | 335 | #new-products-banner { 336 | display: flex; 337 | flex-direction: column; 338 | justify-content: center; 339 | align-items: center; 340 | background-color: #101010; 341 | } 342 | 343 | #new-products-banner h3 { 344 | text-transform: uppercase; 345 | font-weight: bold; 346 | margin-bottom: 1rem; 347 | font-size: 2.5rem; 348 | } 349 | 350 | #new-products .col-md-4 { 351 | padding: 0; 352 | } 353 | 354 | #new-products .card img { 355 | height: 150px; 356 | width: 90px; 357 | margin: 2em auto; 358 | } 359 | 360 | /* GALLERY */ 361 | #gallery .image-container { 362 | background-size: cover; 363 | background-position: center; 364 | height: 225px; 365 | cursor: pointer; 366 | transition: .5s; 367 | border: 3px solid #101010; 368 | } 369 | 370 | #gallery .image-container:hover { 371 | border-color: #C09578; 372 | } 373 | 374 | #insta1 { 375 | background-image: url('../img/insta1.jpg'); 376 | } 377 | 378 | #insta2 { 379 | background-image: url('../img/insta2.jpg'); 380 | } 381 | 382 | #insta3 { 383 | background-image: url('../img/insta3.jpg'); 384 | } 385 | 386 | #insta4 { 387 | background-image: url('../img/insta4.jpg'); 388 | } 389 | 390 | #insta5 { 391 | background-image: url('../img/insta5.jpg'); 392 | } 393 | 394 | #insta6 { 395 | background-image: url('../img/insta6.jpg'); 396 | } 397 | 398 | /* FOOTER */ 399 | #footer-links-container { 400 | border-bottom: 1px solid #626262; 401 | } 402 | 403 | #footer .footer-column { 404 | padding: 2em; 405 | flex-direction: column; 406 | align-items: center; 407 | justify-content: center; 408 | text-align: center; 409 | } 410 | 411 | @media(mn-width: 795px) { 412 | #footer .footer-column { 413 | padding: 5em 2em; 414 | } 415 | } 416 | 417 | #footer-links-container h3 { 418 | margin-bottom: 25px; 419 | text-transform: uppercase; 420 | } 421 | 422 | #footer-links-container li { 423 | font-size: .8em; 424 | text-align: center; 425 | } 426 | 427 | @media(mn-width: 795px) { 428 | #footer-links-container li { 429 | text-align: left; 430 | } 431 | } 432 | 433 | #footer-links-container li a { 434 | text-decoration: none; 435 | } 436 | 437 | #footer-links-container li a:hover { 438 | color: #C09578; 439 | } 440 | 441 | #footer-center { 442 | border-left: 1px solid #626262; 443 | border-right: 1px solid #626262; 444 | } 445 | 446 | #footer-center h3 { 447 | font-weight: 900; 448 | } 449 | 450 | #footer-center .store-phone { 451 | color: #C09578; 452 | font-weight: bold; 453 | font-size: 2rem; 454 | margin-top: -15px; 455 | } 456 | 457 | /* NEWS */ 458 | #newsletter-container { 459 | background-color: #101010; 460 | border-bottom: 1px solid #626262; 461 | text-align: center; 462 | padding: 20px; 463 | } 464 | 465 | #news-form { 466 | max-width: 600px; 467 | margin: 15px auto; 468 | } 469 | 470 | #news-form i { 471 | font-size: 1.5em; 472 | } 473 | 474 | #news-form .btn { 475 | color: #FFF; 476 | } 477 | 478 | #social-container { 479 | margin: 20px auto; 480 | } 481 | 482 | #social-container i { 483 | font-size: 1.5em; 484 | margin: 10px; 485 | cursor: pointer; 486 | color: #626262; 487 | transition: .3s; 488 | } 489 | 490 | #social-container i:hover { 491 | color: #C09578; 492 | } 493 | 494 | /* COPY */ 495 | #copy-container { 496 | text-align: center; 497 | padding: 30px; 498 | } -------------------------------------------------------------------------------- /10_exacttime/img/banner1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/10_exacttime/img/banner1.jpg -------------------------------------------------------------------------------- /10_exacttime/img/banner2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/10_exacttime/img/banner2.jpg -------------------------------------------------------------------------------- /10_exacttime/img/banner3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/10_exacttime/img/banner3.jpg -------------------------------------------------------------------------------- /10_exacttime/img/banner4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/10_exacttime/img/banner4.jpg -------------------------------------------------------------------------------- /10_exacttime/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/10_exacttime/img/favicon.ico -------------------------------------------------------------------------------- /10_exacttime/img/insta1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/10_exacttime/img/insta1.jpg -------------------------------------------------------------------------------- /10_exacttime/img/insta2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/10_exacttime/img/insta2.jpg -------------------------------------------------------------------------------- /10_exacttime/img/insta3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/10_exacttime/img/insta3.jpg -------------------------------------------------------------------------------- /10_exacttime/img/insta4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/10_exacttime/img/insta4.jpg -------------------------------------------------------------------------------- /10_exacttime/img/insta5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/10_exacttime/img/insta5.jpg -------------------------------------------------------------------------------- /10_exacttime/img/insta6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/10_exacttime/img/insta6.jpg -------------------------------------------------------------------------------- /10_exacttime/img/relogio1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/10_exacttime/img/relogio1.png -------------------------------------------------------------------------------- /10_exacttime/img/relogio2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/10_exacttime/img/relogio2.png -------------------------------------------------------------------------------- /10_exacttime/img/relogio3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/10_exacttime/img/relogio3.png -------------------------------------------------------------------------------- /10_exacttime/img/relogio4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/10_exacttime/img/relogio4.png -------------------------------------------------------------------------------- /10_exacttime/img/relogio5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/10_exacttime/img/relogio5.png -------------------------------------------------------------------------------- /10_exacttime/img/relogio6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/10_exacttime/img/relogio6.png -------------------------------------------------------------------------------- /10_exacttime/img/relogio7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/10_exacttime/img/relogio7.png -------------------------------------------------------------------------------- /10_exacttime/img/relogio8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/10_exacttime/img/relogio8.png -------------------------------------------------------------------------------- /10_exacttime/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ExactTime 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 58 | 92 | 93 | 94 |
95 | 121 | 122 |
123 |
124 |
125 |

Nova Coleção

126 | Relógio 1 127 | Compre Agora 128 |
129 |
130 |

Promoções

131 | Relógio 1 132 | Compre Agora 133 |
134 |
135 |

Edição Limitada

136 | Compre Agora 137 | Relógio 1 138 |
139 |
140 |
141 |
142 | 143 |
144 |

Best Sellers

145 |
146 |
147 |
148 | Relógio 149 |
150 |

Relógio

151 |
Nome do produto
152 |

R$177.63

153 | Comprar 154 |
155 |
156 |
157 |
158 |
159 | Relógio 160 |
161 |

Relógio

162 |
Nome do produto
163 |

R$177.63

164 | Comprar 165 |
166 |
167 |
168 |
169 |
170 | Relógio 171 |
172 |

Relógio

173 |
Nome do produto
174 |

R$177.63

175 | Comprar 176 |
177 |
178 |
179 |
180 |
181 | Relógio 182 |
183 |

Relógio

184 |
Nome do produto
185 |

R$177.63

186 | Comprar 187 |
188 |
189 |
190 |
191 |
192 | 193 |
194 |
195 |
196 |

Desconto de até 75%

197 |

Relógio X

198 |

Presenteie o seu amor com este relógio luxuoso

199 | Comprar agora 200 |
201 |
202 | Relógio 7 203 |
204 |
205 |
206 | 207 |
208 |

Novidades

209 |
210 |
211 |

Os melhores

212 |

Relógios

213 |

pelos melhores preços

214 |
215 |
216 |
217 |
218 |
219 | Relógio 220 |
221 |

Relógio

222 |
Nome do produto
223 |

R$177.63

224 | Comprar 225 |
226 |
227 |
228 |
229 |
230 | Relógio 231 |
232 |

Relógio

233 |
Nome do produto
234 |

R$177.63

235 | Comprar 236 |
237 |
238 |
239 |
240 |
241 | Relógio 242 |
243 |

Relógio

244 |
Nome do produto
245 |

R$177.63

246 | Comprar 247 |
248 |
249 |
250 |
251 |
252 | Relógio 253 |
254 |

Relógio

255 |
Nome do produto
256 |

R$177.63

257 | Comprar 258 |
259 |
260 |
261 |
262 |
263 | Relógio 264 |
265 |

Relógio

266 |
Nome do produto
267 |

R$177.63

268 | Comprar 269 |
270 |
271 |
272 |
273 |
274 | Relógio 275 |
276 |

Relógio

277 |
Nome do produto
278 |

R$177.63

279 | Comprar 280 |
281 |
282 |
283 |
284 |
285 |
286 |
287 | 288 | 304 | 305 | 354 | 355 | -------------------------------------------------------------------------------- /11_helpers/css/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-bottom: 1000px; 3 | } 4 | 5 | .box { 6 | background-color: red; 7 | height: 50px; 8 | } 9 | 10 | .box.float-end{ 11 | background-color: blue; 12 | width: 50px; 13 | } 14 | 15 | .box-fixed, 16 | .box-sticky { 17 | width: 100px; 18 | height: 100px; 19 | background-color: green; 20 | } 21 | 22 | .box-sticky { 23 | background-color: teal; 24 | } -------------------------------------------------------------------------------- /11_helpers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Helpers 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 | 24 | 25 |
26 |
27 | 28 | 29 |
30 | Link azul 31 | 32 | Link verde 33 | Link vermelho 34 |
35 | 36 | 37 |
38 |
39 |
40 | 41 |
42 |
43 | 44 |
45 | 46 |
47 |
48 | 49 | 50 |
51 | 52 | 53 | 54 |

Aparece quando tem foco.

55 | 56 | 57 |
58 |
59 | 60 |
61 |
Produto legal
62 |

Não perca o valor promocional.

63 | Comprar 64 |
65 |
66 |
67 | 68 | 69 |
70 |
71 | Este texto é muito grande, infelizmente precisamos resumir para caber na página. 72 |
73 |
74 | 75 |
76 |
77 | Este texto é muito grande, infelizmente precisamos resumir para caber na página. 78 |
79 |
80 | 81 | 82 | -------------------------------------------------------------------------------- /12_utilities/css/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-bottom: 1000px; 3 | } 4 | 5 | .col-12 { 6 | height: 50px; 7 | } 8 | 9 | .altura { 10 | height: 300px; 11 | } 12 | 13 | .box { 14 | border: 1px solid red; 15 | } 16 | 17 | .box-com-wrap { 18 | width: 50px; 19 | border: 1px solid red; 20 | } 21 | -------------------------------------------------------------------------------- /12_utilities/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | 15 | 16 | Utilities 17 | 18 | 19 |
20 | 21 |
22 |
23 |

Algum conteúdo

24 |
25 |
26 | 27 |
28 |
29 |

Algum conteúdo

30 |
31 |
32 | 33 | 34 |
35 | 36 |
37 | 38 |
41 | 42 |
45 | 46 | 47 |

Testando

48 |

Testando com bg

49 |

E agora, como fica?

50 | 51 | 52 |
Esconder
53 | Em bloco 54 |
Inline
55 |
Inline
56 |
Inline
57 | 58 | 59 |
60 |
1
61 |
2
62 |
3
63 |
64 | 65 |
66 |
1
67 |
2
68 |
3
69 |
70 | 71 | 72 |

Selecionar tudo!

73 |

Não pode selecionar!

74 | 75 |

76 | Você não pode clicar 77 | neste link 78 |

79 | 80 | 81 |
sombra pequena
82 |
sombra pequena
83 |
sombra pequena
84 | 85 | 86 |
a
87 |
b
88 |
c
89 |
d
90 | 91 |
92 |
93 |
a
94 |
b
95 |
c
96 |
d
97 |
98 |
99 | 100 | 101 |
0
102 |
2
103 |
4
104 |
top 5
105 |
left 2 bottom 4
106 | 107 | 108 |

Texto ao centro

109 |
110 | Texto passando da caixa por causa do wrapping 111 |
112 |

Texto em caixa alta

113 |

Aumentando a font-size

114 |

Em negrito

115 |

Em itálico

116 |
117 | 118 | 119 | -------------------------------------------------------------------------------- /13_imovi/css/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: 'Lato', sans-serif; 3 | } 4 | 5 | .bg-primary-color { 6 | background-color: #fff; 7 | } 8 | 9 | .bg-secondary-color { 10 | background-color: #ece8e2; 11 | } 12 | 13 | .bg-dark-color { 14 | background-color: #050505; 15 | } 16 | 17 | .primary-color { 18 | color: #050505; 19 | } 20 | 21 | .secondary-color { 22 | color: #7a7a7a; 23 | } 24 | 25 | /* NAVBAR */ 26 | #navbar { 27 | border-bottom: 1px solid #7a7a7a; 28 | } 29 | 30 | #navbar a { 31 | color: #050505; 32 | } 33 | 34 | #navbar a:hover { 35 | color: #7a7a7a; 36 | } 37 | 38 | #navbar .active { 39 | border-bottom: 1px solid #050505; 40 | } 41 | 42 | .navbar-brand { 43 | display: flex; 44 | } 45 | 46 | .navbar-brand img { 47 | width: 40px; 48 | } 49 | 50 | .navbar-brand span { 51 | font-weight: 700; 52 | font-size: 1.5em; 53 | margin-left: 0.5em; 54 | } 55 | 56 | #navbar-items .navbar-nav { 57 | display: flex; 58 | justify-content: center; 59 | width: 100%; 60 | } 61 | 62 | #navbar-items .nav-item { 63 | margin: 0 1em; 64 | } 65 | 66 | /* SLIDER */ 67 | #slider { 68 | margin-top: 8em; 69 | margin-bottom: 1em; 70 | } 71 | 72 | #slider .carousel-caption { 73 | bottom: 3em; 74 | } 75 | 76 | #slider .carousel-caption h5 { 77 | font-size: 2.5em; 78 | text-shadow: #000 2px 2px; 79 | } 80 | 81 | .btn { 82 | border-radius: 0; 83 | } 84 | 85 | #slider .btn { 86 | padding: 0.3em 0.8em; 87 | font-size: 1em; 88 | margin-top: 1em; 89 | } 90 | 91 | .carousel-control-prev, 92 | .carousel-control-next { 93 | opacity: 0.7; 94 | } 95 | 96 | .carousel-control-prev i, 97 | .carousel-control-next i { 98 | color: #111; 99 | font-size: 3em; 100 | } 101 | 102 | .carousel-indicators [data-bs-target] { 103 | background-color: #222; 104 | opacity: 0.8; 105 | } 106 | 107 | .carousel-indicators .active { 108 | background-color: #000; 109 | } 110 | 111 | @media (min-width: 768px) { 112 | #slider .carousel-caption { 113 | bottom: 15em; 114 | } 115 | #slider .carousel-caption h5 { 116 | font-size: 4em; 117 | text-shadow: #000 2px 3px; 118 | } 119 | #slider .btn { 120 | padding: 0.6em 1.6em; 121 | font-size: 1.2em; 122 | margin-top: 1em; 123 | } 124 | .carousel-indicators { 125 | bottom: 7em; 126 | } 127 | } 128 | 129 | /* MINI BANNERS */ 130 | #mini-banners { 131 | margin-bottom: 4em; 132 | } 133 | 134 | #mini-banners .card { 135 | padding: 2em 0.3em; 136 | border-radius: 0; 137 | } 138 | 139 | #mini-banners i { 140 | font-size: 4em; 141 | } 142 | 143 | #mini-banners .card-title { 144 | margin-bottom: 1.5em; 145 | } 146 | 147 | #mini-banners .btn { 148 | margin-top: 1.5em; 149 | padding: 0.6em 1.2em; 150 | } 151 | 152 | #mini-banners .card { 153 | margin-bottom: 1em; 154 | } 155 | 156 | @media (min-width: 768px) { 157 | #mini-banners { 158 | margin-top: -6em; 159 | } 160 | } 161 | 162 | /* DESTAQUES */ 163 | #featured-container { 164 | margin-bottom: 4em; 165 | } 166 | 167 | .title { 168 | font-size: 1.75em; 169 | margin-bottom: 0.4em; 170 | position: relative; 171 | } 172 | 173 | .title:before { 174 | width: 75px; 175 | border-top: 4px solid #7a7a7a; 176 | content: ''; 177 | position: absolute; 178 | bottom: 2em; 179 | } 180 | 181 | #featured-images { 182 | margin-top: 2em; 183 | } 184 | 185 | #featured-images .col-md-4 { 186 | position: relative; 187 | cursor: pointer; 188 | } 189 | 190 | #featured-images .col-md-4:hover > .banner-content { 191 | opacity: 0.8; 192 | } 193 | 194 | #featured-images .banner-content { 195 | position: absolute; 196 | top: 0; 197 | left: 0; 198 | height: 100%; 199 | width: 100%; 200 | background-color: #fff; 201 | display: flex; 202 | align-items: center; 203 | justify-content: center; 204 | flex-direction: column; 205 | opacity: 0.6; 206 | transition: 0.5s; 207 | } 208 | 209 | @media (min-width: 768px) { 210 | .title { 211 | font-size: 2.4em; 212 | } 213 | 214 | .title:before { 215 | bottom: 1.5em; 216 | } 217 | 218 | #featured-images .banner-content { 219 | opacity: 0; 220 | } 221 | } 222 | 223 | /* INFO */ 224 | #info-content { 225 | margin-bottom: 4em; 226 | padding: 4em 1em; 227 | } 228 | 229 | #info-numbers { 230 | margin: 1.5em 0; 231 | } 232 | 233 | #info-banner { 234 | align-items: center; 235 | display: flex; 236 | margin-bottom: 2.5em; 237 | } 238 | 239 | #info-numbers h3 { 240 | font-size: 3em; 241 | } 242 | 243 | @media (min-width: 768px) { 244 | #info-content { 245 | padding: 3.5em; 246 | } 247 | } 248 | 249 | /* FOOTER TOP */ 250 | #footer { 251 | padding: 3em 2em; 252 | } 253 | 254 | #footer-top { 255 | margin-bottom: 2em; 256 | } 257 | 258 | #footer-top, 259 | #footer-top i { 260 | color: #fff; 261 | } 262 | 263 | #social-icons { 264 | text-align: right; 265 | } 266 | 267 | #social-icons i { 268 | margin-right: 1em; 269 | font-size: 1.5em; 270 | cursor: pointer; 271 | } 272 | 273 | #social-icons i:hover { 274 | color: #7a7a7a; 275 | } 276 | 277 | /* FOOTER DETAILS */ 278 | #footer-details { 279 | margin-bottom: 3em; 280 | } 281 | 282 | #news-container, 283 | #contact-container, 284 | #links-container { 285 | padding: 0; 286 | border: 0; 287 | margin-bottom: 2em; 288 | } 289 | 290 | #footer-details h4 { 291 | color: #fff; 292 | margin-bottom: 1.5em; 293 | } 294 | 295 | #news-container input { 296 | border-radius: 0; 297 | border: none; 298 | } 299 | 300 | #links-container li { 301 | margin-bottom: 0.5em; 302 | } 303 | 304 | #links-container a { 305 | text-decoration: none; 306 | } 307 | 308 | #links-container a:hover { 309 | color: #fff; 310 | } 311 | 312 | /* FOOTER BOTTOM */ 313 | #footer-bottom { 314 | border-top: 1px solid #7a7a7a; 315 | padding-top: 2em; 316 | } 317 | 318 | #footer-bottom i { 319 | color: #e61e10; 320 | } 321 | 322 | @media (min-width: 768px) { 323 | #news-container { 324 | padding-right: 2em; 325 | } 326 | 327 | #contact-container { 328 | padding: 0 2em; 329 | border-left: 1px solid #7a7a7a; 330 | border-right: 1px solid #7a7a7a; 331 | } 332 | 333 | #links-container { 334 | padding-left: 2em; 335 | } 336 | } 337 | -------------------------------------------------------------------------------- /13_imovi/img/banner-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/13_imovi/img/banner-1.jpg -------------------------------------------------------------------------------- /13_imovi/img/banner-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/13_imovi/img/banner-2.jpg -------------------------------------------------------------------------------- /13_imovi/img/banner-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/13_imovi/img/banner-3.jpg -------------------------------------------------------------------------------- /13_imovi/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/13_imovi/img/favicon.ico -------------------------------------------------------------------------------- /13_imovi/img/imovi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/13_imovi/img/imovi-icon.png -------------------------------------------------------------------------------- /13_imovi/img/infobanner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/13_imovi/img/infobanner.jpg -------------------------------------------------------------------------------- /13_imovi/img/project-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/13_imovi/img/project-1.jpg -------------------------------------------------------------------------------- /13_imovi/img/project-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/13_imovi/img/project-2.jpg -------------------------------------------------------------------------------- /13_imovi/img/project-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/13_imovi/img/project-3.jpg -------------------------------------------------------------------------------- /13_imovi/img/project-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/13_imovi/img/project-4.jpg -------------------------------------------------------------------------------- /13_imovi/img/project-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/13_imovi/img/project-5.jpg -------------------------------------------------------------------------------- /13_imovi/img/project-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/13_imovi/img/project-6.jpg -------------------------------------------------------------------------------- /13_imovi/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | iMovi 8 | 9 | 10 | 11 | 12 | 16 | 17 | 23 | 24 | 28 | 29 | 30 | 31 | 36 | 37 | 38 | 39 | 74 | 75 |
76 | 141 |
142 |
143 |
144 |
145 | 146 |
147 |
Projetos completos
148 |

149 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 150 |

151 | Saber Mais 152 |
153 |
154 |
155 |
156 |
157 | 158 |
159 |
Você participa também
160 |

161 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 162 |

163 | Saber Mais 164 |
165 |
166 |
167 |
168 |
169 | 170 |
171 |
172 | Adiantamento de entregas 173 |
174 |

175 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 176 |

177 | Saber Mais 178 |
179 |
180 |
181 |
182 |
183 |
184 | 185 | 239 | 240 |
241 |
242 |

Detalhes Importantes

243 |

244 | Saiba mais sobre a experiência da nossa incrível equipe 245 |

246 |
247 |
248 |
249 |
250 | Informações 251 |
252 |
253 |
254 |
255 |

Estes dados fazem a diferença:

256 |

257 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. 258 | Praesentium tempore fugit et iusto quisquam beatae impedit 259 | nobis quas doloribus, atque, ut id similique eligendi, ab 260 | soluta magnam maxime cum debitis. 261 |

262 |
263 |
264 |
265 |
266 |

18

267 |

Anos na construção civil

268 |
269 |
270 |

95

271 |

Projetos executados

272 |
273 |
274 |

639

275 |

Clientes

276 |
277 |
278 |
279 |
280 | Saber Mais 281 |
282 |
283 |
284 |
285 |
286 |
287 | 288 | 371 | 372 | 373 | -------------------------------------------------------------------------------- /14_projeto_agencia_html_css/css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /14_projeto_agencia_html_css/css/styles.css: -------------------------------------------------------------------------------- 1 | /* general */ 2 | html { 3 | font-family: Helvetica, sans-serif; 4 | } 5 | 6 | /* header */ 7 | .banner { 8 | width: 100%; 9 | height: 600px; 10 | background-image: url('../img/capa2.jpg'); 11 | background-position: center; 12 | position: relative; 13 | } 14 | 15 | .box-container { 16 | width: 400px; 17 | height: 200px; 18 | text-align: center; 19 | position: absolute; 20 | right: 100px; 21 | bottom: 250px; 22 | } 23 | 24 | .box-background { 25 | width: 100%; 26 | height: 100%; 27 | background-color: #000; 28 | opacity: .8; 29 | position: relative; 30 | } 31 | 32 | .box-banner-title { 33 | position: absolute; 34 | width: 100%; 35 | text-align: center; 36 | top: 0; 37 | color: #FFF; 38 | padding-top: 65px; 39 | } 40 | 41 | .box-banner-title h1 { 42 | font-size: 32px; 43 | margin-bottom: 25px; 44 | } 45 | 46 | .box-banner-title p { 47 | font-size: 20px; 48 | } 49 | 50 | .company-info-container { 51 | position: absolute; 52 | bottom: 0; 53 | width: 100%; 54 | height: 175px; 55 | } 56 | 57 | .company-info-background { 58 | width: 100%; 59 | height: 100%; 60 | background-color: #DDD; 61 | opacity: .9; 62 | } 63 | 64 | .company-info-titlebox { 65 | position: absolute; 66 | padding-left: 10%; 67 | top: 40px; 68 | width: 500px; 69 | } 70 | 71 | .company-info-titlebox h2, .company-info-titlebox p { 72 | color: #222; 73 | } 74 | 75 | .company-info-titlebox h2 { 76 | margin-bottom: 30px; 77 | font-size: 24px; 78 | } 79 | 80 | /* Serviços */ 81 | 82 | .services-container { 83 | max-width: 1200px; 84 | padding: 30px 10%; 85 | padding-bottom: 0; 86 | } 87 | 88 | .service-box { 89 | width: 100%; 90 | position: relative; 91 | clear: both; 92 | height: 150px; 93 | margin-bottom: 30px; 94 | } 95 | 96 | .service-box:last { 97 | margin-bottom: 0; 98 | } 99 | 100 | .service-title { 101 | width: 20%; 102 | height: 150px; 103 | background-color: #DDD; 104 | float: left; 105 | text-align: center; 106 | line-height: 150px; 107 | padding: 20px; 108 | box-sizing: border-box; 109 | } 110 | 111 | .service-title p { 112 | padding-top: 35px; 113 | color: #FFF; 114 | font-size: 18px; 115 | line-height: 24px; 116 | } 117 | 118 | .service-description { 119 | width: 80%; 120 | float: left; 121 | padding: 30px; 122 | box-sizing: border-box; 123 | } 124 | 125 | .service-description h3 { 126 | font-size: 20px; 127 | margin-bottom: 15px; 128 | font-weight: bold; 129 | } 130 | 131 | .service-description p { 132 | font-size: 14px; 133 | line-height: 22px; 134 | } 135 | 136 | #gerenciamento-title { 137 | color: #2364AA; 138 | } 139 | 140 | #dev-title { 141 | color: #3DA5D9; 142 | } 143 | 144 | #design-title { 145 | color: #73BFB8; 146 | } 147 | 148 | #gerenciamento-box { 149 | background-color: #2364AA; 150 | } 151 | 152 | #dev-box { 153 | background-color: #3DA5D9; 154 | } 155 | 156 | #design-box { 157 | background-color: #73BFB8; 158 | } 159 | 160 | /* Sobre a empresa */ 161 | .footer-container { 162 | background-image: url('../img/rodape.jpg'); 163 | background-position: center; 164 | } 165 | 166 | .about-container { 167 | max-width: 1200px; 168 | padding: 30px 10%; 169 | position: relative; 170 | clear: both; 171 | } 172 | 173 | .about-card { 174 | float: left; 175 | width: 30%; 176 | padding: 30px; 177 | background-color: #FFF; 178 | text-align: center; 179 | box-sizing: border-box; 180 | } 181 | 182 | .middle-card { 183 | margin-left: 5%; 184 | margin-right: 5%; 185 | } 186 | 187 | .about-card i { 188 | font-size: 50px; 189 | color: #AAA; 190 | } 191 | 192 | .about-card p { 193 | margin-top: 50px; 194 | font-size: 14px; 195 | line-height: 22px; 196 | color: #888; 197 | text-align: left; 198 | } 199 | 200 | /* footer */ 201 | footer { 202 | clear: both; 203 | max-width: 1200px; 204 | height: 500px; 205 | padding: 30px 10%; 206 | position: relative; 207 | } 208 | 209 | .form-container { 210 | width: 65%; 211 | height: 375px; 212 | position: relative; 213 | display: block; 214 | } 215 | 216 | .form-background { 217 | width: 100%; 218 | height: 100%; 219 | background-color: #FFF; 220 | opacity: .5; 221 | } 222 | 223 | .form-container form { 224 | position: absolute; 225 | top: 30px; 226 | left: 30px; 227 | height: 300px; 228 | } 229 | 230 | .form-container input, .form-container textarea { 231 | width: 400px; 232 | display: block; 233 | border: none; 234 | padding: 10px; 235 | margin-bottom: 15px; 236 | border-bottom: 1px solid #AAA; 237 | border-radius: 0; 238 | background-color: transparent; 239 | } 240 | 241 | .form-container textarea { 242 | height: 120px; 243 | } 244 | 245 | .form-container input::placeholder, .form-container textarea::placeholder { 246 | font-size: 14px; 247 | } 248 | 249 | .form-container .submit { 250 | background-color: #222; 251 | color: #FFF; 252 | border: 1px solid transparent; 253 | width: 100px; 254 | position: relative; 255 | float: right; 256 | cursor: pointer; 257 | transition: .5s 258 | } 259 | 260 | .form-container .submit:hover { 261 | background-color: #FFF; 262 | color: #222; 263 | border: 1px solid #222; 264 | } 265 | 266 | .copyright { 267 | color: #222; 268 | font-size: 14px; 269 | font-weight: bold; 270 | text-align: center; 271 | position: absolute; 272 | left: 0; 273 | right: 0; 274 | bottom: 30px; 275 | margin-left: auto; 276 | margin-right: auto; 277 | } -------------------------------------------------------------------------------- /14_projeto_agencia_html_css/img/capa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/14_projeto_agencia_html_css/img/capa.jpg -------------------------------------------------------------------------------- /14_projeto_agencia_html_css/img/capa2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/14_projeto_agencia_html_css/img/capa2.jpg -------------------------------------------------------------------------------- /14_projeto_agencia_html_css/img/rodape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/14_projeto_agencia_html_css/img/rodape.jpg -------------------------------------------------------------------------------- /14_projeto_agencia_html_css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Site Institucional 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 | 30 |
31 | 32 |
33 |
34 |
35 |
36 |

Gerenciamento de Projetos

37 |
38 |
39 |

Lorem ipsum

40 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis suscipit ligula et imperdiet. Nunc vulputate mattis lacus, eu lobortis ipsum porta sed.

41 |
42 |
43 |
44 |
45 |

Desenvolvimento

46 |
47 |
48 |

Lorem ipsum

49 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis suscipit ligula et imperdiet. Nunc vulputate mattis lacus, eu lobortis ipsum porta sed.

50 |
51 |
52 |
53 |
54 |

Design UX/UI

55 |
56 |
57 |

Lorem ipsum

58 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis suscipit ligula et imperdiet. Nunc vulputate mattis lacus, eu lobortis ipsum porta sed.

59 |
60 |
61 |
62 |
63 | 64 |
65 |
66 |
67 |
68 | 69 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis suscipit ligula et imperdiet. Nunc vulputate mattis lacus, eu lobortis ipsum porta sed.

70 |
71 |
72 | 73 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis suscipit ligula et imperdiet. Nunc vulputate mattis lacus, eu lobortis ipsum porta sed.

74 |
75 |
76 | 77 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis suscipit ligula et imperdiet. Nunc vulputate mattis lacus, eu lobortis ipsum porta sed.

78 |
79 |
80 |
81 | 95 |
96 |
97 | 98 | -------------------------------------------------------------------------------- /1_intro/1_instalacao_cdn/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Bootstrap 9 | 10 | 11 |

Primeiro Projeto

12 | 13 | -------------------------------------------------------------------------------- /2_primeiros_passos/1_instalacao_arquivos/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Bootstrap Arquivos 8 | 9 | 10 | 11 | 12 |

Testando Bootstrap por arquivos

13 | 14 | -------------------------------------------------------------------------------- /2_primeiros_passos/2_instalacao_npm/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Bootstrap com NPM 9 | 10 | 11 |

Instalado!

12 | 13 | -------------------------------------------------------------------------------- /2_primeiros_passos/2_instalacao_npm/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "2_instalacao_npm", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "bootstrap": { 8 | "version": "5.0.0-beta3", 9 | "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.0-beta3.tgz", 10 | "integrity": "sha512-0urccjfIOzhrb9qJysN8XW/DRw6rg3zH7qLeKIp4Zyl8+Ens4JWB0NC0cB5AhnSFPd2tftRggjwCMxablo6Tpg==" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /2_primeiros_passos/2_instalacao_npm/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "2_instalacao_npm", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "Matheus (http://www.horadecodar.com.br/)", 11 | "license": "MIT", 12 | "dependencies": { 13 | "bootstrap": "^5.0.0-beta3" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /3_layout/1_aulas/css/styles.css: -------------------------------------------------------------------------------- 1 | /* aula 1 - nosso css */ 2 | h1 { 3 | color: red; 4 | } 5 | 6 | /* aula 2 e 3 - breakpoints */ 7 | 8 | /* nada = celulares pequenos */ 9 | 10 | /* sm > 576px = celulares */ 11 | @media (min-width: 576px) { 12 | h1 { 13 | color: blue; 14 | } 15 | } 16 | 17 | /* md > 768px = tablets */ 18 | @media (min-width: 768px) { 19 | h1 { 20 | color: green; 21 | } 22 | } 23 | 24 | /* lg > 992px = desktops menores */ 25 | @media (min-width: 992px) { 26 | h1 { 27 | color: purple; 28 | } 29 | } 30 | 31 | /* xl > 1200px = desktops maiores */ 32 | @media (min-width: 1200px) { 33 | h1 { 34 | color: yellow; 35 | } 36 | } 37 | 38 | /* xxl > 1400px = desktops, tvs */ 39 | @media (min-width: 1400px) { 40 | h1 { 41 | color: teal; 42 | } 43 | } 44 | 45 | 46 | /* aula 4 - .container */ 47 | 48 | div { 49 | margin: 40px 0; 50 | } 51 | 52 | .container { 53 | border: 2px solid red; 54 | } 55 | 56 | /* aula 5 - .container-fluid*/ 57 | 58 | .container-fluid { 59 | border: 2px solid purple; 60 | } 61 | 62 | /* aula 6 - .container-x*/ 63 | 64 | .container-sm { 65 | border: 2px solid blue; 66 | } 67 | 68 | .container-md { 69 | border: 2px solid crimson; 70 | } 71 | 72 | .container-lg { 73 | border: 2px solid chocolate; 74 | } 75 | 76 | /* aula 7 - grid */ 77 | 78 | .container { 79 | border: 5px dotted blue; 80 | padding: 5px; 81 | } 82 | 83 | .row { 84 | border: 5px solid purple; 85 | height: 100px; 86 | padding: 5px; 87 | margin: 0; 88 | } 89 | 90 | .col { 91 | border: 2px dashed red; 92 | height: 100%; 93 | margin: 0; 94 | } 95 | 96 | /* aula 8 - tamanho colunas */ 97 | .col-4, .col-2, .col-11, .col-1 { 98 | border: 2px dashed red; 99 | height: 100%; 100 | margin: 0; 101 | } 102 | 103 | /* aula 9 - align vert */ 104 | 105 | #vertical { 106 | height: 250px; 107 | border-color: coral; 108 | } 109 | 110 | #vertical .row { 111 | height: 100%; 112 | } 113 | 114 | .col-6 { 115 | border: 2px dashed red; 116 | height: 50px; 117 | margin: 0; 118 | } 119 | 120 | /* aula 10 -alinhamento horizontal */ 121 | 122 | #gutter .col-6 { 123 | margin: 0; 124 | } 125 | 126 | .col-3 { 127 | border: 2px dashed red; 128 | height: 50px; 129 | margin: 0; 130 | } 131 | 132 | /* aula de offset */ 133 | #offset .row { 134 | height: 100px; 135 | } 136 | 137 | .col-md-3 { 138 | border: 2px dashed red; 139 | height: 50px; 140 | } 141 | 142 | /* Gutter */ 143 | #gutter .row { 144 | height: 200px; 145 | } 146 | 147 | #gutter .col-6 { 148 | margin: auto; 149 | } 150 | 151 | .row p { 152 | border: 2px solid green; 153 | } -------------------------------------------------------------------------------- /3_layout/1_aulas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Breakpoints 10 | 11 | 12 |

Olá Breakpoints!

13 | 14 |
15 |

Conteúdo do container

16 |

Conteúdo do container

17 |

Conteúdo do container

18 |
19 | 20 |
21 |

Conteúdo do container

22 |

Conteúdo do container

23 |

Conteúdo do container

24 |
25 | 26 |
27 |

Conteúdo do container

28 |
29 |
30 |

Conteúdo do container

31 |
32 |
33 |

Conteúdo do container

34 |
35 | 36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | 49 | 50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 | 61 | 62 |
63 |
64 |
65 |
66 |
67 |
68 | 69 |
70 |
71 |
72 |
73 |
74 |
75 | 76 | 77 |
78 |
79 |
80 |
81 |
82 | 83 |
84 |
85 |
86 |
87 |
88 |
89 | 90 | 91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 | 100 |
101 |
102 |
103 |
104 |
105 | 106 | 107 |
108 |
109 |
3
110 |
1
111 |
4
112 |
2
113 |
114 |
115 | 116 | 117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 | 135 | 136 |
137 |
138 |
139 |

GX

140 |
141 |
142 |

GX

143 |
144 |
145 |
146 |
147 |

GY

148 |
149 |
150 |

GY

151 |
152 |
153 | 154 |
155 |
156 |

G

157 |
158 |
159 |

G

160 |
161 |
162 |

G

163 |
164 |
165 |

G

166 |
167 |
168 |
169 |
170 |

teste

171 |
172 |
173 |

teste

174 |
175 |
176 |
177 | 178 | 179 | 180 | -------------------------------------------------------------------------------- /3_layout/2_tarefa/css/styles.css: -------------------------------------------------------------------------------- 1 | /* Tarefa 1 */ 2 | .col { 3 | height: 50px; 4 | border: 1px solid red; 5 | } 6 | 7 | .par { 8 | background-color: #CCC; 9 | } 10 | 11 | .impar { 12 | background-color: #333; 13 | } -------------------------------------------------------------------------------- /3_layout/2_tarefa/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Tarefa 1 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | 25 | -------------------------------------------------------------------------------- /4_icones/1_aulas/css/styles.css: -------------------------------------------------------------------------------- 1 | .bi.bi-bell { 2 | font-size: 50px; 3 | color: green; 4 | margin: 20px; 5 | } 6 | 7 | /* aula 2 */ 8 | .bi-arrow-clockwise { 9 | font-size: 40px; 10 | } 11 | 12 | .red { 13 | color: red; 14 | } 15 | 16 | .blue { 17 | color: blue; 18 | } -------------------------------------------------------------------------------- /4_icones/1_aulas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Ícones 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 |
19 | 20 | -------------------------------------------------------------------------------- /4_icones/2_tarefa/css/styles.css: -------------------------------------------------------------------------------- 1 | .col-12 { 2 | padding: 15px; 3 | margin: 15px; 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | } 8 | 9 | .col-12 i { 10 | margin-right: 15px; 11 | font-size: 30px; 12 | } 13 | 14 | .confirmation { 15 | border: 1px solid green; 16 | } 17 | 18 | .confirmation i { 19 | color: green; 20 | } 21 | 22 | .message { 23 | border: 1px solid blue; 24 | } 25 | 26 | .message i { 27 | color: blue; 28 | } 29 | 30 | .warning { 31 | border: 1px solid red; 32 | } 33 | 34 | .warning i { 35 | color: red; 36 | } -------------------------------------------------------------------------------- /4_icones/2_tarefa/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Tarefa 2 11 | 12 | 13 |
14 |
15 |
16 | 17 | Esta é uma confirmação do sistema 18 |
19 |
20 | 21 | Esta é uma mensagem do sistema 22 |
23 |
24 | 25 | Este é um aviso do sistema 26 |
27 |
28 |
29 | 30 | -------------------------------------------------------------------------------- /5_art/css/styles.css: -------------------------------------------------------------------------------- 1 | /* ESTILOS GERAIS */ 2 | * { 3 | color: #25282e; 4 | } 5 | 6 | a, i { 7 | transition: .5s; 8 | text-decoration: none; 9 | } 10 | 11 | .secondary-color { 12 | color: #555; 13 | } 14 | 15 | .center-image { 16 | background-size: cover; 17 | background-position: center; 18 | } 19 | 20 | .btn { 21 | text-decoration: none; 22 | background-color: #25282e; 23 | color: #FFF; 24 | padding: 7px 18px; 25 | border-radius: 0; 26 | } 27 | 28 | .btn:hover { 29 | background-color: #333; 30 | color: #FFF; 31 | } 32 | 33 | /* HEADER */ 34 | #header { 35 | text-align: center; 36 | padding: 20px; 37 | border-bottom: 1px solid #CCC; 38 | } 39 | 40 | #header p { 41 | margin-bottom: 0; 42 | } 43 | 44 | #logo-container { 45 | display: flex; 46 | justify-content: center; 47 | } 48 | 49 | #logo { 50 | width: 40px; 51 | margin-right: 15px; 52 | } 53 | 54 | /* NAVBAR */ 55 | #navbar { 56 | padding: 10px; 57 | margin: 10px auto; 58 | } 59 | 60 | #navbar a { 61 | width: 80px; 62 | color: #444; 63 | } 64 | 65 | #navbar a:hover { 66 | color: #c1b696; 67 | } 68 | 69 | /* MAIN IMAGE */ 70 | .main-image { 71 | height: 400px; 72 | background-image: url('../img/g_1.jpg'); 73 | margin-bottom: 30px; 74 | position: relative; 75 | } 76 | 77 | .main-image-info { 78 | background-color: #FFF; 79 | padding: 25px; 80 | position: absolute; 81 | left: 25px; 82 | bottom: 25px; 83 | } 84 | 85 | /* GALLERY */ 86 | #img-2 { 87 | background-image: url('../img/g_2.jpg'); 88 | } 89 | 90 | #img-3 { 91 | background-image: url('../img/g_3.jpg'); 92 | } 93 | 94 | #img-4 { 95 | background-image: url('../img/g_4.jpg'); 96 | } 97 | 98 | #img-5 { 99 | background-image: url('../img/g_5.jpg'); 100 | } 101 | 102 | #img-6 { 103 | background-image: url('../img/g_6.jpg'); 104 | } 105 | 106 | #gallery-container h1 { 107 | text-align: center; 108 | } 109 | 110 | #gallery-container h1, 111 | #gallery-container .col-md-6, 112 | #gallery-container .col-xs-12 { 113 | margin-bottom: 50px; 114 | } 115 | 116 | .small-image-container { 117 | height: 250px; 118 | margin-bottom: 20px; 119 | } 120 | 121 | /* FOOTER */ 122 | footer { 123 | border-top: 1px solid #CCC; 124 | height: 250px; 125 | padding: 30px; 126 | } 127 | 128 | footer i { 129 | font-size: 20px; 130 | } 131 | 132 | #social-icons-container { 133 | padding: 25px; 134 | } 135 | 136 | #social-icons-container div { 137 | text-align: center; 138 | } 139 | 140 | footer p { 141 | text-align: center; 142 | margin: 20px; 143 | } 144 | 145 | a:hover i { 146 | color: #c1b696; 147 | } -------------------------------------------------------------------------------- /5_art/img/art_logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 9 | 12 | 20 | 31 | 32 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /5_art/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/5_art/img/favicon.ico -------------------------------------------------------------------------------- /5_art/img/g_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/5_art/img/g_1.jpg -------------------------------------------------------------------------------- /5_art/img/g_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/5_art/img/g_2.jpg -------------------------------------------------------------------------------- /5_art/img/g_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/5_art/img/g_3.jpg -------------------------------------------------------------------------------- /5_art/img/g_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/5_art/img/g_4.jpg -------------------------------------------------------------------------------- /5_art/img/g_5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/5_art/img/g_5.jpg -------------------------------------------------------------------------------- /5_art/img/g_6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/5_art/img/g_6.jpg -------------------------------------------------------------------------------- /5_art/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Art 16 | 17 | 18 | 19 |
20 | 27 | 35 |
36 | 37 |
38 |
39 |
40 |

Arte no muro de Davi

41 |

Realizada em 20/05/2021

42 | Detalhes 43 |
44 |
45 |
46 | 47 | 99 | 100 | -------------------------------------------------------------------------------- /6_conteudo/1_aulas/css/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/6_conteudo/1_aulas/css/styles.css -------------------------------------------------------------------------------- /6_conteudo/1_aulas/img/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/6_conteudo/1_aulas/img/avatar.png -------------------------------------------------------------------------------- /6_conteudo/1_aulas/img/g_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/6_conteudo/1_aulas/img/g_1.jpg -------------------------------------------------------------------------------- /6_conteudo/1_aulas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Conteúdo 10 | 11 | 12 | 13 |

Heading 1

14 |

Heanding 2

15 |
Último heading
16 | 17 |

Parágrafo Heading

18 | Span Heading 19 | 20 | 21 |

Chamando a atenção

22 |

Esta é headline secundária!

23 | 24 | 25 |

Precisamos destacar isso aqui para vender este produto!

26 |

Precisamos destacar isso aqui para vender este produto!

27 | 28 |

Lista de tarefas:

29 |

Funcionalidade a

30 |

Funcionalidade b

31 |

Funcionalidade c

32 | 33 |

O produto X é o melhor do mercado!

34 | 35 | 36 |
37 |

HTML e CSS são as bases do Bootstrap.

38 |
39 | 40 |
41 |
42 |

Não deixe o ruído das opiniões dos outros abafar a sua própria voz interior.

43 |
44 |
45 | Uma frase de Steve Jobs 46 |
47 |
48 | 49 | 50 |

Lista sem estilo

51 | 56 | 57 |

Lista sem inline

58 | 63 | 64 | 65 |
66 | 67 |
68 | 69 |
70 | 71 |
72 | 73 | 74 |
75 | 76 |
77 | 78 | 79 | 80 |
81 |
82 | 83 |
Grafite da Av. Paulista.
84 |
85 |
86 | 87 | 88 |
89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 |
IDNomeSobrenomeEmail
1MatheusBattistimatheus@email.com
2PedroMattospedro@email.com
3Carloscarlos@email.com
118 |
119 | 120 |
121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 |
IDProduto
1Geladeira
2Fogão
3TV
143 |
144 | 145 | 146 | -------------------------------------------------------------------------------- /6_conteudo/2_tarefa/css/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/6_conteudo/2_tarefa/css/styles.css -------------------------------------------------------------------------------- /6_conteudo/2_tarefa/img/paisagem.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/6_conteudo/2_tarefa/img/paisagem.jpg -------------------------------------------------------------------------------- /6_conteudo/2_tarefa/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Tarefa 2 10 | 11 | 12 |
13 |
14 |
15 |

Veja esta imagem

16 |

Contém uma forte cena, não acha?

17 |
18 |
19 | Paisagem 20 |
21 |
22 |
23 |

Elementos:

24 |
    25 |
  • Céu bonito
    • 26 |
  • Árvore
    • 27 |
  • Montanhas
    • 28 |
29 |
30 |
31 |

Cores:

32 |
    33 |
  • Verde
    • 34 |
  • Roxo
    • 35 |
  • Azul
    • 36 |
37 |
38 |
39 |
40 |
41 | 42 | -------------------------------------------------------------------------------- /7_forms/1_aulas/css/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/7_forms/1_aulas/css/styles.css -------------------------------------------------------------------------------- /7_forms/1_aulas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Formulários 10 | 11 | 12 | 13 | 14 |
15 |

Formulário de Registro

16 |
17 |
18 | 19 | 20 |
Não compartilhamos o seu endereço de e-mail.
21 |
22 |
23 | 24 | 25 |
26 | 27 |
28 |
29 | 30 | 31 |
32 |

Formulário de Registro

33 |
34 |
35 |
36 | 37 | 38 |
Não compartilhamos o seu endereço de e-mail.
39 |
40 |
41 | 42 | 43 |
44 | 45 |
46 |
47 |
48 | 49 | 50 |
51 |

Crie seu post

52 |
53 |
54 | 55 | 56 |
57 |
58 | 59 | 60 |
61 | 62 |
63 |
64 | 65 |
66 |

Testes form control

67 |
68 |
69 | 70 | 71 |
72 |
73 | 74 | 75 |
76 |
77 | 78 | 79 |
80 |
81 |
82 | 83 | 84 |
85 |

Testes somente leitura

86 |
87 | 88 | 89 |
90 |
91 | 92 | 93 |
94 |
95 | 96 | 97 |
98 |

Testes input de arquivos

99 |
100 | 101 | 102 |
103 |
104 | 105 | 106 |
107 |
108 | 109 | 110 |
111 |
112 | 113 | 114 |
115 |

Outros inputs

116 |
117 | 118 |
119 | 120 | 121 |
122 | 123 |
124 | 125 | 126 | 127 | 133 |
134 | 135 |
136 | 142 |
143 | 144 |
145 | 151 |
152 | 153 |
154 | 160 |
161 | 162 | 163 |
164 |

Marque as opções

165 |
166 | 167 | 170 |
171 |
172 | 173 | 176 |
177 |
178 | 179 | 182 |
183 |
184 | 185 |
186 |

Qual você quer?

187 |
188 | 189 | 192 |
193 |
194 | 195 | 198 |
199 |
200 | 201 | 204 |
205 |
206 | 207 | 208 |
209 |

Escolha suas configurações:

210 |
211 | 212 | 213 |
214 |
215 | 216 | 217 |
218 |
219 | 220 | 221 |
222 |

Por favor responda:

223 | 224 | 225 |
226 | 227 |
228 |

Por favor responda:

229 | 230 | 231 |
232 | 233 | 234 |
235 | @ 236 | 237 |
238 | 239 |

Quando você quer depositar (sem centavos):

240 |
241 | R$ 242 | 243 | .00 244 |
245 | 246 | 247 |

Faça o login para continuar

248 |
249 | 250 | 251 |
252 |
253 | 254 | 255 |
256 | 257 |
258 |
259 | 260 | 261 |
262 |

Cadastre-se preenchendo o formulário:

263 |
264 |
265 | 266 | 267 |
268 |
269 | 270 | 271 |
272 |
273 | 274 | 275 |
276 |
277 | 278 | 279 |
280 |
281 | 282 | 283 |
284 |
285 | 286 | 287 |
288 |
289 | 290 | 291 |
292 |
293 | 294 | 298 |
299 |
300 |
301 | 302 | 305 |
306 |
307 |
308 | 309 |
310 |
311 |
312 | 313 | 314 | -------------------------------------------------------------------------------- /7_forms/2_validacoes/css/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/7_forms/2_validacoes/css/styles.css -------------------------------------------------------------------------------- /7_forms/2_validacoes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Validações de Formulários 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |

Faça o login para continuar:

19 |
20 |
21 | 22 | 23 |
24 | Ok! 25 |
26 |
27 |
28 | 29 | 30 |
31 | Ok! 32 |
33 |
34 |
35 | 36 |
37 |
38 |
39 |
40 |
41 | 42 | 43 |
44 |
45 |
46 |

Faça o login para continuar:

47 |
48 |
49 | 50 | 51 |
52 |
53 | 54 | 55 |
56 |
57 | 58 |
59 |
60 |
61 |
62 |
63 | 64 | 65 | -------------------------------------------------------------------------------- /7_forms/2_validacoes/js/scripts.js: -------------------------------------------------------------------------------- 1 | // Example starter JavaScript for disabling form submissions if there are invalid fields 2 | (function () { 3 | 'use strict' 4 | 5 | // Fetch all the forms we want to apply custom Bootstrap validation styles to 6 | var forms = document.querySelectorAll('.needs-validation') 7 | 8 | // Loop over them and prevent submission 9 | Array.prototype.slice.call(forms) 10 | .forEach(function (form) { 11 | form.addEventListener('submit', function (event) { 12 | if (!form.checkValidity()) { 13 | event.preventDefault() 14 | event.stopPropagation() 15 | } 16 | 17 | form.classList.add('was-validated') 18 | }, false) 19 | }) 20 | })() -------------------------------------------------------------------------------- /7_forms/3_tarefa/css/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/7_forms/3_tarefa/css/styles.css -------------------------------------------------------------------------------- /7_forms/3_tarefa/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Tarefa 3 10 | 11 | 12 |
13 |
14 |
15 |

Cadastro de produto

16 |
17 |
18 | 19 | 20 |
21 |
22 | 23 | 24 |
25 |
26 | 27 | 28 |
29 |
30 | 31 | 37 |
38 |
39 | 40 | 43 |
44 |
45 | 46 |
47 |
48 |
49 |
50 |
51 | 52 | -------------------------------------------------------------------------------- /8_projeto_com_forms/css/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #f8f8f8; 3 | } 4 | 5 | /* Form */ 6 | #form-container { 7 | background-color: #FFF; 8 | border-radius: 20px; 9 | box-shadow: .5px 10px 15px rgba(0, 0, 0, 0.2); 10 | margin: 25px auto; 11 | padding: 25px; 12 | } 13 | 14 | @media(min-width: 768px) { 15 | #form-container { 16 | margin: 50px auto; 17 | padding: 50px; 18 | } 19 | } 20 | 21 | #form-container h2 { 22 | font-weight: 900; 23 | margin-bottom: 30px; 24 | } 25 | 26 | #form-container a { 27 | color: #222; 28 | transition: .5s; 29 | } 30 | 31 | #form-container a:hover { 32 | color: #6C63FF; 33 | } 34 | 35 | #form-container form { 36 | padding-bottom: 50px; 37 | } 38 | 39 | #form-container .form-control { 40 | border: none; 41 | border-bottom: 1px solid #CCC; 42 | border-radius: 0; 43 | } 44 | 45 | #form-container .form-control:focus { 46 | box-shadow: none; 47 | } 48 | 49 | #form-container .form-floating label { 50 | color: #CCC; 51 | } 52 | 53 | #form-container .form-floating > .form-control:focus~label { 54 | color: #222; 55 | } 56 | 57 | #form-container .form-check-input:checked, 58 | #form-container input[type="submit"] { 59 | background-color: #6C63FF; 60 | border-color: #6C63FF; 61 | } 62 | 63 | .btn.btn-primary { 64 | width: 100%; 65 | } 66 | 67 | @media(min-width: 768px) { 68 | .btn.btn-primary { 69 | width: auto; 70 | } 71 | } 72 | 73 | /* Image */ 74 | 75 | .row.align-items-center { 76 | align-content: center; 77 | height: 100%; 78 | } 79 | 80 | #link-container { 81 | text-align: center; 82 | padding-top: 50px; 83 | } -------------------------------------------------------------------------------- /8_projeto_com_forms/img/hello.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /8_projeto_com_forms/img/sign_in.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /8_projeto_com_forms/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Login 12 | 13 | 14 |
15 |
16 |
17 |

Faça o login para continuar

18 |
19 |
20 | 21 | 22 |
23 |
24 | 25 | 26 |
27 | 28 |
29 |
30 |
31 |
32 | Hello New Customer 33 |
34 | 37 |
38 |
39 |
40 | 41 | -------------------------------------------------------------------------------- /8_projeto_com_forms/register.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Register 12 | 13 | 14 |
15 |
16 |
17 |

Realize o seu cadastro

18 |
19 |
20 | 21 | 22 |
23 |
24 | 25 | 26 |
27 |
28 | 29 | 30 |
31 |
32 | 33 | 34 |
35 |
36 | 37 | 38 |
39 |
40 |
41 | 42 | 45 |
46 |
47 | 48 | 51 |
52 |
53 | 54 |
55 |
56 |
57 |
58 |
59 | Hello New Customer 60 |
61 | 64 |
65 |
66 |
67 |
68 | 69 | -------------------------------------------------------------------------------- /9_componentes/1_aulas/css/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-bottom: 500px; 3 | } 4 | 5 | .card { 6 | width: 200px; 7 | } 8 | 9 | #card-banner { 10 | width: 800px; 11 | } 12 | 13 | .carousel-item { 14 | height: 500px; 15 | } -------------------------------------------------------------------------------- /9_componentes/1_aulas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Componentes 12 | 13 | 14 | 15 |
16 |

Accordion

17 |
18 |
19 |

20 | 23 |

24 |
25 |
26 |

Este é o item 1 e sua descrição!

27 |
28 |
29 |
30 |
31 |

32 | 35 |

36 |
37 |
38 |

Este é um outro item, e possui palavras fortes!

39 |
40 |
41 |
42 |
43 |

44 | 47 |

48 |
49 |
50 |

Mais um item do Accordion

51 |
52 |
53 |
54 |
55 |
56 | 57 | 58 |
59 | 62 | 65 | 68 | 69 | 72 | 73 | 79 | 80 | 84 |
85 | 86 | 87 |
88 |

Cadeira Gamer X400 New

89 |

Fone de ouvido XYZ10 10% off

90 | 93 |
94 | 95 | 96 |
97 | 104 |

Página de Produto

105 |

Descrição do produto

106 |
107 | 108 | 109 |
110 |
Botão
111 |
Criar
112 | 113 | Deletar 114 | 115 | 116 | 117 | 118 | 119 |
120 |
121 | 122 |
123 |
124 | 125 | 126 | 127 |
128 | 129 | 130 |
131 |

Configure a seção:

132 |
133 | 134 | 135 | 136 |
137 | 138 |

Com outline:

139 |
140 | 141 | 142 | 143 | 144 |
145 | 146 |

Vertical

147 |
148 | 149 | 150 | 151 |
152 | 153 |
154 | 155 | 156 |
157 |
158 | Descrição imagem 159 |
160 |

Esta é a descrição do produto.

161 |
162 |
163 | 164 |
165 | Descrição imagem 166 |
167 |
Título do produto
168 |

Descrição longa do produto X, que é muito bom!

169 | Comprar 170 |
171 |
172 | 173 |
174 |
175 |
Card sem imagem
176 |
Um subtítulo
177 |

Novamente a descrição

178 | Comprar 179 | Cancelar 180 |
181 |
182 | 183 |
184 |
185 | Card Banner 186 |
187 |
188 |
Um título legal
189 |

Aqui pode ir uma descrição de uma oferta irresistível para o cliente.

190 | Acessar oferta 191 |
192 |
193 | Faltam 2 dias 194 |
195 |
196 |
197 | 198 | 199 |
200 |
201 | 227 |
228 |
229 | 230 | 231 |
232 |
233 | 271 |
272 |
273 | 274 | 275 |
276 |

Clique para fechar

277 | 278 |

Clique para fechar

279 |
280 | 281 | 282 |
283 | 286 |
287 |
288 | Este é o texto que pode ser exibido ou não, dependendo do clique no botão. 289 |
290 |
291 |
292 | 293 | 294 |
295 |
296 | 299 | 300 | 305 |
306 | 307 | 308 |
309 | 312 | 313 | 318 |
319 |
320 | 321 | 322 | 323 |
324 | 327 |
328 | 329 | 330 | 348 | 349 | 350 | -------------------------------------------------------------------------------- /9_componentes/2_aulas/css/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-bottom: 500px; 3 | } 4 | 5 | -------------------------------------------------------------------------------- /9_componentes/2_aulas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Componentes 2 12 | 13 | 14 | 15 | 16 | 50 | 51 |
52 | 53 | 54 | 79 | 80 | 81 |
82 | 83 | 84 |
85 |
86 |
Carrinho
87 | 88 |
89 |
90 |
    91 |
  • Item 1
    • 92 |
  • Item 2
    • 93 |
  • Item 3
    • 94 |
95 |
96 |
97 |
98 | 99 | 100 |
101 | 110 |
111 | 112 | 113 |
114 | 122 |
123 | 124 | 125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
50%
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 | 143 | 144 | 155 |
156 |

Seção 1

157 |

Conteúdo

158 |

Conteúdo

159 |

Conteúdo

160 |

Conteúdo

161 |

Conteúdo

162 |

Conteúdo

163 |

Conteúdo

164 |

Conteúdo

165 |

Seção 2

166 |

Conteúdo

167 |

Conteúdo

168 |

Conteúdo

169 |

Conteúdo

170 |

Conteúdo

171 |

Conteúdo

172 |

Conteúdo

173 |

Conteúdo

174 |
175 | 176 | 177 | 178 |
179 | 189 |
190 | 191 | 192 |
193 | 196 |
197 | 198 | 199 | -------------------------------------------------------------------------------- /9_componentes/2_aulas/js/scripts.js: -------------------------------------------------------------------------------- 1 | var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) 2 | 3 | var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { 4 | return new bootstrap.Popover(popoverTriggerEl) 5 | }) 6 | 7 | var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) 8 | 9 | var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { 10 | return new bootstrap.Tooltip(tooltipTriggerEl) 11 | }) -------------------------------------------------------------------------------- /9_componentes/3_tarefa/css/styles.css: -------------------------------------------------------------------------------- 1 | .container { 2 | margin-top: 50px; 3 | } 4 | 5 | .carousel-item { 6 | height: 450px; 7 | } -------------------------------------------------------------------------------- /9_componentes/3_tarefa/img/img_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/9_componentes/3_tarefa/img/img_1.jpg -------------------------------------------------------------------------------- /9_componentes/3_tarefa/img/img_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/9_componentes/3_tarefa/img/img_2.jpg -------------------------------------------------------------------------------- /9_componentes/3_tarefa/img/img_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/9_componentes/3_tarefa/img/img_3.jpg -------------------------------------------------------------------------------- /9_componentes/3_tarefa/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Tarefa 04 12 | 13 | 14 | 15 | 16 | 37 | 38 |
39 | 65 |
66 | 67 |
68 |
69 |
70 |
71 | Alt 1 72 |
73 |
Produto 1
74 |

Descrição do produto

75 | Comprar 76 |
77 |
78 |
79 |
80 |
81 | Alt 2 82 |
83 |
Produto 2
84 |

Descrição do produto

85 | Comprar 86 |
87 |
88 |
89 |
90 |
91 | Alt 3 92 |
93 |
Produto 3
94 |

Descrição do produto

95 | Comprar 96 |
97 |
98 |
99 |
100 |
101 | Alt 4 102 |
103 |
Produto 4
104 |

Descrição do produto

105 | Comprar 106 |
107 |
108 |
109 |
110 |
111 | Alt 5 112 |
113 |
Produto 5
114 |

Descrição do produto

115 | Comprar 116 |
117 |
118 |
119 |
120 |
121 | Alt 6 122 |
123 |
Produto 6
124 |

Descrição do produto

125 | Comprar 126 |
127 |
128 |
129 |
130 |
131 | 132 | 133 | 134 | -------------------------------------------------------------------------------- /9_componentes/3_tarefa/js/scripts.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_bootstrap_5/abc6433b7780bfcbb5c469f8ee407e58626748d6/9_componentes/3_tarefa/js/scripts.js --------------------------------------------------------------------------------