├── README.md ├── contatos - Copia.html ├── contatos.html ├── css └── style.css ├── img ├── MicrosoftTeams-image (1).png ├── MicrosoftTeams-image (2).png ├── MicrosoftTeams-image.png ├── Produto - 01.jpg ├── Produto - 02.jpg ├── Produto 03.jpg ├── Produto 05.jpg ├── Produto 06.jpg ├── Produto 07.jpg ├── Produto 08.jpg ├── Produto 09.jpg ├── Produto 10.jpg ├── Produto 11.jpg ├── Produto 12.jpg ├── Produto 13.jpg ├── Produto 14.jpg ├── Produto 15.jpg ├── elton.txt ├── produto 04.jpg └── teclado.jpg ├── index.html └── 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 informática. 3 | -------------------------------------------------------------------------------- /contatos - Copia.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Loja UltaCyber 16 | 17 | 18 | 19 |
20 |

21 | loja de Informática do jaja 22 |

23 |
24 | 25 | 26 |
27 |
28 | 46 |
47 |

Venha fazer parte da nossa família

Seja UltraCyber

48 |
49 |
50 | 51 |
52 | 53 |
54 | 55 | 58 | 59 | 60 | 61 | 62 |
63 |
64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /contatos.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Loja UltaCyber 16 | 17 | 18 | 19 |
20 |

21 | loja de Informática do jaja 22 |

23 |
24 | 25 | 26 |
27 |
28 | 46 |
47 |

Venha fazer parte da nossa família

Seja UltraCyber

48 |
49 |
50 | 51 |
52 | 53 |
54 | 55 | 58 | 59 | 60 | 61 | 62 |
63 |
64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /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 | img{ 13 | max-width: 100%; 14 | } 15 | ul{ 16 | list-style-type: none; 17 | } 18 | a{ 19 | text-decoration: none; 20 | } 21 | h2{ 22 | font-size: 1.5em; 23 | color:#333 24 | } 25 | p{ 26 | font-size: 1.5em; 27 | color:#777 28 | } 29 | /* CABECALHO */ 30 | 31 | .cabecalho{ 32 | width: 100%; 33 | float:left; 34 | padding:50px 8%; 35 | background-color: #13c7ae 36 | /*background: linear-gradient(orange,purple);*/ 37 | } 38 | .logo{ 39 | width: 221px; 40 | height: 48px; 41 | float: left; 42 | font-size: 0; 43 | background: url(../img/MicrosoftTeams-image\ \(1\).png) 44 | } 45 | .cabecalho form{ 46 | width: 30%; 47 | float: right; 48 | } 49 | .cabecalho form input[type="search"] { 50 | width: 85%; 51 | float: left; 52 | padding:15px 10px 15px 10px; 53 | border-radius: 15px 0 0 15px; 54 | } 55 | .cabecalho button{ 56 | width:15%; 57 | float: right; 58 | padding: 18px 16px ; 59 | background-color: #0cae98; 60 | color: #fff; 61 | cursor: pointer; 62 | border-radius: 0 15px 15px 0; 63 | } 64 | /*MENU*/ 65 | .menu { 66 | width: 100%; 67 | float: left; 68 | background-color: #111; 69 | padding: 18px 8%; 70 | } 71 | .menu li { 72 | float: left; 73 | } 74 | .menu li a { 75 | color: #9d9d9d; 76 | margin-right: 25px; 77 | font-size: 19px; 78 | } 79 | .menu li a:hover { 80 | color: #fff; 81 | } 82 | /* Social-icons */ 83 | 84 | .social-icons { 85 | float: right; 86 | } 87 | .social-icons a { 88 | color: #fff; 89 | float: left; 90 | margin-left: 13px; 91 | } 92 | .btn-facebook:hover { 93 | color: #3b5998; 94 | } 95 | .btn-google:hover { 96 | color: #D73D32; 97 | } 98 | .btn-twitter:hover { 99 | color: #54A4D6; 100 | } 101 | /* PRINCIPAL */ 102 | .principal{ 103 | width: 100%; 104 | float: left; 105 | padding: 20px 8%; 106 | } 107 | .sobre{ 108 | width: 70%; 109 | float: left; 110 | padding:0 20px 20px 0 ; 111 | } 112 | .sobre h2{ 113 | margin-bottom: 15px; 114 | } 115 | .sobre img{ 116 | width: 50%; 117 | float: left; 118 | border-radius: 5px; 119 | margin: 0 15px 15px 0; 120 | } 121 | 122 | .sobre p{ 123 | text-align: justify; 124 | } 125 | .titulo{ 126 | font-weight: bold; 127 | color: black; 128 | } 129 | /* SIDE BAR */ 130 | .onde-estamos{ 131 | width: 30%; 132 | float: right; 133 | padding: 10px 20px; 134 | background-color: #f5f5f5; 135 | border-radius: 7px; 136 | } 137 | .onde-estamos h2{ 138 | margin-bottom: 7px; 139 | } 140 | 141 | .onde-estamos iframe{ 142 | width: 100%; 143 | height: 250px; 144 | margin: 20px 0px; 145 | } 146 | .onde-estamos li{ 147 | color: #777; 148 | margin-bottom: 10px; 149 | } 150 | .onde-estamos i{ 151 | margin-right: 6px; 152 | } 153 | /* NEWS LETTER */ 154 | .newsletter{ 155 | width: 100%; 156 | float: left; 157 | background-color: #111; 158 | padding: 50px 8%; 159 | } 160 | .newsletter h3{ 161 | font-size:1.8em; 162 | color:#fff; 163 | 164 | } 165 | .newsletter p{ 166 | font-size: 1.2em; 167 | color:#fff; 168 | 169 | } 170 | .newsletter form{ 171 | width: 100%; 172 | float: left; 173 | margin-top: 12px; 174 | } 175 | .newsletter form input{ 176 | width: 40%; 177 | margin-right: 1%; 178 | border: 1px solid #fff; 179 | border-radius: 10px; 180 | color: #fff; 181 | background-color: initial; 182 | float: left; 183 | } 184 | .newsletter button{ 185 | width: 18%; 186 | background-color: #fff; 187 | padding: 15px 10px; 188 | border-radius: 7px; 189 | float: right; 190 | cursor: pointer; 191 | } 192 | /* PRODUTOS */ 193 | 194 | .coisas{ 195 | width: 200px; 196 | display: inline; 197 | } 198 | .produtos{ 199 | width: 200px; 200 | padding: 10px 20px; 201 | background-color: #c8bbbb; 202 | border-radius: 7px; 203 | display: inline-block; 204 | justify-content: space-between; 205 | margin: 10px 10px 10px 10px; 206 | } 207 | .coisas p{ 208 | font-size: medium; 209 | color:#111 210 | } 211 | /* SERVIÇOS */ 212 | .ed { 213 | width: 60%; 214 | margin-left: auto; 215 | margin-right: auto; 216 | } 217 | p::selection{ 218 | background-color: #0cae98; 219 | color: #f5f5f5; 220 | } 221 | /* CONTATOS */ 222 | /* .contatos { 223 | width: 100%; 224 | float: left; 225 | background-color: #777; 226 | padding: 200px 100%; 227 | } 228 | .contatos h2{ 229 | font-size: 1.8em; 230 | color:#111; 231 | } 232 | .contatos form{ 233 | width: 100%; 234 | float: left; 235 | margin-top: 10px; 236 | } 237 | .contatos form input{ 238 | width: 40%; 239 | margin-right: 1%; 240 | padding: 15px 10px; 241 | border: 1px solid #fff; 242 | border-radius: 10px; 243 | color: #fff; 244 | background-color: initial; 245 | float: left; 246 | } 247 | .contatos button{ 248 | width: 18%; 249 | padding: 15px 5px; 250 | border: 1px solid #111; 251 | border-radius: 10px; 252 | } */ 253 | section{ 254 | display: flex; 255 | align-items:center; 256 | justify-content:center; 257 | flex-direction: row; 258 | padding: 70px 45px; 259 | background: #1d1d2e; 260 | width: 500px 500px; 261 | box-shadow:rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;; 262 | 263 | } 264 | .h2cnt{ 265 | color: #f5f5f5; 266 | font-size: 5em; 267 | margin: 2rem; 268 | text-transform: capitalize; 269 | } 270 | sectiom form{ 271 | display:flex ; 272 | flex-direction: row; 273 | width: 100%; 274 | } 275 | form label{ 276 | color: #f5f5f5; 277 | font-size: 24px; 278 | margin-bottom: 20px; 279 | } 280 | form input{ 281 | padding: 15px; 282 | outline: none; 283 | border: 0; 284 | margin-bottom: 20px; 285 | font-size: 20px; 286 | transition: all 0.5s; 287 | 288 | } 289 | form input:focus{ 290 | border-radius: 16px; 291 | } 292 | form textarea{ 293 | padding: 10px ; 294 | outline: none; 295 | border: 0; 296 | font-size: 20px ; 297 | margin-bottom: 30px; 298 | transition: all 0.5s; 299 | } 300 | form textarea:focus{ 301 | border-radius: 16px; 302 | } 303 | .btn2{ 304 | padding: 30px; 305 | cursor: pointer; 306 | font-size: 16px; 307 | background: transparent; 308 | border: 2px solid #f5f5f5; 309 | color: #f5f5f5; 310 | transition: all 1s; 311 | margin-bottom: 20px; 312 | margin: 10px 10px 10px 10px; 313 | float: left; 314 | } 315 | .btn2:hover{ 316 | background: #f5f5f5; 317 | color: #101026; 318 | border-radius: 16px; 319 | } 320 | .rodape{ 321 | width: 100%; 322 | float: left; 323 | background-color: #13c7ae; 324 | padding: 20px 8%; 325 | } 326 | .rodape p{ 327 | color: #fff; 328 | 329 | } -------------------------------------------------------------------------------- /img/MicrosoftTeams-image (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eltonn-001/Projeto02-HTML-CSS/3f4aea67dd832396567a715dcad5abf94689aa49/img/MicrosoftTeams-image (1).png -------------------------------------------------------------------------------- /img/MicrosoftTeams-image (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eltonn-001/Projeto02-HTML-CSS/3f4aea67dd832396567a715dcad5abf94689aa49/img/MicrosoftTeams-image (2).png -------------------------------------------------------------------------------- /img/MicrosoftTeams-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eltonn-001/Projeto02-HTML-CSS/3f4aea67dd832396567a715dcad5abf94689aa49/img/MicrosoftTeams-image.png -------------------------------------------------------------------------------- /img/Produto - 01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eltonn-001/Projeto02-HTML-CSS/3f4aea67dd832396567a715dcad5abf94689aa49/img/Produto - 01.jpg -------------------------------------------------------------------------------- /img/Produto - 02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eltonn-001/Projeto02-HTML-CSS/3f4aea67dd832396567a715dcad5abf94689aa49/img/Produto - 02.jpg -------------------------------------------------------------------------------- /img/Produto 03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eltonn-001/Projeto02-HTML-CSS/3f4aea67dd832396567a715dcad5abf94689aa49/img/Produto 03.jpg -------------------------------------------------------------------------------- /img/Produto 05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eltonn-001/Projeto02-HTML-CSS/3f4aea67dd832396567a715dcad5abf94689aa49/img/Produto 05.jpg -------------------------------------------------------------------------------- /img/Produto 06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eltonn-001/Projeto02-HTML-CSS/3f4aea67dd832396567a715dcad5abf94689aa49/img/Produto 06.jpg -------------------------------------------------------------------------------- /img/Produto 07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eltonn-001/Projeto02-HTML-CSS/3f4aea67dd832396567a715dcad5abf94689aa49/img/Produto 07.jpg -------------------------------------------------------------------------------- /img/Produto 08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eltonn-001/Projeto02-HTML-CSS/3f4aea67dd832396567a715dcad5abf94689aa49/img/Produto 08.jpg -------------------------------------------------------------------------------- /img/Produto 09.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eltonn-001/Projeto02-HTML-CSS/3f4aea67dd832396567a715dcad5abf94689aa49/img/Produto 09.jpg -------------------------------------------------------------------------------- /img/Produto 10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eltonn-001/Projeto02-HTML-CSS/3f4aea67dd832396567a715dcad5abf94689aa49/img/Produto 10.jpg -------------------------------------------------------------------------------- /img/Produto 11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eltonn-001/Projeto02-HTML-CSS/3f4aea67dd832396567a715dcad5abf94689aa49/img/Produto 11.jpg -------------------------------------------------------------------------------- /img/Produto 12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eltonn-001/Projeto02-HTML-CSS/3f4aea67dd832396567a715dcad5abf94689aa49/img/Produto 12.jpg -------------------------------------------------------------------------------- /img/Produto 13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eltonn-001/Projeto02-HTML-CSS/3f4aea67dd832396567a715dcad5abf94689aa49/img/Produto 13.jpg -------------------------------------------------------------------------------- /img/Produto 14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eltonn-001/Projeto02-HTML-CSS/3f4aea67dd832396567a715dcad5abf94689aa49/img/Produto 14.jpg -------------------------------------------------------------------------------- /img/Produto 15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eltonn-001/Projeto02-HTML-CSS/3f4aea67dd832396567a715dcad5abf94689aa49/img/Produto 15.jpg -------------------------------------------------------------------------------- /img/elton.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /img/produto 04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eltonn-001/Projeto02-HTML-CSS/3f4aea67dd832396567a715dcad5abf94689aa49/img/produto 04.jpg -------------------------------------------------------------------------------- /img/teclado.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Eltonn-001/Projeto02-HTML-CSS/3f4aea67dd832396567a715dcad5abf94689aa49/img/teclado.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | Loja UltraCyber 19 | 20 | 21 | 22 |
23 |

24 | loja UltraCyber 27 |

28 |
29 | 35 | 36 |
37 |
38 | 53 |
54 |
55 |

Sobre Nós

56 | Imagem de dois homens vestidos de roupas sociais sendo o da direita de camiseta branca, e o da esquerda com camisa social azul escuro abrançando uma mulher que veste roupas sociais clara 57 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti placeat qui non. Recusandae nobis cupiditate voluptates. Vitae quo voluptatibus reiciendis perferendis minus error dignissimos, aperiam quisquam, repellendus alias laborum temporibus!

58 |

Harum, sed placeat ullam obcaecati vero quis deleniti, reprehenderit, aut molestiae aspernatur culpa ducimus illo quaerat ex consectetur tempore! Tempora quas cum, temporibus fugiat nulla placeat consectetur eos sapiente sequi?

59 |

Quod amet, perspiciatis exercitationem architecto velit ullam maiores. Voluptas, quo asperiores. Rem vitae, voluptates esse ipsum ipsa ea numquam possimus dicta repellendus dolore optio perferendis nostrum accusamus beatae voluptatem. Eveniet.

60 |

Illum accusantium ducimus sed earum impedit temporibus molestias repellat voluptatem quaerat quasi? Quos expedita eaque debitis voluptatem ea laborum libero adipisci, ullam explicabo repellendus, suscipit fugit quaerat nam tempora error?

61 |

Repudiandae nulla doloremque tempora ipsum ab corrupti possimus laudantium impedit inventore necessitatibus sed, voluptatem voluptates temporibus enim. Ipsam tempora illum tempore molestiae repellat nihil voluptates temporibus ipsa accusantium! Unde, aut.

62 |

Eum officiis similique dignissimos aliquid maxime? Voluptatum impedit ducimus ex, amet beatae natus maxime cumque quaerat laborum cupiditate quas aspernatur mollitia sequi, quo soluta culpa cum magni alias? Sint, nulla.

63 | 64 |
65 | 76 |
77 |
78 |

NewsLetter

79 |

Receba nossas promoções por email

80 |
81 | 82 | 83 | 84 | 85 |
86 |
87 | 90 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /produtos.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Loja UltaCyber 16 | 17 | 18 | 19 |
20 |

21 | loja UltraCyber 22 |

23 |
24 | 25 | 26 |
27 |
28 | 46 |
47 |
48 | 49 | 50 |

Monitor Gamer LG 26 IPS

51 |

R$ 899,99 52 | À vista no PIX com até 12% OFF 53 |

54 | 55 |
56 |
57 |

Mouse Gamer HyperX Pulsefire

58 |

R$ 129,99 59 | À vista no PIX com até 15% OFF 60 |

61 | 62 |
63 |
64 |

Cadeira Gamer WWXT

65 |

66 | Em até 10x de R$ 75,14 sem juros no cartão 67 |

68 |

R$ 751,41

69 | 70 |
71 |
72 |

Iphone 14 Pro Max, Apple 128GB

73 |

R$ 8.826,45 74 | À vista no PIX com até 5% OFF 75 |

76 |
77 |
78 |

Teclado Mecânico Gamer

79 |

R$ 279,99 80 | À vista no PIX com até 15% OFF 81 | R$ 329,40 82 |

83 | 84 |
85 |
86 |

Iphone 14 Pro Max, Apple 128GB

87 |

R$ 8.826,45 88 | À vista no PIX com até 5% OFF 89 |

90 |
91 |
92 |

Iphone 14 Pro Max, Apple 128GB

93 |

R$ 8.826,45 94 | À vista no PIX com até 5% OFF 95 |

96 |
97 |
98 |

Iphone 14 Pro Max, Apple 128GB

99 |

R$ 8.826,45 100 | À vista no PIX com até 5% OFF 101 |

102 |
103 |
104 |

Iphone 14 Pro Max, Apple 128GB

105 |

R$ 8.826,45 106 | À vista no PIX com até 5% OFF 107 |

108 |
109 |
110 |

Iphone 14 Pro Max, Apple 128GB

111 |

R$ 8.826,45 112 | À vista no PIX com até 5% OFF 113 |

114 | 115 |
116 |
117 |

Iphone 14 Pro Max, Apple 128GB

118 |

R$ 8.826,45 119 | À vista no PIX com até 5% OFF 120 |

121 | 122 |
123 |
124 |

Iphone 14 Pro Max, Apple 128GB

125 |

R$ 8.826,45 126 | À vista no PIX com até 5% OFF 127 |

128 |
129 | 130 | 131 | 132 |
133 |
134 | 138 | 139 | --------------------------------------------------------------------------------