├── Index.html ├── README.md ├── css └── style.css └── img ├── icone2.png ├── logo.png └── loja.jpg /Index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | Loja de Informática NodeShop 27 | 28 | 29 | 30 | 31 |

32 | 33 |

Loja de Informática

34 | 38 | 39 |

40 | 41 | 42 | 60 | 61 |

62 |

63 |

SOBRE NÓS

64 |

Imagem de uma loja de informática com três pessoas, sendo dois homens e uma mulher. Mulher com camisa social azul clara, sendo abraçada por homem branco com camisa social azul escuro e um homem (vendedor) vestido de camisa social branca.

66 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam soluta officia hic ut aliquid a aperiam, 67 | labore, quis facere at tenetur sed, necessitatibus vero. Libero dolore assumenda fugiat iure laborum. 68 |

69 |

Reiciendis quisquam fugit eius ducimus ab id possimus perferendis vel! Dolore odit rem error iure rerum 70 | quas excepturi sit, corporis placeat nulla totam vero dignissimos, quibusdam alias autem quo illum.

71 |

Unde illo dolores laudantium nam atque accusantium? Neque aut non debitis quas reiciendis! Suscipit et 72 | exercitationem iste consectetur, id temporibus. Aut et necessitatibus maxime illum dolorem qui, suscipit 73 | aliquam rerum.

74 |

Cumque ipsam earum adipisci ad necessitatibus nam neque accusamus maxime iusto autem unde harum sit, ea 75 | sed voluptate. Doloremque, vitae vel explicabo labore consequuntur numquam itaque quasi quam quis 76 | voluptas.

77 |

Excepturi adipisci similique asperiores voluptate ipsa dolorum eius explicabo ipsam vero sint 78 | necessitatibus nihil dolore unde dolorem consequatur quaerat laboriosam nulla, dolor error saepe alias, 79 | quia ab ad. Deleniti, iusto.

80 |

Nesciunt illo eum saepe fuga? Nobis accusantium itaque praesentium, voluptates voluptatum maiores magni 81 | perspiciatis deserunt repudiandae explicabo quos rem eos atque suscipit veniam laborum vero laudantium 82 | necessitatibus? Commodi, laboriosam labore.

83 |

84 | 85 | 101 |

102 | 111 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Projeto02-HTML-CSS 2 | Projeto 02 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 | ul{ 18 | list-style-type: none; 19 | } 20 | a{ 21 | text-decoration: none; 22 | } 23 | h2{ 24 | font-size: 1,5em; 25 | color: #333; 26 | } 27 | p{ 28 | font-size: 1em; 29 | color: #777; 30 | } 31 | 32 | /* CABECALHO */ 33 | .cabecalho{ 34 | width: 100%; 35 | float: left; 36 | padding: 50px 8%; /*% limitação da tela*/ 37 | background-color: #13c7ae; /* linear-gradient (efeito degrade)*/ 38 | } 39 | .logo{ /* estrutura logo*/ 40 | width: 221px; 41 | height: 48px; 42 | float: left; 43 | font-size: 0; 44 | background: url(../IMG/logo.png); 45 | } 46 | .cabecalho form{ /*barra de pesquisa para direita*/ 47 | width: 30%; 48 | float: right; 49 | 50 | } 51 | .cabecalho form input[type="search"]{ 52 | width: 85%; 53 | float: left; 54 | padding: 15px 10px 15px 10px; 55 | border-radius: 15px 0 0 15px; /* rendonda borda da barra de pesquisa (campo de entrada borda estilizadas)*/ 56 | } 57 | .cabecalho button{ /* icone de pesquisa (lupa) */ 58 | width: 15%; 59 | float: right; 60 | padding: 15px 10px; 61 | background-color: #0cae98; 62 | color: #fff; 63 | cursor: pointer; 64 | border-radius: 0 15px 15px 0; /* sentido contrário do campo de entrada (aredonda as bordas da lupa)*/ 65 | 66 | } 67 | /* MENU */ 68 | .menu{ 69 | width: 100%; 70 | float: left; 71 | background-color: #111; 72 | padding: 18px 8%; /* espaçamento interno */ 73 | } 74 | .menu li{ /* li ítens do menu */ 75 | float: left; 76 | } 77 | .menu li a{ 78 | color: #9d9d9d; 79 | margin-right: 25px; 80 | font-size: 19px; 81 | } 82 | .menu li a:hover{ /* houver quando passa o mouse em cima é possível alterar o tamanho da letra, cor, etc (geralmente usado em botões) */ 83 | color: #fff; 84 | /* font-size: 22px; (quando passa o cursor em cima a fonte aumenta) */ 85 | } 86 | /* SOCIAL-ICONS */ 87 | .social-icons{ 88 | float: right; 89 | } 90 | .social-icons a{ 91 | color: #fff; 92 | float: left; 93 | margin-left: 13px; 94 | } 95 | .btn-facebook:hover{ 96 | color: #3b5998; 97 | } 98 | .btn-twitter:hover{ 99 | color: #54A4D6; 100 | } 101 | .btn-google:hover{ 102 | color: #D73D32; 103 | } 104 | /* PRINCIPAL */ 105 | .principal{ 106 | width: 100%; 107 | float: left; 108 | padding: 20px 8%; 109 | } 110 | .sobre{ 111 | width: 70%; 112 | float: left; 113 | padding: 0 20px 20px 0; 114 | } 115 | .sobre h2{ 116 | margin-bottom: 15px; 117 | } 118 | .sobre img{ 119 | width: 50%; 120 | float: left; 121 | border-radius: 5px; 122 | margin: 0 15px 15px 0; 123 | } 124 | .sobre p{ 125 | text-align: justify; 126 | } 127 | /* SIDEBAR */ 128 | .onde-estamos{ 129 | width: 30%; 130 | float: right; 131 | padding: 10px 20px; 132 | background-color: #f5f5f5; 133 | border-radius: 5px; 134 | } 135 | .onde-estamos h2{ 136 | margin-bottom: 5px; 137 | } 138 | .onde-estamos iframe{ 139 | width: 100%; 140 | height:250px ; 141 | margin:20px 0px ; 142 | } 143 | .onde-estamos li{ 144 | color: #777; 145 | margin-bottom: 10px; 146 | } 147 | .onde-estamos i{ 148 | margin-right: 5px; 149 | } 150 | .onde-estamos p{ 151 | color: #111; 152 | } 153 | /* NEWSLETTER */ 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 | .newsletter p{ 165 | font-size: 1.2em; 166 | color: #fff; 167 | } 168 | .newsletter form{ 169 | width: 100%; 170 | float: left; 171 | margin-top: 10px; 172 | } 173 | .newsletter form input{ 174 | width: 40%; 175 | margin-right: 1%; 176 | padding: 15px 10px; 177 | border: 1px solid #fff; 178 | border-radius: 5px; 179 | color: #fff; 180 | background-color: initial; 181 | float: left; 182 | } 183 | .newsletter button{ 184 | width: 18%; 185 | background-color: #fff; 186 | padding: 15px 10px; 187 | border-radius: 5px; 188 | float: right; 189 | cursor: pointer; 190 | } 191 | .rodape{ 192 | width: 100%; 193 | float: left; 194 | background-color: #13c7ae; 195 | padding: 20px 8%; 196 | } 197 | .rodape p{ 198 | color: #fff; 199 | 200 | } 201 | 202 | 203 | 204 | 205 | -------------------------------------------------------------------------------- /img/icone2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/migermano/Projeto02-HTML-CSS/907e2071c01c7e5a7543c9ed93bc5e25fff1e83c/img/icone2.png -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/migermano/Projeto02-HTML-CSS/907e2071c01c7e5a7543c9ed93bc5e25fff1e83c/img/logo.png -------------------------------------------------------------------------------- /img/loja.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/migermano/Projeto02-HTML-CSS/907e2071c01c7e5a7543c9ed93bc5e25fff1e83c/img/loja.jpg --------------------------------------------------------------------------------