PROY86: Webshop Landing Page

Webshop Landing Page

• Ver un estado hover sobre los botones

• Ver el diseño óptimo en pantallas grandes

• Ver un texto (text-decoration) decorado sobre las opciones del menú

• Bonus: ver el diseño óptimo en pantallas pequeñas

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 al 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

• Webshop Landing Page - Figma

• Codepen

• Proyecto base

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

body background: linear-gradient #FF7982, #FF8D53
container background: #F4F8FD
button background: #linear-gradient #FF7982, #FF8D53
paragraph: #000000

Products
Collections
Gifts
Our magazine

Log In
SIGN UP

The gift of happiness
Show your gratitude with one of our gift sets, large and small, specially designed to spread joy to someone you love.
SHOP NOW

Ready for autumn collection
Treat yourself to some of our brand new autumn collection - all with the wonderful colours surrounding you.
PURCHASE NOW

Ready for autumn collection
Treat yourself to some of our brand new autumn collection - all with the wonderful colours surrounding you.
PURCHASE NOW

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”.