s

17helena · Nov 22, 2024 · 1866c50 · 1866c50
1 parent 9356ad8
commit 1866c50
Showing 1 changed file with 96 additions and 35 deletions.
diff --git a/style.css b/style.css
@@ -1,28 +1,40 @@
-:root {
-    --text-color: #DBE4EF;
-    --card-front-color: #6314ca;
-    --card-back-color: #db1599;
+root {
+    --text-color: hsl(0, 0%, 100%);
+    --card-front-color: hwb(253 4% 11%);
+    --card-back-color: hsl(101, 82%, 52%);
     }
-    body {
-    background:url('img/bg-desktop.webp');
+
+body {
+    background:hsla(229, 100%, 47%, 0.096);
     font-family: Bai Jamjuree;
-    }
-    #container {
+}
+
+
+#container {
     display:flex ;
-    }
-    .cartao {
-    margin: 1rem 1rem;
-    background-color: #e91b93;
-    height: 20rem;
+    flex-wrap: wrap;/* quebra de linha automática*/
+    justify-content: space-between; /justificar o conteúdo/
+    padding: 4rem; /centralizar o conteúdo do cartão/
+    gap: 3rem;
+}
+
+.cartao {
+    margin: 2rem 2rem;
+    background-color: var(--card-back-color);
+    height: 18rem;
     flex-grow: 1;
     flex-basis: calc(33% - 6rem);
-    }
-    .cartao__conteudo {
+}
+
+.cartao__conteudo {
     background-color: var(--card-front-color);
     text-align: center;
     height: 100%;
-    }
-    .cartao__conteudo h3 {
+    transform-style: preserve-3d;
+    transition: transform 300ms ease-in-out;
+}
+
+.cartao__conteudo h3 {
     color: var(--text-color);
     border: 1px solid var(--text-color);
     text-align: left;
@@ -31,27 +43,76 @@
     margin: 0.6rem;
     border-radius: 0.6rem;
     font-size: 1vw;
+    backface-visibility: hidden;
     }
-    .cartao__conteudo__pergunta p {
+
+.cartao_conteudo_pergunta p {
     color: var(--text-color);
     font-weight: 500;
-    padding-top: 4rem;
-    }
-    .cartao__conteudo__resposta p {
+    padding-top: 5rem;
+}
+
+.cartao_conteudo_resposta p {
     color: var(--card-back-color);
     font-weight: 700;
-    padding: 4rem;
+    padding-top: 5rem;
+}
+
+.cartao.active .cartao__conteudo {
+    transform: rotateY(180deg);
+}
+
+.cartao_conteudo_pergunta,
+.cartao_conteudo_resposta {
+    backface-visibility: hidden;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.cartao_conteudo_resposta {
+    transform: rotateY(180deg);
+    border: 4px solid var(--card-back-color);
+}
+
+.cartao__conteudo p {
+    margin-top: 1rem;
+    padding: 2rem;
+    margin-top: 5rem;
+    font-size: 1.4vw;
+}
+
+footer {
+    background-color: black;
+    color: white;
+    bottom:0;
+    position:fixed;
+    width:100%;
+    height:2rem;
+}
+
+footer p{
+    text-align: center;
+    font-size: 0.6rem;
+    margin-top: 0,5rem;
+}
+
+@media (max-width: 560px) {
+
+    body {
+        background: url('img/bd-mobile.webp');
+    }
+
+    .cartao {
+        flex: 1 0 calc(100% - 1rem);
+    }
+
+    .cartao__conteudo h3 {
+        font-size: 3vw;
+    }
+
+    .cartao__conteudo p {
+        font-size: 3.8vw;
     }
-    footer {
-        background-color: rgb(201, 7, 120);
-        color: rgb(255, 255, 255);
-        bottom:0;
-        position:fixed;
-        width:100%;
-        height:2rem;
-        }
-        footer p{
-        text-align: center;
-        font-size: 0.6rem;
-        margin-top: 0,5rem;
-        }
+}