45 lines
1.1 KiB
CSS
45 lines
1.1 KiB
CSS
main {
|
|
--main-height : 400px;
|
|
--main-width : 400px;
|
|
position : relative;
|
|
width : var(--main-width);
|
|
height : var(--main-height);;
|
|
background-color : yellow;
|
|
border-radius : 10px;
|
|
border: 4px solid red;
|
|
margin:auto;
|
|
}
|
|
section {
|
|
position : absolute ;
|
|
top : calc(var(--main-height) / 4 );
|
|
right:calc(var(--main-width) / 5);
|
|
width : calc(var(--main-height) / 4);
|
|
height : calc(var(--main-height) / 4);
|
|
height : calc(var(--main-height) / 4);
|
|
border-radius : calc(var(--main-height) / 4);
|
|
background-color : red;
|
|
|
|
}
|
|
|
|
aside {
|
|
position : absolute ;
|
|
top : calc(var(--main-height) / 4 );
|
|
left:calc(var(--main-width) / 5);
|
|
width : calc(var(--main-height) / 4);
|
|
height : calc(var(--main-height) / 4);
|
|
height : calc(var(--main-height) / 4);
|
|
border-radius : calc(var(--main-height) / 4);
|
|
|
|
background-color : red;
|
|
}
|
|
footer {
|
|
position : absolute;
|
|
bottom : calc(var(--main-height) / 8 );
|
|
--tmp-left : calc(var(--main-width) / 5);
|
|
left : var(--tmp-left);
|
|
height : calc(var(--main-height) / 6);
|
|
width : calc(var(--tmp-left) * 3 );
|
|
background-color : red;
|
|
}
|
|
|