Llz mysqli (#50)

* Desisto desta maneira, vou voltar pro padrão

* Vendo login

* Stylizing login OK

* Styling login form OK

* Sing in and Sing up style OK

* testando

css/card.css

@@ -185,31 +185,16 @@ article {
     height: 100%;
     width: 100%;
     font-family: 'Krona One', sans-serif;
-	font-size: 18px;
+	font-size: 16px;
     color: var(--aqua-claro);
     overflow: hidden;
-    line-height: 190%;
+    line-height: 200%;
     display: -webkit-box;
     -webkit-line-clamp: 2; /* Número máximo de linhas a serem exibidas */
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
 }
-.preco-antes{
-    display: flex;
-    flex-direction: column;
-    align-items: self-start;
-    color: var(--aqua-escuro);
-}
-.preço-final {
-    display: flex;
-    flex-direction: column;
-    align-items: self-start;
-}
-.preco-depois{
-	font-size: 22px;
-    color: var(--aqua-medio);
-}
 
 .preco{
     width: 100%;
@@ -229,7 +214,7 @@ article {
 }
 .preco-antes p{
     width: 100%;
-    font-size: 12px;
+    font-size: 10px;
     color: var(--aqua-escuro);
 }
 
@@ -253,7 +238,7 @@ article {
     width: 100%;
     display: flex;
     align-items: center;
-	font-size: 26px;
+	font-size: 24px;
     color: var(--aqua-medio);
 }
 
@@ -309,7 +294,7 @@ article {
     width: 100%;
     background-color: var(--aqua-medio);
     pointer-events: none;
-    transform: translateX(-170px);
+    transform: translateX(-100%);
     transition: all .25s ease-in-out;
 }
 
@@ -318,27 +303,41 @@ article {
     height: 100%;
     min-width: 50px;
     width: 25%;
-    border: solid var(--aqua-medio) .25em;
+    position: relative;
     border-radius: .5em;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
+    background-color: var(--aqua-claro);
     transition: all .2s ease-in-out;
+    overflow: hidden;
 }
 .categoria-button a{
-    height: 100%;
+    height: 90%;
     width: 30%;
+    position: absolute;
     display: flex;
     align-items: center;
     justify-content: center;
+    z-index: 999;
 }
 .categoria-button a img{
     /* Temporariamente (usar Krita) */
-    filter: invert();
-
+    /*filter: invert();*/
     height: 75%;
 }
+.categoria-button-hover-color{
+    position: absolute;
+    top: 0;
+    z-index: 998;
+    height: 100%;
+    width: 100%;
+    background-color: var(--aqua-medio);
+    pointer-events: none;
+    transform: translateX(-100%);
+    transition: all .25s ease-in-out;
+}
 
 /*-----===EFFECTS===-----*/
 .card:hover{
@@ -354,6 +353,6 @@ article {
     transform: translateX(0);
 }
 
-.categoria-button:hover{
-    background-color: var(--aqua-medio);
+.categoria-button:hover .categoria-button-hover-color{
+    transform: translateX(0);;
 }

css/headerLogin.css

@@ -0,0 +1,75 @@
+/*-----===HEADER===-----*/
+header{
+    top: 0;
+    min-height: 50px;
+    height: 8vh;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: sticky;
+    z-index: 1002;
+}
+
+/*---=Header Top=---*/
+.header-top, .header-top-left, .header-top-right,
+nav, .nav-content, .nav-item{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.header-top{
+    top: 0;
+    height: 100%;
+    width: 100%;
+    background-color: var(--azul-escuro);
+}
+.header-top-left, .header-top-right{
+    height: 100%;
+    width: 25%;
+}
+/*-Header Top Left-*/
+/*-Header Top Center-*/
+nav{
+    height: 100%;
+    width: 50%;
+}
+.nav-content{
+    height: 100%;
+    width: 100%;
+    justify-content: space-evenly;
+    list-style: none;
+}
+.nav-item{
+    height: 100%;
+    width: auto;
+}
+.nav-item a{
+    text-decoration: none;
+    color: var(--aqua-claro);
+    font-size: 15px;
+}
+/*-Header Top Right-*/
+.site-theme-btn-container, .shopping-kart-btn-container, .user-account-btn-container{
+    height: 50%;
+    width: 25%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    /* Temporariamente (usar Krita) */
+    filter: invert();
+}
+.site-theme-btn-container a, .shopping-kart-btn-container a, .user-account-btn-container a{
+    height: 100%;
+    width: 100%;
+}
+.site-theme-btn-container a img, .shopping-kart-btn-container a img, .user-account-btn-container a img{
+    height: 100%;
+}
+
+/*---=Header Bottom=---*/
+.header-bottom{
+    display: none;
+}