Welcome on Rayan's Journal

html, body { width: 100vw; /* 100% de la largeur de la fenêtre */ height: 100vh; /* 100% de la hauteur de la fenêtre */ margin: 0; padding: 0; } /* ------------------------------------------------------------------------------------------------------------*/ /* Fond d'ecran */ body{ background-image:url(fond2.jpg); } /* Fin de fond d'ecran */ /* ------------------------------------------------------------------------------------------------------------*/ /* Définition des polices */ @font-face { src: url('font/BitcountGridDouble_Cursive-SemiBold.ttf'); font-family:BitcountGridDouble; } @font-face { src: url('font/evangelion.otf'); font-family:evangelion ; } /* Fin de définition des polices */ /* ------------------------------------------------------------------------------------------------------------*/ /* Forme de texte (titre etc.)*/ h1 { font-family: "evangelion", "courier new", "arial"; font-size: 60px; text-align: center; margin: 20px; } h2 { font-size: 30px; text-align: center; } p { font-size: 20px; text-align: center; } dl { font-size: 25px; text-align: center; } dd { font-size: 20px; } dt { font-size: 22px; } /* Fin de forme de texte (titre etc.)*/ /* ------------------------------------------------------------------------------------------------------------*/ /* bouton de la page*/ #username { font-size: 20px; margin-top: 10px; border-radius: 5px; } #animal { font-size: 20px; margin-top: 5px; border-radius: 5px; } #submit { font-size: 17px; margin-top: -3px; border-radius: 5px; } #reset { font-size: 17px; margin-top: 0px; border-radius: 5px; } /* Fin bouton de la page*/ /* ------------------------------------------------------------------------------------------------------------*/ /* Gestion des images */ .container1, .container2, .container3, .container4, .container6, .container7 { border-radius: 20px; /* Rayon de bordure pour arrondir les coins */ position: absolute; /* Positionnement absolu */ transition: transform 0.3s ease; /* Transition pour rotation fluide */ overflow: hidden; /* Important pour cacher l'excédent si nécessaire */ } /* ------------------------------------------------------------------------------------------------------------*/ /* Image à l'intérieur des conteneurs */ .container1 img, .container2 img, .container3 img, .container4 img, .container6 img, .container7 img{ width: 100%; /* Prend toute la largeur du conteneur */ height: 100%; /* Prend toute la hauteur du conteneur */ border-radius: 10px; /* Bordures arrondies appliquées à l'image */ } /* ------------------------------------------------------------------------------------------------------------*/ /* Position des conteneurs */ .container1 { width: 340; /* Largeur du conteneur */ height: 340px; /* Hauteur du conteneur */ left: 17vw; top: 28vh; transform: rotate(-18deg); } .container2 { width: 350; /* Largeur du conteneur */ height: 350px; /* Hauteur du conteneur */ left: 70vw; top: 25vh; transform: rotate(15deg); } .container3 { width: 325px; /* Largeur du conteneur */ height: 325px; /* Hauteur du conteneur */ left: 83vw; top: 5vh; transform: rotate(-22deg); } .container4 { width: 335px; /* Largeur du conteneur */ height: 335px; /* Hauteur du conteneur */ left: 2vw; top: 15vh; transform: rotate(10deg); } .container6 { width: 290px; /* Largeur du conteneur */ height:290px; /* Hauteur du conteneur */ left: 5vw; top: 19vw; transform: rotate(15deg); } .container7 { width: 325px; /* Largeur du conteneur */ height: 325px; /* Hauteur du conteneur */ left: 83vw; top: 30vh; transform: rotate(-22deg); } /* Fin de gestion des images */ /* ------------------------------------------------------------------------------------------------------------*/ /* Gestion des ombres */ #nayuta, #denji, #kaworu, #asa, #kawodanse, #wait, #tenma { box-shadow: 30px 30px 60px rgba(0, 0, 0, 0.5); border-radius: 20px; } /* Fin de Gestion des ombres */ /* ------------------------------------------------------------------------------------------------------------*/ /* Gestion des animaux */ #scroll1 { position: absolute; /* Positionnement absolu pour pouvoir la déplacer */ bottom: 50px; /* Placer l'image en bas de l'écran */ left: -200px; /* Position initiale à gauche (avant qu'elle ne commence à défiler) */ height: 100px; /* Ajuste la taille de l'image si nécessaire */ width: 100px; transform: scale(0.4); /* Réduit la taille de l'image à 50% */ animation: scrollLeftToRight 20s linear infinite; /* Applique l'animation */ } @keyframes scrollLeftToRight1 { 0% { left: -400px; /* Début : l'image commence hors de l'écran à gauche */ } 100% { left: 100%; /* Fin : l'image se déplace complètement à droite (100% du viewport) */ } } #scroll2 { position: absolute; /* Positionnement absolu pour pouvoir la déplacer */ bottom: 130px; /* Placer l'image en bas de l'écran */ left: -400px; /* Position initiale à gauche (avant qu'elle ne commence à défiler) */ height: 100px; /* Ajuste la taille de l'image si nécessaire */ width: 20vw; transform: scale(0.4); /* Réduit la taille de l'image à 50% */ animation: scrollLeftToRight2 25s linear infinite; /* Applique l'animation */ } @keyframes scrollLeftToRight2 { 0% { left: -600px; /* Début : l'image commence hors de l'écran à gauche */ } 100% { left: 100%; /* Fin : l'image se déplace complètement à droite (100% du viewport) */ } } /* ------------------------------------------------------------------------------------------------------------*/ /* Effet de zoom au survol */ #nayuta:hover, #asa:hover, #kaworu:hover, #denji:hover, #kawodanse:hover, #tenma:hover { transform: scale(1.05); transition: transform 0.3s ease; } /* Fin de l'effet de zoom au survol */ /* ------------------------------------------------------------------------------------------------------------*/ /* Ecran superieur a 1920x1080*/ /* ------------------------------------------------------------------------------------------------------------*/ @media screen and (min-width: 1920px) { /* Forme de texte (titre etc.)*/ h1 { font-size: 80px; margin-top: 50px; } h2 { font-size: 40px; margin-top: 20px; } p { font-size: 25px; } /* Fin de forme de texte (titre etc.)*/ /* ------------------------------------------------------------------------------------------------------------*/ /* bouton de la page*/ #username { font-size: 15px; margin-top: 30px; border-radius: 5px; } #animal { font-size: 15px; margin-top: 5px; border-radius: 5px; } #submit { font-size: 17px; margin-top: -3px; border-radius: 5px; } #reset { font-size: 17px; margin-top: 0px; border-radius: 5px; } /* Fin bouton de la page*/ /* ------------------------------------------------------------------------------------------------------------*/ /* Gestion des images */ .container1 { width: 350px; /* Largeur du conteneur */ height:400px; /* Hauteur du conteneur */ left: 22.5vw; top: 22vh; transform: rotate(-10deg); } .container2 { width: 400px; /* Largeur du conteneur */ height:400px; /* Hauteur du conteneur */ left: 64.1vw; top: 20vh; transform: rotate(10deg); } .container3 { width: 400px; /* Largeur du conteneur */ height:400px; /* Hauteur du conteneur */ left: 80vw; top: 10vh; transform: rotate(-20deg); } .container4 { width: 420px; /* Largeur du conteneur */ height:420px; /* Hauteur du conteneur */ left: 10vw; top: 12vh; transform: rotate(8deg); } .container6 { width: 400px; /* Largeur du conteneur */ height:400px; /* Hauteur du conteneur */ left: 1vw; top: 25vh; transform: rotate(5deg); } .container7 { width: 400px; /* Largeur du conteneur */ height:400px; /* Hauteur du conteneur */ left: 77vw; top: 25vh; transform: rotate(-20deg); } } /* Fin de Gestion des images */ /* ------------------------------------------------------------------------------------------------------------*/ /* Gestion des ombres */ #nayuta, #denji, #kaworu, #asa, #kawodanse, #wait, #tenma { box-shadow: 40px 40px 80px rgba(0, 0, 0, 0.5); border-radius: 20px; } /* Fin de Gestion des ombres */ /* ------------------------------------------------------------------------------------------------------------*/ /* Gestion des animaux */ #scroll { position: absolute; /* Positionnement absolu pour pouvoir la déplacer */ bottom: 50px; /* Placer l'image en bas de l'écran */ left: -200px; /* Position initiale à gauche (avant qu'elle ne commence à défiler) */ height: 100px; /* Ajuste la taille de l'image si nécessaire */ width: 20vw; transform: scale(0.4); /* Réduit la taille de l'image à 50% */ animation: scrollLeftToRight1 20s linear infinite; /* Applique l'animation */ } @keyframes scrollLeftToRight1 { 0% { left: -400px; /* Début : l'image commence hors de l'écran à gauche */ } 100% { left: 100%; /* Fin : l'image se déplace complètement à droite (100% du viewport) */ } } #scroll2 { position: absolute; /* Positionnement absolu pour pouvoir la déplacer */ bottom: 30px; /* Placer l'image en bas de l'écran */ left: -400px; /* Position initiale à gauche (avant qu'elle ne commence à défiler) */ height: 100px; /* Ajuste la taille de l'image si nécessaire */ width: 20vw; transform: scale(0.4); /* Réduit la taille de l'image à 50% */ animation: scrollLeftToRight2 25s linear infinite; /* Applique l'animation */ } @keyframes scrollLeftToRight2 { 0% { left: -600px; /* Début : l'image commence hors de l'écran à gauche */ } 100% { left: 100%; /* Fin : l'image se déplace complètement à droite (100% du viewport) */ } } /* Fin de le petit chat */ /* ------------------------------------------------------------------------------------------------------------*/ /* ChatBox */ iframe{ position: relative; bottom: 50px; right: -50px; width: 300px; height: 400px; box-shadow: 40px 40px 80px rgba(0, 0, 0, 0.5); border: 5px solid #2c3e50; } /* Fin de ChatBox */ /* ------------------------------------------------------------------------------------------------------------*/

Welcome on my first website!