PROY72: Job Cards

Job Cards

• Ver el diseño óptimo según el tamaño de pantalla del dispositivo.

• Ver un estado hover sobre los botones.

Ideas para comenzar

1. Analiza: Analiza el diseño para saber cómo abordarás el proyecto. Este paso es crucial para ayudarte a pensar en el marcado HTML y las clases CSS.

2. Plantilla: Utiliza cualquiera de las plantillas que proporcionamos.

3. Git: Inicia el proyecto con Git. Este paso será muy útil para ayudarte a practicar los comandos básicos de Git.

4. HTML: Comience por el marcado HTML. Utilice las etiquetas que sean coherentes con el contenido.

5. CSS: De arriba hacia abajo, comience escribiendo los estilos base del proyecto, estilos generales, estilos reutilizables, etc.

6. Documenta: Agrega un archivo README.md al proyecto y describe tu experiencia con el desafío.

7. GitHub: Crea un repositorio en GitHub con el nombre del proyecto y enlaza para subir los archivos.

8. Despliega: Deja que el mundo sepa lo que has construido. Puedes utilizar un hosting gratuito como Netlify, Vercel, GitHub Pages.

9. Comparte: Envía tu solución a nuestro grupo de Facebook para que lo vea el resto de la comunidad.

10. Crea: Escribe un artículo en LinkedIn sobre este proyecto, estaremos encantados de leer y apoyarte.

Recursos del proyecto

• Job Cards - Figma

• Plantilla: descargar proyecto

• Plantilla en línea: duplicar proyecto

Merriweather: (https://fonts.google.com/specimen/Merriweather)
Poppins: (https://fonts.google.com/specimen/Poppins)

body background: #F3F6FF
card background: #FFFFFF
paragraph: #1E2246
button background: #1E2246
button border: #C2C5E2

Open positions

Design
4 open positions

Engineering
8 open positions

Operations
2 open positions

People
6 open positions

Sales
7 open positions

University
8 open positions

We are proud to be an equal opportunity employer that values diversity. We do not discriminate on the basis of race, religion, color, national origin, gender, sexual orientation, age, marital status, veteran status, or disability status.

Recursos adicionales

• Boxicons

• Boostrap Icons

• Heroicons

• Readme

• GitHub Profile README Generator

• LinkedIn

• Hashnode

• Medium

Ejemplos de código

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    display: grid;
    place-items: center;
}

.container{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

.circle {
    width: 2rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px solid #333;
    background-color: #fb98f3;
}

body {
    /* Sympathy */
    background: linear-gradient(to right, #5a5bf3, #91e7d9);
    /* Pacific */
    background: linear-gradient(to right, #8aedf6, #60a2f5);
    /* Butterfly */
    background: linear-gradient(to right, #edaef9, #81b1fa);
    /* Cryptic */
    background: linear-gradient(to right, #7ec9f5, #3957ed);
    /* Aqua */
    background: linear-gradient(to right, #65f4cd, #4799e9);
}

/* Mobile devices */
@media screen and (min-width: 375px) and (max-width: 480px) {
    /* Aquí los estilos */
}

/* iPads, Tablets */
@media screen and (min-width: 481px) and (max-width: 768px) {
    /* Aquí los estilos */
}

/* Small screens, laptops */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* Aquí los estilos */
}

/* Desktops, large screens */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
    /* Aquí los estilos */
}

<meta name="description" content="Breve descripción del contenido del proyecto">
<meta name="keywords" content="Palabra clave 1, Palabra clave 2, Palabra clave 3">
<meta name="title" content="Título del proyecto">
<meta name="author" content="Nombre del autor">

Tutoriales recomendados

• CSS Grid

• CSS Flexbox

• BEM Cheat Sheet

• Modelo de caja CSS

• Guía paso a paso: despliega un proyecto en Netlify

Referencias

• W3Schools

• UI Design Daily

• Frontend Mentor

Preguntas frecuentes

Hola Frontend Club,

Acabo de completar el proyecto #.

Mi solución:
Página web: https://profile-card.netlify.app/
Repositorio: https://github.com/01-day-profile-card.git

La mejor forma de escribir buen código es practicando todos los días⚡