https://github.com/waldohidalgo/intro-component_with_signup_form

Repositorio con el código solución al challenge Intro component with sign-up form de Front End Mentor
https://github.com/waldohidalgo/intro-component_with_signup_form

frontend-mentor frontendmentor frontendmentor-challenge frontendmentor-solution tailwindcss vite vuejs

Last synced: about 2 months ago
JSON representation

Repositorio con el código solución al challenge Intro component with sign-up form de Front End Mentor

• Host: GitHub
• URL: https://github.com/waldohidalgo/intro-component_with_signup_form
• Owner: waldohidalgo
• Created: 2024-07-09T01:54:28.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-07-09T16:55:54.000Z (10 months ago)
• Last Synced: 2025-01-26T10:11:50.358Z (4 months ago)
• Topics: frontend-mentor, frontendmentor, frontendmentor-challenge, frontendmentor-solution, tailwindcss, vite, vuejs
• Language: Vue
• Homepage: https://intro-component-with-signup-form-green-five.vercel.app/
• Size: 879 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Intro component with sign up form

Repositorio con el código solución al challenge: [Intro component with sign up form challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/intro-component-with-signup-form-5cf91bd49edda32581d28fd1).

Proyecto construido utilizando Vite, Vue.js y TailwindCSS.

## Tabla de Contenidos

- [Intro component with sign up form](#intro-component-with-sign-up-form)

  - [Tabla de Contenidos](#tabla-de-contenidos)

  - [The challenge](#the-challenge)

  - [Diseños a Replicar](#diseños-a-replicar)

    - [1-Mobile Design](#1-mobile-design)

    - [2-Desktop Design](#2-desktop-design)

    - [3-Active States Design](#3-active-states-design)

  - [Proyecto Realizado](#proyecto-realizado)

    - [1-Mobile Size](#1-mobile-size)

    - [2-Desktop Size](#2-desktop-size)

    - [3-Active States Mobile](#3-active-states-mobile)

    - [4-Active States Desktop](#4-active-states-desktop)

## The challenge

El desafío consiste en realizar lo siguiente:

> Your challenge is to build out this introductory component and get it looking as close to the design as >possible.

>

> You can use any tools you like to help you complete the challenge. So if you've got something you'd >like to practice, feel free to give it a go.

>

> Your users should be able to:

>

> - View the optimal layout for the site depending on their device's screen size

> - See hover states for all interactive elements on the page

> - Receive an error message when the `form` is submitted if:

>

> - Any `input` field is empty. The message for this error should say _"[Field Name] cannot be empty"_

> - The email address is not formatted correctly (i.e. a correct email address should have this > structure: `[email protected]`). The message for this error should say _"Looks like this is not an email"_

## Diseños a Replicar

### 1-Mobile Design

![Mobile Design](./screenshots/mobile-design.jpg)

### 2-Desktop Design

![Desktop Design](./screenshots/desktop-design.jpg)

### 3-Active States Design

![Active States Design](./screenshots/active-states.jpg)

## Proyecto Realizado

### 1-Mobile Size

![Mobile Size](./screenshots/mobile_waldo.webp)

### 2-Desktop Size

![Desktop Size](./screenshots/desktop_waldo.webp)

### 3-Active States Mobile

![Active States Mobile](./screenshots/active_states_mobile_waldo.webp)

### 4-Active States Desktop

![Active States Desktop](./screenshots/active_states_waldo.webp)