made page more professional

Think-Pixel-Labs · Oct 31, 2024 · 2ac16b9 · 2ac16b9
1 parent 731301f
commit 2ac16b9
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 6 deletions.
diff --git a/index.css b/index.css
@@ -431,4 +431,106 @@ p {
     .modal-content h2 {
         font-size: 1.3em;
     }
+}
+
+/* Add these new styles and update some existing ones */
+
+/* Header styles */
+.header {
+    text-align: center;
+    margin-bottom: 32px;
+    width: 100%;
+}
+
+.profile-image {
+    width: 96px;
+    height: 96px;
+    border-radius: 50%;
+    margin-bottom: 16px;
+    border: 3px solid white;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.header h1 {
+    font-family: 'Playfair Display', serif;
+    font-size: 24px;
+    color: white;
+    margin-bottom: 8px;
+    font-weight: 700;
+}
+
+.tagline {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 16px;
+    margin-bottom: 0;
+}
+
+/* Update card styles */
+.card {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 12px;
+    padding: 16px 20px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-align: center;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+/* Icon styles */
+.card i {
+    font-size: 1.2em;
+    color: #c96064;
+    width: 24px;
+    text-align: center;
+}
+
+/* Update section title for cards */
+.card .section-title {
+    margin: 0;
+    flex-grow: 1;
+    text-align: left;
+}
+
+/* Remove the welcome section styles as it's no longer needed */
+.container.welcome-section {
+    display: none;
+}
+
+/* Update complete body spacing */
+.complete-body {
+    max-width: 680px;
+    margin: 0 auto;
+    padding: 40px 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+    .complete-body {
+        padding: 24px 16px;
+    }
+
+    .header {
+        margin-bottom: 24px;
+    }
+
+    .profile-image {
+        width: 80px;
+        height: 80px;
+    }
+
+    .header h1 {
+        font-size: 20px;
+    }
+
+    .tagline {
+        font-size: 14px;
+    }
 }
diff --git a/index.html b/index.html
@@ -10,31 +10,34 @@
         href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;500;600;700&display=swap"
         rel="stylesheet">
     <link rel="icon" type="image" href="https://assets.newrajshreesweets.com/icon.webp" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
 </head>
 
 <body>
     <div class="complete-body">
-        <div class="container welcome-section">
-            <div class="popup">
-                <h1>Welcome to New Rajshree Sweets</h1>
-                <p>Indulge in the rich flavors of authentic Indian sweets and savories.</p>
-                <p class="visit">Experience the taste of tradition with every bite!</p>
-            </div>
+        <div class="header">
+            <img src="https://assets.newrajshreesweets.com/icon.webp" alt="New Rajshree Sweets" class="profile-image">
+            <h1>New Rajshree Sweets</h1>
+            <p class="tagline">Experience the taste of tradition with every bite!</p>
         </div>
 
         <div class="card menu-section" onclick="toggleDialog('menuDialog')">
+            <i class="fas fa-book-open"></i>
             <h2 class="section-title">Our Delightful Menu</h2>
         </div>
 
         <div class="card order-section" onclick="toggleDialog('orderDialog')">
+            <i class="fas fa-shopping-bag"></i>
             <h2 class="section-title">Order Online</h2>
         </div>
 
         <div class="card social-links" onclick="toggleDialog('socialDialog')">
+            <i class="fas fa-share-nodes"></i>
             <h2 class="section-title">Stay Connected</h2>
         </div>
 
         <div class="card review-section" onclick="toggleDialog('reviewDialog')">
+            <i class="fas fa-star"></i>
             <h2 class="section-title">Share Your Sweet Experience</h2>
         </div>