├── tarefa-modulo1.4 ├── barra.jpg ├── HTMLJPG.jpg ├── barra2.jpg ├── perfil.png └── Tarefa-Modulo1.4.html ├── tarefa-modulo1.6 ├── recursos_resiliaflix │ ├── 1917_capa.jpg │ ├── a_origem.jpg │ ├── coringa.jpg │ ├── jojo_rabit.jpg │ ├── o_poco_capa.jpg │ ├── forrest_gump.jpg │ ├── parasita_capa.jpg │ ├── vingadores_ultimato.jpg │ ├── bad_boys_para_sempre.jpg │ ├── era_uma_vez_em_hollywood.jpg │ ├── magnatas_do_crime_capa.jpg │ ├── o_homem_invisivel_capa.jpg │ └── batman_cavaleiro_das_trevas.jpg ├── night.svg ├── script.js ├── youtube.svg ├── twitter.svg ├── facebook.svg ├── pesquisafilme.js ├── instagram.svg ├── resiliaflix.html ├── style.css └── nightmode.css ├── Blog-Tarefas ├── blogtarefas.js ├── github.svg ├── treasure.svg ├── news.svg ├── blogtarefas.css ├── blogtarefas.html └── tarefasanteriores.html ├── Aula1.6.html ├── README.md ├── reset.css └── Tarefa-Modulo1.5 ├── index.html └── tarefa-modulo1-5.html /tarefa-modulo1.4/barra.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardopinheiromr/resilia/HEAD/tarefa-modulo1.4/barra.jpg -------------------------------------------------------------------------------- /tarefa-modulo1.4/HTMLJPG.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardopinheiromr/resilia/HEAD/tarefa-modulo1.4/HTMLJPG.jpg -------------------------------------------------------------------------------- /tarefa-modulo1.4/barra2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardopinheiromr/resilia/HEAD/tarefa-modulo1.4/barra2.jpg -------------------------------------------------------------------------------- /tarefa-modulo1.4/perfil.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardopinheiromr/resilia/HEAD/tarefa-modulo1.4/perfil.png -------------------------------------------------------------------------------- /tarefa-modulo1.6/recursos_resiliaflix/1917_capa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardopinheiromr/resilia/HEAD/tarefa-modulo1.6/recursos_resiliaflix/1917_capa.jpg -------------------------------------------------------------------------------- /tarefa-modulo1.6/recursos_resiliaflix/a_origem.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardopinheiromr/resilia/HEAD/tarefa-modulo1.6/recursos_resiliaflix/a_origem.jpg -------------------------------------------------------------------------------- /tarefa-modulo1.6/recursos_resiliaflix/coringa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardopinheiromr/resilia/HEAD/tarefa-modulo1.6/recursos_resiliaflix/coringa.jpg -------------------------------------------------------------------------------- /tarefa-modulo1.6/recursos_resiliaflix/jojo_rabit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardopinheiromr/resilia/HEAD/tarefa-modulo1.6/recursos_resiliaflix/jojo_rabit.jpg -------------------------------------------------------------------------------- /tarefa-modulo1.6/recursos_resiliaflix/o_poco_capa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardopinheiromr/resilia/HEAD/tarefa-modulo1.6/recursos_resiliaflix/o_poco_capa.jpg -------------------------------------------------------------------------------- /tarefa-modulo1.6/recursos_resiliaflix/forrest_gump.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardopinheiromr/resilia/HEAD/tarefa-modulo1.6/recursos_resiliaflix/forrest_gump.jpg -------------------------------------------------------------------------------- /tarefa-modulo1.6/recursos_resiliaflix/parasita_capa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardopinheiromr/resilia/HEAD/tarefa-modulo1.6/recursos_resiliaflix/parasita_capa.jpg -------------------------------------------------------------------------------- /tarefa-modulo1.6/recursos_resiliaflix/vingadores_ultimato.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardopinheiromr/resilia/HEAD/tarefa-modulo1.6/recursos_resiliaflix/vingadores_ultimato.jpg -------------------------------------------------------------------------------- /tarefa-modulo1.6/recursos_resiliaflix/bad_boys_para_sempre.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardopinheiromr/resilia/HEAD/tarefa-modulo1.6/recursos_resiliaflix/bad_boys_para_sempre.jpg -------------------------------------------------------------------------------- /tarefa-modulo1.6/recursos_resiliaflix/era_uma_vez_em_hollywood.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardopinheiromr/resilia/HEAD/tarefa-modulo1.6/recursos_resiliaflix/era_uma_vez_em_hollywood.jpg -------------------------------------------------------------------------------- /tarefa-modulo1.6/recursos_resiliaflix/magnatas_do_crime_capa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardopinheiromr/resilia/HEAD/tarefa-modulo1.6/recursos_resiliaflix/magnatas_do_crime_capa.jpg -------------------------------------------------------------------------------- /tarefa-modulo1.6/recursos_resiliaflix/o_homem_invisivel_capa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardopinheiromr/resilia/HEAD/tarefa-modulo1.6/recursos_resiliaflix/o_homem_invisivel_capa.jpg -------------------------------------------------------------------------------- /tarefa-modulo1.6/recursos_resiliaflix/batman_cavaleiro_das_trevas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardopinheiromr/resilia/HEAD/tarefa-modulo1.6/recursos_resiliaflix/batman_cavaleiro_das_trevas.jpg -------------------------------------------------------------------------------- /Blog-Tarefas/blogtarefas.js: -------------------------------------------------------------------------------- 1 | window.addEventListener('load', start); 2 | 3 | const slidebar = document.querySelector('.div-aviso'); 4 | const main = document.querySelector('#main'); 5 | 6 | function start() { 7 | slidebar.style.marginTop = '50px'; 8 | slidebar.style.color = '#f0c52c'; 9 | main.style.marginTop = '50px'; 10 | } 11 | -------------------------------------------------------------------------------- /Aula1.6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flexbotox 7 | 8 | 9 | 10 | 11 |
13 | 14 | -------------------------------------------------------------------------------- /tarefa-modulo1.6/night.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tarefa-modulo1.6/script.js: -------------------------------------------------------------------------------- 1 | window.addEventListener('load', start); 2 | 3 | function start() { 4 | console.log('Página 100% carregada.'); 5 | } 6 | 7 | var nightmode = document.getElementById('nightmode'); 8 | var disableNight = nightmode.getAttributeNode('disabled'); 9 | var darkmode = false; 10 | const searchbar = document.getElementById('filmepesquisado'); 11 | 12 | function habilitarNightmode() { 13 | if (darkmode === false) { 14 | nightmode.removeAttributeNode(disableNight); 15 | darkmode = true; 16 | } else { 17 | nightmode.setAttributeNode(disableNight); 18 | darkmode = false; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

resilia

2 | Projetos feitos durante o bootcamp Resilia 3 | 4 |

#1 - Post de blog com o que aprendemos em aula

 5 | 6 |

#2 - Página de inscrição no Projeto Resilia

 7 | 8 |

#3 - Análise FOFA e histórias marcantes

 9 | 10 |

#4 - Resiflix, responsivo com nightmode.

 11 | 12 |

#5 - Tarefas Diárias: baú resilia

 13 | -------------------------------------------------------------------------------- /Blog-Tarefas/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tarefa-modulo1.6/youtube.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /tarefa-modulo1.6/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tarefa-modulo1.6/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Blog-Tarefas/treasure.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tarefa-modulo1.6/pesquisafilme.js: -------------------------------------------------------------------------------- 1 | window.addEventListener('load', teclouAlgo); 2 | 3 | var search = document.getElementById('search'); 4 | var divFilme = document.getElementById('filmepesquisado'); 5 | var btnFecharPesquisa = document.getElementById('fecharpesquisa'); 6 | 7 | function teclouAlgo(event) { 8 | search.addEventListener('keyup', pesquisaFilme); 9 | } 10 | 11 | function pesquisaFilme() { 12 | if (event.key === 'Enter') { 13 | let filme = search.value; 14 | buscaAPI(filme); 15 | } 16 | } 17 | 18 | function buscaAPI(nomeDoFilme) { 19 | fetch(`https://www.omdbapi.com/?t=${nomeDoFilme}&apikey=f3982364`).then( 20 | function (response) { 21 | response.json().then(function (data) { 22 | render(data); 23 | }); 24 | } 25 | ); 26 | } 27 | 28 | function render(apiJSON) { 29 | divFilme.innerHTML = ''; 30 | 31 | var divTexto = document.createElement('div'); 32 | divTexto.classList.add('movieinfo'); 33 | 34 | var titulo = document.createElement('span'); 35 | var atores = document.createElement('span'); 36 | var ano = document.createElement('span'); 37 | var tempo = document.createElement('span'); 38 | var genero = document.createElement('span'); 39 | var plot = document.createElement('span'); 40 | var imagem = document.createElement('img'); 41 | 42 | imagem.src = apiJSON.Poster; 43 | titulo.innerHTML = apiJSON.Title; 44 | titulo.classList.add('titulopesquisado'); 45 | atores.innerHTML = `Atores principais: ${apiJSON.Actors}`; 46 | ano.innerHTML = `Lançamento: ${apiJSON.Year}`; 47 | tempo.innerHTML = `Duração: ${apiJSON.Runtime}`; 48 | genero.innerHTML = `Gênero: ${apiJSON.Genre}`; 49 | plot.innerHTML = `Sinopse: ${apiJSON.Plot}`; 50 | plot.classList.add('sinopse'); 51 | 52 | divTexto.appendChild(titulo); 53 | divTexto.appendChild(genero); 54 | divTexto.appendChild(ano); 55 | divTexto.appendChild(atores); 56 | divTexto.appendChild(tempo); 57 | divTexto.appendChild(plot); 58 | 59 | btnFecharPesquisa.style.display = 'block'; 60 | divFilme.appendChild(imagem); 61 | divFilme.appendChild(divTexto); 62 | search.value = ''; 63 | } 64 | 65 | function fecharPesquisa() { 66 | divFilme.innerHTML = ''; 67 | btnFecharPesquisa.style.display = 'none'; 68 | } 69 | -------------------------------------------------------------------------------- /Tarefa-Modulo1.5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Inscreva-se no Resilia 7 | 56 | 57 | 58 |

resilia.work


59 |
60 |

Participe do processo seletivo do Resilia :)

61 |

Nome completo:

62 | 63 |

Data de nascimento:

64 | 65 |

CPF:

66 | 67 |

E-mail:

68 |

69 |
70 |

71 | 72 | 73 | -------------------------------------------------------------------------------- /tarefa-modulo1.6/instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tarefa-modulo1.6/resiliaflix.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ResiFlix 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 |

16 | ResiFlix 17 |

19 | 25 |
26 | 31 |
32 |
33 |
34 |
35 | 40 |
41 |
42 | 43 |
44 |
45 | 46 | 47 | 51 | 55 | 56 | 60 | 61 | 62 | 66 | 70 | 71 | 72 | 76 |
77 |
78 | 79 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /Blog-Tarefas/news.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Blog-Tarefas/blogtarefas.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | min-height: 160vh; 6 | width: 100%; 7 | display: flex; 8 | flex-direction: column; 9 | font-family: SEGOE UI; 10 | } 11 | 12 | .div-aviso { 13 | width: 100%; 14 | display: flex; 15 | font-size: 11pt; 16 | background: rgb(66, 1, 66); 17 | color: rgb(66, 1, 66); 18 | min-height: 50px; 19 | align-items: center; 20 | justify-content: center; 21 | position: absolute; 22 | transition: 2s; 23 | } 24 | 25 | .div-aviso:hover { 26 | background: black; 27 | } 28 | 29 | header { 30 | min-height: 50px; 31 | width: 100%; 32 | background: purple; 33 | color: #f0c52c; 34 | display: flex; 35 | align-items: center; 36 | justify-content: space-between; 37 | } 38 | 39 | header a.logo { 40 | height: 100%; 41 | text-decoration: none; 42 | color: #f0c52c; 43 | margin-left: 5%; 44 | padding-left: 5px; 45 | padding-right: 5px; 46 | } 47 | 48 | header a:hover { 49 | background: rgb(83, 0, 83); 50 | } 51 | 52 | .logo { 53 | width: 175px; 54 | display: flex; 55 | align-items: center; 56 | justify-content: space-between; 57 | font-size: 20pt; 58 | font-weight: 700; 59 | transition: 1s; 60 | } 61 | 62 | header nav { 63 | display: flex; 64 | height: 100%; 65 | width: 400px; 66 | align-items: center; 67 | justify-content: space-around; 68 | margin-right: 5%; 69 | } 70 | 71 | .item-navbar { 72 | height: 50px; 73 | flex-grow: 1; 74 | display: flex; 75 | justify-content: center; 76 | align-items: center; 77 | text-decoration: none; 78 | font-size: 12pt; 79 | font-weight: 600; 80 | color: #f0c52c; 81 | transition: 1s; 82 | } 83 | 84 | .item-navbar:hover { 85 | background: rgb(83, 0, 83); 86 | } 87 | 88 | main { 89 | height: auto; 90 | background: whitesmoke; 91 | transition: 2s; 92 | } 93 | 94 | #news { 95 | height: 100px; 96 | margin-top: 15px; 97 | margin-bottom: 15px; 98 | transition: 1s; 99 | } 100 | 101 | .transition { 102 | transition: 1s; 103 | } 104 | 105 | .hoverrr:hover { 106 | transform: scale(1.1); 107 | } 108 | 109 | .ultima-tarefa { 110 | height: auto; 111 | background: rgb(230, 230, 230); 112 | padding: 25px; 113 | padding-left: 35px; 114 | padding-right: 35px; 115 | display: flex; 116 | flex-direction: column; 117 | align-items: center; 118 | } 119 | 120 | h1 { 121 | color: rgb(97, 2, 97); 122 | } 123 | 124 | #titulo-ultima-tarefa { 125 | font-size: 25pt; 126 | font-weight: bold; 127 | color: purple; 128 | margin-bottom: 35px; 129 | } 130 | 131 | .box-ultima-tarefa { 132 | background: rgb(204, 180, 204); 133 | height: auto; 134 | padding: 25px; 135 | display: flex; 136 | flex-direction: column; 137 | width: 90%; 138 | margin-top: 15px; 139 | border-radius: 30px; 140 | transition: 0.3s; 141 | align-items: center; 142 | } 143 | 144 | .box-ultima-tarefa:hover { 145 | transform: scale(1.04); 146 | box-shadow: 1px 1px 40px gray; 147 | } 148 | 149 | .texto-tarefa { 150 | text-align: center; 151 | } 152 | 153 | ul { 154 | text-align: start; 155 | } 156 | 157 | #homework h2 { 158 | margin-bottom: -1px; 159 | } 160 | 161 | .amarelo { 162 | color: #f0c52c; 163 | } 164 | 165 | .link-tarefa { 166 | text-decoration: none; 167 | color: black; 168 | margin-bottom: 30px; 169 | } 170 | 171 | #homework { 172 | margin-top: 30px; 173 | display: flex; 174 | width: 70%; 175 | text-align: center; 176 | border-radius: 25px; 177 | padding-left: 20px; 178 | padding-right: 20px; 179 | padding-bottom: 20px; 180 | flex-direction: column; 181 | background: rgb(90, 51, 90); 182 | transition: 1s; 183 | } 184 | 185 | #homework:hover { 186 | background: rgb(49, 28, 49); 187 | } 188 | 189 | #homework h2 { 190 | color: #f0c52c; 191 | } 192 | 193 | #homework a { 194 | text-decoration: none; 195 | margin-bottom: 30px; 196 | color: #f0c52c; 197 | } 198 | 199 | footer { 200 | display: flex; 201 | min-height: 150px; 202 | background: purple; 203 | align-items: center; 204 | justify-content: center; 205 | flex-direction: column; 206 | } 207 | 208 | footer div { 209 | padding-bottom: 1.5px; 210 | padding-left: 1.7px; 211 | padding-right: 1.7px; 212 | background: rgb(255, 209, 255); 213 | border-radius: 100%; 214 | display: flex; 215 | align-items: center; 216 | justify-content: center; 217 | transition: 0.3s; 218 | } 219 | 220 | footer div:hover { 221 | box-shadow: 1px 1px 30px rgb(68, 1, 68); 222 | transition: 0.3s; 223 | transform: scale(1.1); 224 | } 225 | 226 | footer img { 227 | height: 75px; 228 | } 229 | 230 | footer span { 231 | color: whitesmoke; 232 | margin-top: 10px; 233 | } 234 | 235 | @media (max-width: 652px) { 236 | header { 237 | padding-top: 5px; 238 | min-height: 100px; 239 | flex-direction: column; 240 | } 241 | 242 | .item-navbar { 243 | height: 50px; 244 | width: 33%; 245 | } 246 | 247 | header nav { 248 | width: 100%; 249 | } 250 | 251 | .div-aviso { 252 | top: 55px; 253 | } 254 | 255 | .box-ultima-tarefa { 256 | text-align: center; 257 | } 258 | } 259 | -------------------------------------------------------------------------------- /Blog-Tarefas/blogtarefas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tarefas Resilia 7 | 8 | 9 | 10 |
11 | 12 | Atenção: Link para aula no ZOOM removido por questões 13 | de segurança 14 | 15 |
16 | 17 |
18 | 24 | 25 | 47 |
48 | 49 |
50 |
51 | novidades! 58 | Última tarefa: 61 |
62 |

Módulo 1.12: Como fazer miojo

63 |

Tarefa em aula:

64 | 65 | JavaScript - Crie suas próprias funcionalidades (33 min) 70 | 71 |
72 |

Exercício JS - A vidente:

73 |

74 | Implemente esse exercício utilizando um
75 | botão na sua página e chamando uma função declarada como 76 | "aVidente"
77 | Guarde seu nome numa variável Guarde o número de filhos que 78 | você
79 | quer ter em outra variável Guarde a cidade em que você gostaria 80 | de
81 | morar em outra variável Guarde a sua profissão desejada em 82 | outra
83 | variável Escreva na página (HTML) a seguinte frase: "A vidente
84 | prevê: {seu nome} terá {quantidade de filhos} e viverá em 85 | {cidade}
86 | trabalhando como {profissão}"
87 | 88 |

Exercício JS - Ilha deserta:

89 | Implemente esse exercício utilizando
90 | um botão na sua página e chamando uma função declarada como
91 | "leveiParaIlha" Guarde em 3 variáveis diferentes 3 itens que você
92 | levaria para uma ilha deserta para sobreviver Escreva na página
93 | (HTML) a seguinte frase: "Eu levaria para uma ilha deserta: {item 1}, {item 2}, {item 3}"
94 | 95 |

Exercício JS - Declarando e atribuindo dentro da função:

96 | Crie uma função chamada escolhaAnimal onde você:
97 | Guarde o nome de um animal que você gostaria de ser em uma variável
98 | Escreva na página (HTML) a seguinte frase: "Num primeiro momento, eu gostaria de ser um(a):
99 | {animal escolhido}"
100 | Trocar o valor do animal nesta mesma variável
101 | Escreva na página (HTML) a seguinte frase na linha de baixo: "Pensando melhor, prefiro ser um(a)
102 | {animal escolhido}"
103 | 104 |

105 |
106 | 107 |
108 | 109 |

Tarefa de casa:

110 |
    111 |
  • Fazer/complementar todo conteúdo da Alura visto até hoje sobre lógica de programação
    • 112 |
  • Criar repositório no github com nome exercicios_js
    • 113 |
  • Crie um programa com as seguintes funções:

    114 | dobro: essa função recebe um número como parâmetro e retorna o dobro dele como resultado
    115 | metade: essa função recebe um número como parâmetro e rotorna a metade dele como
    116 | resultado

    117 | saudacao: essa função recebe uma string "nome" como parâmetro e retorna o texto "olá {nome}
    • 118 | Tudo bem?" 119 | 120 |
  • Subir para este repositório exercícios feitos de JavaScript até aqui (tanto em aula quanto em casa)
    • 121 |

    122 |
123 |
124 |
125 |
126 |
127 | 128 | 136 | 137 | 138 | 139 | 140 | -------------------------------------------------------------------------------- /tarefa-modulo1.6/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | height: 100%; 7 | width: auto; 8 | display: flex; 9 | flex-direction: column; 10 | } 11 | 12 | header { 13 | min-height: 50px; 14 | width: 100%; 15 | display: flex; 16 | align-items: center; 17 | } 18 | 19 | .cabecalho { 20 | height: 100%; 21 | width: 100%; 22 | font-family: arial; 23 | display: flex; 24 | background: #fafafa; 25 | color: whitesmoke; 26 | align-items: center; 27 | justify-content: space-between; 28 | } 29 | 30 | .urlhome { 31 | text-decoration: none; 32 | height: 50px; 33 | width: auto; 34 | color: black; 35 | display: flex; 36 | align-items: center; 37 | justify-content: center; 38 | margin-left: 50px; 39 | } 40 | 41 | .menu { 42 | display: flex; 43 | align-items: center; 44 | justify-content: flex-end; 45 | height: 50px; 46 | width: 100%; 47 | } 48 | 49 | .item-menu { 50 | display: flex; 51 | align-items: center; 52 | justify-content: space-around; 53 | height: 50px; 54 | width: 100%; 55 | font-weight: 100; 56 | color: #333333; 57 | } 58 | 59 | .item-menu:hover { 60 | background: whitesmoke; 61 | } 62 | .item-menu:active { 63 | background: lightgray; 64 | } 65 | .urlpagina { 66 | width: 100px; 67 | color: black; 68 | text-decoration: none; 69 | } 70 | 71 | #nightmodebtn { 72 | height: 20px; 73 | width: 20px; 74 | background: url(./night.svg); 75 | cursor: pointer; 76 | } 77 | 78 | #divnightmode { 79 | min-height: 50px; 80 | width: 50px; 81 | display: flex; 82 | align-items: center; 83 | justify-content: center; 84 | } 85 | .whitesection { 86 | width: 100%; 87 | min-height: 50px; 88 | display: flex; 89 | align-items: center; 90 | justify-content: center; 91 | } 92 | 93 | #search { 94 | border-radius: 5px; 95 | border-width: 0.3px; 96 | border-color: whitesmoke; 97 | height: 60%; 98 | width: 97%; 99 | padding: 5px; 100 | padding-left: 10px; 101 | text-align: center; 102 | } 103 | 104 | main { 105 | height: auto; 106 | background: #fafafa; 107 | display: flex; 108 | flex-flow: row wrap; 109 | padding-bottom: 30px; 110 | justify-content: center; 111 | } 112 | 113 | #fecharpesquisa { 114 | display: none; 115 | position: absolute; 116 | float: inline-start; 117 | left: 85%; 118 | background: lightgray; 119 | color: whitesmoke; 120 | border: none; 121 | height: 50px; 122 | width: 50px; 123 | font-size: 25pt; 124 | font-family: Arial; 125 | } 126 | 127 | #fecharpesquisa:hover { 128 | background: darkred; 129 | } 130 | 131 | #filmepesquisado { 132 | display: flex; 133 | justify-content: center; 134 | width: 80%; 135 | } 136 | 137 | .movieinfo { 138 | height: 100%; 139 | width: 50%; 140 | display: flex; 141 | flex-direction: column; 142 | font-family: SEGOE UI; 143 | color: rgb(20, 32, 32); 144 | } 145 | 146 | .titulopesquisado { 147 | font-size: 20pt; 148 | font-weight: bold; 149 | } 150 | 151 | .movieinfo span { 152 | margin-top: 30px; 153 | margin-left: 80px; 154 | } 155 | 156 | #filmepesquisado img { 157 | border-radius: 10px; 158 | max-width: 100%; 159 | } 160 | 161 | .filmes { 162 | width: 80%; 163 | display: flex; 164 | flex-flow: row wrap; 165 | justify-content: center; 166 | height: auto; 167 | justify-content: space-around; 168 | align-content: space-around; 169 | } 170 | .posters { 171 | border-radius: 10px; 172 | height: 300px; 173 | margin-right: 30px; 174 | margin-left: 30px; 175 | margin-top: 30px; 176 | transition: 1s; 177 | } 178 | 179 | .posters:hover { 180 | transform: scale(1.15); 181 | box-shadow: 0px 5px 30px rgb(31, 53, 53); 182 | } 183 | 184 | footer { 185 | background: #cfcfcf; 186 | min-height: 150px; 187 | display: flex; 188 | justify-content: center; 189 | } 190 | 191 | .rodape { 192 | height: 100%; 193 | display: flex; 194 | flex-direction: column; 195 | align-items: center; 196 | } 197 | 198 | .icone { 199 | height: 50px; 200 | } 201 | 202 | .icones { 203 | display: flex; 204 | margin-top: 30px; 205 | width: 250px; 206 | justify-content: space-around; 207 | } 208 | #copywright { 209 | font-family: SEGOE UI; 210 | margin-top: 10px; 211 | } 212 | 213 | @media (max-width: 1071px) { 214 | .posters { 215 | height: 400px; 216 | } 217 | } 218 | 219 | @media (max-width: 680px) { 220 | .posters { 221 | height: 500px; 222 | } 223 | } 224 | @media (max-width: 580px) { 225 | header { 226 | flex-direction: column; 227 | } 228 | .cabecalho { 229 | height: 150px; 230 | flex-direction: column; 231 | } 232 | .urlhome { 233 | margin: 0; 234 | } 235 | .posters { 236 | height: 500px; 237 | } 238 | .menu { 239 | height: 50px; 240 | justify-content: space-around; 241 | } 242 | .item-menu { 243 | width: 100px; 244 | } 245 | .whitesection { 246 | position: relative; 247 | top: 100px; 248 | } 249 | main { 250 | margin-top: 100px; 251 | } 252 | .menu { 253 | width: 100%; 254 | } 255 | } 256 | 257 | /* Media queries da API */ 258 | 259 | @media (max-width: 1036px) { 260 | #fecharpesquisa { 261 | left: 94%; 262 | } 263 | } 264 | 265 | @media (max-width: 842px) { 266 | #fecharpesquisa { 267 | left: 93%; 268 | } 269 | } 270 | 271 | @media (max-width: 818px) { 272 | #fecharpesquisa { 273 | left: 95%; 274 | height: 30px; 275 | width: 30px; 276 | font-size: 15px; 277 | } 278 | } 279 | 280 | @media (max-width: 980px) { 281 | #filmepesquisado { 282 | width: 100%; 283 | } 284 | } 285 | 286 | @media (max-width: 775px) { 287 | .movieinfo span { 288 | margin-left: 30px; 289 | } 290 | } 291 | 292 | @media (max-width: 663px) { 293 | #filmepesquisado { 294 | flex-direction: column; 295 | } 296 | .movieinfo { 297 | width: 80%; 298 | align-self: center; 299 | } 300 | #filmepesquisado img { 301 | width: 60%; 302 | align-self: center; 303 | } 304 | } 305 | -------------------------------------------------------------------------------- /tarefa-modulo1.4/Tarefa-Modulo1.4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML e CSS 6 | 7 | 92 | 93 |
94 | resilia.blog 95 |
96 |
97 | 105 |
106 |
107 |

O que aprendemos até agora?

108 |

   14/05/2020

109 |
110 |
111 | 112 |

Aprendemos a definir a estrutura básica do HTML.
Com a tag <!DOCTYPE html>, definimos qual versão do HTML estamos utilizando.A tag <html> marca o conteúdo
a ser renderizado no navegador e utilizando a propriedade lang="pt-br", definimos a linguagem.

113 | 114 |
115 |

Como separar as informações que estão sendo passadas para o navegador, utilizando a tag Como definir o título de uma página, através da tag

116 | 117 |

A tag meta do HTML, que permite indicar metainformações, ou seja, informações sobre o próprio documento. Aprendemos sobre o charset, propriedade da tag meta que serve para indicar a codificação do próprio documento.

118 | 119 |

Como separar o conteúdo da página, utilizando a tag <body>, definir o título e os parágrafos de um texto utilizando as tags <h1> e <p>.

120 | Dar destaque para algumas informações do texto, deixando-as em negrito, utilizando a tag <strong> e em itálico, utilizando a tag <em>.

121 |
122 | 123 | 124 | Estilizando com CSS 125 |

Aprendemos a mexer na apresentação dos textos, no alinhamento deles (text-align), tamanho da fonte (font-size), cor de fundo (background) e cor do texto (color).

126 | 127 |

Aprendemos as 3 formas de inserir CSS na nossa página:

128 | 129 |

CSS inline

130 |

Na linha onde temos a nossa tag, adicionamos a propriedade do CSS.
Dentro da tag, podemos colocar marcações de CSS referentes aos elementos que temos no nosso HTML.

131 | Exemplo:

<img src="exemplo.jpg" style="height: 100px; width: 200px;"> 132 |

133 |

CSS interno

134 |

Utilizando a tag style dentro do head da página HTML:

135 | Exemplo:
 136 |
<head>
137 |     <style>
138 |         seletor { propriedade: valor; }
139 |     </style>
140 | </head>
141 | 142 |

CSS externo

143 |

O CSS pode ser inserido com um arquivo externo, isto permite que a mesma folha de estilo seja usada em infinitas páginas.
144 | Para utilizar o CSS externo, basta criar o arquivo style.css e fazer referência a ele dentro da <head> da página. 145 |

146 |

Exemplo:

 <link rel="stylesheet" href="reset.css">

147 | 148 | 149 | 150 |
151 |
152 | 155 | 156 | -------------------------------------------------------------------------------- /Tarefa-Modulo1.5/tarefa-modulo1-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Minha página, minha vida 6 | 88 | 89 | 90 |
Eduardo Pinheiro - 24 anos
91 |
92 |

Análise FOFA

93 |
94 |
95 |
Forças
96 |
Fraquezas
97 |
98 |
Oportunidades
99 |
Ameaças
100 |
101 |
102 |

Forças

103 |
    104 |
  • Boa comunicação
    • 105 |
  • Aprendizado rápido
    • 106 |
  • Paciência e foco
    • 107 |
  • Vontade de ajudar
    • 108 |
  • Proatividade
    • 109 |
110 |

Fraquezas

111 |
    112 |
  • Histórico inconsistente
    • 113 |
  • Nenhuma certificação com peso
    • 114 |
  • Tendência centralizadora
    • 115 |
  • Estresse e ansiedade ao sentir sobrecarga
    • 116 |
117 |
118 |
119 |

Oportunidades

120 |
    121 |
  • Mercado de trabalho aquecido
    • 122 |
  • Tempo hábil para capacitação
    • 123 |
  • Acesso a muitos profissionais já empregados e oportunidades em plataformas que participarei
    • 124 |


125 |

Ameaças

126 |
    127 |
  • Pandemia esfriar até a área de TI
    • 128 |
  • As vagas de desenvolvedor se restringirem a profissionais super qualificados com experiência
    • 129 |
130 |
131 |
132 |
133 | Histórias marcantes 134 |
135 |

Vida pessoal

136 |

De 2018 a 2019 entrei para o Projeto Philia, um grupo de voluntariado que ajudava crianças carentes na região de Rio das Ostras. Todo meu tempo livre foi direcionado para impulsionar o projeto e me tornei peça chave na organização dos eventos e recolhimento de doações. Um dos momentos que mais me marcou, foi a conversa que tive com um adolescente em um dos eventos do Philia. Ele catava latinhas com o pai e o irmão para sobreviver. Após uma longa conversa sobre vida e crescimento, ele teve insights sobre como tornar mais eficiente a coleta e dar uma escala maior. Lembro dele falando que tava ansioso pra chegar em casa e contar tudo pro pai.

137 | 138 |

Vida profissional

139 |

Meu primeiro dia vendendo meus doces na Intendente Magalhães. Eu entrava em pânico com a ideia de abordar pessoas desconhecidas, principalmente para oferecer um produto. Meu doce não era barato e tive muita dificuldade nas 3 primeiras tentativas de venda. Gaguejava, suava frio, não conseguia transmitir o valor do meu produto. Eu precisava muito de dinheiro e desistir não era uma opção, então parei no meio da calçada e comecei a pensar no que eu estava fazendo e como. Construí uma apresentação e ensaiei 3x falando sozinho. Entrei em uma loja de carros e tentei novamente, tive sucesso e desde então minha cabeça nunca mais funcionou da mesma forma. Empreender virou uma paixão, fechar negócios, mesmo que os mais simples era viciante. O “não” se tornou uma oportunidade para outras pessoas consumirem meu produto, que era limitado e com o tempo, super requisitado.

140 |

141 |
142 |
143 | 144 | 145 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /tarefa-modulo1.6/nightmode.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | height: 100%; 7 | width: auto; 8 | display: flex; 9 | flex-direction: column; 10 | } 11 | 12 | header { 13 | min-height: 50px; 14 | width: 100%; 15 | display: flex; 16 | align-items: center; 17 | } 18 | 19 | .cabecalho { 20 | height: 100%; 21 | width: 100%; 22 | font-family: arial; 23 | display: flex; 24 | background: #202020; 25 | color: whitesmoke; 26 | align-items: center; 27 | justify-content: space-between; 28 | } 29 | 30 | .urlhome { 31 | text-decoration: none; 32 | height: 50px; 33 | width: auto; 34 | color: whitesmoke; 35 | display: flex; 36 | align-items: center; 37 | justify-content: center; 38 | margin-left: 50px; 39 | } 40 | 41 | .menu { 42 | display: flex; 43 | align-items: center; 44 | justify-content: flex-end; 45 | height: 50px; 46 | width: 100%; 47 | } 48 | 49 | .item-menu { 50 | display: flex; 51 | align-items: center; 52 | justify-content: space-around; 53 | height: 50px; 54 | width: 100%; 55 | font-weight: 100; 56 | color: whitesmoke; 57 | } 58 | 59 | .item-menu:hover { 60 | background: black; 61 | } 62 | .item-menu:active { 63 | background: rgb(65, 65, 65); 64 | } 65 | .urlpagina { 66 | width: 100px; 67 | color: whitesmoke; 68 | text-decoration: none; 69 | } 70 | 71 | #nightmodebtn { 72 | height: 20px; 73 | width: 20px; 74 | background: url(./_img/night.svg); 75 | cursor: pointer; 76 | filter: invert(100%) sepia(82%) saturate(0%) hue-rotate(84deg) 77 | brightness(107%) contrast(101%); 78 | } 79 | 80 | #divnightmode { 81 | min-height: 50px; 82 | width: 50px; 83 | display: flex; 84 | align-items: center; 85 | justify-content: center; 86 | } 87 | .whitesection { 88 | width: 100%; 89 | min-height: 50px; 90 | background: rgb(28, 29, 29); 91 | } 92 | 93 | #search { 94 | background: rgb(59, 59, 59); 95 | color: lightgray; 96 | border-radius: 5px; 97 | border-width: 0.3px; 98 | border-color: black; 99 | height: 60%; 100 | width: 97%; 101 | padding: 5px; 102 | padding-left: 10px; 103 | text-align: center; 104 | } 105 | 106 | main { 107 | background: #202020; 108 | height: auto; 109 | display: flex; 110 | flex-flow: row wrap; 111 | justify-content: center; 112 | padding-bottom: 30px; 113 | } 114 | 115 | #fecharpesquisa { 116 | display: none; 117 | position: absolute; 118 | float: inline-start; 119 | left: 85%; 120 | background: darkslategray; 121 | color: gray; 122 | border: none; 123 | height: 50px; 124 | width: 50px; 125 | font-size: 25pt; 126 | font-family: Arial; 127 | } 128 | 129 | #fecharpesquisa:hover { 130 | background: darkred; 131 | } 132 | 133 | #filmepesquisado { 134 | display: flex; 135 | justify-content: center; 136 | width: 80%; 137 | } 138 | 139 | .movieinfo { 140 | height: 100%; 141 | width: 50%; 142 | display: flex; 143 | flex-direction: column; 144 | font-family: SEGOE UI; 145 | color: whitesmoke; 146 | } 147 | 148 | .titulopesquisado { 149 | font-size: 20pt; 150 | font-weight: bold; 151 | } 152 | 153 | .movieinfo span { 154 | margin-top: 30px; 155 | margin-left: 80px; 156 | } 157 | 158 | #filmepesquisado img { 159 | border-radius: 10px; 160 | max-width: 100%; 161 | } 162 | 163 | .filmes { 164 | display: flex; 165 | flex-flow: row wrap; 166 | justify-content: center; 167 | height: auto; 168 | justify-content: space-around; 169 | align-content: space-around; 170 | } 171 | 172 | .posters { 173 | border-radius: 10px; 174 | height: 300px; 175 | margin-right: 30px; 176 | margin-left: 30px; 177 | margin-top: 30px; 178 | transition: 1s; 179 | } 180 | 181 | .posters:hover { 182 | transition: 1s; 183 | transform: scale(1.15); 184 | box-shadow: 0px 5px 30px black; 185 | } 186 | 187 | footer { 188 | background: black; 189 | min-height: 150px; 190 | display: flex; 191 | justify-content: center; 192 | } 193 | 194 | .rodape { 195 | height: 100%; 196 | display: flex; 197 | flex-direction: column; 198 | align-items: center; 199 | } 200 | 201 | .icone { 202 | height: 50px; 203 | filter: invert(100%) sepia(82%) saturate(0%) hue-rotate(84deg) 204 | brightness(107%) contrast(101%); 205 | } 206 | .icones { 207 | display: flex; 208 | margin-top: 30px; 209 | width: 250px; 210 | justify-content: space-around; 211 | } 212 | #copywright { 213 | color: whitesmoke; 214 | font-family: SEGOE UI; 215 | margin-top: 10px; 216 | } 217 | 218 | @media (max-width: 1071px) { 219 | .posters { 220 | height: 400px; 221 | } 222 | } 223 | 224 | @media (max-width: 680px) { 225 | .posters { 226 | height: 500px; 227 | } 228 | } 229 | @media (max-width: 580px) { 230 | header { 231 | flex-direction: column; 232 | } 233 | .cabecalho { 234 | height: 150px; 235 | flex-direction: column; 236 | } 237 | .urlhome { 238 | margin: 0; 239 | } 240 | .posters { 241 | height: 500px; 242 | } 243 | .menu { 244 | height: 50px; 245 | justify-content: space-around; 246 | } 247 | .item-menu { 248 | width: 100px; 249 | } 250 | .whitesection { 251 | position: relative; 252 | top: 100px; 253 | } 254 | main { 255 | margin-top: 100px; 256 | } 257 | .menu { 258 | width: 100%; 259 | } 260 | } 261 | 262 | /* Media queries da API */ 263 | 264 | @media (max-width: 1036px) { 265 | #fecharpesquisa { 266 | left: 94%; 267 | } 268 | } 269 | 270 | @media (max-width: 842px) { 271 | #fecharpesquisa { 272 | left: 93%; 273 | } 274 | } 275 | 276 | @media (max-width: 818px) { 277 | #fecharpesquisa { 278 | left: 95%; 279 | height: 30px; 280 | width: 30px; 281 | font-size: 15px; 282 | } 283 | } 284 | 285 | @media (max-width: 980px) { 286 | #filmepesquisado { 287 | width: 100%; 288 | } 289 | } 290 | 291 | @media (max-width: 775px) { 292 | .movieinfo span { 293 | margin-left: 30px; 294 | } 295 | } 296 | 297 | @media (max-width: 663px) { 298 | #filmepesquisado { 299 | flex-direction: column; 300 | } 301 | .movieinfo { 302 | width: 80%; 303 | align-self: center; 304 | } 305 | #filmepesquisado img { 306 | width: 60%; 307 | align-self: center; 308 | } 309 | } 310 | -------------------------------------------------------------------------------- /Blog-Tarefas/tarefasanteriores.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tarefas Resilia 7 | 8 | 9 | 10 |
11 | 12 | Atenção: Link para aula no ZOOM removido por questões 13 | de segurança 14 | 15 |
16 | 17 |
18 | 24 | 25 | 47 |
48 | 49 |
50 |
51 | novidades! 58 | Tarefas anteriores: 61 |
62 |

Módulo 1.12: Como fazer miojo

63 |

Tarefa em aula:

64 | 65 | JavaScript - Crie suas próprias funcionalidades (33 min) 70 | 71 |
72 |

Exercício JS - A vidente:

73 |

74 | Implemente esse exercício utilizando um
75 | botão na sua página e chamando uma função declarada como 76 | "aVidente"
77 | Guarde seu nome numa variável Guarde o número de filhos que 78 | você
79 | quer ter em outra variável Guarde a cidade em que você gostaria 80 | de
81 | morar em outra variável Guarde a sua profissão desejada em 82 | outra
83 | variável Escreva na página (HTML) a seguinte frase: "A vidente
84 | prevê: {seu nome} terá {quantidade de filhos} e viverá em 85 | {cidade}
86 | trabalhando como {profissão}"
87 | 88 |

Exercício JS - Ilha deserta:

89 | Implemente esse exercício utilizando
90 | um botão na sua página e chamando uma função declarada como
91 | "leveiParaIlha" Guarde em 3 variáveis diferentes 3 itens que você
92 | levaria para uma ilha deserta para sobreviver Escreva na página
93 | (HTML) a seguinte frase: "Eu levaria para uma ilha deserta: {item 1}, {item 2}, {item 3}"
94 | 95 |

Exercício JS - Declarando e atribuindo dentro da função:

96 | Crie uma função chamada escolhaAnimal onde você:
97 | Guarde o nome de um animal que você gostaria de ser em uma variável
98 | Escreva na página (HTML) a seguinte frase: "Num primeiro momento, eu gostaria de ser um(a):
99 | {animal escolhido}"
100 | Trocar o valor do animal nesta mesma variável
101 | Escreva na página (HTML) a seguinte frase na linha de baixo: "Pensando melhor, prefiro ser um(a)
102 | {animal escolhido}"
103 | 104 |

105 |
106 | 107 |
108 | 109 |

Tarefa de casa:

110 |
    111 |
  • Fazer/complementar todo conteúdo da Alura visto até hoje sobre lógica de programação
    • 112 |
  • Criar repositório no github com nome exercicios_js
    • 113 |
  • Crie um programa com as seguintes funções:

    114 | dobro: essa função recebe um número como parâmetro e retorna o dobro dele como resultado
    115 | metade: essa função recebe um número como parâmetro e rotorna a metade dele como
    116 | resultado

    117 | saudacao: essa função recebe uma string "nome" como parâmetro e retorna o texto "olá {nome}
    • 118 | Tudo bem?" 119 | 120 |
  • Subir para este repositório exercícios feitos de JavaScript até aqui (tanto em aula quanto em casa)
    • 121 |

    122 |
123 |
124 |
125 |
126 |

Módulo 1.11: Super JS, ao resgate!

127 |

Tarefa em aula:

128 | 129 | JavaScript - Comece a programar hoje (19 min) 135 | JavaScript - Comunique-se com o usuário (27 min) 141 | 142 | 155 |
156 |
157 |
158 | 159 | 167 | 168 | 169 | 170 | 171 | --------------------------------------------------------------------------------