├── README.md ├── SECURITY.md └── desafios ├── Day05revisao1- ├── assets │ ├── estilos.css │ ├── login-desafio │ │ ├── assets │ │ │ ├── assets │ │ │ │ ├── css │ │ │ │ │ ├── bootstrap-theme.css │ │ │ │ │ ├── bootstrap-theme.css.map │ │ │ │ │ ├── bootstrap-theme.min.css │ │ │ │ │ ├── bootstrap-theme.min.css.map │ │ │ │ │ ├── bootstrap.css │ │ │ │ │ ├── bootstrap.css.map │ │ │ │ │ ├── bootstrap.min.css │ │ │ │ │ └── bootstrap.min.css.map │ │ │ │ ├── fonts │ │ │ │ │ ├── glyphicons-halflings-regular.eot │ │ │ │ │ ├── glyphicons-halflings-regular.svg │ │ │ │ │ ├── glyphicons-halflings-regular.ttf │ │ │ │ │ ├── glyphicons-halflings-regular.woff │ │ │ │ │ └── glyphicons-halflings-regular.woff2 │ │ │ │ └── js │ │ │ │ │ ├── bootstrap.js │ │ │ │ │ ├── bootstrap.min.js │ │ │ │ │ └── npm.js │ │ │ └── css │ │ │ │ └── stylo.css │ │ └── faleconosco.html │ ├── normalize.css │ └── reset.css ├── img │ ├── math-92382.jpeg │ └── math-982822.png └── index.html ├── Day10-15-grid-day └── grid.html ├── Day12-14-pizzaria ├── image │ ├── 0751.jpg │ ├── 10off-orderonline.png │ ├── 41-412661_clip-art-logo-youtube-branco-png-icon-youtube.png │ ├── 44.jpg │ ├── 70ed18.jpg │ ├── Pizza_Logo.png │ ├── cofee.jpg │ ├── copyspace_23-2148202500.jpg │ ├── e-fundo-preto_23-2148308883.jpg │ ├── images1.jpg │ ├── insitu_m.jpg │ ├── instagram-logo-on.png │ ├── mv2.png │ ├── photo-15.jpg │ ├── seach.jpg │ ├── slide1.webp │ ├── slide2.jpg │ ├── slide3.jpg │ ├── transparent.png │ ├── twitter_circle-512.webp │ └── unnamed.jpg ├── index.html └── style.css ├── Day16-20-animacao ├── README.md ├── img │ ├── 4.png │ ├── background.png │ ├── bubble.png │ ├── ig.png │ ├── info.png │ ├── layout.png │ ├── logo.png │ ├── menu.png │ ├── share.png │ └── tw.png ├── index.html └── style.css ├── Day21-10-nlw ├── README.md ├── github │ ├── layout.png │ └── logo2.0.svg ├── package.json ├── public │ ├── images │ │ ├── favicon.png │ │ ├── icons │ │ │ ├── back.svg │ │ │ ├── give-classes.svg │ │ │ ├── purple-heart.svg │ │ │ ├── rocket.svg │ │ │ ├── smile.svg │ │ │ ├── study.svg │ │ │ ├── success-check-icon.svg │ │ │ ├── warning.svg │ │ │ └── whatsapp.svg │ │ ├── landing.svg │ │ ├── layout.png │ │ ├── logo.svg │ │ ├── logo2.0.svg │ │ └── success-background.svg │ ├── scripts │ │ ├── addFiel.js │ │ └── addField.js │ ├── style │ │ ├── main.css │ │ └── partials │ │ │ ├── forms.css │ │ │ ├── header.css │ │ │ ├── page-give-classes.css │ │ │ ├── page-landing.css │ │ │ └── page-study.css │ └── styles │ │ ├── main.css │ │ └── partials │ │ ├── forms.css │ │ ├── header.css │ │ ├── page-give-classes.css │ │ ├── page-landing.css │ │ └── page-study.css └── src │ ├── database │ ├── createProffy.js │ ├── database.sqlite │ ├── db.js │ ├── fake_data.js │ └── teste.js │ ├── pages.js │ ├── server.js │ ├── utils │ └── format.js │ └── views │ ├── give-classes.html │ ├── index.html │ └── study.html ├── Day22-27-icones ├── index.html └── style.css ├── Day28icon-midia- ├── index.html └── style.css ├── Day29-32-urban-fashion ├── .vscode │ └── launch.json ├── img │ ├── back-arrow.png │ ├── background.png │ ├── cart.png │ ├── img.png │ ├── logo.png │ └── next-arrow.png ├── index.html └── style.css ├── Day35-40-gym_flash_video ├── gb.mp4 ├── img │ ├── close.png │ ├── facebook.png │ ├── instagram.png │ ├── menu.png │ └── twitter.png ├── index.html └── style.css ├── Day55-88-Amazon-Prime ├── index.html ├── script.js └── style.css ├── day03table ├── table.css └── table.html ├── day100 ├── assets │ ├── Img_02.png │ ├── Img_05.png │ ├── Img_06.png │ └── Img_1.png ├── halloween.svg ├── index.html └── style.css ├── day36 ├── index.html └── style.css ├── day38 ├── index.html └── style.css └── day89-92-menu ├── menu.css └── menu.html /README.md: -------------------------------------------------------------------------------- 1 |

2 | ⚡ #100DaysOfCode 3 |

4 | 5 | ## Objetivos do desafio: 6 | - Programar no mínimo uma hora todos os dias durante os próximos 100 dias, assim criando uma rotina de estudos, melhorar meu nível de habilidade no FrontEnd! Escolhi algumas técnologias para estudar durante o desafio, está logo abaixo!!! 7 | 8 | - Contéudos diarios:
9 | instagram jully Jullyana 10 | 11 | - Contato: **juselania2019@outlook.com**
12 | - Inicio da maratona 13 de julho de 2020
13 | 14 | 15 | ## Lógica de Programação com JavaScript logica de programacao
16 | - [x] Conceitos básicos de programação 17 | - [x] Algorítmos 18 | - [x] Essencial de lógica matemática para computação 19 | - [x] HTML5 e JavaScript 20 | - [x] Introdução ao JavaScript 21 | - [x] Variáveis, dados e tipos de dados 22 | - [x] Ordem de Precedência 23 | - [x] Armazenar Dados na variável 24 | - [x] Operações aritméticas 25 | - [x] Laços de repetição 26 | - [x] Vetores 27 | - [x] Funções 28 | 29 | ## Git e GitHub github 30 | 31 | - [x] Entendendo Git e GitHub 32 | - [x] Configuração 33 | - [x] Essencial do Git 34 | - [x] Repositórios Remotos 35 | - [x] Comitar arquivo/diretório 36 | - [x] Ramificações (Branch) 37 | - [x] Movendo e deletando branches 38 | - [x] Entendendo o Merge 39 | - [x] Clone 40 | - [x] Conceitos sobre README 41 | - [x] Criando gif no README 42 | - [x] Demo README 43 | - [x] Merge e Rebase 44 | - [x] Versionando com Tags 45 | - [x] Git Revert 46 | - [x] Branches remotas 47 | 48 | ## HTML5 html5
49 | 50 | - [x] Elementos essenciais 51 | - [x] Elementos técnicos 52 | - [x] Grid layout 53 | - [x] Estruturas 54 | - [x] Listas 55 | - [x] Ligações 56 | - [x] Tabelas 57 | - [x] Formulários 58 | - [x] Estrutura dos formulários 59 | - [x] Validação de formulátio 60 | - [x] Seletores de classes e IDs no HTML 61 | - [x] Iframe 62 | - [x] Caracteres de escape 63 | - [x] Flash, Vídeo e áudio 64 | - [x] Combinando flash e vídeo 65 | - [x] Flash leitor de mp3 66 | - [x] Semântica 67 | - [x] Layout 68 | - [x] Designer 69 | - [x] Agrupamento e semelhança 70 | - [x] SEO 71 | 72 | ## CSS3
73 | 74 | - [x] Caixas 75 | - [x] Seletores 76 | - [x] Cores 77 | - [x] Fontes 78 | - [x] Boxes 79 | - [x] Formas 80 | - [x] Nav Bar 81 | - [x] Trançado 82 | - [x] Resposividade 83 | - [x] Imagens 84 | - [x] CSS Grid 85 | - [x] Flex box 86 | - [x] Animações 87 | 88 | ## JavaScript
89 | 90 | - [x] Script 91 | - [x] Objeto e Propriedades 92 | - [x] Eventos 93 | - [x] Métodos 94 | - [x] Vinculução de arquivo JavaScript a uma página HTML 95 | - [x] Variável 96 | - [x] Tipos de Dados 97 | - [x] Arrays 98 | - [x] Operadores aritméticos e string 99 | - [x] Função 100 | - [x] Função Anônima 101 | - [x] Escopo de variáveis 102 | - [x] Objeto 103 | - [x] Decisões de Loops 104 | - [x] Operadores lógicos 105 | - [x] Instruções IF 106 | - [x] For 107 | - [x] Loops while 108 | - [x] Document Object Model (DOM) 109 | - [x] Elementos 110 | - [x] Nodelists 111 | - [x] Elemtos com Seletores CSS 112 | - [x] Nós 113 | - [x] Manipulação do DOM 114 | - [x] Eventos 115 | - [x] Ouvintes de evento 116 | - [x] fluxo de evento 117 | - [x] Objeto event 118 | - [x] Load 119 | - [x] Eventos focus e blur 120 | - [x] Eventos de mouse 121 | - [x] Ajax e Json 122 | - [x] Google maps API 123 | - [x] Tratamento & depuração de erros 124 | - [x] Fluxo de trabalho de depuração 125 | - [x] Try, catch, finally 126 | - [x] Formulários e validações 127 | 128 | ## Conceitos Básicos a Banco de Dados postgresql
129 | 130 | - [x] Introdução a Banco de Dados 131 | - [x] Banco de dados não relacional 132 | - [x] Express 133 | 134 | ## Design
135 | 136 | - [x] Figma 137 | 138 |

139 | 🚀 Mão no Código 140 |

141 | 142 | |Dia|Estudos|Tempo| 143 | | -------- | ----------------- | -------- | 144 | |1|Entendendo Git e GitHub / Configuração do github | 06:20 horas | 145 | |2|Conceitos Básicos da programação / Algoritmos |06:15 horas| 146 | |3|Essencial de lógica matemática para computação|03:00 horas| 147 | |4|Interagindo com HTML5 e JavaScript (lógica de programação)|04:08 horas| 148 | |5|Criando um repositório remoto | 01:00 hora| 149 | |6|CONT...Interagindo com HTML5 e JavaScript (lógica de programação)|04:20 horas| 150 | |7|Introdução ao JavaScript (lógica) | 02:10 horas| 151 | |8|Criando o primeiro projeto com JavaScript e HTML5 (Lógica p. "Exercícios") |03:15 horas| 152 | |9|Conhecendo elementos esseciais HTML5/ Textos CSS3 |04:12 02:16 horas| 153 | |10|Variáveis, dados e tipos de dados/Elementos técnicos do HTML5 / Entendendo Grid | 01:20 / 01:12 horas/ 00:51 minutos | 154 | |11|DevSecOps, LGPD e privacidade (Dev Submmit) |01:00 Hora| 155 | |12|Grid CSS| 03:22 horas| 156 | |13|Execícios usando grid-css| 03:00 horas | 157 | |14|Entendendo estrutura do HTML5/ Listas | 02:34 Horas 158 | |15|Exercírcios (Grid-CSS3) / Cores CSS / Tabelas HTML5 |00:30m/00:45m/00:33m | 159 | |16|Aprendendo a Comitar arquivos (GitHub) / Paticando Tabelas HTML e CSS / Palestra sobre Desenvolvimento Web (Porto Digital)| 01:00 / 01:20 / 03:00 Horas | 160 | |17|Resvisão|00:40 minutos| 161 | |18|Resvisão|00:40 minutos| 162 | |19|Criação de animações usando HTMl e CSS |01:40 hora| 163 | |20|Exercícios (HTML/CSS - NLW2)|01:45 hora| 164 | |21|Exercícios (HTML/CSS - NLW2)|01:55 hora| 165 | |22|Exercícios (HTML/CSS - NLW2)|02:48 horas| 166 | |23|Exercícios HTML/CSS - NLW2) |03:00 horas| 167 | |24|Exercícios (HTML/CSS - NLW2)|04:30 horas| 168 | |25|Exercícios (HTML & CSS)|08:00 horas| 169 | |26|Exercícios (lógica de programação)|05:10 horas| 170 | |27|revisão (lógica de programação e HTML/CSS) |00: 40 minutos| 171 | |28|Desafio animação (Html & Css)| 02:42 horas| 172 | |29|Desafio icones (Html & Css)|02:20 horas| 173 | |30|Desafio urban-fashion (Html & Css)|03:20 horas| 174 | | 31 |Entendendo Listas na pratica HTML | 02:45 horas | 175 | | 32 | Entendendo Listas na pratica HTML | 01:50 hora | 176 | | 33 | Exercícios Listas com CSS | 03:00 horas | 177 | | 34 | Tipos de dados (lógica de programação) | 01:00 hora | 178 | | 35 | Desafio listas e efeitos (HTML/CSS)| 00:40m | 179 | | 36 | Ordem de Precendências com operadores lógicos / Animações com CSS3 | 02:00 / 00:40m | 180 | | 37 | Armazenamento de dados dentro da variável (lógica)/ Exercícios (Lógica de P. + Html e Css/ | 01:40 / 02:30 Horas | 181 | | 38 | Animações HTML5/CSS3| 00:42m | 182 | | 39 | Efeitos CSS3 | 00:35 / | 183 | | 40 | Revisão (desafio Pizzaria)| 02:00 horas | 184 | | 41 | Aniações CSS| 01:00 hora | 185 | | 42 | Animações CSS (Icones)| 01:00 hora | 186 | | 43 | Desafio HTML5 e CSS3 | 01:00 hora | 187 | | 44 | Desafio Logica de Programação| 01:00 hora | 188 | | 45 | Revisão HTML5 (Listas)| 01:20 hora | 189 | | 46 | Revisão CSS3 (Estilizações e Animações) | 01:00 hora| 190 | | 47 | Desafio (HTML E CSS) - Urban-Fashion | 00:40m | 191 | | 48 | Designer de imagens (HTML & CSS)|00:40m | 192 | | 49 | Estilos de bordas e formas elípticas (HTML & CSS)|00:40m | 193 | | 50 | Entrada de estilos + Criação de Layout| 02:30 67"horas | 194 | | 51 | ABC da programação (JavaScript) | 03:40 horas | 195 | | 52 | Listas, responsividade, video e imagens| 01:00hr| 196 | | 53 | Exercírcio (GYM - WebSite) | 01:20hr | 197 | | 54 | Revisão (Ordem de Precedência - Lógica de Programação)| 01:00hr | 198 | | 55 | Entendendo Flex-box + WebSite (Flexbox) | ... | 199 | | 56 | ABC da programação e entendendo scripts (JavaScript)| 01:20hr | 200 | | 57 | Revisão HTML e CSS (Formulário/listas/cores/resposividades)|02:30| 201 | | 58 | Teste HTML e CSS (Revisando animações/ flex-box/ responsívidade) | 00:40m | 202 | | 59 | Revisão (Listas/formulários / flex-box) | 01:00hr | 203 | | 60 | Exercícios de lógica de programação com loops| 00:50m | 204 | | 61 | Objeto e Propriedades (JavaScript) | 00:40m | 205 | | 62 | Eventos (JavaScript)|01:00hr | 206 | | 63 | Métodos | 01:00hr | 207 | | 64 | Vinculução de arquivo JavaScript a uma página HTML | 01:00hr | 208 | | 65 | Variável e tipos de dados (JavaScript)| 01:20 hr | 209 | | 66 | Arrays | 03:10 hr | 210 | | 67 | Operadores aritméticos e string / Função / Função Anônima | 02:30hr | 211 | | 68 | Escopo de variáveis| 01:00hr | 212 | | 69 | Objeto | 01:00hr | 213 | | 70 | Objeto | 01:10hr | git init 214 | | 71 | Flash, Vídeo e áudio e Decisões de loop | 02:00hrs | 215 | | 72 | Figma | 03:30hrs | 216 | | 73 | Operadores lógicos/ Instruções IF | 00:50m | 217 | | 74 | For / Loops While| 00:52m | 218 | | 75 | DOM | 01:00hr | 219 | | 76 | DOM | 03:00hr | 220 | | 77 | Elementos | 01:00hr | 221 | | 78 | Nodelists | 00:40hr | 222 | | 79 | Combinando flash e vídeo/ Combinando flash e vídeo | 00:52hr | 223 | | 80 | Elemtos com Seletores CSS / Nós | 01:40hr | 224 | | 81 | Manipulação do DOM | 00:55m | 225 | | 82 | Google maps API | 01:00hr | 226 | | 83 | Eventos / Ouvintes de evento| 03:50hrs | 227 | | 84 | Objeto event / Load | 03:00hrs | 228 | | 85 | Eventos focus e blur | 02:10hr | 229 | | 86 | Introdução a Banco de Dados | 01:30hr | 230 | | 87 | Banco de dados não relacional | 01:00hr | 231 | | 88 | Tratamento & depuração de erros | 01:20hr | 232 | | 89 | Depuração | 01:00hr | 233 | | 90 | Express | 01:00hr | 234 | | 91 | SEO | 02:40hrs | 235 | | 92 | Fluxo de trabalho de depuração | 01:30hr | 236 | | 93 | Try | 02:30hrs | 237 | | 94 | Catch | 01:20hr | 238 | | 95 | Teste try, catch | 01:30hr | 239 | | 96 | Finally | 01:00hr | 240 | | 97 | Revisão try, catch | 01:00hr | 241 | | 98 | Validação de formulários com HTML5, CSS3 e Javascript | 03:00hr | 242 | | 99 | Validação de formulários (na prática)| 03:27hr | 243 | | 100 | Animação com HTML5 e CSS3 | 01:00hr | 244 | 245 |

246 | 247 | 248 | [](https://www.linkedin.com/in/jusel%C3%A2nia-silva-56a375197/) [](https://www.instagram.com/jusydeveloper/) 249 | 250 |

251 | 252 | 253 | 254 | 255 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | Use this section to tell people about which versions of your project are 6 | currently being supported with security updates. 7 | 8 | | Version | Supported | 9 | | ------- | ------------------ | 10 | | 5.1.x | :white_check_mark: | 11 | | 5.0.x | :x: | 12 | | 4.0.x | :white_check_mark: | 13 | | < 4.0 | :x: | 14 | 15 | ## Reporting a Vulnerability 16 | 17 | Use this section to tell people how to report a vulnerability. 18 | 19 | Tell them where to go, how often they can expect to get an update on a 20 | reported vulnerability, what to expect if the vulnerability is accepted or 21 | declined, etc. 22 | -------------------------------------------------------------------------------- /desafios/Day05revisao1-/assets/estilos.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Poppins:200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i'); 2 | 3 | *{ 4 | font-family: 'Poppins'; 5 | } 6 | 7 | a{ 8 | text-decoration: none; 9 | } 10 | 11 | body{ 12 | background-color: rgb(43,43,43); 13 | } 14 | 15 | .container{ 16 | width: 100%; 17 | height: auto; 18 | float: left; 19 | display: flex; 20 | justify-content: center; 21 | } 22 | 23 | .division{ 24 | width: 80%; 25 | height: auto; 26 | margin-top: 50px; 27 | } 28 | 29 | 30 | #math-col{ 31 | width: 100%; 32 | height: auto; 33 | float: left; 34 | background-color: rgb(60,60,60); 35 | box-shadow: 0px 0px 40px rgba(0,0,0,0.5); 36 | border-radius: 10px; 37 | display: flex; 38 | justify-content: space-around; 39 | } 40 | 41 | 42 | .infors{ 43 | flex: 1; 44 | padding: 30px; 45 | } 46 | 47 | .infors h1 { 48 | font-family: 'Poppins'; 49 | font-weight: bolder; 50 | color: #fff; 51 | font-size: 1.9em; 52 | text-align: left; 53 | line-height: 1.5em; 54 | } 55 | 56 | .infors p { 57 | font-family: 'Poppins'; 58 | font-weight: 200; 59 | color: #fff; 60 | font-size: 1.1em; 61 | text-align: left; 62 | line-height: 1.5em; 63 | } 64 | 65 | .infors-texts{ 66 | width: 100%; 67 | height: auto; 68 | float: left; 69 | margin-bottom: 20px; 70 | } 71 | 72 | .infors-sociais{ 73 | width: 100%; 74 | height: auto; 75 | float: left; 76 | margin-bottom: 20px; 77 | } 78 | 79 | .infors-sociais ul{ 80 | display: flex; 81 | flex-direction: row; 82 | justify-content: center; 83 | } 84 | 85 | .infors-sociais ul li{ 86 | margin-right: 20px; 87 | } 88 | 89 | .infors-sociais ul li a{ 90 | font-family: 'Poppins'; 91 | font-weight: 200; 92 | color: #fff; 93 | font-size: 2em; 94 | } 95 | 96 | .infors-btns{ 97 | width: 100%; 98 | height: auto; 99 | float: left; 100 | margin-bottom: 20px; 101 | border-bottom: 1px dashed #eee; 102 | } 103 | 104 | .infors-btns h3 { 105 | margin-bottom: 30px; 106 | } 107 | 108 | .infors-btns h3 a{ 109 | font-family: 'Poppins'; 110 | font-weight: 200; 111 | color: #fff; 112 | font-size: 1.1em; 113 | text-align: left; 114 | background-color: #CD00CD; 115 | padding: 10px 20px 10px 20px; 116 | border-radius: 10px; 117 | } 118 | 119 | .image-i-math{ 120 | display: flex; 121 | justify-content: center; 122 | } 123 | 124 | .image-i-math img{ 125 | width: 250px; 126 | height:400px; 127 | border: 2px solid #eee; 128 | border-radius: 20px; 129 | } 130 | 131 | .store-applications{ 132 | width: 100%; 133 | height: auto; 134 | float: left; 135 | } 136 | 137 | .store-applications img{ 138 | width: 170px; 139 | height: auto; 140 | float: left; 141 | cursor: pointer; 142 | border: 1px solid rgb(60,60,60); 143 | border-radius: 5px; 144 | } 145 | 146 | .store-applications img:hover{ 147 | border: 1px solid rgb(255,255,255); 148 | background-color: #fff; 149 | transition: 0.3s all; 150 | } -------------------------------------------------------------------------------- /desafios/Day05revisao1-/assets/login-desafio/assets/assets/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day05revisao1-/assets/login-desafio/assets/assets/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /desafios/Day05revisao1-/assets/login-desafio/assets/assets/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day05revisao1-/assets/login-desafio/assets/assets/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /desafios/Day05revisao1-/assets/login-desafio/assets/assets/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day05revisao1-/assets/login-desafio/assets/assets/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /desafios/Day05revisao1-/assets/login-desafio/assets/assets/fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day05revisao1-/assets/login-desafio/assets/assets/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /desafios/Day05revisao1-/assets/login-desafio/assets/assets/js/npm.js: -------------------------------------------------------------------------------- 1 | // This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment. 2 | require('../../js/transition.js') 3 | require('../../js/alert.js') 4 | require('../../js/button.js') 5 | require('../../js/carousel.js') 6 | require('../../js/collapse.js') 7 | require('../../js/dropdown.js') 8 | require('../../js/modal.js') 9 | require('../../js/tooltip.js') 10 | require('../../js/popover.js') 11 | require('../../js/scrollspy.js') 12 | require('../../js/tab.js') 13 | require('../../js/affix.js') -------------------------------------------------------------------------------- /desafios/Day05revisao1-/assets/login-desafio/assets/css/stylo.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | } 4 | 5 | #wrap { 6 | min-height: 100%; 7 | } 8 | 9 | #main { 10 | overflow:auto; 11 | padding-bottom:150px; /* this needs to be bigger than footer height*/ 12 | } 13 | 14 | .footer { 15 | position: relative; 16 | margin-top: -150px; /* negative value of footer height */ 17 | height: 150px; 18 | clear:both; 19 | padding-top:20px; 20 | } -------------------------------------------------------------------------------- /desafios/Day05revisao1-/assets/login-desafio/faleconosco.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Admin Dashboad Login 8 | 9 | 10 | 11 | 19 | 20 | 21 | 22 | 23 |
24 |
25 |
26 | 50 |
51 |
52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /desafios/Day05revisao1-/assets/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in 9 | * IE on Windows Phone and in iOS. 10 | */ 11 | 12 | html { 13 | line-height: 1.15; /* 1 */ 14 | -ms-text-size-adjust: 100%; /* 2 */ 15 | -webkit-text-size-adjust: 100%; /* 2 */ 16 | } 17 | 18 | /* Sections 19 | ========================================================================== */ 20 | 21 | /** 22 | * Remove the margin in all browsers (opinionated). 23 | */ 24 | 25 | body { 26 | margin: 0; 27 | } 28 | 29 | /** 30 | * Add the correct display in IE 9-. 31 | */ 32 | 33 | article, 34 | aside, 35 | footer, 36 | header, 37 | nav, 38 | section { 39 | display: block; 40 | } 41 | 42 | /** 43 | * Correct the font size and margin on `h1` elements within `section` and 44 | * `article` contexts in Chrome, Firefox, and Safari. 45 | */ 46 | 47 | h1 { 48 | font-size: 2em; 49 | margin: 0.67em 0; 50 | } 51 | 52 | /* Grouping content 53 | ========================================================================== */ 54 | 55 | /** 56 | * Add the correct display in IE 9-. 57 | * 1. Add the correct display in IE. 58 | */ 59 | 60 | 61 | main { /* 1 */ 62 | display: block; 63 | } 64 | 65 | /** 66 | * 1. Add the correct box sizing in Firefox. 67 | * 2. Show the overflow in Edge and IE. 68 | */ 69 | 70 | hr { 71 | box-sizing: content-box; /* 1 */ 72 | height: 0; /* 1 */ 73 | overflow: visible; /* 2 */ 74 | } 75 | 76 | /** 77 | * 1. Correct the inheritance and scaling of font size in all browsers. 78 | * 2. Correct the odd `em` font sizing in all browsers. 79 | */ 80 | 81 | pre { 82 | font-family: monospace, monospace; /* 1 */ 83 | font-size: 1em; /* 2 */ 84 | } 85 | 86 | /* Text-level semantics 87 | ========================================================================== */ 88 | 89 | /** 90 | * 1. Remove the gray background on active links in IE 10. 91 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 92 | */ 93 | 94 | a { 95 | background-color: transparent; /* 1 */ 96 | -webkit-text-decoration-skip: objects; /* 2 */ 97 | } 98 | 99 | /** 100 | * 1. Remove the bottom border in Chrome 57- and Firefox 39-. 101 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 102 | */ 103 | 104 | abbr[title] { 105 | border-bottom: none; /* 1 */ 106 | text-decoration: underline; /* 2 */ 107 | text-decoration: underline dotted; /* 2 */ 108 | } 109 | 110 | /** 111 | * 1. Correct the inheritance and scaling of font size in all browsers. 112 | * 2. Correct the odd `em` font sizing in all browsers. 113 | */ 114 | 115 | code, 116 | kbd, 117 | samp { 118 | font-family: monospace, monospace; /* 1 */ 119 | font-size: 1em; /* 2 */ 120 | } 121 | 122 | /** 123 | * Add the correct font style in Android 4.3-. 124 | */ 125 | 126 | dfn { 127 | font-style: italic; 128 | } 129 | 130 | /** 131 | * Add the correct background and color in IE 9-. 132 | */ 133 | 134 | mark { 135 | background-color: #ff0; 136 | color: #000; 137 | } 138 | 139 | /** 140 | * Add the correct font size in all browsers. 141 | */ 142 | 143 | small { 144 | font-size: 80%; 145 | } 146 | 147 | /** 148 | * Prevent `sub` and `sup` elements from affecting the line height in 149 | * all browsers. 150 | */ 151 | 152 | sub, 153 | sup { 154 | font-size: 75%; 155 | line-height: 0; 156 | position: relative; 157 | vertical-align: baseline; 158 | } 159 | 160 | sub { 161 | bottom: -0.25em; 162 | } 163 | 164 | sup { 165 | top: -0.5em; 166 | } 167 | 168 | /* Embedded content 169 | ========================================================================== */ 170 | 171 | /** 172 | * Add the correct display in IE 9-. 173 | */ 174 | 175 | audio, 176 | video { 177 | display: inline-block; 178 | } 179 | 180 | /** 181 | * Add the correct display in iOS 4-7. 182 | */ 183 | 184 | audio:not([controls]) { 185 | display: none; 186 | height: 0; 187 | } 188 | 189 | /** 190 | * Remove the border on images inside links in IE 10-. 191 | */ 192 | 193 | img { 194 | border-style: none; 195 | } 196 | 197 | /** 198 | * Hide the overflow in IE. 199 | */ 200 | 201 | svg:not(:root) { 202 | overflow: hidden; 203 | } 204 | 205 | /* Forms 206 | ========================================================================== */ 207 | 208 | /** 209 | * 1. Change the font styles in all browsers (opinionated). 210 | * 2. Remove the margin in Firefox and Safari. 211 | */ 212 | 213 | button, 214 | input, 215 | optgroup, 216 | select, 217 | textarea { 218 | font-family: sans-serif; /* 1 */ 219 | font-size: 100%; /* 1 */ 220 | line-height: 1.15; /* 1 */ 221 | margin: 0; /* 2 */ 222 | } 223 | 224 | /** 225 | * Show the overflow in IE. 226 | * 1. Show the overflow in Edge. 227 | */ 228 | 229 | button, 230 | input { /* 1 */ 231 | overflow: visible; 232 | } 233 | 234 | /** 235 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 236 | * 1. Remove the inheritance of text transform in Firefox. 237 | */ 238 | 239 | button, 240 | select { /* 1 */ 241 | text-transform: none; 242 | } 243 | 244 | /** 245 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 246 | * controls in Android 4. 247 | * 2. Correct the inability to style clickable types in iOS and Safari. 248 | */ 249 | 250 | button, 251 | html [type="button"], /* 1 */ 252 | [type="reset"], 253 | [type="submit"] { 254 | -webkit-appearance: button; /* 2 */ 255 | } 256 | 257 | /** 258 | * Remove the inner border and padding in Firefox. 259 | */ 260 | 261 | button::-moz-focus-inner, 262 | [type="button"]::-moz-focus-inner, 263 | [type="reset"]::-moz-focus-inner, 264 | [type="submit"]::-moz-focus-inner { 265 | border-style: none; 266 | padding: 0; 267 | } 268 | 269 | /** 270 | * Restore the focus styles unset by the previous rule. 271 | */ 272 | 273 | button:-moz-focusring, 274 | [type="button"]:-moz-focusring, 275 | [type="reset"]:-moz-focusring, 276 | [type="submit"]:-moz-focusring { 277 | outline: 1px dotted ButtonText; 278 | } 279 | 280 | /** 281 | * Correct the padding in Firefox. 282 | */ 283 | 284 | fieldset { 285 | padding: 0.35em 0.75em 0.625em; 286 | } 287 | 288 | /** 289 | * 1. Correct the text wrapping in Edge and IE. 290 | * 2. Correct the color inheritance from `fieldset` elements in IE. 291 | * 3. Remove the padding so developers are not caught out when they zero out 292 | * `fieldset` elements in all browsers. 293 | */ 294 | 295 | legend { 296 | box-sizing: border-box; /* 1 */ 297 | color: inherit; /* 2 */ 298 | display: table; /* 1 */ 299 | max-width: 100%; /* 1 */ 300 | padding: 0; /* 3 */ 301 | white-space: normal; /* 1 */ 302 | } 303 | 304 | /** 305 | * 1. Add the correct display in IE 9-. 306 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. 307 | */ 308 | 309 | progress { 310 | display: inline-block; /* 1 */ 311 | vertical-align: baseline; /* 2 */ 312 | } 313 | 314 | /** 315 | * Remove the default vertical scrollbar in IE. 316 | */ 317 | 318 | textarea { 319 | overflow: auto; 320 | } 321 | 322 | /** 323 | * 1. Add the correct box sizing in IE 10-. 324 | * 2. Remove the padding in IE 10-. 325 | */ 326 | 327 | [type="checkbox"], 328 | [type="radio"] { 329 | box-sizing: border-box; /* 1 */ 330 | padding: 0; /* 2 */ 331 | } 332 | 333 | /** 334 | * Correct the cursor style of increment and decrement buttons in Chrome. 335 | */ 336 | 337 | [type="number"]::-webkit-inner-spin-button, 338 | [type="number"]::-webkit-outer-spin-button { 339 | height: auto; 340 | } 341 | 342 | /** 343 | * 1. Correct the odd appearance in Chrome and Safari. 344 | * 2. Correct the outline style in Safari. 345 | */ 346 | 347 | [type="search"] { 348 | -webkit-appearance: textfield; /* 1 */ 349 | outline-offset: -2px; /* 2 */ 350 | } 351 | 352 | /** 353 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. 354 | */ 355 | 356 | [type="search"]::-webkit-search-cancel-button, 357 | [type="search"]::-webkit-search-decoration { 358 | -webkit-appearance: none; 359 | } 360 | 361 | /** 362 | * 1. Correct the inability to style clickable types in iOS and Safari. 363 | * 2. Change font properties to `inherit` in Safari. 364 | */ 365 | 366 | ::-webkit-file-upload-button { 367 | -webkit-appearance: button; /* 1 */ 368 | font: inherit; /* 2 */ 369 | } 370 | 371 | /* Interactive 372 | ========================================================================== */ 373 | 374 | /* 375 | * Add the correct display in IE 9-. 376 | * 1. Add the correct display in Edge, IE, and Firefox. 377 | */ 378 | 379 | details, /* 1 */ 380 | menu { 381 | display: block; 382 | } 383 | 384 | /* 385 | * Add the correct display in all browsers. 386 | */ 387 | 388 | summary { 389 | display: list-item; 390 | } 391 | 392 | /* Scripting 393 | ========================================================================== */ 394 | 395 | /** 396 | * Add the correct display in IE 9-. 397 | */ 398 | 399 | canvas { 400 | display: inline-block; 401 | } 402 | 403 | /** 404 | * Add the correct display in IE. 405 | */ 406 | 407 | template { 408 | display: none; 409 | } 410 | 411 | /* Hidden 412 | ========================================================================== */ 413 | 414 | /** 415 | * Add the correct display in IE 10-. 416 | */ 417 | 418 | [hidden] { 419 | display: none; 420 | } -------------------------------------------------------------------------------- /desafios/Day05revisao1-/assets/reset.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, img, ins, kbd, q, s, samp, 5 | small, strike, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, form, label, 8 | caption, tbody, tfoot, thead, tr, th, td, 9 | article, aside, canvas, details, embed,footer, header, hgroup, 10 | menu, nav, output, ruby, section, summary, 11 | time, mark, audio, video { 12 | margin: 0; 13 | padding: 0; 14 | border: 0; 15 | font-size: 100%; 16 | font: inherit; 17 | vertical-align: baseline; 18 | font-family: arial; 19 | } 20 | /* HTML5 display-role reset for older browsers */ 21 | article, aside, details,footer, header, hgroup, menu, nav, section { 22 | display: block; 23 | } 24 | body{ 25 | line-height: 1; 26 | } 27 | 28 | *{ 29 | box-sizing: border-box; 30 | } 31 | 32 | ol, ul { 33 | list-style: none; 34 | } 35 | blockquote, q { 36 | quotes: none; 37 | } 38 | blockquote:before, blockquote:after, 39 | q:before, q:after { 40 | content: ''; 41 | content: none; 42 | } -------------------------------------------------------------------------------- /desafios/Day05revisao1-/img/math-92382.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day05revisao1-/img/math-92382.jpeg -------------------------------------------------------------------------------- /desafios/Day05revisao1-/img/math-982822.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day05revisao1-/img/math-982822.png -------------------------------------------------------------------------------- /desafios/Day05revisao1-/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Desafio 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 |
16 | 17 |
18 | 19 |
20 |

Obrigada por usar nosso serviço Programmation!

21 |

O programmation é uma empresa de tecnologia, ao contratar nosso serviço você só terá vantagens, pois damos 3 meses de manutenção
22 | ao seu site e seu app.

23 |
24 | 25 |
26 |

27 | Falar com Programmation 28 |

29 |
30 | 31 |
32 | 50 |
51 | 52 |
53 | 54 |
55 | 56 |
57 | 58 |
59 | 60 |
61 | 62 |
63 | 64 |
65 |
66 | 67 | -------------------------------------------------------------------------------- /desafios/Day10-15-grid-day/grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Entendendo Grid CSS3 7 | 43 | 44 | 45 | 46 |
47 |
48 |
49 | 50 |
52 | 53 | -------------------------------------------------------------------------------- /desafios/Day12-14-pizzaria/image/0751.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day12-14-pizzaria/image/0751.jpg -------------------------------------------------------------------------------- /desafios/Day12-14-pizzaria/image/10off-orderonline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day12-14-pizzaria/image/10off-orderonline.png -------------------------------------------------------------------------------- /desafios/Day12-14-pizzaria/image/41-412661_clip-art-logo-youtube-branco-png-icon-youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day12-14-pizzaria/image/41-412661_clip-art-logo-youtube-branco-png-icon-youtube.png -------------------------------------------------------------------------------- /desafios/Day12-14-pizzaria/image/44.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day12-14-pizzaria/image/44.jpg -------------------------------------------------------------------------------- /desafios/Day12-14-pizzaria/image/70ed18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day12-14-pizzaria/image/70ed18.jpg -------------------------------------------------------------------------------- /desafios/Day12-14-pizzaria/image/Pizza_Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day12-14-pizzaria/image/Pizza_Logo.png -------------------------------------------------------------------------------- /desafios/Day12-14-pizzaria/image/cofee.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day12-14-pizzaria/image/cofee.jpg -------------------------------------------------------------------------------- /desafios/Day12-14-pizzaria/image/copyspace_23-2148202500.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day12-14-pizzaria/image/copyspace_23-2148202500.jpg -------------------------------------------------------------------------------- /desafios/Day12-14-pizzaria/image/e-fundo-preto_23-2148308883.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day12-14-pizzaria/image/e-fundo-preto_23-2148308883.jpg -------------------------------------------------------------------------------- /desafios/Day12-14-pizzaria/image/images1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day12-14-pizzaria/image/images1.jpg -------------------------------------------------------------------------------- /desafios/Day12-14-pizzaria/image/insitu_m.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day12-14-pizzaria/image/insitu_m.jpg -------------------------------------------------------------------------------- /desafios/Day12-14-pizzaria/image/instagram-logo-on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day12-14-pizzaria/image/instagram-logo-on.png -------------------------------------------------------------------------------- /desafios/Day12-14-pizzaria/image/mv2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day12-14-pizzaria/image/mv2.png -------------------------------------------------------------------------------- /desafios/Day12-14-pizzaria/image/photo-15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day12-14-pizzaria/image/photo-15.jpg -------------------------------------------------------------------------------- /desafios/Day12-14-pizzaria/image/seach.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day12-14-pizzaria/image/seach.jpg -------------------------------------------------------------------------------- /desafios/Day12-14-pizzaria/image/slide1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day12-14-pizzaria/image/slide1.webp -------------------------------------------------------------------------------- /desafios/Day12-14-pizzaria/image/slide2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day12-14-pizzaria/image/slide2.jpg -------------------------------------------------------------------------------- /desafios/Day12-14-pizzaria/image/slide3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day12-14-pizzaria/image/slide3.jpg -------------------------------------------------------------------------------- /desafios/Day12-14-pizzaria/image/transparent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day12-14-pizzaria/image/transparent.png -------------------------------------------------------------------------------- /desafios/Day12-14-pizzaria/image/twitter_circle-512.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day12-14-pizzaria/image/twitter_circle-512.webp -------------------------------------------------------------------------------- /desafios/Day12-14-pizzaria/image/unnamed.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day12-14-pizzaria/image/unnamed.jpg -------------------------------------------------------------------------------- /desafios/Day12-14-pizzaria/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ZUME PIZZA | Pizzaria 8 | 9 | 10 |
11 |
12 | 15 | 16 |
17 | 22 |
23 |
24 |
25 | 26 |
27 |
28 | online 29 |
30 |
31 | 32 |
33 |
34 |

GRILLED CHICKEN

35 |

WINTER PIZZA

36 | 37 |
38 | 39 |
40 |
41 |

FIND LOCATIONS

42 |
43 | 44 | 45 |
46 |
47 |
48 | ORDER ONLINE 49 |
50 | 51 | 52 |
53 | 54 |
55 | 56 |
57 |
58 |
59 |

VEGGIE

60 |

SPECIAL

61 |
62 |
63 | 64 |
65 | 66 |
67 |
68 |
69 |

VEGGIE

70 |

SPECIAL

71 |
72 |
73 | 74 |
75 |
76 | 77 |
78 |
79 |

VEGGIE

80 |

SPECIAL

81 |
82 |
83 | 84 |
85 |
86 |
87 | 88 |
89 |
90 |

FLAVOR MENU

91 |

VSGITABEL HSND TOSE

92 |
93 |
94 |

BREAKFAST MENU

95 |

PARANTHA ROLL

96 |
97 |
98 |
99 |
100 | 101 | 102 |
103 |
104 | 107 | 108 |
109 | 114 |
115 | 122 |
123 | 124 |
125 |

copyright 2020 pizza. Theme. Going-To Internet

126 |
127 | 128 |
129 | 130 | -------------------------------------------------------------------------------- /desafios/Day12-14-pizzaria/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin:0px; 3 | scroll-padding: 0px; 4 | background-image: url('./image/0751.jpg'); 5 | background-attachment: fixed; 6 | background-size: cover; 7 | } 8 | *{ 9 | box-sizing: border-box; 10 | } 11 | ul{ 12 | list-style: none; 13 | } 14 | a{ 15 | text-decoration: none; 16 | } 17 | .navigation-container{ 18 | width: 100%; 19 | height: 100%; 20 | background-color: #ea272d; 21 | box-shadow: 2px 2px 12px rgba(0,0,0,0.2); 22 | } 23 | .navigation-content{ 24 | height: 60px; 25 | display: flex; 26 | align-items: center; 27 | justify-content: space-between; 28 | margin: 0px 12%; 29 | } 30 | .menu ul{ 31 | display: flex; 32 | } 33 | .menu ul li a{ 34 | padding: 0px 30px; 35 | font-family: calibri; 36 | font-weight: bold; 37 | color: #FFFFFF; 38 | } 39 | .whats-new{ 40 | display: flex; 41 | justify-content: center; 42 | margin: 20px 0px; 43 | } 44 | .new{ 45 | width: 540px; 46 | height: 320px; 47 | margin: 10px; 48 | background-image: url('./image/photo-15.jpg'); 49 | background-attachment: fixed; 50 | background-repeat: no-repeat; 51 | background-size: cover; 52 | padding: 40px; 53 | display: flex; 54 | flex-direction: column; 55 | justify-content: center; 56 | } 57 | .new p{ 58 | 59 | color: #FFFFFF; 60 | line-height: 50px; 61 | padding: 0px; 62 | margin: 0px; 63 | } 64 | .new p:nth-child(1){ 65 | align-items: center; 66 | font-size: 40px; 67 | font-family: calibri; 68 | font-weight: bold; 69 | } 70 | .new p:nth-child(2){ 71 | font-size: 30px; 72 | font-family: myriad pro; 73 | } 74 | .new button{ 75 | width: 120px; 76 | height: 35px; 77 | border-radius: 10px; 78 | background-color: #ea272d; 79 | text-align: center; 80 | font-family: calibri; 81 | font-weight: 400; 82 | color: #FFFF; 83 | font-size: 16px; 84 | border: none; 85 | box-shadow: 2px 2px 12px rgba(0,0,0,0.2); 86 | outline: none; 87 | } 88 | .search, .order{ 89 | width: 540px; 90 | height: 150px; 91 | margin: 10px; 92 | background-color: #b1b1b1; 93 | } 94 | .tools{ 95 | display: flex; 96 | flex-direction: column; 97 | justify-content: center; 98 | align-items: center; 99 | } 100 | .first-row{ 101 | display: flex; 102 | } 103 | .content{ 104 | display: flex; 105 | flex-direction: column; 106 | align-items: center; 107 | } 108 | .order{ 109 | background-image: url('./image/0751.jpg'); 110 | background-repeat: no-repeat; 111 | background-size: cover; 112 | } 113 | .search{ 114 | background-image: url('./image/70ed18.jpg'); 115 | background-repeat: no-repeat; 116 | background-size: cover; 117 | display: flex; 118 | justify-content:center; 119 | align-items: center; 120 | flex-direction: column; 121 | } 122 | .search p{ 123 | color: #FFFFFF; 124 | font-size: 30px; 125 | font-family: calibri; 126 | font-weight: bold; 127 | line-height: 0px; 128 | text-shadow: 2px 2px 12px rgba(0,0,0,0.5); 129 | } 130 | .text{ 131 | background-color: #f1f1f1; 132 | border-radius: 20px; 133 | width: 250px; 134 | height: 35px; 135 | display: flex; 136 | justify-content: space-around; 137 | align-items: center; 138 | box-shadow: 2px 2px 12px rgba(0,0,0,0.2); 139 | } 140 | .text input[type=search]{ 141 | border: none; 142 | background-color: transparent; 143 | color: #000000; 144 | text-align: center; 145 | outline: none; 146 | } 147 | .text button{ 148 | height: 35px; 149 | width: 70px; 150 | border: none; 151 | color: #0b0b0b; 152 | font-family: calibri; 153 | font-weight: bold; 154 | outline: none; 155 | border-radius: 0px 20px 20px 0px ; 156 | border-left: 1px solid #CDCACA; 157 | } 158 | .order{ 159 | display: flex; 160 | justify-content: center; 161 | align-items: center; 162 | } 163 | .order a{ 164 | font-size: 40px; 165 | font-family: calibri; 166 | font-weight: bold; 167 | text-shadow: 2px 2px 12px rgba(0,0,0,0.1); 168 | color: #FFFFFF; 169 | } 170 | .food-1, .food-2, .food-3{ 171 | width: 354px; 172 | height: 350px; 173 | margin: 10px; 174 | display:flex; 175 | flex-direction: column; 176 | justify-content: space-between; 177 | padding: 30px 5%; 178 | text-shadow: 2px 2px 12px rgba(0,0,0,0.2); 179 | } 180 | .food-1 p, .food-2 p, .food-3 p{ 181 | margin: 0px; 182 | padding: 0px; 183 | color: #FFFFFF; 184 | font-family: calibri; 185 | line-height: 40px; 186 | } 187 | .name p:nth-child(1){ 188 | font-weight: bold; 189 | font-size: 40px; 190 | } 191 | .name p:nth-child(2){ 192 | font-weight: 400; 193 | font-size: 30px; 194 | } 195 | .second-row{ 196 | display: flex; 197 | } 198 | .food-1{ 199 | background-image: url('./image/unnamed.jpg'); 200 | background-size: cover; 201 | background-repeat: no-repeat; 202 | } 203 | .food-2{ 204 | background-image: url('./image/slide2.jpg'); 205 | background-size: cover; 206 | background-repeat: no-repeat; 207 | } 208 | .food-3{ 209 | background-image: url('./image/cofee.jpg'); 210 | background-size: cover; 211 | background-repeat: no-repeat; 212 | } 213 | .price button{ 214 | color: #FFFF; 215 | border: none; 216 | background-color: #ea272d; 217 | width: 70px; 218 | height: 35px; 219 | border-radius: 20px; 220 | box-shadow: 2px 2px 12px rgba(0,0,0,0.2); 221 | } 222 | .flavor, .breakfast{ 223 | font-family: calibri; 224 | display: flex; 225 | flex-direction: column; 226 | justify-content: center; 227 | align-items: center; 228 | line-height: 0px; 229 | width: 540px; 230 | height: 180px; 231 | margin: 0px; 232 | background-color: #b1b1b1; 233 | } 234 | .third-row{ 235 | display: flex; 236 | } 237 | .flavor{ 238 | background-image: url('./image/44.jpg'); 239 | background-size: cover; 240 | background-repeat: no-repeat; 241 | } 242 | .breakfast{ 243 | background-image: url('./image/slide3.jpg'); 244 | background-size: cover; 245 | background-repeat: no-repeat; 246 | } 247 | .flavor p:nth-child(1), 248 | .breakfast p:nth-child(1){ 249 | color: #FFFFFF; 250 | font-weight: bold; 251 | font-size: 40px; 252 | } 253 | .flavor p:nth-child(2), 254 | .breakfast p:nth-child(2){ 255 | color: rgba(255,255,255,0.8); 256 | font-size: 20px; 257 | text-align: center; 258 | } 259 | .flavor p , .breakfast p{ 260 | margin: 0px; 261 | padding: 0px; 262 | line-height: 40px; 263 | } 264 | .footer{ 265 | background-color: #0a0a0a; 266 | height: 150px; 267 | } 268 | .social ul{ 269 | display: flex; 270 | } 271 | .social img{ 272 | height: 15px; 273 | } 274 | .social ul l a{ 275 | padding: 15px; 276 | } 277 | .footer-menu ul li a{ 278 | border-left: 3px solid #2e2e2e; 279 | color: rgba(255,255,255,0.8); 280 | } 281 | .navigation-content{ 282 | border-bottom:2px solid rgba(255,255,255,0.1); 283 | } 284 | .copyright{ 285 | display: flex; 286 | justify-content: center; 287 | align-items: center; 288 | font-family: myriad pro; 289 | font-weight: 400; 290 | font-size: 12px; 291 | margin-top: 10px; 292 | } 293 | .copyright p{ 294 | color: #b9b9b9; 295 | } 296 | .new, .search,.order, .food-1,.food-2,.food-3,.flavor,.breakfast{ 297 | border-radius: 10px; 298 | } -------------------------------------------------------------------------------- /desafios/Day16-20-animacao/README.md: -------------------------------------------------------------------------------- 1 | ## Animação usando HTML e CSS 2 | 3 | Intuito deste layout é por em prática meus conhecimentos durante os #100daysofcode 4 | 5 |
6 | 7 | Clone o repositório: 8 | ```` 9 | git clone https://github.com/jucelania/100daysofcode 10 | ```` 11 | 12 | ✅ HTML 5
13 | ✅ CSS 3
14 | 15 | ## 🍏 Licença 16 | 17 | Released in 2020. This project is under the [MIT license](https://code.visualstudio.com/download) 18 |
19 |
20 | 🚀 Desenvolvido por Jucelânia 21 | 22 | -------------------------------------------------------------------------------- /desafios/Day16-20-animacao/img/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day16-20-animacao/img/4.png -------------------------------------------------------------------------------- /desafios/Day16-20-animacao/img/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day16-20-animacao/img/background.png -------------------------------------------------------------------------------- /desafios/Day16-20-animacao/img/bubble.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day16-20-animacao/img/bubble.png -------------------------------------------------------------------------------- /desafios/Day16-20-animacao/img/ig.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day16-20-animacao/img/ig.png -------------------------------------------------------------------------------- /desafios/Day16-20-animacao/img/info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day16-20-animacao/img/info.png -------------------------------------------------------------------------------- /desafios/Day16-20-animacao/img/layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day16-20-animacao/img/layout.png -------------------------------------------------------------------------------- /desafios/Day16-20-animacao/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day16-20-animacao/img/logo.png -------------------------------------------------------------------------------- /desafios/Day16-20-animacao/img/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day16-20-animacao/img/menu.png -------------------------------------------------------------------------------- /desafios/Day16-20-animacao/img/share.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day16-20-animacao/img/share.png -------------------------------------------------------------------------------- /desafios/Day16-20-animacao/img/tw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day16-20-animacao/img/tw.png -------------------------------------------------------------------------------- /desafios/Day16-20-animacao/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animação usando HTML e CSS 8 | 9 | 10 |
11 |
12 | 13 | 14 |
15 |
16 | Bem vindo ao fundo do mar 17 |

Estudo criativo

18 | 19 |
20 |
21 | 22 | 23 | 28 | 29 |
30 | 31 | 32 |
33 |
34 | 35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 |
45 |
46 | 47 | -------------------------------------------------------------------------------- /desafios/Day16-20-animacao/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | .hero{ 7 | width: 100%; 8 | height: 100vh; 9 | background-image: url(./img/background.png); 10 | background-size: cover; 11 | background-position: center; 12 | position: relative; 13 | overflow: hidden; 14 | } 15 | .logo{ 16 | width: 100px; 17 | cursor: pointer; 18 | } 19 | .navbar{ 20 | width: 85%; 21 | height: 15%; 22 | margin: auto; 23 | display: flex; 24 | align-items: center; 25 | justify-content: space-between; 26 | } 27 | button{ 28 | color:#fbfcfd; 29 | padding:10px 25px; 30 | background:transparent; 31 | border:1px solid #fff; 32 | border-radius:20px; 33 | outline:none; 34 | cursor:pointer; 35 | } 36 | .content{ 37 | color:#fbfcfd; 38 | position: absolute; 39 | top: 40%; 40 | left: 8%; 41 | /*transform: translate(-50%);*/ 42 | z-index: 2; 43 | } 44 | h1{ 45 | font-size: 70px; 46 | margin: 10px 0 30px; 47 | line-height: 80px; 48 | } 49 | .side-bar{ 50 | width: 50px; 51 | height: 100vh; 52 | background: linear-gradient(#00545d, #000729); 53 | position: absolute; 54 | /*align-items: left;*/ 55 | right: 0; 56 | top: 0; 57 | } 58 | .menu{ 59 | display: block; 60 | width: 25px; 61 | margin: 40px auto 0; 62 | cursor: pointer; 63 | } 64 | .social-links img, .userful-links img{ 65 | width: 25px; 66 | margin: 5px auto; 67 | cursor: pointer; 68 | } 69 | .social-links img{ 70 | width: 25px; 71 | justify-content: space-between; 72 | text-align: center; 73 | position: static; 74 | top: 50%; 75 | transform: translateY(-50%); 76 | } 77 | .userful-links img{ 78 | width: 25px; 79 | justify-content: space-between; 80 | text-align: center; 81 | position: static; 82 | top: 50%; 83 | transform: translateY(-50%); 84 | } 85 | .bubbles img { 86 | width: 50px; 87 | animation: bubble 5s linear infinite; 88 | } 89 | .bubbles{ 90 | width: 100%; 91 | display:flex ; 92 | align-items: center; 93 | justify-content: space-around; 94 | position: absolute; 95 | 96 | } 97 | @keyframes bubble { 98 | 0%{ 99 | transform: translateY(0); 100 | opacity: 0; 101 | } 102 | 50%{ 103 | 104 | opacity: 1; 105 | } 106 | 70%{ 107 | 108 | opacity: 1; 109 | } 110 | 100%{ 111 | transform: translateY(80vh); 112 | opacity: 0; 113 | } 114 | } 115 | .bubbles img:nth-child(1){ 116 | animation-delay: 2s; 117 | width: 25px; 118 | } 119 | .bubbles img:nth-child(2){ 120 | animation-delay: 1s; 121 | } 122 | .bubbles img:nth-child(3){ 123 | animation-delay: 3s; 124 | } 125 | .bubbles img:nth-child(4){ 126 | animation-delay: 4.5s; 127 | width: 20px; 128 | } 129 | .bubbles img:nth-child(5){ 130 | animation-delay: 3s; 131 | width: 45px; 132 | } 133 | .bubbles img:nth-child(6){ 134 | animation-delay: 6s; 135 | } 136 | .bubbles img:nth-child(7){ 137 | animation-delay: 7s; 138 | width: 35px; 139 | } -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

4 | Proffy 5 |

6 | 7 | **Proffy** foi um projeto desenvolvido na **Next Level Week** promovido pela Rocketseat. 8 | A proposta do projeto é uma aplicação que possa ligar quem deseja aprender, e quer ensinar. É possível encontrar alunos para selecionar, ou encontrar o professor para aquela matéria que você sempre quis aprender mais! Sem que haja nenhuma limitação de área!! 9 | 10 |
11 | 12 | ## Previws 13 | 14 |

15 | Proffy 16 |

17 |
18 | 19 |

20 | Image from Gyazo Image from Gyazo 21 |

22 | 23 |

24 | Pergunta: Sobre o que é o projeto? 25 | 26 | Resposta: A proposta do projeto é uma aplicação que possa ligar quem deseja aprender, e quer ensinar. É possível encontrar alunos para selecionar, ou encontrar o professor para aquela matéria que você sempre quis aprender mais! Sem que haja nenhuma limitação de área!!
27 | Resposta: O NLW é uma semana prática com muito código, desafios e networking desenvolvido pela RocketSeat.
28 | Pergunta: Quais são as tecnologias usadas neste projeto?
29 | 30 | Resposta: As tecnologias usadas neste projeto são... 31 | 32 | ✅ HTML 5
33 | ✅ CSS 3
34 | ✅ JavaScipt
35 | ✅ SQLite
36 | 37 | ## Ferramentas utilizadas 38 | 39 | - [Git Bash](https://gitforwindows.org/) 40 | - [Node.js](https://nodejs.org/en/download/) 41 | - [Nunjucks](https://www.npmjs.com/package/nunjucks) 42 | - [SQLite](https://www.sqlite.org/download.html) 43 | - [Figma](https://www.figma.com/file/GHGS126t7WYjnPZdRKChJF/Proffy-Web) 44 | - Express 45 | --- 46 | 47 | ## 🚀 Como rodar o projeto 48 | 49 | Podemos considerar este projeto como sendo divido em duas partes: 50 | 51 | 1. Front End (pasta src/server) 52 | 2. Back End (pasta src/database) 53 | 54 | ### Pré-requisitos 55 | 56 | Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: 57 | [Git-Bash](https://git-scm.com), [Node.js](https://nodejs.org/en/). 58 | Além disto é bom ter um editor para trabalhar com o código como _VSCode_ 59 | 60 | 61 | ### Rodando a aplicação web (Front End) 62 | 63 | ```bash 64 | # Clone este repositório 65 | $ git clone https://github.com/jucelania/nlw-2 66 | 67 | # Acesse a pasta do projeto no seu terminal/cmd 68 | $ cd nlw-2 69 | 70 | # Vá para a pasta da aplicação Front End 71 | $ cd src/server.js 72 | 73 | # Instale as dependências 74 | $ npm install 75 | 76 | # Execute a aplicação em modo de desenvolvimento 77 | $ npm run dev 78 | 79 | # A aplicação será aberta na porta:3333 - acesse http://localhost:5500 80 | 81 | ``` 82 | 83 | ## 🤔 Como contribuir 84 | 85 | - Faça um fork desse repositório; 86 | - Cria uma branch com a sua feature: `git checkout -b minha-feature`; 87 | - Faça commit das suas alterações: `git commit -m 'feat: Minha nova feature'`; 88 | - Faça push para a sua branch: `git push origin minha-feature`. 89 | 90 | Depois que o merge da sua pull request for feito, você pode deletar a sua branch. 91 | 92 | ## 📝 Licença 93 | 94 | Esse projeto está sob a licença MIT. Veja o arquivo [LICENSE](LICENSE.md) para mais detalhes. 95 | 96 | ## 🙌 Agradecimentos 97 | 98 | - [Time da RocketSeat](https://rocketseat.com.br/) 99 | - [Mayk Brito, e Instrutor da Rocketseat](https://github.com/maykbrito) 100 | - [Diego Fernandes, CTO e Instrutor da Rocketseat](https://github.com/diego3g) 101 | 102 | --- 103 |

104 | 105 | [Jusy Developer](https://www.instagram.com/jusydeveloper/) 106 | 107 | 108 |

109 | -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/github/layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day21-10-nlw/github/layout.png -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/github/logo2.0.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nlw-2", 3 | "version": "1.0.0", 4 | "description": "

\r \"Proffy\"\r

", 5 | "main": "test.js", 6 | "scripts": { 7 | "dev": "nodemon src/server.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/jucelania/nlw-2.git" 12 | }, 13 | "bugs": { 14 | "url": "https://github.com/jucelania/nlw-2/issues" 15 | }, 16 | "homepage": "https://github.com/jucelania/nlw-2#readme", 17 | "dependencies": { 18 | "express": "^4.17.1", 19 | "nunjucks": "^3.2.2", 20 | "sqlite-async": "^1.1.0" 21 | }, 22 | "devDependencies": { 23 | "nodemon": "^2.0.4" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day21-10-nlw/public/images/favicon.png -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/images/icons/back.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/images/icons/give-classes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/images/icons/purple-heart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/images/icons/rocket.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/images/icons/smile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/images/icons/study.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/images/icons/success-check-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/images/icons/warning.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/images/icons/whatsapp.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/images/layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day21-10-nlw/public/images/layout.png -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/images/logo2.0.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/images/success-background.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/scripts/addFiel.js: -------------------------------------------------------------------------------- 1 | // 1. Procurar o botão. 2 | document.querySelector('#add-time') 3 | // 2. Ao clicar o botão, 4 | .addEventListener('click', duplicateField); 5 | 6 | // executar uma ação de: 7 | function duplicateField() { 8 | // Copiar a estrutura (qual estrutura?) 9 | const newFieldsContainer = document.querySelector('.schedule-item').cloneNode(true); 10 | // selecionar os campos da estrutura copiada (quais campos?) 11 | const fields = newFieldsContainer.querySelectorAll('input'); 12 | 13 | //console.log(fields[0]); 14 | 15 | // limpar os campos selecionados! 16 | fields.forEach(function(field) { 17 | field.value = ''; 18 | }); 19 | 20 | // mostrá-los na página (em qual parte da página devo colocar e o que eu devo colocar?). 21 | document.querySelector('#schedule-items').appendChild(newFieldsContainer); 22 | } 23 | 24 | -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/scripts/addField.js: -------------------------------------------------------------------------------- 1 | function cloneField() { 2 | const newFieldContainer = document.querySelector('.schedule-item').cloneNode(true) 3 | const fields = newFieldContainer.querySelectorAll('input') 4 | 5 | fields.forEach(function(field) { 6 | field.value = "" 7 | }) 8 | 9 | document.querySelector('#schedule-items').appendChild(newFieldContainer) 10 | } 11 | 12 | document.querySelector("#add-time").addEventListener("click", cloneField) -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/style/main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-background: #F0F0F7; 3 | --color-primary-lighter: #9871F5; 4 | --color-primary-light: #916BEA; 5 | --color-primary: #8257E5; 6 | --color-primary-dark: #774DD6; 7 | --color-primary-darker: #6842c2; 8 | --color-secondary: #04D361; 9 | --color-secondary-dark: #04BF58; 10 | --color-title-in-primary: #FFFFFF; 11 | --color-text-in-primary: #D4C2FF; 12 | --color-text-title: #32264D; 13 | --color-text-complement: #9C98A6; 14 | --color-text-base: #6A6180; 15 | --color-line-in-white: #E6E6F0; 16 | --color-input-background: #F8F8FC; 17 | --color-button-text: #FFFFFF; 18 | --color-box-base: #FFFFFF; 19 | --color-box-footer: #FAFAFC; 20 | --color-small-info: #C1BCCC; 21 | font-size: 60%; /* controle das medidas rem */ 22 | /* background-color: blueviolet;*/ 23 | } 24 | * { 25 | margin: 0; 26 | padding: 0; 27 | box-sizing: border-box; 28 | } 29 | 30 | html, 31 | body { 32 | height: 100vh; 33 | } 34 | 35 | body{ 36 | background: var(--color-background); 37 | display: flex; 38 | align-items: center; 39 | justify-content: center; 40 | } 41 | 42 | body, 43 | input, 44 | button, 45 | textarea{ 46 | /*font: 500 1.6rem Poppins;*/ 47 | font-weight: 500; 48 | font-family: Poppins; 49 | font-size: 1.6rem; 50 | color: var(--color-text-base); 51 | } 52 | /*responsividade */ 53 | #container{ 54 | width: 90vw; 55 | max-width: 700px; 56 | } 57 | 58 | @media(min-width: 700px){ 59 | :root{ 60 | font-size: 62.5%; /*todo 1rem vai ser relatico a 10px; */ 61 | } 62 | } -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/style/partials/forms.css: -------------------------------------------------------------------------------- 1 | 2 | .select-block label, 3 | .input-block label 4 | .textarea label{ 5 | font-size: 1.4rem; 6 | color: var(--color-text-complement); 7 | } 8 | 9 | .input-block input, 10 | .select-block select, 11 | .textarea-block textarea{ 12 | width: 100%; 13 | height: 5.6rem; 14 | margin-top: 0.8rem; 15 | border-radius: 0.8rem; 16 | background: var(--color-input-background); 17 | border: 1px solid var(--color-line-in-white); 18 | outline: 0; 19 | padding: 0 1.6rem; 20 | font: 1.6rem Archivo; 21 | } 22 | 23 | .textarea-block textarea{ 24 | padding: 1.2rem 1.6rem; 25 | height: 16rem; 26 | 27 | resize: vertical; 28 | } 29 | 30 | .input-block, 31 | .textarea-block{ 32 | position: relative; 33 | } 34 | 35 | .input-block:focus-within::after, 36 | .textarea-block:focus-within::after{ 37 | /* (focus-within) - deixa o elemento em foco*/ 38 | content: ""; 39 | 40 | width: calc(100% - 3.2rem); 41 | height: 2px; 42 | background: var(--color-primary-light); 43 | 44 | position: absolute; 45 | left: 1.6rem; 46 | right: 1.6rem; 47 | bottom: 0px; 48 | } 49 | -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/style/partials/header.css: -------------------------------------------------------------------------------- 1 | #page-study #container{ 2 | width: 100vw; 3 | height: 100vh; 4 | } 5 | .page-header{ 6 | background-color: var(--color-primary); 7 | 8 | display: flex; 9 | flex-direction: column; 10 | } 11 | 12 | .page-header .top-bar-container{ 13 | width: 90%; 14 | margin: 0 auto; 15 | 16 | display: flex; 17 | text-align: center; 18 | justify-content: space-between; 19 | 20 | padding: 1.6rem 0; 21 | } 22 | 23 | .page-header .top-bar-container a{ 24 | height: 3.2rem; 25 | transition: opacity 0.2s; /*deixa mais suave */ 26 | } 27 | 28 | .page-header .top-bar-container a:hover{ 29 | opacity: 0.6s; 30 | } 31 | 32 | .page-header .top-bar-container > img{ 33 | height: 1.6rem; 34 | } 35 | .page-header .header-content{ 36 | width: 90%; 37 | margin: 3.2rem auto; 38 | 39 | position: relative; 40 | } 41 | 42 | .page-header .header-content strong{ 43 | font: 700 3.6rem Archivo; 44 | line-height: 4.2rem; 45 | color: var(--color-title-in-primary); 46 | } 47 | 48 | .page-header .header-content p{ 49 | max-width: 30rem; 50 | font-size: 1.6rem; 51 | line-height: 2.6rem; 52 | color: var(--color-title-in-primary); 53 | margin-top: 2.4rem; 54 | } 55 | 56 | /*Responsividade Desktop */ 57 | @media(min-width:700px){ 58 | 59 | 60 | .page-header{ 61 | height: 340px; 62 | } 63 | 64 | .page-header .top-bar-container{ 65 | max-width: 1100px; 66 | } 67 | 68 | .page-header .header-content{ 69 | max-width: 740px; 70 | 71 | margin: 0 auto; 72 | 73 | flex: 1 1; 74 | padding-bottom: 48px; 75 | display: flex; 76 | flex-direction: column; 77 | justify-content: center; 78 | } 79 | 80 | .page-header .header-content strong{ 81 | max-width: 350px; 82 | } 83 | } -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/style/partials/page-give-classes.css: -------------------------------------------------------------------------------- 1 | #page-give-classes #container { 2 | width: 100vw; 3 | height: 100vh; 4 | } 5 | 6 | #page-give-classes .page-header .header-content { 7 | margin-bottom: 6.4rem; 8 | } 9 | 10 | #page-give-classes main { 11 | margin: -3.2rem auto 3.2rem; 12 | background: var(--color-box-base); 13 | width: 100%; 14 | max-width: 74rem; 15 | border-radius: 0.8rem; 16 | padding-top: 6.4rem; 17 | } 18 | 19 | #page-give-classes fieldset { 20 | border: none; 21 | 22 | padding: 0 2.4rem; 23 | } 24 | 25 | #page-give-classes fieldset legend { 26 | font: 700 2.4rem Archivo; 27 | color: var(--color-text-title); 28 | margin-bottom: 2.4rem; 29 | 30 | display: flex; 31 | 32 | align-items: center; 33 | justify-content: space-between; 34 | 35 | width: 100%; 36 | padding-bottom: 1.6rem; 37 | border-bottom: 1px solid var(--color-line-in-white); 38 | } 39 | 40 | #page-give-classes fieldset legend button{ 41 | background-color: none; 42 | border: 0; 43 | 44 | color: var(--color-primary); 45 | 46 | font: 700 1.6rem Archivo; 47 | cursor: pointer; 48 | 49 | transition: 0.2; 50 | } 51 | 52 | #page-give-classes fieldset legend button:hover{ 53 | /*transform: translateY(-5px);*/ 54 | color: var(--color-primary-dark); 55 | } 56 | 57 | 58 | #page-give-classes fieldset+fieldset{ 59 | margin-top: 6.4rem; 60 | } 61 | 62 | #page-give-classes .input-block+.input-block, 63 | #page-give-classes .textarea-block+.textarea-block, 64 | #page-give-classes .select-block+.select-block{ 65 | margin-top: 2.4rem; 66 | } 67 | 68 | #page-give-classes main footer{ 69 | padding: 4rem 2.4rem; 70 | 71 | background: var(--color-box-footer); 72 | border-top: 1px solid var(--color-line-in-white); 73 | margin-top: 6.4rem; 74 | } 75 | 76 | #page-give-classes main footer p{ 77 | display: flex; 78 | align-items: center; 79 | justify-content: center; 80 | 81 | font-size: 1.4rem; 82 | line-height: 2.4rem; 83 | 84 | color: var(--color-text-complement); 85 | } 86 | 87 | #page-give-classes main footer p img{ 88 | margin-right: 2rem; 89 | } 90 | 91 | #page-give-classes main footer button{ 92 | width: 100%; 93 | height: 5.6rem; 94 | background: var(--color-secondary); 95 | color: var(--color-button-text); 96 | transition: background 0.2s; 97 | border: 0; 98 | border-radius: 0.8rem; 99 | cursor: pointer; 100 | font: 700 1.4rem Archivo; 101 | 102 | display: flex; 103 | align-items: center; 104 | justify-content: center; 105 | text-decoration: none; 106 | 107 | transition: 0.2s; 108 | margin-top: 3.2rem; 109 | } 110 | 111 | .schedule-item+.schedule-item{ 112 | margin-top: 3.2rem; 113 | padding: 3.2rem; 114 | 115 | border-top: 1px solid var(--color-line-in-white); 116 | } 117 | 118 | @media (min-width: 700px) { 119 | #page-give-classes #container { 120 | max-width: 100vw; 121 | } 122 | /*responsividade desktop*/ 123 | #page-give-classes .page-header .header-content { 124 | margin-bottom: 0; 125 | } 126 | 127 | #page-give-classes main fieldset { 128 | padding: 0 64px; 129 | } 130 | 131 | #page-give-classes fieldset .schedule-item { 132 | display: grid; 133 | grid-template-columns: 2fr 1fr 1fr; 134 | column-gap: 1.6rem; 135 | } 136 | 137 | #page-give-classes #schedule-items .select-block+.input-block, 138 | #page-give-classes #schedule-items .input-block+.input-block { 139 | margin-top: 0; 140 | } 141 | 142 | #page-give-classes main footer { 143 | padding: 40px 64px; 144 | 145 | display: flex; 146 | align-items: center; 147 | justify-content: space-between; 148 | } 149 | 150 | #page-give-classes main footer button { 151 | margin-top: 0; 152 | width: 200px; 153 | } 154 | 155 | #page-give-classes main footer button:hover{ 156 | background: var(--color-secondary-dark); 157 | } 158 | 159 | } 160 | -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/style/partials/page-landing.css: -------------------------------------------------------------------------------- 1 | 2 | #page-landing{ 3 | background: var(--color-primary); 4 | } 5 | 6 | #page-landing #container { 7 | color: var(--color-text-in-primary); 8 | } 9 | 10 | .logo-container img{ 11 | height: 10rem; 12 | } 13 | 14 | .logo-container{ 15 | text-align: center; 16 | margin-bottom: 3.2rem; 17 | } 18 | 19 | .logo-container h2{ 20 | font-weight: 500; 21 | font-size: 3.6rem; 22 | line-height: 4.6rem; 23 | margin-top: 0.8rem; 24 | } 25 | 26 | .hero-image{ 27 | width: 100%; 28 | } 29 | 30 | /*formação dos botões*/ 31 | .buttons-container{ 32 | display: flex; 33 | justify-content: center; 34 | margin: 3.2rem 0; 35 | } 36 | 37 | .buttons-container a{ 38 | width: 30rem; 39 | height: 10.4rem; 40 | 41 | border-radius: 0.8rem; 42 | margin-right: 1.6rem; 43 | 44 | font: 700 2.4rem Archivo; 45 | 46 | /*alingamento dos links botões*/ 47 | display: flex; 48 | align-items: center; 49 | justify-content: center; 50 | text-decoration: none; 51 | 52 | color: var(--color-button-text); 53 | 54 | transition: background 0.2s; 55 | } 56 | 57 | .buttons-container a img{ 58 | width: 4rem; 59 | margin-right: 2.4rem; 60 | } 61 | 62 | .buttons-container a.study{ 63 | background: var(--color-primary-lighter); 64 | } 65 | 66 | .buttons-container a.study:hover{ 67 | background: var(--color-primary-light); 68 | } 69 | 70 | .buttons-container a.give-classes{ 71 | background: var(--color-secondary); 72 | margin-right: 0; 73 | } 74 | 75 | .buttons-container a.give-classes:hover{ 76 | background: var(--color-secondary-dark); 77 | } 78 | 79 | .total-connections{ 80 | font-size: 1.8rem; 81 | 82 | display: flex; 83 | align-items: center; 84 | justify-content: center; 85 | } 86 | 87 | .total-connections img{ 88 | margin-left: 0.8rem; 89 | } 90 | 91 | /*Responsividade para Desktop */ 92 | @media(max-width: 699px){ 93 | :root{ 94 | font-size: 40%; /*modificar as medidas rem */ 95 | } 96 | } 97 | 98 | @media(min-width: 1100px){ 99 | #page-landing #container{ 100 | max-width: 1100px; 101 | /*grig */ 102 | display: grid; 103 | grid-template-columns: 2fr 1fr 2fr; 104 | grid-template-rows: 350px 1fr; 105 | grid-template-areas: 106 | "proffy image image" 107 | " button button texting"; 108 | gap:60px; 109 | row-gap: 86px; 110 | } 111 | .logo-container{ 112 | grid-area: proffy; 113 | text-align: initial; 114 | align-self: center; 115 | margin:0; 116 | } 117 | .logo-container img{ 118 | height: 100%; 119 | } 120 | .hero-image{ 121 | grid-area: image; 122 | } 123 | .buttons-container{ 124 | grid-area: button; 125 | justify-content: flex-start; 126 | } 127 | .total-connections{ 128 | grid-area: texting; 129 | justify-self: end; 130 | font-size: 1.2rem; 131 | } 132 | } -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/style/partials/page-study.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | #search-teachers{ 4 | margin-top: 3.2rem; 5 | } 6 | 7 | #search-teachers label{ 8 | color: var(--color-text-in-primary); 9 | } 10 | #search-teachers .select-block{ 11 | margin-bottom: 1.4rem; 12 | } 13 | 14 | #search-teachers button{ 15 | width: 100%; 16 | height: 5.6rem; 17 | background: var(--color-secondary); 18 | color: var(--color-button-text); 19 | border:0; 20 | border-radius: .8rem; 21 | cursor: pointer; 22 | font: 700 1.6rem Archivo; 23 | display: flex; 24 | align-items: center; 25 | justify-content: center; 26 | text-decoration: none; 27 | 28 | transition: background 0.2s; 29 | margin-top:3.2rem 30 | } 31 | 32 | #search-teachers button:hover{ 33 | background-color: var(--color-secondary-dark); 34 | } 35 | 36 | #page-study main{ 37 | margin: 3.2rem auto; 38 | width: 90%; 39 | } 40 | 41 | .teacher-item{ 42 | background-color: var(--color-box-base); 43 | border: 1px solid var(--color-line-in-white); 44 | border-radius: .8rem; 45 | margin-top: 2.4rem; 46 | } 47 | .teacher-item header{ 48 | padding: 3.2rem 2rem; 49 | display: flex; 50 | align-items: center; 51 | } 52 | 53 | .teacher-item header img{ 54 | width: 8rem; 55 | height: 8rem; 56 | border-radius: 50%; 57 | } 58 | 59 | .teacher-item header div{ 60 | margin-left: 2.4rem; 61 | } 62 | 63 | .teacher-item header div strong{ 64 | font: 700 2.4rem Archivo; 65 | display: block; 66 | color: var(--color-text-title); 67 | } 68 | 69 | .teacher-item header div span{ 70 | font-size: 1.6rem; 71 | display: block; 72 | margin-top: .4rem; 73 | } 74 | 75 | .teacher-item > p{ 76 | padding: 0 2rem; 77 | font-size: 1.6rem; 78 | line-height: 2.8rem; 79 | } 80 | 81 | .teacher-item footer{ 82 | padding: 3.2rem 2rem; 83 | background-color: var(--color-box-footer); 84 | border-top: 1px solid var(--color-line-in-white); 85 | margin-top: 3.2rem; 86 | 87 | display: flex; 88 | align-items: center; 89 | justify-content: space-between; 90 | } 91 | 92 | .teacher-item footer p{ 93 | font-size: 1.4rem; 94 | line-height: 2.4rem; 95 | color: var(--color-text-complement); 96 | } 97 | 98 | .teacher-item footer p strong{ 99 | font-size: 1.6rem; 100 | color: var(--color-primary); 101 | display: flex; 102 | } 103 | .teacher-item footer button{ 104 | width: 20rem; 105 | height: 5.6rem; 106 | background-color: var(--color-secondary); 107 | border: 0; 108 | border-radius: .8rem; 109 | cursor: pointer; 110 | font: 700 1.4rem Archivo; 111 | 112 | display: flex; 113 | align-items: center; 114 | justify-content: space-evenly; 115 | 116 | text-decoration: none; 117 | 118 | transition: background 0.2s; 119 | margin-left: 1.6rem; 120 | } 121 | 122 | .teacher-item footer button:hover{ 123 | background: var(--color-secondary-dark); 124 | } 125 | 126 | /*Responsividade Desktop */ 127 | @media(min-width:700px){ 128 | #page-study #container{ 129 | max-width: 100vw; 130 | } 131 | 132 | .page-header{ 133 | height: 340px; 134 | } 135 | 136 | .page-header .top-bar-container{ 137 | max-width: 1100px; 138 | } 139 | 140 | .page-header .header-content{ 141 | max-width: 740px; 142 | 143 | margin: 0 auto; 144 | 145 | flex: 1 1; 146 | padding-bottom: 48px; 147 | display: flex; 148 | flex-direction: column; 149 | justify-content: center; 150 | } 151 | 152 | .page-header .header-content strong{ 153 | max-width: 350px; 154 | } 155 | 156 | .teacher-item header, 157 | .teacher-item footer{ 158 | padding: 32px; 159 | } 160 | 161 | #search-teachers{ 162 | display: grid; 163 | grid-template-columns: repeat(4, 1fr); 164 | gap:16px; 165 | position: absolute; 166 | bottom: -28px; 167 | } 168 | 169 | #page-study main{ 170 | padding: 32px 0; 171 | max-width: 740px; 172 | margin: 0 auto; 173 | } 174 | 175 | #search-teachers .select-block{ 176 | margin-bottom: 0; 177 | } 178 | 179 | .teacher-item p{ 180 | padding: 0 32px; 181 | } 182 | 183 | .teacher-item footer p strong{ 184 | display: initial; 185 | margin-left: 16px; 186 | } 187 | 188 | .teacher-item footer button{ 189 | width: 245px; 190 | font-size: 16px; 191 | justify-content: center; 192 | } 193 | .teacher-item footer button img{ 194 | margin-right: 16px; 195 | } 196 | } 197 | 198 | -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/styles/main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-background: #F0F0F7; 3 | --color-primary-lighter: #9871F5; 4 | --color-primary-light: #916BEA; 5 | --color-primary: #8257E5; 6 | --color-primary-dark: #774DD6; 7 | --color-primary-darker: #6842c2; 8 | --color-secondary: #04D361; 9 | --color-secondary-dark: #04BF58; 10 | --color-title-in-primary: #FFFFFF; 11 | --color-text-in-primary: #D4C2FF; 12 | --color-text-title: #32264D; 13 | --color-text-complement: #9C98A6; 14 | --color-text-base: #6A6180; 15 | --color-line-in-white: #E6E6F0; 16 | --color-input-background: #F8F8FC; 17 | --color-button-text: #FFFFFF; 18 | --color-box-base: #FFFFFF; 19 | --color-box-footer: #FAFAFC; 20 | --color-small-info: #C1BCCC; 21 | font-size: 60%; /* controle das medidas rem */ 22 | } 23 | 24 | * { 25 | margin: 0; 26 | padding: 0; 27 | box-sizing: border-box; 28 | } 29 | 30 | html, body { 31 | height: 100vh; 32 | } 33 | 34 | body { 35 | background-color: var(--color-background); 36 | display: flex; 37 | align-items: center; 38 | justify-content: center; 39 | } 40 | 41 | body, 42 | input, 43 | button, 44 | textarea { 45 | font: 500 1.6rem Poppins; 46 | color: var(--color-text-base); 47 | } 48 | 49 | #container { 50 | width: 90vw; 51 | max-width: 700px; 52 | } 53 | 54 | @media (min-width: 700px) { 55 | :root { 56 | font-size: 62.5%; 57 | } 58 | } -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/styles/partials/forms.css: -------------------------------------------------------------------------------- 1 | .select-block label, 2 | .input-block label, 3 | .textarea-block label { 4 | font-size: 1.4rem; 5 | color: var(--color-text-complement); 6 | } 7 | 8 | .input-block input, 9 | .select-block select, 10 | .textarea-block textarea { 11 | width: 100%; 12 | height: 5.6rem; 13 | margin-top: 0.8rem; 14 | border-radius: 0.8rem; 15 | background: var(--color-input-background); 16 | border: 1px solid var(--color-line-in-white); 17 | outline: 0; 18 | padding: 0 1.6rem; 19 | font: 1.6rem Archivo; 20 | } 21 | 22 | .input-block, 23 | .textarea-block { 24 | position: relative; 25 | } 26 | 27 | .input-block:focus-within::after, 28 | .textarea-block:focus-within::after { 29 | content: ""; 30 | width: calc(100% - 3.2rem); 31 | height: 2px; 32 | background: var(--color-primary-light); 33 | position: absolute; 34 | left: 1.6rem; 35 | bottom: 0; 36 | } 37 | 38 | .textarea-block textarea { 39 | padding: 1.2rem 1.6rem; 40 | height: 16rem; 41 | resize: vertical; 42 | } 43 | 44 | label small { 45 | font-size: 1.2rem; 46 | padding-left: 1.2rem; 47 | color: var(--color-small-info); 48 | } -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/styles/partials/header.css: -------------------------------------------------------------------------------- 1 | .page-header { 2 | background-color: var(--color-primary); 3 | display: flex; 4 | flex-direction: column; 5 | } 6 | 7 | .page-header .top-bar-container { 8 | width: 90%; 9 | margin: 0 auto; 10 | 11 | display: flex; 12 | align-items: center; 13 | justify-content: space-between; 14 | padding: 1.6rem 0; 15 | } 16 | 17 | .page-header .top-bar-container a { 18 | height: 3.2rem; 19 | transition: opacity 0.2s; 20 | } 21 | 22 | .page-header .top-bar-container a:hover { 23 | opacity: 0.6; 24 | } 25 | 26 | .page-header .top-bar-container > img { 27 | height: 1.6rem; 28 | } 29 | 30 | .page-header .header-content p { 31 | max-width: 30rem; 32 | font-size: 1.6rem; 33 | line-height: 2.6rem; 34 | color: var(--color-text-in-primary); 35 | margin-top: 2.4rem; 36 | } 37 | 38 | .page-header .header-content { 39 | width: 90%; 40 | margin: 3.2rem auto; 41 | position: relative; 42 | } 43 | 44 | .page-header .header-content strong { 45 | font: 700 3.6rem Archivo; 46 | line-height: 4.2rem; 47 | color: var(--color-title-in-primary); 48 | } 49 | 50 | @media (min-width: 700px) { 51 | .page-header { 52 | height: 340px; 53 | } 54 | 55 | .page-header top-bar-container { 56 | max-width: 1100px; 57 | } 58 | 59 | .page-header .header-content { 60 | max-width: 740px; 61 | margin: 0 auto; 62 | 63 | flex: 1 1; 64 | padding-bottom: 48px; 65 | display: flex; 66 | flex-direction: column; 67 | justify-content: center; 68 | 69 | } 70 | 71 | .page-header .header-content strong { 72 | max-width: 350px; 73 | } 74 | 75 | } -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/styles/partials/page-give-classes.css: -------------------------------------------------------------------------------- 1 | #page-give-classes #container { 2 | width: 100vw; 3 | height: 100vh; 4 | } 5 | 6 | #page-give-classes .page-header .header-content { 7 | margin-bottom: 6.4rem; 8 | } 9 | 10 | #page-give-classes main { 11 | background: var(--color-box-base); 12 | width: 100%; 13 | max-width: 74rem; 14 | border-radius: .8rem; 15 | margin: -3.2rem auto 3.2rem; 16 | padding-top: 6.4rem; 17 | } 18 | 19 | #page-give-classes fieldset { 20 | border: none; 21 | 22 | padding: 0 2.4rem; 23 | } 24 | 25 | #page-give-classes fieldset legend { 26 | font: 700 2.4rem Archivo; 27 | color: var(--color-text-title); 28 | margin-bottom: 2.4rem; 29 | display: flex; 30 | align-items: center; 31 | justify-content: space-between; 32 | 33 | width: 100%; 34 | padding: 1.6rem; 35 | border-bottom: 1px solid var(--color-line-in-white) 36 | } 37 | 38 | #page-give-classes fieldset legend button { 39 | background-color: none; 40 | border: 0; 41 | color: var(--color-primary); 42 | font: 700 1.6rem Archivo; 43 | cursor: pointer; 44 | transition: 1s; 45 | } 46 | 47 | #page-give-classes fieldset legend button:hover { 48 | transform: translateY(-5px); 49 | color: var(--color-primary-dark); 50 | } 51 | 52 | #page-give-classes .input-block+.input-block, 53 | #page-give-classes .input-block+.textarea-block, 54 | #page-give-classes .select-block+.input-block { 55 | margin-top: 2.4rem; 56 | } 57 | 58 | #page-give-classes fieldset+fieldset { 59 | margin-top: 6.4rem; 60 | } 61 | 62 | #page-give-classes main footer { 63 | padding: 4rem 2.4rem; 64 | 65 | background: var(--color-box-footer); 66 | border-top: 1px solid var(--color-line-in-white); 67 | margin-top: 6.4rem; 68 | } 69 | 70 | #page-give-classes main footer p { 71 | display: flex; 72 | align-items: center; 73 | justify-content: center; 74 | font-size: 1.4rem; 75 | line-height: 2.4rem; 76 | 77 | color: var(--color-text-complement); 78 | } 79 | 80 | #page-give-classes main footer p img { 81 | margin-right: 2rem; 82 | } 83 | 84 | #page-give-classes main footer button { 85 | width: 100%; 86 | height: 5.6rem; 87 | background: var(--color-secondary); 88 | color: var(--color-button-text); 89 | border: 0; 90 | border-radius: .8rem; 91 | cursor: pointer; 92 | font: 700 1.6rem Archivo; 93 | 94 | display: flex; 95 | align-items: center; 96 | justify-content: center; 97 | text-decoration: none; 98 | 99 | transition: 0.2s; 100 | margin-top: 3.2rem; 101 | } 102 | 103 | #page-give-classes main footer button:hover { 104 | background: var(--color-secondary-dark); 105 | } 106 | 107 | .schedule-item+.schedule-item { 108 | margin-top: 3.2rem; 109 | padding-top: 3.2rem; 110 | border-top: 1px solid var(--color-line-in-white); 111 | } 112 | 113 | @media (min-width: 700px) { 114 | #page-give-classes #container { 115 | max-width: 100vw; 116 | } 117 | 118 | #page-give-classes .page-header .header-content { 119 | margin-bottom: 0; 120 | } 121 | 122 | #page-give-classes main fieldset { 123 | padding: 0 64px; 124 | } 125 | 126 | .schedule-item { 127 | display: grid; 128 | grid-template-columns: 2fr 1fr 1fr; 129 | column-gap: 1.6rem; 130 | } 131 | 132 | #page-give-classes #schedule-items .select-block+.input-block, 133 | #page-give-classes #schedule-items .input-block+.input-block { 134 | margin-top: 0; 135 | } 136 | 137 | #page-give-classes main footer { 138 | padding: 40px 64px; 139 | 140 | display: flex; 141 | align-items: center; 142 | justify-content: space-between; 143 | } 144 | 145 | #page-give-classes main footer button { 146 | margin-top: 0; 147 | width: 200px; 148 | } 149 | } 150 | -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/styles/partials/page-landing.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-size: 40%; 3 | } 4 | 5 | #page-landing { 6 | background-color: var(--color-primary); 7 | } 8 | 9 | #page-landing #container { 10 | color: var(--color-text-in-primary); 11 | } 12 | 13 | .logo-container { 14 | text-align: center; 15 | margin-bottom: 3.2rem; 16 | } 17 | 18 | .logo-container h2 { 19 | font-weight: 500; 20 | font-size: 3.6rem; 21 | line-height: 4.6rem; 22 | margin-top: 0.8rem; 23 | } 24 | 25 | .logo-container img { 26 | height: 10rem; 27 | } 28 | 29 | .hero-image { 30 | width: 100%; 31 | } 32 | 33 | .buttons-container { 34 | display: flex; 35 | justify-content: center; 36 | margin: 3.2rem 0; 37 | } 38 | 39 | .buttons-container a { 40 | width: 30rem; 41 | height: 10.4rem; 42 | border-radius: 0.8rem; 43 | margin-right: 1.6rem; 44 | font: 700 2.4rem Archivo; 45 | display: flex; 46 | align-items: center; 47 | justify-content: center; 48 | text-decoration: none; 49 | color: var(--color-button-text); 50 | transition: background 0.2s; 51 | } 52 | 53 | .buttons-container a.study { 54 | background: var(--color-primary-lighter); 55 | } 56 | 57 | .buttons-container a.give-classes { 58 | background: var(--color-secondary); 59 | margin-right: 0; 60 | } 61 | 62 | .buttons-container a img { 63 | width: 4rem; 64 | margin-right: 2.4rem; 65 | } 66 | 67 | .buttons-container a.study:hover { 68 | background: var(--color-primary-light); 69 | } 70 | 71 | .buttons-container a.give-classes:hover { 72 | background: var(--color-secondary-dark); 73 | } 74 | 75 | .total-connections { 76 | font-size: 1.8rem; 77 | display: flex; 78 | align-items: center; 79 | justify-content: center; 80 | } 81 | 82 | .total-connections img { 83 | margin-left: 0.8rem; 84 | } 85 | 86 | @media (max-width: 699px) { 87 | :root { 88 | font-size: 40%; 89 | } 90 | } 91 | 92 | @media (min-width: 1100px) { 93 | #page-landing #container { 94 | max-width: 1100px; 95 | display: grid; 96 | grid-template-columns: 2fr 1fr 2fr; 97 | grid-template-rows: 350px 1fr; 98 | grid-template-areas: 99 | "proffy image image" 100 | "button button texting"; 101 | column-gap: 87px; 102 | row-gap: 86px; 103 | } 104 | 105 | .logo-container { 106 | grid-area: proffy; 107 | text-align: initial; 108 | align-self: center; 109 | margin: 0; 110 | } 111 | 112 | .logo-container h2 { 113 | max-width: 350px; 114 | } 115 | 116 | .logo-container img { 117 | height: 127px; 118 | } 119 | 120 | .hero-image { 121 | grid-area: image; 122 | height: 350px; 123 | } 124 | .buttons-container { 125 | grid-area: button; 126 | justify-content: flex-start; 127 | margin: 0; 128 | } 129 | .total-connections { 130 | grid-area: texting; 131 | justify-self: end; 132 | font-size: 1.2rem; 133 | } 134 | } -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/public/styles/partials/page-study.css: -------------------------------------------------------------------------------- 1 | #page-study #container { 2 | width: 100vw; 3 | height: 100vh; 4 | } 5 | 6 | #search-teachers { 7 | margin-top: 3.2rem; 8 | } 9 | 10 | #search-teachers label { 11 | color: var(--color-text-in-primary); 12 | } 13 | 14 | #search-teachers .select-block { 15 | margin-bottom: 1.4rem; 16 | } 17 | 18 | #search-teachers button { 19 | width: 100%; 20 | height: 5.6rem; 21 | background: var(--color-secondary); 22 | color: var(--color-button-text); 23 | border: 0; 24 | border-radius: .8rem; 25 | cursor: pointer; 26 | font: 700 1.6rem Archivo; 27 | display: flex; 28 | align-items: center; 29 | justify-content: center; 30 | transition: background 0.2s; 31 | margin-top: 3.2rem; 32 | } 33 | 34 | #search-teachers button:hover { 35 | background-color: var(--color-secondary-dark); 36 | } 37 | 38 | #page-study main .no-results { 39 | max-width: 30rempx; 40 | margin: 12rem auto; 41 | text-align: center; 42 | } 43 | 44 | #page-study main { 45 | margin: 3.2rem auto; 46 | width: 90%; 47 | } 48 | 49 | .teacher-item { 50 | background-color: var(--color-box-base); 51 | border: 1px solid var(--color-line-in-white); 52 | border-radius: .8rem; 53 | margin-top: 2.4rem; 54 | } 55 | 56 | .teacher-item header { 57 | padding: 3.2rem 2rem; 58 | display: flex; 59 | align-items: center; 60 | } 61 | 62 | .teacher-item header img { 63 | width: 8rem; 64 | height: 8rem; 65 | border-radius: 50%; 66 | } 67 | 68 | .teacher-item header div { 69 | margin-left: 2.4rem; 70 | } 71 | 72 | .teacher-item header div strong { 73 | font: 700 2.4rem Archivo; 74 | display: block; 75 | color: var(--color-text-title); 76 | } 77 | 78 | .teacher-item header div span { 79 | font-size: 1.6rem; 80 | display: block; 81 | margin-top: .4rem; 82 | } 83 | 84 | .teacher-item > p { 85 | padding: 0 2rem; 86 | font-size: 1.6rem; 87 | line-height: 2.8rem; 88 | } 89 | 90 | .teacher-item footer { 91 | padding: 3.2rem 2rem; 92 | background-color: var(--color-box-base); 93 | border-top: 1px solid var(--color-line-in-white); 94 | margin-top: 3.2rem; 95 | display: flex; 96 | align-items: center; 97 | justify-content: space-between; 98 | } 99 | 100 | .teacher-item footer p { 101 | font-size: 1.4rem; 102 | line-height: 2.4rem; 103 | color: var(--color-text-complement); 104 | } 105 | 106 | .teacher-item footer p strong { 107 | font-size: 1.6rem; 108 | color: var(--color-primary); 109 | display: block; 110 | } 111 | 112 | .teacher-item footer .button { 113 | width: 20rem; 114 | height: 5.6rem; 115 | background: var(--color-secondary); 116 | color: var(--color-button-text); 117 | border: 0; 118 | border-radius: .8rem; 119 | cursor: pointer; 120 | font: 700 1.4rem Archivo; 121 | 122 | display: flex; 123 | align-items: center; 124 | justify-content: space-evenly; 125 | 126 | text-decoration: none; 127 | 128 | transition: background 0.2s; 129 | margin-left: 1.6rem; 130 | } 131 | 132 | .teacher-item footer .button:hover { 133 | background: var(--color-secondary-dark); 134 | } 135 | 136 | @media (min-width: 700px) { 137 | #page-study #container { 138 | max-width: 100vw; 139 | } 140 | 141 | .page-header { 142 | height: 340px; 143 | } 144 | 145 | .page-header top-bar-container { 146 | max-width: 1100px; 147 | } 148 | 149 | .page-header .header-content { 150 | max-width: 740px; 151 | margin: 0 auto; 152 | 153 | flex: 1 1; 154 | padding-bottom: 48px; 155 | display: flex; 156 | flex-direction: column; 157 | justify-content: center; 158 | 159 | } 160 | 161 | .page-header .header-content strong { 162 | max-width: 350px; 163 | } 164 | 165 | .teacher-item header, 166 | .teacher-item footer { 167 | padding: 32px; 168 | } 169 | 170 | #search-teachers { 171 | display: grid; 172 | grid-template-columns: repeat(4, 1fr); 173 | gap: 16px; 174 | position: absolute; 175 | bottom: -28px; 176 | } 177 | 178 | #page-study main { 179 | padding: 32px 0; 180 | max-width: 740px; 181 | margin: 0 auto; 182 | } 183 | 184 | #search-teachers .select-block { 185 | margin-bottom: 0; 186 | } 187 | 188 | .teacher-item footer > p { 189 | padding: 0 32px; 190 | } 191 | 192 | .teacher-item footer p strong { 193 | display: initial; 194 | margin-left: 16px; 195 | } 196 | 197 | .teacher-item footer button { 198 | width: 245px; 199 | font-size: 16px; 200 | justify-content: center; 201 | } 202 | 203 | .teacher-item footer button img { 204 | margin-right: 16px; 205 | } 206 | } -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/src/database/createProffy.js: -------------------------------------------------------------------------------- 1 | module.exports = async function(db, {proffyValue, classValue, classScheduleValues}) { 2 | const insertedProffy = await db.run(` 3 | INSERT INTO proffys ( 4 | name, 5 | avatar, 6 | whatsapp, 7 | bio 8 | ) VALUES ( 9 | "${proffyValue.name}", 10 | "${proffyValue.avatar}", 11 | "${proffyValue.whatsapp}", 12 | "${proffyValue.bio}" 13 | ); 14 | `) 15 | 16 | const proffy_id = insertedProffy.lastID 17 | 18 | const insertedClass = await db.run(` 19 | INSERT INTO classes ( 20 | subject, 21 | cost, 22 | proffy_id 23 | ) VALUES ( 24 | "${classValue.subject}", 25 | "${classValue.cost}", 26 | "${proffy_id}" 27 | ); 28 | `) 29 | 30 | const class_id = insertedClass.lastID 31 | 32 | const insertedAllClassScheduleValues = classScheduleValues.map((value) => { 33 | return db.run(` 34 | INSERT INTO class_schedule ( 35 | class_id, 36 | weekday, 37 | time_from, 38 | time_to 39 | ) VALUES ( 40 | "${class_id}", 41 | "${value.weekday}", 42 | "${value.time_from}", 43 | "${value.time_to}" 44 | ) 45 | `) 46 | }) 47 | 48 | await Promise.all(insertedAllClassScheduleValues) 49 | } -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/src/database/database.sqlite: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day21-10-nlw/src/database/database.sqlite -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/src/database/db.js: -------------------------------------------------------------------------------- 1 | const database = require('sqlite-async') 2 | 3 | function execute(db) { 4 | return db.exec(` 5 | CREATE TABLE IF NOT EXISTS proffys ( 6 | id INTEGER PRIMARY KEY AUTOINCREMENT, 7 | name TEXT, 8 | avatar TEXT, 9 | whatsapp TEXT, 10 | bio TEXT 11 | ); 12 | 13 | CREATE TABLE IF NOT EXISTS classes ( 14 | id INTEGER PRIMARY KEY AUTOINCREMENT, 15 | subject INTEGER, 16 | cost TEXT, 17 | proffy_id INTEGER 18 | ); 19 | 20 | CREATE TABLE IF NOT EXISTS class_schedule ( 21 | id INTEGER PRIMARY KEY AUTOINCREMENT, 22 | class_id INTEGER, 23 | weekday INTEGER, 24 | time_from INTEGER, 25 | time_to INTEGER 26 | ); 27 | `) 28 | } 29 | 30 | module.exports = database.open(__dirname + '/database.sqlite').then(execute) -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/src/database/fake_data.js: -------------------------------------------------------------------------------- 1 | const proffys = [ 2 | { name: "Diego Fernandes", 3 | avatar: "https://avatars2.githubusercontent.com/u/2254731?s=460&u=0ba16a79456c2f250e7579cb388fa18c5c2d7d65&v=4", 4 | whatsapp: "89996878", 5 | bio: "Entusiasta das melhores tecnologias de química avançada.

Apaixonado por explodir coisas em laboratório e por mudar a vida das pessoas através de experiências. Mais de 200.000 pessoas já passaram por uma das minhas explosões.", 6 | subject: "Química", 7 | cost: "20", 8 | weekday: [0], 9 | time_from: [720], 10 | time_to: [1220] } 11 | ] -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/src/database/teste.js: -------------------------------------------------------------------------------- 1 | const database = require('./db') 2 | const createProffy = require('./createProffy') 3 | 4 | database.then( async (db) => { 5 | // Inserindo dados 6 | 7 | proffyValue = { 8 | name: 'Tiago Luchtenberg', 9 | avatar: "https://media-exp1.licdn.com/dms/image/C4E03AQHfarmcSLlWtA/profile-displayphoto-shrink_200_200/0?e=1602115200&v=beta&t=kp57Leis9izzzuJRa0Kfu-nsz_mW1RNnO0wWtQCbG-s", 10 | whatsapp: "895874569", 11 | bio: 'As vezes não sei nem onde eu tô, mas consigo me localizar facilmente em qualquer lugar. Tenho memória fotográfica e nunca fico perdido. Eu ensino a galera como não se perder na vida, com lições geográficas simples pra você nunca mais precisar de mapa na sua bela vida.' 12 | } 13 | 14 | classValue = { 15 | subject: 5, 16 | cost: "50", 17 | } 18 | 19 | classScheduleValues = [ 20 | { 21 | weekday: [2], 22 | time_from: [680], 23 | time_to: [1200] 24 | }, 25 | { 26 | weekday: [0], 27 | time_from: [520], 28 | time_to: [1220] 29 | } 30 | ] 31 | 32 | //await createProffy(db, {proffyValue, classScheduleValues, classValue}) 33 | 34 | // Consultar dados inseridos 35 | 36 | const selectedProffys = await db.all("SELECT * FROM proffys") 37 | //console.log(selectedProffys) 38 | 39 | const selectedClassesAndProffys = await db.all(` 40 | SELECT classes.*, proffys.* 41 | FROM proffys 42 | JOIN classes ON (classes.proffy_id = proffys.id) 43 | WHERE classes.proffy_id = 1; 44 | `) 45 | 46 | //console.log(selectedClassesAndProffys) 47 | 48 | const selectedClassesSchedules = await db.all(` 49 | SELECT class_schedule.* 50 | FROM class_schedule 51 | WHERE class_schedule.class_id = "1" 52 | AND class_schedule.weekday = "0" 53 | AND class_schedule.time_from <= "520" 54 | AND class_schedule.time_to > "520" 55 | `) 56 | 57 | console.log(selectedClassesSchedules) 58 | }) 59 | 60 | -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/src/pages.js: -------------------------------------------------------------------------------- 1 | const database = require('./database/db') 2 | 3 | const { subjects, weekdays, getSubject, convertHoursToMinutes } = require('./utils/format') 4 | 5 | function pageLanding(req, res) { 6 | return res.render("index.html") 7 | } 8 | 9 | async function pageStudy(req, res) { 10 | const filters = req.query 11 | 12 | if (!filters.subject || !filters.weekday || !filters.time) { 13 | return res.render("study.html", {filters, subjects, weekdays}) 14 | } 15 | 16 | const timeToMinutes = convertHoursToMinutes(filters.time) 17 | const query = ` 18 | SELECT classes.*, proffys.* 19 | FROM proffys 20 | JOIN classes ON (classes.proffy_id = proffys.id) 21 | WHERE EXISTS ( 22 | SELECT class_schedule.* 23 | FROM class_schedule 24 | WHERE class_schedule.class_id = classes.id 25 | AND class_schedule.weekday = ${filters.weekday} 26 | AND class_schedule.time_from <= ${timeToMinutes} 27 | AND class_schedule.time_to > ${timeToMinutes} 28 | ) 29 | AND classes.subject = '${filters.subject}' 30 | ` 31 | 32 | // caso haja erros 33 | 34 | try { 35 | const db = await database 36 | const proffys = await db.all(query) 37 | proffys.map((proffy) => { 38 | proffy.subject = getSubject(proffy.subject) 39 | }) 40 | 41 | return res.render('study.html', { proffys, subjects, filters, weekdays}) 42 | }catch (error) { 43 | console.log(error) 44 | } 45 | 46 | 47 | } 48 | 49 | function pageGiveClasses(req, res) { 50 | 51 | return res.render("give-classes.html", {weekdays, subjects}) 52 | } 53 | 54 | async function saveClasses (req, res) { 55 | const createProffy = require('./database/createProffy') 56 | 57 | const proffyValue = { 58 | name: req.body.name, 59 | avatar: req.body.avatar, 60 | whatsapp: req.body.whatsapp, 61 | bio: req.body.bio 62 | } 63 | 64 | const classValue = { 65 | subject: req.body.subject, 66 | cost: req.body.cost 67 | } 68 | 69 | const classScheduleValues = req.body.weekday.map((weekday, index) => { 70 | 71 | return { 72 | weekday, 73 | time_from: convertHoursToMinutes( req.body.time_from[index] ), 74 | time_to: convertHoursToMinutes( req.body.time_to[index] ) 75 | } 76 | 77 | }) 78 | 79 | try { 80 | const db = await database 81 | await createProffy(db, { proffyValue, classValue, classScheduleValues }) 82 | 83 | let queryString = "?subject=" + req.body.subject 84 | queryString += "&weekday=" + req.body.weekday[0] 85 | queryString += "&time=" + req.body.time_from[0] 86 | 87 | return res.redirect("/study" + queryString) 88 | } catch (error) { 89 | console.log(error) 90 | } 91 | 92 | 93 | } 94 | 95 | 96 | module.exports = { 97 | pageLanding, 98 | pageStudy, 99 | pageGiveClasses, 100 | saveClasses 101 | } -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/src/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express') 2 | const server = express() 3 | 4 | const { pageLanding, pageStudy, pageGiveClasses, saveClasses } = require('./pages') 5 | 6 | const nunjucks = require('nunjucks') 7 | 8 | 9 | nunjucks.configure('src/views', { 10 | express: server, 11 | noCache: true, 12 | }) 13 | 14 | server 15 | 16 | .use(express.urlencoded({ extended: true })) 17 | server.use(express.static("public")) 18 | 19 | .get("/", pageLanding) 20 | 21 | .get("/study", pageStudy) 22 | 23 | .get("/give-classes", pageGiveClasses) 24 | .post("/save-class", saveClasses) 25 | 26 | .listen(5500) -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/src/utils/format.js: -------------------------------------------------------------------------------- 1 | function convertHoursToMinutes(time) { 2 | const [hour, minutes] = time.split(':') 3 | return Number((hour * 60) + minutes) 4 | } 5 | 6 | const subjects = [ 7 | "Artes", 8 | "Biologia", 9 | "Ciências", 10 | "Educação Física", 11 | "Física", 12 | "Geografia", 13 | "História", 14 | "Matemática", 15 | "Português", 16 | "Química", 17 | ] 18 | 19 | const weekdays = [ 20 | "Domingo", 21 | "Segunda-feira", 22 | "Terça-feira", 23 | "Quarta-feira", 24 | "Quinta-feira", 25 | "Sexta-feira", 26 | "Sábado", 27 | ] 28 | 29 | function getSubject(subjectNumber) { 30 | const position = +subjectNumber - 1 31 | return subjects[position] 32 | } 33 | 34 | module.exports = { 35 | subjects, 36 | weekdays, 37 | getSubject, 38 | convertHoursToMinutes 39 | } -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/src/views/give-classes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Proffy | Sua plataforma de estudos online 15 | 16 | 17 | 18 |
19 |
20 |
21 | 22 | Voltar 23 | Proffy 24 |
25 |
26 | Que incrível que você quer dar aulas 27 |

O primeiro passo é preencher esse formulário de inscrição

28 |
29 |
30 | 31 |
32 |
33 |
34 | Seus dados 35 | 36 |
37 | 38 | 39 |
40 |
41 | 42 | 43 |
44 |
45 | 46 | 47 |
48 |
49 | 50 | 51 |
52 |
53 | 54 |
55 | Sobre a Aula 56 |
57 | 58 | 64 | 65 |
66 | 67 |
68 | 71 | 72 | 73 |
74 |
75 | 76 |
77 | Horários disponíveis 78 | 79 | 80 | 81 |
82 |
83 | 84 | 90 |
91 |
92 | 93 | 94 |
95 |
96 | 97 | 98 |
99 |
100 |
101 |
102 | 103 | 111 | 112 |
113 | 114 |
115 | 116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/src/views/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Proffy | Sua plataforma de estudos online 12 | 13 | 14 | 15 |
16 |
17 | Proffy 18 |

Sua plataforma de estudos online.

19 |
20 | 21 | Plataforma de estudos 22 | 23 |
24 | 25 | Estudar 26 | Estudar 27 | 28 | 29 | Dar Aulas 30 | Dar Aulas 31 | 32 |
33 | 34 |

35 | Total de 200 conexões já realizadas 36 | Coração roxo 37 |

38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /desafios/Day21-10-nlw/src/views/study.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Proffy | Sua plataforma de estudos online 14 | 15 | 16 | 17 |
18 |
19 |
20 | 21 | Voltar 22 | Proffy 23 |
24 |
25 | Esses são os proffys disponíveis 26 |
27 |
28 | 29 | 36 |
37 |
38 | 39 | 45 |
46 |
47 | 48 | 49 |
50 | 51 |
52 |
53 |
54 | 55 |
56 | 57 | {% if proffys == ""%} 58 |

Nenhum professor encontrado com a sua pesquisa.

59 | {%else%} 60 | 61 | {% for proffy in proffys %} 62 |
63 |
64 | {{proffy.name}} 65 |
66 | {{proffy.name}} 67 | {{proffy.subject}} 68 |
69 |
70 |

{{proffy.bio}}

71 | 77 |
78 | 79 | {%endfor%} 80 | 81 | {%endif%} 82 | 83 |
84 | 85 |
86 | 87 | 88 | -------------------------------------------------------------------------------- /desafios/Day22-27-icones/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Power 9 | 10 | 11 | 16 | 17 | -------------------------------------------------------------------------------- /desafios/Day22-27-icones/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin:0 ; 3 | padding: 0; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | min-height: 100vh; 8 | background: #0c0c0c; 9 | } 10 | label{ 11 | position: relative; 12 | width: 80px; 13 | height: 80px; 14 | cursor: pointer; 15 | border-radius: 50%; 16 | } 17 | label .btn{ 18 | position: absolute; 19 | top:0; 20 | left: 0; 21 | display: block; 22 | width: 100%; 23 | height: 100%; 24 | background: #1b1b1b; 25 | border-radius: 50%; 26 | box-shadow: 0 3px 4px rgba(0,0,0,1), 27 | inset 0 -2px 5px rgba(0,0,0,1), 28 | inset 0 2px 2px rgba(255,255,255,0.5) 29 | ; 30 | } 31 | label input[type="checkbox"]:checked .btn{ 32 | box-shadow: 0 0 0 rgba(0,0,0,1), 33 | inset 0 -2px 5px rgba(0,0,0,1), 34 | inset 0 2px 2px rgba(255,255,255,0.1) 35 | ; 36 | } 37 | label input[type="checkbox"]{ 38 | -webkit-appearance: none; 39 | } 40 | label .fa{ 41 | position: absolute; 42 | top:50%; 43 | left: 50%; 44 | transform: translate(-50%, -50%); 45 | font-size: 2.5em; 46 | color: #0c0c0c; 47 | } 48 | label input[type="checkbox"]:checked ~ .fa{ 49 | color:#00ffe7; 50 | text-shadow: 0 0 15px #00a1ff, 51 | 0 0 30px #00a1ff; 52 | } -------------------------------------------------------------------------------- /desafios/Day28icon-midia-/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Icons 9 | 10 | 11 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /desafios/Day28icon-midia-/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | list-style: none; 5 | } 6 | body{ 7 | display: flex; 8 | height: 100vh; 9 | text-align: center; 10 | align-items: center; 11 | justify-content: center; 12 | background: #262626; 13 | } 14 | ul{ 15 | display: flex; 16 | 17 | } 18 | ul li{ 19 | position: relative; 20 | display: block; 21 | color: #666; 22 | font-size: 30px; 23 | height: 60px; 24 | width: 60px; 25 | background: #171515; 26 | line-height: 60px; 27 | border-radius: 50%; 28 | margin: 0 15px; 29 | cursor: pointer; 30 | transition: .5s; 31 | } 32 | ul li::before{ 33 | position: absolute; 34 | content: ''; 35 | left: 0; 36 | /* background: #d35400; */ 37 | height: 100%; 38 | width: 100%; 39 | border-radius: 50%; 40 | z-index: -1; 41 | transform: scale(0.9); 42 | transition: .5s; 43 | } 44 | ul li:nth-child(1)::before{ 45 | background: #4267B2; 46 | } 47 | ul li:nth-child(2)::before{ 48 | background: #1DA1F2; 49 | } 50 | ul li:nth-child(3)::before{ 51 | background: #E1306C; 52 | } 53 | ul li:nth-child(4)::before{ 54 | background: #2867B2; 55 | } 56 | ul li:nth-child(5)::before{ 57 | background: #ff0000; 58 | } 59 | ul li:hover::before{ 60 | filter: blur(3px); 61 | transform: scale(1.2); 62 | /* box-shadow: 0 0 15px #d35400; */ 63 | } 64 | ul li:nth-child(1):hover:before{ 65 | box-shadow: 0 0 15px #4267B2; 66 | } 67 | ul li:nth-child(1):hover{ 68 | color: #456cba; 69 | box-shadow: 0 0 15px #4267B2; 70 | text-shadow: 0 0 15px #4267B2; 71 | } 72 | ul li:nth-child(2):hover{ 73 | color: #1DA1F2; 74 | box-shadow: 0 0 15px #1DA1F2; 75 | text-shadow: 0 0 15px #1DA1F2; 76 | } 77 | ul li:nth-child(3):hover{ 78 | color: #E1306C; 79 | box-shadow: 0 0 15px #E1306C; 80 | text-shadow: 0 0 15px #E1306C; 81 | } 82 | ul li:nth-child(4):hover{ 83 | color: #2867B2; 84 | box-shadow: 0 0 15px #2867B2; 85 | text-shadow: 0 0 15px #2867B2; 86 | } 87 | ul li:nth-child(5):hover{ 88 | color: #ff0000; 89 | box-shadow: 0 0 15px #ff0000; 90 | text-shadow: 0 0 15px #ff0000; 91 | } 92 | -------------------------------------------------------------------------------- /desafios/Day29-32-urban-fashion/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Launch Chrome against localhost", 11 | "url": "http://localhost:8080", 12 | "webRoot": "${workspaceFolder}" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /desafios/Day29-32-urban-fashion/img/back-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day29-32-urban-fashion/img/back-arrow.png -------------------------------------------------------------------------------- /desafios/Day29-32-urban-fashion/img/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day29-32-urban-fashion/img/background.png -------------------------------------------------------------------------------- /desafios/Day29-32-urban-fashion/img/cart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day29-32-urban-fashion/img/cart.png -------------------------------------------------------------------------------- /desafios/Day29-32-urban-fashion/img/img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day29-32-urban-fashion/img/img.png -------------------------------------------------------------------------------- /desafios/Day29-32-urban-fashion/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day29-32-urban-fashion/img/logo.png -------------------------------------------------------------------------------- /desafios/Day29-32-urban-fashion/img/next-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day29-32-urban-fashion/img/next-arrow.png -------------------------------------------------------------------------------- /desafios/Day29-32-urban-fashion/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Urban FASHION 8 | 9 | 10 |
11 |
12 | 13 | 21 | 22 |
23 | 24 | 25 | 26 |
27 | Coleção 2020 28 |

Você sempre
bonita

29 |

Roupas que vão esquentar o seu inverno

30 |
31 | 32 |
33 | 34 | 35 |
36 | 37 | 38 | 39 |
40 | FACEBOOK 41 | INSTAGRAM 42 | TWITTER 43 |
44 | 45 |
46 | 47 | -------------------------------------------------------------------------------- /desafios/Day29-32-urban-fashion/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | .container{ 6 | height: 100vh; 7 | width: 100%; 8 | background-image: url(./img/background.png); 9 | background-position: center; 10 | background-size: cover; 11 | padding-left: 5%; 12 | padding-right: 5%; 13 | box-sizing: border-box; 14 | position: relative; 15 | } 16 | .navbar{ 17 | width: 100%; 18 | height: 15vh; 19 | margin: auto; 20 | display: flex; 21 | align-items: center; 22 | } 23 | .logo{ 24 | width: 160px; 25 | cursor: pointer; 26 | } 27 | .cart{ 28 | width: 40px; 29 | cursor: pointer; 30 | } 31 | nav{ 32 | flex: 1; 33 | padding-left: 60px; 34 | } 35 | nav ul li{ 36 | display: inline-block; 37 | list-style: none; 38 | margin: 0px 20px; 39 | } 40 | nav ul li a{ 41 | text-decoration: none; 42 | color: #333; 43 | } 44 | .content h1{ 45 | font-size: 60px; 46 | font-weight: 100; 47 | margin-top: 24px; 48 | margin-bottom: 15px; 49 | color: #232d60; 50 | } 51 | .content p{ 52 | font-size: 20px; 53 | color: #6a7199; 54 | } 55 | .content{ 56 | margin-left: 10%; 57 | margin-top: 10%; 58 | } 59 | .content .btn{ 60 | display: inline-block; 61 | background: linear-gradient(45deg, #87adfe, #ff77cd); 62 | border-radius: 6px; 63 | padding: 10px 20px; 64 | box-sizing: border-box; 65 | text-decoration: none; 66 | color: #fff; 67 | box-shadow: 3px 8px 22px rgba(94,28,68,0.15); 68 | } 69 | .arrow-icons{ 70 | margin-top: 40px; 71 | display: flex; 72 | } 73 | .arrow-icons img{ 74 | width: 40px; 75 | margin-right: 25px; 76 | } 77 | .feature-img{ 78 | height: 90%; 79 | position: absolute; 80 | bottom: 0; 81 | right: 160px; 82 | } 83 | .social-links{ 84 | transform: rotate(-90deg); 85 | position: absolute; 86 | left: -80px; 87 | bottom: 180px; 88 | } 89 | .social-links a{ 90 | text-decoration: none; 91 | color: #6a7199; 92 | padding-right: 20px; 93 | font-size: 14px; 94 | } 95 | 96 | -------------------------------------------------------------------------------- /desafios/Day35-40-gym_flash_video/gb.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day35-40-gym_flash_video/gb.mp4 -------------------------------------------------------------------------------- /desafios/Day35-40-gym_flash_video/img/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day35-40-gym_flash_video/img/close.png -------------------------------------------------------------------------------- /desafios/Day35-40-gym_flash_video/img/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day35-40-gym_flash_video/img/facebook.png -------------------------------------------------------------------------------- /desafios/Day35-40-gym_flash_video/img/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day35-40-gym_flash_video/img/instagram.png -------------------------------------------------------------------------------- /desafios/Day35-40-gym_flash_video/img/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day35-40-gym_flash_video/img/menu.png -------------------------------------------------------------------------------- /desafios/Day35-40-gym_flash_video/img/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/Day35-40-gym_flash_video/img/twitter.png -------------------------------------------------------------------------------- /desafios/Day35-40-gym_flash_video/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | GYM 8 | 9 | 10 |
11 | 18 |
19 | 20 | 47 | 48 | 56 | 57 | -------------------------------------------------------------------------------- /desafios/Day35-40-gym_flash_video/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,700,800,900&display=swap'); 2 | 3 | *{ 4 | margin:0; 5 | padding:0; 6 | box-sizing: border-box; 7 | font-family: 'Poppins', sans-serif; 8 | } 9 | section{ 10 | position: absolute; 11 | right: 0; 12 | width: 100%; 13 | min-height: 100vh; 14 | padding: 100px; 15 | display: flex; 16 | justify-content: flex-start; 17 | background: #111; 18 | transition: 0.5s; 19 | } 20 | .banner .active{ 21 | right: 300px; 22 | } 23 | header{ 24 | position: absolute; 25 | top: 0; 26 | left: 0; 27 | width: 100%; 28 | padding: 40px 100px; 29 | display: flex; 30 | justify-content: space-between; 31 | align-items: center; 32 | z-index: 1000; /*visible the video*/ 33 | } 34 | header .logo{ 35 | color: #fff; 36 | text-transform: uppercase; 37 | cursor: pointer; 38 | } 39 | .toggle{ 40 | position: relative; 41 | width: 60px; 42 | height: 60px; 43 | background: url(./img/menu.png); 44 | background-repeat: no-repeat; 45 | background-size: 30px; 46 | background-position: center; 47 | cursor: pointer; 48 | } 49 | .toggle.active{ 50 | background: url(./img/close.png); 51 | background-repeat: no-repeat; 52 | background-size: 25px; 53 | background-position: center; 54 | cursor: pointer; 55 | } 56 | section video{ 57 | position: absolute; 58 | top:0 ; 59 | left: 0; 60 | width: 100%; 61 | height: 100%; 62 | object-fit: cover; 63 | } 64 | .overlay{ 65 | position: absolute; 66 | top:0 ; 67 | left: 0; 68 | width: 100%; 69 | height: 100%; 70 | background: linear-gradient(to left, #00f, #f00);/*efect color the video*/ 71 | mix-blend-mode: overlay; /*visible the video*/ 72 | } 73 | .text{ 74 | position: relative; 75 | z-index: 10; /*visible the text*/ 76 | } 77 | .text h2{ 78 | font-size: 6em; 79 | font-weight: 800; 80 | color: #fff; 81 | line-height: 1em; 82 | text-transform: uppercase; 83 | } 84 | .text h3{ 85 | font-size: 6em; 86 | font-weight: 700; 87 | color: #fff; 88 | line-height: 1em; 89 | text-transform: uppercase; 90 | } 91 | .text p{ 92 | position: relative; 93 | font-size: 1.1em; 94 | margin: 20px 0; 95 | font-weight: 400; 96 | max-width: 700px; 97 | color: #fff; 98 | } 99 | .text a{ 100 | display: inline-block; 101 | font-size: 1.1em; 102 | background: #fff; 103 | padding: 10px 30px; 104 | text-transform: uppercase; 105 | text-decoration: none; 106 | font-weight: 500; 107 | margin-top: 10px; 108 | color: #111; 109 | letter-spacing: 2px; 110 | } 111 | .sci{ 112 | position: absolute; 113 | z-index: 10; 114 | bottom: 20px; 115 | display: flex; 116 | justify-content: center; 117 | align-items: center; 118 | } 119 | .sci li{ 120 | list-style: none; 121 | } 122 | .sci li a{ 123 | display: inline-block; 124 | margin-right: 20px; 125 | filter: invert(1); 126 | transform: scale(0.5); 127 | } 128 | .menu{ 129 | position:fixed; 130 | top:0 ; 131 | right:0; 132 | width: 300px; 133 | height: 100%; 134 | display:flex ; 135 | justify-content: center; 136 | align-items: center; 137 | /*z-index: 10;*/ 138 | background: #fff; 139 | } 140 | .menu ul{ 141 | position: relative; 142 | } 143 | .menu ul li{ 144 | position: relative; 145 | list-style: none; 146 | text-align: center; 147 | } 148 | .menu ul li a{ 149 | text-decoration: none; 150 | font-size: 24px; 151 | color: #111; 152 | } 153 | 154 | @media (max-widht: 991px){ 155 | section, 156 | selection header{ 157 | padding: 40px; 158 | } 159 | .text h2{ 160 | font-size: 3em; 161 | } 162 | .text h3{ 163 | font-size: 2em; 164 | } 165 | } -------------------------------------------------------------------------------- /desafios/Day55-88-Amazon-Prime/script.js: -------------------------------------------------------------------------------- 1 | //load window 2 | 3 | window.onload = function(){ 4 | //code 5 | document.getElementById("load").style.display = "none"; 6 | 7 | document.getElementById("home").style.display = "block"; 8 | } 9 | 10 | /*setTimeout(function(){ 11 | document.getElementById("load").style.display = "none"; 12 | 13 | document.getElementById("home").style.display = "block"; 14 | }, 5000);*/ 15 | 16 | 17 | window.onscroll = function() { 18 | var scroll = window.pageYOffset; 19 | if (scroll > 20) { 20 | document.getElementById("header").style.display = "none"; } 21 | else { 22 | document.getElementById("header").style.display = "initial"; 23 | 24 | } 25 | 26 | } 27 | 28 | var counter = 0; 29 | 30 | var images = [ 31 | 32 | "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTlxT3a0KvNjeyoYt5oWO3JxmBz1oXRg4qjA&usqp=CAU", 33 | 34 | "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRpcNm9-DIRPevr43a4SZvqy1S8KgpgwrzS_w&usqp=CAU", 35 | "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyJ1mWn3WqmjoIqWDDSLRw30WQgGgAQAjYwg&usqp=CAU", 36 | 37 | "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqgXi5bSr555HTEkPZwQtA5yWRdP0whEgRTB9aosfqtI3arlRT&s", 38 | 39 | "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT3uvafsa2yzzsBMbnClGQ-9rGtUA7xFCysqw&usqp=CAU", 40 | 41 | "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6eLIlq8xmjBIY4sTPhgCbl2T346dGs3Nbdw&usqp=CAU" 42 | ]; 43 | 44 | 45 | //image slider 46 | setInterval ( function changeImg () { 47 | 48 | var img = document.querySelector("#img-slide"); 49 | var img2 = document.querySelector("#img-slide2"); 50 | var img3 = document.querySelector("#img-slide3"); 51 | var img4 = document.querySelector("#img-slide4"); 52 | 53 | img.src = images[counter]; 54 | img2.src = images[counter]; 55 | img3.src = images[counter]; 56 | img4.src = images[counter]; 57 | counter++; 58 | 59 | if(counter > images.length - 1){ 60 | counter = 0; 61 | } 62 | }, 2000); 63 | 64 | 65 | //tabs 66 | function tabs(tabc) { 67 | var i; 68 | var tabs = document.getElementsByClassName("tabsc"); 69 | for (i = 0; i < tabs.length; i++) { 70 | tabs[i].style.display = "none"; 71 | } 72 | document.getElementById(tabc).style.display = "block"; 73 | } -------------------------------------------------------------------------------- /desafios/Day55-88-Amazon-Prime/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | user-select:none; 3 | margin:0; 4 | padding:0; 5 | box-sizing:border-box; 6 | outline:none; 7 | user-select:none; 8 | } 9 | 10 | :root{ 11 | --amazon-color:#020202; 12 | --background:#232F3E; 13 | } 14 | 15 | body{ 16 | background-color:var(--amazon-color); 17 | } 18 | 19 | #load{ 20 | height:100%; 21 | width:100%; 22 | z-index:3; 23 | top:0; 24 | position:fixed; 25 | display:flex; 26 | justify-content:center; 27 | align-items:center; 28 | background-color:var(--amazon-color); 29 | } 30 | 31 | #load img{ 32 | height:30px; 33 | width:100px; 34 | transform:scale(2); 35 | } 36 | 37 | 38 | #header{ 39 | position:fixed; 40 | width:100%; 41 | top:0; 42 | } 43 | #ts{ 44 | margin-top:50px; 45 | } 46 | #cont{ 47 | background:var(--amazon-color); 48 | padding:6px 12px; 49 | } 50 | #cont ul{ 51 | display:flex; 52 | justify-content:center; 53 | align-items:center; 54 | } 55 | 56 | #cont img{ 57 | height:25px; 58 | margin-top:3px; 59 | transform:scale(1); 60 | width:65px; 61 | } 62 | #cont ul li{ 63 | list-style-type:none; 64 | } 65 | #cont ul li :nth-child(1){ 66 | left:0; 67 | } 68 | /*second nav */ 69 | nav{ 70 | height:20px; 71 | width:100%; 72 | position:sticky; 73 | top:0px; 74 | } 75 | nav ul{ 76 | background-color:var(--amazon-color); 77 | color:white; 78 | display:flex; 79 | flex-grow:1; 80 | padding:1px 8px; 81 | justify-content:space-between; 82 | border-bottom:1.5px solid #020202; 83 | } 84 | nav ul li{ 85 | list-style-type:none; 86 | } 87 | nav ul div{ 88 | padding:8px 0px; 89 | width:80px; 90 | text-align:center; 91 | border-bottom:1.5px solid #020202; 92 | } 93 | /*nav ul div:hover{ 94 | border-bottom:1.5px solid #fff; 95 | }*/ 96 | /*nav end*/ 97 | 98 | #sliderr img{ 99 | width:98%; 100 | margin-top:8px; 101 | height:180px; 102 | display:flex; 103 | justify-content:center; 104 | transition:0.5s; 105 | } 106 | 107 | /* find */ 108 | #search-par{ 109 | display:flex; 110 | justify-content:center; 111 | color:#eee; 112 | width:100%; 113 | margin-top:30px; 114 | } 115 | #search-par input{ 116 | height:30px 117 | min-width:0px; 118 | padding-left:1px; 119 | border:none; 120 | font-size:14px; 121 | color:white; 122 | background-color:#282C35; 123 | border-top:1px solid #282C35; 124 | border-bottom:1px solid #282C35; 125 | } 126 | #search-par #search1{ 127 | padding:12px; 128 | background: #282C35; 129 | border-radius:5px 0px 0px 5px; 130 | border-top:1px solid #282C35; 131 | border-bottom:1px solid #282C35; 132 | border-left:1px solid #282C35; 133 | } 134 | 135 | #search-par #icons2{ 136 | padding:12px; 137 | background: #282C35; 138 | border-radius:0px 5px 5px 0px; 139 | border-top:1px solid #282C35; 140 | border-bottom:1px solid #282C35; 141 | border-right:1px solid #282C35; 142 | } 143 | 144 | /* find*/ 145 | /*downloads*/ 146 | #down-cont{ 147 | width:100%; 148 | height:80vh; 149 | display:flex; 150 | flex-direction:column; 151 | justify-content:center; 152 | background:#020202; 153 | } 154 | 155 | #down-cont .down-title{ 156 | padding:10px 20px; 157 | position:fixed; 158 | top:8px; 159 | font-size:17px; 160 | color:#eee; 161 | } 162 | #down-txt{ 163 | display:flex; 164 | position:fixed; 165 | font-size:22px; 166 | font-weight:bold; 167 | color:white; 168 | flex-direction:column; 169 | justify-content:center; 170 | align-items:center; 171 | width:100%; 172 | height:77vh; 173 | } 174 | 175 | #txt-si{ 176 | margin-top:10px; 177 | font-size:13px; 178 | } 179 | /* downloads */ 180 | /* my stuff*/ 181 | .stuf-title{ 182 | display:flex; 183 | padding:23px 8px; 184 | color:#fff; 185 | width:100%; 186 | justify-content:space-between; 187 | align-items:center; 188 | } 189 | #s-t{ 190 | display:flex; 191 | width:30%; 192 | justify-content:space-between; 193 | align-items:center; 194 | } 195 | #s-t img{ 196 | height:40px; 197 | width:40px; 198 | border-radius:50%; 199 | margin-right:10px; 200 | } 201 | .stuf-title i{ 202 | right:0; 203 | } 204 | 205 | #stuf-nav{ 206 | padding:14px 0px; 207 | display:flex; 208 | justify-content:center; 209 | color:#fff; 210 | padding-bottom:0; 211 | border-bottom:0.5px solid #999; 212 | } 213 | 214 | #stuf-nav #w-list{ 215 | padding:9px 0px; 216 | border-bottom:1.5px solid #eee; 217 | } 218 | 219 | .w-head{ 220 | width:100%; 221 | display:flex; 222 | color:white; 223 | padding:15px 25px; 224 | justify-content:space-between; 225 | align-items:center; 226 | } 227 | .w-head .w-btm{ 228 | padding:4px 5px; 229 | background:green; 230 | border-radius:3px; 231 | color:white; 232 | } 233 | 234 | #w-movie{ 235 | margin-top:4px; 236 | display:flex; 237 | width:100%; 238 | height:90px; 239 | color:white; 240 | background:#252525; 241 | } 242 | #w-movie #w-img{ 243 | height:90px; 244 | width:140px; 245 | background:red; 246 | } 247 | #w-img img{ 248 | height:90px; 249 | width:140px; 250 | } 251 | 252 | #w-movie #wm-details{ 253 | padding:4px 10px; 254 | 255 | } 256 | /* my stu 257 | ff end*/ 258 | /*toggle*/ 259 | .toggle { 260 | width: 50px; 261 | height: 15px; 262 | position: relative; 263 | display: inline-block; 264 | } 265 | 266 | .toggle input { 267 | display:none; 268 | } 269 | 270 | .slider { 271 | position: absolute; 272 | top: 0; 273 | left: 0; 274 | right: 0; 275 | bottom: 0; 276 | background-color: #eee; 277 | transition: 0.1s; 278 | } 279 | 280 | .slider{ 281 | border-radius: 30px; 282 | } 283 | 284 | .slider:before { 285 | border-radius: 50%; 286 | } 287 | 288 | 289 | .slider:before { 290 | position: absolute; 291 | content: ""; 292 | height: 25px; 293 | width: 25px; 294 | background-color:#fff; 295 | transition: 0.3s; 296 | left: 0px; 297 | bottom: -5px; 298 | } 299 | 300 | input:checked + .slider { 301 | background-color: #2196F3; 302 | } 303 | 304 | input:checked + .slider:before { 305 | left:25px; 306 | } 307 | 308 | /*toggle*/ 309 | 310 | /*settings*/ 311 | 312 | #settings-par{ 313 | width:100%; 314 | background-color:#020202; 315 | display:flex; 316 | flex-direction:column; 317 | } 318 | 319 | #settings-par .set-title{ 320 | display:flex; 321 | justify-content:space-between; 322 | color:white; 323 | font-size:19px; 324 | padding:15px 15px; 325 | font-weight:bold; 326 | } 327 | 328 | .settings{ 329 | padding:10px 12px; 330 | } 331 | #s-l-p{ 332 | color:#ddd; 333 | padding:14px 0px; 334 | line-height:20px; 335 | border-bottom:0.5px solid #555; 336 | } 337 | #s-l-p p{ 338 | font-size:17px; 339 | color:#eee; 340 | } 341 | #s-l-p h6{ 342 | font-weight:2; 343 | font-size:14px; 344 | letter-spacing:0.5px; 345 | } 346 | /* settings */ 347 | /*stream*/ 348 | .stream-title{ 349 | padding:15px 10px; 350 | display:flex; 351 | justify-content:space-between; 352 | color:#eee; 353 | } 354 | 355 | .stream-title div{ 356 | font-size:19px; 357 | font-weight:bold; 358 | } 359 | 360 | #s-d-list{ 361 | padding:7px 10px; 362 | } 363 | #s-d-box{ 364 | display:flex; 365 | justify-content:space-between; 366 | color:#ddd; 367 | padding:14px 0px; 368 | line-height:20px; 369 | border-bottom:0.5px solid #555; 370 | } 371 | 372 | .s-d-txt p{ 373 | font-size:17px; 374 | color:#eee; 375 | } 376 | .s-d-txt h6{ 377 | font-weight:2; 378 | font-size:14px; 379 | letter-spacing:0.5px; 380 | } 381 | /*stream end*/ 382 | /*notifications*/ 383 | #noti-title{ 384 | display:flex; 385 | justify-content:space-between; 386 | font-size:19px; 387 | color:#fff; 388 | font-weight:bold; 389 | padding:18px 10px; 390 | } 391 | 392 | #noti-list{ 393 | padding:0px 10px; 394 | } 395 | #noti-l{ 396 | padding:20px 0px; 397 | display:flex; 398 | justify-content:space-between; 399 | border-bottom:0.5px solid #555; 400 | } 401 | 402 | #noti-t{ 403 | color:#ddd; 404 | line-height:20px; 405 | } 406 | 407 | #noti-l p{ 408 | font-size:17px; 409 | color:#eee; 410 | font-weight:bold; 411 | } 412 | /*notifications*/ 413 | 414 | /*film*/ 415 | #mcont{ 416 | display:flex; 417 | flex-direction:column; 418 | width:100%; 419 | color:white; 420 | margin-top:9px; 421 | font-size:17px; 422 | font-weight:bold; 423 | background-color:#020202; 424 | padding:10px 13px; 425 | } 426 | 427 | #mcont #title{ 428 | display:flex; 429 | align-items:center; 430 | } 431 | 432 | #film-img-par{ 433 | overflow-y:scroll; 434 | display:flex; 435 | width:100%; 436 | flex-direction:row; 437 | } 438 | #mcont #img img{ 439 | margin-top:10px; 440 | margin-left:5px; 441 | height:100px; 442 | width:150px; 443 | border-radius:4px; 444 | background:#eee; 445 | } 446 | /*film*/ 447 | 448 | /* footer */ 449 | footer{ 450 | display:flex; 451 | width:100%; 452 | bottom:0; 453 | justify-content:space-around; 454 | align-items:center; 455 | padding:6px 2px; 456 | position:fixed; 457 | left:0; 458 | right:4px; 459 | color:#fff; 460 | background:var(--amazon-color); 461 | /* box-shadow:0px -0.5px 2px grey;*/ 462 | } 463 | 464 | footer div{ 465 | font-size:8px; 466 | text-align:center; 467 | justify-content:center; 468 | align-items:center; 469 | } 470 | 471 | footer i{ padding-left:4px;} 472 | /*footer end*/ 473 | 474 | footer img{ 475 | height:18px; 476 | width:18px; 477 | margin-bottom:3px; 478 | } 479 | 480 | footer span{ 481 | transform:scale(1); 482 | } 483 | #s-f{ 484 | margin-bottom:40px; 485 | } 486 | /*¯\_(ツ)_/¯*/ 487 | #b-bottom{ 488 | position:sticky; 489 | background:#020202; 490 | display:flex; 491 | left:0; 492 | top:10px; 493 | height:3px; 494 | width:100%; 495 | } 496 | #b-bottom #b-clr{ 497 | background-color:#eee; 498 | height:1.5px; 499 | width:76px; 500 | width:25%; 501 | } -------------------------------------------------------------------------------- /desafios/day03table/table.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | font-family: 'Roboto', sans-serif; 5 | background: #000022; 6 | } 7 | h2{ 8 | text-align: center; 9 | color: rgb(138, 45, 45); 10 | margin: 50px auto; 11 | } 12 | .table-box{ 13 | margin: 50px auto; 14 | } 15 | .table-row{ 16 | display: table; 17 | width: 80%; 18 | margin: 10px auto; 19 | font-family: sans-serif; 20 | background: transparent; 21 | padding: 12px 0 ; 22 | color: rgb(138, 45, 45); 23 | font-size: 16px; 24 | box-shadow: 0 0.2pc 4px 0 rgba(185, 178, 196, 0.788); 25 | /* 0.2pc: sombreado */ 26 | } 27 | .table-cell{ 28 | display: table-cell; 29 | width: 30%; 30 | text-align: center; 31 | padding: 10px 0; 32 | border-radius: 1px solid #d6d4d4; 33 | vertical-align: middle; 34 | } 35 | .table-head{ 36 | background: #8665f7; 37 | box-shadow: none; 38 | color: #fff; 39 | font-weight: 700; 40 | } 41 | .table-head .last-cell{ 42 | border-right: none ; 43 | } 44 | .last-cell{ 45 | border-right: none; 46 | } 47 | .firsh-cell{ 48 | text-align: left; 49 | padding-left: 10px; 50 | } -------------------------------------------------------------------------------- /desafios/day03table/table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tabela Html e CSS 9 | 10 | 11 |
12 |

Treino para iniciantes

13 |
14 |
15 |

Day

16 |
17 |
18 |

Treino

19 |
20 |
21 |

Intervalo/séries

22 |
23 |
24 | 25 |
26 |
27 |

Segunda

28 |
29 |
30 |

Tipo A

31 |
32 |
33 |

01:00m entre as series

34 |
35 |
36 | 37 |
38 |
39 |

Terça

40 |
41 |
42 |

Tipo B

43 |
44 |
45 |

01:00m entre as series

46 |
47 |
48 |
49 |
50 |

Quarta

51 |
52 |
53 |

Tipo C

54 |
55 |
56 |

00:40s entre as séries

57 |
58 |
59 |
60 |
61 |

Quinta

62 |
63 |
64 |

Tipo A

65 |
66 |
67 |

01:00m entre as séries

68 |
69 |
70 |
71 |
72 |

Sexta

73 |
74 |
75 |

Tipo B

76 |
77 |
78 |

01:00m entre as séries

79 |
80 |
81 | 82 |
83 |
84 | 85 |
86 | 87 | -------------------------------------------------------------------------------- /desafios/day100/assets/Img_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/day100/assets/Img_02.png -------------------------------------------------------------------------------- /desafios/day100/assets/Img_05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/day100/assets/Img_05.png -------------------------------------------------------------------------------- /desafios/day100/assets/Img_06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/day100/assets/Img_06.png -------------------------------------------------------------------------------- /desafios/day100/assets/Img_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juselania/100daysofcode/efe4ca6c5e26a824b2e8554ba4d323b729a829f7/desafios/day100/assets/Img_1.png -------------------------------------------------------------------------------- /desafios/day100/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Done 100 days of code 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | 23 |
100 Days Of Code
24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /desafios/day100/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body{ 3 | width: 100%; 4 | height: 100%; 5 | background: radial-gradient(ellipse at center, #160909 0%, #160909 45%, #291111 100% ); 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | overflow: hidden; 10 | } 11 | 12 | .container{ 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | flex-direction: column; 17 | } 18 | .pumpkin{ 19 | height: 11em; 20 | width: 15em; 21 | background: #f68632; 22 | border: 0.4em solid #a14907; 23 | border-radius: 70%/110%; 24 | position: relative; 25 | box-shadow: inset 0 0 20px #a14907, 0 0 30px -4px red; 26 | z-index: 1; 27 | animation: float 3s infinite; 28 | } 29 | 30 | .pumpkin .texture{ 31 | height: 10.8em; 32 | width: 6.5em; 33 | position: absolute; 34 | bottom: -0.4em; 35 | left: 4em; 36 | border-radius: 70%/130%; 37 | border-bottom: 0.5em solid #a14907; 38 | border-top: 0.5em solid #a14907; 39 | } 40 | .pumpkin .texture::after{ 41 | content: ''; 42 | display: block; 43 | height: 10.7em; 44 | width: 12em; 45 | position: absolute; 46 | bottom: -0.4em; 47 | left: -2.5em; 48 | border-radius: 70%/130%; 49 | border-bottom: 0.5em solid #a14907; 50 | border-top: 0.5em solid #a14907; 51 | } 52 | 53 | .pumpkin .root{ 54 | background: #517f54; 55 | height: 2.8em; 56 | width: 1.25em; 57 | position: absolute; 58 | left: calc(7.5em - 0.625em); 59 | top: -2.7em; 60 | transform: rotate(5deg); 61 | border-radius: 30% 20% 70% 10%; 62 | z-index: 1; 63 | box-shadow: inset 0 0 10px #29412b; 64 | } 65 | 66 | .pumpkin .eye{ 67 | position: absolute; 68 | width: 0; 69 | height: 0; 70 | border-top: 0.8em solid transparent; 71 | top: 2.8em; 72 | } 73 | 74 | .pumpkin .eye.right{ 75 | right: 3.7em; 76 | border-left: 2.4em solid #401b03; 77 | border-bottom: 2.1em solid transparent; 78 | transform: rotate(30deg); 79 | } 80 | 81 | .pumpkin .eye.left{ 82 | left: 3.7em; 83 | transform: rotate(-30deg); 84 | border-bottom: 2.1em solid transparent; 85 | border-right: 2.4em solid #401b03; 86 | } 87 | 88 | .pumpkin .mouth{ 89 | border-bottom: 1em solid #401b03; 90 | position: absolute; 91 | width: 4em; 92 | height: 2em; 93 | bottom: 1.5em; 94 | } 95 | 96 | .pumpkin .mouth.right{ 97 | right: 3.6em; 98 | border-radius: 0 0 100% 0; 99 | } 100 | 101 | .pumpkin .mouth.left{ 102 | left: 3.6em; 103 | border-radius: 0 0 0 100% ; 104 | } 105 | 106 | .pumpkin .teeth{ 107 | border-left: 0.8em solid #401b03; 108 | border-bottom: 0 solid transparent; 109 | border-top: 0.8em solid transparent; 110 | width: 0.5em; 111 | height: 1em; 112 | position: absolute; 113 | top: 7.7em; 114 | left: 7.25em; 115 | } 116 | 117 | .pumpkin .teeth::before, 118 | .pumpkin .teeth::after{ 119 | content: ''; 120 | display: block; 121 | position: absolute; 122 | width: 0; 123 | height: 0; 124 | border-top: 0.8em solid transparent; 125 | } 126 | 127 | .pumpkin .teeth::before{ 128 | right: 2.2em; 129 | top: -0.65em; 130 | transform: rotate(30deg); 131 | border-bottom: 0.5em solid transparent; 132 | border-left: 1em solid #401b03; 133 | } 134 | 135 | .pumpkin .teeth::after{ 136 | left:1em; 137 | top: -0.65em; 138 | transform: rotate(30deg); 139 | border-bottom: 0.5em solid transparent; 140 | border-left: 1em solid #401b03; 141 | } 142 | 143 | .shadow{ 144 | margin: 10% auto 0; 145 | background: #000; 146 | width: 230px; 147 | height: 50px; 148 | border-radius: 50px; 149 | animation: zoom 3s infinite; 150 | 151 | color: #f68632; 152 | font-size: 28px; 153 | } 154 | 155 | @keyframes float{ 156 | 0%, 100%{ 157 | transform: translateY(0); 158 | } 159 | 50%{ 160 | transform: translateY(-10%); 161 | } 162 | } 163 | 164 | @keyframes zoom{ 165 | 0%, 100%{ 166 | transform: scale(1); 167 | } 168 | 50%{ 169 | transform: scale(0.8); 170 | } 171 | } -------------------------------------------------------------------------------- /desafios/day36/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Efeito CSS 8 | 9 | 10 |
11 |
12 | 13 | 14 | 15 |
16 | 17 |
18 | 19 | 20 | 21 |
22 |
23 | 24 | -------------------------------------------------------------------------------- /desafios/day36/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | html, body{ 7 | display: grid; 8 | height: 100%; 9 | place-items: center; 10 | background: #000; 11 | } 12 | .center{ 13 | display: flex; 14 | text-align: center; 15 | align-items: center; 16 | justify-content: center; 17 | } 18 | .outer{ 19 | position: relative; 20 | margin: 0 50px; 21 | background: #000; 22 | } 23 | .button{ 24 | height: 70px; 25 | width: 220px; 26 | border-radius: 50px; 27 | } 28 | .circle{ 29 | height: 200px; 30 | width: 220px; 31 | border-radius: 50%; 32 | } 33 | .outer button, .outer span{ 34 | position:absolute; 35 | top: 50%; 36 | left: 50%; 37 | transform: translate(-50%, -50%); 38 | } 39 | .outer button{ 40 | background: #111; 41 | color: #f2f2f2; 42 | outline: none; 43 | border: none; 44 | font-size: 20px; 45 | z-index: 9; 46 | letter-spacing: 1px; 47 | text-transform: uppercase; 48 | cursor: pointer; 49 | } 50 | .button button{ 51 | height: 60px; 52 | width: 210px; 53 | border-radius: 50px; 54 | } 55 | .circle button{ 56 | height: 180px; 57 | width: 180px; 58 | border-radius: 50%; 59 | } 60 | .outer span{ 61 | height: 100%; 62 | width: 100%; 63 | background: inherit; 64 | } 65 | .button span{ 66 | border-radius: 50px; 67 | } 68 | .circle span{ 69 | border-radius: 50%; 70 | } 71 | .outer:hover span:nth-child(1){ 72 | filter: blur(7px); /* deixa a cor vazada com um sombreado */ 73 | } 74 | .outer:hover span:nth-child(2){ 75 | filter: blur(14px); 76 | } 77 | .outer:hover{/* rotação da cor infinita*/ 78 | background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0); 79 | animation: rotate 1.5s linear infinite; 80 | } 81 | @keyframes rotate{ 82 | 0%{ 83 | filter: hue-rotate(0deg); 84 | } 85 | 100%{ 86 | filter: hue-rotate(360deg); 87 | } 88 | } 89 | /*responsividade*/ 90 | @media(max-width: 640px){ 91 | .center{ 92 | flex-wrap: wrap; 93 | flex-direction: column; 94 | } 95 | .outer{ 96 | margin: 50px 0px; 97 | } 98 | } -------------------------------------------------------------------------------- /desafios/day38/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Glowing | Efeito do Botão 8 | 9 | 10 |
11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /desafios/day38/style.css: -------------------------------------------------------------------------------- 1 | @import url(); 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: 'Poppins', sans-serif; 7 | } 8 | html,body{ 9 | display: grid; 10 | height: 100%; 11 | place-items: center; 12 | background: #000; 13 | overflow: hidden; 14 | } 15 | button{ 16 | position: relative; 17 | height: 60px; 18 | width: 200px; 19 | margin: 0 35px; 20 | border-radius: 50px; 21 | border: none; 22 | outline: none; 23 | background: #111; 24 | color: #fff; 25 | font-size: 20px; 26 | letter-spacing: 2px; 27 | text-transform: uppercase; 28 | cursor: pointer; 29 | } 30 | button:first-child:hover{ 31 | background-size: 400%; 32 | background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); 33 | } 34 | button:last-child:hover{ 35 | background-size: 400%; 36 | background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199); 37 | } 38 | button:first-child:before, 39 | button:last-child:before{ 40 | content: ''; 41 | position: absolute; 42 | background: inherit ; 43 | top: -5px; 44 | right: -5px; 45 | bottom: -5px; 46 | left: -5px; 47 | border-radius: 50px; 48 | filter: blur(20px); 49 | opacity: 0; 50 | transition: opacity 0.5s; 51 | } 52 | button:first-child:hover:before, 53 | button:last-child:hover:before{ 54 | opacity: 1; 55 | z-index: -1; 56 | } 57 | button:hover{ 58 | z-index: 1; 59 | animation: glow 8s linear infinite; 60 | } 61 | @keyframes glow{ 62 | 0%{ 63 | background-position: 0%; 64 | } 65 | 100%{ 66 | background-position: 400%; 67 | } 68 | } -------------------------------------------------------------------------------- /desafios/day89-92-menu/menu.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,700,800,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 | .navigation{ 11 | display: flex; 12 | justify-content: center; 13 | align-items:center; 14 | min-height: 100vh; 15 | overflow: hidden; 16 | } 17 | 18 | .navigation ul{ 19 | position: relative; 20 | } 21 | 22 | .navigation ul li{ 23 | text-align: center; 24 | list-style: none; 25 | } 26 | 27 | .navigation ul li a{ 28 | color: #333; 29 | text-decoration: none; 30 | font-size: 3rem; 31 | padding: 5px 20px; 32 | display: inline-flex; 33 | font-weight: 700; 34 | transition: 0.5s; 35 | } 36 | 37 | .navigation ul li:hover a{ 38 | color: #0002; 39 | } 40 | 41 | .navigation ul li:hover a{ 42 | color: #000; 43 | background: #fff; 44 | } 45 | 46 | .navigation ul li a:before{ 47 | content: ''; 48 | position: absolute; 49 | top: 50%; 50 | left:40%; 51 | transform: translate(-50%, -50%); 52 | display: flex; 53 | justify-content: center; 54 | font-size: 5em; 55 | color: rgba(0,0,0.1); 56 | border-radius: 50%; 57 | z-index: -1; 58 | opacity:0; 59 | font-weight:900; 60 | text-transform: uppercase; 61 | letter-spacing: 500px; 62 | 63 | transition: letter-spacing 0.5s,left:0.5s; 64 | } 65 | .navigation ul li a:hover:before{ 66 | content: attr(data-text); 67 | opacity:0.3; 68 | 69 | letter-spacing: 10px; 70 | width:1800px; 71 | height:1800px; 72 | 73 | align-items: center; 74 | } 75 | 76 | .navigation ul li:nth-child(6n+1) a:before{ 77 | background: #81ecec; 78 | } 79 | .navigation ul li:nth-child(6n+2) a:before{ 80 | background: #ff7675; 81 | } 82 | .navigation ul li:nth-child(6n+3) a:before{ 83 | background: #a29bfe; 84 | } 85 | .navigation ul li:nth-child(6n+4) a:before{ 86 | background: #fd79a8; 87 | } 88 | .navigation ul li:nth-child(6n+5) a:before{ 89 | background: #ffeaa7; 90 | } 91 | .navigation ul li:nth-child(6n+6) a:before{ 92 | background: #81ec22; 93 | } -------------------------------------------------------------------------------- /desafios/day89-92-menu/menu.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Efeitos do menu flutuante 8 | 9 | 10 |
11 | 19 |
20 | 21 | to --------------------------------------------------------------------------------