├── LICENSE
├── README.md
├── css
    └── style.css
├── img
    ├── icon.png
    ├── logo.png
    └── pessoas.png
└── index.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Matheus Silva Bezerra
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


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


--------------------------------------------------------------------------------
/img/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Matheussbzp/Projeto01-HTML-CSS/e9504f541dd967a85d731cdd7eec8bd1cef7869b/img/icon.png


--------------------------------------------------------------------------------
/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Matheussbzp/Projeto01-HTML-CSS/e9504f541dd967a85d731cdd7eec8bd1cef7869b/img/logo.png


--------------------------------------------------------------------------------
/img/pessoas.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Matheussbzp/Projeto01-HTML-CSS/e9504f541dd967a85d731cdd7eec8bd1cef7869b/img/pessoas.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br" xmlns:mso="urn:schemas-microsoft-com:office:office"
 3 |     xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
 4 | 
 5 | <head>
 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="description" content="Loja de Informática do Professor Obama">
10 |     <meta name="keywords" content="Suporte, Manutenção,Computadores">
11 |     <meta name="author" content="Matheus Silva Bezerra">
12 |     <link rel="shortcut icon" href="img/icon.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 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"
18 |         rel="stylesheet">
19 |     <title>Loja de Informática do Obama</title>
20 | 
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="#home">Home</a></li>
36 |             <li><a href="#produtos">Produtos</a></li>
37 |             <li><a href="#servicos">Serviços</a></li>
38 |             <li><a href="#contatos">Contatos</a></li>
39 |         </ul>
40 |         <div class="social-icons">
41 |             <a href="" class="btn-facebook"><i class="fa-brands fa-facebook-f"></i></a>
42 |             <a href="" class="btn-twitter"><i class="fa-brands fa-twitter"></i></a>
43 |             <a href="" class="btn-google"><i class="fa-brands fa-google"></i></a>
44 |         </div>
45 |     </nav>
46 |     <main class="principal">
47 |         <article class="sobre">
48 |             <h2> Sobre Nós</h2>
49 |             <img src="img/pessoas.png"
50 |                 alt="Imagem de uma loja de informática com três pessoas, sendo dois homens e uma mulher.  Mulher vestida.... e homem vestido..">
51 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum maiores porro sunt voluptate dolorem
52 |                 tenetur, quaerat suscipit reprehenderit facilis minima sequi provident, non delectus enim veritatis
53 |                 necessitatibus natus ea unde!
54 |                 Hic minima quibusdam in nesciunt eius quod sapiente consequatur corporis dolore eos eum similique magnam
55 |                 fugit amet nam quae dolor, atque distinctio eveniet necessitatibus, ullam rem eligendi? Facere, quae
56 |                 reprehenderit!</p>
57 |             <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi dolores, velit accusamus doloribus dicta
58 |                 magnam aspernatur nulla impedit maiores placeat minima accusantium facere ipsum aliquid qui dolor enim
59 |                 laudantium voluptatibus!</p>
60 |             <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis aspernatur nobis esse quisquam
61 |                 dignissimos, optio doloribus assumenda quis magni rem molestias ea veniam ipsam voluptatibus eaque est
62 |                 dicta temporibus ullam.</p>
63 |             <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae placeat ut quaerat, nostrum nulla
64 |                 aliquid, reiciendis laboriosam quidem maxime laborum cumque amet illum commodi iste consequatur pariatur
65 |                 repudiandae neque repellat?</p>
66 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel vero accusamus voluptatem illo quos aperiam
67 |                 expedita fuga a architecto! Error quasi obcaecati rem doloremque quaerat in harum odit dolorem neque!
68 |             </p>
69 |         </article>
70 |         <aside class="onde-estamos">
71 |             <h2>Onde Estamos</h2>
72 |             <p>Rua: Tito n° 54 - Vila Romana - São Paulo - SP - Brasil</p>
73 |             <iframe
74 |                 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"
75 |                 style="border:0;" allowfullscreen="" loading="lazy"></iframe>
76 |             <h2>Contatos</h2>
77 |             <ul>
78 |                 <li><i class="fa-solid fa-phone"></i>(11) 70707070</li>
79 |                 <li><i class="fa-brands fa-whatsapp"></i>(11) 40028922</li>
80 |                 <li><i class="fa-solid fa-envelope"></i>papudeiror@hotmail.com</li>
81 |             </ul>
82 |         </aside>
83 |     </main>
84 |     <section class="newsletter">
85 |         <h3>Newsletter</h3>
86 |         <p>Receba nossas promoções por e-mail.</p>
87 |         <form action="" method="post">
88 |             <input type="text" name="" id="" placeholder="Seu nome">
89 |             <input type="email" name="" id="" placeholder="Seu e-mail">
90 |             <button>Cadastrar</button>
91 |         </form>
92 |     </section>
93 |     <footer class="rodape">
94 |         <p>Loja do Obama - Todos os direitos reservados &copy;</p>
95 |     </footer>
96 | </body>
97 | 
98 | </html>
99 | 


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