Skip to main content
adicionou 79 caracteres ao conteúdo
Fonte Link
Woss
  • 77,2mil
  • 15
  • 123
  • 221
<div id="container">
    <header class="cabeçalho">
        <img class="edusfLogo2" src="edusfLogo2.png" alt="">
    </header>
    
    <tbody>
        <div class="janelaUm">
            <img class="imagemUsuario" src="images/user.png" alt="Perfil">
            <p class="perfil">Perfil</p>
        </div>
    
        <div class="janelaDois">
            <img class="imagemReservas" src="images/reservation.png" alt="Reservas">
            <p class="reservas">Reservas</p>
        </div>
    
        <div class="janelaTres">
            <img class="imagemAdministrador" src="images/administrator.png" alt="Administrador">
            <p class="administrador">Administrador</p>
        </div>
    
        <div class="janelaQuatro">
            <img class="imagemSair" src="images/exit.png" alt="Sair">
            <p class="sair">Sair</p>
        </div>
    </tbody>
    <tfoot>
        <div class="rodape">
            <p class="">Copyright</p>
            <img class="edusfLogo1" src="edusfLogo1.png" alt="">
        </div>
    </tfoot>
</div>

O código em CSS é o seguinte:

@keyframes bounce { 0%, 20%, 60%, 100% { -webkit-transform: translateY(0); transform: translateY(0);
} 40% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } } @media (min-width: 992px) {

*{  
    margin: 0px;
}

#container {
    width: 1152px;
    height: 100vh;
    background-image: linear-gradient(to bottom, white, gray);
}

.edusfLogo2 {
    display: block;
    position: relative;
    top: 200px;
    left: 500px;
}

.janelaUm {
    background-color: rgb(35, 126, 40);
    display: block;
    position: relative;
    top: 301px;
    left: 210px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
}

.janelaUm:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
}

.imagemUsuario {
    position: relative;
    top: 15px;
    left: 25px;
    width: 80px;
    height: 80px;
}


.perfil {
    position: relative;
    top: 15px;
    left: 45px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.janelaDois {
    background-color:  rgb(35, 126, 40);
    display: block;
    position: relative;
    top: 171px;
    left: 410px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
}

.janelaDois:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
}

.imagemReservas {
    position: relative;
    top: 15px;
    left: 25px;
    width: 80px;
    height: 80px;

}

.reservas {
    position: relative;
    top: 10px;
    left: 30px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.janelaTres {
    background-color:  rgb(35, 126, 40);
    display: block;
    position: relative;
    top: 42px;
    left: 610px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
}

.janelaTres:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
}

.imagemAdministrador {
    position: relative;
    top: 15px;
    left: 25px;
    width: 80px;
    height: 80px;

}

.administrador {
    position: relative;
    top: 9px;
    left: 14px;
    font-weight: bold;
    font-size: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.janelaQuatro {
    background-color:  rgb(35, 126, 40);
    display: block;
    position: relative;
    top: -87px;
    left: 810px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
}
.janelaQuatro:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
}

.imagemSair {
    position: relative;
    top: 15px;
    left: 35px;
    width: 80px;
    height: 80px;

}

.sair{
    position: relative;
    top: 10px;
    left: 50px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.rodape {
    display: inline-block;
    position: relative;
    top: 60px;
    width: 1152px;
    height: 136px;
    background-color: rgb(16, 92, 20);
}
.edusfLogo1 {
    display: block;
    position: relative;
    left: 800px;
}
@keyframes bounce {
  0%,
  20%,
  60%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}

@media (min-width: 992px) {
  * {
    margin: 0px;
  }
  #container {
    width: 1152px;
    height: 100vh;
    background-image: linear-gradient(to bottom, white, gray);
  }
  .edusfLogo2 {
    display: block;
    position: relative;
    top: 200px;
    left: 500px;
  }
  .janelaUm {
    background-color: rgb(35, 126, 40);
    display: block;
    position: relative;
    top: 301px;
    left: 210px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
  }
  .janelaUm:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
  }
  .imagemUsuario {
    position: relative;
    top: 15px;
    left: 25px;
    width: 80px;
    height: 80px;
  }
  .perfil {
    position: relative;
    top: 15px;
    left: 45px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .janelaDois {
    background-color: rgb(35, 126, 40);
    display: block;
    position: relative;
    top: 171px;
    left: 410px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
  }
  .janelaDois:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
  }
  .imagemReservas {
    position: relative;
    top: 15px;
    left: 25px;
    width: 80px;
    height: 80px;
  }
  .reservas {
    position: relative;
    top: 10px;
    left: 30px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .janelaTres {
    background-color: rgb(35, 126, 40);
    display: block;
    position: relative;
    top: 42px;
    left: 610px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
  }
  .janelaTres:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
  }
  .imagemAdministrador {
    position: relative;
    top: 15px;
    left: 25px;
    width: 80px;
    height: 80px;
  }
  .administrador {
    position: relative;
    top: 9px;
    left: 14px;
    font-weight: bold;
    font-size: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .janelaQuatro {
    background-color: rgb(35, 126, 40);
    display: block;
    position: relative;
    top: -87px;
    left: 810px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
  }
  .janelaQuatro:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
  }
  .imagemSair {
    position: relative;
    top: 15px;
    left: 35px;
    width: 80px;
    height: 80px;
  }
  .sair {
    position: relative;
    top: 10px;
    left: 50px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .rodape {
    display: inline-block;
    position: relative;
    top: 60px;
    width: 1152px;
    height: 136px;
    background-color: rgb(16, 92, 20);
  }
  .edusfLogo1 {
    display: block;
    position: relative;
    left: 800px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="indexPC.css">
  <link rel="stylesheet" href="indexTV.css">
  <title></title>
</head>

<body class="telaFundo">

  <div id="container">
    <header class="cabeçalho">
      <img class="edusfLogo2" src="edusfLogo2.png" alt="">
    </header>

    <tbody>
      <div class="janelaUm">
        <img class="imagemUsuario" src="images/user.png" alt="Perfil">
        <p class="perfil">Perfil</p>
      </div>

      <div class="janelaDois">
        <img class="imagemReservas" src="images/reservation.png" alt="Reservas">
        <p class="reservas">Reservas</p>
      </div>

      <div class="janelaTres">
        <img class="imagemAdministrador" src="images/administrator.png" alt="Administrador">
        <p class="administrador">Administrador</p>
      </div>

      <div class="janelaQuatro">
        <img class="imagemSair" src="images/exit.png" alt="Sair">
        <p class="sair">Sair</p>
      </div>
    </tbody>
    <tfoot>
      <div class="rodape">
        <p class="">Copyright</p>
        <img class="edusfLogo1" src="edusfLogo1.png" alt="">
      </div>
    </tfoot>
  </div>

</body>

</html>

}

 

<div id="container">
    <header class="cabeçalho">
        <img class="edusfLogo2" src="edusfLogo2.png" alt="">
    </header>
    
    <tbody>
        <div class="janelaUm">
            <img class="imagemUsuario" src="images/user.png" alt="Perfil">
            <p class="perfil">Perfil</p>
        </div>
    
        <div class="janelaDois">
            <img class="imagemReservas" src="images/reservation.png" alt="Reservas">
            <p class="reservas">Reservas</p>
        </div>
    
        <div class="janelaTres">
            <img class="imagemAdministrador" src="images/administrator.png" alt="Administrador">
            <p class="administrador">Administrador</p>
        </div>
    
        <div class="janelaQuatro">
            <img class="imagemSair" src="images/exit.png" alt="Sair">
            <p class="sair">Sair</p>
        </div>
    </tbody>
    <tfoot>
        <div class="rodape">
            <p class="">Copyright</p>
            <img class="edusfLogo1" src="edusfLogo1.png" alt="">
        </div>
    </tfoot>
</div>

O código em CSS é o seguinte:

@keyframes bounce { 0%, 20%, 60%, 100% { -webkit-transform: translateY(0); transform: translateY(0);
} 40% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } } @media (min-width: 992px) {

*{  
    margin: 0px;
}

#container {
    width: 1152px;
    height: 100vh;
    background-image: linear-gradient(to bottom, white, gray);
}

.edusfLogo2 {
    display: block;
    position: relative;
    top: 200px;
    left: 500px;
}

.janelaUm {
    background-color: rgb(35, 126, 40);
    display: block;
    position: relative;
    top: 301px;
    left: 210px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
}

.janelaUm:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
}

.imagemUsuario {
    position: relative;
    top: 15px;
    left: 25px;
    width: 80px;
    height: 80px;
}


.perfil {
    position: relative;
    top: 15px;
    left: 45px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.janelaDois {
    background-color:  rgb(35, 126, 40);
    display: block;
    position: relative;
    top: 171px;
    left: 410px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
}

.janelaDois:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
}

.imagemReservas {
    position: relative;
    top: 15px;
    left: 25px;
    width: 80px;
    height: 80px;

}

.reservas {
    position: relative;
    top: 10px;
    left: 30px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.janelaTres {
    background-color:  rgb(35, 126, 40);
    display: block;
    position: relative;
    top: 42px;
    left: 610px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
}

.janelaTres:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
}

.imagemAdministrador {
    position: relative;
    top: 15px;
    left: 25px;
    width: 80px;
    height: 80px;

}

.administrador {
    position: relative;
    top: 9px;
    left: 14px;
    font-weight: bold;
    font-size: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.janelaQuatro {
    background-color:  rgb(35, 126, 40);
    display: block;
    position: relative;
    top: -87px;
    left: 810px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
}
.janelaQuatro:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
}

.imagemSair {
    position: relative;
    top: 15px;
    left: 35px;
    width: 80px;
    height: 80px;

}

.sair{
    position: relative;
    top: 10px;
    left: 50px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.rodape {
    display: inline-block;
    position: relative;
    top: 60px;
    width: 1152px;
    height: 136px;
    background-color: rgb(16, 92, 20);
}
.edusfLogo1 {
    display: block;
    position: relative;
    left: 800px;
}

}

@keyframes bounce {
  0%,
  20%,
  60%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}

@media (min-width: 992px) {
  * {
    margin: 0px;
  }
  #container {
    width: 1152px;
    height: 100vh;
    background-image: linear-gradient(to bottom, white, gray);
  }
  .edusfLogo2 {
    display: block;
    position: relative;
    top: 200px;
    left: 500px;
  }
  .janelaUm {
    background-color: rgb(35, 126, 40);
    display: block;
    position: relative;
    top: 301px;
    left: 210px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
  }
  .janelaUm:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
  }
  .imagemUsuario {
    position: relative;
    top: 15px;
    left: 25px;
    width: 80px;
    height: 80px;
  }
  .perfil {
    position: relative;
    top: 15px;
    left: 45px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .janelaDois {
    background-color: rgb(35, 126, 40);
    display: block;
    position: relative;
    top: 171px;
    left: 410px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
  }
  .janelaDois:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
  }
  .imagemReservas {
    position: relative;
    top: 15px;
    left: 25px;
    width: 80px;
    height: 80px;
  }
  .reservas {
    position: relative;
    top: 10px;
    left: 30px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .janelaTres {
    background-color: rgb(35, 126, 40);
    display: block;
    position: relative;
    top: 42px;
    left: 610px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
  }
  .janelaTres:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
  }
  .imagemAdministrador {
    position: relative;
    top: 15px;
    left: 25px;
    width: 80px;
    height: 80px;
  }
  .administrador {
    position: relative;
    top: 9px;
    left: 14px;
    font-weight: bold;
    font-size: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .janelaQuatro {
    background-color: rgb(35, 126, 40);
    display: block;
    position: relative;
    top: -87px;
    left: 810px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
  }
  .janelaQuatro:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
  }
  .imagemSair {
    position: relative;
    top: 15px;
    left: 35px;
    width: 80px;
    height: 80px;
  }
  .sair {
    position: relative;
    top: 10px;
    left: 50px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .rodape {
    display: inline-block;
    position: relative;
    top: 60px;
    width: 1152px;
    height: 136px;
    background-color: rgb(16, 92, 20);
  }
  .edusfLogo1 {
    display: block;
    position: relative;
    left: 800px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="indexPC.css">
  <link rel="stylesheet" href="indexTV.css">
  <title></title>
</head>

<body class="telaFundo">

  <div id="container">
    <header class="cabeçalho">
      <img class="edusfLogo2" src="edusfLogo2.png" alt="">
    </header>

    <tbody>
      <div class="janelaUm">
        <img class="imagemUsuario" src="images/user.png" alt="Perfil">
        <p class="perfil">Perfil</p>
      </div>

      <div class="janelaDois">
        <img class="imagemReservas" src="images/reservation.png" alt="Reservas">
        <p class="reservas">Reservas</p>
      </div>

      <div class="janelaTres">
        <img class="imagemAdministrador" src="images/administrator.png" alt="Administrador">
        <p class="administrador">Administrador</p>
      </div>

      <div class="janelaQuatro">
        <img class="imagemSair" src="images/exit.png" alt="Sair">
        <p class="sair">Sair</p>
      </div>
    </tbody>
    <tfoot>
      <div class="rodape">
        <p class="">Copyright</p>
        <img class="edusfLogo1" src="edusfLogo1.png" alt="">
      </div>
    </tfoot>
  </div>

</body>

</html>
 

Fonte Link

Espaço em branco indesejado CSS

Existe um Espaço em branco no inferior página HTML que estou criando. Queria removê-la, mas não sei o parâmetro em CSS que está causando aquele espaço indesejado. O código em HTML é o seguinte:

<div id="container">
    <header class="cabeçalho">
        <img class="edusfLogo2" src="edusfLogo2.png" alt="">
    </header>
    
    <tbody>
        <div class="janelaUm">
            <img class="imagemUsuario" src="images/user.png" alt="Perfil">
            <p class="perfil">Perfil</p>
        </div>
    
        <div class="janelaDois">
            <img class="imagemReservas" src="images/reservation.png" alt="Reservas">
            <p class="reservas">Reservas</p>
        </div>
    
        <div class="janelaTres">
            <img class="imagemAdministrador" src="images/administrator.png" alt="Administrador">
            <p class="administrador">Administrador</p>
        </div>
    
        <div class="janelaQuatro">
            <img class="imagemSair" src="images/exit.png" alt="Sair">
            <p class="sair">Sair</p>
        </div>
    </tbody>
    <tfoot>
        <div class="rodape">
            <p class="">Copyright</p>
            <img class="edusfLogo1" src="edusfLogo1.png" alt="">
        </div>
    </tfoot>
</div>

O código em CSS é o seguinte:

@keyframes bounce { 0%, 20%, 60%, 100% { -webkit-transform: translateY(0); transform: translateY(0);
} 40% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } } @media (min-width: 992px) {

*{  
    margin: 0px;
}

#container {
    width: 1152px;
    height: 100vh;
    background-image: linear-gradient(to bottom, white, gray);
}

.edusfLogo2 {
    display: block;
    position: relative;
    top: 200px;
    left: 500px;
}

.janelaUm {
    background-color: rgb(35, 126, 40);
    display: block;
    position: relative;
    top: 301px;
    left: 210px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
}

.janelaUm:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
}

.imagemUsuario {
    position: relative;
    top: 15px;
    left: 25px;
    width: 80px;
    height: 80px;
}


.perfil {
    position: relative;
    top: 15px;
    left: 45px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.janelaDois {
    background-color:  rgb(35, 126, 40);
    display: block;
    position: relative;
    top: 171px;
    left: 410px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
}

.janelaDois:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
}

.imagemReservas {
    position: relative;
    top: 15px;
    left: 25px;
    width: 80px;
    height: 80px;

}

.reservas {
    position: relative;
    top: 10px;
    left: 30px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.janelaTres {
    background-color:  rgb(35, 126, 40);
    display: block;
    position: relative;
    top: 42px;
    left: 610px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
}

.janelaTres:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
}

.imagemAdministrador {
    position: relative;
    top: 15px;
    left: 25px;
    width: 80px;
    height: 80px;

}

.administrador {
    position: relative;
    top: 9px;
    left: 14px;
    font-weight: bold;
    font-size: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.janelaQuatro {
    background-color:  rgb(35, 126, 40);
    display: block;
    position: relative;
    top: -87px;
    left: 810px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
}
.janelaQuatro:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
}

.imagemSair {
    position: relative;
    top: 15px;
    left: 35px;
    width: 80px;
    height: 80px;

}

.sair{
    position: relative;
    top: 10px;
    left: 50px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.rodape {
    display: inline-block;
    position: relative;
    top: 60px;
    width: 1152px;
    height: 136px;
    background-color: rgb(16, 92, 20);
}
.edusfLogo1 {
    display: block;
    position: relative;
    left: 800px;
}

}