diff --git a/desafios/15/css/media_queries.css b/desafios/15/css/media_queries.css index 6be9730..c7ba674 100644 --- a/desafios/15/css/media_queries.css +++ b/desafios/15/css/media_queries.css @@ -1,2 +1,130 @@ @charset "UTF-8"; +/* Typical Device Breakpoints + + Small Screens: 0-600px + Celular: 601px-768px + Tablet: 769px-992px + Desktops: 993px-1200px + Grandes telas: >1200px +*/ + +/* Tablet */ +@media screen and (min-width: 850px){ + html, body{ + background: linear-gradient(#5D2B7F, #4C929A); + } + + main{ + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: nowrap; + + width: 80vw; + height: 290px; + } + + section.imagem{ + height: 100%; + width: 35vw; + + border-radius: 20px 0px 0px 20px; + } + + section.form{ + width: 100%; + height: 100%; + border-radius: 20px; + padding: 0px 5px; + } + + section.form p{ + padding: 0px 5px; + } + + form .campo{ + padding: 0px; + margin: 5px 0px; + border-radius: 7px; + } + + form .campo .icon{ + padding: 0px; + margin: 0px; + + text-align: center; + } + + form .campo .input{ + width: 91%; + + padding: 10px 0px; + margin: 2px 0px; + } + + form #submit, form #forget{ + width: 100%; + padding: 10px 0px; + } +} + +/* Desktops */ +@media screen and (min-width: 1100px){ + html, body{ + background: linear-gradient(#5D2B7F, #4A9C9C); + } + + main{ + display: flex; + flex-direction: row-reverse; + justify-content: center; + flex-wrap: nowrap; + + width: 90vw; + height: 380px; + } + + section.imagem{ + height: 100%; + width: 50vw; + + border-radius: 0px 20px 20px 0px; + } + + section.form{ + width: 50vw; + } + + section.form p{ + margin-bottom: 25px; + } + + form .campo{ + font-size: 1.5em; + } + + form .campo .icon{ + font-size: 35px; + padding: 0px 4px; + } + + form .campo .input{ + width: 90%; + } + + form #submit, form #forget{ + margin: 5px 0px; + font-size: 18px; + } + + section.form h1{ + font-size: 2.2em; + } + + section.form p{ + font-size: 18px; + line-height: 25px; + } +} + diff --git a/desafios/15/css/style.css b/desafios/15/css/style.css index a408d69..052278e 100644 --- a/desafios/15/css/style.css +++ b/desafios/15/css/style.css @@ -29,6 +29,10 @@ main{ transform: translate(-50%, -50%); border-radius: 20px; + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.247); + + transition: width .125s, height .125s; + transition-timing-function: ease; } section.imagem{ @@ -85,7 +89,9 @@ form .campo .input{ border-radius: 10px; vertical-align: middle; padding: 10px 6px; - margin: 0px; + margin: 1px 0px; + text-indent: 5px; + border: none; } form .campo .input:focus{ diff --git a/site/index.html b/site/index.html index d4ee81b..657dd23 100644 --- a/site/index.html +++ b/site/index.html @@ -490,6 +490,10 @@

Desafios

d14 Desafio da tela de celular + +d15 +Desafio tela de login + diff --git a/site/search/search_index.json b/site/search/search_index.json index 2bceade..0e78f6c 100644 --- a/site/search/search_index.json +++ b/site/search/search_index.json @@ -1 +1 @@ -{"config":{"lang":["pt"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"","title":"In\u00edcio","text":""},{"location":"#exercicios","title":"Exerc\u00edcios","text":"P\u00e1gina Descri\u00e7\u00e3o ex01 Primeira p\u00e1gina HTML ex02 Usando par\u00e1grafos e emojis ex03 Come\u00e7ando com imagens ex04 Usando favicon ex05 Hierarquia de t\u00edtulos ex06 Formata\u00e7\u00e3o de textos ex09 Listas ex11 Usando imagens e \u00e1udios ex12 Usando v\u00eddeos ex13 Folhas de estilo ex14 Folhas de estilo (2) ex15 Folhas de estilo (3) ex16 Representando cores ex17 Usando fontes (1) ex18 Usando fontes (2) ex19 Seletores CSS ex20 Pseudoclasses ex21 Modelo de caixa ex22 Usando imagens de fundo ex23 Criando tabelas ex24 Usando iframes ex25 Formul\u00e1rios ex26 Media Queries (1)"},{"location":"#desafios","title":"Desafios","text":"P\u00e1gina Descri\u00e7\u00e3o d01 Desafio das mensagens d02 Desafio das imagens d03 Desafio do mapa mundi d04 Desafio dos emojis d05 Desafio social d06 Desafio das tags d07 Desafio da imagem flex\u00edvel d08 Desafio de navega\u00e7\u00e3o d09 Desafio dos v\u00eddeos d10 Desafio Android d10 Desafio Android : P\u00e1gina criada na solu\u00e7\u00e3o d12 Desafio do cordel d13 Desafio das tabelas d14 Desafio da tela de celular"}]} \ No newline at end of file +{"config":{"lang":["pt"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"","title":"In\u00edcio","text":""},{"location":"#exercicios","title":"Exerc\u00edcios","text":"P\u00e1gina Descri\u00e7\u00e3o ex01 Primeira p\u00e1gina HTML ex02 Usando par\u00e1grafos e emojis ex03 Come\u00e7ando com imagens ex04 Usando favicon ex05 Hierarquia de t\u00edtulos ex06 Formata\u00e7\u00e3o de textos ex09 Listas ex11 Usando imagens e \u00e1udios ex12 Usando v\u00eddeos ex13 Folhas de estilo ex14 Folhas de estilo (2) ex15 Folhas de estilo (3) ex16 Representando cores ex17 Usando fontes (1) ex18 Usando fontes (2) ex19 Seletores CSS ex20 Pseudoclasses ex21 Modelo de caixa ex22 Usando imagens de fundo ex23 Criando tabelas ex24 Usando iframes ex25 Formul\u00e1rios ex26 Media Queries (1)"},{"location":"#desafios","title":"Desafios","text":"P\u00e1gina Descri\u00e7\u00e3o d01 Desafio das mensagens d02 Desafio das imagens d03 Desafio do mapa mundi d04 Desafio dos emojis d05 Desafio social d06 Desafio das tags d07 Desafio da imagem flex\u00edvel d08 Desafio de navega\u00e7\u00e3o d09 Desafio dos v\u00eddeos d10 Desafio Android d10 Desafio Android : P\u00e1gina criada na solu\u00e7\u00e3o d12 Desafio do cordel d13 Desafio das tabelas d14 Desafio da tela de celular d15 Desafio tela de login"}]} \ No newline at end of file diff --git a/site/sitemap.xml.gz b/site/sitemap.xml.gz index 45407ea..940a1fe 100644 Binary files a/site/sitemap.xml.gz and b/site/sitemap.xml.gz differ