├── README.md
├── css
    ├── lele.txt
    └── style1.css
├── img
    ├── AirPods2.jpg
    ├── Alexa.jpg
    ├── JBL Boobox.jpg
    ├── PC Gamer.jpg
    ├── VR 2.jpg
    ├── VR.jpg
    ├── camera caon.jpg
    ├── foto 2.jfif
    ├── foto1.jfif
    ├── headphone gamer2.jpg
    ├── headphone.jpg
    ├── icone2.png
    ├── icons8-informática-16.png
    ├── logo.png
    ├── mac book.jpg
    ├── microfone vintage.jpg
    ├── microfone.jpg
    ├── mouse gamer.avif
    ├── mouse.webp
    └── teclado.jpg
├── index.html
├── produtos.html
└── style.css


/README.md:
--------------------------------------------------------------------------------
1 | # Projeto02-HTML-CSS
2 | Projeto02 de HTML e CSS para criação de um site que comercializa peças de informática.
3 | 


--------------------------------------------------------------------------------
/css/lele.txt:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/css/style1.css:
--------------------------------------------------------------------------------
  1 | /* RESET CSS */
  2 | 
  3 | * {
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     font-size: 100%;
  7 |     font-family: 'Open Sans', sans-serif;
  8 |     font-weight: normal;
  9 |     box-sizing: border-box;
 10 |     border: none;
 11 |     outline: none;
 12 | 
 13 | }
 14 | 
 15 | img {
 16 |     max-width: 100%;
 17 | }
 18 | 
 19 | ul {
 20 |     list-style-type: none;
 21 | }
 22 | 
 23 | a {
 24 |     text-decoration: none;
 25 | }
 26 | 
 27 | h2 {
 28 |     font-size: 1.5em;
 29 |     color: #333;
 30 | }
 31 | 
 32 | p {
 33 |     font-size: 1em;
 34 |     color: #777;
 35 | }
 36 | 
 37 | /* CABECALHO */
 38 | 
 39 | .cabecalho {
 40 |     width: 100%;
 41 |     float: left;
 42 |     padding: 50px 8%;
 43 |     background-color: #13c7ae;
 44 |     /* background: linear-gradient(red,blue) */
 45 | }
 46 | 
 47 | .logo {
 48 |     width: 221px;
 49 |     height: 48px;
 50 |     float: left;
 51 |     font-size: 0;
 52 |     background: url(../img/MicrosoftTeams-image.png);
 53 | }
 54 | 
 55 | .cabecalho form {
 56 |     width: 30%;
 57 |     float: right;
 58 | }
 59 | 
 60 | .cabecalho form input[type="search"] {
 61 |     width: 85%;
 62 |     float: left;
 63 |     padding: 15px 10px 15px 10px;
 64 |     border-radius: 15px 0 0 15px;
 65 | 
 66 | }
 67 | 
 68 | .cabecalho button {
 69 |     width: 15%;
 70 |     float: right;
 71 |     padding: 15px 10px;
 72 |     background-color: #0cae98;
 73 |     color: white;
 74 |     cursor: pointer;
 75 |     border-radius: 0 15px 15px 0;
 76 | }
 77 | 
 78 | /* MENU */
 79 | .menu {
 80 |     width: 100%;
 81 |     float: left;
 82 |     background-color: #111;
 83 |     padding: 18px 8%;
 84 | }
 85 | 
 86 | .menu li {
 87 |     float: left;
 88 | }
 89 | 
 90 | .menu li a {
 91 |     color: #9d9d9d;
 92 |     margin-right: 25px;
 93 |     font-size: 19px;
 94 | }
 95 | 
 96 | .menu li a:hover {
 97 |     color: white;
 98 | 
 99 | }
100 | 
101 | /* SOCIAL-ICONS */
102 | .social-icons {
103 |     float: right
104 | }
105 | 
106 | .social-icons a {
107 |     color: #fff;
108 |     float: left;
109 |     margin-left: 13px;
110 | }
111 | 
112 | .btn-facebook :hover {
113 |     color: #3b5998;
114 | }
115 | 
116 | .btn-twitter :hover {
117 |     color: #00acee;
118 | }
119 | 
120 | .btn-google :hover {
121 |     color: #d73d32;
122 | }
123 | 
124 | /* PRINCIPAL */
125 | .principal {
126 |     width: 100%;
127 |     float: left;
128 |     padding: 20px 8%;
129 | }
130 | 
131 | .sobre {
132 |     width: 70%;
133 |     float: left;
134 |     padding: 0 20px 20px 0;
135 | }
136 | 
137 | .sobre h2 {
138 |     margin-bottom: 15px;
139 | }
140 | 
141 | .sobre img {
142 |     width: 50%;
143 |     float: left;
144 |     border-radius: 5px;
145 |     margin: 0 15px 15px 0;
146 | }
147 | 
148 | .sobre p {
149 |     text-align: justify;
150 | 
151 | }
152 | 
153 | /* PRODUTOS */
154 | 
155 | /* .imagem{
156 |     width: 300px;
157 |     height: 270px;
158 | } */
159 | 
160 | .notebook {
161 |     background-color: #9d9d9d43;
162 |     width: 23%;
163 |     float: left;
164 |     padding: 0 20px 20px 0;
165 |     border-radius: 15px;
166 |     box-shadow: 0 4px 8px 0 #74747433, 0 6px 20px 0 #74747433;
167 |     margin: 10px;
168 |     margin-bottom: 30px;
169 | }
170 | 
171 | .fone-de-ouvido {
172 |     background-color: #9d9d9d43;
173 |     width: 20%;
174 |     height: 292px;
175 |     float: left;
176 |     padding: 0 20px 20px 0;
177 |     border-radius: 15px;
178 |     box-shadow: 0 4px 8px 0 #74747433, 0 6px 20px 0 #74747433;
179 |     margin: 10px;
180 |     margin-bottom: 30px;
181 | }
182 | 
183 | .mouse {
184 |     background-color: #9d9d9d43;
185 |     width: 20%;
186 |     height: 292px;
187 |     float: left;
188 |     padding: 0 20px 20px 0;
189 |     border-radius: 15px;
190 |     box-shadow: 0 4px 8px 0 #74747433, 0 6px 20px 0 #74747433;
191 |     margin: 10px;
192 |     margin-bottom: 30px;
193 | }
194 | 
195 | /* SIDEBAR */
196 | .onde-estamos {
197 |     width: 30%;
198 |     float: right;
199 |     padding: 10px 20px;
200 |     background-color: #f5f5f5;
201 |     border-radius: 7px;
202 | }
203 | 
204 | .onde-estamos h2 {
205 |     margin-bottom: 7px;
206 | }
207 | 
208 | .onde-estamos p {
209 |     color: #111;
210 | }
211 | 
212 | .onde-estamos iframe {
213 |     width: 100%;
214 |     height: 250px;
215 |     margin: 20px 0px;
216 | }
217 | 
218 | /* NEWSLETTER */
219 | .newsletter {
220 |     width: 100%;
221 |     float: left;
222 |     background-color: #111;
223 |     padding: 50px 8%;
224 | }
225 | 
226 | .newsletter h3 {
227 |     font-size: 1.8em;
228 |     color: #fff;
229 | }
230 | 
231 | .newsletter p {
232 |     font-size: 1.2em;
233 |     color: #fff;
234 | }
235 | 
236 | .newsletter form {
237 |     width: 100%;
238 |     float: left;
239 |     margin-top: 10px;
240 | }
241 | 
242 | .newsletter form input {
243 |     width: 40%;
244 |     margin-right: 1%;
245 |     padding: 15px 10px;
246 |     border: 1px solid #fff;
247 |     border-radius: 5px;
248 |     color: #fff;
249 |     background-color: initial;
250 |     float: left;
251 | }
252 | 
253 | .newsletter button{
254 |     width: 18%;
255 | background-color: #fff;
256 | padding: 15px 10px;
257 | border-radius: 7px;
258 | float:right;
259 | cursor: pointer;
260 | }
261 | 
262 | .rodape{
263 |     width: 100%;
264 |     float:left;
265 |     background-color: #13c7ae;
266 |     padding: 20px 8%;
267 | }
268 | 
269 | .rodape p{
270 |     color:#fff
271 | }


--------------------------------------------------------------------------------
/img/AirPods2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lele-16/Projeto02-HTML-CSS/6395fd392a83143039587f6371bc4e2baf2766a0/img/AirPods2.jpg


--------------------------------------------------------------------------------
/img/Alexa.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lele-16/Projeto02-HTML-CSS/6395fd392a83143039587f6371bc4e2baf2766a0/img/Alexa.jpg


--------------------------------------------------------------------------------
/img/JBL Boobox.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lele-16/Projeto02-HTML-CSS/6395fd392a83143039587f6371bc4e2baf2766a0/img/JBL Boobox.jpg


--------------------------------------------------------------------------------
/img/PC Gamer.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lele-16/Projeto02-HTML-CSS/6395fd392a83143039587f6371bc4e2baf2766a0/img/PC Gamer.jpg


--------------------------------------------------------------------------------
/img/VR 2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lele-16/Projeto02-HTML-CSS/6395fd392a83143039587f6371bc4e2baf2766a0/img/VR 2.jpg


--------------------------------------------------------------------------------
/img/VR.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lele-16/Projeto02-HTML-CSS/6395fd392a83143039587f6371bc4e2baf2766a0/img/VR.jpg


--------------------------------------------------------------------------------
/img/camera caon.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lele-16/Projeto02-HTML-CSS/6395fd392a83143039587f6371bc4e2baf2766a0/img/camera caon.jpg


--------------------------------------------------------------------------------
/img/foto 2.jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lele-16/Projeto02-HTML-CSS/6395fd392a83143039587f6371bc4e2baf2766a0/img/foto 2.jfif


--------------------------------------------------------------------------------
/img/foto1.jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lele-16/Projeto02-HTML-CSS/6395fd392a83143039587f6371bc4e2baf2766a0/img/foto1.jfif


--------------------------------------------------------------------------------
/img/headphone gamer2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lele-16/Projeto02-HTML-CSS/6395fd392a83143039587f6371bc4e2baf2766a0/img/headphone gamer2.jpg


--------------------------------------------------------------------------------
/img/headphone.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lele-16/Projeto02-HTML-CSS/6395fd392a83143039587f6371bc4e2baf2766a0/img/headphone.jpg


--------------------------------------------------------------------------------
/img/icone2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lele-16/Projeto02-HTML-CSS/6395fd392a83143039587f6371bc4e2baf2766a0/img/icone2.png


--------------------------------------------------------------------------------
/img/icons8-informática-16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lele-16/Projeto02-HTML-CSS/6395fd392a83143039587f6371bc4e2baf2766a0/img/icons8-informática-16.png


--------------------------------------------------------------------------------
/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lele-16/Projeto02-HTML-CSS/6395fd392a83143039587f6371bc4e2baf2766a0/img/logo.png


--------------------------------------------------------------------------------
/img/mac book.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lele-16/Projeto02-HTML-CSS/6395fd392a83143039587f6371bc4e2baf2766a0/img/mac book.jpg


--------------------------------------------------------------------------------
/img/microfone vintage.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lele-16/Projeto02-HTML-CSS/6395fd392a83143039587f6371bc4e2baf2766a0/img/microfone vintage.jpg


--------------------------------------------------------------------------------
/img/microfone.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lele-16/Projeto02-HTML-CSS/6395fd392a83143039587f6371bc4e2baf2766a0/img/microfone.jpg


--------------------------------------------------------------------------------
/img/mouse gamer.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lele-16/Projeto02-HTML-CSS/6395fd392a83143039587f6371bc4e2baf2766a0/img/mouse gamer.avif


--------------------------------------------------------------------------------
/img/mouse.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lele-16/Projeto02-HTML-CSS/6395fd392a83143039587f6371bc4e2baf2766a0/img/mouse.webp


--------------------------------------------------------------------------------
/img/teclado.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lele-16/Projeto02-HTML-CSS/6395fd392a83143039587f6371bc4e2baf2766a0/img/teclado.jpg


--------------------------------------------------------------------------------
/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="description" content="Loja de Informática do Obama">
 9 |     <meta name="keywords" content="E-commerce,Loja,Informática">
10 |     <meta: name="Author" content="Letícia Pereira">
11 |         <meta: name="refresh">
12 |             <link rel="shortcut icon" href="img/icons8-informática-16.png" type="image/x-icon">
13 |             <!-- <link rel="stylesheet" href="css/style.css"> -->
14 |             <link rel="stylesheet" href="css/style1.css">
15 |             <title>Loja de Informática</title>
16 | </head>
17 | 
18 | <body>
19 |     <header class="cabecalho">
20 |         <h1 class="logo"><a href="index.html" title="Loja de Informática do Obama">Loja de Informática</a></h1>
21 |         <form action="" method="post">
22 |             <input type="search" name="busca" id="busca" placeholder="Faça sua busca aqui!">
23 |             <button><i class="fa-solid fa-magnifying-glass"></i></button>
24 |         </form>
25 |     </header>
26 |     <nav class="menu">
27 | 
28 | 
29 |         <ul>
30 |             <li><a href="index.html">HOME</a></li>
31 |             <li><a href="produtos.html">PRODUTOS</a></li>
32 |             <li><a href="servicos.html">SERVIÇOS</a></li>
33 |             <li><a href="contatos.html">CONTATOS</a></li>
34 |         </ul>
35 | 
36 |         <div class="social-icons">
37 |             <a href="http://facebook.com" class="btn-facebook"><i class="fa-brands fa-facebook"></i></a>
38 |             <a href="http://www.twitter.com" class="btn-twitter"><i class="fa-brands fa-twitter"></i></i></a>
39 |             <a href="http://www.google.com.br" class="btn-google"><i class="fa-brands fa-google"></i></a>
40 |         </div>
41 |     </nav>
42 |     <main class="principal">
43 |         <article class="sobre">
44 |             <h2>SOBRE NÓS</h2>
45 |             <img src="img/foto1.jfif"
46 |                 alt="imagem de uma loja de informática com três pessoas, sendo dois homens e uma mulher. Mulher vestida com roupa social azul clara sendo abraçada por hoeme banco com camisa social azul escuro e homem vestido de camisa social branca com perfil de vendedor.">
47 |             <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime aliquam ex natus alias placeat, ullam
48 |                 nulla quam et quos? Necessitatibus vel nobis quod id eius commodi minima autem magni beatae?</p>
49 |             <p>Aspernatur corrupti cumque consequatur in commodi ipsum esse doloremque, laboriosam optio quas illo
50 |                 veritatis inventore numquam voluptate omnis minima enim laudantium nam aliquid error dignissimos
51 |                 necessitatibus placeat? Aliquid, labore doloribus!</p>
52 |             <p>Officiis iure eligendi nisi amet iusto impedit adipisci, perspiciatis et </p>
53 |             <p>Nihil velit, aliquam perferendis quisquam natus architecto neque dolores ab ad, quaerat quod nulla ipsa
54 |                 illo! Eligendi, sapiente blanditiis quos laudantium esse modi nesciunt fugiat voluptatibus quas veniam
55 |                 omnis rerum.</p>
56 |             <p>Ullam, explicabo eveniet. Cum pariatur eveniet nobis repudiandae tempore corrupti molestiae adipisci
57 |                 suscipit hic, iure iste sunt aspernatur mollitia incidunt nam inventore architecto sequi soluta ea
58 |                 impedit dolores quod nisi.</p>
59 |             <p>Animi itaque inventore tenetur? Ea, maxime nam aspernatur cumque ducimus facere explicabo eveniet eos,
60 |                 nulla tempora sed veritatis ratione autem quas quam soluta velit modi assumenda. Quam quas sunt vero.
61 |             </p>
62 |            
63 |         </article>
64 | 
65 |         <aside class="onde-estamos"> 
66 |             <h2>Onde Estamos</h2>
67 |             <p>Rua:Tito, nº 54 - Vila Romana - São Paulo - SP - Brasil</p>
68 |             <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3658.1225690942842!2d-46.69400408532744!3d-23.528093584699377!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94cef8775663b04f%3A0x923835e9005f8309!2sSenac%20Lapa%20Tito!5e0!3m2!1spt-BR!2sbr!4v1678296427498!5m2!1spt-BR!2sbr"  style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
69 |             <h2>Contatos</h2>
70 |            <ul>
71 |             <li><i class="fa-solid fa-phone"></i>(11)36862098</li>
72 |             <li><i class="fa-brands fa-whatsapp"></i>(11)965456789</li>
73 |             <li><i class="fa-solid fa-envelope"></i>bracocurto@senac.com.br</li>
74 |            </ul>
75 | 
76 |         </aside>
77 |         
78 |     </main>
79 | 
80 | <section class="newsletter">
81 |     <h3>newsletter</h3>
82 |     <p>Receba nossas promoções</p>
83 |     <form action="" method="post">
84 |     <input type="text" name="nome" id="nome" placeholder="Seu nome">
85 |     <input type="email" name="email" id="email" placeholder="Seu e-mail">
86 |     <button>Cadastrar</button>
87 |     </form>
88 | </section>
89 | <footer class="rodape">
90 |     <p>&copy; Loja do Obama - Todos os direitos reservados.&copy;</p>
91 | </footer>
92 |     <script src="https://kit.fontawesome.com/803712e940.js" crossorigin="anonymous"></script>
93 | 
94 | </body>
95 | </html>
96 | 
97 | 


--------------------------------------------------------------------------------
/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="description" content="Loja de Informática do Obama">
  9 |     <meta name="keywords" content="Produtos, Produtos eletrônicos, Eletroeletrônicos">
 10 |     <meta: name="Author" content="Letícia Pereira">
 11 |         <meta: name="refresh">
 12 |             <link rel="shortcut icon" href="img/icons8-informática-16.png" type="image/x-icon">
 13 |             <link rel="stylesheet" href="css/style.css">
 14 |             <title>Loja de Informática</title>
 15 | </head>
 16 | 
 17 | <body>
 18 |     <header class="cabecalho">
 19 |         <h1 class="logo"><a href="index.html" title="Loja de Informática do Obama">Loja de Informática</a></h1>
 20 |         <form action="" method="post">
 21 |             <input type="search" name="busca" id="busca" placeholder="Faça sua busca aqui!">
 22 |             <button><i class="fa-solid fa-magnifying-glass"></i></button>
 23 |         </form>
 24 |     </header>
 25 |     <nav class="menu">
 26 | 
 27 | 
 28 |         <ul>
 29 |             <li><a href="index.html">HOME</a></li>
 30 |             <li><a href="produtos.html">PRODUTOS</a></li>
 31 |             <li><a href="servicos.html">SERVIÇOS</a></li>
 32 |             <li><a href="contatos.html">CONTATOS</a></li>
 33 |         </ul>
 34 | 
 35 |         <div class="social-icons">
 36 |             <a href="http://facebook.com" class="btn-facebook"><i class="fa-brands fa-facebook"></i></a>
 37 |             <a href="http://www.twitter.com" class="btn-twitter"><i class="fa-brands fa-twitter"></i></i></a>
 38 |             <a href="http://www.google.com.br" class="btn-google"><i class="fa-brands fa-google"></i></a>
 39 |         </div>
 40 | 
 41 |     </nav>
 42 |     <main class="principal-produtos">
 43 | 
 44 |         <h2>PRODUTOS</h2>
 45 |         <article class="produtos">
 46 |             <img src="img/mac book.jpg"
 47 |             alt="imagem de um Notebook da marca Mac book" class="imagem">
 48 |             <h3>Mac Book</h3>
 49 |             <p>Preço:<br>R$ 250,00</p>
 50 | 
 51 | <!-- <div class="div1"> <img src="img/mac book.jpg"
 52 |                 alt="imagem de um computador da marca Mac book" class="imagem">
 53 |                 <h3> Mac Book</h3>
 54 |             <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. <br>
 55 |                 Maxime aliquam ex natus alias placeat, ullam
 56 |                 nulla quam et quos? <br></p>
 57 |         </article></div> -->
 58 |            
 59 |     
 60 |         </article>
 61 | 
 62 |         <article class="produtos">
 63 |             <img src="img/teclado.jpg"
 64 |             alt="imagem de um teclado gamer colorido das cores rosa, laranja e azul" class="imagem">
 65 |             <h3>Teclado Gamer</h3>
 66 |             <p>Preço:<br> R$ 350,00</p>
 67 | </article>
 68 | 
 69 | <article class="produtos">
 70 |             <img src="img/Alexa.jpg"
 71 |             alt="imagem de uma Alexa cinza, marcando a hora 6:25" class="imagem">
 72 |             <h3>Alexa</h3>
 73 |             <p>Preço:<br> R$ 380,00</p>
 74 | </article>
 75 | 
 76 | <article class="produtos">
 77 |             <img src="img/AirPods2.jpg"
 78 |             alt="imagem de um fone Bluetooth de cor branca da marca Apple" class="imagem">
 79 |             <h3>AirPods</h3>
 80 |             <p>Preço:<br> R$ 1.250,00</p>
 81 | </article>
 82 | 
 83 | <article class="produtos">
 84 |     <img src="img/VR 2.jpg"
 85 |     alt="imagem de um óculos de realidade virtual, dar cor preta" class="imagem">
 86 |     <h3>VR</h3>
 87 |     <p>Preço:<br> R$ 2.000,00</p>
 88 | </article>
 89 | <article class="produtos">
 90 |     <img src="img/mouse.webp"
 91 |     alt="imagem mouse gamer da cor branca com detalhes azuis" class="imagem">
 92 |     <h3>Mouse Gamer</h3>
 93 |     <p>Preço:<br> R$ 150,00</p>
 94 | </article>
 95 | 
 96 | 
 97 | 
 98 | <article class="produtos">
 99 |     <img src="img/microfone vintage.jpg"
100 |     alt="imagem de um microfone elétrico vintage" class="imagem">
101 |     <h3>Microfone Vintage </h3>
102 |     <p>Preço:<br> R$ 245,00</p>
103 | </article>
104 | 
105 | <article class="produtos">
106 |     <img src="img/headphone gamer2.jpg"
107 |     alt="imagem de um Headphone da cor branca com detalhes coloridos" class="imagem">
108 |     <h3>VR</h3>
109 |     <p>Preço:<br> R$ 170,00</p>
110 | </article>
111 | 
112 | <article class="produtos">
113 |     <img src="img/PC Gamer.jpg"
114 |     alt="imagem de um PC Gamer preto, com led roxo e azul" class="imagem">
115 |     <h3>PC Gamer</h3>
116 |     <p>Preço:<br> R$ 4.500,00</p>
117 | </article>
118 | 
119 | <article class="produtos">
120 |     <img src="img/JBL Boobox.jpg"
121 |     alt="imagem de uma caixa de som da marca JBL de cor preta portátil" class="imagem">
122 |     <h3>JBL Boombox</h3>
123 |     <p>Preço:<br> R$ 3.200,00</p>
124 | </article>
125 | 
126 | 
127 | 
128 |     </main>
129 |     <script src="https://kit.fontawesome.com/803712e940.js" crossorigin="anonymous"></script>
130 |     


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | /* Reset CSS*/
  2 | 
  3 | *{
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     font-size: 100%;
  7 |     font-family: 'Open Sans',sans-serif;
  8 |     font-weight: normal;
  9 |     box-sizing: border-box;
 10 |     border: none;
 11 |     outline: none;
 12 | }
 13 | 
 14 | img{
 15 |     max-width: 100%;
 16 | }
 17 | 
 18 | ul{
 19 |     list-style-type: none;
 20 | }
 21 | 
 22 | a{
 23 |     text-decoration: none;
 24 | }
 25 | 
 26 | h2{
 27 |     font-size: 1.5em;
 28 |     color: #333;
 29 | }
 30 | 
 31 | p{
 32 |     font-size: 1em;
 33 |     color:#777;
 34 | }
 35 | 
 36 | /*CABEÇALHO*/
 37 | 
 38 | .cabecalho{
 39 |     width: 100%;
 40 |     float: left;
 41 |     padding: 50px 8%;
 42 |     background-color: #13c7ae;
 43 | }
 44 | 
 45 | .logo a{
 46 |     width: 221px;
 47 |     height: 48px;
 48 |     float: left;
 49 |     font-size: 0;
 50 | background: url(../img/logo.png);
 51 | }
 52 | 
 53 | .cabecalho form{
 54 | width: 30%;
 55 | float: right;
 56 | }
 57 | .cabecalho form input[type="search"]{
 58 |     width: 85%;
 59 |     float: left;
 60 |     padding: 15px 10px 15px 10px;
 61 |     border-radius: 15px 0 0 15px;
 62 | }
 63 | .cabecalho button{
 64 | width: 15%;
 65 | float: right;
 66 | padding: 15px 10px;
 67 | background-color: #0cae98;
 68 | color: #fff;
 69 | cursor: pointer;
 70 | border-radius: 0 15px 15px 0;
 71 | }
 72 | 
 73 | /*menu*/
 74 | .menu{
 75 |     width: 100%;
 76 |     float:left;
 77 |     background-color: black;
 78 |     padding: 18px 8%;
 79 | }
 80 | 
 81 | .menu li{
 82 | float: left;
 83 | }
 84 | .menu li a{
 85 |     color:#9d9d9d;
 86 |     margin-right: 25px;
 87 |     font-size: 19px;
 88 | }
 89 | 
 90 | .menu li a:hover{
 91 |     color:#fff
 92 | }
 93 | 
 94 | /*SOCIAL ICONS*/
 95 | 
 96 | .social-icons{
 97 |     float: right;
 98 | }
 99 | 
100 | .social-icons a{
101 |     color:#fff;
102 |     float: left;
103 |     margin-left: 13px;
104 | }
105 | 
106 | .btn-facebook:hover{
107 |     color: #3b5998
108 | 
109 | }
110 | 
111 | .btn-twitter:hover{
112 |     color: #00acee;
113 | }
114 | 
115 | .btn-google:hover{
116 |     color: #d73d32;
117 | }
118 | 
119 | /* PRINCIPAL */
120 | .principal{
121 |     width: 100%;
122 |     float:left;
123 |     padding:20px 8%;
124 | }
125 | 
126 | .sobre{
127 |     width: 70%;
128 |     float: left;
129 |     padding: 0 20px 20px 0;
130 | }
131 | 
132 | .sobre h2{
133 |     margin-bottom: 10px;
134 | }
135 | .sobre img{
136 |     width: 50%;
137 |     float: left;
138 |     border-radius: 5px;
139 |     margin: 0 15px 15px 0;
140 |     width: 500px;
141 |     /* padding: 15px 10px 15px 10px; */
142 | }
143 | .sobre p{
144 |     text-align: justify;
145 | }
146 |  /*STYLE PRODUTOS*/
147 |  *{
148 |     margin: 0;
149 |     padding: 0;
150 |     font-size: 100%;
151 |     font-family: 'Open Sans',sans-serif;
152 |     font-weight: normal;
153 |     box-sizing: border-box;
154 |     border: none;
155 |     outline: none;
156 | }
157 | 
158 | img{
159 |     max-width: 100%;
160 | }
161 | 
162 | ul{
163 |     list-style-type: none;
164 | }
165 | 
166 | a{
167 |     text-decoration: none;
168 | }
169 | 
170 | h2{
171 |     font-size: 1.5em;
172 |     color: #333;
173 | }
174 | 
175 | p{
176 |     font-size: 1em;
177 |     color:#777;
178 | }
179 | 
180 | /*CABEÇALHO*/
181 | 
182 | .cabecalho{
183 |     width: 100%;
184 |     float: left;
185 |     padding: 50px 8%;
186 |     background-color: #13c7ae;
187 | }
188 | 
189 | .logo a{
190 |     width: 221px;
191 |     height: 48px;
192 |     float: left;
193 |     font-size: 0;
194 | background: url(../img/logo.png);
195 | }
196 | 
197 | .cabecalho form{
198 | width: 30%;
199 | float: right;
200 | }
201 | .cabecalho form input[type="search"]{
202 |     width: 85%;
203 |     float: left;
204 |     padding: 15px 10px 15px 10px;
205 |     border-radius: 15px 0 0 15px;
206 | }
207 | .cabecalho button{
208 | width: 15%;
209 | float: right;
210 | padding: 15px 10px;
211 | background-color: #0cae98;
212 | color: #fff;
213 | cursor: pointer;
214 | border-radius: 0 15px 15px 0;
215 | }
216 | 
217 | /*menu*/
218 | .menu{
219 |     width: 100%;
220 |     float:left;
221 |     background-color: black;
222 |     padding: 5px 8%;
223 | }
224 | 
225 | .menu li{
226 | float: left;
227 | }
228 | .menu li a{
229 |     color:#9d9d9d;
230 |     margin-right: 25px;
231 |     font-size: 19px;
232 | }
233 | 
234 | .menu li a:hover{
235 |     color:#fff
236 | }
237 | 
238 | /*SOCIAL ICONS*/
239 | 
240 | .social-icons{
241 |     float: right;
242 | }
243 | 
244 | .social-icons a{
245 |     color:#fff;
246 |     float: left;
247 |     margin-left: 13px;
248 | }
249 | 
250 | .btn-facebook:hover{
251 |     color: #3b5998
252 | 
253 | }
254 | 
255 | .btn-twitter:hover{
256 |     color: #00acee;
257 | }
258 | 
259 | .btn-google:hover{
260 |     color: #d73d32;
261 | }
262 | 
263 | .principal-produtos{
264 |     width: 100%;
265 |     float: left;
266 |     padding:20px 8%;
267 |    
268 | 
269 | }
270 | .produtos{
271 | background-color: #f1f0f0;
272 | width: 15%;
273 | float: left;
274 | padding: 0 20px 20px 0;
275 | margin: 10px;
276 | border-radius: 15px;
277 | margin-bottom: 30px;
278 | box-shadow: 0 4px 8px 0 #adadad;
279 | }
280 | 
281 | .imagem{
282 |     width: 150px;
283 |     height:150px;
284 |     border-radius: 15px;
285 |     margin: 5px 
286 | 
287 | }
288 | 
289 | .produtos p,h3{
290 |     text-align: center;
291 |     color:#727272;
292 |     margin: 10px
293 | }
294 | h3{
295 |     font-weight: bolder;
296 | }
297 | 
298 | /* SIDEBAR */
299 | .onde-estamos{
300 |     width: 30%;
301 |     float: right;
302 |     padding: 10px 20px;
303 |     background-color: #f5f5f5;
304 |     border-radius: 7px
305 | }
306 | 
307 | .onde-estamos h2{
308 |     margin-bottom: 7px;
309 | }
310 | 
311 | .onde-estamos p{
312 |     color: #111;
313 | }
314 | 
315 | .onde-estamos iframe{
316 |     width: 100%;
317 |     height: 250px;
318 |     margin: 20px 0px
319 | }
320 | 
321 | .onde-estamos li{
322 |     color: #777;
323 |     margin-bottom: 10px;
324 | }
325 | 
326 | .onde-estamos i{
327 |     margin-right: 6px;
328 | }
329 | 
330 | /* NEWSLETTER */
331 | .newsletter{
332 |     width: 100%;
333 |     float: left;
334 |     background-color: #111;
335 |     padding: 50px 8%;
336 | }
337 | .newsletter h3{
338 |     font-size: 1.8em;
339 |     color: #fff;
340 | }
341 | .newsletter p{
342 |     font-size: 1.2em;
343 |     color: #fff;
344 | }
345 | 
346 | .newsletter form{
347 |     width: 100%;
348 |     float: left;
349 |     margin-top: 10px;
350 | }
351 | 
352 | .newsletter form input{
353 |     width: 40%;
354 |     margin-right: 1%;
355 |     padding: 15px 10px;
356 |     border: 1px solid #fff;
357 |     border-radius: 7px;
358 |     background-color: initial;
359 |     float: left;
360 |     color:#fff;
361 | }
362 | 
363 | 
364 | 
365 | .newsletter button{
366 |     width: 18%;
367 | }
368 | 
369 | /* .div1{
370 |     display: flex;
371 |     flex-direction: column;
372 |     gap:30px;
373 |     background-color: #c7c6c6;
374 |     width: 20%;
375 |     justify-content: center;
376 |     align-items: center;
377 |     border-radius: 15px;
378 | }
379 | .div1 img{
380 |     width: 150px;
381 |     border-radius: 5px;
382 |     /* margin: 0 15px 15px 0; */
383 | 
384 | 
385 | /* .div1 p{
386 |     color: #333;
387 |     align-items: center;
388 |     justify-content: center;
389 | }
390 |     
391 |     
392 | .produto{
393 |     width: 70%;
394 |     padding:  0 20px 20px 0;
395 |     padding:20px 8%;
396 |     border-radius: 5px;
397 | 
398 | } */ 
399 | 
400 | 
401 | /* .imagem{ 
402 |     width: 50%;
403 |     float: left;
404 |     border-radius: 5px;
405 |     margin: 0 15px 15px 0;
406 |     width: 300px;
407 |     padding: 25px 20px 25px 20px;
408 | }
409 | 
410 | .principal-produtos{
411 |     text-align: right;
412 |     width: 100%;
413 |     float:left;
414 |     padding:30px 8%;
415 | }
416 | 
417 | .produtos{
418 |     width: 70%;
419 |     float: left;
420 |     padding:  0 20px 20px 0;
421 |     padding:20px 8%;
422 |     border-radius: 5px;
423 | }
424 | .produtos h2{
425 |     width: 100%;
426 |     float:left;
427 |     padding:30px 8%;
428 | }
429 | */
430 | 
431 | 
432 |     


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