92 lines
1.4 KiB
CSS
92 lines
1.4 KiB
CSS
header {
|
|
background-color: #f1f1f1;
|
|
padding: 20px;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
body {
|
|
overflow: scroll;
|
|
}
|
|
|
|
|
|
.wrapper {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-rows: 1fr;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
.button {
|
|
border: none;
|
|
color: white;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
margin: 10px auto;
|
|
cursor: pointer;
|
|
width: 90%;
|
|
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.buttonY{
|
|
background-color: orange;
|
|
grid-row: 1;
|
|
}
|
|
.buttonX{
|
|
background-color: blue;
|
|
grid-row: 2;
|
|
}
|
|
.buttonA{
|
|
background-color: green;
|
|
grid-row: 3;
|
|
}
|
|
|
|
.buttonStart{
|
|
background-color: red;
|
|
grid-row: 4;
|
|
width: 50%;
|
|
font-size: 12px;
|
|
|
|
}
|
|
|
|
.button_container {
|
|
position: absolute;
|
|
display: grid;
|
|
left: 25%;
|
|
top: 25%;
|
|
height: 50%;
|
|
width: 50%;
|
|
}
|
|
.image_container {
|
|
position: absolute;
|
|
top: 20%;
|
|
height: 80%;
|
|
width: 80%;
|
|
}
|
|
.joy_container {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.left {
|
|
position: relative;
|
|
background: rgba(63, 58, 55, 0.1);
|
|
grid-column: 1;
|
|
height: 100%;
|
|
}
|
|
.middle {
|
|
position: relative;
|
|
background: rgba(45, 48, 45, 0.1);
|
|
grid-column: 2;
|
|
height: 100%;
|
|
}
|
|
|
|
.right {
|
|
position: relative;
|
|
background: rgba(63, 58, 55, 0.1);
|
|
grid-column: 3;
|
|
}
|