1

Diseño responsivo con cards

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: [email protected]>
                  <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: [email protected]>
                  <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: [email protected]>
                  <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 quese pueden utilizar en tu sitio web para acomodar tus elementos. 
Escribe tu comentario
+ 2