├── .gitattributes
├── CSS
    └── style.css
├── README.md
├── contatos.html
├── img
    ├── 72165b8655e809c1fef7f2291566fab5.jpg
    ├── MicrosoftTeams-image (1).png
    ├── MicrosoftTeams-image (2).png
    ├── MicrosoftTeams-image.png
    ├── Proa_Tech_Fundo_Zoom.png
    ├── bx-shopping-bag.svg
    ├── cooler.jpg
    ├── daily_07-03.docx
    ├── firewall.jpg
    ├── free-office-wallpaper-26001-26685-hd-wallpapers.webp
    ├── gabinete.webp
    ├── headset.jpg
    ├── icons8-monitor-16.png
    ├── info.jpg
    ├── insta.png
    ├── mail.png
    ├── manun.jpg
    ├── mini_cabeamento_estruturado.jpg
    ├── mini_controle_de_internet.jpg
    ├── mini_manutencao_de_computador.jpg
    ├── mini_manutencao_hardware.jpg
    ├── mini_remoaao_virus_pc.jpg
    ├── mini_winconnection_controle_internet.jpg
    ├── monitor.webp
    ├── mouse.jpg
    ├── nuvem.jpg
    ├── placa de video.webp
    ├── placa mãe.webp
    ├── processador.jpg
    ├── ram.jpg
    ├── rede.jpg
    ├── site.jpg
    ├── ssd.jpg
    ├── teclado.webp
    ├── tecnico.jpg
    └── whats.png
├── index.html
├── produtos.html
└── servicos.html


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/CSS/style.css:
--------------------------------------------------------------------------------
  1 | /* RESET CSS */
  2 | * {
  3 |   margin: 0;
  4 |   padding: 0;
  5 |   font-size: 100%;
  6 |   font-family: "Open Sans", sans-serif;
  7 |   font-weight: normal;
  8 |   box-sizing: border-box;
  9 |   border: none;
 10 |   outline: none;
 11 | }
 12 | 
 13 | img {
 14 |   max-width: 100%;
 15 | }
 16 | 
 17 | ul {
 18 |   list-style: none;
 19 | }
 20 | 
 21 | a {
 22 |   text-decoration: none;
 23 | }
 24 | 
 25 | h2 {
 26 |   font-size: 1.5em;
 27 |   color: #333;
 28 | }
 29 | 
 30 | p {
 31 |   font-size: 1em;
 32 |   color: #777;
 33 | }
 34 | 
 35 | .cabecalho {
 36 |   width: 100%;
 37 |   float: left;
 38 |   padding: 50px 8%;
 39 |   background-color: #13c7ae;
 40 | }
 41 | 
 42 | .logo a {
 43 |   width: 221px;
 44 |   height: 48px;
 45 |   float: left;
 46 |   background: url(../img/MicrosoftTeams-image.png) no-repeat;
 47 |   font-size: 0;
 48 | }
 49 | 
 50 | .cabecalho form {
 51 |   width: 30%;
 52 |   float: right;
 53 | }
 54 | 
 55 | .cabecalho form input[type="text"] {
 56 |   width: 85%;
 57 |   float: left;
 58 |   padding: 15px 10px 15px 10px;
 59 |   border-radius: 12px 0 0 12px;
 60 | }
 61 | 
 62 | .cabecalho button {
 63 |   width: 15%;
 64 |   float: right;
 65 |   padding: 15px 10px;
 66 |   background-color: #0cae98;
 67 |   color: #fff;
 68 |   cursor: pointer;
 69 |   border-radius: 0 12px 12px 0;
 70 | }
 71 | 
 72 | .menu {
 73 |   width: 100%;
 74 |   float: left;
 75 |   background-color: #111;
 76 |   padding: 18px 8%;
 77 | }
 78 | 
 79 | .menu li {
 80 |   float: left;
 81 | }
 82 | 
 83 | .menu li a {
 84 |   color: #9d9d9d;
 85 |   margin-right: 25px;
 86 | }
 87 | 
 88 | .menu li a:hover {
 89 |   color: #fff;
 90 | }
 91 | 
 92 | .social-icons {
 93 |   float: right;
 94 | }
 95 | 
 96 | .social-icons a {
 97 |   color: #fff;
 98 |   float: left;
 99 |   margin-left: 12px;
100 | }
101 | 
102 | .btn-facebook:hover {
103 |   color: #3b5998;
104 | }
105 | 
106 | .btn-twitter:hover {
107 |   color: #54a4d6;
108 | }
109 | 
110 | .btn-google:hover {
111 |   color: #d73d32;
112 | }
113 | 
114 | .principal {
115 |   width: 100%;
116 |   float: left;
117 |   padding: 20px 8%;
118 | }
119 | .sobre {
120 |   width: 70%;
121 |   float: left;
122 |   padding: 0 20px 20px 0;
123 | }
124 | .sobre h2 {
125 |   margin-bottom: 15px;
126 | }
127 | .sobre img {
128 |   width: 50%;
129 |   float: left;
130 |   border-radius: 5px;
131 |   margin: 0 15px 15px 0;
132 | }
133 | .sobre p {
134 |   text-align: justify;
135 | }
136 | 
137 | .onde-estamos {
138 |   width: 30%;
139 |   float: right;
140 |   padding: 10px 20px;
141 |   background-color: #f5f5f5;
142 |   border-radius: 5px;
143 | }
144 | .onde-estamos h2 {
145 |   margin-bottom: 5px;
146 | }
147 | .onde-estamos iframe {
148 |   width: 100%;
149 |   height: 250px;
150 |   margin: 20px 0px;
151 | }
152 | .onde-estamos li {
153 |   color: #777;
154 |   margin-bottom: 10px;
155 | }
156 | .onde-estamos i {
157 |   margin-right: 5px;
158 | }
159 | 
160 | .newsletter {
161 |   width: 100%;
162 |   float: left;
163 |   background-color: #111;
164 |   padding: 50px 8%;
165 | }
166 | .newsletter h3 {
167 |   font-size: 1.8em;
168 |   color: #fff;
169 | 
170 | }
171 | .newsletter p {
172 |   font-size: 1.2em;
173 |   color: #fff;
174 | }
175 | .newsletter form {
176 |   width: 100%;
177 |   float: left;
178 |   margin-top: 10px;
179 | }
180 | .newsletter form input {
181 |   width: 40%;
182 |   margin-right: 1%;
183 |   padding: 15px 10px;
184 |   border: 1px solid #fff;
185 |   border-radius: 5px;
186 |   color: #fff;
187 |   background-color: initial;
188 |   float: left;
189 | }
190 | .newsletter button {
191 |   width: 18%;
192 |   margin-top: 6px;
193 |   background-color: #0cae98;
194 |   border: 1px solid #ffffff;
195 |   padding: 15px 10px;
196 |   border-radius: 5px;
197 |   position: flex;
198 |   cursor: pointer;
199 | }
200 | .rodape {
201 |   width: 100%;
202 |   float: left;
203 |   background-color: #13c7ae;
204 |   padding: 20px 8%;
205 | }
206 | .rodape p {
207 |   color: #fff;
208 | }
209 | 
210 | /* Formatação dos Produtos */
211 | 
212 | .titulo {
213 |   font-size: 1.5rem;
214 |   font-weight: 600;
215 |   text-align: center;
216 |   margin-bottom: 2rem;
217 |   background-color: #0cae98;
218 |   border-radius: 8px;
219 |   color: #fff;
220 | }
221 | 
222 | .conteudo {
223 |   display: grid;
224 |   grid-template-columns: repeat(auto-fit, minmax(220px, auto));
225 |   gap: 1.5rem;
226 |   cursor: pointer;
227 | }
228 | 
229 | .box {
230 |   position: relative;
231 |   background-color: #f5f5f5;
232 |   box-shadow: #111;
233 | }
234 | 
235 | .box:hover {
236 |   padding: 10px;
237 |   border-radius: 8px;
238 |   transition: 0.4s;
239 |   background-color: #0cae98;
240 | }
241 | 
242 | .produto {
243 |   width: 100%;
244 |   height: auto;
245 |   margin-bottom: 0.5rem;
246 | }
247 | 
248 | .titulo-produto {
249 |   font-size: 1.1rem;
250 |   font-weight: 600;
251 |   text-decoration: uppercase;
252 |   margin-bottom: 0.5rem;
253 | }
254 | 
255 | .preco {
256 |   font-weight: 500;
257 | }
258 | 
259 | .container {
260 |   padding: 20px 8%;
261 | }
262 | 
263 | .btn2 {
264 |   font-size: 1.2rem;
265 |   font-weight: 550;
266 |   text-decoration: uppercase;
267 |   margin-bottom: 0.5rem;
268 |   border-radius: 8px;
269 |   size: 15px;
270 |   padding: 10px;
271 |   background-color: #0cae98;
272 |   position: center;
273 |   cursor: pointer;
274 | }
275 | 
276 | 
277 | .box-button{
278 |   position: relative;
279 | }
280 | 
281 | .box img{
282 |   border-radius: 8;
283 | }
284 | 
285 | .btn3 {
286 |   font-size: 1.2rem;
287 |   font-weight: 550;
288 |   text-decoration: uppercase;
289 |   margin-bottom: 0.5rem;
290 |   border-radius: 8px;
291 |   size: 15px;
292 |   padding: 10px;
293 |   background-color: #000000;
294 |   position: center;
295 |   cursor: pointer;
296 |   color: #0cae98;
297 | }
298 | 
299 | input[type=text], select, textarea {
300 |   width: 100%; /* Full width */
301 |   padding: 12px; /* Some padding */ 
302 |   border: 1px solid #0cae98; /* Gray border */
303 |   border-radius: 8px; /* Rounded borders */
304 |   box-sizing: border-box; /* Make sure that padding and width stays in place */
305 |   margin-top: 6px; /* Add a top margin */
306 |   margin-bottom: 16px; /* Bottom margin */
307 |   resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
308 | }
309 | 
310 | input[type=submit]:hover {
311 |   background-color: #45a049;
312 | }
313 | 
314 | .contain {
315 |   border-radius: 5px;
316 |   background-color: #e4e4e4;
317 |   padding: 100px;
318 |   
319 | }
320 | 
321 | .center{
322 |   text-align: center;
323 |   cursor: pointer;
324 | }
325 | 
326 | 
327 | /* Justify content */
328 | 
329 | 
330 | 
331 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Projeto02
2 |  Projeto de site que vende e oferece serviços de informática.
3 | 


--------------------------------------------------------------------------------
/contatos.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="pt-br">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |   <meta name="author" content="Mailson Silva">
  9 |   <meta name="description" content="">
 10 |   <meta name="description" content="Loja de informática do Professor Obama">
 11 |   <meta name="keywords" content="Loja, Manutenção, Computadores ">
 12 |   <link rel="shortcut icon" href="img/icons8-monitor-16.png" type="image/x-icon">
 13 |   <link rel="stylesheet" href="css/style.css">
 14 |   <script src="https://kit.fontawesome.com/ff6e4e9108.js" crossorigin="anonymous"></script>
 15 |   <link rel="preconnect" href="https://fonts.googleapis.com">
 16 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 17 |   <link
 18 |     href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,800;1,300;1,400;1,500;1,800&display=swap"
 19 |     rel="stylesheet">
 20 |   <title>Loja de Informática do Obama</title>
 21 | </head>
 22 | 
 23 | <body>
 24 |   <header class="cabecalho">
 25 |     <h1 class="logo">
 26 |       <a href="index.html" title="Loja de Informática do Obama">Loja de informática do Obama</a>
 27 |     </h1>
 28 |     <form action="" method="post">
 29 |       <input type="text" name="busca" id="busca" placeholder="Faça uma busca aqui!">
 30 |       <button><i class="fa-solid fa-magnifying-glass"></i></button>
 31 |     </form>
 32 |   </header>
 33 |   <nav class="menu">
 34 |     <ul>
 35 |       <li><a href="index.html">Home</a></li>
 36 |       <li><a href="produtos.html">Produtos</a></li>
 37 |       <li><a href="servicos.html">Serviços</a></li>
 38 |       <li><a href="contatos.html">Contatos</a></li>
 39 |     </ul>
 40 |     <div class="social-icons">
 41 |       <a href="http://www.facebook.com" class="btn-facebook"><i class="fa-brands fa-facebook-f"></i></a>
 42 |       <a href="http://www.twitter.com" class="btn-twitter"><i class="fa-brands fa-twitter"></i></a>
 43 |       <a href="http://www.google.com" class="btn-google"><i class="fa-brands fa-google"></i></a>
 44 |     </div>
 45 |   </nav>
 46 | 
 47 |   <div class="contain">
 48 |     <h2 class="titulo">Fale Conosco</h2>
 49 |     <form action="action_page.php">
 50 | 
 51 |       <label for="fname">Primeiro Nome</label>
 52 |       <input type="text" id="fname" name="firstname" placeholder="Seu nome..">
 53 | 
 54 |       <label for="lname">Sobrenome</label>
 55 |       <input type="text" id="lname" name="lastname" placeholder="Seu sobrenome..">
 56 | 
 57 |       <label for="lname">e-mail</label>
 58 |       <input type="text" id="lname" name="e-mail" placeholder="Seu e-mail..">
 59 | 
 60 |       <label for="country">País</label>
 61 |       <select id="country" name="country">
 62 |         <option value="usa">Argentina</option>
 63 |         <option value="usa">Brasil</option>
 64 |         <option value="australia">Austrália</option>
 65 |         <option value="usa">China</option>
 66 |         <option value="canada">Canadá</option>
 67 |         <option value="usa">Inglaterra</option>
 68 |         <option value="usa">Japão</option>
 69 |         <option value="usa">USA</option>
 70 |       </select>
 71 | 
 72 |       <label for="subject">Assunto</label>
 73 |       <textarea id="subject" name="subject" placeholder="Escreva algo.." style="height:200px"></textarea>
 74 | 
 75 |       <button class="btn3">Enviar</button>
 76 | 
 77 |      
 78 | 
 79 |     </form>
 80 | 
 81 |     <div class="center">
 82 |       <img src="img/insta.png" alt="" class="center">
 83 |       <img src="img/whats.png" alt="" class="center">
 84 |       <img src="img/mail.png" alt="" class="center">
 85 |     </div>
 86 | 
 87 | 
 88 |   </div>
 89 | 
 90 |   <section class="newsletter">
 91 |     <h3>Newsletter</h3>
 92 |     <p>Receba nossas promoções por e-mail.</p>
 93 |     <form action="" method="post">
 94 |       <input type="text" name="" placeholder="Seu nome">
 95 |       <input type="text" name="" placeholder="Seu e-mail">
 96 |       <button>Cadastrar</button>
 97 |     </form>
 98 |   </section>
 99 |   <footer class="rodape">
100 |     <p>Loja do Obama - Todos os direitos reservados&copy;</p>
101 |   </footer>
102 |   <script src="https://kit.fontawesome.com/0cfdc2ec3d.js" crossorigin="anonymous"></script>
103 | </body>
104 | 
105 | </html>


--------------------------------------------------------------------------------
/img/72165b8655e809c1fef7f2291566fab5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/72165b8655e809c1fef7f2291566fab5.jpg


--------------------------------------------------------------------------------
/img/MicrosoftTeams-image (1).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/MicrosoftTeams-image (1).png


--------------------------------------------------------------------------------
/img/MicrosoftTeams-image (2).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/MicrosoftTeams-image (2).png


--------------------------------------------------------------------------------
/img/MicrosoftTeams-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/MicrosoftTeams-image.png


--------------------------------------------------------------------------------
/img/Proa_Tech_Fundo_Zoom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/Proa_Tech_Fundo_Zoom.png


--------------------------------------------------------------------------------
/img/bx-shopping-bag.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 22h14c1.103 0 2-.897 2-2V9a1 1 0 0 0-1-1h-3V7c0-2.757-2.243-5-5-5S7 4.243 7 7v1H4a1 1 0 0 0-1 1v11c0 1.103.897 2 2 2zM9 7c0-1.654 1.346-3 3-3s3 1.346 3 3v1H9V7zm-4 3h2v2h2v-2h6v2h2v-2h2l.002 10H5V10z"/></svg>


--------------------------------------------------------------------------------
/img/cooler.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/cooler.jpg


--------------------------------------------------------------------------------
/img/daily_07-03.docx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/daily_07-03.docx


--------------------------------------------------------------------------------
/img/firewall.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/firewall.jpg


--------------------------------------------------------------------------------
/img/free-office-wallpaper-26001-26685-hd-wallpapers.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/free-office-wallpaper-26001-26685-hd-wallpapers.webp


--------------------------------------------------------------------------------
/img/gabinete.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/gabinete.webp


--------------------------------------------------------------------------------
/img/headset.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/headset.jpg


--------------------------------------------------------------------------------
/img/icons8-monitor-16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/icons8-monitor-16.png


--------------------------------------------------------------------------------
/img/info.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/info.jpg


--------------------------------------------------------------------------------
/img/insta.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/insta.png


--------------------------------------------------------------------------------
/img/mail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/mail.png


--------------------------------------------------------------------------------
/img/manun.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/manun.jpg


--------------------------------------------------------------------------------
/img/mini_cabeamento_estruturado.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/mini_cabeamento_estruturado.jpg


--------------------------------------------------------------------------------
/img/mini_controle_de_internet.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/mini_controle_de_internet.jpg


--------------------------------------------------------------------------------
/img/mini_manutencao_de_computador.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/mini_manutencao_de_computador.jpg


--------------------------------------------------------------------------------
/img/mini_manutencao_hardware.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/mini_manutencao_hardware.jpg


--------------------------------------------------------------------------------
/img/mini_remoaao_virus_pc.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/mini_remoaao_virus_pc.jpg


--------------------------------------------------------------------------------
/img/mini_winconnection_controle_internet.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/mini_winconnection_controle_internet.jpg


--------------------------------------------------------------------------------
/img/monitor.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/monitor.webp


--------------------------------------------------------------------------------
/img/mouse.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/mouse.jpg


--------------------------------------------------------------------------------
/img/nuvem.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/nuvem.jpg


--------------------------------------------------------------------------------
/img/placa de video.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/placa de video.webp


--------------------------------------------------------------------------------
/img/placa mãe.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/placa mãe.webp


--------------------------------------------------------------------------------
/img/processador.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/processador.jpg


--------------------------------------------------------------------------------
/img/ram.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/ram.jpg


--------------------------------------------------------------------------------
/img/rede.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/rede.jpg


--------------------------------------------------------------------------------
/img/site.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/site.jpg


--------------------------------------------------------------------------------
/img/ssd.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/ssd.jpg


--------------------------------------------------------------------------------
/img/teclado.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/teclado.webp


--------------------------------------------------------------------------------
/img/tecnico.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/tecnico.jpg


--------------------------------------------------------------------------------
/img/whats.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kaizen2ba2/LojaDoObama-HTML-CSS/5f50c185a602d8b388737309e61796c9cefe1774/img/whats.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="pt-br">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |   <meta name="author" content="Mailson Silva">
  9 |   <meta name="description" content="">
 10 |   <meta name="description" content="Loja de informática do Professor Obama">
 11 |   <meta name="keywords" content="Loja, Manutenção, Computadores ">
 12 |   <link rel="shortcut icon" href="img/icons8-monitor-16.png" type="image/x-icon">
 13 |   <link rel="stylesheet" href="css/style.css">
 14 |   <script src="https://kit.fontawesome.com/ff6e4e9108.js" crossorigin="anonymous"></script>
 15 |   <link rel="preconnect" href="https://fonts.googleapis.com">
 16 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 17 |   <link
 18 |     href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,800;1,300;1,400;1,500;1,800&display=swap"
 19 |     rel="stylesheet">
 20 |   <title>Loja de Informática do Obama</title>
 21 | </head>
 22 | 
 23 | <body>
 24 |   <header class="cabecalho">
 25 |     <h1 class="logo">
 26 |       <a href="index.html" title="Loja de Informática do Obama">Loja de informática do Obama</a>
 27 |     </h1>
 28 |     <form action="" method="post">
 29 |       <input type="text" name="busca" id="busca" placeholder="Faça uma busca aqui!">
 30 |       <button><i class="fa-solid fa-magnifying-glass"></i></button>
 31 |     </form>
 32 |   </header>
 33 |   <nav class="menu">
 34 |     <ul>
 35 |       <li><a href="index.html">Home</a></li>
 36 | 
 37 |       <li><a href="produtos.html">Produtos</a></li>
 38 | 
 39 |       <li><a href="servicos.html">Serviços</a></li>
 40 | 
 41 |       <li><a href="contatos.html">Contatos</a></li>
 42 |     </ul>
 43 |     <div class="social-icons">
 44 |       <a href="http://www.facebook.com" class="btn-facebook"><i class="fa-brands fa-facebook-f"></i></a>
 45 |       <a href="http://www.twitter.com" class="btn-twitter"><i class="fa-brands fa-twitter"></i></a>
 46 |       <a href="http://www.google.com" class="btn-google"><i class="fa-brands fa-google"></i></a>
 47 |     </div>
 48 |   </nav>
 49 |   <main class="principal">
 50 |     <article class="sobre">
 51 |       <h2>Sobre nós</h2>
 52 |       <img src="img/MicrosoftTeams-image (2).png"
 53 |         alt="Imagem de uma Loja de Informática com três pessoas, sendo dois homens e uma mulher. Mulher vestida com social clara sendo abraçada por homem branco com camisa social azul escuro e homem vestido de camisa social branca com perfil de vendedor">
 54 |       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum maiores porro sunt voluptate dolorem
 55 |         tenetur, quaerat suscipit reprehenderit facilis minima sequi provident, non delectus enim veritatis
 56 |         necessitatibus natus ea unde!
 57 |         Hic minima quibusdam in nesciunt eius quod sapiente consequatur corporis dolore eos eum similique magnam
 58 |         fugit amet nam quae dolor, atque distinctio eveniet necessitatibus, ullam rem eligendi? Facere, quae
 59 |         reprehenderit!</p>
 60 |       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi dolores, velit accusamus doloribus dicta
 61 |         magnam aspernatur nulla impedit maiores placeat minima accusantium facere ipsum aliquid qui dolor enim
 62 |         laudantium voluptatibus!</p>
 63 |       <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis aspernatur nobis esse quisquam dignissimos,
 64 |         optio doloribus assumenda quis magni rem molestias ea veniam ipsam voluptatibus eaque est dicta temporibus
 65 |         ullam.</p>
 66 |       <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae placeat ut quaerat, nostrum nulla aliquid,
 67 |         reiciendis laboriosam quidem maxime laborum cumque amet illum commodi iste consequatur pariatur repudiandae
 68 |         neque repellat?</p>
 69 |       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel vero accusamus voluptatem illo quos aperiam
 70 |         expedita fuga a architecto! Error quasi obcaecati rem doloremque quaerat in harum odit dolorem neque!</p>
 71 |       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel vero accusamus voluptatem illo quos aperiam
 72 |         expedita fuga a architecto! Error quasi obcaecati rem doloremque quaerat in harum odit dolorem neque!</p>
 73 |     </article>
 74 |     <aside class="onde-estamos">
 75 |       <h2>Onde estamos</h2>
 76 |       <p>Rua: Tito n° 54 - Vila Romana - São Paulo - SP - Brasil</p>
 77 |       <iframe
 78 |         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7316.2372424682!2d-46.7026035243763!3d-23.528235601898785!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94cef8775663b04f%3A0x923835e9005f8309!2sSenac%20Lapa%20Tito!5e0!3m2!1spt-BR!2sbr!4v1647265776133!5m2!1spt-BR!2sbr"
 79 |         style="border:0;" allowfullscreen="" loading="lazy"></iframe>
 80 |       <h2>Contatos</h2>
 81 |       <ul>
 82 |         <li><i class="fa-solid fa-phone"></i>(11) 930277955</li>
 83 |         <li><i class="fa-brands fa-whatsapp"></i>(11) 930277955</li>
 84 |         <li><i class="fa-solid fa-envelope"></i>bracocurto@gmail.com</li>
 85 |       </ul>
 86 |     </aside>
 87 |   </main>
 88 |   <section class="newsletter">
 89 |     <h3>Newsletter</h3>
 90 |     <p>Receba nossas promoções por e-mail.</p>
 91 |     <form action="" method="post">
 92 |       <input type="text" name="" placeholder="Seu nome">
 93 |       <input type="text" name="" placeholder="Seu e-mail">
 94 |       <button>Cadastrar</button>
 95 |     </form>
 96 |   </section>
 97 |   <footer class="rodape">
 98 |     <p>Loja do Obama - Todos os direitos reservados&copy;</p>
 99 |   </footer>
100 |   <script src="https://kit.fontawesome.com/0cfdc2ec3d.js" crossorigin="anonymous"></script>
101 | </body>
102 | 
103 | </html>


--------------------------------------------------------------------------------
/produtos.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="pt-br">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |   <meta name="author" content="Mailson Silva">
  9 |   <meta name="description" content="">
 10 |   <meta name="description" content="Loja de informática do Professor Obama">
 11 |   <meta name="keywords" content="Loja, Manutenção, Computadores ">
 12 |   <link rel="shortcut icon" href="img/icons8-monitor-16.png" type="image/x-icon">
 13 |   <link rel="stylesheet" href="css/style.css">
 14 |   <script src="https://kit.fontawesome.com/ff6e4e9108.js" crossorigin="anonymous"></script>
 15 |   <link rel="preconnect" href="https://fonts.googleapis.com">
 16 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 17 |   <link
 18 |     href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,800;1,300;1,400;1,500;1,800&display=swap"
 19 |     rel="stylesheet">
 20 |   <title>Loja de Informática do Obama</title>
 21 | </head>
 22 | 
 23 | <body>
 24 |   <header class="cabecalho">
 25 |     <h1 class="logo">
 26 |       <a href="index.html" title="Loja de Informática do Obama">Loja de informática do Obama</a>
 27 |     </h1>
 28 |     <form action="" method="post">
 29 |       <input type="text" name="busca" id="busca" placeholder="Faça uma busca aqui!">
 30 |       <button><i class="fa-solid fa-magnifying-glass"></i></button>
 31 |     </form>
 32 |   </header>
 33 |   <nav class="menu">
 34 |     <ul>
 35 |       <li><a href="index.html">Home</a></li>
 36 |       <li><a href="produtos.html">Produtos</a></li>
 37 |       <li><a href="servicos.html">Serviços</a></li>
 38 |       <li><a href="contatos.html">Contatos</a></li>
 39 |     </ul>
 40 |     <div class="social-icons">
 41 |       <a href="http://www.facebook.com" class="btn-facebook"><i class="fa-brands fa-facebook-f"></i></a>
 42 |       <a href="http://www.twitter.com" class="btn-twitter"><i class="fa-brands fa-twitter"></i></a>
 43 |       <a href="http://www.google.com" class="btn-google"><i class="fa-brands fa-google"></i></a>
 44 |     </div>
 45 |   </nav>
 46 | 
 47 |  <section class="container">
 48 |   <h2 class="titulo">Periféricos e Peças de Pc</h2>
 49 |   <div class="conteudo">
 50 | 
 51 |     <div class="box">
 52 |       <img src="img/placa de video.webp" alt="" class="produto">
 53 |       <h2 class="titulo-produto">Placa de Vídeo RTX 3060 Ti</h2>
 54 |       <span class="preco">R$2799,99</span>
 55 |       <i class='bx bx-shopping-bag'></i>
 56 |     </div>
 57 | 
 58 |     <div class="box">
 59 |       <img src="img/placa mãe.webp" alt="" class="produto">
 60 |       <h2 class="titulo-produto">
 61 |         Placa Mãe Gigabyte H410M</h2>
 62 |       <span class="preco">R$590,00</span>
 63 |       <i class='bx bx-shopping-bag'></i>
 64 |     </div>
 65 | 
 66 |     <div class="box">
 67 |       <img src="img/mouse.jpg" alt="" class="produto">
 68 |       <h2 class="titulo-produto">Redragon Impact RGB</h2>
 69 |       <span class="preco">R$115,99</span>
 70 |       <i class='bx bx-shopping-bag'></i>
 71 |     </div>
 72 | 
 73 |     <div class="box">
 74 |       <img src="img/monitor.webp" alt="" class="produto">
 75 |       <h2 class="titulo-produto">Monitor Gamer Acer Nitro</h2>
 76 |       <span class="preco">R$970,90</span>
 77 |       <i class='bx bx-shopping-bag'></i>
 78 |     </div>
 79 | 
 80 |     <div class="box">
 81 |       <img src="img/processador.jpg" alt="" class="produto">
 82 |       <h2 class="titulo-produto">Processador Intel Core-I3</h2>
 83 |       <span class="preco">R$1235,36</span>
 84 |       <i class='bx bx-shopping-bag'></i>
 85 |     </div>
 86 | 
 87 |     <div class="box">
 88 |       <img src="img/72165b8655e809c1fef7f2291566fab5.jpg" alt="" class="produto">
 89 |       <h2 class="titulo-produto">Fonte Atx Pc 750w</h2>
 90 |       <span class="preco">R$319,00</span>
 91 |       <i class='bx bx-shopping-bag'></i>
 92 |     </div>
 93 | 
 94 |     <div class="box">
 95 |       <img src="img/headset.jpg" alt="" class="produto">
 96 |       <h2 class="titulo-produto">Headset Gamer HyperX Cloud</h2>
 97 |       <span class="preco">R$499,99</span>
 98 |       <i class='bx bx-shopping-bag'></i>
 99 |     </div>
100 | 
101 |     <div class="box">
102 |       <img src="img/teclado.webp" alt="" class="produto">
103 |       <h2 class="titulo-produto">Teclado Gamer Mecânico HP</h2>
104 |       <span class="preco">R$399,90</span>
105 |       <i class='bx bx-shopping-bag'></i>
106 |     </div>
107 |     <div class="box">
108 |       <img src="img/ssd.jpg" alt="" class="produto">
109 |       <h2 class="titulo-produto">SSD 120 GB Gigabyte</h2>
110 |       <span class="preco">R$127,99</span>
111 |       <i class='bx bx-shopping-bag'></i>
112 |     </div>
113 | 
114 |     <div class="box">
115 |       <img src="img/ram.jpg" alt="" class="produto">
116 |       <h2 class="titulo-produto">Memória RAM Corsair</h2>
117 |       <span class="preco">R$560,70</span>
118 |       <i class='bx bx-shopping-bag'></i>
119 |     </div>
120 | 
121 |     <div class="box">
122 |       <img src="img/cooler.jpg" alt="" class="produto">
123 |       <h2 class="titulo-produto">Water Cooler ML 240L V2</h2>
124 |       <span class="preco">R$840,00</span>
125 |       <i class='bx bx-shopping-bag'></i>
126 |     </div>
127 | 
128 |     <div class="box">
129 |       <img src="img/gabinete.webp" alt="" class="produto">
130 |       <h2 class="titulo-produto">Gabinete Gamer PCFort Lines</h2>
131 |       <span class="preco">R$210,80</span>
132 |       <i class='bx bx-shopping-bag'></i>
133 |     </div>
134 | 
135 |     <div class="box-button">
136 |      <button class="btn2">Mais Produtos</button>
137 |     </div>
138 | 
139 |   </div>
140 |  </section>
141 | 
142 |   <section class="newsletter">
143 |     <h3>Newsletter</h3>
144 |     <p>Receba nossas promoções por e-mail.</p>
145 |     <form action="" method="post">
146 |       <input type="text" name="" placeholder="Seu nome">
147 |       <input type="text" name="" placeholder="Seu e-mail">
148 |       <button>Cadastrar</button>
149 |     </form>
150 |   </section>
151 |   <footer class="rodape">
152 |     <p>Loja do Obama - Todos os direitos reservados&copy;</p>
153 |   </footer>
154 |   <script src="https://kit.fontawesome.com/0cfdc2ec3d.js" crossorigin="anonymous"></script>
155 | </body>
156 | 
157 | </html>


--------------------------------------------------------------------------------
/servicos.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="pt-br">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |   <meta name="author" content="Mailson Silva">
  9 |   <meta name="description" content="">
 10 |   <meta name="description" content="Loja de informática do Professor Obama">
 11 |   <meta name="keywords" content="Loja, Manutenção, Computadores ">
 12 |   <link rel="shortcut icon" href="img/icons8-monitor-16.png" type="image/x-icon">
 13 |   <link rel="stylesheet" href="css/style.css">
 14 |   <script src="https://kit.fontawesome.com/ff6e4e9108.js" crossorigin="anonymous"></script>
 15 |   <link rel="preconnect" href="https://fonts.googleapis.com">
 16 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 17 |   <link
 18 |     href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,800;1,300;1,400;1,500;1,800&display=swap"
 19 |     rel="stylesheet">
 20 |   <title>Loja de Informática do Obama</title>
 21 | </head>
 22 | 
 23 | <body>
 24 |   <header class="cabecalho">
 25 |     <h1 class="logo">
 26 |       <a href="index.html" title="Loja de Informática do Obama">Loja de informática do Obama</a>
 27 |     </h1>
 28 |     <form action="" method="post">
 29 |       <input type="text" name="busca" id="busca" placeholder="Faça uma busca aqui!">
 30 |       <button><i class="fa-solid fa-magnifying-glass"></i></button>
 31 |     </form>
 32 |   </header>
 33 |   <nav class="menu">
 34 |     <ul>
 35 |       <li><a href="index.html">Home</a></li>
 36 |       <li><a href="produtos.html">Produtos</a></li>
 37 |       <li><a href="servicos.html">Serviços</a></li>
 38 |       <li><a href="contatos.html">Contatos</a></li>
 39 |     </ul>
 40 |     <div class="social-icons">
 41 |       <a href="http://www.facebook.com" class="btn-facebook"><i class="fa-brands fa-facebook-f"></i></a>
 42 |       <a href="http://www.twitter.com" class="btn-twitter"><i class="fa-brands fa-twitter"></i></a>
 43 |       <a href="http://www.google.com" class="btn-google"><i class="fa-brands fa-google"></i></a>
 44 |     </div>
 45 |   </nav>
 46 | 
 47 |   <section class="container">
 48 |     <h2 class="titulo">Prestação de Serviços</h2>
 49 |     <div class="conteudo">
 50 | 
 51 |       <div class="box">
 52 |         <img src="img/nuvem.jpg" alt="" class="produto">
 53 |         <h2 class="titulo-produto">Backup em Nuvem</h2>
 54 |         <button class="btn3">Veja preços</button>
 55 |       </div>
 56 | 
 57 |       <div class="box">
 58 |         <img src="img/info.jpg" alt="" class="produto">
 59 |         <h2 class="titulo-produto">Suportre em Informática</h2>
 60 |         <button class="btn3">Veja preços</button>
 61 |       </div>
 62 | 
 63 |       <div class="box">
 64 |         <img src="img/firewall.jpg" alt="" class="produto">
 65 |         <h2 class="titulo-produto">Proteção de Rede</h2>
 66 |         <button class="btn3">Veja preços</button>
 67 |       </div>
 68 | 
 69 |       <div class="box">
 70 |         <img src="img/mini_cabeamento_estruturado.jpg" alt="" class="produto">
 71 |         <h2 class="titulo-produto">Cabeamento Estruturado</h2>
 72 |         <button class="btn3">Veja preços</button>
 73 |       </div>
 74 | 
 75 |       <div class="box">
 76 |         <img src="img/mini_manutencao_de_computador.jpg" alt="" class="produto">
 77 |         <h2 class="titulo-produto">Manuntenção de Pc's</h2>
 78 |         <button class="btn3">Veja preços</button>
 79 |       </div>
 80 | 
 81 |       <div class="box">
 82 |         <img src="img/mini_remoaao_virus_pc.jpg" alt="" class="produto">
 83 |         <h2 class="titulo-produto">Remoção de Vírus</h2>
 84 |         <button class="btn3">Veja preços</button>
 85 |       </div>
 86 | 
 87 |       <div class="box">
 88 |         <img src="img/rede.jpg" alt="" class="produto">
 89 |         <h2 class="titulo-produto">Manuntenção de Rede</h2>
 90 |         <button class="btn3">Veja preços</button>
 91 |       </div>
 92 | 
 93 |       <div class="box">
 94 |         <img src="img/tecnico.jpg" alt="" class="produto">
 95 |         <h2 class="titulo-produto">Suporte Técnico</h2>
 96 |         <button class="btn3">Veja preços</button>
 97 |       </div>
 98 |       <div class="box">
 99 |         <img src="img/site.jpg" alt="" class="produto">
100 |         <h2 class="titulo-produto">Desenvolvimento de Sites</h2>
101 |         <button class="btn3">Veja preços</button>
102 |       </div>
103 | 
104 |       <div class="box">
105 |         <img src="img/mini_winconnection_controle_internet.jpg" alt="" class="produto">
106 |         <h2 class="titulo-produto">Winconnection</h2>
107 |         <button class="btn3">Veja preços</button>
108 |       </div>
109 | 
110 |       <div class="box">
111 |         <img src="img/mini_manutencao_hardware.jpg" alt="" class="produto">
112 |         <h2 class="titulo-produto">Manuntenção de Hardware</h2>
113 |         <button class="btn3">Veja preços</button>
114 |       </div>
115 | 
116 |       <div class="box">
117 |         <img src="img/mini_controle_de_internet.jpg" alt="" class="produto">
118 |         <h2 class="titulo-produto">Controle de Internet</h2>
119 |         <button class="btn3">Veja preços</button>
120 |       </div>
121 | 
122 | 
123 |     </div>
124 |   </section>
125 | 
126 |   <section class="newsletter">
127 |     <h3>Newsletter</h3>
128 |     <p>Receba nossas promoções por e-mail.</p>
129 |     <form action="" method="post">
130 |       <input type="text" name="" placeholder="Seu nome">
131 |       <input type="text" name="" placeholder="Seu e-mail">
132 |       <button>Cadastrar</button>
133 |     </form>
134 |   </section>
135 |   <footer class="rodape">
136 |     <p>Loja do Obama - Todos os direitos reservados&copy;</p>
137 |   </footer>
138 |   <script src="https://kit.fontawesome.com/0cfdc2ec3d.js" crossorigin="anonymous"></script>
139 | </body>
140 | 
141 | </html>


--------------------------------------------------------------------------------