HTML
<!doctype html>
<html>
<head>
<title>CSS Posicionamiento</title>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div class="cont">
<div class="cara">
<div class="ojo"></div>
<div class="ojo2"></div>
<div class="boca2"></div>
</div>
</div>
</body>
</html>
CSS
.cont{
position: relative;
top:100px;
left: 200px;
width: 300px;
height: 200px;
border: 2px solid black;
}
.cara{
position: absolute;
background-color: orange;
border-radius: 50%;
height: 150px;
width: 150px;
top:10px;
left: 50px;
}
.ojo{
position: absolute;
background-color: saddlebrown;
border-radius: 50%;
height: 40px;
width: 25px;
top:30px;
left: 30px;
}
.ojo2{
position: absolute;
background-color: saddlebrown;
border-radius: 50%;
height: 40px;
width: 25px;
top:30px;
right: 30px;
}
.boca{
border-radius: 20px;
width: 100px;
height: 5px;
position: absolute;
top: 100px;
left: 25px;
background-color: black;
}
.boca2{
position: absolute;
top:100px;
left: 35px;
width: 70px;
height: 30px;
background-color: saddlebrown;
border-radius: 10px 10px 70px 70px;
}
}
No hay comentarios:
Publicar un comentario