Skip to content

done #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
oscarmtzo wants to merge 1 commit into
base: main
Choose a base branch
from
Open

done #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
22 changes: 11 additions & 11 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,27 +21,27 @@ puedan verificar

## Instrucciones

- Agrega 2 etiquetas de encabezado más (h2, h3) y 2 etiquetas de párrafo más al documento HTML.
✅- Agrega 2 etiquetas de encabezado más (h2, h3) y 2 etiquetas de párrafo más al documento HTML.

- Cambia el color de todos los párrafos a rojo.
✅- Cambia el color de todos los párrafos a rojo.

- Cambia el color de todos los h3 y párrafos a rojo.
✅- Cambia el color de todos los h3 y párrafos a rojo.

- Haz que el color de fondo de h2 sea azul claro.
✅- Haz que el color de fondo de h2 sea azul claro.

- Establece cualquier imagen como fondo para h1.
✅- Establece cualquier imagen como fondo para h1.

- Cambia el color del texto h1 a amarillo.
✅- Cambia el color del texto h1 a amarillo.

- Establece un borde punteado de 7 px alrededor de todos los párrafos.
✅- Establece un borde punteado de 7 px alrededor de todos los párrafos.

- Establece la altura de h2 a 100px.
✅- Establece la altura de h2 a 100px.

- Establece el ancho de h2 al 50%.
✅- Establece el ancho de h2 al 50%.

- .Establece el relleno de h3 a 30px.
✅- .Establece el relleno de h3 a 30px.

- Usa el margen para alinear al centro la etiqueta h3.
✅- Usa el margen para alinear al centro la etiqueta h3.

## Recursos extras

Expand Down
27 changes: 27 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
*{
--red: rgba(255, 0, 0, 0.584);
--azul-claro: rgb(0, 123, 255);
--yellow: rgba(255, 255, 0, 0.858);
}
p{

color: var(--red);
}

h1{
color: var(--yellow);
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSZ7Oz6GlIDRpuJcgCNRHS8nzf3z7UVD2QpAg&usqp=CAU');
background-repeat: no-repeat;
}

h3{
color: var(--red);
height: 30px;
text-align: center;
}

h2{
background-color: var(--azul-claro);
height: 100px;
width: 50%;
}
18 changes: 18 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" >
<title>Css Basics</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Este es mi H1</h1>
<h2>Encabezado h2</h2>
<h2>Otro h2</h2>
<h3>Encabezado h3</h3>
<h3>Seccion de mascotas</h3>
<p>Mi perro se llama Skipper 🐶</p>
<p>Me gustan los aviones ✈️</p>
</body>
</html>