initial commit
This commit is contained in:
125
Css/choix.css
Normal file
125
Css/choix.css
Normal file
@ -0,0 +1,125 @@
|
||||
|
||||
*{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body{
|
||||
background-image: url("../img/91657.jpg");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.topbar{
|
||||
background-image: url("../img/91657.jpg");
|
||||
}
|
||||
|
||||
.topbar{
|
||||
background-color: black;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: solid 2px purple;
|
||||
}
|
||||
|
||||
.topbar a{
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
margin: 0 10px 0 0;
|
||||
font-weight: 900;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
|
||||
.topbar a:hover{
|
||||
background-color: pink;
|
||||
border-radius: 15px;
|
||||
color: #0d134b;
|
||||
}
|
||||
|
||||
|
||||
.topbar .nav .active a {
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.topbar .titre{
|
||||
font-size: 17px;
|
||||
padding: 10px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: pink;
|
||||
}
|
||||
|
||||
.topbar .titre:hover{
|
||||
background-color: pink;
|
||||
border-radius: 15px;
|
||||
color: #0d134b;
|
||||
|
||||
}
|
||||
|
||||
.bouton
|
||||
{
|
||||
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.bouton a{
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.titre{
|
||||
color: white;}
|
||||
|
||||
|
||||
.container {
|
||||
min-height: 90vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section{
|
||||
height: 300px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.bouton {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.bouton a {
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
width: 150px;
|
||||
text-decoration: none;
|
||||
background-color: pink;
|
||||
color: #0d134b;
|
||||
border: solid 5px purple;
|
||||
}
|
||||
|
||||
.bouton a:hover{
|
||||
background-color: purple;
|
||||
border: solid 5px pink;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
115
Css/main.css
Normal file
115
Css/main.css
Normal file
@ -0,0 +1,115 @@
|
||||
|
||||
|
||||
:root{
|
||||
--title: #f8c27a;
|
||||
--textShadow: 0 2px 2px rbga(0,0,0,.7);
|
||||
--boxShadow: 0 0px 10px rgba(0,0,0,.2)
|
||||
}
|
||||
|
||||
*
|
||||
{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body{
|
||||
font-size: 14px;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: sans-serif;
|
||||
background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
|
||||
}
|
||||
|
||||
.container
|
||||
{
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
box-shadow: var(--boxShadow);
|
||||
}
|
||||
|
||||
h1{
|
||||
font-family: 'Anton', sans-serif;
|
||||
font-family: 'Fjalla One', sans-serif;
|
||||
font-family: 'Kanit', sans-serif;
|
||||
font-family: 'Lobster', cursive;
|
||||
font-family: 'Rubik Wet Paint', cursive;
|
||||
font-family: 'Secular One', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
p{
|
||||
font-family: 'Luckiest Guy', cursive;
|
||||
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
}
|
||||
|
||||
.vies
|
||||
{
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
ion-icon
|
||||
{
|
||||
font-size: 50px;
|
||||
fill: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
#inputBox
|
||||
{
|
||||
background-color: #2acefc;
|
||||
padding: 15px;
|
||||
border: 5px;
|
||||
}
|
||||
|
||||
#inputBox label
|
||||
{
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
input,
|
||||
button{
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 3px 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
button
|
||||
{
|
||||
background-color: teal;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
button:hover{
|
||||
transform: translateY(-2px);
|
||||
background-color: rgb(3, 158, 158);
|
||||
}
|
||||
|
||||
p#message
|
||||
{
|
||||
margin: 20px auto 0 auto;
|
||||
}
|
||||
|
||||
#rejouer
|
||||
{
|
||||
display: none;
|
||||
margin: 5px auto 0 auto;
|
||||
}
|
||||
|
||||
#detail
|
||||
{
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
margin: 5px auto 0 auto;
|
||||
}
|
||||
|
||||
160
Css/style.css
Normal file
160
Css/style.css
Normal file
@ -0,0 +1,160 @@
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;;
|
||||
}
|
||||
|
||||
|
||||
body{
|
||||
background-image: url("../img/91657.jpg");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.header{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.topbar{
|
||||
background-image: url("../img/91657.jpg");
|
||||
background-color: black;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: solid 2px purple;
|
||||
}
|
||||
|
||||
.topbar a{
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
margin: 0 10px 0 0;
|
||||
font-weight: 900;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
|
||||
.topbar a:hover{
|
||||
background-color: pink;
|
||||
border-radius: 15px;
|
||||
color: #0d134b;
|
||||
}
|
||||
|
||||
|
||||
.topbar .titre{
|
||||
font-size: 17px;
|
||||
padding: 10px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: pink;
|
||||
}
|
||||
|
||||
.topbar .titre:hover{
|
||||
background-color: pink;
|
||||
border-radius: 15px;
|
||||
color: #0d134b;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.container{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 841px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.section{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
text-align: center;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.section .titre-h3{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.play{
|
||||
background-color: pink;
|
||||
padding: 20px;
|
||||
border-radius: 30px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
height: 15px;
|
||||
text-decoration: none;
|
||||
margin-top: 60px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: #0d134b;
|
||||
border: solid 5px purple;
|
||||
|
||||
}
|
||||
|
||||
.play:hover{
|
||||
background-color: purple;
|
||||
border: solid 5px pink;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 522px){
|
||||
.topbar {
|
||||
background-color: #1a237e;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.topbar .titre {
|
||||
margin-bottom: 18px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.nav a{
|
||||
text-align: center;
|
||||
margin-top: 5px;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.topbar{
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.topbar a{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: 80px;
|
||||
width: 310px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user