Skip to content

Commit

Permalink
Desafio do iframe
Browse files Browse the repository at this point in the history 
Uso de tags semânticas e adição de alguns efeitos.
  • Loading branch information
@FThiagoB
FThiagoB committed Jun 1, 2024
1 parent 65f105a commit bebbd1e
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 60 deletions.
31 changes: 14 additions & 17 deletions desafios/14/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="pt-br">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Expand All @@ -9,32 +10,28 @@
</head>

<body>
<div id="container">
<div id="esquerda"></div>

<div id="centro" style="overflow: hidden;">
<main>
<section id="celular">
<img src="./imagens/frame-iphone.png" alt="imagem do celular">
<iframe src="./telas/home.html" frameborder="0" name="tela_celular"></iframe>
</div>
<iframe src="./telas/home.html" frameborder="0" name="tela"></iframe>
</section>

<div id="direita">
<section id="navegação">
<ul type="none">
<li> <a href="telas/home.html" target="tela_celular"><img src="./imagens/logo-home.jpg" alt="link para a tela de início do celular"></a> </li>
<li> <a href="telas/home.html" target="tela"><img src="./imagens/logo-home.jpg" alt="link para a tela de início do celular"></a> </li>

<li> <a href="telas/overlord.html" target="tela_celular"><img src="./imagens/logo-overlord.png" alt="Logo da wiki de Overlord"><span class="tooltiptext">Wiki de Overlord</span></a> </li>
<li> <a href="telas/overlord.html" target="tela"><img src="./imagens/logo-overlord.png" alt="Logo da wiki de Overlord"><span class="dica">Wiki de Overlord</span></a> </li>

<li> <a href="telas/konosuba.html" target="tela_celular"><img src="./imagens/logo-konosuba.jpg" alt="Logo da wiki de Konosuba"><span class="tooltiptext">Wiki de Konosuba</span></a> </li>
<li> <a href="telas/konosuba.html" target="tela"><img src="./imagens/logo-konosuba.jpg" alt="Logo da wiki de Konosuba"><span class="dica">Wiki de Konosuba</span></a> </li>

<li> <a href="telas/rezero.html" target="tela_celular"><img src="./imagens/logo-rezero.jpg" alt="logo da wiki de Re:Zero"><span class="tooltiptext">Wiki de Re:Zero</span></a> </li>
<li> <a href="telas/rezero.html" target="tela"><img src="./imagens/logo-rezero.jpg" alt="logo da wiki de Re:Zero"><span class="dica">Wiki de Re:Zero</span></a> </li>

<li> <a href="telas/yugioh.html" target="tela_celular"><img src="./imagens/logo-yu-gi-oh.jpg" alt="logo da wiki de Yu-Gi-Oh"><span class="tooltiptext">Wiki de Yu-Gi-Oh</span></a> </li>
<li> <a href="telas/yugioh.html" target="tela"><img src="./imagens/logo-yu-gi-oh.jpg" alt="logo da wiki de Yu-Gi-Oh"><span class="dica">Wiki de Yu-Gi-Oh</span></a> </li>

<li> <a href="telas/mushoku.html" target="tela_celular"><img src="./imagens/logo-mushoku.jpg" alt="logo da wiki de Mushoku"><span class="tooltiptext">Wiki de Mushoku</span></a> </li>
<li> <a href="telas/mushoku.html" target="tela"><img src="./imagens/logo-mushoku.jpg" alt="logo da wiki de Mushoku"><span class="dica">Wiki de Mushoku</span></a> </li>
</ul>
</div>

</div>
</section>
</main>

</body>

</html>
80 changes: 37 additions & 43 deletions desafios/14/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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;
Expand All @@ -67,59 +58,56 @@ 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;

/*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;
Expand All @@ -129,16 +117,22 @@ ul > li > a > .tooltiptext {
padding: 5px 5px;
margin-left: 35px;
margin-top: 10px;
border-radius: 6px;
border-radius: 30px;

position: absolute;
right: 50px;

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;
}

0 comments on commit bebbd1e

Please sign in to comment.