diff --git a/desafios/14/imagens/favicon.ico b/desafios/14/imagens/favicon.ico new file mode 100644 index 0000000..963ff0b Binary files /dev/null and b/desafios/14/imagens/favicon.ico differ diff --git a/desafios/14/imagens/logo-rezero.jpg b/desafios/14/imagens/logo-rezero.jpg index fc372f7..174f6ec 100644 Binary files a/desafios/14/imagens/logo-rezero.jpg and b/desafios/14/imagens/logo-rezero.jpg differ diff --git a/desafios/14/index.html b/desafios/14/index.html index 4dbec54..dca2274 100644 --- a/desafios/14/index.html +++ b/desafios/14/index.html @@ -7,31 +7,30 @@ Desafio da tela de celular +
- imagem do celular - +
- \ No newline at end of file diff --git a/desafios/14/style.css b/desafios/14/style.css index 4224716..8167b75 100644 --- a/desafios/14/style.css +++ b/desafios/14/style.css @@ -5,134 +5,102 @@ padding: 0px; } +html, body{ + height: 100vh; + width: 100vw; +} + body{ background-color: bisque; background-image: url("./imagens/fundo-madeira.jpg"); background-attachment: fixed; background-size: cover; - background-repeat: no-repeat; - background-position: center center; + background-position: top center; } main{ position: relative; + height: 100vh; } section#celular{ position: absolute; - left: 0; - - width: 93vw; - height: 100vh; + + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + + width: 311px; + height: 627px; - text-align: center; - z-index: -2; - - /*background-color: rgb(52, 26, 251);*/ -} + z-index: 0; -section#navegação{ - position: absolute; - right: 0px; - - width: 100px; - height: 100vh; - - /*background-color: rgb(251, 153, 26);*/ + /* Adiciona o frame do celular como tela de fundo*/ + /* background-color: rgb(52, 26, 251); */ + background-image: url("./imagens/frame-iphone.png"); + background-position: top center; + background-repeat: no-repeat; } -section#celular img{ - position: absolute; +iframe#tela{ + position: relative; - top: 40%; - left: 50%; + margin-left: 21px; + margin-top: 80px; - transform: translate(-50%, -40%); + width: 268px; + height: 474px; + z-index: 0; - width: 312.6px; - height: 627px; + /* background-color: rgba(255, 0, 0, 0.965); */ } -iframe{ +section#navegação{ position: absolute; - top: 40%; - left: 50%; - - margin-top: 17px; - margin-left: 8px; + top: 50%; + right: 15px; + transform: translate(0, -50%); - transform: translate(-50%, -40%); + padding-top: 15px; - width: 284.5px; - height: 485px; - - /*background-color: rgba(255, 0, 0, 0.385);*/ + /* background-color: aliceblue; */ } section#navegação ul{ - position: absolute; - - right: 10px; - top: 0px; + list-style: none; } -section#navegação > ul > li:first-child{ - margin-top: 20px; -} - -section#navegação > ul > li{ - padding: 10px; - margin: 0px; -} - -section#navegação > ul{ - height: 500px -} - -section#navegação > ul > li img{ - width: 50px; - height: 50px; +section#navegação img{ + margin-bottom: 25px; + + width: 65px; + height: 65px; border-radius: 50%; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.382); + + /* Faz com que a borda seja parte da imagem */ box-sizing: border-box; + + background-color: black; } -section#navegação > ul > li img:hover{ +section#navegação img:hover{ box-shadow: 2px 4px 3px 1px rgba(3, 6, 8, 0.573); border: 1px solid rgba(46, 8, 14, 0.556); transform: translate(-3px, -3px); - transition: transform .3s, border .3s, box-shadow .3s; + transition: transform .25s, border .25s, box-shadow .25s; } -ul > li > a > .dica { - width: 150px; - - background-color: black; - color: #fff; - text-align: center; - - padding: 5px 5px; - margin-left: 35px; - margin-top: 10px; - border-radius: 30px; +@media(max-height: 627px){ + html, body{ + width: 100%; + } - position: absolute; - right: 50px; - - z-index: -1; - - font-family: cursive; - - visibility: hidden; - opacity:0; -} - -ul > li > a:hover > .dica{ - visibility: visible; - opacity: 1; - - transition:visibility .5s linear,opacity .5s linear; + main{ + height: 627px; + } } \ No newline at end of file diff --git a/desafios/14/telas/css/style.css b/desafios/14/telas/css/style.css new file mode 100644 index 0000000..e7a6488 --- /dev/null +++ b/desafios/14/telas/css/style.css @@ -0,0 +1,35 @@ +@charset "UTF-8"; + +*{ + padding: 0px; + margin: 0px; +} + +img{ + width: 100vw; + border: 0px; +} + +a{ + display: block; + + padding: 10px 0px; + width: 100%; + + background-color: rgb(125, 2, 2); + color: white; + + font-variant: small-caps; + text-decoration: none; + text-align: center; + font-family: cursive; +} + +a:hover{ + background-color: rgb(177, 5, 5); + font-weight: bold; +} + +::-webkit-scrollbar{ + width: 0px; +} \ No newline at end of file diff --git a/desafios/14/telas/home.html b/desafios/14/telas/home.html index c28dca8..411efe4 100644 --- a/desafios/14/telas/home.html +++ b/desafios/14/telas/home.html @@ -7,22 +7,24 @@ - Tela de home do celular \ No newline at end of file diff --git a/desafios/14/telas/konosuba.html b/desafios/14/telas/konosuba.html index 8bedda2..e69078c 100644 --- a/desafios/14/telas/konosuba.html +++ b/desafios/14/telas/konosuba.html @@ -6,39 +6,7 @@ Wiki de Konosuba - + diff --git a/desafios/14/telas/mushoku.html b/desafios/14/telas/mushoku.html index e1231c3..d772089 100644 --- a/desafios/14/telas/mushoku.html +++ b/desafios/14/telas/mushoku.html @@ -6,39 +6,7 @@ Wiki de Mushoku - + diff --git a/desafios/14/telas/overlord.html b/desafios/14/telas/overlord.html index 318b975..385f946 100644 --- a/desafios/14/telas/overlord.html +++ b/desafios/14/telas/overlord.html @@ -5,39 +5,7 @@ Wiki de Overlord - + diff --git a/desafios/14/telas/rezero.html b/desafios/14/telas/rezero.html index 84b159b..4f90b23 100644 --- a/desafios/14/telas/rezero.html +++ b/desafios/14/telas/rezero.html @@ -6,39 +6,7 @@ Wiki de Re:Zero - + diff --git a/desafios/14/telas/yugioh.html b/desafios/14/telas/yugioh.html index 7e2317d..aad475b 100644 --- a/desafios/14/telas/yugioh.html +++ b/desafios/14/telas/yugioh.html @@ -6,39 +6,7 @@ Wiki de Yu-Gi-Oh - +