body {
margin: 0;
}
#site-wrapper{
overflow: hidden;
}
#avatar-creator {
display: grid;
background-color: #32475a;
grid-template-areas:
". . . "
"canvas canvas canvas"
"palette palette palette "
"options options options "
"options options options "
"options options options"
"options options options "
"options options options ";
width: 100vw;
height: 100vh;
}
#avatar-canvas {
position: relative;
grid-area: canvas; /* Removed double quotes */
background-color: #f4e9d5;
overflow: hidden;
}
#color-palette {
grid-area: palette; /* Removed double quotes */
background-color: #f2ab99;
}
#avatar-options {
grid-area: options; /* Removed double quotes */
background-color: grey;
}
.avatar{
top:0;
left:0;
position: absolute;
z-index: 1;
width: 70%;
}
.avatar-eye{
top:0;
left:0;
position: absolute;
z-index: 1;
width: 70%;
}
.avatar-mouth{
top:0;
left:0;
position: absolute;
z-index: 1;
width: 70%;
}
.avatar-hair{
top:0;
left:0;
position: absolute;
width: 70%;
}
.avatar-glasses{
top:0;
left:0;
position: absolute;
z-index:4;
width: 70%;
}
@media screen and (min-width: 900px) {
#avatar-creator {
display: grid;
background-color: lightblue;
grid-template-areas:
". . . . . . . . ."
". canvas canvas canvas options options options options ."
". canvas canvas canvas options options options options ."
". canvas canvas canvas options options options options ."
". canvas canvas canvas options options options options ."
". palette palette palette options options options options ."
". palette palette palette options options options options ."
". . . . . . . . ." ;
width: 100vw;
height: 100vh;
}
}
src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'>
Document
