Skip to content

Commit

Permalink
Correções no desafio sobre iframes
Browse files Browse the repository at this point in the history
  • Loading branch information
@FThiagoB
FThiagoB committed Jun 15, 2024
1 parent bebbd1e commit ad7c689
Show file tree
Hide file tree
Showing 11 changed files with 112 additions and 268 deletions.
Binary file added desafios/14/imagens/favicon.ico
View file
Binary file not shown.
Binary file modified desafios/14/imagens/logo-rezero.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 9 additions & 10 deletions desafios/14/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,31 +7,30 @@
<title>Desafio da tela de celular</title>

<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="./imagens/favicon.ico" type="image/x-icon">
</head>

<body>
<main>
<section id="celular">
<img src="./imagens/frame-iphone.png" alt="imagem do celular">
<iframe src="./telas/home.html" frameborder="0" name="tela"></iframe>
<iframe src="./telas/home.html" frameborder="0" name="tela" id="tela"></iframe>
</section>

<section id="navegação">
<ul type="none">
<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>
<ul>
<li> <a href="telas/home.html" target="tela"><img src="./imagens/logo-home.jpg" alt="ícone para a tela de início do celular"></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/overlord.html" target="tela"><img src="./imagens/logo-overlord.png" alt="logo da wiki de Overlord"></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/konosuba.html" target="tela"><img src="./imagens/logo-konosuba.jpg" alt="logo da wiki de Konosuba"></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/rezero.html" target="tela"><img src="./imagens/logo-rezero.jpg" alt="logo da wiki de Re:Zero"></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/yugioh.html" target="tela"><img src="./imagens/logo-yu-gi-oh.jpg" alt="logo da wiki de Yu-Gi-Oh"></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>
<li> <a href="telas/mushoku.html" target="tela"><img src="./imagens/logo-mushoku.jpg" alt="logo da wiki de Mushoku"></a> </li>
</ul>
</section>
</main>

</body>
</html>
140 changes: 54 additions & 86 deletions desafios/14/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
35 changes: 35 additions & 0 deletions desafios/14/telas/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
16 changes: 9 additions & 7 deletions desafios/14/telas/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,24 @@

<style>
*{
padding: 0px;
margin: 0px;
padding: 0px;
}

img{
width: 270px;
}
body{
height: 100vh;
width: 100vw;

::-webkit-scrollbar{
width: 1px;
background-color: black;
background-image: url("./../imagens/tela-home.jpg");
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
</style>
</head>

<body>
<img src="./../imagens/tela-home.jpg" alt="Tela de home do celular">
</body>

</html>
34 changes: 1 addition & 33 deletions desafios/14/telas/konosuba.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,39 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wiki de Konosuba</title>

<style>
*{
padding: 0px;
margin: 0px;
}

img{
width: 270px;
}

a{
display: block;

padding: 25px;
width: 220px;

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: 1px;
}
</style>
<link rel="stylesheet" href="./css/style.css">
</head>

<body>
Expand Down
34 changes: 1 addition & 33 deletions desafios/14/telas/mushoku.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,39 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wiki de Mushoku</title>

<style>
*{
padding: 0px;
margin: 0px;
}

img{
width: 270px;
}

a{
display: block;

padding: 25px;
width: 220px;

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: 1px;
}
</style>
<link rel="stylesheet" href="./css/style.css">
</head>

<body>
Expand Down
Loading

0 comments on commit ad7c689

Please sign in to comment.