https://github.com/waldohidalgo/article_preview_component

Proyecto Front End Mentor: Article preview component nivel de dificultad newbie creado utilizando Vue y TailwindCSS
https://github.com/waldohidalgo/article_preview_component

Last synced: 10 months ago
JSON representation

Proyecto Front End Mentor: Article preview component nivel de dificultad newbie creado utilizando Vue y TailwindCSS

• Host: GitHub
• URL: https://github.com/waldohidalgo/article_preview_component
• Owner: waldohidalgo
• Created: 2024-07-05T19:13:29.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-07-05T19:35:22.000Z (over 1 year ago)
• Last Synced: 2025-01-26T10:11:51.571Z (12 months ago)
• Language: Vue
• Homepage: https://article-preview-component-ten-orcin.vercel.app
• Size: 411 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Article preview component

Repositorio con el código solución del proyecto [Article preview component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/article-preview-component-dYBN_pYFT).

## Tabla de Contenidos

- [Article preview component](#article-preview-component)

  - [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. Mobile Active States Design](#2-mobile-active-states-design)

    - [3.Desktop Design](#3desktop-design)

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

  - [Proyecto Finalizado](#proyecto-finalizado)

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

    - [2. Mobile Active States Size](#2-mobile-active-states-size)

    - [3.Desktop Size](#3desktop-size)

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

## The challenge

El desafío consiste en realizar lo siguiente:

> Your challenge is to build out this article preview 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.

>

> The only JavaScript you'll need for this challenge is to initiate the share options when someone clicks the share icon.

>

> Your users should be able to:

>

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

> - See the social media share links when they click the share icon

## Diseños a replicar

### 1. Mobile Design

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

### 2. Mobile Active States Design

![Mobile Active States Design](./screenshots/mobile-active-state.jpg)

### 3.Desktop Design

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

### 4.Desktop Active States Design

![Desktop Active States Design](./screenshots/desktop-active-state.jpg)

## Proyecto Finalizado

### 1. Mobile Size

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

### 2. Mobile Active States Size

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

### 3.Desktop Size

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

### 4.Desktop Active States

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