Update style.css

roshaneleshaddai · Dec 3, 2023 · e8dc069 · e8dc069
1 parent 8e6615b
commit e8dc069
Showing 1 changed file with 64 additions and 37 deletions.
diff --git a/style.css b/style.css
@@ -1,30 +1,30 @@
-body{
+body {
     margin: 5px;
     margin-right: 5px;
     padding: 0;
-    /*background: linear-gradient(to right, #FFD700, #022c03);*/
-    font-family: 'Lucida Calligraphy';
-    font-weight:400;
+    /* background: linear-gradient(to right, #FFD700, #022c03); */
+    font-family: 'Lucida Calligraphy', sans-serif;
+    font-weight: 400;
     align-items: center;
-    color:#000;
+    color: #000;
     justify-content: center;
-    background-image: url("./Beige\ And\ Gold\ Floral\ Wedding\ Invitation\ \(1\).png");
-    background-size:contain;
-      background-position: center;
-      background-repeat: no-repeat;
+    background-image: url("image.jpeg");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
 }
+
 .title {
-
     font-family: 'Lucida Handwriting';
-    /*background-color:rgb(48, 5, 70);*/
     overflow: hidden;
     width: 99.2%;
     z-index: 1000;
-    color:#6B240C;
+    color: #6B240C;
     text-align: center;
     font-weight: 700;
-    font-size:x-large;
+    font-size: x-large;
 }
+
 .coming-soon-container {
     text-align: center;
 }
@@ -45,52 +45,52 @@ body{
     margin: 0 3px;
     padding: 10px;
     background-color: white;
-    /*border: 2px solid rgb(48, 5, 70);*/
     border-radius: 15px;
 }
-.reel{
+
+.reel {
     text-align: center;
 }
-.container{
+
+.container {
     text-align: center;
     cursor: pointer;
     width: 250px;
-    /*border: 2px solid rgb(48, 5, 70);
-    background-color:rgb(48, 5, 70); */
     border-radius: 12px;
     margin-bottom: 15px;
     height: 200px;
     transition: transform 0.7s ease-in-out;
 }
-.containers{
+
+.containers {
     font-family: 'Lucida Handwriting';
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
 }
-.container:hover{
-    cursor:none;
-    background-color:#9FBB73;
-    color:white; 
+
+.container:hover {
+    cursor: none;
+    background-color: #9FBB73;
+    color: white;
     transform: scale(1.05);
     box-shadow: 5px 5px 5px rgb(76, 73, 73);
 }
-sol{
-    color: rgb(48, 5, 70);;
+
+.sol {
+    color: rgb(48, 5, 70);
 }
-.bottom-section {
-   /* background-color:rgb(48, 5, 70);*/
 
+.bottom-section {
     padding: 40px 10px;
     text-align: center;
-    width:100%;
-    /*border: 1px solid rgb(85, 54, 113);*/
+    width: 100%;
     border-radius: 12px;
     justify-content: center;
     align-items: center;
-  }
+}
 
 .contact-details {
     display: flex;
@@ -102,22 +102,49 @@ sol{
 .contact-info {
     margin-left: 20px;
     text-align: center;
-    cursor:all-scroll;
 }
 
-  /* Style for the social icons */
 .social-icons {
     margin-top: 20px;
-  }
+}
 
 .social-icons a {
     display: inline-block;
     margin-right: 10px;
     text-decoration: none;
-  }
+}
+
 .social-icons a:hover {
-    background-color: #ddd; /* Change background color on hover */
-    color: black; /* Change text color on hover */
+    background-color: #ddd;
+    color: black;
     border: 2px solid white;
     border-radius: 12px;
-  }  
+}
+
+/* Add media query for screens smaller than 600px */
+@media only screen and (max-width: 600px) {
+    body {
+        font-size: 14px; /* Adjust font size for smaller screens */
+    }
+
+    .title {
+        font-size: large; /* Adjust font size for smaller screens */
+    }
+
+    .coming-soon-container {
+        /* Adjust container styles for smaller screens */
+    }
+
+    .countdown-box {
+        padding: 8px; /* Adjust padding for smaller screens */
+    }
+
+    .container {
+        width: 80%; /* Adjust container width for smaller screens */
+        font-size: small; /* Adjust font size for smaller screens */
+    }
+
+    .bottom-section {
+        padding: 20px 10px; /* Adjust padding for smaller screens */
+    }
+}