Skip to content

Arrow functionality #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Nahomkdk14 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Arrow functionality #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions meetUs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
body{
margin: 0px;
}

*{
transition: all .2s;
}
:root {
--gray: rgb(158, 158, 158);
--black: rgb(10, 10, 10);
Expand Down Expand Up @@ -44,7 +46,7 @@ h5 {
}
hr {
width: 100%;
height: 2px;
height: 1px;
background-color: var(--black);
border: 0;
margin: 20px 0px ;
Expand Down Expand Up @@ -117,7 +119,7 @@ h3 {
font-weight: normal;
margin: 10px 0px 0px;
}
.card-team {
.card-team{
display: flex;
flex-direction: column;
justify-content: space-between;
Expand All @@ -126,6 +128,7 @@ h3 {
height: 460px;
background-color: rgb(0, 72, 75);
}

.card-icon-1 {
display: flex;
gap: 25px;
Expand Down Expand Up @@ -380,4 +383,7 @@ footer{
.section {
margin: 130px 0 0;
}
}
.arrows>*{
cursor: pointer;
}
188 changes: 184 additions & 4 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,188 @@
var i = 0;
let cards = [
[
{
name: "Yonathan Abera",
position: "Founder and Developer",
background:
"../assets/1000_F_338308078_iiXC8b9lxpxmjGKaKu4dtXHSIVfzE8qm.jpg",
},
{
name: "Joshua Busia",
position: "Founder and Developer",
background:
"../assets/1000_F_338308078_iiXC8b9lxpxmjGKaKu4dtXHSIVfzE8qm.jpg",
},
{
name: "Menelik Yared",
position: "Developer",
background:
"../assets/1000_F_338308078_iiXC8b9lxpxmjGKaKu4dtXHSIVfzE8qm.jpg",
},
{
name: "Euncahn Hwang",
position: " Developer",
background:
"../assets/1000_F_338308078_iiXC8b9lxpxmjGKaKu4dtXHSIVfzE8qm.jpg",
},
{
name: "Rodi W/yesus",
position: " Developer",
background:
"../assets/1000_F_338308078_iiXC8b9lxpxmjGKaKu4dtXHSIVfzE8qm.jpg",
},
],
[
{
name: "Serukyas Tewahedo",
position: "Developer",
background:
"../assets/1000_F_338308078_iiXC8b9lxpxmjGKaKu4dtXHSIVfzE8qm.jpg",
},
{
name: "Fikir Yohannes",
position: "Designer",
background:
"../assets/1000_F_338308078_iiXC8b9lxpxmjGKaKu4dtXHSIVfzE8qm.jpg",
},
{
name: "Nahom Ketsela",
position: "Developer",
background:
"../assets/1000_F_338308078_iiXC8b9lxpxmjGKaKu4dtXHSIVfzE8qm.jpg",
},
{
name: "Beka Fekadu",
position: "Developer",
background:
"../assets/1000_F_338308078_iiXC8b9lxpxmjGKaKu4dtXHSIVfzE8qm.jpg",
},
{
name: "Arsema Essayas",
position: "Developer",
background:
"../assets/1000_F_338308078_iiXC8b9lxpxmjGKaKu4dtXHSIVfzE8qm.jpg",
},
// {
// "name": "Euncahn Hwang",
// "position": " Developer",
// "background": "../assets/1000_F_338308078_iiXC8b9lxpxmjGKaKu4dtXHSIVfzE8qm.jpg"
// },
// {
// "name": "Rodi W/yesus",
// "position": " Developer",
// "background": "../assets/1000_F_338308078_iiXC8b9lxpxmjGKaKu4dtXHSIVfzE8qm.jpg"
// }
],
[
{
name: "Yonathan Abera",
position: "Founder and Developer",
background:
"../assets/1000_F_338308078_iiXC8b9lxpxmjGKaKu4dtXHSIVfzE8qm.jpg",
},
{
name: "Joshua Busia",
position: "Founder and Developer",
background:
"../assets/1000_F_338308078_iiXC8b9lxpxmjGKaKu4dtXHSIVfzE8qm.jpg",
},
{
name: "Menelik Yared",
position: "Developer",
background:
"../assets/1000_F_338308078_iiXC8b9lxpxmjGKaKu4dtXHSIVfzE8qm.jpg",
},
{
name: "Euncahn Hwang",
position: " Developer",
background:
"../assets/1000_F_338308078_iiXC8b9lxpxmjGKaKu4dtXHSIVfzE8qm.jpg",
},
{
name: "Rodi W/yesus",
position: " Developer",
background:
"../assets/1000_F_338308078_iiXC8b9lxpxmjGKaKu4dtXHSIVfzE8qm.jpg",
},
],
];
let schools = ["ICS", "KMU-SSC","Test"];
change(i);
document.getElementById("card-sec").addEventListener("click", function (event) {
var target = event.target;
if (target.matches(".fa-solid.fa-less-than")) {
leftclicked();
} else if (target.matches(".fa-solid.fa-greater-than")) {
rightclicked();
}
});
function change(x) {
for (let index = 0; index < cards[x].length; index++) {
document.getElementById("card-sec").innerHTML =
document.getElementById("card-sec").innerHTML +
`<div class="card">
<div class="img"><img src= ${cards[x][index].background} alt=""></div>
<div class="card-description">
<h5 class="card-name">${cards[x][index].name}</h5>
<span>
<h3>${cards[x][index].position}</h3>
</span>
</div>
</div>`;
}
}
function redirect(y) {
document.getElementById("card-sec").innerHTML = `<div class="card-team">
<div class="card-icon-1">
<a href=""><i class="fa-brands fa-telegram icon"></i></a>
<a href=""><i class="fa-brands fa-instagram icon"></i></a>
<a href=""><i class="fa-brands fa-github icon"></i></a>
</div>
<div>
<p class="card-team-description">Click on the arrow below to see the next school team</p>
</div>
<div>
<div>
<h5 class="card-team-name">${schools[y]}</h5>
</div>
<div class="arrows">
<i class="fa-solid fa-less-than" id="left"></i>
<i class="fa-solid fa-greater-than" id="right"></i>
</div>
</div>
</div>`;
change(y)
}
function rightclicked() {
// console.log("hey");
if (i < cards.length - 1) {
i = i + 1;
redirect(i)
}
else {
i = 0;
redirect(i)
}
}
function leftclicked() {
if (i > 0) {
i = i - 1;
redirect(i)
}
else {
i= cards.length-1
// alert()
redirect(i)
}
}

// responsive siebar
let sidebar = document.querySelector(".sideBar")
let sidebar = document.querySelector(".sideBar");
function showSideBar() {
sidebar.style.display = "flex"
sidebar.style.display = "flex";
}
function hideSideBar() {
sidebar.style.display = "none"
}
sidebar.style.display = "none";
}
// let cards=
67 changes: 36 additions & 31 deletions templates/meetus.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

<!DOCTYPE html>
<html lang="en">
<head>
Expand Down Expand Up @@ -55,14 +56,13 @@
<div class="navLinksContainer">
<div class="hamburgerContainer">
<!-- <button class="hamburger">
<svg xmlns="http://www.w3.org/2000/svg" height="25" width="30" viewBox="0 0 496 512"><path fill="#dcdcdc" d="M248 8C111 8 0 119 0 256S111 504 248 504 496 393 496 256 385 8 248 8zM363 176.7c-3.7 39.2-19.9 134.4-28.1 178.3-3.5 18.6-10.3 24.8-16.9 25.4-14.4 1.3-25.3-9.5-39.3-18.7-21.8-14.3-34.2-23.2-55.3-37.2-24.5-16.1-8.6-25 5.3-39.5 3.7-3.8 67.1-61.5 68.3-66.7 .2-.7 .3-3.1-1.2-4.4s-3.6-.8-5.1-.5q-3.3 .7-104.6 69.1-14.8 10.2-26.9 9.9c-8.9-.2-25.9-5-38.6-9.1-15.5-5-27.9-7.7-26.8-16.3q.8-6.7 18.5-13.7 108.4-47.2 144.6-62.3c68.9-28.6 83.2-33.6 92.5-33.8 2.1 0 6.6 .5 9.6 2.9a10.5 10.5 0 0 1 3.5 6.7A43.8 43.8 0 0 1 363 176.7z"/></svg>
</button> -->

<svg xmlns="http://www.w3.org/2000/svg" height="25" width="30" viewBox="0 0 496 512"><path fill="#dcdcdc" d="M248 8C111 8 0 119 0 256S111 504 248 504 496 393 496 256 385 8 248 8zM363 176.7c-3.7 39.2-19.9 134.4-28.1 178.3-3.5 18.6-10.3 24.8-16.9 25.4-14.4 1.3-25.3-9.5-39.3-18.7-21.8-14.3-34.2-23.2-55.3-37.2-24.5-16.1-8.6-25 5.3-39.5 3.7-3.8 67.1-61.5 68.3-66.7 .2-.7 .3-3.1-1.2-4.4s-3.6-.8-5.1-.5q-3.3 .7-104.6 69.1-14.8 10.2-26.9 9.9c-8.9-.2-25.9-5-38.6-9.1-15.5-5-27.9-7.7-26.8-16.3q.8-6.7 18.5-13.7 108.4-47.2 144.6-62.3c68.9-28.6 83.2-33.6 92.5-33.8 2.1 0 6.6 .5 9.6 2.9a10.5 10.5 0 0 1 3.5 6.7A43.8 43.8 0 0 1 363 176.7z"/>--></svg>
</button>
</div>
<ul>
<li class="close" onclick=hideSideBar()>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" height="25" width="25" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#000000" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="25" width="25" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#000000" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/>--></svg>
</a>
</li>
<li class="navLink">
Expand All @@ -83,7 +83,9 @@
</nav>
<section class="section">
<div class="container-1">
<h5>Meet the team</h5>
<h5>Meet </h5>
<h5> the </h5>
<h5> team</h5>
</div>
<div>
<p class="title-1">BY STUDENTS,<br>FOR STUDENTS ALWAYS</p>
Expand All @@ -93,12 +95,31 @@ <h5>Meet the team</h5>
<div class="description-1">BY STUDENTS, FOR STUDENTS ALAWAYS, WITH THIS MOTO WE'VE BEEN OPERETING SINCE
2023.</div>
<div class="description-2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi ad nam impedit
ipsum? Ipsam, officiis sapiente ipsum aperiam qui alias?<br><span>Lorem ipsum dolor sit amet consectetur
ipsum? Ipsam, officiis sapiente ipsum aperiam qui alias?<br><br>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Temporibus aperiam itaque nemo at ipsum, quas facere repellendus dicta enim
officiis!</span>
officiis!
</div>
</div>
<div class="card-section">
<div class="card-section" id="card-sec">

<!-- <div class="card">
<div class="img"><img src="../assets/1000_F_338308078_iiXC8b9lxpxmjGKaKu4dtXHSIVfzE8qm.jpg" alt=""></div>
<div class="card-description">
<h5 class="card-name">Yonathan Abera</h5>
<span>
<h3>Founder and Developer</h3>
</span>
</div>
</div> -->
<!-- <div class="card">
<div class="img"><img src="../assets/1000_F_338308078_iiXC8b9lxpxmjGKaKu4dtXHSIVfzE8qm.jpg" alt=""></div>
<div class="card-description">
<h5 class="card-name">Joshua Busia</h5>
<span>
<h3>Developer</h3>
</span>
</div>
</div> -->
<div class="card-team">
<div class="card-icon-1">
<a href=""><i class="fa-brands fa-telegram icon"></i></a>
Expand All @@ -110,33 +131,15 @@ <h5>Meet the team</h5>
</div>
<div>
<div>
<h5 class="card-team-name">ICS Team</h5>
<h5 class="card-team-name" id="card-team">ICS</h5>
</div>
<div class="arrows">
<i class="fa-solid fa-less-than"></i>
<i class="fa-solid fa-greater-than"></i>
<i class="fa-solid fa-less-than" id="left" ></i>
<i class="fa-solid fa-greater-than" id="right" ></i>
</div>
</div>
</div>
<div class="card">
<div class="img"><img src="../assets/1000_F_338308078_iiXC8b9lxpxmjGKaKu4dtXHSIVfzE8qm.jpg" alt=""></div>
<div class="card-description">
<h5 class="card-name">Yonathan Abera</h5>
<span>
<h3>Founder and Developer</h3>
</span>
</div>
</div>
<div class="card">
<div class="img"><img src="../assets/1000_F_338308078_iiXC8b9lxpxmjGKaKu4dtXHSIVfzE8qm.jpg" alt=""></div>
<div class="card-description">
<h5 class="card-name">Joshua Busia</h5>
<span>
<h3>Developer</h3>
</span>
</div>
</div>
<div class="card">
<!-- <div class="card">
<div class="img"><img src="../assets/1000_F_338308078_iiXC8b9lxpxmjGKaKu4dtXHSIVfzE8qm.jpg" alt=""></div>
<div class="card-description">
<h5 class="card-name">Menelik Yared</h5>
Expand All @@ -145,6 +148,7 @@ <h3>Developer</h3>
</span>
</div>
</div>

<div class="card">
<div class="img"><img src="../assets/1000_F_338308078_iiXC8b9lxpxmjGKaKu4dtXHSIVfzE8qm.jpg" alt=""></div>
<div class="card-description">
Expand All @@ -162,7 +166,7 @@ <h3>Developer</h3>
<h3>Developer</h3>
</span>
</div>
</div>
</div> -->
</div>


Expand Down Expand Up @@ -194,4 +198,5 @@ <h3>Developer</h3>
</footer>
</section>
</body>
<script src="../script.js"></script>
</html>