Responsive Web Design Projects - Build a Personal Portfolio Webpage

Hola

Me encuentro con un problema para la consulta de medios en el proyecto de "Crear una pagina Web de cartera personal ". En este caso, debo cumplir con el punto numero 9. Su cartera debe tener al menos una consulta de medios.

He tratado, mismo he utilizado el mismo abordaje que en las pruebas anteriores pero en este no doy con el punto.

<!DOCTYPE html>
<html>
<header>
  <link rel="stylesheet" href="styles.css">
  </header>
<body>
<nav id="navbar" class="nav">
  <section id="nav-list">
      <a href="#welcome-section">Sobre</a>
        <a href="#projects">Trabajos</a>    
          <a href="#contacto">Contacto</a>
          </section>
  </nav>
<section id="welcome-section">
  <h1 class="welcome"> Hola soy Leandro</h1>
  <h2 class="bienvenido">Desarrollador web</h2>
  </section>
  <section id="projects">
    <titlle class="project-tile">Estos son algunos de mis proyectos</titlle>
    <hr>
    <a id="profile-link" target="_blank"></a>
    <a></a>
    <a></a>
    </section>
    <section id="contacto">
      <div class="section-hearder">
      <h1 class="Vamos">Vamos a trabajar Juntos...</h1>
      <h2 class="como">¿Como se toma su Cafe?</h2>
      </div>
      <div class="contacts-link">
        <a>Facebook</a>
         <a>GitHub</a>
          <a>Twiter</a>
           <a>@gmail</a>
        </div>
      </section>
      <footer id="footer">
        <p class="description">Estos son Proyectos que describen mis aptitudes como desarrollador web y la manera de disfrutar haciendolos. 
        </p>
        <p class="creator">Creado por Whassa</p>
        </footer>
      </body>
      </html>
      <style>
        <link rel="stylesheet" href="styles.css">

          body {
          font-family: 'Poppins', sans-serif;
          font-size: 28px;
          font-weight: 400;
          line-height: 1.4;
          color: var(--main-white);
          }
          .nav { 
            display: flex;
            justify-content: flex-end;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background:  #be3144;
            box-shadow: 0 2px 0 rgb(0 0 0 / 40%);
            z-index: 10;
           }
           #welcome-section { 
             text-align: center;
             background-color: #303841;
             padding: 10px;
             margin: -9px;
           }
           .welcome {
             color: white;
             font-size: 30px;
             height: 20px;
           }
           .bienvenido { 
             color: #be3144;
             font-size: 20px;
             height:70px;
           }
           #projects { 
             background-color: #45567d;
             text-align: center;
             color: white;
             padding: 80px;
             margin: -9px;
           }
           #contacto {
             background-color: #303841;
             text-align: center;
             color: white;
             padding: 5px;
             margin: -9px;
           }
           .vamos { 
             font-size: 30px;
             text-align: center;
             padding: 10px;
             margin: -9px;
           }
           .como { 
             font-size: 20px;
             text-align: center;
             padding: 10px;
             margin: -9px;
           }
           #footer { 
             text-align: center;
             background-color: #303841;
             padding: 10px;
             margin: -9px;
             color: #be3144;
             border-top: 4px solid;
           }
           .description { 
             font-size: 20px;
             text-align: left;
             padding: 10px;
             margin: -9px;
           }
           .creator { 
             font-size: 20px;
             text-align: right;
             padding: 10px;
             margin: -9px;
           }
        </style>

Tienes que agregar un “media query” (consulta de medios), una regla que se activara dependiendo del tamaño del dispositivo o pantalla
por ejemplo, una página se mostrará de diferente forma si está en una laptop, en un celular, tablet, etc.

Si no recuerdas la sintaxis, repasa las lecciones de FreeCodeCamp o puedes buscarlo como directamente como “CSS media query”

Otro punto importante es, separar el código HTML y el código CSS, ya que he notado que hay problemas si se utiliza un media query usando las etiquetas “style”

1 Like

Muchísimas Gracias !!!

1 Like