Skip to content

Commit

Permalink
Changed hover state to onClick state
Browse files Browse the repository at this point in the history
  • Loading branch information
@Cshiva773
Cshiva773 committed Apr 9, 2023
1 parent 464395e commit 8bf153f
Show file tree
Hide file tree
Showing 2 changed files with 173 additions and 44 deletions.
207 changes: 169 additions & 38 deletions credits/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,20 +65,40 @@ <h2>Project Contributors (People that helped make this website a success :)</h2>

<!-- ALL-CONTRIBUTORS-LIST:END -->
</center>

<script>
//show and hide dropdown list item on button click
function func() {
var click = document.getElementById("item");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/KendallDoesCoding"><h1>KendallDoesCoding<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
<div class="dropdown-content">
<a href="https://github.com/KendallDoesCoding"><h1>KendallDoesCoding</a><i onClick="func()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item">
<h3> Project Founder, Owner </h3>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=KendallDoesCoding">Commits by KendallDoesCoding</h4></a>
</div>
</div>
</br>


<script>
//show and hide dropdown list item on button click
function func2() {
var click = document.getElementById("item2");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/TechStudent11"><h1>TechStudent10<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
<div class="dropdown-content">
<a href="https://github.com/TechStudent11"><h1>TechStudent10</a><i onClick="func2()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item2">
<h3> Contributed majorly in the project </h3>
<div class="techstudent10-work">
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/6">Made it so that, it changes link automatically updates embed of the respective song onto page when tapped song (Added in old releases).</h3></a>
Expand All @@ -95,10 +115,20 @@ <h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christma
</div>
</br>


<script>
//show and hide dropdown list item on button click
function func3() {
var click = document.getElementById("item3");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/aliraza944"><h1>Ali Raza<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
<div class="dropdown-content">
<a href="https://github.com/aliraza944"><h1>Ali Raza</a><i onClick="func3()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item3">
<h3> Contributed majorly in the project </h3>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/87">Made it so that, the github repo icon if tapped, will the project repo in a new browser window.</h3></a>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/88">Move the lyrics from the HTML file to lyrics.js in the lyrics directory.</h3></a>
Expand All @@ -110,102 +140,203 @@ <h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christma
</div>
</br>

<script>
//show and hide dropdown list item on button click
function func4() {
var click = document.getElementById("item4");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/JeffBucherDev"><h1>JeffBucherDev<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
<div class="dropdown-content">
<a href="https://github.com/JeffBucherDev"><h1>JeffBucherDev</a><i onClick="func4()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item4">
<h3> One-time Contributor </h3>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/218">Fixed CSS problem in "Other Projects" directory.</h3></a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=JeffBucherDev">Commits by JeffBucherDev</h4></a>
</div>
</div>
</br>


<script>
//show and hide dropdown list item on button click
function func5() {
var click = document.getElementById("item5");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/Bibhavshah"><h1>Bibhav Shah<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
<div class="dropdown-content">
<a href="https://github.com/Bibhavshah"><h1>Bibhav Shah</a><i onClick="func5()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item5">
<h3> One-time Contributor </h3>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/48">Leave space between buttons in main directory.</h3></a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=Bibhavshah">Commits by Bibhav Shah</h4></a>
</div>
</div>
</br>

<script>
//show and hide dropdown list item on button click
function func6() {
var click = document.getElementById("item6");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/kira272921"><h1>Kira<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
<div class="dropdown-content">
<a href="https://github.com/kira272921"><h1>Kira</a><i onClick="func6()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item6">
<h3> One-time Contributor</h3>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/219">Helped setup AllContributors bot to the repo and taught KendallDoesCoding (Founder, Owner of the project) how to use the bot.</h3></a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=Kira">Commits by Kira</h4></a>
</div>
</div>
</br>

<script>
//show and hide dropdown list item on button click
function func7() {
var click = document.getElementById("item7");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/divyakelaskar"><h1>Divya Kelaskar<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
<div class="dropdown-content">
<a href="https://github.com/divyakelaskar"><h1>Divya Kelaskar</a><i onClick="func7()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item7">
<h3> One-time Contributor</h3>
<h3><a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/246">Added PR template to project GitHub repo.</h3></a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=divyakelaskar">Commits by Divya Kelaskar</h4></a>
</div>
</div>
</br>

<script>
//show and hide dropdown list item on button click
function func8() {
var click = document.getElementById("item8");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/samyberkane04"><h1>Samy Berkane<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
<div class="dropdown-content">
<a href="https://github.com/samyberkane04"><h1>Samy Berkane</a><i onClick="func8()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item8">
<h3> One-time Contributor</h3>
<h3>Helped with <a href="https://github.com/KendallDoesCoding/mogul-christmas/issues/259">Background not displaying on phone/small screen size.</a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=samyberkane04">Commits by Samy Berkane</h4></a>
</div>
</div>
</br>

<script>
//show and hide dropdown list item on button click
function func9() {
var click = document.getElementById("item9");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/Michael-Obele"><h1>Michael Obele<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
<div class="dropdown-content">
<a href="https://github.com/Michael-Obele"><h1>Michael Obele</a><i onClick="func9()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item9">
<h3> One-time Contributor</h3>
<h3>Helped to <a href="https://github.com/KendallDoesCoding/mogul-christmas/pull/296"> Improve README.md</a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=Michael-Obele">Commits by Micheal Obele</h4></a>

</div>
</div>
</br>

<script>
//show and hide dropdown list item on button click
function func10() {
var click = document.getElementById("item10");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/Weave-Trix"><h1>Weave-Trix<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
<div class="dropdown-content">
<a href="https://github.com/Weave-Trix"><h1>Weave-Trix</a><i onClick="func10()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item10">
<h3> One-time Contributor</h3>
<h3>Helped with <a href="https://github.com/KendallDoesCoding/mogul-christmas/issues/276">[FEATURE REUQEST] Play random song button in main directory.</a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=Weave-Trix">Commits by Weave-Trix</h4></a>
</div>
</div>
</br>

<script>
//show and hide dropdown list item on button click
function func11() {
var click = document.getElementById("item11");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/fk00750"><h1>F.K<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
<div class="dropdown-content">
<a href="https://github.com/fk00750"><h1>F.K</a><i onClick="func11()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item11">
<h3> One-time Contributor</h3>
<h3>Helped with <a href="https://github.com/KendallDoesCoding/mogul-christmas/issues/103">[Javascript] Format lyrics proper in lyrics directory songs.</a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=fk00750">Commits by F.K</h4></a>
</div>
</div>
</br>


<script>
//show and hide dropdown list item on button click
function func12() {
var click = document.getElementById("item12");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/ArhyaSaha"><h1>Arhya Saha<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
<div class="dropdown-content">
<a href="https://github.com/ArhyaSaha"><h1>Arhya Saha</a><i onClick="func12()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item12">
<h3> One-time Contributor</h3>
<h3>Helped with <a href="https://github.com/KendallDoesCoding/mogul-christmas/issues/302">Convert all pics in the Photo Gallery to .jpg</a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=ArhyaSaha">Commits by Arhya Saha</h4></a>
</div>
</div>
</br>

<script>
//show and hide dropdown list item on button click
function func13(){
var click = document.getElementById("item13");
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
}
</script>
<div class="dropdown">
<a href="https://github.com/frazie"><h1>Frazier Odhiambo<button class="dropbtn"><i class="arrow down"></i></h1></a></button>
<div class="dropdown-content">
<a href="https://github.com/frazie"><h1>Frazier Odhiambo</a><i onclick="func13()" class="arrow down"></i></h1>
<div class="dropdown-content" id="item13">
<h3> One-time Contributor</h3>
<h3>Helped with <a href="https://github.com/KendallDoesCoding/mogul-christmas/issues/80">Make site responsive and make it so that if screen size is small the button to toggle darkmode becomes small too.</a>
<h4 class="commits"><a href="https://github.com/KendallDoesCoding/mogul-christmas/commits?author=frazie">Commits by Frzie Odhiambo</h4></a>
Expand Down
10 changes: 4 additions & 6 deletions credits/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ h2 {
display: inline-block;
}

.dropdown-content {
#item,#item2,#item3,#item4,#item5,#item6,#item7,#item8,#item9,#item10,#item11,#item12,#item13{
display: none;
position: absolute;
background-color: #f9f9f9;
Expand All @@ -88,22 +88,20 @@ h2 {
z-index: 1;
}

.dropdown-content a {
#item13 a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}
#item,#item2,#item3,#item4,#item5,#item6,#item7,#item8,#item9,#item10,#item11,#item12,#item13 a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {

}

.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
Expand Down

0 comments on commit 8bf153f

Please sign in to comment.