https://github.com/caresle-archive/profile-card-component

Frontend Mentor challenge
https://github.com/caresle-archive/profile-card-component

css css-flexbox css-grid css3 html html5 mobile-first mobile-first-workflow

Last synced: 23 days ago
JSON representation

Frontend Mentor challenge

• Host: GitHub
• URL: https://github.com/caresle-archive/profile-card-component
• Owner: Caresle-Archive
• Created: 2021-07-07T02:57:04.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2021-08-11T22:59:28.000Z (almost 5 years ago)
• Last Synced: 2025-03-06T19:33:53.387Z (over 1 year ago)
• Topics: css, css-flexbox, css-grid, css3, html, html5, mobile-first, mobile-first-workflow
• Language: CSS
• Homepage: https://caresle.github.io/profile-card-component/
• Size: 278 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README-es.md

Awesome Lists containing this project

README

          
# Frontend Mentor - Profile card component solution Español

Esta es una solución para el [Profile card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ). Los retos de Frontend Mentor pueden ayudarte a mejorar tus habilidades por medio de crear proyectos reales.

## Tabla de contenidos

- [Información general](#información-general)

  - [El reto](#el-reto)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [Mi proceso](#mi-proceso)

  - [Herramientas utilizadas](#herramientas-utilizadas)

  - [Recursos](#recursos)

- [Autor](#autor)

## Información general

### El reto

- Hacer el proyecto a partir del diseño dado.

### Screenshot

### Versión de telefono

![](./readme-src/mobile.png)

### Versión escritorio

![](./readme-src/desktop.png)

### Tamaño personalizado

![](./readme-src/custom.png)

### Links

- URL para la solución: [Solution page](https://www.frontendmentor.io/solutions/html-css-dQQct9uEK)

- URL para probar el sitio: [Github pages](https://caresle.github.io/profile-card-component/)

## Mi proceso

### Herramientas utilizadas

- HTML5

- CSS custom properties

- Flexbox

- CSS Grid

- Mobile-first workflow

### Recursos

- [CSS Basics: Using Multiple Backgrounds](https://css-tricks.com/css-basics-using-multiple-backgrounds/) - Esto me ayudo para saber como usar multiples backgrounds en css.

- [Background position](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) - Un link a mdn acerca de la propiedad background position y me ayudo para entender mejor como posicionar el fondo.

## Autor

- Frontend Mentor - [@Caresle](https://www.frontendmentor.io/profile/Caresle)

- Instagram - [@caresle1](https://instagram.com/caresle1)