https://github.com/waldohidalgo/single-price-grid-component

Repositorio con el código solución del challenge: Single price grid component de Front End Mentor
https://github.com/waldohidalgo/single-price-grid-component

frontend-mentor frontendmentor-challenge tailwindcss vue3

Last synced: 10 months ago
JSON representation

Repositorio con el código solución del challenge: Single price grid component de Front End Mentor

• Host: GitHub
• URL: https://github.com/waldohidalgo/single-price-grid-component
• Owner: waldohidalgo
• Created: 2024-07-10T17:38:12.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-07-10T20:23:39.000Z (over 1 year ago)
• Last Synced: 2025-01-26T10:11:49.901Z (12 months ago)
• Topics: frontend-mentor, frontendmentor-challenge, tailwindcss, vue3
• Language: Vue
• Homepage: https://single-price-grid-component-beta.vercel.app
• Size: 225 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Single price grid component

Repositorio con el código solución del challenge: [Single price grid component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/single-price-grid-component-5ce41129d0ff452fec5abbbc)

## Tabla de Contenidos

- [Single price grid component](#single-price-grid-component)

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

  - [The challenge](#the-challenge)

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

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

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

  - [Proyecto Realizado](#proyecto-realizado)

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

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

    - [3-Active State](#3-active-state)

## The challenge

El challenge consiste en realizar lo siguiente:

> Your users should be able to:

>

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

> - See a hover state on desktop for the Sign Up call-to-action

## Diseño a Replicar

### 1-Mobile Design

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

### 2-Desktop Design

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

## Proyecto Realizado

### 1-Mobile Size

![Mobile Size](./screenshots/waldo/waldo_mobile.webp)

### 2-Desktop Size

![Desktop Size](./screenshots/waldo/waldo_desktop.webp)

### 3-Active State

![Active State](./screenshots/waldo/waldo_active_states.webp)