index file completed

TheRealShreyash · Nov 28, 2024 · f3ebf57 · f3ebf57
1 parent 7ed271f
commit f3ebf57
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@
     <div class="navbar">
       <ul class="navul">
         <li id="homebutton">Home</li>
-        <li id="invitebutton">Invite</li>
+        <li id="commandsbutton">Commands</li>
       </ul>
       <div class="logo">
         <p class="logotext gloweffect">Zara</p>
@@ -26,8 +26,40 @@
     </div>
     <div class="body">
       <div class="zaralg">
-        <img src="https://cdn.discordapp.com/avatars/954266534715473960/55f85587e34ee8e1f7aaeb03f25c7631.png?size=4096" class="zaralgimg">
+        <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>
     <script src="script.js"></script>
   </body>

diff --git a/script.js b/script.js
@@ -1,11 +1,13 @@
 console.log("Welcome To Zara's Site");
 
 const policyButton = document.querySelector(".policybutton");
-const inviteButton = document.querySelector("#invitebutton");
+const commandButton = document.querySelector("#commandsbutton");
 const homeButton = document.querySelector("#homebutton");
+const inviteButton = document.querySelector(".invitebutton");
+const supportButton = document.querySelector(".supportbutton");
 
-inviteButton.addEventListener("click", function () {
-  window.location.href = "https://dsc.gg/zara-bot";
+commandButton.addEventListener("click", function () {
+  window.location.href = "/commands.html";
 });
 
 policyButton.addEventListener("click", function () {
@@ -15,3 +17,10 @@ policyButton.addEventListener("click", function () {
 homeButton.addEventListener("click", function () {
   window.location.href = "/index.html";
 });
+
+inviteButton.addEventListener("click", function () {
+  window.location.href = "https://dsc.gg/zara-bot";
+});
+supportButton.addEventListener("click", function () {
+  window.location.href = "https://discord.gg/q4fZeFw4XF";
+});
diff --git a/style.css b/style.css
@@ -9,6 +9,7 @@
   background-color: #2f2f2f;
   border: border-box;
   color: rgb(255, 255, 255);
+  user-select: none;
 }
 
 a {
@@ -36,7 +37,6 @@ a {
   flex-grow: 1;
   justify-content: flex-start;
   transition: 0.5s;
-  user-select: none;
 }
 
 .navul li {
@@ -65,7 +65,7 @@ a {
   color: white;
   font-weight: bolder;
   text-decoration: none;
-  user-select: none;
+
   cursor: pointer;
   position: absolute;
   /* padding-top: 8px; */
@@ -127,6 +127,91 @@ a {
   transform: scale(1.1); /* Optional: slightly grow the element on hover */
 }
 
+.buttons {
+  margin-top: 20px;
+  margin-right: 0.5%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.invitebutton {
+  background-color: #3b82f6;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 20px;
+  transition: 0.5s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  margin-right: 10px;
+}
+
+.discordsvg {
+  height: 20px;
+  width: 20px;
+  padding-right: 8px;
+  background-color: #3b82f6;
+  transition: 0.5s;
+}
+
+.invitebutton:hover .discordsvg {
+  background-color: #2f2f2f; /* Change the background color of the SVG on hover */
+}
+
+.discordsvg:hover {
+  background-color: #2f2f2f; /* Keep the SVG background color the same on hover */
+}
+
+.invitebutton:hover {
+  background-color: #2f2f2f;
+  border: 2px solid #2563eb;
+  color: #2563eb;
+}
+
+.supportbutton {
+  background-color: #16a34a;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 20px;
+  transition: 0.5s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+}
+
+.supportbutton:hover {
+  background-color: #2f2f2f;
+  border: 2px solid #16a34a;
+  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);