Particles

fuunshi · Jan 11, 2024 · 0c72901 · 0c72901
1 parent a517e9a
commit 0c72901
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 39 deletions.
diff --git a/css/style.css b/css/style.css
@@ -1,17 +1,28 @@
 #particles-js {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1; /* Ensures the particles are positioned behind other elements */
-    background: linear-gradient(to right, #076585, #95e4d8);
-    background-size: cover;
-    background-position: 50% 50%;
-  }
-
-  #main {
-    position: relative; /* Ensure content remains in front of particles */
-    z-index: 1; /* Ensure the content stays above the particles */
-  }
-
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  /* Ensures the particles are positioned behind other elements */
+  background: linear-gradient(to right, #076585, #95e4d8);
+  background-size: cover;
+  background-position: 50% 50%;
+}
+
+#main {
+  position: relative;
+  /* Ensure content remains in front of particles */
+  z-index: 1;
+  /* Ensure the content stays above the particles */
+}
+
+/* style.css */
+.curved-container {
+  border-radius: 20px;
+  /* Adjust the radius as needed */
+  padding: 20px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  /* Optional: Add a subtle box shadow */
+}
diff --git a/home.html b/home.html
@@ -11,19 +11,19 @@
     <title>Pranil Shrestha</title>
 </head>
 
-<body>
+
+<body class="flex items-center justify-center min-h-screen bg-gray-900">
     <div id="particles-js"></div>
-    <section id="main" class="min-h-screen flex items-center justify-center flex-col md:text-6xl text-3xl">
+    <section id="main" class="w-400 h-200 rounded-lg p-4 shadow-md text-3xl md:text-6xl flex items-center justify-center flex-col">
         <h1>Pranil Shrestha</h1>
-        <div class="block">
-          <a href="https://www.github.com/fuunshi"><i class="fa-brands fa-github"></i></a>
-          <a href="https://www.instagram.com/linarp_stha"><i class="fa-brands fa-instagram"></i></a>
-          <a href="https://www.linkedin.com/in/pranil-shrestha"><i class="fa-brands fa-linkedin"></i></a>
+        <div class="mt-4">
+            <a href="https://www.github.com/fuunshi" class="text-blue-500"><i class="fab fa-github"></i></a>
+            <a href="https://www.instagram.com/linarp_stha" class="text-pink-500"><i class="fab fa-instagram"></i></a>
+            <a href="https://www.linkedin.com/in/pranil-shrestha" class="text-blue-700"><i class="fab fa-linkedin"></i></a>
         </div>
     </section>
     <script src="./library/particles.js"></script>
     <script src="./library/app.js"></script>
-
 </body>
 
 </html>
diff --git a/index.html b/index.html
@@ -2,25 +2,28 @@
 <html lang="en">
 
 <head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script src="https://cdn.tailwindcss.com"></script>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
-  <link rel="stylesheet" href="./css/new.css">
-  <title>Pranil Shrestha</title>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
+    <link rel="stylesheet" href="./css/style.css">
+    <title>Pranil Shrestha</title>
 </head>
 
-<body>
-    <section id="main" class="min-h-screen flex items-center justify-center flex-col md:text-6xl text-3xl">
-      <h1>Pranil Shrestha</h1>
-      <div class="block">
-        <a href="https://www.github.com/fuunshi"><i class="fa-brands fa-github"></i></a>
-        <a href="https://www.instagram.com/linarp_stha"><i class="fa-brands fa-instagram"></i></a>
-        <a href="https://www.linkedin.com/in/pranil-shrestha"><i class="fa-brands fa-linkedin"></i></a>
-      </div>
-    </section>
 
+<body class="flex items-center justify-center min-h-screen bg-gray-900">
+    <div id="particles-js"></div>
+    <section id="main" class="w-400 h-200 rounded-lg p-4 shadow-md text-3xl md:text-6xl flex items-center justify-center flex-col">
+        <h1>Pranil Shrestha</h1>
+        <div class="mt-4">
+            <a href="https://www.github.com/fuunshi" class="text-blue-500"><i class="fab fa-github"></i></a>
+            <a href="https://www.instagram.com/linarp_stha" class="text-pink-500"><i class="fab fa-instagram"></i></a>
+            <a href="https://www.linkedin.com/in/pranil-shrestha" class="text-blue-700"><i class="fab fa-linkedin"></i></a>
+        </div>
+    </section>
+    <script src="./library/particles.js"></script>
+    <script src="./library/app.js"></script>
 </body>
 
 </html>