diff --git a/abt.css b/abt.css
index 626876b..f072c94 100644
--- a/abt.css
+++ b/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;
+}
+
diff --git a/contributers.js b/contributers.js
index 01c3dea..1feeb60 100644
--- a/contributers.js
+++ b/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) =>
+ `
@@ -51,12 +54,11 @@ document.addEventListener('DOMContentLoaded', () => {
Profile
`
- )
- maintainersContainer.innerHTML = userHTML.join("");
- })
- .catch(error => {
- console.error("Everything is wrong mann...")
- })
+ );
+ maintainersContainer.innerHTML = userHTML.join("");
+ });
})
-})
-
+ .catch((error) => {
+ console.error("Everything is wrong mann...");
+ });
+});
diff --git a/images/Screenshot (270).png b/images/Screenshot (270).png
new file mode 100644
index 0000000..44f045c
Binary files /dev/null and b/images/Screenshot (270).png differ
diff --git a/images/hero.png b/images/hero.png
new file mode 100644
index 0000000..f43ec90
Binary files /dev/null and b/images/hero.png differ
diff --git a/script.js b/script.js
index 8fec13e..263f5b2 100644
--- a/script.js
+++ b/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');
+ });
+});
\ No newline at end of file
+ 