update

biijuwa · Jan 29, 2025 · 757e57a · 757e57a
1 parent 6125e96
commit 757e57a
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 71 deletions.
diff --git a/index.html b/index.html
@@ -29,6 +29,11 @@ <h1 class="centered-text">Bijaya Limbu<span class="blinking-underscore">___</spa
             <div class="rectangle left">
                 <img src="images/icons/star_o_icon.png" alt="Star Icon" class="rectangle-icon">
                 <span class="rectangle-text">#starred</span>
+                    <div class="starred-links">
+                    <a href="pages/resume.php" target="_blank" class="social-link">Facebook</a>
+                    <a href="https://www.instagram.com/kiniima/" target="_blank" class="social-link">Instagram</a>
+                    <a href="https://www.youtube.com" target="_blank" class="social-link">Instagram</a>
+                </div>
             </div>
             <div class="rectangle right">
                 <img src="images/icons/circle_t_icon.png" alt="Circle Icon" class="rectangle-icon">
@@ -44,7 +49,7 @@ <h1 class="centered-text">Bijaya Limbu<span class="blinking-underscore">___</spa
                 <div class="social-links">
                     <a href="https://www.facebook.com/bijayapaksanwalimbu/" target="_blank" class="social-link">Facebook</a>
                     <a href="https://www.instagram.com/kiniima/" target="_blank" class="social-link">Instagram</a>
-                    <a href="https://www.youtube.com" target="_blank" class="social-link">Instagram</a>
+                    <a href="/page.html" target="_blank" class="social-link">Instagram</a>
                 </div>
             </div>
             <div class="rectangle right">

diff --git a/page.html b/page.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Responsive Centered Website</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+
+<body class="flex flex-col items-center h-screen">
+  <!-- Main Content (95% of Screen Height) -->
+  <div class="w-4/5 sm:w-3/5 lg:w-2/5 px-6 py-8 rounded-lg flex flex-col h-[95vh] gap-4">
+    <!-- Top Black Section (30% of Main Content Height) -->
+    <div class="h-[30%] rounded-md bg-black relative flex items-center justify-center">
+      <!-- Title in the Center -->
+      <h1 class="text-white text-3xl">Centered Title</h1>
+
+      <!-- Rectangle in the Top-Right Corner -->
+      <div class="w-16 h-16 bg-gray-700 absolute top-0 right-0 m-4"></div>
+    </div>
+
+    <!-- Bottom Section with 2x2 Grid (70% of Main Content Height) -->
+    <div class="grid grid-cols-2 gap-4 h-[70%]">
+      <!-- First Column -->
+      <div class="bg-blue-500 rounded-md transform transition-transform hover:scale-105"></div>
+
+      <!-- Green Section Divided into Two -->
+      <div class="rounded-md flex flex-col gap-6">
+        <div class="h-[50%] bg-green-600 rounded-md transform transition-transform hover:scale-105"></div>
+        <div class="h-[50%] bg-green-400 rounded-md transform transition-transform hover:scale-105"></div>
+      </div>
+
+      <!-- Second Column -->
+      <div class="bg-red-500 rounded-md h-[60%] transform transition-transform hover:scale-105"></div>
+      <div class="bg-yellow-500 rounded-md h-[60%] transform transition-transform hover:scale-105"></div>
+    </div>
+  </div>
+
+  <!-- Footer (Fixed at 5% of Screen Height) -->
+  <footer class="w-full h-[5vh] text-black flex items-center justify-center">
+    Footer Content
+  </footer>
+
+</body>
+</html>
diff --git a/pages/resume.php b/pages/resume.php
@@ -0,0 +1 @@
+1
diff --git a/style.css b/style.css
@@ -2,25 +2,25 @@
 body {
     width: 100vw;
     height: 100vh;
-    display: flex;
-    flex-direction: column;
     margin: 0;
     padding: 0;
-    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    /* Center the container horizontally */
+    background-color: #fefefe;
     font-family: "Crimson Text", serif;
     font-weight: 400;
     font-style: normal;
-    background-color: #fefefe;
-    position: relative;
+    overflow: hidden;
 }
 
-/* Container for the main content */
+/* Center container with 60% width */
 .container {
+    width: 60%;
+    /* 60% of the screen width */
     display: flex;
     flex-direction: column;
     gap: 20px;
-    padding: 0 10px;
-    flex: 1;
     justify-content: center;
     align-items: center;
 }
@@ -36,9 +36,7 @@ body {
     padding: 5px 15px;
     border-radius: 12px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    z-index: 100;
     font-size: 14px;
-    font-family: "Dosis", serif;
     font-weight: 500;
     color: #333;
 }
@@ -54,25 +52,21 @@ body {
 
 /* Footer */
 .copyright-text {
-    font-size: 20px;
     text-align: center;
     margin-top: auto;
     padding: 10px 0;
-    background-color: #fefefe;
-    color: #333;
     font-family: "Dosis", serif;
 }
 
 /* Main content */
 .centered-text {
     font-size: 28px;
-    font-family: "Playwrite ID Guides", serif;
     color: #333;
     text-align: center;
 }
 
 .blinking-underscore {
-    animation: blink 2s step-end infinite;
+    animation: blink 1.5s step-end infinite;
 }
 
 @keyframes blink {
@@ -86,7 +80,6 @@ body {
     display: flex;
     gap: 20px;
     justify-content: center;
-    flex-wrap: wrap;
 }
 
 .rectangle {
@@ -102,19 +95,9 @@ body {
     position: absolute;
     bottom: 10px;
     right: 15px;
-    font-family: "Crimson Text", serif;
     font-weight: 600;
     font-size: 20px;
     color: #ffffff;
-    padding: 5px;
-}
-
-.rectangle-icon {
-    position: absolute;
-    top: 10px;
-    right: 15px;
-    width: 16px;
-    height: 16px;
 }
 
 .rectangle:hover {
@@ -130,24 +113,22 @@ body {
     transform: translate(-50%, -50%);
     display: flex;
     flex-direction: column;
-    align-items: center;
     gap: 10px;
 }
 
 /* Individual social link */
 .social-link {
-    font-family: "Crimson Text", serif;
     font-size: 16px;
     font-weight: 600;
     color: #ffffff;
     text-decoration: none;
     transition: color 0.3s ease;
 }
 
-/* Hover effect for links */
 .social-link:hover {
     color: #5bcefa;
 }
+
 /* Background colors for specific rectangles */
 .row:nth-child(2) .left {
     background-color: #e8d8c9;
@@ -167,57 +148,21 @@ body {
 
 /* Responsive styles */
 @media (max-width: 600px) {
-    .rectangle {
-        width: 140px;
-        height: 100px;
-        border-radius: 5px;
-    }
-
-    .row {
-        flex-direction: column;
-        gap: 15px;
-        align-items: center;
-    }
-
     .container {
-        gap: 10px;
+        width: 90%;
+        /* Adjust for small screens */
     }
 
-    .centered-text {
-        font-size: 14px;
+    .rectangle {
+        width: 140px;
+        height: 100px;
     }
 
     .rectangle-text {
         font-size: 12px;
-        bottom: 5px;
-        right: 10px;
-    }
-
-    .rectangle-icon {
-        width: 14px;
-        height: 14px;
     }
 
     .copyright-text {
         font-size: 14px;
     }
-
-    /* Adjusting social-links for mobile */
-    .social-links {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 5px;
-        /* Reduced gap for mobile */
-    }
-
-    .social-link {
-        font-size: 12px;
-        /* Smaller font size for mobile */
-        text-align: center;
-    }
 }