- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Posicionamiento absoluto en la práctica</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="achievement">
<div class="badge"></div>
<div class="title">Primer ejercicio</div>
<div class="description">Completar el primer ejercicio del curso</div>
</div>
<div class="achievement">
<div class="badge"></div>
<div class="title">Primer desafío</div>
<div class="description">Superar el primer desafío</div>
</div>
</body>
</html>
CSS
body {
font-family: "Helvetica", "Arial", sans-serif;
}
.achievement {
position: relative;
width: 200px;
min-height: 50px;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #e5e5e5;
border-radius: 4px;
}
.badge {
width: 44px;
height: 44px;
background-color: #7fc3e5;
background-image: url("medal.png");
border: 3px solid #e5e5e5;
border-radius: 4px;
}
.title {
margin-bottom: 3px;
font-weight: bold;
font-size: 15px;
}
.description {
font-size: 12px;
color: #666666;
}
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
ObjetivosRealizado
0
- Asigna al elemento con la clase
achievementun relleno izquierdo de80px. - Asigna posicionamiento absoluto al elemento con la clase
badge - y una coordenada izquierda de
20px.