SERNY Sacha
3 years ago
2 changed files with 112 additions and 117 deletions
@ -1,117 +0,0 @@ |
|||
* { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
body { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
min-height: 100vh; |
|||
background: rgb(18,79,96); |
|||
background: -moz-linear-gradient(180deg, rgba(18,79,96,1) 0%, rgba(84,33,163,1) 100%); |
|||
background: -webkit-linear-gradient(180deg, rgba(18,79,96,1) 0%, rgba(84,33,163,1) 100%); |
|||
background: linear-gradient(180deg, rgba(18,79,96,1) 0%, rgba(84,33,163,1) 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#124f60",endColorstr="#5421a3",GradientType=1); |
|||
padding: 2.5rem; |
|||
color: white; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
/* cadre qui entoure le rouleaux*/ |
|||
.cadre_rouleaux { |
|||
display: flex; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
/* Affichage numéros */ |
|||
.rouleaux { |
|||
position: relative; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
width: 14rem; |
|||
height: 6.9rem; |
|||
overflow: hidden; |
|||
background-color: linear-gradient(to right, #fc5c7d, #6a82fb); |
|||
box-shadow: inset 0 2px 20px 5px #000, 0 2px 20px 1px rgba(255, 255, 255, 0.4); |
|||
border-radius: 10px; |
|||
text-align: center; |
|||
color: #fff; |
|||
text-shadow: -2px -2px 0 #aaa; |
|||
font: 5rem/1.4 monaco, monospace; |
|||
} |
|||
|
|||
/* Boutons */ |
|||
.button { |
|||
margin-top: 50px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.button button { |
|||
display: inline-block; |
|||
background: transparent; |
|||
color: white; |
|||
border: 2px solid white; |
|||
border-radius: 5%; |
|||
font-size: 18px; |
|||
letter-spacing: 2px; |
|||
padding: 25px 80px; |
|||
text-transform: none; |
|||
cursor: pointer; |
|||
margin: 15px 30px; |
|||
transition: all 0.7s; |
|||
} |
|||
|
|||
button:hover { |
|||
background-color: white; |
|||
color: black; |
|||
transition: all 0.7s; |
|||
} |
|||
|
|||
/* affichage des "coin player et machine" */ |
|||
.option { |
|||
position: absolute; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
top: 50%; |
|||
right: 3%; |
|||
transform: translateY(-50%); |
|||
color: white; |
|||
} |
|||
|
|||
/* titre qui renvoie à la page index.html */ |
|||
.title { |
|||
position: absolute; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20px 20px; |
|||
top: 2%; |
|||
left: 2%; |
|||
color: #fff; |
|||
text-decoration: none; |
|||
text-transform: uppercase; |
|||
font-size: 2em; |
|||
letter-spacing: 1px; |
|||
transition: 2s; |
|||
z-index: 9998; |
|||
} |
|||
|
|||
/* affiche les règles*/ |
|||
#show_rules { |
|||
position: relative; |
|||
display: none; |
|||
background-color: #fff; |
|||
|
|||
} |
|||
|
|||
#show_rules > p { |
|||
padding: 100px; |
|||
color: black; |
|||
} |
Loading…
Reference in new issue