UpdateUI Css Page creator

src/cssstyle/index.css

@@ -1,48 +1,113 @@
-/* Arrière-plan de la page */
-body {
-  background-color: #f0f0f0;
-  /* Couleur d'arrière-plan de la page */
-  margin: 0;
-  /* Supprimer les marges par défaut */
-  padding: 0;
-  /* Supprimer les espaces de remplissage par défaut */
+
+
+/* CSS pour ajuster la taille de l'image */
+.img-small {
+  width: 70px;
+  height: 70px;
+}
+
+.img-Logo {
+  width: 200px;
+  height: 70px;
+}
+
+
+.text-custom {
+  color: #000000;
+  /* Couleur de texte spécifique */
+}
+
+/* CSS pour le texte du menu-left */
+.menu-left a {
+  color: #000000;
+  /* Couleur du texte */
+  font-weight: bold;
+  /* Gras */
+  text-decoration: none;
+  /* Pas de soulignement */
+  font-size: 24px;
+  /* Taille de la police en pixels */
+}
+
+/* CSS pour le texte des liens du menu-center */
+.menu-center {
+  display: flex;
+  justify-content: center;
+  /* Centrer les éléments horizontalement */
+  align-items: center;
+  /* Centrer les éléments verticalement */
+  flex: 1;
+  /* Utiliser tout l'espace disponible */
+  margin-right:8%
+}
+
+/* CSS pour le texte du menu-right */
+.menu-right a {
+  color: #e4e4e4;
+  /* Couleur du texte */
+}
+
+.bg-custom {
+  background-color: #ffffff;
+  /* Définissez la couleur de fond souhaitée */
+}
+
+.textLogo {
+  font-size: 35px;
+  /* Taille de la police en pixels */
+}
+
+
+
+.logo {
+  margin-right: 5px;
+  /* Réduire la marge entre le logo et le texte */
+
+}
+
+.profilePicture {
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  /* Ajouter une ombre à la photo */
+}
+
+.bg-customdarker {
+  background-color: #ffffffa4;
+  /* Définissez la couleur de fond souhaitée */
 }
 
 .top-aligned-column {
   display: flex;
-  flex-direction: row;
-  /* Afficher les colonnes en ligne */
   justify-content: space-between;
-  /* Espacement égal entre les colonnes */
-  align-items: flex-start;
-  /* Aligner le contenu en haut */
-  min-height: 100vh;
-  /* Ajustez selon vos besoins */
-  padding: 20px;
-  /* Ajouter un espace autour du contenu */
-  box-sizing: border-box;
-  /* Inclure le padding dans la hauteur */
-  overflow-y: auto;
-  /* Activer le défilement vertical */
 }
 
-/* Style de la colonne */
 .column {
   flex: 1;
-  /* Chaque colonne occupe autant d'espace que possible */
-  padding: 20px;
-  /* Espacement interne */
 }
 
 .center-column {
-  flex: 1;
-  /* Augmenter la taille de la colonne centrale */
-  background-color: #ffffff;
-  /* Couleur de fond de la colonne */
-  border-radius: 20px;
-  /* Arrondir les coins de la colonne */
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  /* Ajouter une ombre à la colonne */
+  flex: 3; /* La colonne centrale occupe 3 fois plus d'espace que les autres */
+}
+
+
+.colum-aligncenter
+{
   text-align: center;
-  /* Centrer le contenu */
-}
+}
+
+.menu-center a:nth-child(1):hover svg {
+  color: rgba(163, 14, 121, 1); /* Changer la couleur en rouge au survol */
+}
+
+/* Pour le deuxième bouton */
+.menu-center a:nth-child(2):hover svg {
+  color:  rgba(163, 14, 121, 1); /* Changer la couleur en bleu au survol */
+}
+
+/* Pour le troisième bouton */
+.menu-center a:nth-child(3):hover svg {
+  color:  rgba(163, 14, 121, 1); /* Changer la couleur en vert au survol */
+}
+
+
+
+