mirror of
https://github.com/Ladebeze66/devsite.git
synced 2025-12-15 13:36:49 +01:00
74 lines
2.7 KiB
CSS
74 lines
2.7 KiB
CSS
/* Importation des polices Google Fonts */
|
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;700&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
|
|
|
|
/* Importation des styles de base, des composants et des utilitaires de Tailwind CSS */
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Classe pour définir l'image de fond */
|
|
.bg-wallpaper {
|
|
background-image: url('./images/wallpapersite.png'); /* Chemin de l'image de fond */
|
|
background-size: cover; /* L'image couvre toute la zone */
|
|
background-position: center; /* L'image est centrée */
|
|
background-repeat: no-repeat; /* L'image ne se répète pas */
|
|
}
|
|
|
|
/* Classe pour définir la hauteur minimale et maximale du contenu de la page d'accueil */
|
|
.homepage-content {
|
|
min-height: 50vh; /* Hauteur minimale de 50% de la hauteur de la fenêtre */
|
|
max-height: 80vh; /* Hauteur maximale de 80% de la hauteur de la fenêtre */
|
|
}
|
|
|
|
/* Classe pour animer le premier cercle */
|
|
.circle-one {
|
|
animation: move1 10s linear infinite; /* Animation infinie avec une durée de 10s */
|
|
}
|
|
|
|
/* Classe pour animer le deuxième cercle */
|
|
.circle-two {
|
|
animation: move2 10s linear infinite; /* Animation infinie avec une durée de 10s */
|
|
}
|
|
|
|
/* Définition de l'animation pour le premier cercle */
|
|
@keyframes move1 {
|
|
0% {
|
|
transform: translate(0, 0) scale(1); /* Position et échelle initiales */
|
|
}
|
|
25% {
|
|
transform: translate(200px, 200px) scale(1); /* Déplacement et échelle */
|
|
}
|
|
50% {
|
|
transform: translate(100px, 400px) scale(1.2); /* Déplacement et échelle */
|
|
}
|
|
75% {
|
|
transform: translate(-100px, -200px) scale(1.1); /* Déplacement et échelle */
|
|
}
|
|
100% {
|
|
transform: translate(0, 0) scale(1); /* Retour à la position et échelle initiales */
|
|
}
|
|
}
|
|
|
|
/* Définition de l'animation pour le deuxième cercle */
|
|
@keyframes move2 {
|
|
0% {
|
|
transform: translate(0, 0) scale(1); /* Position et échelle initiales */
|
|
}
|
|
25% {
|
|
transform: translate(-200px, -200px) scale(1); /* Déplacement et échelle */
|
|
}
|
|
50% {
|
|
transform: translate(-100px, -400px) scale(1.2); /* Déplacement et échelle */
|
|
}
|
|
75% {
|
|
transform: translate(100px, 200px) scale(1.1); /* Déplacement et échelle */
|
|
}
|
|
100% {
|
|
transform: translate(0, 0) scale(1); /* Retour à la position et échelle initiales */
|
|
}
|
|
} |