✨ - Update CSS

Author: Loule95450

css/styles.css

@@ -3,50 +3,76 @@ body {
   background: #fff;
   font-family: 'IBM Plex Sans', sans-serif;
 }
+
 * {
   margin: 0;
   padding: 0;
 }
+
 h1 {
   text-align: center;
+  pointer-events: none;
+}
+
+.hidden {
+  display: none !important;
 }
 
-.hidden {display: none !important;}
 
 /*
 * Header
 */
+
 header {
   padding: 20px 0 0;
   background: white;
   text-align: center;
   display: flex;
   justify-content: space-between;
 }
+
 header .logo img {
   width: 100%;
 }
+
 header .submenu {
   position: relative;
   list-style-type: none;
   width: 50%;
 }
+
 header .submenu #img-cart {
   width: 25px;
   margin-top: 15px;
   cursor: pointer;
 }
 
+
 /** cart **/
-#cart {box-shadow: 0 1px 5px 0 #adadad;}
-#cart table {border-collapse: collapse;}
-#cart table thead tr {background: #f4f4f4;}
+
+#cart {
+  box-shadow: 0 1px 5px 0 #adadad;
+}
+
+#cart table {
+  border-collapse: collapse;
+}
+
+#cart table thead tr {
+  background: #f4f4f4;
+}
+
 #cart table thead th {
   font-size: 11px;
   font-weight: 600;
   border: none;
 }
-#cart table tbody td img {width: auto;height: 40px;}
+
+#cart table tbody td img {
+  width: auto;
+  height: 40px;
+}
+
 #cart table tbody .supprimer-item {
   display: block;
   background-color: #ff5454;
@@ -62,7 +88,10 @@ header .submenu #img-cart {
   text-align: center;
 }
 
-header .submenu #cart {display: none;}
+header .submenu #cart {
+  display: none;
+}
+
 header .submenu:hover #cart {
   display: block;
   position: absolute;
@@ -73,21 +102,32 @@ header .submenu:hover #cart {
   padding: 8px;
   max-height: 400px;
   min-width: 400px;
-
   overflow-y: scroll;
 }
 
-header .submenu:hover #cart::-webkit-scrollbar {width: 4px;}
-header .submenu:hover #cart::-webkit-scrollbar-track {background: #f1f1f1;}
-header .submenu:hover #cart::-webkit-scrollbar-thumb {background: #888;}
-header .submenu:hover #cart::-webkit-scrollbar-thumb:hover {background: #555;}
+header .submenu:hover #cart::-webkit-scrollbar {
+  width: 4px;
+}
+
+header .submenu:hover #cart::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+header .submenu:hover #cart::-webkit-scrollbar-thumb {
+  background: #888;
+}
+
+header .submenu:hover #cart::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
 
 /*
 * Search form
 */
+
 .search-form {
   display: flex;
-
   max-width: 700px;
   width: 70%;
   min-width: 450px;
@@ -97,16 +137,18 @@ header .submenu:hover #cart::-webkit-scrollbar-thumb:hover {background: #555;}
 }
 
 .search-form input {
-    width: 100%;
-    padding: 15px;
-    border: none;
-    outline: none;
-    border-radius: 3px;
-    font-size: 14px;
+  width: 100%;
+  padding: 15px;
+  border: none;
+  outline: none;
+  border-radius: 3px;
+  font-size: 14px;
 }
 
 #no_course {
   text-align: center;
+  font-size: 30px;
+  color: #979797;
   padding: 25px;
 }
 
@@ -122,39 +164,38 @@ header .submenu:hover #cart::-webkit-scrollbar-thumb:hover {background: #555;}
   font-size: 30px;
   font-weight: 100;
   padding: 8px 15px;
-
   position: relative;
-
   color: #383838;
 }
+
 #courses-list h1:after {
   content: "";
   display: block;
-
   height: 15px;
   width: 100%;
-  background: #00B2BD;
+  background: #00b4bdbf;
   position: absolute;
   bottom: 6px;
   left: 10px;
   z-index: -1;
 }
 
-.entete__courses{
+.entete__courses {
   margin-bottom: 30px;
 }
-.courses__container{
+
+.courses__container {
   margin-top: 30px;
   display: grid;
   grid-gap: 25px;
-	max-width: 1080px;
-	margin: 0 auto;
+  max-width: 1080px;
+  margin: 0 auto;
   padding: 0 10px;
 }
-.course__item {
-  border: 1px solid rgba(0,0,0,0.25);
-  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
 
+.course__item {
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
   display: flex;
   flex-direction: column;
   padding: 0 0 10px;
@@ -163,11 +204,11 @@ header .submenu:hover #cart::-webkit-scrollbar-thumb:hover {background: #555;}
 .course__item .course_img {
   height: 120px;
   overflow: hidden;
-
   display: flex;
   justify-content: center;
   align-items: center;
 }
+
 .course__item .course_img img {
   width: 100%;
 }
@@ -177,32 +218,54 @@ header .submenu:hover #cart::-webkit-scrollbar-thumb:hover {background: #555;}
   height: 15px;
   overflow: hidden;
 }
-.course__item .mark img {width: 100%;}
-.course__item .mark.m_5 img {margin-top: 0;}
-.course__item .mark.m_4 img {margin-top: -15px;}
-.course__item .mark.m_3 img {margin-top: -30px;}
-.course__item .mark.m_2 img {margin-top: -45px;}
-.course__item .mark.m_1 img {margin-top: -60px;}
+
+.course__item .mark img {
+  width: 100%;
+}
+
+.course__item .mark.m_5 img {
+  margin-top: 0;
+}
+
+.course__item .mark.m_4 img {
+  margin-top: -15px;
+}
+
+.course__item .mark.m_3 img {
+  margin-top: -30px;
+}
+
+.course__item .mark.m_2 img {
+  margin-top: -45px;
+}
+
+.course__item .mark.m_1 img {
+  margin-top: -60px;
+}
 
 .course__item .info__card {
   padding: 10px;
   position: relative;
 }
+
 .course__item .info__card h4 {
   font-size: 16px;
   font-weight: 700;
 }
+
 .course__item .price {
   text-decoration: line-through;
   color: red;
 }
-.course__item .discount{
+
+.course__item .discount {
   color: black;
   font-weight: bold;
   float: right;
   font-size: 1.25em;
 }
-.course__item .add-to-cart{
+
+.course__item .add-to-cart {
   background: #00B2BD;
   padding: 5px 10px;
   border-radius: 6px;
@@ -212,27 +275,51 @@ header .submenu:hover #cart::-webkit-scrollbar-thumb:hover {background: #555;}
   font-size: 0.8em;
   position: absolute;
   bottom: 0;
+  transition: 0.4s;
 }
+
 .course__item .add-to-cart:hover {
-  background: #00828a;
+  background: #0098a0;
+  transform: scale(1.05);
+  box-shadow: 8px 5px 8px rgba(82, 82, 82, 0.399);
+  transition: 0.4s;
   color: white;
 }
-.fa {margin-bottom: 0;margin-right: 8px;}
+
+.fa {
+  margin-bottom: 0;
+  margin-right: 8px;
+  transition: 1.3s;
+}
+
+.fa-trash:hover {
+  font-size: 1.2em;
+  color: red;
+  transition: 1.3s;
+}
 
 @media (min-width: 750px) {
   header {
-    text-align: left;
+      text-align: left;
   }
 }
 
 @media (min-width: 472px) and (max-width: 767px) {
-  .courses__container{grid-template-columns: 1fr 1fr;}
- }
+  .courses__container {
+      grid-template-columns: 1fr 1fr;
+  }
+}
+
 @media all and (min-width: 768px) {
-  .courses__container{grid-template-columns: 1fr 1fr 1fr;}
+  .courses__container {
+      grid-template-columns: 1fr 1fr 1fr;
+  }
 }
+
 @media all and (min-width: 949px) {
-  .courses__container{grid-template-columns: 1fr 1fr 1fr 1fr;}
+  .courses__container {
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
 }
 
 /*
@@ -337,7 +424,8 @@ header .submenu:hover #cart::-webkit-scrollbar-thumb:hover {background: #555;}
 /*
 * Footer
 */
+
 footer {
   display: block;
   margin-top: 50px;
-}
+}