he aqui mi aporte… cabe aclarar que me costo mucho lograrlo y necesite mucha ayuda… pude lograr hacerlo para web pero me cuesta mcuho ha...

DAMIÁN NICOLAS PINEDO

Pregunta

student•

he aqui mi aporte… cabe aclarar que me costo mucho lograrlo y necesite mucha ayuda… pude lograr hacerlo para web pero me cuesta mcuho hacerlo responsive ,se van los botones cada vez que achico la imagen, y eso queda muy feo, alguien sabria cual es mi error?? adjunto mi codigo

!DOCTYPE html>
<html lang="es">

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

<body>
  <header>
    <figure>
      <img src="./claseImg/fnaf.png.png" alt="fnaf">
      
    </figure>
    <h1>Freddy Fazzbeard Pizza</h1>
    <nav>
     
      <ul class="nav">
        <li>
        <a class="box">Inicio</a>  
        </li>
        <li><a class="box">Blog</a></li>
        <li><a class="box">Dirección</a></li>
        <li<a class="box">Acerca de</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <aside>
      <div><img src="./claseImg/pizza-con-chorizo-jamon-y-queso-1080x671.jpg"alt="pizza"></div>
      <div><img src="./claseImg/descarga.jfif"alt="hamburguesa"></div>
      <div><img src="./claseImg/queso-cheddar-salsa1.jpg"alt="papasconchedar"></div>
      <div><img src="./claseImg/acb420975cfa88a8110e6cb89c5f7c70.jpg"alt="cervezavikinga"></div>
    </aside>
    <section  >
      <div class="bloque">
        <img  src="./claseImg/ed47b9875072a54c00651218e1b77c0c.png" alt="">
      </div>
       <p class="parrafo" >Bienvenidos a FazzbeardPizza el mejor lugar para entretenimiento
         de los niños!!! hay pizza musica y un show con animatronicos!!
         que esperas para venir? ... its me ...
      </p>
      
    </section>
  </main>
  <footer>
    <div class="footer-redes">
      Redes Sociales
    </div>
    <div class="footer-contactos">
      Información
    </div>
  </footer>
</body>

</html>

y este el css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   
  }
  
  html {
    font-size: 62.5%;
  }
  
  body {
    font-size: 1.6rem;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
  
  li {
    list-style: none;
  }
  
  header {
    height: 20vh;
    background:linear-gradient(70deg, black, orange);
  }
  
  main {
    height: 80vh;
  }
  
  footer {
    height: 10vh;
    background-color:#211b19;
  }
  
  figure, nav {
    display: inline-block;
  }
  
  figure {
    margin: 1rem;
  }
  /*logo*/
  header img{
      width: 30%;
      height:30%;
      position:relative;
      bottom:40px
  }
h1{
    position: absolute;
    display: inline-block;
    width:10vw;
    left:16rem;
    color:orange
}

  li {
    display: inline-block;
  }
      figure, nav {
        display: inline-block;
      }
      
      figure {
        margin: 1rem;
      }
      
      li {
        display: inline-block;
        margin: 1rem;
      }
      
      .nav {
        position: absolute;
        right: 1.5rem;
      }
      
      .box{
          padding:20px;
          background-color: dimgrey;
          border-radius: 20px;
          display: inline-block;
          right:0;
          position: relative;
          bottom:18rem;
          color:white;
          

      }
      
      aside, section {
        display: inline-block;
        height: 80vh;
      }
      
      aside {
        width: 20vw;
        background:linear-gradient(120deg, black, orange);
       
      }
      aside img{
          height: 15vh;
          width:17vw;
          border-radius: 10px;
      }
      
      aside div {
        height: 15vh;
        margin: 3vh;
       
      }
      
     section {
         background-color:black ;
        position: absolute;
        left: 20vw;
        width: 80vw;
        padding: 1rem;
        
      } 
      section img{
          width: 76vw;
          height:74vh;
          position: relative;
          padding: 0px;
          margin:0px
      }
      .bloque{
          position: absolute;
          display: inline-block;
          align-self: center;
      }
      .parrafo{
        font-size: 30px;
        position: absolute;
        color: blanchedalmond;
        display: inline-block;
        margin-top: 20%;
      }
      
      .footer-redes, .footer-contactos {
        display: inline-block;
        padding:1vh;
        background-color: coral;
        margin: 1rem;
        border-radius: 10px;
        color: white;
      }
      
      .footer-contactos {
        position: absolute;
        right: 1.5rem;
      }

Enrique Gamboa

student•

Tranquilo, en la próxima clase veremos cómo hacerlo responsive. Pero siéntete orgulloso, ¡¡te quedó increíble!! 😁

DAMIÁN NICOLAS PINEDO

student•

Muchas gracias che !!!!!! :D

he aqui mi aporte… cabe aclarar que me costo mucho lograrlo y necesite mucha ayuda… pude lograr hacerlo para web pero me cuesta mcuho ha...

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]