Update and rename sociedade.css to economia.css

Html-Czllt · Jul 26, 2024 · b7e6baf · b7e6baf
1 parent 6b27488
commit b7e6baf
Showing 1 changed file with 43 additions and 63 deletions.
diff --git a/sociedade.css → economia.css b/sociedade.css → economia.css
@@ -108,95 +108,75 @@ nav a.button.button5:hover { background-color: #555; color: #ff0000 ; }
 
 main {
     padding: 20px;
+    background-color: #ffffff; /* Fundo principal */
+    color: #311414; /* Texto principal */
 }
 
-.container {
-    display: flex;
-    flex-direction: column;
+.main-content {
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 20px;
+
 }
 
-.row {
+.card-container {
     display: flex;
     flex-wrap: wrap;
-    gap: 20px;
-}
-
-.quadrado, .quadrado1, .retangular {
-    flex: 1;
-    background-color: #fff;
-    padding: 20px;
-    border: 1px solid #000;
-    border-radius: 10px;
-    transition: transform 0.3s, box-shadow 0.3s;
-}
-
-.quadrado:hover, .quadrado1:hover, .retangular:hover {
-    transition: transform 0.3s, box-shadow 0.3s;
-    transform: translateY(-10px);
-    box-shadow: #b3b3b3 0px 6px 1px;
-}
-
-.quadrado h2, .quadrado1 h2, .retangular h2 {
-    color: #000;
-    text-align: center;
+    gap: 20px; /* Espaçamento entre os cards */
+    justify-content: center; /* Alinha os cards horizontalmente */
 }
 
-.quadrado p, .quadrado1 p, .retangular p {
-    color: #000;
-    margin: 0;
+.card {
+    perspective: 1000px;
+    width: 300px; /* Ajuste conforme necessário */
+    height: 200px; /* Ajuste conforme necessário */
 }
 
-.text-container {
+.card-inner {
     position: relative;
-    max-height: 80px;
-    overflow: visible;
+    width: 100%;
+    height: 100%;
+    transition: transform 0.6s;
+    transform-style: preserve-3d;
 }
 
-.toggle {
-    display: none;
+.card:hover .card-inner {
+    transform: rotateX(180deg); /* Efeito flip */
 }
 
-.toggle-label {
-    display: none;
+.card-front, .card-back {
     position: absolute;
-    bottom: 0;
-    left: 0;
     width: 100%;
-    text-align: center;
-    background-color: rgba(0, 0, 0, 0.5);
-    color: white;
-    padding: 5px;
-    cursor: pointer;
+    height: 100%;
+    backface-visibility: hidden;
+    border-radius: 10px;
+    overflow: hidden;
 }
 
-.toggle:checked ~ .text {
-    max-height: none;
+.card-front {
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: gray solid 1px;
 }
 
-.toggle:checked ~ .toggle-label {
-    display: block;
+.card-back {
+    background-color: #333;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transform: rotateX(180deg);
+    text-align: center;
 }
 
-@media (max-width: 768px) {
-    .container {
-        padding: 10px;
-    }
-
-    .row {
-        flex-direction: column;
-    }
-
-    .logo img {
-        width: 60px;
-    }
-
-    .quadrado, .quadrado1, .retangular {
-        flex: 1 0 auto;
-        margin-bottom: 20px;
-    }
+.card-image {
+    width: 100%;
+    height: auto;
 }
 
+
 footer {
     background-color: #333;
     color: white;