Merge branch 'main' into abouthtml

about.html

@@ -59,12 +59,12 @@
 
   <div class="first-para">
     <div class="image">
-      <img class="mainpic" src="images/mainicon.png" alt=""  />
+      <img class="mainpic" src="images/hero.png" alt=""  />
     </div>
     <div 
     data-aos="fade-right"
     data-aos-duration="700">
-    <p>My Fav Superhero</p>
+    <h3 style="margin-bottom: 5px; color: #F6AA1C">My Fav Superhero</h3>
     <div>Welcome to the mind-blowing universe of superheroes!<br/>
        My Fav Superhero caters to enthusiasts of all levels, <br/>
        sparking awe and wonder with its addictive user-friendly <br/>
@@ -91,7 +91,9 @@
        With just a click, you’ll be amazed by exhilarating images of heroes<br/> 
        waiting to be discovered!</div>  
   </div>
-
+  <section id="section08" class="demo">
+    <a href="#section09"><span></span>Scroll</a>
+  </section>
 <div class="heading">
   <p>Curious Cases</p>
 </div>
@@ -127,8 +129,9 @@ <h2>Is it free to use?</h2><br>
   </div>
 
 
-
-
+  <section id="section09" class="demo">
+
+  </section>
 
     <!--hacktoberfest part idea-->
     <div class="head">

abt.css

@@ -118,11 +118,11 @@ nav.stroke ul li a:hover:after {
   color: #F6AA1C;
   font-size: 2.5rem;
   padding-left: 5rem;
-
-
-
 }
-
+.mainpic{
+  padding: 2rem 2rem;
+  border-radius: 3.5rem;
+}
 .first-para>div{
   color: white;
   font-size: 1.5rem;
@@ -258,8 +258,6 @@ nav.stroke ul li a:hover:after {
     width:21.4rem;
     margin-top: 1rem;
   }
-
-
   .l-container{
     display: flex;
     flex-direction: column;
@@ -284,4 +282,106 @@ nav.stroke ul li a:hover:after {
   }
 }
 
+section {
+  position: relative;
+  width: 100%;
+  height: 5%;
+}
+section::after {
+  position: absolute;
+  bottom: 0;
+  left: 90%;
+  content: '';
+  width: 100%;
+  height: 80%;
+  background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%);
+  background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%);
+}
+.demo a {
+  position: absolute;
+  bottom: 20px;
+  left: 90%;
+  z-index: 2;
+  display: inline-block;
+  -webkit-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+  color: #fff;
+  font : normal 400 20px/1 'Josefin Sans', sans-serif;
+  letter-spacing: .1em;
+  text-decoration: none;
+  transition: opacity .3s;
+}
+.demo a:hover {
+  opacity: .5;
+}
+#section08 a {
+  padding-top: 60px;
+}
+#section08 a span {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 30px;
+  height: 50px;
+  margin-left: -15px;
+  border: 2px solid #fff;
+  border-radius: 50px;
+  box-sizing: border-box;
+}
+#section08 a span::before {
+  position: absolute;
+  top: 10px;
+  left: 50%;
+  content: '';
+  width: 6px;
+  height: 6px;
+  margin-left: -3px;
+  background-color: #fff;
+  border-radius: 100%;
+  box-sizing: border-box;
+}
+
+
+
+#section09 a {
+  padding-top: 80px;
+}
+#section09 a span {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 30px;
+  height: 50px;
+  margin-left: -15px;
+  border: 2px solid #fff;
+  border-radius: 50px;
+  box-sizing: border-box;
+}
+#section09 a span::before {
+  position: absolute;
+  top: 10px;
+  left: 50%;
+  content: '';
+  width: 6px;
+  height: 6px;
+  margin-left: -3px;
+  background-color: #fff;
+  border-radius: 100%;
+  box-sizing: border-box;
+}
+#section09 a span::after {
+  position: absolute;
+  bottom: -18px;
+  left: 50%;
+  width: 18px;
+  height: 18px;
+  content: '';
+  margin-left: -9px;
+  border-left: 1px solid #fff;
+  border-bottom: 1px solid #fff;
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  box-sizing: border-box;
+}
+
 

contributers.js

@@ -1,48 +1,51 @@
-const container = document.querySelector('.contributors');
-const maintainersContainer = document.querySelector('.maintainers');
+const container = document.querySelector(".contributors");
+const maintainersContainer = document.querySelector(".maintainers");
 
-document.addEventListener('DOMContentLoaded', () => {
-  fetch('contributer.json')
-    .then(res => {
-      return res.json()
+document.addEventListener("DOMContentLoaded", () => {
+  fetch("contributer.json")
+    .then((res) => {
+      return res.json();
     })
     .then((data) => {
-        console.log(data);
-      data.forEach(user => {
-        let contributorElement = document.createElement('div')
-        let avatar = document.createElement('img')
-        let userLink = document.createElement('a')
-        let userName = document.createElement('h3')
-        let userContributions = document.createElement('p')
+      // console.log(data);
+      data.forEach((user) => {
+        let contributorElement = document.createElement("div");
+        let avatar = document.createElement("img");
+        let userLink = document.createElement("a");
+        let userName = document.createElement("h3");
+        let userContributions = document.createElement("p");
 
         // contributorElement
-        contributorElement.classList.add('contributor')
-        avatar.classList.add('avatar')
-
+        contributorElement.classList.add("contributor");
+        avatar.classList.add("avatar");
 
         avatar.src = user.avatar_url;
         avatar.alt = `${user.login}'s avatar`;
         userName.textContent = user.login;
         userLink.href = user.html_url;
-        userLink.target = '_blank';
-        userLink.textContent = 'Profile'
+        userLink.target = "_blank";
+        userLink.textContent = "Profile";
         userContributions.textContent = `Contributions: ${user.contributions}`;
 
-        contributorElement.appendChild(avatar)
-        contributorElement.appendChild(userName)
-        contributorElement.appendChild(userContributions)
-        contributorElement.appendChild(userLink)
+        contributorElement.appendChild(avatar);
+        contributorElement.appendChild(userName);
+        contributorElement.appendChild(userContributions);
+        contributorElement.appendChild(userLink);
 
         container.appendChild(contributorElement);
 
-        const filterUsers = data.filter(user => user.login === 'Prajwal0225' || user.login === 'madhurafulkar' )
+        const filterUsers = data.filter(
+          (user) =>
+            user.login === "Prajwal0225" || user.login === "madhurafulkar"
+        );
 
-        if(filterUsers.length === 0){
-            return "No maintainers in this project"
+        if (filterUsers.length === 0) {
+          return "No maintainers in this project";
         }
 
-        const userHTML = filterUsers.map(user => 
-          `
+        const userHTML = filterUsers.map(
+          (user) =>
+            `
           
           <div class="user">
             <img src="${user.avatar_url}" class="avatar" alt="${user.login}"/>
@@ -51,12 +54,11 @@ document.addEventListener('DOMContentLoaded', () => {
             <a href="${user.html_url}" target="_blank">Profile</a>
          </div>
          `
-            )
-            maintainersContainer.innerHTML = userHTML.join("");
-      })
-      .catch(error => {
-        console.error("Everything is wrong mann...")
-      })
+        );
+        maintainersContainer.innerHTML = userHTML.join("");
+      });
     })
-})
-
+    .catch((error) => {
+      console.error("Everything is wrong mann...");
+    });
+});

script.js

@@ -166,3 +166,9 @@ searchInput.addEventListener("keyup", (e) => {
     });
   }); // end DOM ready
 })(jQuery); // end jQuery
+$(function() {
+  $('a[href*=#]').on('click', function(e) {
+    e.preventDefault();
+    $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
+  });
+});