├── README.md
├── css
    └── style.css
├── img
    ├── cadastro.jpg
    ├── icone.png
    ├── logo.png
    └── loja.jpg
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | # Projeto02-HTML-CSS
2 | Projeto02 de HTML e CSS para a criação de um site que comercializa peças de informática
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-type: none;
 19 | }
 20 | 
 21 | a{
 22 |     text-decoration: none;
 23 | }
 24 | 
 25 | h2{
 26 |     font-size: 1.5em;
 27 |     color: #333;
 28 | }
 29 | p{
 30 |     font-size: 1em;
 31 |     color: #777;
 32 | }
 33 | /* CABEÇALHO */
 34 | 
 35 | .cabecalho{
 36 |     width: 100%;
 37 |     float: left;
 38 |     padding: 50px 8%;
 39 |     background-color: #13c7ae;
 40 | 
 41 |  }
 42 | 
 43 |  .logo a{
 44 |     width: 221px;
 45 |     height: 48px;
 46 |     float: left;
 47 |     font-size: 0;
 48 |     background: url(../img/logo.png);
 49 |  }
 50 |  .cabecalho form {
 51 |     width: 30%;
 52 |     float: right;
 53 |  }
 54 | 
 55 |  .cabecalho form input[type="search"]{
 56 |     width:85%;
 57 |     float: left;
 58 |     padding: 15px 10px 15px 10px;
 59 |     border-radius: 15px 0 0 15px;
 60 | }
 61 | .cabecalho button{
 62 |     width: 15%;
 63 |     float: right;
 64 |     padding: 15px 10px;
 65 |     background-color: #0cae98;
 66 |     color: white;
 67 |     cursor: pointer;
 68 |     border-radius: 0 15px 15px 0;
 69 | }
 70 |  .menu{
 71 |     width: 100%;
 72 |     float: left;
 73 |     background-color: black;
 74 |     padding: 18px 8%
 75 |  }
 76 |  .menu li{
 77 |     float: left;
 78 |  }
 79 |  .menu li a{
 80 |     color: #9d9d9d;
 81 |     margin-right: 25px;
 82 |     font-size: 19px;
 83 | 
 84 |  }
 85 |  .menu li a:hover{
 86 |     color:#fff;
 87 |    
 88 |  }
 89 | 
 90 |   /* SOCIAL-ICONS */
 91 |  .social-icons{
 92 |     float: right;
 93 |    
 94 | }
 95 | 
 96 | .social-icons a{
 97 |     color: #fff;
 98 |     float: left;
 99 |     margin-left: 13px;
100 | }
101 | 
102 | .btn-facebook:hover{
103 |       color: #3b5998;
104 | }
105 | 
106 | .btn-google:hover{
107 |     color: #DB4437 ;
108 | }
109 | 
110 | .btn-twitter:hover{
111 |     color: #00acee
112 | }
113 | 
114 | /* PRINCIPAL */
115 | .principal{
116 |     width: 100%;
117 |     float: left;
118 |     padding: 20px 8%;
119 | }
120 | 
121 | .sobre{
122 |     width: 70%;
123 |     float: left;
124 |     padding: 0 20px 20px 0;
125 | }
126 | 
127 | .sobre h2{
128 |     margin-bottom: 25px ;
129 | }
130 | 
131 | .sobre img{
132 |     width: 50%;
133 |     float: left;
134 |     border-radius: 5px;
135 |     margin: 0 15px 15px 0;
136 | }
137 | 
138 | .sobre p{
139 |     text-align: justify;
140 | }
141 | 
142 |   /* SIDEBAR */
143 |   .onde-estamos{
144 |     width: 30%;
145 |     float: right;
146 |     padding: 10px 20px;
147 |     background-color: #f5f5f5;
148 |     border-radius: 7px;
149 |   }
150 | 
151 |   .onde-estamos h2{
152 |     margin-bottom: 7px;
153 |   }
154 | 
155 |   .onde-estamos p{
156 |     color: #929292;
157 |   }
158 | 
159 |   .onde-estamos iframe{
160 |     width: 100%;
161 |     height: 250px;
162 |     margin: 20px 0;
163 |   }
164 | 
165 |   .onde-estamos li{
166 |     color: #929292;
167 |     margin-bottom: 10px;
168 |   }
169 | 
170 |   .onde-estamos i{
171 |     margin-right:6px;
172 | }
173 | 
174 | /* NEWSLETTER */
175 | .newsletter{
176 |     width: 100%;
177 |     float: left;
178 |     background-color: #111;
179 |     padding: 50px 8%;
180 | }
181 | 
182 | .newsletter h3{
183 |     font-size: 1.8em;
184 |     color: #fff;
185 | }
186 | 
187 | .newsletter p{
188 |     font-size: 1.2em;
189 |     color: #fff;
190 | }
191 | 
192 | .newsletter form{
193 |     width: 100%;
194 |     float: left;
195 |     margin-top: 10px;
196 | }
197 | 
198 | .newsletter form input{
199 |     width: 40%;
200 |     margin-right: 1%;
201 |     padding: 15px 10px;
202 |     border: 1px solid #fff;
203 |     border-radius: 7px;
204 |     color: #fff;
205 |     background-color: initial;
206 |     float: left;
207 | }
208 | 
209 | .newsletter button{
210 |     width: 18%;
211 |     border-radius: 7px;
212 |     padding: 15px 10px;
213 | }
214 | 
215 | .rodape{
216 |     width: 100%;
217 |     float: left;
218 |     background-color: #13c7ae;
219 |     padding: 20px 8%;
220 | }
221 | 
222 | .rodape p{
223 |     color: #fff;
224 | }
225 | 


--------------------------------------------------------------------------------
/img/cadastro.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PriHerculano/Projetoinfo-HTML-CSS/31a9391ed35172e922657836124611eacfc74295/img/cadastro.jpg


--------------------------------------------------------------------------------
/img/icone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PriHerculano/Projetoinfo-HTML-CSS/31a9391ed35172e922657836124611eacfc74295/img/icone.png


--------------------------------------------------------------------------------
/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PriHerculano/Projetoinfo-HTML-CSS/31a9391ed35172e922657836124611eacfc74295/img/logo.png


--------------------------------------------------------------------------------
/img/loja.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PriHerculano/Projetoinfo-HTML-CSS/31a9391ed35172e922657836124611eacfc74295/img/loja.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta name="description" content="Loja de Informática do Obama">
 8 |     <meta name="keywords" content="Suporte, Manutenção,Computadores">
 9 |     <meta name="author" content="Priscila Raquel Herculano Correia">
10 |     <title>Loja de informática do Obama</title>
11 |     <link rel="shortcut icon" href="img/icone.png" type="image/x-icon">
12 |     <link rel="stylesheet" href="css/style.css">
13 | </head>
14 | <body>
15 |     <header class="cabecalho">
16 |         <h1 class="logo">
17 |             <a href="index.html" title="Loja de informática do Obama">Loja de informática do Obama</a>
18 |     </h1>
19 |     <form action="" method="post">
20 |         <input type="search" name="busca" id="busca" placeholder="Faça uma busca aqui...">
21 |         <button><i class="fa-solid fa-magnifying-glass"></i></button>
22 |     </form>
23 | </header>
24 | <nav class="menu">
25 |  
26 | 
27 | <ul>
28 |     <li><a href="index.html">Home</a></li>
29 |     <li><a href="produtos.html">Produtos</a></li>
30 |     <li><a href="servicos.html">Serviços</a></li>
31 |     <li><a href="contatos.html">Contatos</a></li>
32 | 
33 | </ul>
34 | <div class="social-icons">
35 |     <a href="https://pt-br.facebook.com/" class="btn-facebook"><i><i class="fa-brands fa-facebook"></i></i></a>
36 |     <a href="https://www.google.com/intl/pt-BR/account/about/" class="btn-google"><i><i class="fa-brands fa-google"></i></i></a>
37 |     <a href="https://twitter.com/loja_infobama" class="btn-twitter"><i><i class="fa-brands fa-twitter"></i></i></a>
38 |    
39 |         </div>
40 | </nav>
41 | <main class="principal">
42 |     <article class="sobre">
43 |         <h2>Sobre nós</h2>
44 |         <img src="img/loja.jpg" 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.">
45 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias quidem fuga cupiditate voluptas fugiat inventore hic non ea, magni nesciunt corrupti rem. Repellendus cumque possimus distinctio nihil impedit, unde deleniti?</p>
46 |         <p>Facilis placeat, voluptas vel nemo ratione numquam soluta quia perferendis ducimus dicta officiis id nisi cumque odit, laudantium exercitationem dolore nihil quam! Quos, delectus corrupti qui laboriosam repellendus deserunt dolore?</p>
47 |         <p>Aut magnam natus laudantium autem in fugiat unde deleniti rem, itaque eum dolorum, quisquam numquam ullam voluptatum nam inventore! Cumque velit vitae quae suscipit accusantium fugit quo quaerat in eius.</p>
48 |         <p>Ipsa quisquam vel quod quos facere ipsum? Iste cumque explicabo odio reprehenderit, vel incidunt laboriosam iusto eveniet odit temporibus voluptas. Animi voluptate excepturi dolorum debitis cum qui aperiam quis impedit!</p>
49 |         <p>Perferendis reprehenderit error iusto quam amet obcaecati deserunt, repudiandae officiis. Facere aliquid consequuntur a nesciunt labore quasi saepe. Ipsam hic adipisci totam maxime eaque porro magnam maiores nihil sequi similique?</p>
50 |         <p>Animi sed ipsa cum obcaecati earum debitis aperiam magni ipsum, et non nostrum voluptatibus deleniti inventore harum cupiditate ea amet! Veniam cum tempore laborum atque illum velit. Laudantium, itaque cupiditate.</p>
51 |       
52 |     </article>
53 |     <aside class="onde-estamos">
54 |         <h2>Onde Estamos</h2>
55 |         <p>Rua: Tito, nº 54 - Vila Romana - São Paulo - SP - Brasil</p>
56 |         <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3658.1225686689518!2d-46.69181539999997!3d-23.528093600000005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94cef8775663b04f%3A0x923835e9005f8309!2sSenac%20Lapa%20Tito!5e0!3m2!1spt-BR!2sbr!4v1678296424098!5m2!1spt-BR!2sbr"  style="border: 0;;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
57 |         <h2>Contatos</h2>
58 |         <ul>
59 |                 <li><i class="fa-solid fa-phone"></i>(11)36862098</li>
60 |                 <li><i class="fa-solid fa-envelope"></i>(11)965456789</li>
61 |                 <li><i class="fa-brands fa-whatsapp"></i>bracocurto@senac.com.br</li>
62 |             </ul>
63 |         </ul>
64 | 
65 |     </aside>
66 | </main>
67 | <section class="newsletter">
68 |     <h3>Newsletter</h3>
69 |     <p>Receba nossas promoções por e-mail</p>
70 |     <form action="" method="post">
71 |         <input type="text" name="nome" id="nome" placeholder="Seu nome">
72 |         <input type="email" name="email" id="email" placeholder="Seu e-mail">
73 |         <button>cadastre-se</button>
74 |     </form>
75 | </section>
76 | <footer class="rodape">
77 |     <p>&copy;Loja de informática - Todos os direitos reservados.&copy;</p>
78 | </footer>
79 | <script src="https://kit.fontawesome.com/9796628c85.js" crossorigin="anonymous"></script> 
80 | </body>
81 | </html>
82 | 
83 | 


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