DavidBernalGonzalez/index.html

## index.html
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="box box-1">1</div>
        <div class="box box-2">2</div>
        <div class="box box-3">3</div>
        <div class="box box-4">4</div>
    </div>
</body>

</html>

## style.css
.container{
    width: 100px;
    height: 100px;
    background-color: red;
    display: block;
    border: solid 1px black;
    margin: 50px auto;
}

.box{
      width: 20px;
      background-color: yellowgreen;
      border: solid 1px black;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
      text-align: center;
}

.box-1{
    position: relative;
    top: -8px;
    left: -10px;
}

.box-2{
    position: relative;
    top: -30px;
    left: 89px;
}

.box-3{
    position: relative;
    top: 48px;
    left: -10px;
}

.box-4{
    position: relative;
    top: 28px;
    left: 88px;
}
	<!DOCTYPE html>
	<html lang="es">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="normalize.css">
	<link rel="stylesheet" href="style.css">
	</head>

	<body>
	<div class="container">
	<div class="box box-1">1</div>
	<div class="box box-2">2</div>
	<div class="box box-3">3</div>
	<div class="box box-4">4</div>
	</div>
	</body>

	</html>
	.container{
	width: 100px;
	height: 100px;
	background-color: red;
	display: block;
	border: solid 1px black;
	margin: 50px auto;
	}

	.box{
	width: 20px;
	background-color: yellowgreen;
	border: solid 1px black;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	text-align: center;
	}

	.box-1{
	position: relative;
	top: -8px;
	left: -10px;
	}

	.box-2{
	position: relative;
	top: -30px;
	left: 89px;
	}

	.box-3{
	position: relative;
	top: 48px;
	left: -10px;
	}

	.box-4{
	position: relative;
	top: 28px;
	left: 88px;
	}