editing layout

TheRealShreyash · Dec 1, 2024 · 05e3df0 · 05e3df0
1 parent f3ebf57
commit 05e3df0
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 68 deletions.
diff --git a/index.html b/index.html
@@ -12,55 +12,48 @@
     <title>Zara</title>
   </head>
   <body>
-    <div class="navbar">
-      <ul class="navul">
-        <li id="homebutton">Home</li>
-        <li id="commandsbutton">Commands</li>
-      </ul>
-      <div class="logo">
-        <p class="logotext gloweffect">Zara</p>
+    <section class="intro">
+      <div class="navbar">
+        <ul class="navul">
+          <li id="homebutton">Home</li>
+          <li id="commandsbutton">Commands</li>
+        </ul>
+        <div class="logo">
+          <p class="logotext gloweffect">Zara</p>
+        </div>
+        <div class="pvpolicy">
+          <button class="policybutton" type="button">Privacy Policy</button>
+        </div>
       </div>
-      <div class="pvpolicy">
-        <button class="policybutton" type="button">Privacy Policy</button>
+      <div class="body">
+        <div class="zaralg">
+          <img
+            src="https://cdn.discordapp.com/avatars/954266534715473960/55f85587e34ee8e1f7aaeb03f25c7631.png?size=4096"
+            class="zaralgimg"
+          />
+        </div>
+        <div class="buttons">
+          <button type="button" class="invitebutton">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 127.14 96.36"
+              class="discordsvg"
+            >
+              <path
+                class="cls-1"
+                d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
+              /></svg
+            >Invite
+          </button>
+          <button type="button" class="supportbutton">Support</button>
+        </div>
       </div>
-    </div>
-    <div class="body">
-      <div class="zaralg">
-        <img
-          src="https://cdn.discordapp.com/avatars/954266534715473960/55f85587e34ee8e1f7aaeb03f25c7631.png?size=4096"
-          class="zaralgimg"
-        />
-      </div>
-      <div class="buttons">
-        <button type="button" class="invitebutton">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 127.14 96.36"
-            class="discordsvg"
-          >
-            <path
-              class="cls-1"
-              d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
-            /></svg
-          >Invite
-        </button>
-        <button type="button" class="supportbutton">Support</button>
-      </div>
-      <div class="description">
-        <p class="descpara">
-          A multipurpose Discord bot, your all-in-one solution for enhancing
-          your Discord server! Our bot is designed to serve a wide range of
-          functions, making your server more engaging, interactive, and
-          organized. Whether you need moderation tools to keep your community
-          safe and friendly, entertainment features to keep everyone
-          entertained, or utility commands to streamline server management, our
-          bot has you covered.
-        </p>
-      </div>
-    </div>
-    <div class="footer">
-      <p>Made with ❤️ TheRealShreyash</p>
-    </div>
+    </section>
+    <section class="features">
+      <div class="utility"></div>
+      <div class="image"></div>
+      <div class="moderation"></div>
+    </section>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/style.css b/style.css
@@ -10,6 +10,7 @@
   border: border-box;
   color: rgb(255, 255, 255);
   user-select: none;
+  scroll-behavior: smooth;
 }
 
 a {
@@ -18,11 +19,15 @@ a {
 
 .navbar {
   display: flex;
-  /* justify-content: center; */
   justify-content: space-between;
   align-items: center;
   padding: 0 20px;
-  position: relative;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+  height: 60px;
 }
 
 .navul {
@@ -93,7 +98,7 @@ a {
 
 .policybutton {
   background-color: #fcae87;
-  /* font-weight: bold; */
+  margin-right: 60px;
   cursor: pointer;
   border-radius: 8px;
   font-size: 20px;
@@ -111,15 +116,15 @@ a {
   display: flex;
   align-items: center;
   margin-left: 42.9%;
-  margin-top: 10%;
+  margin-top: 15%;
 }
 
 .zaralgimg {
   height: 200px;
   width: 200px;
   border-radius: 20px;
   box-shadow: 0 1px 20px black;
-  animation: bounce 10s infinite;
+  animation: bounce 8s infinite;
   transition: 0.5s;
 }
 
@@ -196,22 +201,6 @@ a {
   color: #16a34a;
 }
 
-.description {
-  width: 60%;
-  margin-top: 20px;
-  margin-left: 23%;
-}
-
-.footer {
-  margin-bottom: 0;
-  margin-top: 8.1%;
-  margin-left: 41%;
-}
-
-.footer p {
-  color: #fcae87;
-}
-
 @keyframes bounce {
   0% {
     transform: translateY(0);