├── README.md ├── final ├── images │ ├── logo-rocketseat.svg │ └── melhores-tecnologias.svg ├── index.html ├── menu.js ├── print.css ├── responsive.css ├── scripts.js └── style.css └── inicial ├── images ├── logo-rocketseat.svg └── melhores-tecnologias.svg ├── index.html ├── scripts.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Responsividade 2 | 3 | Fala Dev! 💜 4 | 5 | Responsividade é um assunto muito importante para que nosso layout seja flexível, conforme o dispositivo que o está acessando, seja ele smartphone, tablet ou desktop. (E até mesmo, a impressora sabia?) 6 | 7 | Na Masterclass de hoje, vamos usar estratégias de CSS Units para que tanto o nosso Layout, quanto os nossos textos, fiquem fluidos. 8 | 9 | Utilizaremos também CSS Media Queries para adicionar CSS customizados conforme o breakpoint definido, para que nosso layout fique adaptado ao viewport do dispositivo. 10 | 11 | Além do mais, veremos atributos e tags HTML especiais, para que possamos obter sucesso ao tornar nosso layout responsivo. 12 | 13 | Se você ainda não sabe muito bem como fazer layouts responsivos, está começando nesse assunto, está um pouco inseguro, fique tranquilo, vem comigo que eu vou tirar suas dúvidas! 14 | 15 | Espero que faça sentido pra você. 🥰 16 | 17 | Bora codar? 🚀 18 | 19 | ## CSS Units 20 | 21 | Unidades de medidas do CSS 22 | 23 | Layout Fixo 24 | `px` - Pixels 25 | 26 | Layout Fluido 27 | `%` - Porcentagem 28 | `auto` - Automática 29 | `vh` - Viewport Height 30 | `vw` - Viewport Width 31 | 32 | Textos fixos 33 | `1px` = 0.75pt 34 | `16px` = 12pt 35 | 36 | Texto fluidos 37 | `em` - multiplicado pelo pai 38 | `rem` - multiplicado pelo root 39 | 40 | ## CSS Media Queries 41 | 42 | No HTMl eu coloco a seguinte tag meta 43 | 44 | ```html 45 | 46 | ``` 47 | 48 | No CSS eu uso da seguinte forma 49 | 50 | ```css 51 | @media (max-width: 320px) { 52 | #form h3 { 53 | font-size: 2rem; 54 | } 55 | } 56 | ``` 57 | 58 | ## HTML Media Attrib. 59 | 60 | Posso utilizar o atribuito `media` no link do meu HTML, ao importar um arquivo css, usando as propriedades da mesma forma que usaria na regra `@media` do css. 61 | 62 | ```html 63 | 68 | 69 | 70 | ``` 71 | 72 | ## Imagens 73 | 74 | Usamos a tag `` para que as imagens sejam responsivas. 75 | 76 | ```html 77 | 78 | 80 | 82 | 84 | 85 | Imagem 88 | 89 | ``` 90 | 91 | Sempre que possível, usar SVG ao invés de JPG, PNG 92 | -------------------------------------------------------------------------------- /final/images/logo-rocketseat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /final/images/melhores-tecnologias.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 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | Rocketseat 23 |
24 |
25 |
26 |
27 |
28 |
29 | 45 |
46 |
47 |
48 | 49 |
50 |
51 |
52 |

53 | As melhores tecnologias em programação, direto ao ponto e do jeito 54 | certo. 55 |

56 |

57 | No meio de tanta informação e da quantidade de ferramentas que 58 | surgem todos os dias, você precisa de alguém que te leve na direção 59 | certa. 60 |

61 | Quero embarcar neste foguete! 62 |
63 | 67 |
68 |
69 | 70 |
71 |
72 |
73 | 83 |
84 | 85 |
86 |
87 |

88 | Formulário Animado com JS puro e CSS Animation | Mayk Brito 89 |

90 |
91 |

57 Min

92 |

Free

93 |
94 |
95 |
96 |
97 |
98 | 99 |
100 |
101 |

Quero Estudar na Rocket!

102 |
103 | 104 | 105 | 106 |
107 | 108 |
109 | 110 |
111 | 112 |
113 | 114 |
115 | 116 |
117 | 118 | 119 | 120 |
121 | 122 |
123 | 124 | 125 |
126 | 127 |
128 |
129 | 130 |
131 |
132 | 133 | 134 | 138 | 139 | 140 |
141 |
142 |
143 | 148 |
149 |
150 |
151 |
152 |
153 | 154 | 155 | 156 | 157 | 158 | -------------------------------------------------------------------------------- /final/menu.js: -------------------------------------------------------------------------------- 1 | let show = true; 2 | 3 | const menuSection = document.querySelector(".menu-section") 4 | const menuToggle = menuSection.querySelector(".menu-toggle") 5 | 6 | menuToggle.addEventListener("click", () => { 7 | 8 | document.body.style.overflow = show ? "hidden" : "initial" 9 | 10 | menuSection.classList.toggle("on", show) 11 | show = !show; 12 | }) -------------------------------------------------------------------------------- /final/print.css: -------------------------------------------------------------------------------- 1 | header, 2 | .hero, 3 | .image, 4 | #form { 5 | display: none; 6 | padding: 0; 7 | margin: 0; 8 | } 9 | 10 | .cards { 11 | display: block; 12 | } 13 | 14 | .card { 15 | border-bottom: 1px solid; 16 | } 17 | 18 | .text--medium { 19 | color: black; 20 | } -------------------------------------------------------------------------------- /final/responsive.css: -------------------------------------------------------------------------------- 1 | 2 | /* media queries */ 3 | html { 4 | font-size: 50%; 5 | } 6 | 7 | @media (max-width: 630px) { 8 | 9 | .hero .container { 10 | flex-direction: column; 11 | text-align: center; 12 | } 13 | 14 | .hero .container img { 15 | order: -1; 16 | } 17 | 18 | .form-group { 19 | display: block; 20 | } 21 | } 22 | 23 | @media (max-width: 540px) { 24 | nav { 25 | display: none; 26 | } 27 | 28 | .one, 29 | .two, 30 | .three { 31 | background-color: #fff; 32 | height: 5px; 33 | width: 100%; 34 | margin: 6px auto; 35 | 36 | transition-duration: 0.3s; 37 | } 38 | 39 | .menu-toggle { 40 | width: 40px; 41 | height: 30px; 42 | margin-right: 20px; 43 | } 44 | 45 | /* fullscreen */ 46 | .menu-section.on { 47 | position: absolute; 48 | top:0; 49 | left:0; 50 | 51 | width: 100vw; 52 | height: 100vh; 53 | 54 | background-color: #7159c1; 55 | 56 | z-index: 10; 57 | 58 | display: flex; 59 | justify-content: center; 60 | align-items: center; 61 | } 62 | 63 | .menu-section.on nav { 64 | display: block; 65 | } 66 | 67 | .menu-section.on .menu-toggle { 68 | position: absolute; 69 | right: 25px; 70 | top: 15px; 71 | } 72 | 73 | .menu-section.on .menu-toggle .one { 74 | transform: rotate(45deg) translate(7px, 7px); 75 | } 76 | 77 | .menu-section.on .menu-toggle .two { 78 | opacity: 0; 79 | } 80 | 81 | .menu-section.on .menu-toggle .three { 82 | transform: rotate(-45deg) translate(8px, -9px); 83 | } 84 | 85 | .menu-section.on nav ul { 86 | text-align: center; 87 | display: block; 88 | } 89 | 90 | .menu-section.on nav ul a{ 91 | transition-duration: 0.5s; 92 | font-size: 3rem; 93 | line-height: 4rem; 94 | display: block; 95 | 96 | } 97 | 98 | } 99 | 100 | @media (max-width: 320px) { 101 | #form h3 { 102 | font-size: 2rem; 103 | } 104 | } -------------------------------------------------------------------------------- /final/scripts.js: -------------------------------------------------------------------------------- 1 | // Make Cards 2 | const sectionCards = document.querySelector("section.cards"); 3 | 4 | const card = document.querySelector("div.card"); 5 | 6 | const videos = [ 7 | { 8 | title: "Formulário Animado com JS puro e CSS Animation | Mayk Brito", 9 | duration: "57 min", 10 | thumb: "https://i.ytimg.com/vi/GykTLqODQuU/hqdefault.jpg", 11 | video_id: "GykTLqODQuU" 12 | }, 13 | { 14 | title: "Desvendando o CSS Grid na prática | Mayk Brito", 15 | duration: "36 min", 16 | thumb: "https://i.ytimg.com/vi/HN1UjzRSdBk/hqdefault.jpg", 17 | video_id: "HN1UjzRSdBk" 18 | }, 19 | { 20 | title: "Array: Higher Order Functions | Mayk Brito", 21 | duration: "54 min", 22 | thumb: "https://i.ytimg.com/vi/rAzHvYnQ8DY/hqdefault.jpg", 23 | video_id: "rAzHvYnQ8DY" 24 | }, 25 | { 26 | title: "O que é API? REST e RESTful? | Mayk Brito", 27 | duration: "33 min", 28 | thumb: "https://i.ytimg.com/vi/ghTrp1x_1As/hqdefault.jpg", 29 | video_id: "ghTrp1x_1As" 30 | }, 31 | { 32 | title: "Desvendando a variável this no Javascript | Mayk Brito", 33 | duration: "48 min", 34 | thumb: "https://i.ytimg.com/vi/GSqR2i-Pq6o/hqdefault.jpg", 35 | video_id: "GSqR2i-Pq6o" 36 | }, 37 | { 38 | title: 39 | "Como usar Git e Github na prática: Guia para iniciantes | Mayk Brito", 40 | duration: "33 min", 41 | thumb: "https://i.ytimg.com/vi/2alg7MQ6_sI/hqdefault.jpg", 42 | video_id: "2alg7MQ6_sI" 43 | } 44 | ]; 45 | 46 | videos.map(video => { 47 | const cardClone = card.cloneNode(true); 48 | cardClone.setAttribute("id", video.video_id); 49 | cardClone.querySelector("img").src = video.thumb; 50 | cardClone.querySelector(".title").innerHTML = video.title; 51 | cardClone.querySelector(".info > p.text--medium").innerHTML = 52 | video.duration; 53 | sectionCards.appendChild(cardClone); 54 | }); 55 | 56 | card.remove(); 57 | 58 | // Modal actions 59 | const modalOverlay = document.querySelector(".modal-overlay"); 60 | const modal = document.querySelector(".modal"); 61 | const cards = [...document.querySelectorAll(".cards .card")]; 62 | 63 | cards.forEach(card => { 64 | card.addEventListener("click", () => { 65 | modal.querySelector( 66 | "iframe" 67 | ).src = `https://www.youtube.com/embed/${card.getAttribute("id")}`; 68 | modalOverlay.classList.add("active"); 69 | modal.classList.add("active"); 70 | document.querySelector("body").style.overflow = "hidden"; 71 | }); 72 | }); 73 | 74 | document.querySelector(".close-modal").addEventListener("click", () => { 75 | modalOverlay.classList.remove("active"); 76 | modal.classList.remove("active"); 77 | modal.querySelector("iframe").src = ``; 78 | document.querySelector("body").style.overflow = "initial"; 79 | }); 80 | 81 | 82 | 83 | 84 | // MENU RESPONSIVO -------------------------------------------------------------------------------- /final/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | outline: 0; 8 | } 9 | 10 | html { 11 | /* a cada 1rem será considera 10px */ 12 | font-size: 62.5%; 13 | } 14 | 15 | html, 16 | body { 17 | height: 100vh; 18 | font-family: "Source Sans Pro"; 19 | text-rendering: optimizelegibility; 20 | -webkit-font-smoothing: antialiased; 21 | } 22 | 23 | body { 24 | font-size: 1.6rem; 25 | } 26 | 27 | header { 28 | background-color: #7159c1; 29 | } 30 | 31 | header .container { 32 | display: flex; 33 | align-items: center; 34 | justify-content: space-between; 35 | 36 | width: 90%; 37 | max-width: 980px; 38 | 39 | margin: auto; 40 | } 41 | 42 | header img { 43 | width: 150px; 44 | margin-left: 20px; 45 | padding: 15px 0; 46 | } 47 | 48 | header nav ul { 49 | display: flex; 50 | } 51 | 52 | header nav ul li { 53 | list-style: none; 54 | } 55 | 56 | header nav ul li a { 57 | text-decoration: none; 58 | color: white; 59 | text-transform: uppercase; 60 | font-size: 1.4rem; 61 | padding: 2.4rem; 62 | transition: all 250ms linear 0s; 63 | } 64 | 65 | header nav ul li a:hover { 66 | background: rgba(255,255,255, 0.15) 67 | } 68 | 69 | h2 { 70 | color: rgb(75, 75, 75); 71 | font-size: 3.6rem; 72 | line-height: 4.6rem; 73 | } 74 | 75 | h3 { 76 | color: rgb(75, 75, 75); 77 | font-size: 2.8rem; 78 | line-height: 3.8rem; 79 | } 80 | 81 | .button { 82 | display: inline-block; 83 | font-size: 1.6rem; 84 | font-weight: 600; 85 | color: rgb(255, 255, 255); 86 | background-color: rgb(113, 89, 193); 87 | margin: 15px 0px 0px; 88 | padding: 12px 30px; 89 | text-decoration: none; 90 | border-radius: 5px; 91 | transition: all 150ms linear 0s; 92 | } 93 | 94 | .button:hover { 95 | opacity: 0.9; 96 | } 97 | 98 | 99 | /*=============== 100 | HERO 101 | ==================*/ 102 | section.hero { 103 | margin: 80px 0; 104 | } 105 | 106 | section.hero .container { 107 | width: 90%; 108 | max-width: 980px; 109 | 110 | margin: auto; 111 | 112 | display: flex; 113 | } 114 | 115 | section.hero p { 116 | color: rgb(154, 142, 191); 117 | font-size: 1.8rem; 118 | line-height: 3.2rem; 119 | margin: 10px 0px 0px; 120 | } 121 | 122 | 123 | 124 | /*=============== 125 | MAIN 126 | ==================*/ 127 | main { 128 | margin-bottom: 80px; 129 | } 130 | /*=============== 131 | CARDS 132 | ==================*/ 133 | .cards { 134 | width: 90%; 135 | max-width: 980px; 136 | margin: auto; 137 | 138 | display: grid; 139 | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 140 | grid-gap: 20px; 141 | } 142 | 143 | .text--medium { 144 | font-size: 1.6rem; 145 | line-height: 2.6rem; 146 | font-weight: 400; 147 | color: #ecf0f1; 148 | } 149 | 150 | .card { 151 | display: flex; 152 | flex-direction: column; 153 | background-color: #7159c1; 154 | cursor: pointer; 155 | transition: all 0.3s ease 0s; 156 | 157 | } 158 | 159 | .card:hover { 160 | transform: translateY(-7px); 161 | } 162 | 163 | .image { 164 | width: 100%; 165 | padding-top: 56.25%; /* 16:9 */ 166 | 167 | overflow: hidden; 168 | position: relative; 169 | } 170 | 171 | .image img { 172 | width: 100%; 173 | position: absolute; 174 | top: 50%; 175 | left: 50%; 176 | transform: translate(-50%, -50%); 177 | } 178 | 179 | .content { 180 | margin: 20px; 181 | } 182 | 183 | .title { 184 | margin-bottom: 20px; 185 | } 186 | 187 | .info { 188 | display: flex; 189 | align-self: end; 190 | align-items: center; 191 | } 192 | 193 | .price { 194 | margin-left: auto; 195 | padding: 5px 20px; 196 | border-radius: 20px; 197 | background-color: #7159c1; 198 | filter: brightness(90%); 199 | } 200 | 201 | /*=============== 202 | MODAL 203 | ==================*/ 204 | .modal-overlay { 205 | display: flex; 206 | align-items: center; 207 | justify-content: center; 208 | position: fixed; 209 | top: 0; 210 | left: 0; 211 | width: 100%; 212 | height: 100%; 213 | z-index: 5; 214 | background-color: rgba(0, 0, 0, 0.6); 215 | opacity: 0; 216 | visibility: hidden; 217 | } 218 | .modal-overlay.active { 219 | opacity: 1; 220 | visibility: visible; 221 | } 222 | .modal { 223 | display: flex; 224 | align-items: center; 225 | justify-content: center; 226 | position: relative; 227 | 228 | background-color: #fff; 229 | 230 | width: 95%; 231 | height: 95%; 232 | 233 | margin: 0 auto; 234 | padding: 10px; 235 | 236 | border-radius: 3px; 237 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 238 | 239 | opacity: 0; 240 | overflow-y: auto; 241 | visibility: hidden; 242 | 243 | transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1); 244 | transform: scale(1.2); 245 | } 246 | .modal .close-modal { 247 | position: absolute; 248 | cursor: pointer; 249 | 250 | top: 5px; 251 | right: 15px; 252 | 253 | opacity: 0; 254 | 255 | transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), transform 0.6s cubic-bezier(0.55, 0, 0.1, 1); 256 | transition-delay: 0.3s; 257 | } 258 | .modal .close-modal svg { 259 | width: 18px; 260 | height: 18px; 261 | } 262 | .modal .modal-content { 263 | opacity: 0; 264 | transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1); 265 | transition-delay: 0.3s; 266 | } 267 | .modal.active { 268 | visibility: visible; 269 | opacity: 1; 270 | transform: scale(1); 271 | } 272 | .modal.active .modal-content { 273 | opacity: 1; 274 | } 275 | .modal.active .close-modal { 276 | transform: translateY(10px); 277 | opacity: 1; 278 | } 279 | 280 | .video-background { 281 | position: fixed; 282 | top: 0; 283 | right: 0; 284 | bottom: 0; 285 | left: 0; 286 | z-index: -99; 287 | background-color: white; 288 | } 289 | .video-foreground, 290 | .video-background iframe { 291 | position: absolute; 292 | top: 50%; 293 | left: 50%; 294 | width: 100%; 295 | height: 90%; 296 | transform: translate(-50%, -50%); 297 | } 298 | 299 | 300 | 301 | /*=============== 302 | FORM 303 | ==================*/ 304 | #form { 305 | width:100%; 306 | 307 | background: #7159c1; 308 | padding: 80px 0; 309 | margin:0; 310 | 311 | display:flex; 312 | align-items: center; 313 | justify-content: center; 314 | } 315 | 316 | #form form { 317 | width: 90%; 318 | max-width: 980px; 319 | 320 | background: white; 321 | 322 | padding: 40px; 323 | 324 | box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.15), 325 | 0px 10px 20px -10px rgba(0, 0, 0, 0.1) 326 | } 327 | 328 | #form h3 { 329 | margin-bottom: 30px 330 | } 331 | 332 | #form form label { 333 | display: none; 334 | } 335 | 336 | .form-group { 337 | display: flex; 338 | flex-direction: row; 339 | } 340 | 341 | .form-group label.right-inline { 342 | text-align: right; 343 | padding-right: 8px; 344 | padding-left: 10px; 345 | width: auto; 346 | } 347 | 348 | .form-group .input-control { 349 | flex: 1 1; 350 | display: block; 351 | margin: -4px 8px 10px; 352 | padding: 12px; 353 | font-size: 1.6rem; 354 | } 355 | 356 | #form .button { 357 | margin: 20px 8px 10px; 358 | } -------------------------------------------------------------------------------- /inicial/images/logo-rocketseat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /inicial/images/melhores-tecnologias.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 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /inicial/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | 8 |
9 |
10 | Rocketseat 14 |
15 |
16 |
17 |
18 |
19 |
20 | 36 |
37 |
38 |
39 | 40 |
41 |
42 |
43 |

44 | As melhores tecnologias em programação, direto ao ponto e do jeito 45 | certo. 46 |

47 |

48 | No meio de tanta informação e da quantidade de ferramentas que 49 | surgem todos os dias, você precisa de alguém que te leve na direção 50 | certa. 51 |

52 | Quero embarcar neste foguete! 53 |
54 | 58 |
59 |
60 | 61 |
62 |
63 |
64 |
65 | 66 |
67 |
68 |

69 | Formulário Animado com JS puro e CSS Animation | Mayk Brito 70 |

71 |
72 |

57 Min

73 |

Free

74 |
75 |
76 |
77 |
78 |
79 | 80 | 81 | 82 |
83 |
84 |

Quero Estudar na Rocket!

85 |
86 | 87 | 88 | 89 |
90 | 91 |
92 | 93 |
94 | 95 |
96 | 97 |
98 | 99 |
100 | 101 | 102 | 103 |
104 | 105 |
106 | 107 | 108 |
109 | 110 |
111 |
112 | 113 |
114 |
115 | 116 | 117 | 121 | 122 | 123 |
124 |
125 |
126 | 131 |
132 |
133 |
134 |
135 |
136 | 137 | 138 | 139 | 140 | -------------------------------------------------------------------------------- /inicial/scripts.js: -------------------------------------------------------------------------------- 1 | // Make Cards 2 | const sectionCards = document.querySelector("section.cards"); 3 | 4 | const card = document.querySelector("div.card"); 5 | 6 | const videos = [ 7 | { 8 | title: "Formulário Animado com JS puro e CSS Animation | Mayk Brito", 9 | duration: "57 min", 10 | thumb: "https://i.ytimg.com/vi/GykTLqODQuU/hqdefault.jpg", 11 | video_id: "GykTLqODQuU" 12 | }, 13 | { 14 | title: "Desvendando o CSS Grid na prática | Mayk Brito", 15 | duration: "36 min", 16 | thumb: "https://i.ytimg.com/vi/HN1UjzRSdBk/hqdefault.jpg", 17 | video_id: "HN1UjzRSdBk" 18 | }, 19 | { 20 | title: "Array: Higher Order Functions | Mayk Brito", 21 | duration: "54 min", 22 | thumb: "https://i.ytimg.com/vi/rAzHvYnQ8DY/hqdefault.jpg", 23 | video_id: "rAzHvYnQ8DY" 24 | }, 25 | { 26 | title: "O que é API? REST e RESTful? | Mayk Brito", 27 | duration: "33 min", 28 | thumb: "https://i.ytimg.com/vi/ghTrp1x_1As/hqdefault.jpg", 29 | video_id: "ghTrp1x_1As" 30 | }, 31 | { 32 | title: "Desvendando a variável this no Javascript | Mayk Brito", 33 | duration: "48 min", 34 | thumb: "https://i.ytimg.com/vi/GSqR2i-Pq6o/hqdefault.jpg", 35 | video_id: "GSqR2i-Pq6o" 36 | }, 37 | { 38 | title: 39 | "Como usar Git e Github na prática: Guia para iniciantes | Mayk Brito", 40 | duration: "33 min", 41 | thumb: "https://i.ytimg.com/vi/2alg7MQ6_sI/hqdefault.jpg", 42 | video_id: "2alg7MQ6_sI" 43 | } 44 | ]; 45 | 46 | videos.map(video => { 47 | const cardClone = card.cloneNode(true); 48 | cardClone.setAttribute("id", video.video_id); 49 | cardClone.querySelector("img").src = video.thumb; 50 | cardClone.querySelector(".title").innerHTML = video.title; 51 | cardClone.querySelector(".info > p.text--medium").innerHTML = 52 | video.duration; 53 | sectionCards.appendChild(cardClone); 54 | }); 55 | 56 | card.remove(); 57 | 58 | // Modal actions 59 | const modalOverlay = document.querySelector(".modal-overlay"); 60 | const modal = document.querySelector(".modal"); 61 | const cards = [...document.querySelectorAll(".cards .card")]; 62 | 63 | cards.forEach(card => { 64 | card.addEventListener("click", () => { 65 | modal.querySelector( 66 | "iframe" 67 | ).src = `https://www.youtube.com/embed/${card.getAttribute("id")}`; 68 | modalOverlay.classList.add("active"); 69 | modal.classList.add("active"); 70 | document.querySelector("body").style.overflow = "hidden"; 71 | }); 72 | }); 73 | 74 | document.querySelector(".close-modal").addEventListener("click", () => { 75 | modalOverlay.classList.remove("active"); 76 | modal.classList.remove("active"); 77 | modal.querySelector("iframe").src = ``; 78 | document.querySelector("body").style.overflow = "initial"; 79 | }); 80 | -------------------------------------------------------------------------------- /inicial/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | outline: 0; 8 | } 9 | 10 | html, 11 | body { 12 | height: 100vh; 13 | font-family: "Source Sans Pro"; 14 | text-rendering: optimizelegibility; 15 | -webkit-font-smoothing: antialiased; 16 | } 17 | 18 | header { 19 | background-color: #7159c1; 20 | } 21 | 22 | header .container { 23 | display: flex; 24 | align-items: center; 25 | justify-content: space-between; 26 | 27 | width: 980px; 28 | margin: auto; 29 | } 30 | 31 | header img { 32 | width: 150px; 33 | margin-left: 20px; 34 | padding: 15px 0; 35 | } 36 | 37 | header nav ul { 38 | display: flex; 39 | } 40 | 41 | header nav ul li { 42 | list-style: none; 43 | } 44 | 45 | header nav ul li a { 46 | text-decoration: none; 47 | color: white; 48 | text-transform: uppercase; 49 | font-size: 14px; 50 | padding: 24px; 51 | transition: all 250ms linear 0s; 52 | } 53 | 54 | header nav ul li a:hover { 55 | background: rgba(255,255,255, 0.15) 56 | } 57 | 58 | h2 { 59 | color: rgb(75, 75, 75); 60 | font-size: 36px; 61 | line-height: 46px; 62 | } 63 | 64 | h3 { 65 | color: rgb(75, 75, 75); 66 | font-size: 28px; 67 | line-height: 38px; 68 | } 69 | 70 | .button { 71 | display: inline-block; 72 | font-size: 16px; 73 | font-weight: 600; 74 | color: rgb(255, 255, 255); 75 | background-color: rgb(113, 89, 193); 76 | margin: 15px 0px 0px; 77 | padding: 12px 30px; 78 | text-decoration: none; 79 | border-radius: 5px; 80 | transition: all 150ms linear 0s; 81 | } 82 | 83 | .button:hover { 84 | opacity: 0.9; 85 | } 86 | 87 | 88 | /*=============== 89 | HERO 90 | ==================*/ 91 | section.hero { 92 | margin: 80px 0; 93 | } 94 | 95 | section.hero .container { 96 | width: 980px; 97 | margin: auto; 98 | 99 | display: flex; 100 | } 101 | 102 | section.hero p { 103 | color: rgb(154, 142, 191); 104 | font-size: 18px; 105 | line-height: 32px; 106 | margin: 10px 0px 0px; 107 | } 108 | 109 | 110 | 111 | /*=============== 112 | MAIN 113 | ==================*/ 114 | main { 115 | margin-bottom: 80px; 116 | } 117 | /*=============== 118 | CARDS 119 | ==================*/ 120 | .cards { 121 | width: 980px; 122 | margin: auto; 123 | 124 | display: grid; 125 | grid-template-columns: 310px 310px 310px; 126 | grid-gap: 20px; 127 | } 128 | 129 | .text--medium { 130 | font-size: 16px; 131 | line-height: 26px; 132 | font-weight: 400; 133 | color: #ecf0f1; 134 | } 135 | 136 | .card { 137 | display: flex; 138 | flex-direction: column; 139 | background-color: #7159c1; 140 | cursor: pointer; 141 | transition: all 0.3s ease 0s; 142 | 143 | } 144 | 145 | .card:hover { 146 | transform: translateY(-7px); 147 | } 148 | 149 | .image { 150 | width: 100%; 151 | padding-top: 56.25%; /* 16:9 */ 152 | 153 | overflow: hidden; 154 | position: relative; 155 | } 156 | 157 | .image img { 158 | width: 100%; 159 | position: absolute; 160 | top: 50%; 161 | left: 50%; 162 | transform: translate(-50%, -50%); 163 | } 164 | 165 | .content { 166 | margin: 20px; 167 | } 168 | 169 | .title { 170 | margin-bottom: 20px; 171 | } 172 | 173 | .info { 174 | display: flex; 175 | align-self: end; 176 | align-items: center; 177 | } 178 | 179 | .price { 180 | margin-left: auto; 181 | padding: 5px 20px; 182 | border-radius: 20px; 183 | background-color: #7159c1; 184 | filter: brightness(90%); 185 | } 186 | 187 | /*=============== 188 | MODAL 189 | ==================*/ 190 | .modal-overlay { 191 | display: flex; 192 | align-items: center; 193 | justify-content: center; 194 | position: fixed; 195 | top: 0; 196 | left: 0; 197 | width: 100%; 198 | height: 100%; 199 | z-index: 5; 200 | background-color: rgba(0, 0, 0, 0.6); 201 | opacity: 0; 202 | visibility: hidden; 203 | } 204 | .modal-overlay.active { 205 | opacity: 1; 206 | visibility: visible; 207 | } 208 | .modal { 209 | display: flex; 210 | align-items: center; 211 | justify-content: center; 212 | position: relative; 213 | 214 | background-color: #fff; 215 | 216 | width: 800px; 217 | height: 400px; 218 | 219 | margin: 0 auto; 220 | padding: 10px; 221 | 222 | border-radius: 3px; 223 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 224 | 225 | opacity: 0; 226 | overflow-y: auto; 227 | visibility: hidden; 228 | 229 | transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1); 230 | transform: scale(1.2); 231 | } 232 | .modal .close-modal { 233 | position: absolute; 234 | cursor: pointer; 235 | 236 | top: 5px; 237 | right: 15px; 238 | 239 | opacity: 0; 240 | 241 | transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), transform 0.6s cubic-bezier(0.55, 0, 0.1, 1); 242 | transition-delay: 0.3s; 243 | } 244 | .modal .close-modal svg { 245 | width: 18px; 246 | height: 18px; 247 | } 248 | .modal .modal-content { 249 | opacity: 0; 250 | transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1); 251 | transition-delay: 0.3s; 252 | } 253 | .modal.active { 254 | visibility: visible; 255 | opacity: 1; 256 | transform: scale(1); 257 | } 258 | .modal.active .modal-content { 259 | opacity: 1; 260 | } 261 | .modal.active .close-modal { 262 | transform: translateY(10px); 263 | opacity: 1; 264 | } 265 | 266 | .video-background { 267 | position: fixed; 268 | top: 0; 269 | right: 0; 270 | bottom: 0; 271 | left: 0; 272 | z-index: -99; 273 | background-color: white; 274 | } 275 | .video-foreground, 276 | .video-background iframe { 277 | position: absolute; 278 | top: 50%; 279 | left: 50%; 280 | width: 100%; 281 | height: 90%; 282 | transform: translate(-50%, -50%); 283 | } 284 | 285 | 286 | 287 | /*=============== 288 | FORM 289 | ==================*/ 290 | #form { 291 | width:100%; 292 | 293 | background: #7159c1; 294 | padding: 80px 0; 295 | margin:0; 296 | 297 | display:flex; 298 | align-items: center; 299 | justify-content: center; 300 | } 301 | 302 | #form form { 303 | width: 980px; 304 | background: white; 305 | 306 | padding: 40px; 307 | 308 | box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.15), 309 | 0px 10px 20px -10px rgba(0, 0, 0, 0.1) 310 | } 311 | 312 | #form h3 { 313 | margin-bottom: 30px 314 | } 315 | 316 | #form form label { 317 | display: none; 318 | } 319 | 320 | .form-group { 321 | display: flex; 322 | flex-direction: row; 323 | } 324 | 325 | .form-group label.right-inline { 326 | text-align: right; 327 | padding-right: 8px; 328 | padding-left: 10px; 329 | width: auto; 330 | } 331 | 332 | .form-group .input-control { 333 | flex: 1 1; 334 | display: block; 335 | margin: -4px 8px 10px; 336 | padding: 12px; 337 | font-size: 16px; 338 | } 339 | 340 | #form .button { 341 | margin: 20px 8px 10px; 342 | } --------------------------------------------------------------------------------