You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
421 lines
7.2 KiB
421 lines
7.2 KiB
/*Donne un aspect visuel global à tout ce qui est entouré par body*/
|
|
body{
|
|
text-align: center;
|
|
line-height: 1.5;
|
|
font-size: large;
|
|
font-family: fangsong;
|
|
text-orientation: upright;
|
|
background-color: rgb(231,232,207);
|
|
}
|
|
|
|
/*image de fond*/
|
|
.bg{
|
|
background-image: url('img/bg.png') ;
|
|
background-attachment: fixed;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
/*Donne au header son apparence sticky<*/
|
|
header{
|
|
position : sticky;
|
|
top :0;
|
|
background-color: black;
|
|
color: rgb(152,251,152);
|
|
margin: auto;
|
|
border-radius: 20px/20px;
|
|
z-index: 100;
|
|
}
|
|
|
|
|
|
/*Modifie l'alignement des tableaux*/
|
|
table, td, th{
|
|
margin: auto;
|
|
text-align: center;
|
|
border-width: thin;
|
|
border-color: black;
|
|
border-style: solid;
|
|
}
|
|
|
|
/*custom les images de objects.html*/
|
|
td img{
|
|
border-radius: 10px/5px;
|
|
}
|
|
|
|
/*Set la taille de la vidéo et son visuel puis indique qu'il faut qu'elle passe en arrière plan*/
|
|
video{
|
|
width: 65%;
|
|
height: auto;
|
|
border-radius: 20px/20px;
|
|
z-index:10;
|
|
}
|
|
|
|
|
|
/*Définit une largeur et hauteur pour les figures*/
|
|
figure{
|
|
padding-left:14%;
|
|
padding-right:14%;
|
|
margin-top:-0.1%;
|
|
}
|
|
|
|
|
|
/*Définit le visuel des figure caption*/
|
|
figcaption{
|
|
border-color :black;
|
|
border-style:solid;
|
|
border-width:thin;
|
|
text-align: center;
|
|
font-size:small;
|
|
color:black;
|
|
padding:0.1%;
|
|
}
|
|
|
|
|
|
/*Lorsqu'un lien n'est pas encore visité*/
|
|
a{
|
|
color: rgb( 94, 189, 179 );
|
|
}
|
|
|
|
/*quand on passe dessus*/
|
|
a:hover{
|
|
color: rgb( 94, 149, 149 );
|
|
}
|
|
|
|
/*Une fois que le lien a été visité*/
|
|
a:visited{
|
|
color: rgb(90,160,185);
|
|
}
|
|
|
|
/*Effets sur toutes les balises de type p*/
|
|
p{
|
|
color : rgb(35,42,92);
|
|
margin-left: 21%;
|
|
margin-right: 21%;
|
|
text-align: justify;
|
|
text-align-last: center ;
|
|
}
|
|
|
|
aside{
|
|
float:right;
|
|
width : 20%
|
|
}
|
|
|
|
/*Effets de base apportés aux images*/
|
|
img{
|
|
position:relative;
|
|
align-content: center;
|
|
max-width: 80%;
|
|
height: auto;
|
|
border-radius: 50px/35px;
|
|
}
|
|
|
|
/*Effets apportés à toutes les balises de gros titre h1*/
|
|
h1{
|
|
background-color: black;
|
|
margin-right: 16%;
|
|
margin-left: 16%;
|
|
color: rgb(152,251,152);
|
|
border-radius: 20px/20px;
|
|
padding-bottom: 4px;
|
|
height: 50px;
|
|
text-shadow: 2px 2px 14px #76d09c ;
|
|
text-align: center;
|
|
}
|
|
|
|
/*spécifie une ombre pour les h2*/
|
|
h2{
|
|
text-shadow: 1px 1px 3px #010a59 ;
|
|
}
|
|
|
|
.clright h2{
|
|
margin-left: 20%;
|
|
}
|
|
|
|
|
|
/*spécifie une ombre pour les h3*/
|
|
h3{
|
|
text-shadow: 1px 1px 2px #010a59;
|
|
}
|
|
|
|
|
|
/*Permet d'afficher les listes de cette manière*/
|
|
ul{
|
|
margin-left: 26%;
|
|
margin-right: 28%;
|
|
color: rgb(35,42,92);
|
|
list-style-type: '∴';
|
|
border: 1px solid black;
|
|
border-radius: 15px/10px;
|
|
}
|
|
|
|
aside ul{
|
|
padding-left:15px;
|
|
}
|
|
|
|
/*les éléments de la liste seront de la sorte*/
|
|
li{
|
|
margin-left: 14%;
|
|
margin-right: 18%;
|
|
display: list-item;
|
|
text-align: -webkit-match-parent;
|
|
/*list-style-type: '∴';*/
|
|
}
|
|
|
|
|
|
aside li{
|
|
margin-left:5px;
|
|
}
|
|
|
|
/*permet de fixer et personnaliser le footer*/
|
|
footer{
|
|
text-shadow: 2px 2px #76d09c ;
|
|
text-align:center;
|
|
position: fixed;
|
|
bottom:6px;
|
|
right: 0;
|
|
display:inline-block;
|
|
vertical-align:top;
|
|
font-size:13px;
|
|
height: 25px;
|
|
}
|
|
|
|
/*Permet d'afficher la barre nav avec tous ces éléments flexbox*/
|
|
.flexbar{
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
flex-direction:row;
|
|
margin-bottom: -2px;
|
|
z-index: 10;
|
|
flex-wrap:wrap;
|
|
}
|
|
|
|
|
|
/*Permet à l'item "Zelda Breath of The Wild" d'être rapproché du menu*/
|
|
.flex{
|
|
display:flex;
|
|
justify-content: space-around;
|
|
align-items:baseline;
|
|
flex-direction:row;
|
|
margin-bottom: -2px;
|
|
flex-wrap:wrap;
|
|
}
|
|
|
|
|
|
/*Effets ajoutés à ce qui est dans la navbar, de sorte à ce que cela ressemble à des
|
|
boutons*/
|
|
.buttonbar{
|
|
text-shadow: 2px 2px 14px #76d09c ;
|
|
background-color: black;
|
|
border-color: black;
|
|
border-style: hidden;
|
|
border-width: thin;
|
|
color: rgb(152,251,152);
|
|
width: 128px;
|
|
font-size: 100%;
|
|
display:block;
|
|
cursor:pointer;
|
|
text-decoration: none;
|
|
border-right: 1px solid #98fb98;
|
|
}
|
|
|
|
|
|
/*Effets ajoutés à certains liens pour que cela ressemble à un bouton sur lequel on
|
|
peut cliquer*/
|
|
/*
|
|
border-radius: 50px/35px; hésitation avec ce border radius
|
|
*/
|
|
.button{
|
|
text-shadow: 2px 2px 14px #76d09c ;
|
|
background-color: black;
|
|
border-color: black;
|
|
border-style: hidden;
|
|
border-width: thin;
|
|
color: rgb(152,251,152);
|
|
width: 128px;
|
|
font-size: 100%;
|
|
display:block;
|
|
cursor:pointer;
|
|
border-radius: 10px/5px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
/*Classe spéciale qui est comme buttonbar mais auquel il manque la couleur de la bordure
|
|
droite de délimitation*/
|
|
.buttonlast{
|
|
text-shadow: 2px 2px 14px #76d09c ;
|
|
background-color: black;
|
|
border-color: black;
|
|
border-style: hidden;
|
|
border-width: thin;
|
|
color: rgb(152,251,152);
|
|
width: 128px;
|
|
font-size: 100%;
|
|
display:block;
|
|
cursor:pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/*bouton contact*/
|
|
.dropdownlog{
|
|
text-shadow: 2px 2px 14px #76d09c ;
|
|
position: fixed;
|
|
top: 0;
|
|
margin-right: 30px;
|
|
margin-top: 23px;
|
|
right: 0;
|
|
border-color: black;
|
|
width: 100px;
|
|
font-size: 100%;
|
|
cursor:pointer;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
z-index:200;
|
|
}
|
|
|
|
/*contenu du bouton contact*/
|
|
.dropdown-aff{
|
|
display: none;
|
|
position: absolute;
|
|
margin-left: 22px;
|
|
background-color: transparent;
|
|
border-color: black;
|
|
border-style: hidden;
|
|
border-width: thin;
|
|
width: 66px;
|
|
cursor:pointer;
|
|
border-radius: 10px/5px;
|
|
}
|
|
|
|
|
|
/*affichage des logos du contact*/
|
|
.dropdownlog:hover .dropdown-aff {
|
|
display: block;
|
|
}
|
|
|
|
|
|
/*Set la couleur pour le petit contact*/
|
|
#Contact{
|
|
color: rgb(152,251,152);
|
|
}
|
|
|
|
/*Pour chaque logo, défini un border-radius*/
|
|
.logo{
|
|
border-radius: 20px/15px;
|
|
}
|
|
|
|
|
|
/*flèche positionnement et look*/
|
|
.arrow{
|
|
text-align:center;
|
|
text-decoration: none;
|
|
position: fixed;
|
|
bottom:16px;
|
|
right: 80px;
|
|
background-color: black;
|
|
border: 1px solid black;
|
|
padding-bottom: 5px;
|
|
border-radius: 70px/70px;
|
|
display:inline-block;
|
|
font-size:20px;
|
|
height: 30px;
|
|
width: 40px;
|
|
}
|
|
|
|
|
|
|
|
.text{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
/*permet d'afficher la map Korogu dans l'onglet map*/
|
|
.korokmap{
|
|
modestbranding:1;
|
|
showinfo:0;
|
|
width: 90%;
|
|
height : 700px;
|
|
}
|
|
|
|
/*aspect physique du bouton*/
|
|
.dropbtn{
|
|
display: block;
|
|
width: 128px;
|
|
color: rgb(90,180,185);
|
|
text-shadow: 2px 2px 14px #76d09c ;
|
|
background-color: black;
|
|
font-size: 100%;
|
|
font-family: fangsong;
|
|
cursor:pointer;
|
|
text-decoration: none;
|
|
border-right: 1px solid #98fb98;
|
|
}
|
|
|
|
/*affiche le bloc*/
|
|
.dropdown{
|
|
display: inline-block;
|
|
}
|
|
|
|
/*contenu du bouton*/
|
|
.dropdown-content{
|
|
display: none;
|
|
background-color: black;
|
|
border-color: black;
|
|
border-style: hidden;
|
|
border-width: thin;
|
|
width: 128px;
|
|
font-size: 100%;
|
|
cursor:pointer;
|
|
text-decoration: none;
|
|
position: absolute;
|
|
border-radius: 10px/5px;
|
|
}
|
|
|
|
/*liens à défiler du bouton*/
|
|
.dropdown-content a{
|
|
color: white;
|
|
padding-top: 5px;
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
|
|
/*change la couleur lorsque l'on passe dessus*/
|
|
.dropdown-content a:hover{
|
|
background-color: #e1f1c1;
|
|
}
|
|
|
|
/*affiche le menu quand on passe dessus*/
|
|
.dropdown:hover .dropdown-content{
|
|
display: block;
|
|
}
|
|
|
|
/*Met la couleur au texte dans le contact*/
|
|
label{
|
|
color : rgb(35,42,92);
|
|
}
|
|
|
|
/*Stylise le php*/
|
|
.php{
|
|
display : flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/*dit que si l'écran inférieur ou égal à 800px on passe le aside en float:none*/
|
|
@media only screen and (max-width: 800px) {
|
|
div.fleft {
|
|
float: none;
|
|
}
|
|
}
|
|
|
|
/*set pour avoir le aside à côté*/
|
|
div.fleft{
|
|
width:80%;
|
|
float:left;
|
|
}
|