diff --git a/css/buttons.css b/css/buttons.css
index 1ad3324..51e2d28 100644
--- a/css/buttons.css
+++ b/css/buttons.css
@@ -164,4 +164,85 @@
 }
 #irwanphan-btn:hover::before {
   color: #13d522;
-}
\ No newline at end of file
+}
+/* Nasny Nazeer */
+
+#nasny-btn {
+  width: 150px;
+  height: 50px;
+  border-radius: 180px;
+  position: relative;
+  background: linear-gradient(
+    60deg,
+    #f79533,
+    #f37055,
+    #ef4e7b,
+    #a166ab,
+    #5073b8,
+    #1098ad,
+    #07b39b,
+    #6fba82
+  );
+  cursor: pointer;
+  line-height: 12px;
+}
+
+#nasny-btn:before {
+  content: "";
+  z-index: 1;
+  position: absolute;
+  display: block;
+  width: 80%;
+  height: 70%;
+  top: 15%;
+  left: 10%;
+  transition: 0.3s opacity ease-in-out;
+  filter: blur(15px);
+  opacity: 0;
+  background: linear-gradient(
+    60deg,
+    #f79533,
+    #f37055,
+    #ef4e7b,
+    #a166ab,
+    #5073b8,
+    #1098ad,
+    #07b39b,
+    #6fba82
+  );
+}
+
+#nasny-btn:hover:before {
+  opacity: 1;
+  transition: 0.3s opacity ease-in-out;
+  filter: blur(25px);
+  background: linear-gradient(
+    60deg,
+    #f79533,
+    #f37055,
+    #ef4e7b,
+    #a166ab,
+    #5073b8,
+    #1098ad,
+    #0ff5d6,
+    #6fba82
+  );
+}
+
+#nasny-btn:after {
+  content: "My button";
+  text-align: center;
+  line-height: 40px;
+  font-size: 18px;
+  color: rgba(235, 235, 235, 1);
+  font-weight: bold;
+  z-index: 5;
+  position: absolute;
+  display: block;
+  border-radius: 180px;
+  width: 92%;
+  height: 80%;
+  top: 10%;
+  left: 4%;
+  background-color: rgb(19, 20, 22);
+}
diff --git a/css/cardcolor.css b/css/cardcolor.css
index d0132ac..627a01b 100644
--- a/css/cardcolor.css
+++ b/css/cardcolor.css
@@ -33,6 +33,9 @@
 	-moz-animation: sway 30s ease infinite;
 	animation: sway 30s ease infinite;
 }
+.nasny {
+	background-color: #0ff5d6;
+  }
 @-webkit-keyframes sway {
   0% {background-position: 0% 50%;}
 	50% {background-position: 100% 50%;}
diff --git a/index.html b/index.html
index 758886a..e2b0376 100644
--- a/index.html
+++ b/index.html
@@ -222,6 +222,21 @@ <h1 class="emoji">😀</h1>
             </div>
           </div>
 
+          <div class="col-lg-4">
+            <div class="component">
+              <a href="pages/websites.html">
+                <div class="main-page">
+                  <div class="title">
+                    <strong>websites</strong>
+                  </div>
+                  <div class="content">
+                    <h1 class="emoji">😎</h1>
+                  </div>
+                </div>
+              </a>
+            </div>
+          </div>
+
 
         </div>
       </div>
diff --git a/pages/buttons.html b/pages/buttons.html
index bd0b682..cc99b49 100644
--- a/pages/buttons.html
+++ b/pages/buttons.html
@@ -204,7 +204,7 @@ <h2>
           </div>
         </div>
 
-      </div>
+</div>
       <!--Saksham Mahajan-->
       <div class="row">
         <div class="col-lg-6">
@@ -273,7 +273,41 @@ <h2>
           </div>
         </div>
       </div>
+<!-- Nasny Nazeer -->
+<div class="row">
+  <div class="col-lg-6">
+    <div class="component">
+      <div class="card magictime">
+        <div class="card-title nasny">
+          <strong>Button</strong>
+        </div>
+        <div class="card-content">
+          <div id="nasny-btn"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-lg-6">
+    <div class="component">
+      <div class="card magictime">
+
+        <div class="card-title nasny">
+          <strong>Creator</strong>
+        </div>
+        <div class="card-content">
+          <div class="creater-name">
+            <h2>
+              <b>Name:</b><span>
+                <a href="https://github.com/NasnyNazeer/">Nasny Nazeer</a>
+              </span>
+            </h2>
+          </div>
+        </div>
+      </div>
     </div>
+  </div>
+</div>
+</div>
   </section>
   <footer>
     <p>made with 💛 by, <br /><strong>CS CHAPTER AJCESB</strong></p>
diff --git a/pages/dropdown.html b/pages/dropdown.html
index 335c58b..52b65d4 100644
--- a/pages/dropdown.html
+++ b/pages/dropdown.html
@@ -44,7 +44,6 @@ <h3>Add your different dropdowns</h3>
       </div>
     </section>
     <section class="items">
-      <div class="container-fluid">
         <!--          your name     -->
         <!-- Ruben Abraham Shibu -->
         <!-- Add your html content that you have copied from contributors.md along with you component -->
@@ -94,7 +93,52 @@ <h2>
           </div>
         </div>
 
-
+        <div class="container-fluid">
+          <!--          Nasny Nazeer     -->
+          <div class="row">
+            <div class="col-lg-6">
+              <div class="component">
+                <div class="card magictime">
+                  <div class="card-title tonal">
+                    <strong>Dropdown</strong>
+                  </div>
+                  <div class="card-content">
+                    
+                    <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
+  <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
+  <dropdown>
+    <input id="toggle1" type="checkbox" checked>
+    <label for="toggle1" class="animate">Home<i class="fa fa-list float-right"></i></label>
+    <ul class="animate">
+      <li class="animate">Activities<i class="fa fa-code float-right"></i></li>
+      <li class="animate">Projects<i class="fa fa-arrows-alt float-right"></i></li>
+      <li class="animate">About us<i class="fa fa-cog float-right"></i></li>
+    </ul>
+  </dropdown>
+                </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-lg-6">
+              <div class="component">
+                <div class="card magictime">
+                  <div class="card-title tonal">
+                    <strong>Creator</strong>
+                  </div>
+                  <div class="card-content">
+                    <div class="creater-name">
+                      <h2>
+                        <b>Name:</b>
+                        <span>
+                          <a href="https://github.com/NasnyNazeer/">Nasny Nazeer</a>
+                        </span>
+                      </h2>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
       </div>
     </section>
     <footer>
diff --git a/pages/websites.html b/pages/websites.html
new file mode 100644
index 0000000..ba8584b
--- /dev/null
+++ b/pages/websites.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Css Components</title>
+    <link
+      rel="icon"
+      href="../favicon/android-chrome-192x192.png"
+      type="image"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
+      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="../css/style.css" />
+    <link rel="stylesheet" href="../css/scrollspy.css" />
+    <link rel="stylesheet" href="../css/cardcolor.css" />
+    <link rel="stylesheet" href="../css/assets/magic.css" />
+  </head>
+
+  <body>
+    <section class="header">
+      <div class="container-fluid section-for-header">
+        <div class="content">
+          <div class="content-header">
+            <h1>WEBSITES</h1>
+          </div>
+          <div class="content-body">
+            <h3>Add your different cool websites</h3>
+          </div>
+          <div class="content-footer">
+            <a href="https://github.com/rubenshibu/css-components" class="btn"
+              >⚡ Github
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="items">
+      <div class="container-fluid">
+      </div>
+    </section>
+    <footer>
+      <p>made with 💛 by, <br /><strong>CS CHAPTER AJCESB</strong></p>
+    </footer>
+    <script src="../js/index.js"></script>
+  </body>
+</html>
\ No newline at end of file