Scribd
Cargar
27 vistas7 páginas

Proyecto de cartas en HTML y CSS

Este documento describe un proyecto de tarjetas HTML y CSS. Se crean tres tarjetas dentro de un contenedor para representar diferentes entidades, cada una con una imagen, nombre, ocupación, clasificación de estrellas, párrafo y botones. El código CSS establece estilos para los elementos de las tarjetas y el contenedor.

Cargado por

geanhpl318
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
27 vistas7 páginas

Proyecto de cartas en HTML y CSS

Este documento describe un proyecto de tarjetas HTML y CSS. Se crean tres tarjetas dentro de un contenedor para representar diferentes entidades, cada una con una imagen, nombre, ocupación, clasificación de estrellas, párrafo y botones. El código CSS establece estilos para los elementos de las tarjetas y el contenedor.

Cargado por

geanhpl318
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

CFP/UCP/ESCUELA: CFP-HUAURA-SENATI

ESTUDIANTE: REYES DIAZ GIAN

PIEER ID: 1395008 BLOQUE: 2

CARRERA: INGENIERIA DE

SOFTWARE

INSTRUCTOR: ROBERT ANDRES TABOADA OBREGON


TITULO:Proyecto de cards
CODIGO Html:
1) Se inicia la declaración de html:5.

2) Se le vincula con el archivo css y con el conjunto de iconos de font awasome.

3) Se abre el cuerpo<body> dentro se crea una estructura de contenedor (<div


class="container">) para las cartas. Dentro del contenedor, se definen tres cartas (<div
class="box">), cada una representando una entidad diferente.

4) Cada carta incluye una imagen, el nombre de la persona y su ocupación, un sistema


de clasificación de estrellas , un párrafo de texto y botones de "leer más" y "suscribirse"
5) Se cierra el cuerpo y el documento HTML.

Código CSS
6) Se aplica un reset básico a todos los elementos.

7) Se establece un estilo para la selección de texto , definiendo el color de fondo y el color del texto
al seleccionar.

8) Se establece el estilo para el html,body y ademas usando el display grid

9) Se usa la clase container ahí definimos su ancho ,se usa el flexbox para distribuir los elementos
internos en las filas y columnas ,el espacio y su alineación.
10) Se establecen estilos para las cajas dentro del contenedor.

11) Se definen estilos para la imagen dentro de cada caja, incluyendo su tamaño, forma, relleno y
borde.

12) Se establecen estilos para los párrafos dentro de las cajas, definiendo su alineación, margen
superior, tamaño de fuente y peso de fuente.

13) Se definen estilos para el nombre y trabajo (name_job) dentro de las cajas, incluyendo
margen, color, tamaño y peso de fuente.
14) Se establecen estilos para el sistema de clasificación de estrellas.

15) Se definen estilos para los botones.

16) Se establecen estilos específicos para el primer y último botón dentro de cada caja, modificando
su apariencia cuando se pasa el cursor sobre ellos.
MUESTRA:

También podría gustarte