Explorer
project
index.html
index.js
style.css
Dependencies
Bootcamp
Study group
Collaborate with peers in your dedicated #study-group channel.
Code reviews
Submit projects for review using the /review
command in your #code-reviews channel
body {
background-color: #AEB8FE;
display: flex;
font-family: sans-serif;
}
.dice {
width: 90px;
height: 90px;
border-radius: 10px;
background-color: #EFE5DC;
margin: 100px;
position: relative;
}
.dice:after {
content: "You rolled: " attr(data-number);
position: absolute;
top: calc(100% + 10px);
color: red;
white-space: nowrap
}
.dice[data-number=""]:after {
display: none;
}
.dot {
display: none;
width: 20px;
height: 20px;
border-radius: 15px;
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.dice .dot:first-child {
display: block;
}
.dice[data-number="2"] .dot:nth-child(2) {
display: block;
}
.dice[data-number="2"] .dot:first-child {
left: 20%;
top: 80%;
}
.dice[data-number="2"] .dot:nth-child(2) {
left: 80%;
top: 20%;
}
.dice[data-number="3"] .dot:nth-child(2),
.dice[data-number="3"] .dot:nth-child(3) {
display: block;
}
.dice[data-number="3"] .dot:nth-child(2) {
left: 20%;
top: 80%;
}
.dice[data-number="3"] .dot:nth-child(3) {
left: 80%;
top: 20%;
}
.dice[data-number="4"] .dot:nth-child(2),
.dice[data-number="4"] .dot:nth-child(3),
.dice[data-number="4"] .dot:nth-child(4) {
display: block;
}
.dice[data-number="4"] .dot:nth-child(1) {
left: 20%;
top: 20%;
}
.dice[data-number="4"] .dot:nth-child(2) {
left: 20%;
top: 80%;
}
.dice[data-number="4"] .dot:nth-child(3) {
left: 80%;
top: 20%;
}
.dice[data-number="4"] .dot:nth-child(4) {
left: 80%;
top: 80%;
}
.dice[data-number="5"] .dot:nth-child(2),
.dice[data-number="5"] .dot:nth-child(3),
.dice[data-number="5"] .dot:nth-child(4),
.dice[data-number="5"] .dot:nth-child(5) {
display: block;
}
.dice[data-number="5"] .dot:nth-child(1) {
left: 20%;
top: 20%;
}
.dice[data-number="5"] .dot:nth-child(2) {
left: 20%;
top: 80%;
}
.dice[data-number="5"] .dot:nth-child(3) {
left: 80%;
top: 20%;
}
.dice[data-number="5"] .dot:nth-child(4) {
left: 80%;
top: 80%;
}
.dice[data-number="6"] .dot:nth-child(2),
.dice[data-number="6"] .dot:nth-child(3),
.dice[data-number="6"] .dot:nth-child(4),
.dice[data-number="6"] .dot:nth-child(5),
.dice[data-number="6"] .dot:nth-child(6) {
display: block;
}
.dice[data-number="6"] .dot:nth-child(1) {
left: 20%;
top: 20%;
}
.dice[data-number="6"] .dot:nth-child(2) {
left: 20%;
top: 80%;
}
.dice[data-number="6"] .dot:nth-child(3) {
left: 80%;
top: 20%;
}
.dice[data-number="6"] .dot:nth-child(4) {
left: 80%;
top: 80%;
}
.dice[data-number="6"] .dot:nth-child(5) {
left: 20%;
top: 50%;
}
.dice[data-number="6"] .dot:nth-child(6) {
left: 80%;
top: 50%;
}