*{margin: 0;}

body{box-sizing: border-box;background-color: azure;width: 100vw;}

header{box-sizing: border-box;background-color: #ff9f1c;width:100vw;height:10vh;border:1px solid blue;}

nav{box-sizing: border-box;background-color: #ff9f1c;width:100vw;height:10vh;border:1px solid blue;}

section{box-sizing: border-box;background-color: white;width:100vw;height:70vh;margin: 0;padding: 0;}

aside{float:left;box-sizing: border-box;background-color: #2ec4b6;width:20%;height: 70vh;}

article{float:left;box-sizing: border-box;background-color: #ffe5d9;width:30%;height:70vh;border: 1px solid red;}

ul{list-style-type: none;}

li{box-sizing: border-box;float: left;background-color:#2ec4b6;padding:20px;color:white;}

footer{float: none;display: block;box-sizing: border-box;background-color: black;color:white;width:100vw;height:10vh;border:1px solid blue;}

Clases de layout

*: *{margin: 0;}
general: .general{box-sizing: border-box;width: 90vw;margin:auto;}
.vw_100-vh_10 (ancho 90vw x alto 10vh): .vw_100-vh_10{box-sizing: border-box;width:90vw;height:10vh;margin:auto;}
vw_100-vh_70 (ancho 90vw x alto 70vh): .vw_100-vh_70{box-sizing: border-box;width:90vw;height:70vh;margin:auto;}
w_20pc_vh_70 (ancho 15vw x alto 70vh): .w_20pc_vh_70{box-sizing: border-box;width:15vw;height:70vh;margin:auto;}
w_30pc_vh70 (ancho 90vw x alto 70vh): .w_30pc_vh70{box-sizing: border-box;width:30vw;height:70vh;margin:auto;}
flota_izqda: .flota_izqda{float: left;}
boton: .boton{width:100px;border-radius:15px;margin:5px;}}

hor

.hor{float:left;}

ver

.ver{display:block;}

centra

.centra{margin:auto;}

Foto 1

Clases de skin

*: *{box-sizing: border-box}
fondo_header: .fondo_header{background:linear-gradient(to bottom, rgba(217,219,255,1) 0%,rgba(217,219,255,1) 75%, rgba(255,255,255,1) 100%);border-radius:25px;margin-top:5px;}
fondo_footer: .fondo_footer{background:linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(191, 191, 191) 25%, rgba(128, 128, 128) 100%);border-radius:25px;margin-top:25px;}
fondo_centro: .fondo_centro{background-color: #ffffcc;}/* amarillo claro*/
fondo_boton: .fondo_boton{background-color: #ffe5d9;} /*beige claro*/
fondo_blanco: .fondo_blanco{background-color: white;color:black;border: 1px solid red;}
fondo_negro: .fondo_negro{background-color: black;color:white;border: 1px solid red;}
fondo_lateral: .fondo_lateral{background-color:#ccffcc;} /*verde claro*/
fondo_boton: .fondo_boton{background-color: maroon;}
listamenu: .listamenu{list-style-type: none;}
padding_20: .padding_20{padding: 20px;}
redondo: .redondo{border-radius:25px;}

Texto 1

Texto 2