├── .gitattributes ├── Crud ├── index.html ├── script.js └── style.css ├── LICENSE ├── PetFood ├── favicon.ico ├── images │ ├── c1.webp │ ├── c2.webp │ ├── c3.webp │ ├── c4.webp │ ├── contact-bg.webp │ ├── deal-bg.webp │ ├── home-bg.webp │ ├── offer-img1.webp │ ├── offer-img2.webp │ ├── p1.webp │ ├── p2.webp │ ├── p3.webp │ ├── p4.webp │ ├── p5.webp │ └── p6.webp ├── index.html ├── script.js └── style.css ├── README.md ├── _config.yml ├── color ├── app.js ├── index.html └── styles.css ├── papelaria ├── css │ └── style.css ├── img │ ├── banner.png │ ├── caneta1.png │ ├── caneta2.png │ ├── caneta3.png │ ├── contact-img.svg │ ├── estojo1.png │ ├── estojo2.png │ ├── estojo3.png │ ├── icon-1.png │ ├── icon-2.png │ ├── icon-3.png │ ├── icon-4.png │ ├── material1.png │ ├── material2.png │ ├── material3.png │ ├── payment.png │ ├── pic-1.png │ ├── pic-2.png │ ├── pic-3.png │ ├── post-it1.png │ ├── post-it2.png │ └── post-it3.png ├── index.html └── js │ └── script.js ├── pistachio ├── README.md ├── bg.png ├── img1.png ├── img2.png ├── img3.png ├── img4.png ├── img5.png ├── img6.png ├── index.html ├── logo.png └── style.css └── venda-cursos ├── .vscode └── settings.json ├── css └── styles.css ├── img ├── ai.png ├── front.png ├── logo.png ├── seguranca.png └── somos.png ├── index.html ├── layout.png └── textos.html /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /Crud/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CRUD JS 9 | 10 | 11 | 12 | 13 | 14 |

15 | 19 | 20 |

21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |

Nome	E-mail	Salário	Editar	Excluir

34 |

35 | 36 | 51 | 52 |

53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /Crud/script.js: -------------------------------------------------------------------------------- 1 | const modal = document.querySelector('.modal-container') 2 | const tbody = document.querySelector('tbody') 3 | const sNome = document.querySelector('#m-nome') 4 | const sFuncao = document.querySelector('#m-funcao') 5 | const sSalario = document.querySelector('#m-salario') 6 | const btnSalvar = document.querySelector('#btnSalvar') 7 | 8 | let itens 9 | let id 10 | 11 | function openModal(edit = false, index = 0) { 12 | modal.classList.add('active') 13 | 14 | modal.onclick = e => { 15 | if (e.target.className.indexOf('modal-container') !== -1) { 16 | modal.classList.remove('active') 17 | } 18 | } 19 | 20 | if (edit) { 21 | sNome.value = itens[index].nome 22 | sFuncao.value = itens[index].funcao 23 | sSalario.value = itens[index].salario 24 | id = index 25 | } else { 26 | sNome.value = '' 27 | sFuncao.value = '' 28 | sSalario.value = '' 29 | } 30 | 31 | } 32 | 33 | function editItem(index) { 34 | 35 | openModal(true, index) 36 | } 37 | 38 | function deleteItem(index) { 39 | itens.splice(index, 1) 40 | setItensBD() 41 | loadItens() 42 | } 43 | 44 | function insertItem(item, index) { 45 | let tr = document.createElement('tr') 46 | 47 | tr.innerHTML = ` 48 | ${item.nome} 49 | ${item.funcao} 50 | R$ ${item.salario} 51 | 52 | 53 | 54 | 55 | 56 | 57 | ` 58 | tbody.appendChild(tr) 59 | } 60 | 61 | btnSalvar.onclick = e => { 62 | 63 | if (sNome.value == '' || sFuncao.value == '' || sSalario.value == '') { 64 | return 65 | } 66 | 67 | e.preventDefault(); 68 | 69 | if (id !== undefined) { 70 | itens[id].nome = sNome.value 71 | itens[id].funcao = sFuncao.value 72 | itens[id].salario = sSalario.value 73 | } else { 74 | itens.push({'nome': sNome.value, 'funcao': sFuncao.value, 'salario': sSalario.value}) 75 | } 76 | 77 | setItensBD() 78 | 79 | modal.classList.remove('active') 80 | loadItens() 81 | id = undefined 82 | } 83 | 84 | function loadItens() { 85 | itens = getItensBD() 86 | tbody.innerHTML = '' 87 | itens.forEach((item, index) => { 88 | insertItem(item, index) 89 | }) 90 | 91 | } 92 | 93 | const getItensBD = () => JSON.parse(localStorage.getItem('dbfunc')) ?? [] 94 | const setItensBD = () => localStorage.setItem('dbfunc', JSON.stringify(itens)) 95 | 96 | loadItens() 97 | -------------------------------------------------------------------------------- /Crud/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;700&family=Roboto:wght@100;300;400;500;700;900&family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Poppins', sans-serif; 8 | } 9 | 10 | body { 11 | width: 100vw; 12 | height: 100vh; 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | background-color: #FDEEDC; 17 | } 18 | 19 | button { 20 | cursor: pointer; 21 | } 22 | 23 | .container { 24 | width: 90%; 25 | height: 80%; 26 | border-radius: 10px; 27 | background: white; 28 | } 29 | 30 | .header { 31 | min-height: 70px; 32 | display: flex; 33 | align-items: center; 34 | justify-content: space-between; 35 | margin: auto 12px; 36 | } 37 | 38 | .header span { 39 | font-weight: 900; 40 | font-size: 20px; 41 | word-break: break-all; 42 | color: #FF9494; 43 | } 44 | 45 | #new { 46 | font-size: 16px; 47 | padding: 8px; 48 | border-radius: 5px; 49 | border: none; 50 | color: white; 51 | background-color: #FF9494; 52 | } 53 | 54 | .divTable { 55 | padding: 10px; 56 | width: auto; 57 | height:inherit; 58 | overflow:auto; 59 | } 60 | 61 | .divTable::-webkit-scrollbar { 62 | width: 12px; 63 | background-color: whitesmoke; 64 | } 65 | 66 | .divTable::-webkit-scrollbar-thumb { 67 | border-radius: 10px; 68 | background-color: darkgray; 69 | } 70 | 71 | table { 72 | width: 100%; 73 | border-spacing: 10px; 74 | word-break: break-all; 75 | border-collapse: collapse; 76 | } 77 | 78 | thead { 79 | background-color: whitesmoke; 80 | } 81 | 82 | tr { 83 | border-bottom: 1px solid rgb(238, 235, 235)!important; 84 | } 85 | 86 | tbody tr td { 87 | vertical-align: text-top; 88 | padding: 6px; 89 | max-width: 50px; 90 | } 91 | 92 | thead tr th { 93 | padding: 5px; 94 | text-align: start; 95 | margin-bottom: 50px; 96 | } 97 | 98 | tbody tr { 99 | margin-bottom: 50px; 100 | } 101 | 102 | thead tr th.acao { 103 | width: 100px!important; 104 | text-align: center; 105 | } 106 | 107 | tbody tr td.acao { 108 | text-align: center; 109 | } 110 | 111 | @media (max-width: 700px) { 112 | body { 113 | font-size: 10px; 114 | } 115 | 116 | .header span { 117 | font-size: 15px; 118 | } 119 | 120 | #new { 121 | padding: 5px; 122 | font-size: 10px; 123 | } 124 | 125 | thead tr th.acao { 126 | width: auto!important; 127 | } 128 | 129 | td button i { 130 | font-size: 20px!important; 131 | } 132 | 133 | td button i:first-child { 134 | margin-right: 0; 135 | } 136 | 137 | .modal { 138 | width: 90%!important; 139 | } 140 | 141 | .modal label { 142 | font-size: 12px!important; 143 | } 144 | } 145 | 146 | .modal-container { 147 | width: 100vw; 148 | height: 100vh; 149 | position: fixed; 150 | top: 0; 151 | left: 0; 152 | background-color: rgba(0, 0, 0, 0.5); 153 | display: none; 154 | z-index: 999; 155 | align-items: center; 156 | justify-content: center; 157 | } 158 | 159 | .modal { 160 | display: flex; 161 | flex-direction: column; 162 | align-items: center; 163 | padding: 40px; 164 | background-color: white; 165 | border-radius: 10px; 166 | width: 50%; 167 | } 168 | 169 | .modal label { 170 | font-size: 14px; 171 | width: 100%; 172 | } 173 | 174 | .modal input { 175 | width: 100%; 176 | outline: none; 177 | padding: 5px 10px; 178 | width: 100%; 179 | margin-bottom: 20px; 180 | border-top: none; 181 | border-left: none; 182 | border-right: none; 183 | } 184 | 185 | .modal button { 186 | width: 100%; 187 | margin: 10px auto; 188 | outline: none; 189 | border-radius: 20px; 190 | padding: 5px 10px; 191 | width: 100%; 192 | border: none; 193 | background-color: #FF9494; 194 | color: white; 195 | } 196 | 197 | .active { 198 | display: flex; 199 | } 200 | 201 | .active .modal { 202 | animation: modal .4s; 203 | } 204 | 205 | @keyframes modal { 206 | from { 207 | opacity: 0; 208 | transform: translate3d(0, -60px, 0); 209 | } 210 | to { 211 | opacity: 1; 212 | transform: translate3d(0, 0, 0); 213 | } 214 | } 215 | 216 | td button { 217 | border: none; 218 | outline: none; 219 | background: transparent; 220 | } 221 | 222 | td button i { 223 | font-size: 25px; 224 | } 225 | 226 | td button i:first-child { 227 | margin-right: 10px; 228 | } 229 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Adriana Beatriz 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 | -------------------------------------------------------------------------------- /PetFood/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/PetFood/favicon.ico -------------------------------------------------------------------------------- /PetFood/images/c1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/PetFood/images/c1.webp -------------------------------------------------------------------------------- /PetFood/images/c2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/PetFood/images/c2.webp -------------------------------------------------------------------------------- /PetFood/images/c3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/PetFood/images/c3.webp -------------------------------------------------------------------------------- /PetFood/images/c4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/PetFood/images/c4.webp -------------------------------------------------------------------------------- /PetFood/images/contact-bg.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/PetFood/images/contact-bg.webp -------------------------------------------------------------------------------- /PetFood/images/deal-bg.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/PetFood/images/deal-bg.webp -------------------------------------------------------------------------------- /PetFood/images/home-bg.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/PetFood/images/home-bg.webp -------------------------------------------------------------------------------- /PetFood/images/offer-img1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/PetFood/images/offer-img1.webp -------------------------------------------------------------------------------- /PetFood/images/offer-img2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/PetFood/images/offer-img2.webp -------------------------------------------------------------------------------- /PetFood/images/p1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/PetFood/images/p1.webp -------------------------------------------------------------------------------- /PetFood/images/p2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/PetFood/images/p2.webp -------------------------------------------------------------------------------- /PetFood/images/p3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/PetFood/images/p3.webp -------------------------------------------------------------------------------- /PetFood/images/p4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/PetFood/images/p4.webp -------------------------------------------------------------------------------- /PetFood/images/p5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/PetFood/images/p5.webp -------------------------------------------------------------------------------- /PetFood/images/p6.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/PetFood/images/p6.webp -------------------------------------------------------------------------------- /PetFood/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pet Food 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 | 15 | 16 | 17 | pedie 18 | 19 | 27 | 28 |

29 | 30 | 31 | 32 |

33 | 34 | 38 | 39 |

40 | 41 |

42 | 43 |

44 | Até 50% De Desconto 45 |

Nós Cuidamos
do seu animal de estimação!

46 | Iniciar 47 |

48 | 49 |

50 | 51 |

52 | 53 |

Compre Por Categoria

54 | 55 |

56 | 57 |

58 |

59 |

Comida Para Cães

60 | Compre Agora 61 |

62 | 63 |

64 |

65 |

Comida Para Gatos

66 | Compre Agora 67 |

68 | 69 |

70 |

71 |

Comida Para Coelhos

72 | Compre Agora 73 |

74 | 75 |

76 |

77 |

Comida Para Pássaros

78 | Compre Agora 79 |

80 | 81 |

82 | 83 |

84 | 85 | 86 |

87 | 88 |

Nossos Produtos Em Destaque

89 | 90 |

91 | 92 |

93 |

R$14.05

94 |

95 |

96 |

97 | 98 | 99 | 100 | 101 | 102 |

103 |

Comida Saborosa Para Animais De Estimação.

104 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia, facilis?

105 | Adicionar Ao Carrinho 106 |

107 |

108 | 109 |

110 |

R$15.40

111 |

112 |

113 |

114 | 115 | 116 | 117 | 118 | 119 |

120 |

Comida Saborosa Para Animais De Estimação.

121 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia, facilis?

122 | Adicionar Ao Carrinho 123 |

124 |

125 | 126 |

127 | 128 |

129 | 130 |

131 | 132 | Até 70% De Desconto 133 |

Comida saborosa e saudável para o seu animal de estimação!

134 | Veja aqui 135 | 136 |

137 | 138 |

139 | 140 |

Nossos Produtos Mais Recentes

141 | 142 |

143 | 144 |

145 |

146 |

147 |

148 | 149 | 150 | 151 | 152 | 153 |

154 |

Alimentos Saudáveis Para Animais De Estimação.

155 |

R$10.03 12.50

156 | Adicionar Ao Carrinho 157 |

158 |

159 | 160 |

161 |

162 |

163 |

164 | 165 | 166 | 167 | 168 | 169 |

170 |

Alimentos Saudáveis Para Animais De Estimação.

171 |

R$10.03 12.50

172 | Adicionar Ao Carrinho 173 |

174 |

175 | 176 |

177 |

178 |

179 |

180 | 181 | 182 | 183 | 184 | 185 |

186 |

Alimentos Saudáveis Para Animais De Estimação.

187 |

R$10.03 12.50

188 | Adicionar Ao Carrinho 189 |

190 |

191 | 192 |

193 |

194 |

195 |

196 | 197 | 198 | 199 | 200 | 201 |

202 |

Alimentos Saudáveis Para Animais De Estimação.

203 |

R$10.03 12.50

204 | Adicionar Ao Carrinho 205 |

206 |

207 | 208 |

209 |

210 |

211 |

212 | 213 | 214 | 215 | 216 | 217 |

218 |

Alimentos Saudáveis Para Animais De Estimação.

219 |

R$10.03 12.50

220 | Adicionar Ao Carrinho 221 |

222 |

223 | 224 |

225 |

226 |

227 |

228 | 229 | 230 | 231 | 232 | 233 |

234 |

Alimentos Saudáveis Para Animais De Estimação

235 |

R$10.03 12.50

236 | Adicionar Ao Carrinho 237 |

238 |

239 | 240 |

241 | 242 |

243 | 244 |

245 | 246 |

Nossa Última Oferta

247 | 248 |

249 | 250 |

251 |

252 |

253 | Melhor Oferta 254 |

Até 40% De Desconto

255 | Ver Oferta 256 |

257 |

258 | 259 |

260 |

261 |

262 | Só Por Hoje! 263 |

Até 80% De Desconto

264 | Ver Oferta 265 |

266 |

267 | 268 |

269 | 270 |

271 | 272 |

273 | 274 |

Contato

275 | 276 | 293 | 294 |

295 | 296 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | -------------------------------------------------------------------------------- /PetFood/script.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | 3 | $('#search-icon').click(function(){ 4 | $(this).toggleClass('fa-times'); 5 | $('#search-box').toggleClass('active'); 6 | }); 7 | 8 | $('#menu').click(function(){ 9 | $(this).toggleClass('fa-times'); 10 | $('.navbar').toggleClass('nav-toggle'); 11 | }); 12 | 13 | $(window).on('scroll load',function(){ 14 | 15 | $('#search-icon').removeClass('fa-times'); 16 | $('#search-box').removeClass('active'); 17 | 18 | $('#menu').removeClass('fa-times'); 19 | $('.navbar').removeClass('nav-toggle'); 20 | 21 | if($(window).scrollTop() > 0){ 22 | $('header').addClass('sticky'); 23 | }else{ 24 | $('header').removeClass('sticky'); 25 | } 26 | 27 | }); 28 | 29 | $('a[href*="#"]').on('click',function(e){ 30 | 31 | e.preventDefault(); 32 | 33 | $('html, body').animate({ 34 | 35 | scrollTop : $($(this).attr('href')).offset().top, 36 | 37 | }, 38 | 500, 39 | 'linear' 40 | ); 41 | 42 | }); 43 | 44 | }); -------------------------------------------------------------------------------- /PetFood/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300&display=swap'); 2 | 3 | :root{ 4 | --yellow:#FCDD26; 5 | } 6 | 7 | *{ 8 | font-family: 'Poppins', sans-serif; 9 | margin:0; padding:0; 10 | box-sizing: border-box; 11 | outline: none; border:none; 12 | text-decoration: none; 13 | text-transform: capitalize; 14 | transition: .3s cubic-bezier(.38,1.15,.7,1.12); 15 | } 16 | 17 | *::selection{ 18 | background:#333; 19 | color:var(--yellow); 20 | } 21 | 22 | html{ 23 | font-size: 62.5%; 24 | overflow-x: hidden; 25 | } 26 | 27 | html::-webkit-scrollbar{ 28 | width:1.3rem; 29 | } 30 | 31 | html::-webkit-scrollbar-track{ 32 | background:#333; 33 | } 34 | 35 | html::-webkit-scrollbar-thumb{ 36 | background:var(--yellow); 37 | } 38 | 39 | section{ 40 | padding:1rem 5%; 41 | } 42 | 43 | .btn{ 44 | display: inline-block; 45 | margin-top: 1rem; 46 | padding:.7rem 2.5rem; 47 | font-size: 1.5rem; 48 | border-radius: .5rem; 49 | color:#333; 50 | background:var(--yellow); 51 | position: relative; 52 | box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); 53 | overflow: hidden; 54 | z-index: 0; 55 | } 56 | 57 | .btn::before{ 58 | content: ''; 59 | position: absolute; 60 | top:0; left:0; 61 | height: 100%; 62 | width:100%; 63 | clip-path: polygon(0 0, 100% 0, 10% 25%, 0 100%); 64 | z-index: -1; 65 | background:#444; 66 | transition: .3s cubic-bezier(.38,1.15,.7,1.12); 67 | } 68 | 69 | .btn:hover:before{ 70 | clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 71 | } 72 | 73 | .btn:hover{ 74 | color:var(--yellow); 75 | } 76 | 77 | .heading{ 78 | text-align: center; 79 | padding:1rem; 80 | color:#333; 81 | text-shadow: 0 .3rem .5rem rgba(0,0,0,.1); 82 | font-size: 3rem; 83 | padding-top: 8rem; 84 | } 85 | 86 | .heading i{ 87 | padding:0 .5rem; 88 | color:var(--yellow); 89 | } 90 | 91 | header{ 92 | width:100%; 93 | background:#fff; 94 | display: flex; 95 | align-items: center; 96 | justify-content: space-between; 97 | padding:2rem; 98 | position: relative; 99 | } 100 | 101 | #search-box{ 102 | position: absolute; 103 | top:100%; left:0; 104 | width: 100%; 105 | display: flex; 106 | align-items: center; 107 | background:var(--yellow); 108 | padding:2rem; 109 | box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); 110 | transform-origin: top; 111 | transform:scaleY(0); 112 | opacity: 0; 113 | } 114 | 115 | #search-box.active{ 116 | transform:scaleY(1); 117 | opacity: 1; 118 | } 119 | 120 | #search-box #search{ 121 | width:100%; 122 | padding:1rem; 123 | text-transform: none; 124 | font-size: 2rem; 125 | } 126 | 127 | #search-box #search::placeholder{ 128 | text-transform: capitalize; 129 | } 130 | 131 | #search-box label{ 132 | font-size: 3rem; 133 | color:#333; 134 | padding-left: 2rem; 135 | cursor: pointer; 136 | } 137 | 138 | header .logo{ 139 | font-size: 2.5rem; 140 | color:#333; 141 | } 142 | 143 | header .logo i{ 144 | transform:rotate(-65deg); 145 | color:var(--yellow); 146 | } 147 | 148 | header .navbar a{ 149 | color:#333; 150 | font-size: 1.7rem; 151 | padding:0 1rem; 152 | } 153 | 154 | header .navbar a:hover{ 155 | color:var(--yellow); 156 | } 157 | 158 | header .icons i, header .icons a{ 159 | font-size: 2.5rem; 160 | color:#333; 161 | padding-left: 1.5rem; 162 | cursor: pointer; 163 | } 164 | 165 | header .icons i:hover, header .icons a:hover{ 166 | color:var(--yellow); 167 | } 168 | 169 | .fa-times{ 170 | transform:rotate(-360deg); 171 | } 172 | 173 | #menu{ 174 | font-size: 3rem; 175 | color:#333; 176 | cursor: pointer; 177 | display: none; 178 | } 179 | 180 | header.sticky{ 181 | position: fixed; 182 | top:0; left:0; 183 | box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); 184 | z-index: 1000; 185 | } 186 | 187 | .home{ 188 | min-height: 75vh; 189 | background:url(../images/home-bg.webp) no-repeat; 190 | background-size: cover; 191 | background-position: center; 192 | display: flex; 193 | align-items: center; 194 | } 195 | 196 | .home .content span{ 197 | color:#333; 198 | font-size: 2rem; 199 | } 200 | 201 | .home .content h3{ 202 | color:#333; 203 | font-size: 4rem; 204 | } 205 | 206 | .home .content .btn{ 207 | background:#fff; 208 | } 209 | 210 | .category .box-container{ 211 | display: flex; 212 | align-items: center; 213 | justify-content: center; 214 | flex-wrap: wrap; 215 | padding:1rem 0; 216 | } 217 | 218 | .category .box-container .box{ 219 | width:25rem; 220 | margin:2rem; 221 | text-align: center; 222 | } 223 | 224 | .category .box-container .box img{ 225 | width: 100%; 226 | } 227 | 228 | .category .box-container .box h3{ 229 | color:#333; 230 | font-size: 2rem; 231 | padding:1rem 0; 232 | } 233 | 234 | .featured .box-container{ 235 | display: flex; 236 | align-items: center; 237 | justify-content: center; 238 | flex-wrap: wrap; 239 | padding:1rem 0; 240 | } 241 | 242 | .featured .box-container .box{ 243 | display: flex; 244 | align-items: center; 245 | justify-content: center; 246 | padding:1rem; 247 | margin:2rem; 248 | flex:1 1 40rem; 249 | position: relative; 250 | border-radius: .5rem; 251 | border:.1rem solid rgba(0,0,0,.1); 252 | box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); 253 | } 254 | 255 | .featured .box-container .box img{ 256 | width: 20rem; 257 | } 258 | 259 | .featured .box-container .box .price{ 260 | position: absolute; 261 | top:1rem; right:1rem; 262 | height:6rem; 263 | width:6rem; 264 | text-align: center; 265 | line-height: 6rem; 266 | border-radius: 50%; 267 | background:var(--yellow); 268 | color:#333; 269 | font-size: 1.5rem; 270 | } 271 | 272 | .featured .box-container .box .content{ 273 | padding:1rem; 274 | } 275 | 276 | .featured .box-container .box .content .stars i{ 277 | color:var(--yellow); 278 | font-size: 1.5rem; 279 | } 280 | 281 | .featured .box-container .box .content h3{ 282 | font-size: 2rem; 283 | color:#333; 284 | padding-top: .5rem; 285 | } 286 | 287 | .featured .box-container .box .content p{ 288 | font-size: 1.5rem; 289 | color:#666; 290 | padding: 1rem 0; 291 | } 292 | 293 | .deal{ 294 | min-height: 75vh; 295 | background:url(../images/deal-bg.webp) no-repeat; 296 | background-size: cover; 297 | background-position: center; 298 | display: flex; 299 | align-items: center; 300 | justify-content: center; 301 | flex-flow: column; 302 | } 303 | 304 | .deal span{ 305 | color:#eee; 306 | font-size: 2rem; 307 | } 308 | 309 | .deal h3{ 310 | color:#fff; 311 | font-size: 3rem; 312 | padding:1rem 0; 313 | width:45rem; 314 | text-align: center; 315 | } 316 | 317 | .products .box-container{ 318 | display: flex; 319 | align-items: center; 320 | justify-content: center; 321 | flex-wrap: wrap; 322 | } 323 | 324 | .products .box-container .box{ 325 | box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); 326 | border:.1rem solid rgba(0,0,0,.1); 327 | border-radius: .5rem; 328 | padding:1rem; 329 | margin:1.5rem; 330 | flex:1 1 30rem; 331 | display: flex; 332 | align-items: center; 333 | justify-content: center; 334 | } 335 | 336 | .products .box-container .box img{ 337 | width:15rem; 338 | } 339 | 340 | .products .box-container .box .content{ 341 | padding:1rem; 342 | } 343 | 344 | .products .box-container .box .content .stars i{ 345 | font-size: 1.5rem; 346 | color:var(--yellow); 347 | } 348 | 349 | .products .box-container .box .content h3{ 350 | font-size: 2rem; 351 | color:#333; 352 | padding:.5rem 0; 353 | } 354 | 355 | .products .box-container .box .content .price{ 356 | font-size: 2rem; 357 | color:#666; 358 | } 359 | 360 | .products .box-container .box .content .price span{ 361 | font-size: 1.5rem; 362 | text-decoration: line-through; 363 | } 364 | 365 | .offer .box-container{ 366 | display: flex; 367 | align-items: center; 368 | justify-content: center; 369 | flex-wrap: wrap; 370 | } 371 | 372 | .offer .box-container .box{ 373 | flex:1 1 40rem; 374 | margin:2rem; 375 | position: relative; 376 | } 377 | 378 | .offer .box-container .box img{ 379 | width:100%; 380 | } 381 | 382 | .offer .box-container .box .content{ 383 | position: absolute; 384 | top:50%; left:10%; 385 | transform:translateY(-50%); 386 | color:#333; 387 | } 388 | 389 | .offer .box-container .box .content span{ 390 | font-size: 2rem; 391 | } 392 | 393 | .offer .box-container .box .content h3{ 394 | font-size: 3.5rem; 395 | } 396 | 397 | .offer .box-container .box:first-child .content .btn{ 398 | background:#fff; 399 | } 400 | 401 | .offer .box-container .box:last-child .content{ 402 | color:#fff; 403 | } 404 | 405 | .contact{ 406 | background:url(../images/contact-bg.webp) no-repeat; 407 | background-size: cover; 408 | background-position: center; 409 | padding-bottom: 7rem; 410 | } 411 | 412 | .contact .heading i{ 413 | color:#fff; 414 | } 415 | 416 | .contact form{ 417 | padding:2rem 10%; 418 | text-align: center; 419 | } 420 | 421 | .contact form .inputBox{ 422 | display: flex; 423 | flex-wrap: wrap; 424 | justify-content: space-between; 425 | } 426 | 427 | .contact form .inputBox input, .contact form textarea{ 428 | padding:1rem 2rem; 429 | margin:1rem 0; 430 | width:49%; 431 | font-size: 1.7rem; 432 | border-radius: .5rem; 433 | text-transform: none; 434 | } 435 | 436 | .contact form .inputBox input::placeholder, .contact form textarea::placeholder{ 437 | text-transform: capitalize; 438 | } 439 | 440 | .contact form textarea{ 441 | height: 15rem; 442 | resize: none; 443 | width:100%; 444 | } 445 | 446 | .contact form .btn{ 447 | cursor: pointer; 448 | background:#fff; 449 | } 450 | 451 | .contact form .btn:hover{ 452 | background:#333; 453 | } 454 | 455 | .footer .share{ 456 | display: flex; 457 | align-items: center; 458 | justify-content: center; 459 | flex-wrap: wrap; 460 | padding:1rem 0; 461 | } 462 | 463 | .footer .share a{ 464 | height:5rem; 465 | width: 5rem; 466 | line-height: 5rem; 467 | border-radius: 50%; 468 | margin:1rem; 469 | font-size: 2rem; 470 | text-align: center; 471 | padding:0; 472 | } 473 | 474 | .footer .credit{ 475 | padding: 2rem 1rem; 476 | font-size: 2rem; 477 | border-top: .1rem solid rgba(0,0,0,.1); 478 | text-align: center; 479 | color:#333; 480 | } 481 | 482 | .footer .credit span{ 483 | color:var(--yellow); 484 | } 485 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | /* media queries */ 501 | 502 | @media (max-width:991px){ 503 | 504 | html{ 505 | font-size: 55%; 506 | } 507 | 508 | #menu{ 509 | display: block; 510 | } 511 | 512 | header .navbar{ 513 | position: absolute; 514 | top:100%; left:0; 515 | width:100%; 516 | background:#fff; 517 | text-align: center; 518 | padding:2rem; 519 | z-index: 1000; 520 | border-top: .1rem solid rgba(0,0,0,.1); 521 | transform-origin: top; 522 | transform:scaleY(0); 523 | opacity: 0; 524 | } 525 | 526 | header .navbar a{ 527 | font-size: 2rem; 528 | padding:1.5rem; 529 | display: block; 530 | } 531 | 532 | header .navbar.nav-toggle{ 533 | transform:scaleY(1); 534 | opacity: 1; 535 | } 536 | 537 | section{ 538 | padding:1rem 3%; 539 | } 540 | 541 | .home{ 542 | background-position: left; 543 | } 544 | 545 | .home .content h3{ 546 | font-size: 4.3rem; 547 | } 548 | 549 | .featured .box-container .box{ 550 | flex-flow: column; 551 | } 552 | 553 | .featured .box-container .box img{ 554 | width:100%; 555 | } 556 | 557 | .products .box-container .box{ 558 | flex-flow: column; 559 | } 560 | 561 | .products .box-container .box img{ 562 | width:100%; 563 | } 564 | 565 | .products .box-container .box .content{ 566 | text-align: center; 567 | } 568 | 569 | .offer .box-container .box .content h3{ 570 | font-size: 2.5rem; 571 | } 572 | 573 | .contact form{ 574 | padding:2rem; 575 | } 576 | 577 | .contact form .inputBox input{ 578 | width:100%; 579 | } 580 | 581 | } 582 | 583 | @media (max-width:400px){ 584 | 585 | html{ 586 | font-size: 50%; 587 | } 588 | 589 | .heading{ 590 | font-size: 2.2rem; 591 | } 592 | 593 | .home{ 594 | justify-content: center; 595 | } 596 | 597 | .home .content{ 598 | text-align: center; 599 | } 600 | 601 | .category .box-container .box{ 602 | width:100%; 603 | } 604 | 605 | .deal h3{ 606 | width:auto; 607 | font-size: 4rem; 608 | } 609 | 610 | .offer .box-container .box .content span{ 611 | font-size: 1.5rem; 612 | } 613 | 614 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Projetos 2 | 3 | Links dos projetos ⏬ 4 |
5 |

13 | 14 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /color/app.js: -------------------------------------------------------------------------------- 1 | const menu = document.querySelector('#mobile-menu'); 2 | const menuLinks = document.querySelector('.navbar__menu'); 3 | const navLogo = document.querySelector('#navbar__logo'); 4 | 5 | // Display Mobile Menu 6 | const mobileMenu = () => { 7 | menu.classList.toggle('is-active'); 8 | menuLinks.classList.toggle('active'); 9 | }; 10 | 11 | menu.addEventListener('click', mobileMenu); 12 | 13 | // Show active menu when scrolling 14 | const highlightMenu = () => { 15 | const elem = document.querySelector('.highlight'); 16 | const homeMenu = document.querySelector('#home-page'); 17 | const aboutMenu = document.querySelector('#about-page'); 18 | const servicesMenu = document.querySelector('#services-page'); 19 | let scrollPos = window.scrollY; 20 | // console.log(scrollPos); 21 | 22 | // adds 'highlight' class to my menu items 23 | if (window.innerWidth > 960 && scrollPos < 600) { 24 | homeMenu.classList.add('highlight'); 25 | aboutMenu.classList.remove('highlight'); 26 | return; 27 | } else if (window.innerWidth > 960 && scrollPos < 1400) { 28 | aboutMenu.classList.add('highlight'); 29 | homeMenu.classList.remove('highlight'); 30 | servicesMenu.classList.remove('highlight'); 31 | return; 32 | } else if (window.innerWidth > 960 && scrollPos < 2345) { 33 | servicesMenu.classList.add('highlight'); 34 | aboutMenu.classList.remove('highlight'); 35 | return; 36 | } 37 | 38 | if ((elem && window.innerWIdth < 960 && scrollPos < 600) || elem) { 39 | elem.classList.remove('highlight'); 40 | } 41 | }; 42 | 43 | window.addEventListener('scroll', highlightMenu); 44 | window.addEventListener('click', highlightMenu); 45 | 46 | // Close mobile Menu when clicking on a menu item 47 | const hideMobileMenu = () => { 48 | const menuBars = document.querySelector('.is-active'); 49 | if (window.innerWidth <= 768 && menuBars) { 50 | menu.classList.toggle('is-active'); 51 | menuLinks.classList.remove('active'); 52 | } 53 | }; 54 | 55 | menuLinks.addEventListener('click', hideMobileMenu); 56 | navLogo.addEventListener('click', hideMobileMenu); 57 | -------------------------------------------------------------------------------- /color/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Scroll Website 7 | 8 | 14 | 15 | 16 | 17 | 40 | 41 | 42 |

43 |

44 |

Escolha suas cores

45 |

Possibilidades ilimitadas

46 | 47 |

48 |

49 | 50 | 51 |

52 |

53 |

54 |

55 |

56 |

57 |

O QUE NÓS FAZEMOS?

58 |

Ajudamos as empresas a escalar

59 |

Agende uma ligação para saber mais sobre nossos serviços

60 | 61 |

62 |

63 |

64 | 65 | 66 |

67 |

Nossos serviços

68 |

69 |

70 |

Custom Colorways

71 |

Tecnologia alimentada por IA

72 |

73 |

74 |

75 |

Are you Ready?

76 |

Take the lepa

77 |

78 |

79 |

80 |

Full Gradients

81 |

100 Combinações

82 |

83 |

84 |

85 |

Infinite Choices

86 |

1000 cores

87 |

88 |

89 |

90 |

91 | 92 | 93 | 108 | 109 | 110 |

111 |

112 |

113 |

114 |

Sobre nós

115 | Como funciona Depoimentos 116 | Carreiras Termos de serviço 117 |

118 |

119 |

Contate-nos

120 | Contato Apoiar 121 | Destinos 122 |

123 |

124 |

125 |

126 |

Vídeos

127 | Enviar vídeo Embaixadores 128 | Agência 129 |

130 |

131 |

Mídia social

132 | Instagram Facebook 133 | Youtube Twitter 134 |

135 |

136 |

137 |

138 |

139 |

140 | COLOR 141 |

142 |

143 |

144 | 147 | 150 | 153 | 156 | 159 |

160 |

161 |

162 |

163 | 164 | 165 | 166 | 167 | -------------------------------------------------------------------------------- /color/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | font-family: 'Kumbh Sans', sans-serif; 6 | scroll-behavior: smooth; 7 | } 8 | 9 | .navbar { 10 | background: #131313; 11 | height: 80px; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | font-size: 1.2rem; 16 | position: sticky; 17 | top: 0; 18 | z-index: 999; 19 | } 20 | 21 | .navbar__container { 22 | display: flex; 23 | justify-content: space-between; 24 | height: 80px; 25 | z-index: 1; 26 | width: 100%; 27 | max-width: 1300px; 28 | margin: 0 auto; 29 | padding: 0 50px; 30 | } 31 | 32 | #navbar__logo { 33 | background-color: #ff8177; 34 | background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%); 35 | background-size: 100%; 36 | -webkit-background-clip: text; 37 | -moz-background-clip: text; 38 | -webkit-text-fill-color: transparent; 39 | -moz-text-fill-color: transparent; 40 | display: flex; 41 | align-items: center; 42 | cursor: pointer; 43 | text-decoration: none; 44 | font-size: 2rem; 45 | } 46 | 47 | .navbar__menu { 48 | display: flex; 49 | align-items: center; 50 | list-style: none; 51 | } 52 | 53 | .navbar__item { 54 | height: 80px; 55 | } 56 | 57 | .navbar__links { 58 | color: #fff; 59 | display: flex; 60 | align-items: center; 61 | justify-content: center; 62 | width: 125px; 63 | text-decoration: none; 64 | height: 100%; 65 | transition: all 0.3s ease; 66 | } 67 | 68 | .navbar__btn { 69 | display: flex; 70 | justify-content: center; 71 | align-items: center; 72 | padding: 0 1rem; 73 | width: 100%; 74 | } 75 | 76 | .button { 77 | display: flex; 78 | justify-content: center; 79 | align-items: center; 80 | text-decoration: none; 81 | padding: 10px 20px; 82 | height: 100%; 83 | width: 100%; 84 | border: none; 85 | outline: none; 86 | border-radius: 4px; 87 | background: #833ab4; 88 | background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); 89 | background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); 90 | color: #fff; 91 | transition: all 0.3s ease; 92 | } 93 | 94 | .navbar__links:hover { 95 | color: #9518fc; 96 | transition: all 0.3s ease; 97 | } 98 | 99 | @media screen and (max-width: 960px) { 100 | .navbar__container { 101 | display: flex; 102 | justify-content: space-between; 103 | height: 80px; 104 | z-index: 1; 105 | width: 100%; 106 | max-width: 1300px; 107 | padding: 0; 108 | } 109 | 110 | .navbar__menu { 111 | display: grid; 112 | grid-template-columns: auto; 113 | margin: 0; 114 | width: 100%; 115 | position: absolute; 116 | top: -1000px; 117 | opacity: 1; 118 | transition: all 0.5s ease; 119 | z-index: -1; 120 | } 121 | 122 | .navbar__menu.active { 123 | background: #131313; 124 | top: 100%; 125 | opacity: 1; 126 | transition: all 0.5s ease; 127 | z-index: 99; 128 | height: 60vh; 129 | font-size: 1.6rem; 130 | } 131 | 132 | #navbar__logo { 133 | padding-left: 25px; 134 | } 135 | 136 | .navbar__toggle .bar { 137 | width: 25px; 138 | height: 3px; 139 | margin: 5px auto; 140 | transition: all 0.3s ease-in-out; 141 | background: #fff; 142 | } 143 | 144 | .navbar__item { 145 | width: 100%; 146 | } 147 | 148 | .navbar__links { 149 | text-align: center; 150 | padding: 2rem; 151 | width: 100%; 152 | display: table; 153 | } 154 | 155 | .navbar__btn { 156 | padding-bottom: 2rem; 157 | } 158 | 159 | .button { 160 | display: flex; 161 | justify-content: center; 162 | align-items: center; 163 | width: 80%; 164 | height: 80px; 165 | margin: 0; 166 | } 167 | 168 | #mobile-menu { 169 | position: absolute; 170 | top: 20%; 171 | right: 5%; 172 | transform: translate(5%, 20%); 173 | } 174 | 175 | .navbar__toggle .bar { 176 | display: block; 177 | cursor: pointer; 178 | } 179 | 180 | #mobile-menu.is-active .bar:nth-child(2) { 181 | opacity: 0; 182 | } 183 | 184 | #mobile-menu.is-active .bar:nth-child(1) { 185 | transform: translateY(8px) rotate(45deg); 186 | } 187 | 188 | #mobile-menu.is-active .bar:nth-child(3) { 189 | transform: translateY(-8px) rotate(-45deg); 190 | } 191 | } 192 | 193 | /* Hero Section */ 194 | .hero { 195 | background: #000000; 196 | background: linear-gradient(to right, #161616, #000000); 197 | padding: 200px 0; 198 | } 199 | 200 | .hero__container { 201 | display: flex; 202 | flex-direction: column; 203 | justify-content: center; 204 | align-items: center; 205 | max-width: 1200px; 206 | margin: 0 auto; 207 | height: 90%; 208 | text-align: center; 209 | padding: 30px; 210 | } 211 | 212 | .hero__heading { 213 | font-size: 100px; 214 | margin-bottom: 24px; 215 | color: #fff; 216 | } 217 | 218 | .hero__heading span { 219 | background: #ee0979; /* fallback for old browsers */ 220 | background: -webkit-linear-gradient( 221 | to right, 222 | #ff6a00, 223 | #ee0979 224 | ); /* Chrome 10-25, Safari 5.1-6 */ 225 | background: linear-gradient( 226 | to right, 227 | #ff6a00, 228 | #ee0979 229 | ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 230 | background-size: 100%; 231 | -webkit-background-clip: text; 232 | -moz-background-clip: text; 233 | -webkit-text-fill-color: transparent; 234 | -mo-text-fill-color: transparent; 235 | } 236 | 237 | .hero__description { 238 | font-size: 60px; 239 | background: #da22ff; /* fallback for old browsers */ 240 | background: -webkit-linear-gradient( 241 | to right, 242 | #9114ff, 243 | #da22ff 244 | ); /* Chrome 10-25, Safari 5.1-6 */ 245 | background: linear-gradient( 246 | to right, 247 | #8f0eff, 248 | #da22ff 249 | ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 250 | background-size: 100%; 251 | -webkit-background-clip: text; 252 | -moz-background-clip: text; 253 | -webkit-text-fill-color: transparent; 254 | -moz-text-fill-color: transparent; 255 | } 256 | 257 | .highlight { 258 | border-bottom: 4px solid rgb(132, 0, 255); 259 | } 260 | 261 | @media screen and (max-width: 768px) { 262 | .hero__heading { 263 | font-size: 60px; 264 | } 265 | 266 | .hero__description { 267 | font-size: 40px; 268 | } 269 | } 270 | 271 | /* About Section */ 272 | .main { 273 | background-color: #131313; 274 | padding: 10rem 0; 275 | } 276 | 277 | .main__container { 278 | display: grid; 279 | grid-template-columns: 1fr 1fr; 280 | align-items: center; 281 | justify-content: center; 282 | margin: 0 auto; 283 | height: 90%; 284 | z-index: 1; 285 | width: 100%; 286 | max-width: 1300px; 287 | padding: 0 50px; 288 | } 289 | 290 | .main__content { 291 | color: #fff; 292 | width: 100%; 293 | } 294 | 295 | .main__content h1 { 296 | font-size: 2rem; 297 | background-color: #fe3b6f; 298 | background-image: linear-gradient(to top, #ff087b 0%, #ed1a52 100%); 299 | background-size: 100%; 300 | -webkit-background-clip: text; 301 | -moz-background-clip: text; 302 | -webkit-text-fill-color: transparent; 303 | -moz-text-fill-color: transparent; 304 | text-transform: uppercase; 305 | margin-bottom: 32px; 306 | } 307 | 308 | .main__content h2 { 309 | font-size: 4rem; 310 | background: #ff8177; /* fallback for old browsers */ 311 | background: -webkit-linear-gradient( 312 | to right, 313 | #9114ff, 314 | #da22ff 315 | ); /* Chrome 10-25, Safari 5.1-6 */ 316 | background: linear-gradient( 317 | to right, 318 | #8f0eff, 319 | #da22ff 320 | ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 321 | background-size: 100%; 322 | -webkit-background-clip: text; 323 | -moz-background-clip: text; 324 | -webkit-text-fill-color: transparent; 325 | -moz-text-fill-color: transparent; 326 | } 327 | 328 | .main__content p { 329 | margin-top: 1rem; 330 | font-size: 2rem; 331 | font-weight: 700; 332 | } 333 | 334 | .main__btn { 335 | font-size: 1.8rem; 336 | background: #833ab4; 337 | background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); 338 | background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); 339 | padding: 20px 60px; 340 | border: none; 341 | border-radius: 4px; 342 | margin-top: 2rem; 343 | cursor: pointer; 344 | position: relative; 345 | transition: all 0.35s; 346 | outline: none; 347 | } 348 | 349 | .main__btn a { 350 | position: relative; 351 | z-index: 2; 352 | color: #fff; 353 | text-decoration: none; 354 | } 355 | 356 | .main__btn:after { 357 | position: absolute; 358 | content: ''; 359 | top: 0; 360 | left: 0; 361 | width: 0; 362 | height: 100%; 363 | background: #ff1ead; 364 | transition: all 0.35s; 365 | border-radius: 4px; 366 | } 367 | 368 | .main__btn:hover { 369 | color: #fff; 370 | } 371 | 372 | .main__btn:hover:after { 373 | width: 100%; 374 | } 375 | 376 | .main__img--container { 377 | text-align: center; 378 | } 379 | 380 | .main__img--card { 381 | margin: 10px; 382 | height: 500px; 383 | width: 500px; 384 | border-radius: 4px; 385 | display: flex; 386 | flex-direction: column; 387 | justify-content: center; 388 | color: #fff; 389 | background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%); 390 | } 391 | 392 | .fa-layer-group, 393 | .fa-users { 394 | font-size: 14rem; 395 | } 396 | 397 | #card-2 { 398 | background: #ff512f; 399 | background: -webkit-linear-gradient(to right, #dd2476, #ff512f); 400 | background: linear-gradient(to right, #dd2476, #ff512f); 401 | } 402 | 403 | /* Mobile Responsive */ 404 | @media screen and (max-width: 1100px) { 405 | .main__container { 406 | display: grid; 407 | grid-template-columns: 1fr; 408 | align-items: center; 409 | justify-content: center; 410 | width: 100%; 411 | margin: 0 auto; 412 | height: 90%; 413 | } 414 | 415 | .main__img--container { 416 | display: flex; 417 | justify-content: center; 418 | } 419 | 420 | .main__img--card { 421 | height: 425px; 422 | width: 425px; 423 | } 424 | 425 | .main__content { 426 | text-align: center; 427 | margin-bottom: 4rem; 428 | } 429 | 430 | .main__content h1 { 431 | font-size: 2.5rem; 432 | margin-top: 2rem; 433 | } 434 | 435 | .main__content h2 { 436 | font-size: 3rem; 437 | } 438 | 439 | .main__content p { 440 | margin-top: 1rem; 441 | font-size: 1.5rem; 442 | } 443 | } 444 | 445 | @media screen and (max-width: 480px) { 446 | .main__img--card { 447 | width: 250px; 448 | height: 250px; 449 | } 450 | 451 | .fa-users, 452 | .fa-layer-group { 453 | font-size: 4rem; 454 | } 455 | 456 | .main__content h1 { 457 | font-size: 2rem; 458 | margin-top: 3rem; 459 | } 460 | .main__content h2 { 461 | font-size: 2rem; 462 | } 463 | 464 | .main__content p { 465 | margin-top: 2rem; 466 | } 467 | 468 | .main__btn { 469 | padding: 12px 36px; 470 | margin: 2.5rem 0; 471 | } 472 | } 473 | 474 | /* Services Section */ 475 | .services { 476 | background: #131313; 477 | display: flex; 478 | flex-direction: column; 479 | justify-content: center; 480 | align-items: center; 481 | height: 100%; 482 | padding: 10rem 0; 483 | } 484 | 485 | .services h1 { 486 | background-color: #ff8177; 487 | background-image: linear-gradient(to right, #ff0844 0%, #f7673c 100%); 488 | background-size: 100%; 489 | -webkit-background-clip: text; 490 | -moz-background-clip: text; 491 | -webkit-text-fill-color: transparent; 492 | -moz-text-fill-color: transparent; 493 | margin-bottom: 5rem; 494 | font-size: 2.5rem; 495 | } 496 | 497 | .services__wrapper { 498 | display: grid; 499 | grid-template-columns: 1fr 1fr 1fr 1fr; 500 | grid-template-rows: 1fr; 501 | } 502 | 503 | .services__card { 504 | margin: 10px; 505 | height: 425px; 506 | width: 300px; 507 | border-radius: 4px; 508 | display: flex; 509 | flex-direction: column; 510 | justify-content: center; 511 | color: #fff; 512 | background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%); 513 | transition: 0.3s ease-in; 514 | } 515 | 516 | .services__card:nth-child(2) { 517 | background: #1fa2ff; /* fallback for old browsers */ 518 | background: -webkit-linear-gradient( 519 | to right, 520 | #a6ffcb, 521 | #12d8fa, 522 | #1fa2ff 523 | ); /* Chrome 10-25, Safari 5.1-6 */ 524 | background: linear-gradient( 525 | to right, 526 | #a6ffcb, 527 | #12d8fa, 528 | #1fa2ff 529 | ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 530 | } 531 | 532 | .services__card:nth-child(3) { 533 | background-image: linear-gradient( 534 | -225deg, 535 | #231557 0%, 536 | #44107a 29%, 537 | #ff1361 67%, 538 | #fff800 100% 539 | ); 540 | } 541 | 542 | .services__card h2 { 543 | text-align: center; 544 | } 545 | 546 | .services__card p { 547 | text-align: center; 548 | margin-top: 24px; 549 | font-size: 20px; 550 | } 551 | 552 | .services__btn { 553 | display: flex; 554 | justify-content: center; 555 | margin-top: 16px; 556 | } 557 | 558 | .services__card button { 559 | color: #fff; 560 | padding: 14px 24px; 561 | border: none; 562 | outline: none; 563 | border-radius: 4px; 564 | background: #131313; 565 | font-size: 1rem; 566 | } 567 | 568 | .services__card button:hover { 569 | cursor: pointer; 570 | } 571 | 572 | .services__card:hover { 573 | transform: scale(1.075); 574 | transition: 0.3s ease-in; 575 | cursor: pointer; 576 | } 577 | 578 | @media screen and (max-width: 1300px) { 579 | .services__wrapper { 580 | grid-template-columns: 1fr 1fr; 581 | } 582 | } 583 | 584 | @media screen and (max-width: 768px) { 585 | .services__wrapper { 586 | grid-template-columns: 1fr; 587 | } 588 | } 589 | 590 | /* Footer CSS */ 591 | .footer__container { 592 | background-color: #131313; 593 | padding: 5rem 0; 594 | display: flex; 595 | flex-direction: column; 596 | justify-content: center; 597 | align-items: center; 598 | } 599 | 600 | #footer__logo { 601 | color: #fff; 602 | display: flex; 603 | align-items: center; 604 | cursor: pointer; 605 | text-decoration: none; 606 | font-size: 2rem; 607 | } 608 | 609 | .footer__links { 610 | width: 100%; 611 | max-width: 1000px; 612 | display: flex; 613 | justify-content: center; 614 | } 615 | 616 | .footer__link--wrapper { 617 | display: flex; 618 | } 619 | 620 | .footer__link--items { 621 | display: flex; 622 | flex-direction: column; 623 | align-items: flex-start; 624 | margin: 16px; 625 | text-align: left; 626 | width: 160px; 627 | box-sizing: border-box; 628 | } 629 | 630 | .footer__link--items h2 { 631 | margin-bottom: 16px; 632 | color: #fff; 633 | } 634 | 635 | .footer__link--items a { 636 | color: #fff; 637 | text-decoration: none; 638 | margin-bottom: 0.5rem; 639 | transition: 0.3 ease-out; 640 | } 641 | 642 | .footer__link--items a:hover { 643 | color: #e9e9e9; 644 | transition: 0.3 ease-out; 645 | } 646 | 647 | .social__icon--link { 648 | color: #fff; 649 | font-size: 24px; 650 | } 651 | 652 | .social__media { 653 | max-width: 1000px; 654 | width: 100%; 655 | } 656 | 657 | .social__media--wrap { 658 | display: flex; 659 | justify-content: space-between; 660 | align-items: center; 661 | width: 90%; 662 | max-width: 1000px; 663 | margin: 40px auto 0 auto; 664 | } 665 | 666 | .social__icons { 667 | display: flex; 668 | justify-content: space-between; 669 | align-items: center; 670 | width: 240px; 671 | } 672 | 673 | .website__rights { 674 | color: #fff; 675 | } 676 | 677 | @media screen and (max-width: 820px) { 678 | .footer__links { 679 | padding-top: 2rem; 680 | } 681 | 682 | #footer__logo { 683 | margin-bottom: 2rem; 684 | } 685 | 686 | .website__rights { 687 | margin-bottom: 2rem; 688 | } 689 | 690 | .footer__link--wrapper { 691 | flex-direction: column; 692 | } 693 | 694 | .social__media--wrap { 695 | flex-direction: column; 696 | } 697 | } 698 | 699 | @media screen and (max-width: 480px) { 700 | .footer__link--items { 701 | margin: 0; 702 | padding: 10px; 703 | width: 100%; 704 | } 705 | } 706 | -------------------------------------------------------------------------------- /papelaria/css/style.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --pink:#e84393; 3 | } 4 | 5 | *{ 6 | margin:0; padding:0; 7 | box-sizing: border-box; 8 | font-family: Verdana, Geneva, Tahoma, sans-serif; 9 | outline: none; border:none; 10 | text-decoration: none; 11 | text-transform: capitalize; 12 | transition: .2s linear; 13 | } 14 | 15 | html{ 16 | font-size: 62.5%; 17 | scroll-behavior: smooth; 18 | scroll-padding-top: 6rem; 19 | overflow-x: hidden; 20 | } 21 | 22 | section{ 23 | padding:2rem 9%; 24 | } 25 | 26 | .heading{ 27 | text-align: center; 28 | font-size: 4rem; 29 | color:#333; 30 | padding:1rem; 31 | margin:2rem 0; 32 | background:rgba(255, 51, 153,.05); 33 | } 34 | 35 | .heading span{ 36 | color:var(--pink); 37 | } 38 | 39 | .btn{ 40 | display: inline-block; 41 | margin-top: 1rem; 42 | border-radius: 5rem; 43 | background:#333; 44 | color:#fff; 45 | padding:.9rem 3.5rem; 46 | cursor: pointer; 47 | font-size: 1.7rem; 48 | } 49 | 50 | .btn:hover{ 51 | background:var(--pink); 52 | } 53 | 54 | header{ 55 | position: fixed; 56 | top:0; left:0; right:0; 57 | background:#fff; 58 | padding:2rem 9%; 59 | display: flex; 60 | align-items: center; 61 | justify-content: space-between; 62 | z-index: 1000; 63 | box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); 64 | } 65 | 66 | header .logo{ 67 | font-size: 3rem; 68 | color:#333; 69 | font-weight: bolder; 70 | } 71 | 72 | header .logo span{ 73 | color:var(--pink); 74 | } 75 | 76 | header .navbar a{ 77 | font-size: 2rem; 78 | padding:0 1.5rem; 79 | color:#666; 80 | } 81 | 82 | header .navbar a:hover{ 83 | color:var(--pink); 84 | } 85 | 86 | header .icons a{ 87 | font-size: 2.5rem; 88 | color:#333; 89 | margin-left: 1.5rem; 90 | } 91 | 92 | header .icons a:hover{ 93 | color:var(--pink); 94 | } 95 | 96 | header #toggler{ 97 | display: none; 98 | } 99 | 100 | header .fa-bars{ 101 | font-size: 3rem; 102 | color:#333; 103 | border-radius: .5rem; 104 | padding:.5rem 1.5rem; 105 | cursor: pointer; 106 | border:.1rem solid rgba(0,0,0,.3); 107 | display: none; 108 | } 109 | 110 | .home{ 111 | display: flex; 112 | align-items: center; 113 | min-height: 100vh; 114 | background:url(../img/banner.png) no-repeat; 115 | background-size: cover; 116 | background-position: center; 117 | } 118 | 119 | .home .content{ 120 | max-width: 50rem; 121 | } 122 | 123 | .home .content h3{ 124 | font-size: 4.5rem; 125 | color:#141E27; 126 | } 127 | 128 | .home .content span{ 129 | font-size: 3rem; 130 | color: #00092C; 131 | padding:1rem 0; 132 | line-height: 1.5; 133 | } 134 | 135 | .about .row{ 136 | display: flex; 137 | align-items: center; 138 | gap:2rem; 139 | flex-wrap: wrap; 140 | padding:2rem 0; 141 | padding-bottom: 3rem; 142 | } 143 | 144 | .about .row .video-container{ 145 | flex:1 1 40rem; 146 | position: relative; 147 | } 148 | 149 | .about .row .video-container video{ 150 | width:100%; 151 | border:1.5rem solid #fff; 152 | border-radius: .5rem; 153 | box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); 154 | height: 100%; 155 | object-fit: cover; 156 | } 157 | 158 | .about .row .video-container h3{ 159 | position: absolute; 160 | top:50%; transform: translateY(-50%); 161 | font-size: 3rem; 162 | background: #fff; 163 | width:100%; 164 | padding:1rem 2rem; 165 | text-align: center; 166 | mix-blend-mode: screen; 167 | } 168 | 169 | .about .row .content{ 170 | flex:1 1 40rem; 171 | } 172 | 173 | .about .row .content h3{ 174 | font-size: 3rem; 175 | color: #333; 176 | } 177 | 178 | .about .row .content p{ 179 | font-size: 1.5rem; 180 | color:#999; 181 | padding:.5rem 0; 182 | padding-top: 1rem; 183 | line-height: 1.5; 184 | } 185 | 186 | .icons-container{ 187 | background:#eee; 188 | display: flex; 189 | flex-wrap: wrap; 190 | gap:1.5rem; 191 | padding-top: 5rem; 192 | padding-bottom: 5rem; 193 | } 194 | 195 | .icons-container .icons{ 196 | background:#fff; 197 | border:.1rem solid rgba(0,0,0,.1); 198 | padding:2rem; 199 | display: flex; 200 | align-items: center; 201 | flex:1 1 25rem; 202 | } 203 | 204 | .icons-container .icons img{ 205 | height:5rem; 206 | margin-right: 2rem; 207 | } 208 | 209 | .icons-container .icons h3{ 210 | color:#333; 211 | padding-bottom: .5rem; 212 | font-size: 1.5rem; 213 | } 214 | 215 | .icons-container .icons span{ 216 | color:#555; 217 | font-size: 1.3rem; 218 | } 219 | 220 | .products .box-container{ 221 | display: flex; 222 | flex-wrap: wrap; 223 | gap:1.5rem; 224 | } 225 | 226 | .products .box-container .box{ 227 | flex:1 1 30rem; 228 | box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1); 229 | border-radius: .5rem; 230 | border:.1rem solid rgba(0,0,0,.1); 231 | position: relative; 232 | } 233 | 234 | .products .box-container .box .discount{ 235 | position: absolute; 236 | top:1rem; left:1rem; 237 | padding:.7rem 1rem; 238 | font-size: 2rem; 239 | color:var(--pink); 240 | background:rgba(255, 51, 153,.05); 241 | z-index: 1; 242 | border-radius: .5rem; 243 | } 244 | 245 | .products .box-container .box .image{ 246 | position: relative; 247 | text-align: center; 248 | padding-top: 2rem; 249 | overflow:hidden; 250 | } 251 | 252 | .products .box-container .box .image img{ 253 | height:25rem; 254 | } 255 | 256 | .products .box-container .box:hover .image img{ 257 | transform: scale(1.1); 258 | } 259 | 260 | .products .box-container .box .image .icons{ 261 | position: absolute; 262 | bottom:-7rem; left:0; right:0; 263 | display: flex; 264 | } 265 | 266 | .products .box-container .box:hover .image .icons{ 267 | bottom:0; 268 | } 269 | 270 | .products .box-container .box .image .icons a{ 271 | height: 5rem; 272 | line-height: 5rem; 273 | font-size: 2rem; 274 | width:50%; 275 | background:var(--pink); 276 | color:#fff; 277 | } 278 | 279 | .products .box-container .box .image .icons .cart-btn{ 280 | border-left: .1rem solid #fff7; 281 | border-right: .1rem solid #fff7; 282 | width:100%; 283 | } 284 | 285 | .products .box-container .box .image .icons a:hover{ 286 | background:#333; 287 | } 288 | 289 | .products .box-container .box .content{ 290 | padding:2rem; 291 | text-align: center; 292 | } 293 | 294 | .products .box-container .box .content h3{ 295 | font-size: 2.5rem; 296 | color:#333; 297 | } 298 | 299 | .products .box-container .box .content .price{ 300 | font-size: 2.5rem; 301 | color:var(--pink); 302 | font-weight: bolder; 303 | padding-top: 1rem; 304 | } 305 | 306 | .products .box-container .box .content .price span{ 307 | font-size: 1.5rem; 308 | color:#999; 309 | font-weight: lighter; 310 | text-decoration: line-through; 311 | } 312 | 313 | .review .box-container{ 314 | display: flex; 315 | flex-wrap: wrap; 316 | gap:1.5rem; 317 | } 318 | 319 | .review .box-container .box{ 320 | flex:1 1 30rem; 321 | box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1); 322 | border-radius: .5rem; 323 | padding:3rem 2rem; 324 | position: relative; 325 | border:.1rem solid rgba(0,0,0,.1); 326 | } 327 | 328 | .review .box-container .box .fa-quote-right{ 329 | position: absolute; 330 | bottom:3rem; right:3rem; 331 | font-size: 6rem; 332 | color:#eee; 333 | } 334 | 335 | .review .box-container .box .stars i{ 336 | color:var(--pink); 337 | font-size: 2rem; 338 | } 339 | 340 | .review .box-container .box p{ 341 | color:#999; 342 | font-size: 1.5rem; 343 | line-height: 1.5; 344 | padding-top: 2rem; 345 | } 346 | 347 | .review .box-container .box .user{ 348 | display: flex; 349 | align-items: center; 350 | padding-top: 2rem; 351 | } 352 | 353 | .review .box-container .box .user img{ 354 | height:6rem; 355 | width:6rem; 356 | border-radius: 50%; 357 | object-fit: cover; 358 | margin-right: 1rem; 359 | } 360 | 361 | .review .box-container .box .user h3{ 362 | font-size: 2rem; 363 | color:#333; 364 | } 365 | 366 | .review .box-container .box .user span{ 367 | font-size: 1.5rem; 368 | color:#999; 369 | } 370 | 371 | .contact .row{ 372 | display: flex; 373 | flex-wrap: wrap-reverse; 374 | gap:1.5rem; 375 | align-items: center; 376 | } 377 | 378 | .contact .row form{ 379 | flex:1 1 40rem; 380 | padding:2rem 2.5rem; 381 | box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1); 382 | border:.1rem solid rgba(0,0,0,.1); 383 | background: #fff; 384 | border-radius: .5rem; 385 | } 386 | 387 | .contact .row .image{ 388 | flex:1 1 40rem; 389 | } 390 | 391 | .contact .row .image img{ 392 | width: 100%; 393 | } 394 | 395 | .contact .row form .box{ 396 | padding:1rem; 397 | font-size: 1.7rem; 398 | color:#333; 399 | text-transform: none; 400 | border:.1rem solid rgba(0,0,0,.1); 401 | border-radius: .5rem; 402 | margin:.7rem 0; 403 | width: 100%; 404 | } 405 | 406 | .contact .row form .box:focus{ 407 | border-color: var(--pink); 408 | } 409 | 410 | .contact .row form textarea{ 411 | height: 15rem; 412 | resize: none; 413 | } 414 | 415 | .footer .box-container{ 416 | display: flex; 417 | flex-wrap: wrap; 418 | gap:1.5rem; 419 | } 420 | 421 | .footer .box-container .box{ 422 | flex:1 1 25rem; 423 | } 424 | 425 | .footer .box-container .box h3{ 426 | color:#333; 427 | font-size: 2.5rem; 428 | padding:1rem 0; 429 | } 430 | 431 | .footer .box-container .box a{ 432 | display: block; 433 | color:#666; 434 | font-size: 1.5rem; 435 | padding:1rem 0; 436 | } 437 | 438 | .footer .box-container .box a:hover{ 439 | color:var(--pink); 440 | text-decoration: underline; 441 | } 442 | 443 | .footer .box-container .box img{ 444 | margin-top: 1rem; 445 | } 446 | 447 | .footer .credit{ 448 | text-align: center; 449 | padding:1.5rem; 450 | margin-top: 1.5rem; 451 | padding-top: 2.5rem; 452 | font-size: 2rem; 453 | color:#333; 454 | border-top: .1rem solid rgba(0,0,0,.1); 455 | padding-bottom: 9rem; 456 | } 457 | 458 | .footer .credit span{ 459 | color:var(--pink); 460 | } 461 | 462 | /* media queries */ 463 | @media (max-width:991px){ 464 | 465 | html{ 466 | font-size: 55%; 467 | } 468 | 469 | header{ 470 | padding:2rem; 471 | } 472 | 473 | section{ 474 | padding:2rem; 475 | } 476 | 477 | .home{ 478 | background-position: left; 479 | } 480 | 481 | } 482 | 483 | @media (max-width:768px){ 484 | 485 | header .fa-bars{ 486 | display: block; 487 | } 488 | 489 | header .navbar{ 490 | position:absolute; 491 | top:100%; left:0; right:0; 492 | background:#eee; 493 | border-top: .1rem solid rgba(0,0,0,.1); 494 | clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); 495 | } 496 | 497 | header #toggler:checked ~ .navbar{ 498 | clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%); 499 | } 500 | 501 | header .navbar a{ 502 | margin:1.5rem; 503 | padding:1.5rem; 504 | background:#fff; 505 | border:.1rem solid rgba(0,0,0,.1); 506 | display: block; 507 | } 508 | 509 | .home .content h3{ 510 | font-size: 5rem; 511 | } 512 | 513 | .home .content span{ 514 | font-size: 2.5rem; 515 | } 516 | 517 | .icons-container .icons h3{ 518 | font-size: 2rem; 519 | } 520 | 521 | .icons-container .icons span{ 522 | font-size: 1.7rem; 523 | } 524 | 525 | } 526 | 527 | @media (max-width:450px){ 528 | 529 | html{ 530 | font-size: 50%; 531 | } 532 | 533 | .heading{ 534 | font-size: 3rem; 535 | } 536 | 537 | } -------------------------------------------------------------------------------- /papelaria/img/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/papelaria/img/banner.png -------------------------------------------------------------------------------- /papelaria/img/caneta1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/papelaria/img/caneta1.png -------------------------------------------------------------------------------- /papelaria/img/caneta2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/papelaria/img/caneta2.png -------------------------------------------------------------------------------- /papelaria/img/caneta3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/papelaria/img/caneta3.png -------------------------------------------------------------------------------- /papelaria/img/estojo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/papelaria/img/estojo1.png -------------------------------------------------------------------------------- /papelaria/img/estojo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/papelaria/img/estojo2.png -------------------------------------------------------------------------------- /papelaria/img/estojo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/papelaria/img/estojo3.png -------------------------------------------------------------------------------- /papelaria/img/icon-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/papelaria/img/icon-1.png -------------------------------------------------------------------------------- /papelaria/img/icon-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/papelaria/img/icon-2.png -------------------------------------------------------------------------------- /papelaria/img/icon-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/papelaria/img/icon-3.png -------------------------------------------------------------------------------- /papelaria/img/icon-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/papelaria/img/icon-4.png -------------------------------------------------------------------------------- /papelaria/img/material1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/papelaria/img/material1.png -------------------------------------------------------------------------------- /papelaria/img/material2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/papelaria/img/material2.png -------------------------------------------------------------------------------- /papelaria/img/material3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/papelaria/img/material3.png -------------------------------------------------------------------------------- /papelaria/img/payment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/papelaria/img/payment.png -------------------------------------------------------------------------------- /papelaria/img/pic-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/papelaria/img/pic-1.png -------------------------------------------------------------------------------- /papelaria/img/pic-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/papelaria/img/pic-2.png -------------------------------------------------------------------------------- /papelaria/img/pic-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/papelaria/img/pic-3.png -------------------------------------------------------------------------------- /papelaria/img/post-it1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/papelaria/img/post-it1.png -------------------------------------------------------------------------------- /papelaria/img/post-it2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/papelaria/img/post-it2.png -------------------------------------------------------------------------------- /papelaria/img/post-it3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/papelaria/img/post-it3.png -------------------------------------------------------------------------------- /papelaria/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Papelaria 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 | 16 | 17 | 18 | 19 | Papelaria. 20 | 21 | 28 | 29 |

30 | 31 | 32 | 33 |

34 | 35 |

36 | 37 | 38 | 39 |

40 | 41 |

42 |

Melhor Papelaria

43 | Com as melhores promoções 44 | Compre agora 45 |

46 | 47 |

48 | 49 | 50 |

51 | 52 |

Sobre nós

53 | 54 |

55 | 56 |

57 | 58 |

59 | 60 |

61 |

Por Que Nós?

62 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem cumque sit nemo pariatur corporis perspiciatis aspernatur a ullam repudiandae autem asperiores quibusdam omnis commodi alias repellat illum, unde optio temporibus.

63 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium ea est commodi incidunt magni quia molestias perspiciatis, unde repudiandae quidem.

64 | Saber mais 65 |

66 | 67 |

68 | 69 |

70 | 71 | 72 |

73 | 74 |

75 |

76 |

77 |

Entrega Grátis

78 | Em Todos Os Pedidos 79 |

80 |

81 | 82 |

83 |

84 |

85 |

10 Dias De Devolução

86 | Garantia De Devolução De Dinheiro 87 |

88 |

89 | 90 |

91 |

92 |

93 |

Oferta E Presentes

94 | Em Todos Os Pedidos 95 |

96 |

97 | 98 |

99 |

100 |

101 |

Pagamentos Seguros

102 | Protegido Por Paypal 103 |

104 |

105 | 106 |

107 | 108 |

109 | 110 |

Produtos Mais Recentes

111 | 112 |

113 | 114 |

115 | -10% 116 |

117 |

118 |

119 | 120 | add to cart 121 | 122 |

123 |

124 |

125 |

Caneta

126 |

$12.99 $15.99

127 |

128 |

129 | 130 |

131 | -15% 132 |

133 |

134 |

135 | 136 | add to cart 137 | 138 |

139 |

140 |

141 |

Caneta

142 |

$12.99 $15.99

143 |

144 |

145 | 146 |

147 | -5% 148 |

149 |

150 |

151 | 152 | add to cart 153 | 154 |

155 |

156 |

157 |

Caneta

158 |

$12.99 $15.99

159 |

160 |

161 | 162 |

163 | -20% 164 |

165 |

166 |

167 | 168 | add to cart 169 | 170 |

171 |

172 |

173 |

Estojo

174 |

$12.99 $15.99

175 |

176 |

177 | 178 |

179 | -17% 180 |

181 |

182 |

183 | 184 | add to cart 185 | 186 |

187 |

188 |

189 |

Estojo

190 |

$12.99 $15.99

191 |

192 |

193 | 194 |

195 | -3% 196 |

197 |

198 |

199 | 200 | add to cart 201 | 202 |

203 |

204 |

205 |

Estojo

206 |

$12.99 $15.99

207 |

208 |

209 | 210 |

211 | -18% 212 |

213 |

214 |

215 | 216 | add to cart 217 | 218 |

219 |

220 |

221 |

Planner

222 |

$12.99 $15.99

223 |

224 |

225 | 226 |

227 | -10% 228 |

229 |

230 |

231 | 232 | add to cart 233 | 234 |

235 |

236 |

237 |

Planner

238 |

$12.99 $15.99

239 |

240 |

241 | 242 |

243 | -5% 244 |

245 |

246 |

247 | 248 | add to cart 249 | 250 |

251 |

252 |

253 |

Planner

254 |

$12.99 $15.99

255 |

256 |

257 | 258 |

259 | -5% 260 |

261 |

262 |

263 | 264 | add to cart 265 | 266 |

267 |

268 |

269 |

Post-it

270 |

$12.99 $15.99

271 |

272 |

273 | 274 |

275 | -5% 276 |

277 |

278 |

279 | 280 | add to cart 281 | 282 |

283 |

284 |

285 |

Post-it

286 |

$12.99 $15.99

287 |

288 |

289 | 290 |

291 | -5% 292 |

293 |

294 |

295 | 296 | add to cart 297 | 298 |

299 |

300 |

301 |

Post-it

302 |

$12.99 $15.99

303 |

304 |

305 | 306 |

307 | 308 |

309 | 310 | 311 |

312 | 313 |

Opiniões Dos Cliente

314 | 315 |

316 | 317 |

318 |

319 | 320 | 321 | 322 | 323 | 324 |

325 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti asperiores laboriosam praesentium enim maiores? Ad repellat voluptates alias facere repudiandae dolor accusamus enim ut odit, aliquam nesciunt eaque nulla dignissimos.

326 |

327 |

328 |

329 |

john deo

330 | happy customer 331 |

332 |

333 | 334 |

335 | 336 |

337 |

338 | 339 | 340 | 341 | 342 | 343 |

344 |

345 |

346 |

347 |

348 |

john deo

349 | happy customer 350 |

351 |

352 | 353 |

354 | 355 |

356 |

357 | 358 | 359 | 360 | 361 | 362 |

363 |

364 |

365 |

366 |

367 |

john deo

368 | happy customer 369 |

370 |

371 | 372 |

373 | 374 |

375 | 376 |

377 | 378 | 379 |

380 | 381 |

Contato

382 | 383 |

384 | 385 | 392 | 393 |

394 |

395 |

396 | 397 |

398 | 399 |

400 | 401 | 402 |

403 | 404 |

405 | 406 |

407 |

Links Rápidos

414 | 415 |

416 |

Links Extras

417 | Minha Conta 418 | Meu pedido 419 | Meu favorito 420 |

421 | 422 |

423 |

Localizações

429 | 430 |

431 |

Informações De Contato

432 | +55 81 0000-0000 433 | examplo@gmail.com 434 | Pernambuco, Brasil - 00000-000 435 |

436 |

437 | 438 |

439 | 440 | 441 |

442 | 443 |

444 | 445 | 446 | 447 | -------------------------------------------------------------------------------- /papelaria/js/script.js: -------------------------------------------------------------------------------- 1 | let navbar = document.querySelector('.navbar') 2 | 3 | document.querySelector('.icons').onclick = () =>{ 4 | navbar.classList.toggle('active'); 5 | } 6 | 7 | document.querySelector('#close').onclick = () =>{ 8 | navbar.classList.remove('active'); 9 | } 10 | 11 | window.onscroll = () =>{ 12 | 13 | navbar.classList.remove('active'); 14 | 15 | if(window.scrollY > 100){ 16 | document.querySelector('header').classList.add('active'); 17 | }else{ 18 | document.querySelector('header').classList.remove('active'); 19 | } 20 | 21 | } 22 | 23 | let themeToggler = document.querySelector('#theme-toggler'); 24 | 25 | themeToggler.onclick = () =>{ 26 | themeToggler.classList.toggle('fa-sun'); 27 | if(themeToggler.classList.contains('fa-sun')){ 28 | document.querySelector('body').classList.add('active'); 29 | }else{ 30 | document.querySelector('body').classList.remove('active'); 31 | } 32 | } 33 | 34 | document.querySelectorAll('.small-image-1').forEach(images =>{ 35 | images.onclick = () =>{ 36 | document.querySelector('.big-image').src = images.getAttribute('src'); 37 | } 38 | }); 39 | 40 | document.querySelectorAll('.small-image-2').forEach(images =>{ 41 | images.onclick = () =>{ 42 | document.querySelector('.big-image-2').src = images.getAttribute('src'); 43 | } 44 | }); 45 | 46 | document.querySelectorAll('.small-image-3').forEach(images =>{ 47 | images.onclick = () =>{ 48 | document.querySelector('.big-image-3').src = images.getAttribute('src'); 49 | } 50 | }); 51 | 52 | let countDate = new Date('aug 1, 2021 00:00:00').getTime(); 53 | 54 | function countDown(){ 55 | 56 | let now = new Date().getTime(); 57 | gap = countDate - now; 58 | 59 | let seconds = 1000; 60 | let minutes = seconds * 60; 61 | let hours = minutes * 60; 62 | let days = hours * 24; 63 | 64 | let d = Math.floor(gap / (days)); 65 | let h = Math.floor((gap % (days)) / (hours)); 66 | let m = Math.floor((gap % (hours)) / (minutes)); 67 | let s = Math.floor((gap % (minutes)) / (seconds)); 68 | 69 | document.getElementById('days').innerText = d; 70 | document.getElementById('hours').innerText = h; 71 | document.getElementById('minutes').innerText = m; 72 | document.getElementById('seconds').innerText = s; 73 | 74 | } 75 | 76 | setInterval(function(){ 77 | countDown() 78 | },1000); 79 | 80 | var swiper = new Swiper(".product-slider", { 81 | slidesPerView: 3, 82 | loop:true, 83 | spaceBetween: 10, 84 | autoplay: { 85 | delay: 4000, 86 | disableOnInteraction: false, 87 | }, 88 | navigation: { 89 | nextEl: ".swiper-button-next", 90 | prevEl: ".swiper-button-prev", 91 | }, 92 | breakpoints: { 93 | 0: { 94 | slidesPerView: 1, 95 | }, 96 | 550: { 97 | slidesPerView: 2, 98 | }, 99 | 800: { 100 | slidesPerView: 3, 101 | }, 102 | 1000: { 103 | slidesPerView: 3, 104 | }, 105 | }, 106 | }); 107 | 108 | var swiper = new Swiper(".review-slider", { 109 | slidesPerView: 3, 110 | loop:true, 111 | spaceBetween: 10, 112 | autoplay: { 113 | delay: 4000, 114 | disableOnInteraction: false, 115 | }, 116 | breakpoints: { 117 | 0: { 118 | slidesPerView: 1, 119 | }, 120 | 550: { 121 | slidesPerView: 2, 122 | }, 123 | 800: { 124 | slidesPerView: 3, 125 | }, 126 | 1000: { 127 | slidesPerView: 3, 128 | }, 129 | }, 130 | }); -------------------------------------------------------------------------------- /pistachio/README.md: -------------------------------------------------------------------------------- 1 | # pistachio -------------------------------------------------------------------------------- /pistachio/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/pistachio/bg.png -------------------------------------------------------------------------------- /pistachio/img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/pistachio/img1.png -------------------------------------------------------------------------------- /pistachio/img2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/pistachio/img2.png -------------------------------------------------------------------------------- /pistachio/img3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/pistachio/img3.png -------------------------------------------------------------------------------- /pistachio/img4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/pistachio/img4.png -------------------------------------------------------------------------------- /pistachio/img5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/pistachio/img5.png -------------------------------------------------------------------------------- /pistachio/img6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/pistachio/img6.png -------------------------------------------------------------------------------- /pistachio/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 12 | 13 | 14 | 15 | 16 |

17 |

18 |

19 |

20 | 21 | 31 | 32 |

33 | 34 |

35 |

36 |

37 |

38 |

39 |

40 |

41 |

42 |

43 |

44 |

The Pistachios

45 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit.adipisicing elit.

46 | 47 |

48 |

49 | 50 |

51 |

52 |

53 |

54 |

55 |

56 |

100% Organic

57 |

Lorem ipsum dolor sit amet.

58 |

59 |

60 |

61 |

62 |

63 |

64 |

65 |

Not Expensive

66 |

Lorem ipsum dolor sit amet.

67 |

68 |

69 |

70 |

71 |

72 |

73 |

74 |

Super Healthy

75 |

Lorem ipsum dolor sit amet.

76 |

77 |

78 |

79 | 80 | 86 |

87 | 88 | 89 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /pistachio/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/pistachio/logo.png -------------------------------------------------------------------------------- /pistachio/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap'); 2 | 3 | * { 4 | padding: 0%; 5 | margin: 0; 6 | font-family: 'Montserrat', sans-serif; 7 | } 8 | 9 | .container { 10 | height: 100vh; 11 | width: 100%; 12 | background: linear-gradient(to right, #93C572 70%, #C8EBB1 30%); 13 | position: relative; 14 | overflow: hidden; 15 | } 16 | .wave { 17 | position: absolute; 18 | top: 0; 19 | right: 30%; 20 | } 21 | nav { 22 | width: 90%; 23 | margin: auto; 24 | padding-top: 20px; 25 | display: flex; 26 | justify-content: space-between; 27 | align-items: center; 28 | } 29 | nav ul { 30 | display: flex; 31 | list-style-type: none; 32 | } 33 | nav ul li{ 34 | margin:0 5px; 35 | } 36 | nav ul a{ 37 | text-decoration: none; 38 | padding: 0.3rem 1.3rem; 39 | font-size: 17px; 40 | font-weight: bold; 41 | color: #494234; 42 | position: relative; 43 | z-index: 1; 44 | } 45 | nav ul a::after{ 46 | content: ""; 47 | width: 0%; 48 | height: 100%; 49 | position: absolute; 50 | top:0; 51 | left:0px; 52 | border-radius: 20px; 53 | background-color: #C8EBB1; 54 | z-index: -1; 55 | transition: 0.5s; 56 | } 57 | nav ul a:hover:after{ 58 | width: 100%; 59 | } 60 | .main-content { 61 | width: 60%; 62 | padding-top: 100px; 63 | margin-left: 3rem; 64 | display: flex; 65 | align-items: center; 66 | justify-content: space-around; 67 | } 68 | .image-pista ,.main-text{ 69 | flex-basis: 50%; 70 | } 71 | .image-pista img{ 72 | width: 100%; 73 | } 74 | .main-content h1 { 75 | font-size: 60px; 76 | letter-spacing: 1px; 77 | color: #494234; 78 | } 79 | .main-content p{ 80 | margin-top: 10px; 81 | font-size: 15px; 82 | letter-spacing: 1px; 83 | } 84 | .main-content button{ 85 | margin-top: 2.5rem; 86 | outline: none; 87 | border: none; 88 | font-size: 18px; 89 | padding: 0.5rem 2.5rem 0.5rem 1rem; 90 | border-radius: 0 50% 50% 0; 91 | background-color: #494234; 92 | color: white; 93 | cursor: pointer; 94 | } 95 | .swiper{ 96 | width: 20rem; 97 | } 98 | .swiper-slide{ 99 | display: flex; 100 | align-items: center; 101 | justify-content: center; 102 | } 103 | .right{ 104 | position: absolute; 105 | right: 8%; 106 | bottom: 20%; 107 | } 108 | .box{ 109 | display: flex; 110 | align-items: center; 111 | } 112 | .right .box .image img{ 113 | width: 70%; 114 | } 115 | .image{ 116 | margin-top: 2rem; 117 | width: 80px; 118 | height: 80px; 119 | border-radius: 50%; 120 | box-shadow: -5px 5px 17px rgba(0,0,0,0.3); 121 | display: flex; 122 | align-items: center; 123 | justify-content: center; 124 | transition: 0.5s; 125 | } 126 | .image:hover{ 127 | background-color: rgba(73,66,52,0.7); 128 | } 129 | .box .inner-box{ 130 | margin: 1.5rem 0 0 1rem; 131 | } 132 | .box .inner-box p{ 133 | font-size: 14px; 134 | font-weight: 500; 135 | } 136 | .social-links{ 137 | position: absolute; 138 | right: 5%; 139 | bottom: 5%; 140 | } 141 | .social-links::before{ 142 | content: ""; 143 | width: 80%; 144 | height: 3px; 145 | position: absolute; 146 | top:42%; 147 | left: -150px; 148 | background-color: #494234; 149 | } 150 | .social-links i{ 151 | margin-left: 10px; 152 | width: 35px; 153 | height: 35px; 154 | border-radius: 50%; 155 | background-color: #93C572; 156 | display: inline-flex; 157 | align-items: center; 158 | justify-content: center; 159 | transition: 0.5s; 160 | } 161 | .social-links i:hover{ 162 | transform: translateY(-5px); 163 | } 164 | -------------------------------------------------------------------------------- /venda-cursos/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5502 3 | } -------------------------------------------------------------------------------- /venda-cursos/css/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; /*quando defino 300px de largura, e 10px de padding, meu conteúdo continua com 300px. Sem o border-box, o conteúdo ficaria com 310px*/ 5 | } 6 | 7 | /**********************************/ 8 | /* 0. Variáveis 9 | /* 1. Container 10 | /* 2. Menu 11 | /* 3. Header 12 | /* 4. Quem somos 13 | /* 5. Nossos cursos 14 | /* 6. Planos 15 | /* 7. Vantagens 16 | /* 8. Newsletter 17 | /* 9. Footer 18 | /**********************************/ 19 | 20 | /**********************************/ 21 | /* 0. Variáveis 22 | /**********************************/ 23 | :root{ 24 | --ff-primary: "Nunito", Helvetica, Arial, sans-serif; 25 | 26 | --clr-green-dark: #049a40; 27 | --clr-green-light: #08f96a; 28 | --clr-pink-dark: #e600ff; 29 | --clr-pink-light: #f3a0fd; 30 | --clr-white: #F5F5F5; 31 | } 32 | /**********************************/ 33 | /* 1. Estilos gerais 34 | /**********************************/ 35 | html{ 36 | scroll-behavior: smooth; /*ao clicar em um link, esse é direcionado para seção suavemente*/ 37 | } 38 | 39 | body{ 40 | background-color: var(--clr-white); 41 | font-family: var(--ff-primary); 42 | } 43 | 44 | a, 45 | a:hover, 46 | a:active, 47 | a:link, 48 | a:visited{ 49 | text-decoration: none; 50 | color: black; 51 | } 52 | 53 | hr{ 54 | border: none; 55 | background-color: var(--clr-pink-dark); 56 | height: 2px; 57 | width: 140px; 58 | margin: 20px auto; 59 | } 60 | p{ 61 | line-height: 21.82px; /*espaçamento entre linhas*/ 62 | padding: 0 10px; 63 | } 64 | 65 | .section__titulo{ 66 | text-align: center; 67 | font-size: 3rem; 68 | margin-bottom: 10px; 69 | } 70 | 71 | img{ /*imagem responsiva*/ 72 | display: block; 73 | max-width: 100%; 74 | } 75 | /**********************************/ 76 | /* 2. Menu 77 | /**********************************/ 78 | 79 | .menu-bg{ 80 | background-color: var(--clr-green-light); 81 | } 82 | 83 | .menu{ 84 | display: flex; 85 | align-items: center; 86 | justify-content: space-between; 87 | max-width: 960px; 88 | margin: 0 auto; /*se eu tiver em uma tela de 1000px, sobra 40px, pra isso não ocorrer, eu uso 0 auto, e ele pega os 40px, divide por 2 e fica bonitinho*/ 89 | flex-wrap: wrap; /*quebra do menu*/ 90 | padding-bottom: 5px; 91 | } 92 | 93 | .menu__logo{ 94 | margin: 10px; 95 | } 96 | 97 | .nav__list{ 98 | display: flex; 99 | flex-wrap: wrap; /*quebra do menu em várias linhas*/ 100 | } 101 | 102 | .nav__link{ 103 | padding: 20px 10px; /*20px superior, inferior; 10px a direita e esquerda*/ 104 | } 105 | 106 | /**********************************/ 107 | /* 3. Header 108 | /**********************************/ 109 | .intro{ 110 | font-weight: bold; 111 | font-size: 3em; 112 | text-align: center; 113 | margin: 0 auto; 114 | padding: 25px 0px; 115 | } 116 | /**********************************/ 117 | /* 4. Quem somos 118 | /**********************************/ 119 | .somos{ 120 | max-width: 960px; 121 | margin: 0 auto; 122 | } 123 | 124 | .somos-c{ 125 | display: flex; 126 | flex-wrap: wrap; 127 | align-items: center; 128 | } 129 | 130 | .somos-c__texto{ 131 | flex-grow: 6; /*vai ocupar um espaço 6x maior, ou ocupa um espaço de 6 colunas*/ 132 | flex-shrink: 1; /*permite que o item reduza o tamanho para caber no container*/ 133 | flex-basis: 160px; /*tamanho inicial é 160px*/ 134 | } 135 | .somos-c__img{ 136 | flex-grow: 1; 137 | flex-shrink: 1; 138 | flex-basis: 360px; 139 | } 140 | /**********************************/ 141 | /* 5. Nossos cursos 142 | /**********************************/ 143 | .cursos{ 144 | max-width: 960px; 145 | margin: 0 auto; 146 | } 147 | 148 | .cursos-c{ 149 | display: flex; 150 | flex-wrap: wrap; 151 | justify-content: center; 152 | } 153 | .curso{ 154 | width: 280px; /*para ficar lado a lado*/ 155 | margin: 0px 20px; 156 | } 157 | .curso__titulo{ 158 | font-size: 1.5rem; 159 | text-align: center; 160 | margin: 10px 0px 5px 0px; 161 | } 162 | /**********************************/ 163 | /* 6. Planos 164 | /**********************************/ 165 | .planos{ 166 | background-color: var(--clr-pink-light); 167 | 168 | } 169 | 170 | .planos-c{ 171 | max-width: 960px; 172 | margin: 0 auto; 173 | display: flex; 174 | flex-wrap: wrap; 175 | justify-content: center; 176 | align-items: flex-end; /*do menor pro maior*/ 177 | } 178 | 179 | .plano{ 180 | width: 290px; 181 | margin: 10px; 182 | border: 2px solid var(--clr-green-dark); 183 | } 184 | 185 | .plano__titulo{ 186 | font-size: 3rem; 187 | text-align: center; 188 | margin: 10px auto; 189 | font-weight: bold; 190 | 191 | } 192 | 193 | .plano__preco{ 194 | font-size: 3rem; 195 | display: block; 196 | text-align: center; 197 | font-weight: bold; 198 | } 199 | 200 | .plano__preco sup{ 201 | position: relative; /*para mudar a posição*/ 202 | font-size: 1.5rem; 203 | top: -20px; 204 | } 205 | 206 | .plano__divisor{ 207 | background-color: var(--clr-green-dark); 208 | width: 20px; 209 | margin: 5px auto; 210 | } 211 | 212 | .plano-lista{ 213 | max-width: 195px; 214 | margin: 0 auto; 215 | } 216 | 217 | .plano-lista__item{ 218 | margin: 10px 0; 219 | font-style: italic; 220 | display: flex; /*para posicionar bolinha*/ 221 | align-items: center; 222 | } 223 | 224 | .plano-lista__item::before{ 225 | content: ""; 226 | display: block; 227 | width: 5px; 228 | height: 5px; 229 | background-color: var(--clr-green-dark); 230 | border-radius: 5px; 231 | margin-right: 5px; 232 | } 233 | 234 | .plano__btn-comprar{ 235 | display: block; 236 | max-width: 180px; 237 | font-size: 2rem; 238 | font-weight: bold; 239 | margin: 15px auto; 240 | padding: 10px; 241 | text-align: center; 242 | text-transform: uppercase; /*texto em maiusculo*/ 243 | border: 2px solid var(--clr-green-dark) 244 | } 245 | 246 | .plano:last-child{ /*to selecionando o ultimo filho de plano*/ 247 | background-color: var(--clr-green-light); 248 | } 249 | 250 | .plano:last-child, .plano:last-child .plano__btn-comprar{ 251 | border: 2px solid var(--clr-pink-dark); 252 | } 253 | 254 | .plano:last-child .plano-lista__item::before, .plano:last-child .plano__divisor{ 255 | background-color: var(--clr-pink-dark); 256 | } 257 | 258 | @media(max-width: 800px){ /*a ordem padrão era 0 - básico; 1 - premium; 2 - ultra, mas eu modifiquei abaixo em telas menores de 800px*/ 259 | .plano:nth-child(3){ 260 | order: -2; 261 | } /*o terceiro filho de plano tem a ordem -2**/ 262 | .plano:nth-child(2){ 263 | order: -1; 264 | } /*o segundo filho de plano tem a ordem -1**/ 265 | } 266 | 267 | /**********************************/ 268 | /* 7. Vantagens 269 | /**********************************/ 270 | .vantagens-c{ 271 | max-width: 960px; 272 | margin: 0 auto; 273 | display: flex; 274 | flex-wrap: wrap; 275 | justify-content: space-between; 276 | } 277 | .vantagem{ 278 | max-width: 240px; 279 | margin: 10px; 280 | } 281 | 282 | .vantagem__titulo{ 283 | font-size: 1.7rem; 284 | margin-bottom: 5px; 285 | margin-left: 10px; 286 | } 287 | 288 | .vantagem__titulo::before{ 289 | content: ""; 290 | display: inline-block; 291 | width: 10px; 292 | height: 25px; 293 | margin-right: 5px; 294 | } 295 | 296 | .vantagem:nth-of-type(3n+1) .vantagem__titulo::before{ /*de inicio, n vale 0, fazendo o calculo, ele vai pegar o primeiro elemento, depois, n vale 1, e 3*1+1=4, e ele pega o quarto elemento*/ 297 | background-color: var(--clr-green-light); 298 | } 299 | .vantagem:nth-of-type(3n+2) .vantagem__titulo::before{ 300 | background-color: var(--clr-pink-dark); 301 | } 302 | .vantagem:nth-of-type(3n+3) .vantagem__titulo::before{ 303 | background-color: var(--clr-green-dark); 304 | } 305 | 306 | @media(max-width: 800px){ 307 | .vantagem{ 308 | max-width: 220px; /*para ter duas colunas em tela menores de 800px*/ 309 | } 310 | } 311 | 312 | /**********************************/ 313 | /* 8. Newsletter 314 | /**********************************/ 315 | .newsletter{ 316 | background-color: var(--clr-green-dark); 317 | padding: 50px; 318 | } 319 | .newsletter-c{ 320 | max-width: 960px; 321 | margin: 0 auto; 322 | display: flex; 323 | flex-wrap: wrap; 324 | 325 | } 326 | .newsletter-info{ 327 | flex-grow: 1; 328 | flex-shrink: 1; 329 | flex-basis: 260px; 330 | padding-left: 10px; 331 | } 332 | .newsletter-info__titulo{ 333 | font-size: 2.62rem; 334 | font-weight: bold; 335 | } 336 | .newsletter-info__descricao{ 337 | font-style: italic; 338 | } 339 | .newsletter-form{ 340 | flex-grow: 2; 341 | flex-shrink: 1; 342 | flex-basis: 260px; 343 | display: flex; 344 | flex-wrap: wrap; 345 | } 346 | .newsletter-form__input{ 347 | flex-grow: 3; /*input tenha 3x o tamanho do botão*/ 348 | flex-shrink: 1; 349 | flex-basis: 260px; 350 | font-size: 1.25rem; 351 | width: 325px; 352 | color: black; 353 | font-style: italic; 354 | font-family: var(--ff-primary); 355 | border: 10px solid var(--clr-pink-dark); 356 | padding: 10px; 357 | margin: 0; 358 | border-radius: 0px; 359 | } 360 | 361 | .newsletter-form__submit{ 362 | flex-grow: 1; 363 | flex-shrink: 1; 364 | flex-basis: 260px; 365 | width: 192px; 366 | font-family: var(--ff-primary); 367 | font-size: 2.25rem; 368 | font-weight: bold; 369 | text-transform: uppercase; 370 | background-color: var(--clr-pink-dark); 371 | color: black; 372 | cursor: pointer; /*mudei o cursor ao passar em cima do botão*/ 373 | border: none; 374 | padding: 15px; 375 | } 376 | 377 | /**********************************/ 378 | /* 9. Footer 379 | /**********************************/ 380 | .footer{ 381 | background-color: var(--clr-pink-light); 382 | display: flex; 383 | flex-wrap: wrap; 384 | justify-content: space-between; 385 | padding: 55px calc((100% - 960px)/2); 386 | } 387 | 388 | .footer__copyright, .footer__logo{ 389 | padding-left: 10px; 390 | padding-right: 10px; 391 | } 392 | 393 | @media(max-width: 375px){ 394 | .newsletter-form__input{ 395 | width: 220px; 396 | } 397 | 398 | } 399 | -------------------------------------------------------------------------------- /venda-cursos/img/ai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/venda-cursos/img/ai.png -------------------------------------------------------------------------------- /venda-cursos/img/front.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/venda-cursos/img/front.png -------------------------------------------------------------------------------- /venda-cursos/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/venda-cursos/img/logo.png -------------------------------------------------------------------------------- /venda-cursos/img/seguranca.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/venda-cursos/img/seguranca.png -------------------------------------------------------------------------------- /venda-cursos/img/somos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/venda-cursos/img/somos.png -------------------------------------------------------------------------------- /venda-cursos/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Frontbox 7 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 32 | 33 |

Aprenda a programar,
um projeto por vez!

34 |

35 | 36 |

37 | 38 |

39 |

Quem Somos?

40 |

41 |

42 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum repellat tempore nostrum obcaecati. Hic ipsa dolorum corrupti pariatur, corporis earum, minus eos laborum dolore, suscipit reiciendis dolor omnis repellendus officiis.

43 |
44 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit culpa commodi, perferendis magnam molestias laudantium amet, facilis voluptas ab, deleniti a. Asperiores accusantium itaque tempore numquam est dolore debitis cumque!

45 |

46 | 47 |

48 |

49 |

50 |

51 |

52 |

53 |

54 |

Nossos Cursos

55 |

56 |

57 |

58 |

Inteligência Artificial

59 |

60 | Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. 61 | Aenean 62 | sit amet nisi.

63 |

64 |

65 |

66 |

Frontend

67 |

68 | Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. 69 | Aenean 70 | sit amet nisi. 71 |

72 |

73 |

74 |

75 |

Segurança da Informação

76 |

77 | Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. 78 | Aenean 79 | sit amet nisi. 80 |

81 |

82 |

83 |

84 |

85 |

86 |

Planos

87 |

88 |

89 |

Básico

90 | ^R$25 91 |

92 |

1 mês de acesso ilimitado
Acesso a todos os cursos
Certificado de conclusão

97 | Comprar 98 |

99 | 100 |

101 |

Premium

102 | ^R$40 103 |

104 |

1 mês de acesso ilimitado
Acesso a todos os cursos
Certificado de conclusão
Suporte

110 | Comprar 111 |

112 | 113 |

114 |

Ultra

115 | ^R$25 116 |

117 |

1 mês de acesso ilimitado
Acesso a todos os cursos
Certificado de conclusão
Suporte
Download das aulas

124 | Comprar 125 |

126 |

127 |

128 |

129 |

130 |

131 |

132 |

Foco em projeto

133 |

Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl 134 | ut ante blandit hendrerit. Aenean sit 135 | amet nisi.

136 |

137 | 138 |

139 |

Portfólio incrível

140 |

Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl 141 | ut 142 | ante blandit hendrerit. Aenean sit 143 | amet nisi.

144 |

145 | 146 |

147 |

Aprenda fazendo

148 |

Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl 149 | ut 150 | ante blandit hendrerit. Aenean sit 151 | amet nisi.

152 |

153 | 154 |

155 |

Para todas as idades

156 |

Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl 157 | ut 158 | ante blandit hendrerit. Aenean sit 159 | amet nisi.

160 |

161 | 162 |

163 |

Atualizado

164 |

Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl 165 | ut 166 | ante blandit hendrerit. Aenean sit 167 | amet nisi.

168 |

169 | 170 |

171 |

Comece hoje

172 |

Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl 173 | ut 174 | ante blandit hendrerit. Aenean sit 175 | amet nisi.

176 |

177 |

178 |

179 |

180 | 192 | 198 | 199 | 200 | 203 | 204 | -------------------------------------------------------------------------------- /venda-cursos/layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/driica/html-css-js/ef4a4df3f95dfbf7b2744a97123b4badc86221fc/venda-cursos/layout.png -------------------------------------------------------------------------------- /venda-cursos/textos.html: -------------------------------------------------------------------------------- 1 | 4 |

5 | Mussum Ipsum, cacilds vidis litro abertis. Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu 6 | levo! 7 | Atirei o pau no gatis, per gatis num morreus. Mais vale um bebadis conhecidiss, que um alcoolatra anonimis. Cevadis 8 | im 9 | ampola pa arma uma pindureta. 10 |

11 |
12 |

13 | Copo furadis é disculpa de bebadis, arcu quam euismod magna. Praesent vel viverra nisi. Mauris aliquet nunc non 14 | turpis 15 | scelerisque, eget. Interagi no mé, cursus quis, vehicula ac nisi. Suco de cevadiss, é um leite divinis, qui tem 16 | lupuliz, 17 | matis, aguis e fermentis. 18 |

19 | 20 | 23 | 24 |

25 |

26 |

Inteligencia Artificial

27 |

28 | Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. 29 | Aenean 30 | sit amet nisi. 31 |

32 |

33 |

34 |

35 |

Frontend

36 |

37 | Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. 38 | Aenean 39 | sit amet nisi. 40 |

41 |

42 |

43 |

44 |

Segurança da Informação

45 |

46 | Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. 47 | Aenean 48 | sit amet nisi. 49 |

50 |

51 | 52 | 55 | 56 |

57 |

Básico

58 | ^R$25 59 |

60 |

1 mês de acesso ilimitado
Acesso a todos os cursos
Certificado de conclusão

65 | Comprar 66 |

67 | 68 |

69 |

Premium

70 | ^R$40 71 |

72 |

1 mês de acesso ilimitado
Acesso a todos os cursos
Certificado de conclusão
Suporte

78 | Comprar 79 |

80 | 81 |

82 |

Ultra

83 | ^R$25 84 |

85 |

1 mês de acesso ilimitado
Acesso a todos os cursos
Certificado de conclusão
Suporte
Download das aulas

92 | Comprar 93 |

94 | 95 | 98 | 99 |

100 |

Foco em projeto

101 |

Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl 102 | ut ante blandit hendrerit. Aenean sit 103 | amet nisi.

104 |

105 | 106 |

107 |

Portfólio incrível

108 |

Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl 109 | ut 110 | ante blandit hendrerit. Aenean sit 111 | amet nisi.

112 |

113 | 114 |

115 |

Aprenda fazendo

116 |

Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl 117 | ut 118 | ante blandit hendrerit. Aenean sit 119 | amet nisi.

120 |

121 | 122 |

123 |

Para todas as idades

124 |

Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl 125 | ut 126 | ante blandit hendrerit. Aenean sit 127 | amet nisi.

128 |

129 | 130 |

131 |

Atualizado

132 |

Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl 133 | ut 134 | ante blandit hendrerit. Aenean sit 135 | amet nisi.

136 |

137 | 138 |

139 |

Comece hoje

140 |

Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl 141 | ut 142 | ante blandit hendrerit. Aenean sit 143 | amet nisi.

144 |

145 | 146 | --------------------------------------------------------------------------------

Nós Cuidamos do seu animal de estimação!

Compre Por Categoria

Comida Para Cães

Comida Para Gatos

Comida Para Coelhos

Comida Para Pássaros

Nossos Produtos Em Destaque

Comida Saborosa Para Animais De Estimação.

Comida Saborosa Para Animais De Estimação.

Comida saborosa e saudável para o seu animal de estimação!

Nossos Produtos Mais Recentes

Alimentos Saudáveis ​​Para Animais De Estimação.

Alimentos Saudáveis ​​Para Animais De Estimação.

Alimentos Saudáveis ​​Para Animais De Estimação.

Alimentos Saudáveis ​​Para Animais De Estimação.

Alimentos Saudáveis ​​Para Animais De Estimação.

Alimentos Saudáveis ​​Para Animais De Estimação

Nossa Última Oferta

Até 40% De Desconto

Até 80% De Desconto

Contato

Criado por Adriana Beatriz | Todos os direitos reservados!

Escolha suas cores

O QUE NÓS FAZEMOS?

Ajudamos as empresas a escalar

Nossos serviços

Custom Colorways

Are you Ready?

Full Gradients

Infinite Choices

JUNTE-SE A NOSSA EQUIPE

Inscreva-se hoje

Sobre nós

Contate-nos

Vídeos

Mídia social

Melhor Papelaria

Sobre nós

Por Que Nós?

Entrega Grátis

10 Dias De Devolução

Oferta E Presentes

Pagamentos Seguros

Produtos Mais Recentes

Caneta

Caneta

Caneta

Estojo

Estojo

Estojo

Planner

Planner

Planner

Post-it

Post-it

Post-it

Opiniões Dos Cliente

john deo

john deo

john deo

Contato

Links Rápidos

Links Extras

Localizações

Informações De Contato

The Pistachios

100% Organic

Not Expensive

Super Healthy

Quem Somos?

Nossos Cursos

Inteligência Artificial

Frontend

Segurança da Informação

Planos

Básico

Premium

Ultra

Foco em projeto

Portfólio incrível

Nós Cuidamos
do seu animal de estimação!

Alimentos Saudáveis Para Animais De Estimação.

Alimentos Saudáveis Para Animais De Estimação.

Alimentos Saudáveis Para Animais De Estimação.

Alimentos Saudáveis Para Animais De Estimação.

Alimentos Saudáveis Para Animais De Estimação.

Alimentos Saudáveis Para Animais De Estimação