PROY81: Feedback Modal

Feedback Modal

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

• Visualizar un mensaje de envío después de hacer clic en el botón.

• Ver un estado hover sobre los íconos de calificación.

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. Puedes agregarnos como colaboradores para ayudarte a completar el artículo.

Recursos del proyecto

• Feedback Modal - Figma

• Plantilla: descargar proyecto

• Plantilla en línea: duplicar proyecto

Merriweather: (https://fonts.google.com/specimen/Merriweather)
IBM Plex Sans: (https://fonts.google.com/specimen/IBM+Plex+Sans)

body background: #EAEDF5
card background: #FFFFFF
button background: #3B70FF
icon background: #FFBA44

Give feedback
What do you think of the editing tool?

Do you have any thoughts you’d like to share?

May we follow you up on your feedback?
Yes - No

Send - Cancel

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="author" content="Nombre del autor">
<meta name="title" content="Título del proyecto">
<meta name="description" content="Breve descripción del contenido del proyecto">

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

🧑‍🚀”La mejor manera de aprender a programar es practicando todos los días”.