<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1721264206883/706d794f-2317-459e-b85f-92668370222b.png" alt class="image--center mx-auto" />
Bienvenido,
Nuestra misión será crear tarjetas en modo oscuro, usando HTML y CSS; y lograr que se parezca lo más posible al diseño.
Los usuarios deberían poder:
<ol>
<li>Ver animación de carga de la barra en la tarjeta “Extracting update…”
</li>
<li>Ver un estado <code>hover</code> sobre los botones.
</li>
<li>Ver un diseño óptimo en pantallas grandes(<code>1200px</code>) y pequeñas(<code>375px</code>).
</li>
</ol>
Consideraciones:
<ol>
<li>Agregar icono favicon al proyecto.
</li>
<li>Renombrar URL fácil de recordar (ej. dark-themed-cards).
</li>
<li>Agregar título al proyecto (ej. Dark Themed Cards - Frontend Club).
</li>
<li>Bonus: Documenta el proyecto con un archivo <a target="_blank" href="http://readme.md/"><a href="http://readme.md" class="autolinkedURL autolinkedURL-url" target="_blank">readme.md</a></a>
</li>
</ol>
<h2 id="heading-recursos">Recursos</h2>
Lista de recursos para ayudarte a completar el reto.
<ol>
<li><a target="_blank" href="https://github.com/frontend-club/100daysofprojects">Clonar proyecto inicial</a>
</li>
<li><a target="_blank" href="https://www.uidesigndaily.com/posts/sketch-dark-themed-cards-install-theme-links-profile-day-1257">Visualizar diseño original</a>
</li>
</ol>
<h3 id="heading-referencias">Referencias</h3>
Nuestro agradecimiento a las fuentes que hacen posible los recursos y nos inspiran a seguir compartiendo conocimiento.
<ul>
<li><a target="_blank" href="https://www.w3schools.com/">W3Schools</a>
</li>
<li><a target="_blank" href="https://www.w3schools.com/">UI Desi</a><a target="_blank" href="https://www.uidesigndaily.com/">gn D</a><a target="_blank" href="https://www.w3schools.com/">aily</a>
</li>
<li><a target="_blank" href="https://www.w3schools.com/">F</a><a target="_blank" href="https://www.uidesigndaily.com/">rontend Me</a><a target="_blank" href="https://www.w3schools.com/">ntor</a>
</li>
</ul>
El diseño de este proyecto es propiedad de: <a target="_blank" href="https://www.uidesigndaily.com/posts/sketch-dark-themed-cards-install-theme-links-profile-day-1257">UI Design Daily</a>
<hr />
<blockquote>
"La mejor manera de aprender a programar es practicando todos los días"
</blockquote>

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1721264206883/706d794f-2317-459e-b85f-92668370222b.png align="center")

Bienvenido,

Nuestra misión será crear **tarjetas en modo oscuro**, usando HTML y CSS; y **lograr que se parezca lo más posible al diseño**.

**Los usuarios deberían poder:**

1. Ver animación de carga de la barra en la tarjeta “Extracting update…”
    
2. Ver un estado `hover` sobre los botones.
    
3. Ver un diseño óptimo en pantallas grandes(`1200px`) y pequeñas(`375px`).
    

**Consideraciones:**

1. Agregar icono favicon al proyecto.
    
2. Renombrar URL fácil de recordar (ej. dark-themed-cards).
    
3. Agregar título al proyecto (ej. Dark Themed Cards - Frontend Club).
    
4. **Bonus**: Documenta el proyecto con un archivo [**readme.md**](http://readme.md/)
    

## **Recursos**

Lista de recursos para ayudarte a completar el reto.

1. [**Clonar proyecto inicial**](https://github.com/frontend-club/100daysofprojects)
    
2. [**Visualizar diseño original**](https://www.uidesigndaily.com/posts/sketch-dark-themed-cards-install-theme-links-profile-day-1257)
    

### Referencias

Nuestro agradecimiento a las fuentes que hacen posible los recursos y nos inspiran a seguir compartiendo conocimiento.

* [**W3Schools**](https://www.w3schools.com/)
    
* [**UI Desi**](https://www.w3schools.com/)[**gn D**](https://www.uidesigndaily.com/)[**aily**](https://www.w3schools.com/)
    
* [**F**](https://www.w3schools.com/)[**rontend Me**](https://www.uidesigndaily.com/)[**ntor**](https://www.w3schools.com/)
    

El diseño de este proyecto es propiedad de: [**UI Design Daily**](https://www.uidesigndaily.com/posts/sketch-dark-themed-cards-install-theme-links-profile-day-1257)

---

> ***"La mejor manera de aprender a programar es practicando todos los días"***

Crea tarjetas con tema oscuro usando HTML y CSS, optimizadas para múltiples dispositivos, con animaciones y efectos interactivos.

Dark Themed Cards - Frontend Club

PROY83: Dark Themed Cards

"La mejor manera de aprender a programar es practicando todos los días".
