1 files changed, 142 insertions, 0 deletions
diff --git a/css/valentine.css b/css/valentine.css
new file mode 100644
index 0000000..5a3995b
--- /dev/null
+++ b/css/valentine.css
@@ -0,0 +1,142 @@
+body, html {
+    height: 100%;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+body {
+    width: 100%;
+    flex-direction: column;
+    padding: 0;
+    overflow: hidden;
+    position: relative;
+    background-color: #f9f9f9;
+    background-image: url(https://marketplace.canva.com/EAEUf1ZOyzE/1/0/1600w/canva-pink-and-red-powerful-femme-personal-pattern-valentine%27s-day-desktop-wallpaper-vyLmDobNXOc.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.font-ubuntu {
+    font-family: "Ubuntu Sans", serif;
+    font-optical-sizing: auto;
+    font-weight: bold;
+    font-style: normal;
+    font-variation-settings: "wdth" 100;
+}
+
+.font-montserrat {
+    font-family: "Montserrat", serif;
+    font-optical-sizing: auto;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.fade-in {
+    opacity: 1;
+    animation-name: fadeInOpacity;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+    animation-duration: 0.5s;
+  }
+  
+  @keyframes fadeInOpacity {
+    0% {
+      opacity: 0;
+    }
+  
+    100% {
+      opacity: 1;
+    }
+  }
+
+.button-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.content-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.text-container {
+    margin-bottom: 2rem;
+}
+
+h1 {
+    font-size: 5rem !important;
+    color: white !important;
+    text-shadow: 0px 0px 9px black !important;
+}
+
+.button-wrapper {
+    display: flex;
+    gap: 40px;
+}
+
+button {
+    outline: 1px solid inherit;
+}
+
+.btn-success {
+    position: static;
+}
+
+#moveBtn {
+    position: relative;
+    transition: transform 0.1s ease-in-out;
+    z-index: 1;
+}
+
+img {
+    height: 500px !important;
+    width: 500px !important;
+    object-fit: cover;
+    border-radius: 5%;
+}
+
+
+@media (max-width: 768px) {
+    .content-container {
+        width: 90%;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .text-container {
+        margin-bottom: 1rem;
+    }
+
+    h1 {
+        font-size: 3rem !important;
+    }
+
+    .button-wrapper {
+        flex-direction: row;
+        gap: 20px;
+    }
+
+    button {
+        width: auto;
+    }
+
+    img {
+        height: 300px !important;
+        width: 300px !important;    
+    }
+}