https://github.com/kevinrivera1/cards_css-responsive

Cards utilizando HTML y CSS, con la implementación de la metodología BEM (Block Element Modifier).
https://github.com/kevinrivera1/cards_css-responsive

bem-methodology css3 flexbox html5

Last synced: 3 months ago
JSON representation

Cards utilizando HTML y CSS, con la implementación de la metodología BEM (Block Element Modifier).

• Host: GitHub
• URL: https://github.com/kevinrivera1/cards_css-responsive
• Owner: KevinRivera1
• Created: 2021-09-21T21:57:20.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-08-09T00:56:38.000Z (almost 2 years ago)
• Last Synced: 2025-01-10T20:15:25.360Z (4 months ago)
• Topics: bem-methodology, css3, flexbox, html5
• Language: CSS
• Homepage: https://kevinrivera1.github.io/CARDS_CSS-RESPONSIVE/
• Size: 764 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Proyecto HTML Y CSS con Metodología BEM

Este es un proyecto local que muestra una página web utilizando HTML y CSS, con la implementación de la metodología BEM (Block Element Modifier).



## Descripción

El proyecto consiste en una página web que muestra tres tarjetas con diferentes características y precios. Se utiliza la metodología BEM para organizar y nombrar las clases de CSS de manera estructurada y mantenible.

## Metodología BEM

La metodología BEM (Block Element Modifier) se utiliza para nombrar las clases de CSS de una manera coherente y comprensible. En este proyecto, las clases siguen la siguiente estructura:

- **Bloque**: Representa una entidad independiente. En este caso, los bloques son "tarjeta" y "container".

  - `.tarjeta`

  - `.container__image`

- **Elemento**: Partes de un bloque que tienen significado propio. Los elementos se nombran siguiendo la estructura `bloque__elemento`.

  - `.tarjeta__imagen`

  - `.tarjeta__contenido`

  - `.tarjeta__titulo`

  - `.tarjeta__descripcion`

  - `.tarjeta__valor`

- **Modificador**: Se utiliza para aplicar variaciones al bloque o elemento. Los modificadores se nombran siguiendo la estructura `bloque--modificador`.

  - `.tarjeta--individual`

  - `.tarjeta--team`

  - `.tarjeta--enterprise`

## Uso

1. Clona este repositorio en tu máquina local.

2. Abre el archivo `index.html` en tu navegador para ver las tarjetas.

3. El archivo `estilo.css` contiene los estilos CSS siguiendo la metodología BEM.

¡Disfruta explorando el proyecto!

### FORMA DE UTILIZACIÓN

DEBES UTILIZAR LA EXTENSION DE VSCODE `LIVE SERVER` 

EJECUTARLO DE FROMA LOCAL.