├── Contatos.html ├── Produtos.html ├── README.md ├── Serviços.html ├── css └── style.css ├── img ├── arrumando mais uma vez.jpg ├── icone.png ├── logo.png └── loja.jpg └── index.html /Contatos.html: -------------------------------------------------------------------------------- 1 | < -------------------------------------------------------------------------------- /Produtos.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gabriielll/Projeto02-HTML-CSS/ce09c95643da7b6e890c3dbc482c82cb257752cc/Produtos.html -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Projeto02-HTML-CSS 2 | Projeto02 de HTML e CSS para criação de um site que comercializa peças de informatica 3 | -------------------------------------------------------------------------------- /Serviços.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Lojinha de informatica Breal 13 | 14 | 15 | 16 | 17 |
18 |

Loja de informatica Breal

19 |
20 | 21 | 22 |
23 |
24 | 44 |
45 |
46 |

Nossos Serviços

47 | imagem de uma loja de informatica com tres pessoas, sendo dois homens e uma mulher. Mulher vestida com social azul e clara sendo abraçada por homem branco com camisa social azul escuro e homem vestido vestido de camisa social branca com perfil de vendedor. 49 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus sed dolorem veritatis reiciendis soluta 50 | sint velit, blanditiis illo vero tempora, qui dolor eum iste quidem id laudantium? Distinctio, 51 | praesentium obcaecati.

52 |

Possimus ipsa harum cupiditate, ullam dignissimos dolor consectetur cum natus, quaerat architecto, 53 | aliquam iste sequi fugiat quo quisquam? Modi, numquam ipsa asperiores voluptatem ducimus tempora. 54 | Aperiam dolor nulla soluta dignissimos.

55 |

Aspernatur blanditiis et earum soluta quibusdam. Optio dolores rerum sed odit sapiente maxime laboriosam 56 | dolorum. Accusamus voluptates, quisquam et facere dolor nostrum excepturi quod nesciunt ab consectetur 57 | commodi, dicta odit.

58 |

Reiciendis, quasi voluptas! Voluptatum eum maxime eius facere, quas iure minima explicabo nisi iste vitae 59 | sit adipisci provident sapiente reiciendis nemo molestias eveniet culpa natus! Cum officia ipsam labore 60 | assumenda.

61 |

Debitis ab commodi minus adipisci deleniti inventore facilis ipsa enim, odit fugit ut velit amet qui 62 | nobis! Quae officiis iusto, aspernatur provident eius, itaque consequuntur officia neque assumenda sed 63 | consectetur.

64 |

Repellendus laboriosam voluptas id odio, inventore eos veniam nam alias sed eum pariatur suscipit 65 | similique ex ratione repellat sequi delectus totam ab repudiandae. Aut fuga laborum dolore asperiores 66 | amet perferendis.

67 | 68 |
69 |
70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /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: #b45ec2; 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: #c500e4b0; 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 form{ 198 | width: 100%; 199 | float: left; 200 | margin-top: 10px; 201 | } 202 | 203 | .newsletter form input{ 204 | width: 40%; 205 | margin-right: 1%; 206 | padding: 15px 10px; 207 | border: 1px solid #fff; 208 | border-radius: 7px; 209 | color: #fff; 210 | background-color: initial; 211 | float: left; 212 | } 213 | 214 | .newsletter button { 215 | width: 18%; 216 | background-color: #fff; 217 | padding: 15px 10px; 218 | border-radius: 7px; 219 | float:right; 220 | cursor:pointer; 221 | } 222 | 223 | .rodape{ 224 | width: 100%; 225 | float:left; 226 | background-color: #b45ec2; 227 | padding: 20px 8%; 228 | } 229 | 230 | .rodape p { 231 | color: #fff; 232 | } -------------------------------------------------------------------------------- /img/arrumando mais uma vez.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gabriielll/Projeto02-HTML-CSS/ce09c95643da7b6e890c3dbc482c82cb257752cc/img/arrumando mais uma vez.jpg -------------------------------------------------------------------------------- /img/icone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gabriielll/Projeto02-HTML-CSS/ce09c95643da7b6e890c3dbc482c82cb257752cc/img/icone.png -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gabriielll/Projeto02-HTML-CSS/ce09c95643da7b6e890c3dbc482c82cb257752cc/img/logo.png -------------------------------------------------------------------------------- /img/loja.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gabriielll/Projeto02-HTML-CSS/ce09c95643da7b6e890c3dbc482c82cb257752cc/img/loja.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Lojinha de Informática do Breal 15 | 16 | 17 | 18 | 19 | 20 |
21 |

Lojinha de Informática do Breal

22 |
23 | 24 | 25 | 26 |
27 |
28 | 53 |
54 |
55 |

SOBRE NÓS

56 | 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.. 58 | 59 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. A ipsum quia, voluptate itaque cumque modi 60 | nesciunt doloribus nemo! In ab perspiciatis autem impedit nostrum iste nobis numquam libero distinctio 61 | illum!

62 |

Eveniet accusamus cumque dolore sequi est numquam sint earum recusandae quibusdam eaque tempora id 63 | laudantium, rem vitae quia reprehenderit possimus minus amet adipisci atque sed culpa et debitis 64 | blanditiis. Numquam.

65 |

Placeat voluptatibus praesentium mollitia saepe asperiores reiciendis dolorem ipsa molestiae natus aut 66 | facere perferendis repellat enim impedit obcaecati hic adipisci doloribus, facilis accusantium 67 | repudiandae vitae porro neque beatae. Quia, necessitatibus!

68 |

Voluptatem nemo delectus quaerat unde ad, neque autem velit reiciendis vel commodi fugit. Aspernatur 69 | porro, reiciendis adipisci eum, suscipit error dicta consequuntur molestias culpa praesentium 70 | dignissimos veniam? Dolore, recusandae nam.

71 |

Itaque dicta ad iure saepe in minus unde distinctio magni, repudiandae numquam atque, aspernatur, est 72 | ratione ipsum enim corporis voluptatum fugit earum labore non recusandae nesciunt? Minima illum in quas. 73 |

74 |

Laboriosam adipisci animi nam porro qui iste totam! Recusandae eius exercitationem vitae nostrum adipisci 75 | at velit aspernatur non laboriosam quo! Accusantium exercitationem animi illo autem pariatur sequi 76 | similique quis dolorum.

77 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit porro unde hic architecto. Quidem ad 78 | voluptatibus quisquam qui sunt aut quaerat necessitatibus. Eum repellat eaque ipsam sapiente! Nemo, 79 | tempore consectetur.

80 |

Asperiores animi odio non optio quo illo deserunt ullam dolorum delectus eum quia distinctio debitis 81 | ducimus aliquid, excepturi odit, nostrum ab atque, laboriosam velit quidem laborum repudiandae deleniti. 82 | Rem, aut?

83 |

Soluta ipsam rem facere omnis sunt nihil exercitationem nemo natus quam inventore eveniet perferendis 84 | earum quisquam porro voluptatum veritatis voluptatibus eum vitae expedita assumenda, neque culpa 85 | dolores? Ad, asperiores facere?

86 | 87 | 88 |
89 | 104 |
105 |
106 |

NewsLetter

107 |

Receba nossas promoções por e-mail.

108 |
109 | 110 | 111 | 112 |
113 |
114 | 117 | 118 | 119 | 120 | 121 | 122 | --------------------------------------------------------------------------------