Initial commit

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 zzmarques
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,2 @@
+# card
+

css/media.css

@@ -0,0 +1,70 @@
+@media screen and (min-width: 992px) and (max-width: 1440px){
+
+    .cont {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+
+    }
+    main {
+        background: url('../images/bg-main-desktop.png');
+        background-repeat: no-repeat;
+        background-size: cover;
+        max-width: 400px;
+        height: 100vh;
+    }
+    #backCard {
+        top: 315px;
+        left: 260px;
+    }
+
+    #frontCard {
+        left: 188px;
+    }
+    form {
+        height: 100%;
+        width: 370px;
+        margin-right: 330px;
+    }
+    div#completo {
+        margin-right: 330px;
+    }
+}
+
+@media screen and (min-width: 412px) {
+    form label#cvc {
+        padding-right: 160px;
+     }
+}
+
+@media screen and (min-width: 768px) and (max-width: 992px){
+    .cont {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+    #backCard {
+        top: 70px;
+        left: 320px;
+    }
+    #frontCard {
+        top: 160px;
+        left: 150px;
+    }
+    form {
+        width: 480px;
+        margin-top: 130px;
+    }
+    form label#cvc {
+        padding-right: 240px;
+    }
+    form input[type="text"]#anoCard, input[type="text"]#mesCard {
+        width: 15%;
+
+    }
+    form input[type="text"]#cvcCard {
+        width: 59%;
+    }
+}

css/style.css

@@ -0,0 +1,245 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+main {
+    background: url('../images/bg-main-mobile.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+    width:100%;
+    height: 250px;
+    position: relative;
+    z-index: 0;
+}
+#backCard {
+    background: url('../images/bg-card-back.png');
+    background-repeat: no-repeat;
+    background-size: contain;
+    height: 200px;
+    width: 290px;
+    position: absolute;
+    top: 35px;
+    right: 13px;
+    z-index: 1;
+}
+
+#backCard .cvcCar {
+    position: relative;
+    left:230px;
+    top: 72px;
+    color: #dedddf;
+    font-family: "Space Grotesk", sans-serif;
+    font-size: 11px;
+    width: 0px;
+}
+
+#frontCard{
+    background: url('../images/bg-card-front.png');
+    background-repeat: no-repeat;
+    background-size: contain;
+    height: 200px;
+    width: 290px;
+    position: absolute;
+    top: 125px;
+    left: 15px;
+    z-index: 2;
+
+}
+
+#frontCard #cBig {
+    background-color: white;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    margin-right: 10px;
+}
+
+#frontCard #cMin {
+    border: 1px solid white;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+}
+
+#selo {
+    display: flex;
+    align-items: center;
+    margin: 0px 20px;
+    padding-top: 15px;
+}
+
+#cantainer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    margin: 0px 20px;
+    font-family: "Space Grotesk", sans-serif;
+    color: white;
+}
+
+
+#cantainer #numberCard {
+    font-size: 18px;
+    letter-spacing: 1.9px;
+    padding-top: 30px;
+    padding-bottom: 16px;
+}
+
+#cantainer #nameCard, #dateCard{
+    font-size: 10px;
+    text-transform: uppercase;
+    color: #dedddf;
+
+}
+
+#nameCard {
+    position: fixed;
+    margin-top: 95px;
+}
+
+#dateCard {
+    position: fixed;
+    margin-top: 95px;
+    margin-left: 225px;
+}
+
+form {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    margin-top: 68px;
+    margin-left: 26px;
+
+    font-family: "Space Grotesk", sans-serif;
+    font-size: 12px;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+}
+
+
+form input[type="text"] {
+    width: 93%;
+    height: 45px;
+    margin-top: 7px;
+    margin-left: 3px;
+    padding-left: 10px;
+    border-style: none;
+    border: 2px solid #dedddf;
+    border-radius: 10px;
+    letter-spacing: 2px;
+
+}
+
+input[type="text"].error {
+    border-color: #ff5252;
+
+}
+
+form label {
+    margin-top: 20px;
+    margin-bottom: 7px;
+}
+
+form input[type="text"]:focus {
+    outline: none;
+    border-color: #600594;
+    border-radius: 10px;
+}
+
+form input[type="text"]::placeholder {
+    font-size: 16px;
+    color: #dedddf;
+}
+
+form input[type="text"]#anoCard, input[type="text"]#mesCard {
+    width: 20%;
+
+}
+
+form input[type="text"]#cvcCard {
+    margin-left: 15px;
+    width: 48%;
+}
+
+form label#mes {
+    margin-right: 19px;
+}
+
+form label#cvc {
+   padding-right: 105px;
+}
+
+.divs {
+    width: 100%;
+    margin-top: 15px;
+}
+
+form button {
+    width: 93%;
+    padding: 15px;
+    color: white;
+    background: #21092f;
+    border-style: none;
+    border-radius: 10px;
+    margin-top: 20px;
+    font-family: "Space Grotesk", sans-serif;
+
+}
+
+div#completo {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 70px;
+    font-family: "Space Grotesk", sans-serif;
+}
+
+div#completo img, p{
+    margin-bottom: 30px;
+}
+
+div#completo h1 {
+    font-size: 2.5em;
+    font-weight: 500;
+    margin-bottom: 10px;
+    color: #21092f;
+    letter-spacing: 4px;
+}
+
+div#completo p {
+    color: #8e8593;
+}
+
+
+div#completo button {
+    width: 90%;
+    padding: 20px;
+    background: #21092f;
+    color: white;
+    border-style: none;
+    border-radius: 10px;
+    font-family: "Space Grotesk", sans-serif;
+    font-size: 1.1em;
+
+}
+
+span {
+    display: block;
+    color: #ff5252;
+    text-transform: none;
+    font-size: 11px;
+    margin-left:3px;
+}
+
+
+
+
+
+
+