.

header{ /*Se le llamo clase header, se aplicó un tono RGB perteneciente a la

familia gris y negra, para obtener el color deseado, se le da una altura y el ancho
que se pretendía*/
height: 79px;
width: 1335px;
background-color: rgb(46, 45, 47);
}
.menu{/*Se le inserta un tipo de menú, en la parte izquierda de la maquetación,
según como se visualiza en el ejercicio dado*/
margin-top: 7px;/*Se agrega margen, sin embargo no se adiciona en la parte
superior de la caja es decir no como se visualiza en la imagen dada; se agrega es
en la parte inferir de la misma*/
border: 5px solid black;/*agregue el borde */
background-color: rgb(70, 70, 200);
width: 205px;/*Se inserta la altura y el ancho similar a la maquetación dada*/
height: 428px;

}
.contenido{/*Se le demomina contenido, al sector de color violeta claro*/
border:5px solid black;
background-color: rgb(134, 74, 188);
width: 1111px; /*Se inserto altura y el ancho, similar a la contenedor violeta
dado*/
height: 120px;
position: absolute;/*Se agrego este tipo de atributo, para dar ubicación a los
div, y ubicarlos en un punto flexible o propio*/
right: 8px;
top: 94px;
}
.article{
border: 5px solid black;
width: 575px ; /*Se adiciona una altitud y extensión similar a maquetación
dada. Además se agrega el color en forma RGB para obtener un tono característico*/
height: 310px;
background-color: rgb(240, 44, 56);
margin: 0px;
}
.article1{
position: absolute;
left: 16.2%;
right: 4%;
top: 213px;
}
.article2{
position: absolute;
right:0.5% ;
top: 213px;
}
.footer{
border: 5px solid black;
height: 110px;
background-color: burlywood;
margin-top: 5px;
}
.menu div{/*Se les denomina Menú a div que están en el interior de clase menú, para
alinearlos como sea más conveniente*/
text-align: center;
width: 200px;
height: 40px;
 border: 1px solid rgb(60, 143, 60);
background-color:rgb(71, 170, 71);
color: white;
font-family: sans-serif bold; arial, arial;/*se le inserta tipo de letra
deseado*/
font-size: 29px;/*Se da un tamaño propicio a la letra*/
}
.menu span{
position: relative;
top: 4px;

}
/*La extensión de los contenedores o cajas, se realizaron en formato px*/