├── images ├── icones │ ├── icone-menu.png │ ├── icone-entrar.png │ ├── icone-login.png │ ├── icone-cadeado.png │ ├── icone-carrinho.png │ ├── icone-facebook.png │ ├── icone-favoritos.png │ ├── icone-instagram.png │ ├── icone-pesquisa.png │ ├── icone-twitter.png │ ├── icone-usuario.png │ └── icone-youtube.png ├── banners │ ├── dying-light.jpg │ ├── manor-lords.jpg │ └── mortal-kombat-11.jpg ├── games │ ├── warner │ │ ├── batman.jpg │ │ ├── back-for-blood.jpg │ │ ├── lego-star-wars.jpg │ │ ├── mortal-kombat-11.jpg │ │ └── injustice-gods-among-us.jpg │ ├── devolver │ │ ├── carrion.jpg │ │ ├── gunbrella.jpg │ │ ├── death's-door.jpg │ │ ├── gato-roboto.jpg │ │ └── the-messenger.jpg │ ├── ubisoft │ │ ├── far-cry-6.jpg │ │ ├── watch-dogs-2.jpg │ │ ├── rainbow-six-siege.jpg │ │ ├── tom-clancys-ghost-recon.jpg │ │ └── assassins-creed-valhalla.jpg │ ├── playstation │ │ ├── days-gone.jpg │ │ ├── god-of-war.jpg │ │ ├── helldivers-2.jpg │ │ ├── ghost-of-tsushima.jpg │ │ └── horizon-forbidden-west.jpg │ ├── capcom │ │ ├── devil-may-cry-5.jpg │ │ ├── dragons-dogma-2.jpg │ │ ├── resident-evil-4.jpg │ │ ├── street-fighter-v.jpg │ │ └── monster-hunter-rise.jpg │ ├── from-software │ │ ├── boodborne.jpeg │ │ ├── demons-souls.png │ │ ├── elden-ring.jpg │ │ ├── dark-souls-III.jpg │ │ └── sekiro-shadows-die-twice.jpg │ ├── lancamentos │ │ ├── silent-hill-2.jpg │ │ ├── god-of-war-ragnarok.jpg │ │ ├── metaphor-refantazio.jpg │ │ ├── sonic-shadow-generation.jpg │ │ └── dragon-ball-sparking-zero.jpg │ ├── ofertas-da-semana │ │ ├── deadlink.jpg │ │ ├── zelter.jpg │ │ ├── cataclismo.jpg │ │ ├── deflector.jpg │ │ └── thought-experiment-simulator.jpg │ └── ofertas-especiais │ │ ├── tekken-8.jpg │ │ ├── mortal-kombat-1.jpg │ │ ├── soulcalibur-vi.jpg │ │ ├── dragonball-fighter-z.jpg │ │ └── jujutsu-kaisen-cursed-clash.jpg └── logo │ └── logo-ng-store.png ├── script.js ├── README.md ├── login.html ├── css └── style.css └── index.html /images/icones/icone-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/icones/icone-menu.png -------------------------------------------------------------------------------- /images/banners/dying-light.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/banners/dying-light.jpg -------------------------------------------------------------------------------- /images/banners/manor-lords.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/banners/manor-lords.jpg -------------------------------------------------------------------------------- /images/games/warner/batman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/warner/batman.jpg -------------------------------------------------------------------------------- /images/icones/icone-entrar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/icones/icone-entrar.png -------------------------------------------------------------------------------- /images/icones/icone-login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/icones/icone-login.png -------------------------------------------------------------------------------- /images/logo/logo-ng-store.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/logo/logo-ng-store.png -------------------------------------------------------------------------------- /images/games/devolver/carrion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/devolver/carrion.jpg -------------------------------------------------------------------------------- /images/icones/icone-cadeado.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/icones/icone-cadeado.png -------------------------------------------------------------------------------- /images/icones/icone-carrinho.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/icones/icone-carrinho.png -------------------------------------------------------------------------------- /images/icones/icone-facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/icones/icone-facebook.png -------------------------------------------------------------------------------- /images/icones/icone-favoritos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/icones/icone-favoritos.png -------------------------------------------------------------------------------- /images/icones/icone-instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/icones/icone-instagram.png -------------------------------------------------------------------------------- /images/icones/icone-pesquisa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/icones/icone-pesquisa.png -------------------------------------------------------------------------------- /images/icones/icone-twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/icones/icone-twitter.png -------------------------------------------------------------------------------- /images/icones/icone-usuario.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/icones/icone-usuario.png -------------------------------------------------------------------------------- /images/icones/icone-youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/icones/icone-youtube.png -------------------------------------------------------------------------------- /images/banners/mortal-kombat-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/banners/mortal-kombat-11.jpg -------------------------------------------------------------------------------- /images/games/devolver/gunbrella.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/devolver/gunbrella.jpg -------------------------------------------------------------------------------- /images/games/ubisoft/far-cry-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/ubisoft/far-cry-6.jpg -------------------------------------------------------------------------------- /images/games/devolver/death's-door.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/devolver/death's-door.jpg -------------------------------------------------------------------------------- /images/games/devolver/gato-roboto.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/devolver/gato-roboto.jpg -------------------------------------------------------------------------------- /images/games/playstation/days-gone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/playstation/days-gone.jpg -------------------------------------------------------------------------------- /images/games/ubisoft/watch-dogs-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/ubisoft/watch-dogs-2.jpg -------------------------------------------------------------------------------- /images/games/warner/back-for-blood.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/warner/back-for-blood.jpg -------------------------------------------------------------------------------- /images/games/warner/lego-star-wars.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/warner/lego-star-wars.jpg -------------------------------------------------------------------------------- /images/games/capcom/devil-may-cry-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/capcom/devil-may-cry-5.jpg -------------------------------------------------------------------------------- /images/games/capcom/dragons-dogma-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/capcom/dragons-dogma-2.jpg -------------------------------------------------------------------------------- /images/games/capcom/resident-evil-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/capcom/resident-evil-4.jpg -------------------------------------------------------------------------------- /images/games/capcom/street-fighter-v.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/capcom/street-fighter-v.jpg -------------------------------------------------------------------------------- /images/games/devolver/the-messenger.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/devolver/the-messenger.jpg -------------------------------------------------------------------------------- /images/games/playstation/god-of-war.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/playstation/god-of-war.jpg -------------------------------------------------------------------------------- /images/games/warner/mortal-kombat-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/warner/mortal-kombat-11.jpg -------------------------------------------------------------------------------- /images/games/capcom/monster-hunter-rise.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/capcom/monster-hunter-rise.jpg -------------------------------------------------------------------------------- /images/games/from-software/boodborne.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/from-software/boodborne.jpeg -------------------------------------------------------------------------------- /images/games/from-software/demons-souls.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/from-software/demons-souls.png -------------------------------------------------------------------------------- /images/games/from-software/elden-ring.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/from-software/elden-ring.jpg -------------------------------------------------------------------------------- /images/games/lancamentos/silent-hill-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/lancamentos/silent-hill-2.jpg -------------------------------------------------------------------------------- /images/games/ofertas-da-semana/deadlink.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/ofertas-da-semana/deadlink.jpg -------------------------------------------------------------------------------- /images/games/ofertas-da-semana/zelter.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/ofertas-da-semana/zelter.jpg -------------------------------------------------------------------------------- /images/games/ofertas-especiais/tekken-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/ofertas-especiais/tekken-8.jpg -------------------------------------------------------------------------------- /images/games/playstation/helldivers-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/playstation/helldivers-2.jpg -------------------------------------------------------------------------------- /images/games/ubisoft/rainbow-six-siege.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/ubisoft/rainbow-six-siege.jpg -------------------------------------------------------------------------------- /images/games/from-software/dark-souls-III.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/from-software/dark-souls-III.jpg -------------------------------------------------------------------------------- /images/games/ofertas-da-semana/cataclismo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/ofertas-da-semana/cataclismo.jpg -------------------------------------------------------------------------------- /images/games/ofertas-da-semana/deflector.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/ofertas-da-semana/deflector.jpg -------------------------------------------------------------------------------- /images/games/lancamentos/god-of-war-ragnarok.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/lancamentos/god-of-war-ragnarok.jpg -------------------------------------------------------------------------------- /images/games/lancamentos/metaphor-refantazio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/lancamentos/metaphor-refantazio.jpg -------------------------------------------------------------------------------- /images/games/playstation/ghost-of-tsushima.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/playstation/ghost-of-tsushima.jpg -------------------------------------------------------------------------------- /images/games/ubisoft/tom-clancys-ghost-recon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/ubisoft/tom-clancys-ghost-recon.jpg -------------------------------------------------------------------------------- /images/games/warner/injustice-gods-among-us.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/warner/injustice-gods-among-us.jpg -------------------------------------------------------------------------------- /images/games/ofertas-especiais/mortal-kombat-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/ofertas-especiais/mortal-kombat-1.jpg -------------------------------------------------------------------------------- /images/games/ofertas-especiais/soulcalibur-vi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/ofertas-especiais/soulcalibur-vi.jpg -------------------------------------------------------------------------------- /images/games/ubisoft/assassins-creed-valhalla.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/ubisoft/assassins-creed-valhalla.jpg -------------------------------------------------------------------------------- /images/games/lancamentos/sonic-shadow-generation.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/lancamentos/sonic-shadow-generation.jpg -------------------------------------------------------------------------------- /images/games/playstation/horizon-forbidden-west.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/playstation/horizon-forbidden-west.jpg -------------------------------------------------------------------------------- /images/games/from-software/sekiro-shadows-die-twice.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/from-software/sekiro-shadows-die-twice.jpg -------------------------------------------------------------------------------- /images/games/lancamentos/dragon-ball-sparking-zero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/lancamentos/dragon-ball-sparking-zero.jpg -------------------------------------------------------------------------------- /images/games/ofertas-especiais/dragonball-fighter-z.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/ofertas-especiais/dragonball-fighter-z.jpg -------------------------------------------------------------------------------- /images/games/ofertas-da-semana/thought-experiment-simulator.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/ofertas-da-semana/thought-experiment-simulator.jpg -------------------------------------------------------------------------------- /images/games/ofertas-especiais/jujutsu-kaisen-cursed-clash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/otaviossousa/NG-Store/HEAD/images/games/ofertas-especiais/jujutsu-kaisen-cursed-clash.jpg -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // Função de Login 2 | function handleLogin(event) { 3 | event.preventDefault(); // Previne o envio do formulário 4 | 5 | const usuario = document.flogin.usuario.value; 6 | const senha = document.flogin.senha.value; 7 | 8 | // Validação simples 9 | if (usuario === "admin" && senha === "admin") { 10 | alert("Login bem-sucedido!"); 11 | window.location.href = "index.html"; // Redireciona após login bem-sucedido 12 | } else { 13 | alert("Usuário ou senha inválidos"); 14 | // Limpa os campos de senha após a tentativa 15 | document.flogin.senha.value = ""; 16 | } 17 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # NG Store 2 | 3 | Este projeto foi desenvolvido como parte do teste Front-End do curso Fullstack do SENAI. O objetivo foi criar um site funcional e estilizado para uma loja virtual, incluindo uma página de login e protótipos detalhados. 4 | 5 | ## Visualização do Projeto 6 | 7 | - [Site Principal](https://otaviossousa.github.io/NG-Store/index.html) 8 | - [Página de Login](https://otaviossousa.github.io/NG-Store/login.html) 9 | 10 | ## Protótipos 11 | 12 | Os protótipos de baixa e alta fidelidade do site foram criados na ferramenta Figma. Você pode visualizar e explorar os protótipos através dos links abaixo: 13 | 14 | - [Protótipo de Alta e Baixa Fidelidade](https://www.figma.com/design/5RRgghDZbxijlLHDcVVjv0/Senai---Prototipo-Alta-Fidelidade-2?m=auto&t=qj4goIqVgvgrNqxe-6) 15 | 16 | ## Funcionalidades 17 | 18 | - **Página Principal**: Exibe produtos em destaque, banners, categorias e uma barra de pesquisa. 19 | - **Página de Login**: Permite que os usuários façam login para acessar suas contas, o usuário : **admin** e senha: **admin** para testes. 20 | - **Responsividade**: O site é responsivo e ajusta-se a diferentes tamanhos de tela. 21 | 22 | ## Tecnologias Utilizadas 23 | 24 | - **HTML**: Estrutura do conteúdo do site. 25 | - **CSS**: Estilização e layout. 26 | - **Bootstrap**: Framework para construção de layouts responsivos. 27 | - **Figma**: Ferramenta para criação dos protótipos. 28 | 29 | ## Como Contribuir 30 | 31 | 1. Faça um fork deste repositório. 32 | 2. Crie uma branch para suas alterações (`git checkout -b minha-nova-branch`). 33 | 3. Faça commit das suas alterações (`git commit -am 'Adiciona novas funcionalidades'`). 34 | 4. Faça push para a branch (`git push origin minha-nova-branch`). 35 | 5. Abra um Pull Request no GitHub. 36 | -------------------------------------------------------------------------------- /login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | 19 | 20 | NG Store Home 21 | 22 | 23 |
24 | 25 |
26 | 27 |
28 | 29 | 34 | 35 | 36 | 42 | 43 | 44 |
45 | 50 | 51 |
52 | 53 | Ícone Favoritos 54 | 55 |
56 | 57 |
58 | 59 | Ícone Carrinho 60 | 61 |
62 |
63 |
64 | 65 | 66 |
67 | 68 | 100 |
101 |
102 |
103 | 104 |
105 | 106 |
107 |
108 |
109 |
110 |

Login

111 |
112 |
113 | 117 | 118 |
119 |
120 | 124 | 125 |
126 |
127 | 131 |
132 |

133 | Esqueceu a senha? 134 |

135 |

136 | Não tem uma conta? Cadastre-se 137 |

138 |
139 |
140 |
141 |
142 |
143 |
144 | 145 | 273 | 274 | 301 | 302 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /* Configuração inicial do viewport */ 2 | html { 3 | font-size: 100%; /* 1rem = 16px */ 4 | box-sizing: border-box; 5 | } 6 | 7 | /* --------------------------------------------------------------< Header >------------------------------------------------------------- */ 8 | 9 | header { 10 | background-color: #1E1E1E; 11 | color: white; 12 | padding: 10px 0; 13 | } 14 | 15 | .nav-item a { 16 | color: white; 17 | } 18 | 19 | .nav-item a:hover { 20 | color: #00a000; 21 | } 22 | 23 | .header-site-logo img { 24 | width: 80px; 25 | height: auto; 26 | } 27 | 28 | .container-header-1 { 29 | display: flex; 30 | align-items: center; 31 | justify-content: space-between; 32 | flex-wrap: nowrap; 33 | } 34 | 35 | .search-bar { 36 | flex-grow: 1; 37 | margin: 0 20px; 38 | position: relative; 39 | } 40 | 41 | .search-bar form { 42 | display: flex; 43 | align-items: center; 44 | width: 100%; 45 | } 46 | 47 | .search-bar input { 48 | flex-grow: 1; 49 | padding-right: 40px; 50 | } 51 | 52 | .icons { 53 | display: flex; 54 | gap: 10px; 55 | } 56 | 57 | .icons img { 58 | width: 40px; 59 | height: auto; 60 | } 61 | 62 | .search-icon { 63 | position: absolute; 64 | right: 10px; 65 | top: 50%; 66 | transform: translateY(-50%); 67 | cursor: pointer; 68 | } 69 | 70 | .navbar-nav .nav-link { 71 | margin-right: 90px; 72 | white-space: nowrap; 73 | overflow: hidden; 74 | text-overflow: ellipsis; 75 | } 76 | 77 | .navbar-nav { 78 | display: flex; 79 | flex-direction: row; 80 | flex-wrap: nowrap; 81 | } 82 | 83 | .container-header-2 { 84 | display: flex; 85 | align-items: center; 86 | justify-content: space-between; 87 | width: 100%; 88 | } 89 | 90 | .navbar-toggler { 91 | background: transparent; 92 | border: none; 93 | display: flex; 94 | cursor: pointer; 95 | outline: none; 96 | transition: none; 97 | align-items: center; 98 | justify-content: center; 99 | } 100 | 101 | .navbar-toggler svg { 102 | width: 30px; 103 | height: 30px; 104 | color: white; 105 | } 106 | 107 | /* Responsividade */ 108 | @media (max-width: 768px) { 109 | .container-header-1 { 110 | flex-direction: column; 111 | align-items: center; 112 | justify-content: center; 113 | width: 100%; 114 | } 115 | 116 | .header-site-logo { 117 | margin-bottom: 10px; 118 | } 119 | 120 | .search-bar { 121 | flex: 1; 122 | max-width: 100%; 123 | margin: 0 10px 10px 10px; 124 | } 125 | 126 | .icons { 127 | flex: 0 1 auto; 128 | display: flex; 129 | justify-content: center; 130 | margin-bottom: 10px; 131 | } 132 | 133 | .container-header-2 { 134 | display: flex; 135 | align-items: center; 136 | justify-content: center; 137 | flex-wrap: nowrap; 138 | width: 100%; 139 | } 140 | 141 | .navbar-nav { 142 | flex-direction: column; 143 | align-items: center; 144 | justify-content: center; 145 | } 146 | 147 | .navbar-nav .nav-link { 148 | margin-right: 0; 149 | margin-bottom: 10px; 150 | } 151 | 152 | .navbar-toggler-icon { 153 | width: 30px; /* Ajuste conforme necessário */ 154 | height: 30px; /* Ajuste conforme necessário */ 155 | background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc2Nyb2xsaW5nPSJjcm9zcyIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yLjUgMTJhLjUuNSAwIDAgMSAuNS41IEgzYSAuNS41IDAgMCAxIC0uNS41IG0wLTRhLjUuNSA0IDAgMSAwLjc1LTIuNzYgbS0uNS0uNSAyLjc1LTIuNzYgMC0uNSAuNSIgLz4KPC9zdmc+'); /* SVG em Base64 */ 156 | background-size: contain; 157 | background-repeat: no-repeat; 158 | background-position: center; 159 | border: none; /* Remove a borda se necessário */ 160 | cursor: pointer; /* Adiciona cursor pointer */ 161 | } 162 | } 163 | 164 | @media (max-width: 480px) { 165 | .navbar-nav .nav-link { 166 | margin-right: 0; 167 | margin-bottom: 5px; 168 | font-size: 0.9rem; 169 | } 170 | 171 | .search-bar input { 172 | padding-right: 30px; 173 | } 174 | 175 | .icons img { 176 | width: 30px; 177 | } 178 | } 179 | /* ------------------------------------------------------------< Main >--------------------------------------------------------------- */ 180 | 181 | /* -----------------------------------------------------------< Login >----------------------------------------------------------------*/ 182 | body main { 183 | background-color: #21224e; 184 | color: white; 185 | font-family: Arial, sans-serif; 186 | padding: 60px; 187 | box-sizing: border-box; 188 | } 189 | 190 | .card { 191 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 192 | max-width: 400px; 193 | width: 100%; 194 | margin: 0 1rem; 195 | padding: 1rem; 196 | } 197 | 198 | .card-title { 199 | font-weight: 600; 200 | font-size: 1.5rem; 201 | } 202 | 203 | .btn-custom { 204 | background-color: #00a000 !important; 205 | color: white !important; 206 | border: none; 207 | display: flex; 208 | align-items: center; 209 | justify-content: center; 210 | gap: 5px; 211 | } 212 | 213 | .btn-custom img.btn-icon { 214 | width: 20px; 215 | height: 20px; 216 | } 217 | 218 | .btn-custom:hover { 219 | background-color: #007a00 !important; 220 | } 221 | 222 | .custom-link { 223 | color: #00a000 !important; 224 | } 225 | 226 | .custom-link:hover { 227 | color: #007a00 !important; 228 | text-decoration: underline; 229 | } 230 | 231 | .form-icon { 232 | width: 30px; 233 | height: 30px; 234 | margin-right: 5px; 235 | vertical-align: middle; 236 | } 237 | 238 | 239 | @media (max-width: 768px) { 240 | .card { 241 | max-width: 90%; 242 | padding: 1rem; 243 | margin: 0 1rem; 244 | } 245 | } 246 | 247 | @media (max-width: 480px) { 248 | .form-label img { 249 | width: 20px; 250 | height: 20px; 251 | } 252 | 253 | .card-title { 254 | font-size: 1.2rem; 255 | } 256 | 257 | .btn-custom { 258 | font-size: 0.9rem; 259 | } 260 | } 261 | 262 | /* -----------------------------------------------------------< Login >----------------------------------------------------------------*/ 263 | 264 | /* -----------------------------------------------------------< Pagina principal >------------------------------------------------------*/ 265 | /* Estilização do Banner */ 266 | .home-section--banner { 267 | position: relative; 268 | margin-top: 50px; 269 | margin-bottom: 50px; 270 | } 271 | 272 | .home-section--banner-image { 273 | display: block; 274 | position: relative; 275 | } 276 | 277 | .home-section--banner-image img { 278 | width: 100%; 279 | height: auto; 280 | } 281 | 282 | .banner-content { 283 | position: absolute; 284 | bottom: 20px; 285 | right: 20px; 286 | z-index: 10; 287 | } 288 | 289 | .banner-info { 290 | display: flex; 291 | align-items: center; 292 | } 293 | 294 | @media (max-width: 768px) { 295 | .banner-content { 296 | bottom: 10px; 297 | right: 10px; 298 | } 299 | 300 | .banner-info { 301 | flex-direction: column; 302 | align-items: flex-end; 303 | } 304 | 305 | .product-info { 306 | flex-direction: column; 307 | align-items: flex-end; 308 | } 309 | 310 | .product-button--text { 311 | font-size: 0.750rem; 312 | } 313 | 314 | .wishlist-btn img { 315 | width: 20px; 316 | height: 20px; 317 | } 318 | } 319 | 320 | /* Estilização dos Produtos */ 321 | .product-info { 322 | display: flex; 323 | flex-direction: row; 324 | align-items: center; 325 | justify-content: space-between; 326 | gap: 5px; 327 | } 328 | 329 | .product-button--text { 330 | font-size: 0.890rem; 331 | font-weight: bold; 332 | white-space: nowrap; 333 | overflow: hidden; 334 | text-overflow: ellipsis; 335 | } 336 | 337 | .wishlist-btn { 338 | display: flex; 339 | align-items: center; 340 | } 341 | 342 | .wishlist-btn img { 343 | width: 2rem; 344 | height: 2rem; 345 | cursor: pointer; 346 | transition: transform 0.3s ease; 347 | } 348 | 349 | .wishlist-btn img:hover { 350 | transform: scale(1.1); 351 | } 352 | 353 | .product-discount__badge { 354 | background-color: #ff0000; 355 | color: #fff; 356 | padding: 0.2rem 0.4rem; 357 | border-radius: 3px; 358 | font-size: 0.875rem; 359 | font-weight: bold; 360 | } 361 | 362 | .product-button { 363 | background-color: #28a745; 364 | color: white; 365 | border: none; 366 | padding: 0.3rem 0.6rem; 367 | border-radius: 5px; 368 | cursor: pointer; 369 | font-weight: bold; 370 | transition: background-color 0.3s ease; 371 | } 372 | 373 | .product-button:hover { 374 | background-color: #0056b3; 375 | } 376 | 377 | /* Cards de Produtos */ 378 | .products-cards { 379 | display: flex; 380 | flex-wrap: wrap; 381 | gap: 10px; 382 | justify-content: center; 383 | padding: 10px; 384 | } 385 | 386 | .product-card-wrapper { 387 | flex: 1 0 18.5%; 388 | max-width: 18.75%; 389 | border-radius: 5px; 390 | overflow: hidden; 391 | background-color: #262626; 392 | } 393 | 394 | .product-card-wrapper a { 395 | text-decoration: none; 396 | color: inherit; 397 | } 398 | 399 | .single-line-name { 400 | white-space: nowrap; 401 | overflow: hidden; 402 | text-overflow: ellipsis; 403 | } 404 | 405 | .btn__primary { 406 | background-color: #28a745; 407 | color: #fff; 408 | border: none; 409 | padding: 5px 10px; 410 | cursor: pointer; 411 | text-decoration: none; 412 | border-radius: 5px; 413 | font-size: 1rem; 414 | } 415 | 416 | .btn__primary:hover { 417 | background-color: #0056b3; 418 | transform: scale(1.05); 419 | } 420 | 421 | .product-img img { 422 | width: 100%; 423 | height: auto; 424 | } 425 | 426 | .product-card--content { 427 | padding: 10px; 428 | display: flex; 429 | flex-direction: column; 430 | } 431 | 432 | .product-title { 433 | white-space: nowrap; 434 | overflow: hidden; 435 | text-overflow: ellipsis; 436 | font-size: 1rem; 437 | font-weight: bold; 438 | color: #fffdfd; 439 | } 440 | 441 | .product-discount { 442 | display: flex; 443 | align-items: center; 444 | justify-content: space-between; 445 | font-size: 0.875rem; 446 | } 447 | 448 | .product-discount__price { 449 | color: #ffffff; 450 | font-size: 1rem; 451 | font-weight: bold; 452 | } 453 | 454 | /* Contêineres e Grade */ 455 | .grid-container { 456 | max-width: 1100px; 457 | margin-left: auto; 458 | margin-right: auto; 459 | } 460 | 461 | .grid { 462 | position: relative; 463 | } 464 | 465 | .container { 466 | max-width: 1200px; 467 | margin: 0px 235.5px; 468 | } 469 | 470 | /* Cabeçalho da Dock de Produtos */ 471 | .products-dock-header { 472 | background-color: #21224e; 473 | display: flex; 474 | flex-direction: column; 475 | align-items: flex-start; 476 | margin-bottom: 20px; 477 | width: 100%; 478 | } 479 | 480 | .products-dock-header > div { 481 | width: 100%; 482 | display: flex; 483 | justify-content: space-between; 484 | align-items: center; 485 | } 486 | 487 | .products-dock-title { 488 | font-size: 1.5rem; 489 | font-weight: bold; 490 | color: #ffffff; 491 | } 492 | 493 | .products-dock-subtitle { 494 | font-size: 1.1rem; 495 | color: #ffffff; 496 | margin-top: 10px; 497 | } 498 | 499 | .products-dock-main { 500 | display: flex; 501 | flex-wrap: wrap; 502 | gap: 20px; 503 | } 504 | 505 | @media (max-width: 768px) { 506 | .products-dock-header div { 507 | display: flex; 508 | flex-direction: row; 509 | align-items: center; 510 | } 511 | 512 | .btn__primary.btn__small { 513 | width: auto; 514 | text-align: center; 515 | } 516 | 517 | .products-dock-subtitle { 518 | font-size: 1rem; 519 | margin-top: 5px; 520 | } 521 | } 522 | 523 | /* Ajustes de responsividade para os cards de produto */ 524 | @media (max-width: 768px) { 525 | .products-cards { 526 | flex-direction: row; 527 | flex-wrap: nowrap; 528 | overflow-x: auto; 529 | padding: 10px; 530 | margin: 0; 531 | } 532 | 533 | .grid-container { 534 | margin: 0; 535 | padding: 0 10px; 536 | width: 100%; 537 | } 538 | 539 | .product-card-wrapper { 540 | flex: 0 1 auto; 541 | max-width: 100%; 542 | margin: 0; 543 | } 544 | 545 | .product-title { 546 | font-size: 0.9rem; 547 | } 548 | 549 | .product-info { 550 | flex-direction: row; 551 | align-items: center; 552 | justify-content: space-between; 553 | gap: 10px; 554 | } 555 | 556 | .product-button { 557 | width: auto; 558 | text-align: center; 559 | } 560 | 561 | .product-discount { 562 | display: flex; 563 | align-items: center; 564 | gap: 10px; 565 | } 566 | 567 | .wishlist-btn { 568 | display: flex; 569 | align-items: center; 570 | } 571 | 572 | .wishlist-btn img { 573 | width: 1.5rem; 574 | height: 1.5rem; 575 | } 576 | 577 | .product-button--text { 578 | font-size: 0.7rem; 579 | white-space: nowrap; 580 | overflow: hidden; 581 | text-overflow: ellipsis; 582 | } 583 | 584 | .product-button { 585 | padding: 0.2rem 0.4rem; 586 | } 587 | 588 | .product-img { 589 | margin-top: 0; 590 | } 591 | 592 | .product-img img { 593 | width: 100%; 594 | height: auto; 595 | } 596 | 597 | .product-discount__price { 598 | font-size: 0.8rem; 599 | } 600 | 601 | .product-discount__badge { 602 | font-size: 0.7rem; 603 | } 604 | 605 | .single-line-name { 606 | font-size: 0.9rem; 607 | white-space: nowrap; 608 | overflow: hidden; 609 | text-overflow: ellipsis; 610 | } 611 | 612 | .btn__primary { 613 | font-size: 0.8rem; 614 | } 615 | 616 | .products-dock-title { 617 | font-size: 1.2rem; 618 | } 619 | 620 | .products-dock-subtitle { 621 | font-size: 0.9rem; 622 | } 623 | } 624 | /* -----------------------------------------------------------< Pagina principal >------------------------------------------------------*/ 625 | 626 | /* -----------------------------------------------------------< Footer >------------------------------------------------------------- */ 627 | 628 | .Farticle-FooterSubMenu { 629 | width: 100%; 630 | background-color: #212121; 631 | color: #ffffff; 632 | display: flex; 633 | justify-content: center; 634 | padding: 20px 0; 635 | flex-wrap: wrap; 636 | } 637 | 638 | .Farticle-FooterSubMenu .grid-container { 639 | max-width: 1200px; 640 | width: 100%; 641 | } 642 | 643 | .Farticle-FooterSubMenu .row { 644 | width: 100%; 645 | display: flex; 646 | flex-wrap: wrap; 647 | justify-content: space-between; 648 | } 649 | 650 | .Farticle-FooterSubMenu ul { 651 | list-style: none; 652 | padding: 0; 653 | margin: 0; 654 | } 655 | 656 | .Farticle-FooterSubMenu ul li { 657 | display: flex; 658 | align-items: center; 659 | list-style-type: none; 660 | color: #ffffff; 661 | text-decoration: none; 662 | white-space: nowrap; 663 | margin-bottom: 5px; 664 | } 665 | 666 | .Farticle-FooterSubMenu ul li a { 667 | color: #ffffff; 668 | text-decoration: none; 669 | white-space: nowrap; 670 | } 671 | 672 | .Farticle-FooterSubMenu ul li a:hover { 673 | text-decoration: underline; 674 | } 675 | 676 | .footer h4 { 677 | color: #00a000; 678 | text-align: left; 679 | margin-bottom: 10px; 680 | } 681 | 682 | .Farticle-FooterSocial { 683 | background-color: #262626; 684 | padding: 20px; 685 | } 686 | 687 | footer { 688 | background-color: #000000; 689 | color: #ffffff; 690 | padding: 20px 0; 691 | } 692 | 693 | footer ul { 694 | padding: 0; 695 | margin: 0; 696 | text-align: center; 697 | } 698 | 699 | footer ul li { 700 | list-style-type: none; 701 | margin-bottom: 10px; 702 | } 703 | 704 | footer ul li img { 705 | max-width: 100px; 706 | height: auto; 707 | } 708 | 709 | footer .Cinza { 710 | color: #cccccc; 711 | } 712 | 713 | footer .container { 714 | display: flex; 715 | flex-direction: column; 716 | justify-content: center; 717 | align-items: center; 718 | } 719 | 720 | @media (max-width: 768px) { 721 | .Farticle-FooterSubMenu .row { 722 | justify-content: center; 723 | align-items: center; 724 | } 725 | 726 | .Farticle-FooterSubMenu .col-xs-12 { 727 | width: 100%; 728 | padding: 10px 0; 729 | display: flex; 730 | flex-direction: column; 731 | align-items: center; 732 | } 733 | 734 | .Farticle-FooterSubMenu .col-xs-12 h4, 735 | .Farticle-FooterSubMenu .col-xs-12 ul { 736 | text-align: center; 737 | } 738 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | 19 | 20 | NG Store Home 21 | 22 | 23 | 24 |
25 | 26 |
27 | 28 | 33 | 34 | 35 | 41 | 42 | 43 |
44 | 49 | 50 |
51 | 52 | Ícone Favoritos 53 | 54 |
55 | 56 |
57 | 58 | Ícone Carrinho 59 | 60 |
61 |
62 |
63 | 64 | 65 |
66 | 67 | 99 |
100 |
101 | 102 |
103 | 104 |
105 | 106 | 257 | 258 | 259 | 410 | 411 | 412 | 436 | 437 | 438 | 589 | 590 | 591 | 742 | 743 | 744 | 768 | 769 | 770 | 921 | 922 | 923 | 1074 | 1075 | 1076 | 1100 | 1101 | 1102 | 1253 | 1254 | 1255 | 1406 |
1407 |
1408 | 1409 | 1537 | 1538 | 1565 | 1566 | --------------------------------------------------------------------------------