Diseño responsivo con cards

Curso de Frontend Developer

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

Para crear tu página web se crean primero las divisiones de tu sitio:

<body>
  <header>
    <h1>Headerh1>
  header>
  <nav>
    <ul>
      <li><ahref="#">Inicioa>li>
      <li><ahref="#">Acerca dea>li>
      <li><ahref="#">Contactoa>li>
    ul>
  nav>
  <main>
    <sectionclass="main-content">
      <h2>Contenido Principalh2>
      <p>Este es el contenido principal de nuestra página.p>

    <divclass="container">
      <divclass="card">
              <imgsrc="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&w=600"alt="User Image">
              <divclass="info">
                  <h2>User Nameh2>
                  <p>Email: user@example.comp>
                  <p>Phone: +123456789p>
                  <buttontype="button"name="seguir">Seguir ->button>
              div>
      div>

      <divclass="card">
              <imgsrc="https://media.istockphoto.com/id/1306406393/es/foto/border-collie-retrato-de-perro-con-un-gato-escondido-detr%C3%A1s.jpg?b=1&s=612x612&w=0&k=20&c=DirNzP3XEq5SJIamsFjn-hQgSkgbuZAlq5SsttQorDU="alt="User Image">
              <divclass="info">
                  <h2>User Nameh2>
                  <p>Email: user@example.comp>
                  <p>Phone: +123456789p>
                  <buttontype="button"name="seguir">Seguir ->button>
              div>
      div>

      <divclass="card">
              <imgsrc="https://images.pexels.com/photos/104373/pexels-photo-104373.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"alt="User Image">
              <divclass="info">
                  <h2>User Nameh2>
                  <p>Email: user@example.comp>
                  <p>Phone: +123456789p>
                  <buttontype="button"name="seguir">Seguir ->button>
              div>
      div>
    div>
    section>
    <asideclass="sidebar">
      <h2>Barra lateralh2>
      <p>Esta es la barra lateral de nuestra página.p>
    aside>

  main>
  <footer>
    <p>Pie de páginap>
  footer>
body>

Una vez hecho las divisiones de tu pagina web se procede a realizar la estilizacion del mismo:


  <span class="hljs-comment">/* styles.css */</span>

<span class="hljs-selector-tag">body</span> {
  <span class="hljs-attribute">font-family</span>: Arial, sans-serif;
  <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
  <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;
  <span class="hljs-attribute">background-color</span>: azure;
}

<span class="hljs-selector-tag">header</span>, <span class="hljs-selector-tag">nav</span>, main, <span class="hljs-selector-tag">footer</span> {
  <span class="hljs-attribute">padding</span>: <span class="hljs-number">20px</span>;
}

<span class="hljs-selector-tag">header</span> {
  <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#333</span>;
  <span class="hljs-attribute">color</span>: <span class="hljs-number">#fff</span>;
  <span class="hljs-attribute">text-align</span>: center;
}
<span class="hljs-selector-tag">nav</span> {
  <span class="hljs-attribute">background</span>: slateblue;
  <span class="hljs-attribute">color</span>:whitesmoke;
}
<span class="hljs-selector-tag">nav</span><span class="hljs-selector-tag">ul</span> {
  <span class="hljs-attribute">list-style-type</span>: none;
  <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;
  <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
}

<span class="hljs-selector-tag">nav</span><span class="hljs-selector-tag">li</span> {
  <span class="hljs-attribute">display</span>: inline;
  <span class="hljs-attribute">margin-right</span>: <span class="hljs-number">20px</span>;

}

<span class="hljs-selector-tag">nav</span><span class="hljs-selector-tag">a</span> {
  <span class="hljs-attribute">text-decoration</span>: none;
  <span class="hljs-attribute">color</span>: white;
}

main {
  <span class="hljs-attribute">display</span>: flex;
  <span class="hljs-attribute">flex-wrap</span>: wrap;
}

<span class="hljs-selector-class">.main-content</span> {
  <span class="hljs-attribute">flex</span>: <span class="hljs-number">70%</span>;
  <span class="hljs-attribute">display</span>: flex;
  <span class="hljs-attribute">flex-direction</span>: column;

  </fieldset>
}

<span class="hljs-selector-class">.sidebar</span> {
  <span class="hljs-attribute">flex</span>: <span class="hljs-number">30%</span>;
  <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#f2f2f2</span>;
  <span class="hljs-attribute">padding</span>: <span class="hljs-number">20px</span>;
}

<span class="hljs-selector-tag">footer</span> {
  <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#333</span>;
  <span class="hljs-attribute">color</span>: <span class="hljs-number">#fff</span>;
  <span class="hljs-attribute">text-align</span>: center;
}
<span class="hljs-comment">/* styles.css */</span>

<span class="hljs-comment">/* Estilos para pantallas más pequeñas */</span>
@media screen and (<span class="hljs-attribute">max-width</span>: <span class="hljs-number">768px</span>) {
  <span class="hljs-selector-tag">nav</span> {
    <span class="hljs-attribute">text-align</span>: center;

  }

  <span class="hljs-selector-tag">nav</span><span class="hljs-selector-tag">ul</span> {
    <span class="hljs-attribute">display</span>: flex;
    <span class="hljs-attribute">justify-content</span>: center;
    <span class="hljs-attribute">flex-wrap</span>: wrap;
  }

  <span class="hljs-selector-tag">nav</span><span class="hljs-selector-tag">li</span> {
    <span class="hljs-attribute">margin</span>: <span class="hljs-number">10px</span>;

  }

  main {
    <span class="hljs-attribute">flex-direction</span>: column;
  }

  <span class="hljs-selector-class">.main-content</span>, <span class="hljs-selector-class">.sidebar</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
  }
}

<span class="hljs-selector-class">.card</span> {
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#f0f0f0</span>;
    <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;
    <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0</span><span class="hljs-number">0</span><span class="hljs-number">10px</span> rgba(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0.1</span>);
    <span class="hljs-attribute">overflow</span>: hidden;
    <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">20px</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">530px</span>;
    <span class="hljs-attribute">margin-left</span>: <span class="hljs-number">30px</span>;
}

<span class="hljs-selector-class">.card</span><span class="hljs-selector-tag">img</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
    <span class="hljs-attribute">height</span>:<span class="hljs-number">300px</span>;
    <span class="hljs-attribute">display</span>: block;
}

<span class="hljs-selector-class">.info</span> {
    <span class="hljs-attribute">padding</span>: <span class="hljs-number">20px</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">150px</span>;

}

<span class="hljs-selector-tag">button</span> {
  <span class="hljs-attribute">background</span>: <span class="hljs-number">#5DADE2</span>;
  <span class="hljs-attribute">color</span>: white;
  <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#5DADE2</span>;
  <span class="hljs-attribute">padding</span>:<span class="hljs-number">6px</span>;
  <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;
}
.container{
  <span class="hljs-attribute">display</span>: flex;
}


En el codigo css anterios se pueden evaluar los distintos tipos de posicionamiento que se pueden utilizar en tu sitio web para acomodar tus elementos.

Curso de Frontend Developer

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

0 Comentarios

para escribir tu comentario

Diseño responsivo con cards

0 Comentarios

Artículos relacionados

✨Presente continuo✨

Resultados

Apuntes teóricos

Lettering, el arte de dibujar letras - Proceso de entintado