├── src └── class │ ├── README.md │ ├── img │ ├── search-module-one.svg │ ├── carrinho-module-one.svg │ ├── Frame 446.svg │ ├── Ellipse 2.svg │ ├── Ellipse 3.svg │ ├── Ellipse 1.svg │ └── mulher-shopping-module-one.svg │ └── module-one │ ├── fundamentals.css │ └── fundamentals.html └── README.md /src/class/README.md: -------------------------------------------------------------------------------- 1 | Crie suas aulas aqui! -------------------------------------------------------------------------------- /src/class/img/search-module-one.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/class/img/carrinho-module-one.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PC Bootstrap Course 2 | 3 | Bem-vindo ao repositório oficial do **PC Bootstrap Course**! Este curso é ministrado pelo Professor Corrêa e oferecido pela **[Suporte de Domingo](https://suportededomingo.com.br/)**. 4 | 5 | ## Sobre o Curso 6 | 7 | Este curso é focado no aprendizado de **Bootstrap**, o framework front-end mais popular para desenvolvimento de sites responsivos e mobile-first. Durante o curso, você aprenderá a usar a estrutura de grid, componentes visuais, personalizações e funcionalidades JavaScript do Bootstrap para construir interfaces modernas e eficientes. 8 | 9 | ## Conteúdo do Curso 10 | 11 | Aqui está uma visão geral dos tópicos que serão abordados no curso: 12 | 13 | 1. **Introdução ao Bootstrap** 14 | 2. **Instalação e Configuração** 15 | - CDN 16 | - Local 17 | - NPM 18 | 3. **Sistema de Grid** 19 | - Containers 20 | - Linhas e Colunas 21 | 4. **Componentes** 22 | - Botões 23 | - Cards 24 | - Navbars 25 | 5. **Formulários** 26 | - Inputs e Validação 27 | 6. **Componentes JavaScript** 28 | - Modais 29 | - Tooltips 30 | - Carrosséis 31 | 7. **Personalização** 32 | - Temas 33 | - Sobrescrita de CSS 34 | 8. **Utilitários** 35 | - Espaçamento 36 | - Cores 37 | 9. **Projetos Práticos** 38 | 39 | ## Mapa Mental 40 | 41 | Para facilitar o entendimento da trilha de aprendizado, criamos um **mapa mental** interativo no Miro. O mapa ajuda a organizar os tópicos em ordem lógica e sequencial, tornando o estudo mais simples e eficiente. 42 | 43 | Você pode acessar o mapa mental por meio do seguinte link: 44 | 45 | [Mapa Mental - Trilha de Estudo Bootstrap](https://miro.com/app/board/uXjVKiNn9W4=/?share_link_id=288308721770) 46 | 47 | ## Sobre o Professor 48 | 49 | O curso é ministrado por **Professor Corrêa**, especialista em desenvolvimento front-end com foco em design, gestão e produto. Com vasta experiência no ensino de tecnologias como HTML, CSS, JavaScript e frameworks como o Bootstrap. 50 | 51 | ## Suporte 52 | 53 | Se você tiver alguma dúvida durante o curso, sinta-se à vontade para abrir uma **issue** neste repositório ou enviar um e-mail para o suporte da **[Suporte de Domingo](https://suportededomingo.com.br/)**. 54 | 55 | --- 56 | 57 | **Suporte de Domingo** - Tornando o aprendizado de tecnologia acessível a todos! 58 | -------------------------------------------------------------------------------- /src/class/module-one/fundamentals.css: -------------------------------------------------------------------------------- 1 | * { 2 | text-decoration: none; 3 | border: none; 4 | } 5 | 6 | header > h4 { 7 | color: #00a000; 8 | text-decoration: underline; 9 | text-underline-offset: 4px; 10 | } 11 | 12 | header > nav { 13 | display: flex; 14 | gap: 40px; 15 | } 16 | 17 | header > nav > a { 18 | text-decoration: none; 19 | color: #000001; 20 | 21 | transition: 0.3s ease-in-out; 22 | } 23 | 24 | header > nav > a:hover { 25 | color: #00a000; 26 | } 27 | 28 | .compras { 29 | display: flex; 30 | gap: 24px; 31 | } 32 | 33 | .compras > button { 34 | background-color: transparent; 35 | border: 1px solid #00a000; 36 | color: #00a000; 37 | font-size: 16px; 38 | 39 | width: 105px; 40 | height: 40px; 41 | border-radius: 10px; 42 | text-align: center; 43 | 44 | transition: 0.3s ease-in-out; 45 | } 46 | 47 | .compras > button:hover { 48 | background-color: #00a000; 49 | color: #fff; 50 | } 51 | .hero { 52 | padding-top: 50px; 53 | padding-bottom: 60px; 54 | } 55 | 56 | .hero > aside { 57 | display: flex; 58 | gap: 50px; 59 | } 60 | 61 | .hero > aside > img { 62 | width: 40%; 63 | } 64 | 65 | .text-main { 66 | display: flex; 67 | flex-direction: column; 68 | width: 40%; 69 | 70 | padding-left: 65px; 71 | } 72 | 73 | .text-main > h1 { 74 | font-size: 45px; 75 | font-weight: 700; 76 | padding-bottom: 25px; 77 | } 78 | 79 | .text-main > h1 > span { 80 | color: #00a000; 81 | } 82 | 83 | .text-main > p { 84 | padding-bottom: 25px; 85 | } 86 | 87 | .botoes { 88 | display: flex; 89 | gap: 25px; 90 | } 91 | 92 | .order { 93 | width: 144px; 94 | height: 45px; 95 | 96 | background-color: #00a000; 97 | color: #fff; 98 | border-radius: 10px; 99 | 100 | transition: 0.3s ease-in-out; 101 | } 102 | 103 | .order:hover { 104 | background-color: transparent; 105 | border: 1px solid #00a000; 106 | color: #00a000; 107 | } 108 | 109 | .explore { 110 | background-color: transparent; 111 | border: 1px solid #00a000; 112 | color: #00a000; 113 | 114 | width: 188px; 115 | height: 45px; 116 | border-radius: 10px; 117 | 118 | transition: 0.3s ease-in-out; 119 | } 120 | 121 | .explore:hover { 122 | background-color: #00a000; 123 | color: #fff; 124 | } 125 | 126 | .escolher { 127 | padding-bottom: 90px; 128 | padding-top: 80px; 129 | } 130 | 131 | .escolher > main { 132 | flex-direction: column; 133 | } 134 | 135 | .row { 136 | padding-top: 60px; 137 | } 138 | 139 | .palavras { 140 | padding-bottom: 50px; 141 | 142 | text-align: center; 143 | } 144 | 145 | .special-foods { 146 | padding-top: 70px; 147 | padding-bottom: 90px; 148 | } 149 | 150 | .special-foods > article > div > div > button { 151 | width: 250px; 152 | height: 45px; 153 | border-radius: 10px; 154 | 155 | background-color: #00a000; 156 | color: #fff; 157 | 158 | font-size: 16px; 159 | 160 | transition: 0.3s ease-in-out; 161 | } 162 | 163 | .special-foods > article > div > div > button:hover { 164 | background-color: transparent; 165 | border: 1px solid #00a000; 166 | color: #00a000; 167 | } 168 | 169 | .palavra { 170 | padding-bottom: 25px; 171 | } 172 | 173 | .cards-clientes > div { 174 | width: 30%; 175 | } 176 | 177 | .cards-clientes > div > img { 178 | width: 100px; 179 | height: 100px; 180 | } 181 | 182 | .about-us { 183 | padding-top: 85px; 184 | padding-bottom: 85px; 185 | gap: 85px; 186 | } 187 | 188 | .about-us > img { 189 | width: 40%; 190 | } 191 | 192 | .about-us > main { 193 | width: 35%; 194 | } 195 | 196 | .about-us > main > button { 197 | width: 250px; 198 | height: 45px; 199 | border-radius: 10px; 200 | 201 | background-color: #00a000; 202 | color: #fff; 203 | 204 | font-size: 16px; 205 | 206 | transition: 0.3s ease-in-out; 207 | } 208 | 209 | .about-us > main > button:hover { 210 | background-color: transparent; 211 | border: 1px solid #00a000; 212 | color: #00a000; 213 | } 214 | 215 | .subscribe { 216 | padding-top: 85px; 217 | padding-bottom: 85px; 218 | } 219 | 220 | .subscribe > div > input { 221 | margin-left: 200px; 222 | } 223 | 224 | footer { 225 | padding-top: 100px; 226 | padding-bottom: 70px; 227 | } 228 | 229 | .contatos { 230 | gap: 200px; 231 | } 232 | 233 | .contatos > aside > h4 { 234 | color: white; 235 | text-decoration: underline; 236 | text-underline-offset: 5px; 237 | } 238 | -------------------------------------------------------------------------------- /src/class/img/Frame 446.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/class/module-one/fundamentals.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Fudamentals 7 | 11 | 12 | 17 | 18 | 19 | 20 |
23 |

QUICKFOOD

24 | 30 |
31 | 32 | 33 | 34 |
35 |
36 | 37 |
38 | 53 |
54 | 55 |
56 |
57 |

Why Choose Us?

58 |

59 | We offer delicious and healthy foods, quick payment and we deliver 60 | fast. 61 |

62 |
63 |
66 |
67 |
68 | 69 |

Best Offer

70 |

71 | We offer you healthy & delicious food with good hygiene. 72 |

73 |

40+

74 |

Foods Available

75 |
76 |
77 | 78 |

Easy Payment

79 |

80 | Payment is easy and quick to order your foods. 81 |

82 |

600+

83 |

Happy Clients

84 |
85 |
86 | 87 |

Fastest delivery

88 |

89 | Our delivery is super active and run delivery inter state 90 |

91 |

5k+

92 |

Online Orders

93 |
94 |
95 |
96 |
97 | 98 |
99 |
100 |

Special dishes for you

101 |
102 |
103 |
104 |
105 | 106 |

Garlic Salad

107 |

108 | Caprese is a classic Italian salad made with sliced tomatoes. 109 |

110 | 111 |
112 |
113 | 118 |

Caprese Salad

119 |

120 | Caprese is a classic Italian salad made with sliced tomatoes. 121 |

122 | 123 |
124 |
125 | 126 |

Garlic Salad

127 |

128 | Caprese is a classic Italian salad made with sliced tomatoes. 129 |

130 | 131 |
132 |
133 |
134 |
135 |
136 |

What our clients say about us

137 |

138 | Customer reviews on our Products and their feedbacks. 139 |

140 |
143 |
147 | 148 |

Jane Cooper

149 |

150 | I have to say, I enjoyed every single bite of the meal in (RN). I 151 | had a 3 course meal, with a couple of beers. Considering the 152 | quality, the price is reasonable. 153 |

154 |
155 |
159 | 160 |

Esther Howard

161 |

162 | It’s a great experience. The ambiance is very welcoming and 163 | charming. Amazing food and service. Staff are extremely 164 | knowledgeable and make great recommendations 165 |

166 |
167 |
171 | 172 |

Guy Hawkins

173 |

174 | It’s a fantastic experience. The atmosphere is warm and inviting. 175 | Excellent food and service. The staff are very skilled and offer 176 | great suggestions. 177 |

178 |
179 |
180 |
181 |
182 |
183 |

About Us

184 |

185 | The best way to make it works is to have a smart list of all the 186 | restaurants and cuisines organized by location, type of food (fast 187 | food, or more gourmet dishes), food preferences (vegetarian, meat 188 | lovers, any special diets like gluten-free diets), different nation’s 189 | cuisine, etc. 190 |

191 | 192 |
193 | 194 |
195 |
196 |

Subscribe to our Newsteller

197 |

198 | Join Us and Get Update on our Available Product. 199 |

200 |
201 | 208 | 216 |
217 |
218 | 251 | 252 | 253 | -------------------------------------------------------------------------------- /src/class/img/Ellipse 2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/class/img/Ellipse 3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/class/img/Ellipse 1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/class/img/mulher-shopping-module-one.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | --------------------------------------------------------------------------------