it's fuckin minuit

GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css

@@ -7,42 +7,42 @@ body {
     min-height: 100%;
 }
 
-html{
-    height:100%;
+html {
+    height: 100%;
 }
 
-.home-text{
+.home-text {
     /* border: black 1px solid; */
     text-align: center;
-    background-color:beige;
+    background-color: beige;
     box-shadow: 2px 3px rgba(11, 11, 11, 0.5);
-    padding:1% 2% 1% 2%;
+    padding: 1% 2% 1% 2%;
     margin: 1% 2% 1% 2%;
 }
 
-.home-title{
+.home-title {
     margin: 10px 10% 0% 10%;
-    padding: 0px 0px 0px 0px ;
+    padding: 0px 0px 0px 0px;
     border-radius: 5px 25px;
-    color:plum;
+    color: plum;
     background-color: rgba(0, 0, 0, .75);
 }
 
-.home-subtitle{
+.home-subtitle {
     text-shadow: 3px 2px 5px rgba(0, 0, 0, .5);
 }
 
-.home-img{
+.home-img {
     width: 20%;
     height: auto;
 }
 
-.home-description{
+.home-description {
     margin-top: 2%;
     /* border-top: 1px black solid; */
 }
 
-.topbar-container{
+.topbar-container {
     background-color: beige;
     margin-bottom: 2%;
     border-bottom: rgb(82, 4, 82) solid 1px;
@@ -56,7 +56,7 @@ html{
     box-shadow: 2px 3px rgba(0, 0, 0, .25);
     border-radius: 5px;
     height: 40px;
-    margin:auto;
+    margin: auto;
     margin-bottom: 2%;
     width: 90%;
 }
@@ -111,58 +111,100 @@ html{
     background-color: plum;
 }
 
-.contact-form-container{
-    padding:3% 5% 3% 5%;
-    color:black;
+.contact-form-container {
+    padding: 3% 5% 3% 5%;
+    color: black;
     background-color: beige;
 }
 
-.contact-form-input{
-    border:3px solid rgba(0,0,0,.25);
+.contact-form-input {
+    border: 3px solid rgba(0, 0, 0, .25);
     /* box-shadow: 1px 2px rgba(0, 0, 0, .25); */
 }
 
-.contact-form-btn{
-    margin-top:3%;
-    color:beige;
+.contact-form-btn {
+    margin-top: 3%;
+    color: beige;
     background-color: purple !important;
 }
 
-.contact-form-btn:hover{
+.contact-form-btn:hover {
     background-color: plum !important;
 }
 
-.footer-container{
+.about-us-container {
+    padding: 3% 2% 3% 2%;
+    border-top: 3px solid rgba(123, 9, 102, 0.5);
+    background-color: rgba(0, 0, 0, .25);
+}
+
+.border-quetaine {
+    border: 3px dotted purple;
+    padding: 3px;
+}
+
+.employee-text {
+    color: whitesmoke;
+    background-color: rgba(0, 0, 0, .25);
+}
+
+.contact-info-container {
+    color: white;
+    background-color: rgb(12, 13, 13);
+    padding: 2% 5% 2% 5%;
+}
+
+.contact-info-list {
+    list-style-type: none;
+}
+
+.socials {
+    margin-top: 5%;
+    width: 50%;
+    left: 10px;
+    display: flex;
+}
+
+.socials-icon {
+    margin: auto;
+}
+
+.footer-container {
     color: black;
     margin-top: 5%;
     padding: 2% 3% 2% 3%;
     background-color: white;
 }
 
-.footer-links{
+.footer-links {
     display: flex;
 }
 
-.footer-link{
-    color:purple;
+.footer-link {
+    color: purple;
     text-shadow: 5px 5px 10px rgba(0, 0, 0, .75);
-    margin:auto;
+    margin: auto;
 }
 
-.footer-link:hover{
+.footer-link:hover {
     color: plum;
 }
 
-.footer-partners{
-    display:flex;
+.footer-partners {
+    display: flex;
 }
-.partner-img{
-    margin:auto;
-    height:50px;
+
+.partner-img {
+    margin: auto;
+    height: 50px;
 
 }
 
+
+/* -------------------------------------------------------- */
 /* specification pour les écrans plus petits / cells */
+/* -------------------------------------------------------- */
+
 @media (max-width:450px) {
     .featured-img {
         border: 5px purple double;
@@ -180,21 +222,30 @@ html{
         background-color: rgba(255, 255, 255, .75);
     }
 
-    .contact-form-container{
+    .contact-form-container {
         margin-bottom: 35px;
         margin-top: 35px;
     }
-    
-    .contact-form-input{
+
+    .contact-form-input {
         min-height: 50px;
     }
 
-    .contact-form-btn{
+    .contact-form-btn {
         margin-left: 10%;
-        margin-right:10%;
-        height:75px;
+        margin-right: 10%;
+        height: 75px;
         width: 80%;
     }
 
 
+    .contact-info-container{
+        padding-top:5%;
+    }
+
+    .employee-text {
+        margin: 5px;
+        padding: 10px;
+    }
+
 }