├── README.md
├── css
    └── style.css
├── html
    └── index.html
└── img
    ├── Logo.png
    ├── Rx 580.jpg
    ├── cooler.jpg
    ├── icone.png
    ├── loja.jpg
    └── teclado.jpg


/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/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 | .cabeçalho{
 39 |     width: 100%;
 40 |     float: left;
 41 |     padding: 50px 8%;
 42 |     background-color: #13c7ae;
 43 |     /* background: linear-gradient(red,blue); */
 44 | }
 45 | 
 46 | .logo{
 47 |     width: 221px;
 48 |     height: 48px;
 49 |     float: left;
 50 |     font-size: 0;
 51 |     background: url(../img/Logo.png);
 52 | }
 53 | 
 54 | .cabeçalho form{
 55 |     width: 30%;
 56 |     float: right;
 57 | }
 58 | 
 59 | .cabeçalho form input[type="search"] {
 60 |     width: 85%;
 61 |     float: left;
 62 |     padding: 15px 10px 15px 10px;
 63 |     border-radius: 15px 0 0 15px;
 64 | }
 65 | 
 66 | .cabeçalho button{
 67 |     width: 15%;
 68 |     float: right;
 69 |     padding: 15px 10px;
 70 |     background-color: #0cae98;
 71 |     color: white;
 72 |     cursor: pointer;
 73 |     border-radius: 0 15px 15px 0;
 74 | }
 75 | 
 76 | /* MENU */
 77 | .menu{
 78 |     width: 100%;
 79 |     float: left;
 80 |     background-color: #111;
 81 |     padding: 18px 8%;
 82 | }
 83 | 
 84 | .menu li{
 85 |     color: #9d9d9d;
 86 |     float: left;
 87 |     margin-right: 25px;
 88 |     font-size: 30px;
 89 | 
 90 | }
 91 | 
 92 | .menu li a{
 93 |     color: #ffffffa9;
 94 |     float: left;
 95 |     margin-right: 25px;
 96 |     font-size: 15px;
 97 | }
 98 | 
 99 | .menu li a:hover{
100 |     color: #fff;
101 | }
102 | 
103 | /* SOCIAL-ICONS */
104 | .social-icons{
105 |     float: right;
106 | }
107 | 
108 | .social-icons a{
109 |     color: #fff;
110 |     float: left;
111 |     margin-left: 13px;
112 | }
113 | .btn-facebook:hover{
114 |     color: #3b5998;
115 | }
116 | .btn-google:hover{
117 |     color:RED;
118 | }
119 | .btn-twitter:hover{
120 |     color: #00acee;
121 | }
122 | /* PRINCIPAL */
123 | .principal{
124 |     width: 100%;
125 |     float: left;
126 |     padding: 20px 8%;
127 | }
128 | .sobre{
129 | width: 70%;
130 | float: left;
131 | padding: 0 20px 20px 0;
132 | }
133 | .sobre h2{
134 |     margin-bottom: 15px;
135 | }
136 | .sobre img{
137 |     width: 50%;
138 |     float: left;
139 |     border-radius: 5px;
140 |     margin: 0 15px 15px 0;
141 | }
142 | .sobre p{
143 |     text-align: justify;
144 | }
145 | /* SIDEBAR */
146 | .onde-estamos{
147 |     width: 30%;
148 |     float: right;
149 |     padding: 10px 20px;
150 |     background-color: #bececc44;
151 |     border-radius: 7px;
152 | }
153 | .onde-estamos h2{
154 |     margin-bottom: 7px;
155 | }
156 | .onde-estamos p{
157 |     color: #111;
158 | }
159 | .onde-estamos iframe{
160 |     width:100%;
161 |     height:250px;
162 |     margin:0px 20px 20px 0px;
163 | }
164 | .onde-estamos li{
165 |     color: #777;
166 |     margin-bottom: 10px ;
167 | }
168 | .onde-estamos i{
169 |     margin-right: 6px;
170 | }
171 | /* TELA DE PRODUTOS */
172 | .ofertas h2{
173 | float: left;
174 | font-family: Verdana, Geneva, Tahoma, sans-serif;
175 | margin-left: 50px;
176 | }
177 | .ofertas img{
178 |     width:300px;
179 |     float: left;
180 | }
181 | /* NEWSLETTER */
182 | .newsletter{
183 |     width: 100%;
184 |     float: left;
185 |     background-color: #111;
186 |     padding: 50px 8%;
187 | }
188 | .newsletter h3{
189 |     font-size: 1.8em;
190 |     color: #fff;
191 | }
192 | .newsletter p{
193 |     font-size: 1.2em;
194 |     color: #fff;
195 | }
196 | 
197 | .newsletter forn{
198 |     width: 100%;
199 |     float: left;
200 |     margin-top: 10px;
201 | }
202 | .newsletter form input{
203 |     width: 40%;
204 |     margin-right: 1%;
205 |     padding: 15px 10px;
206 |     border: 1px solid #fff;
207 |     border-radius: 7px;
208 |     color: #fff;
209 |     background-color: initial;
210 |     float: left;
211 | }
212 | 
213 | .newsletter button{
214 |     width: 18%;
215 |     background-color: #fff;
216 |     padding: 15px 10px;
217 |     border-radius: 7px;
218 |     float: right;
219 |     cursor: pointer;
220 | }
221 | 
222 | .rodape{
223 |     width: 100%;
224 |     float: left;
225 |     background-color: #13c7ae;
226 |     padding: 20px 8%;
227 | 
228 | }
229 | .rodape p{
230 |     color: #fff;
231 | }
232 | 


--------------------------------------------------------------------------------
/html/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="pt-br">
  3 | 
  4 | <head>
  5 | 
  6 |     <meta charset="UTF-8">
  7 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8 |     <meta name="viewport" content="width= device-width, initial-scale=1.0">
  9 |     <meta name="keywords" content="Loja, Informática, Computador">
 10 |     <meta name="author" content="Juninho">
 11 |     <meta name="description" content="Vendemos os mais diversos hardwares e componentes para computadores">
 12 |     <link rel="stylesheet" href="css/style.css">
 13 |     <link rel="shortcut icon" href="img/icone.png" type="image/x-icon">
 14 |     <title> Loja Mil Grau de Informática </title>
 15 | 
 16 | </head>
 17 | 
 18 | <body>
 19 | 
 20 |     <header class="cabeçalho">
 21 |         <h1 class="logo"><a href="index.html">Loja Mil Grau de Informática</a></h1>
 22 |         <form action="" method="post">
 23 |             <label for=""></label>
 24 |             <input type="search" name="busca" id="busca" placeholder="Faça sua busca aqui!">
 25 |             <button><i class="fa-sharp fa-solid fa-magnifying-glass"></i></button>
 26 |         </form>
 27 |     </header>
 28 |     <nav class="menu">
 29 |         <!-- <ul>
 30 |             <li><a href="http://"></a></li>
 31 |             <li><a href="http://"></a></li>
 32 |             <li><a href="http://"></a></li>
 33 |             <li><a href="http://"></a></li>
 34 |         </ul> -->
 35 | 
 36 |         <ul>
 37 |             <li><a href="index.html">HOME</a> </li>
 38 |         </ul>
 39 |         <ul>
 40 |             <li><a href="Produtos.html">PRODUTOS</a> </li>
 41 |         </ul>
 42 |         <ul>
 43 |             <li><a href="Serviços.html">SERVIÇOS</a> </li>
 44 |         </ul>
 45 |         <ul>
 46 |             <li><a href="Contatos.html">CONTATOS</a> </li>
 47 |         </ul>
 48 | 
 49 |         <div class="social-icons">
 50 |             <a href="http://www.facebook.com" class="btn-facebook"><i class="fa-brands fa-facebook"></i></i></a>
 51 |             <a href="http://www.twitter.com" class="btn-twitter"><i class="fa-brands fa-twitter"></i></a>
 52 |             <a href="http://www.google.com" class="btn-google"><i class="fa-brands fa-google"></i></a>
 53 |         </div>
 54 | 
 55 | 
 56 | 
 57 |     </nav>
 58 |     <main class="principal">
 59 |         <article class="sobre">
 60 |             <h2>SOBRE NÓS</h2>
 61 |             <img src="img/loja.jpg"
 62 |                 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..">
 63 | 
 64 |             <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. A ipsum quia, voluptate itaque cumque modi
 65 |                 nesciunt doloribus nemo! In ab perspiciatis autem impedit nostrum iste nobis numquam libero distinctio
 66 |                 illum!</p>
 67 |             <p>Eveniet accusamus cumque dolore sequi est numquam sint earum recusandae quibusdam eaque tempora id
 68 |                 laudantium, rem vitae quia reprehenderit possimus minus amet adipisci atque sed culpa et debitis
 69 |                 blanditiis. Numquam.</p>
 70 |             <p>Placeat voluptatibus praesentium mollitia saepe asperiores reiciendis dolorem ipsa molestiae natus aut
 71 |                 facere perferendis repellat enim impedit obcaecati hic adipisci doloribus, facilis accusantium
 72 |                 repudiandae vitae porro neque beatae. Quia, necessitatibus!</p>
 73 |             <p>Voluptatem nemo delectus quaerat unde ad, neque autem velit reiciendis vel commodi fugit. Aspernatur
 74 |                 porro, reiciendis adipisci eum, suscipit error dicta consequuntur molestias culpa praesentium
 75 |                 dignissimos veniam? Dolore, recusandae nam.</p>
 76 |             <p>Itaque dicta ad iure saepe in minus unde distinctio magni, repudiandae numquam atque, aspernatur, est
 77 |                 ratione ipsum enim corporis voluptatum fugit earum labore non recusandae nesciunt? Minima illum in quas.
 78 |             </p>
 79 |             <p>Laboriosam adipisci animi nam porro qui iste totam! Recusandae eius exercitationem vitae nostrum adipisci
 80 |                 at velit aspernatur non laboriosam quo! Accusantium exercitationem animi illo autem pariatur sequi
 81 |                 similique quis dolorum.</p>
 82 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit porro unde hic architecto. Quidem ad
 83 |                 voluptatibus quisquam qui sunt aut quaerat necessitatibus. Eum repellat eaque ipsam sapiente! Nemo,
 84 |                 tempore consectetur.</p>
 85 |             <p>Asperiores animi odio non optio quo illo deserunt ullam dolorum delectus eum quia distinctio debitis
 86 |                 ducimus aliquid, excepturi odit, nostrum ab atque, laboriosam velit quidem laborum repudiandae deleniti.
 87 |                 Rem, aut?</p>
 88 |             <p>Soluta ipsam rem facere omnis sunt nihil exercitationem nemo natus quam inventore eveniet perferendis
 89 |                 earum quisquam porro voluptatum veritatis voluptatibus eum vitae expedita assumenda, neque culpa
 90 |                 dolores? Ad, asperiores facere?</p>
 91 | 
 92 | 
 93 |         </article>
 94 |         <aside class="onde-estamos">
 95 |             <h2> Onde Estamos </h2>
 96 |             <p> Rua Tito, nº 54 - Vila Romana - São Paulo - SP - Brasil, 05051-000 </p>
 97 |             <iframe
 98 |                 src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14632.49248950055!2d-46.70057015821891!3d-23.52807368134704!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94cef8775663b04f%3A0x923835e9005f8309!2sSenac%20Lapa%20Tito!5e0!3m2!1spt-BR!2sbr!4v1678296446393!5m2!1spt-BR!2sbr"
 99 |                 style="border:0;" allowfullscreen="" loading="lazy"
100 |                 referrerpolicy="no-referrer-when-downgrade"></iframe>
101 |                 <h2>Contatos</h2>
102 |                 <ul>
103 |                     <li><i class="fa-solid fa-phone"></i>(11)32456352</li>
104 |                     <li><i class="fa-brands fa-whatsapp"></i>(11)956963695</li>
105 |                     <li><i class="fa-solid fa-envelope"></i>braçocurto@senac.com.br</li>
106 |                 </ul>
107 | 
108 |         </aside>
109 |     </main>
110 |     <section class="newsletter">
111 |         <h3>NewsLetter</h3>
112 |         <p>Receba nossas promoções por e-mail.</p>
113 |         <form action="" method="post">
114 |             <input type="text" name="nome" id="nome" placeholder="Seu nome">
115 |             <input type="email" name="email" id="email" placeholder="Seu e-mail">
116 |             <button>Cadastrar</button>
117 |         </form>
118 |     </section>
119 |     <footer class="rodape">
120 |         <p>Loja do Obama - Todos os direitos reservados.&copy;</p>
121 |     </footer>
122 |     <script src="https://kit.fontawesome.com/80e5880db3.js" crossorigin="anonymous"></script>
123 | 
124 | </body>
125 | 
126 | </html>
127 | 


--------------------------------------------------------------------------------
/img/Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Junin172/Projeto02-HTML-CSS/e2aa477d590ea394204fb5ebfd3855e54c1eb026/img/Logo.png


--------------------------------------------------------------------------------
/img/Rx 580.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Junin172/Projeto02-HTML-CSS/e2aa477d590ea394204fb5ebfd3855e54c1eb026/img/Rx 580.jpg


--------------------------------------------------------------------------------
/img/cooler.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Junin172/Projeto02-HTML-CSS/e2aa477d590ea394204fb5ebfd3855e54c1eb026/img/cooler.jpg


--------------------------------------------------------------------------------
/img/icone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Junin172/Projeto02-HTML-CSS/e2aa477d590ea394204fb5ebfd3855e54c1eb026/img/icone.png


--------------------------------------------------------------------------------
/img/loja.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Junin172/Projeto02-HTML-CSS/e2aa477d590ea394204fb5ebfd3855e54c1eb026/img/loja.jpg


--------------------------------------------------------------------------------
/img/teclado.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Junin172/Projeto02-HTML-CSS/e2aa477d590ea394204fb5ebfd3855e54c1eb026/img/teclado.jpg


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