diff --git a/desafios/14/index.html b/desafios/14/index.html index 0330186..4dbec54 100644 --- a/desafios/14/index.html +++ b/desafios/14/index.html @@ -1,5 +1,6 @@ + @@ -9,32 +10,28 @@ -
-
- -
+
+
imagem do celular - -
+ + -
+
- -
+ + - \ No newline at end of file diff --git a/desafios/14/style.css b/desafios/14/style.css index ea6d246..4224716 100644 --- a/desafios/14/style.css +++ b/desafios/14/style.css @@ -15,33 +15,24 @@ body{ background-position: center center; } -#container{ +main{ position: relative; } -#esquerda{ +section#celular{ position: absolute; - left: 0px; + left: 0; - width: 10vw; + width: 93vw; height: 100vh; - - /*background-color: antiquewhite;*/ -} - -#centro{ - position: absolute; - left: 10vw; - - width: 90vw; - height: 100vh; - - /*background-color: rgb(52, 26, 251);*/ + text-align: center; z-index: -2; + + /*background-color: rgb(52, 26, 251);*/ } -#direita{ +section#navegação{ position: absolute; right: 0px; @@ -51,13 +42,13 @@ body{ /*background-color: rgb(251, 153, 26);*/ } -#centro img{ +section#celular img{ position: absolute; top: 40%; - left: 40%; + left: 50%; - transform: translate(-40%, -40%); + transform: translate(-50%, -40%); width: 312.6px; height: 627px; @@ -67,12 +58,12 @@ iframe{ position: absolute; top: 40%; - left: 40%; + left: 50%; - margin-top: 16px; - margin-left: 10px; + margin-top: 17px; + margin-left: 8px; - transform: translate(-40%, -40%); + transform: translate(-50%, -40%); width: 284.5px; height: 485px; @@ -80,46 +71,43 @@ iframe{ /*background-color: rgba(255, 0, 0, 0.385);*/ } -#direita ul{ +section#navegação ul{ position: absolute; + right: 10px; top: 0px; } -#direita ul li:first-child{ +section#navegação > ul > li:first-child{ margin-top: 20px; } -#direita ul li{ +section#navegação > ul > li{ padding: 10px; margin: 0px; } -#direta ul{ +section#navegação > ul{ height: 500px - } -#direita ul li img{ +section#navegação > ul > li img{ width: 50px; height: 50px; - border-radius: 50px; + border-radius: 50%; + box-sizing: border-box; } -#direita ul li img:hover{ - width: 47px; - height: 47px; - - margin: 1.5px 0; - - box-shadow: 6px 5px 3px 1px rgba(2, 6, 8, 0.404); +section#navegação > ul > li 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; } -ul > li > a > .tooltiptext { - visibility: hidden; - +ul > li > a > .dica { width: 150px; background-color: black; @@ -129,7 +117,7 @@ ul > li > a > .tooltiptext { padding: 5px 5px; margin-left: 35px; margin-top: 10px; - border-radius: 6px; + border-radius: 30px; position: absolute; right: 50px; @@ -137,8 +125,14 @@ ul > li > a > .tooltiptext { z-index: -1; font-family: cursive; + + visibility: hidden; + opacity:0; } -ul > li > a:hover > .tooltiptext{ +ul > li > a:hover > .dica{ visibility: visible; + opacity: 1; + + transition:visibility .5s linear,opacity .5s linear; } \ No newline at end of file