Skip to content
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.

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

improved hover effects and fixed overflow-x #90

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
30 changes: 26 additions & 4 deletions css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ body {
line-height: 21px;
font-size: 13px;
color: #6a737b;
overflow-x: hidden;
}

ol,
Expand Down Expand Up @@ -250,9 +251,21 @@ Slider
margin: 0 6px;
font-size: 30px; color: white;
}

.social-links li a:hover {
color: rgb(255, 45, 45);
.social-links li a #yt:hover{
color: red;
transition: 0.4s;
}
.social-links li a #linkedin:hover{
color: blue;
transition: 0.4s;
}
.social-links li a #github:hover{
color: purple;
transition: 0.4s;
}
.social-links li a #insta:hover{
color: crimson;
transition: 0.4s;
}
.social-button{
display: flex;
Expand Down Expand Up @@ -291,7 +304,12 @@ Slider
height: 70px;
width: 25rem;
}

.btn:hover{
color: white;
transform: scale(0.99);
box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
transition: 0.4s ease-out;
}
/*=========================================
Social Media links
==========================================*/
Expand Down Expand Up @@ -622,6 +640,10 @@ a.button1{
text-align:center;
transition: all 0.2s;
}
a.button1:hover{
transform: scale(0.98);
box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
}

.member-thumb {
width: 273px;
Expand Down
14 changes: 7 additions & 7 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -128,21 +128,21 @@ <h3 data-wow-duration="1000ms" class="wow slideInLeft animated">Let's Take<span
You</span> forward.</h3>

<ul class="social-links text-center">
<li><a href=""><i class="fa fa-youtube"></i></a></li>
<li><a href=""><i class="fa fa-linkedin fa-lg"></i></a></li>
<li><a href=""><i class="fa fa-github fa-lg"></i></a></li>
<li><a href=""><i class="fa fa-instagram fa-lg"></i></a></li>
<li><a href=""><i class="fa fa-youtube" id="yt"></i></a></li>
<li><a href=""><i class="fa fa-linkedin fa-lg" id="linkedin"></i></a></li>
<li><a href=""><i class="fa fa-github fa-lg" id="github"></i></a></li>
<li><a href=""><i class="fa fa-instagram fa-lg" id="insta"></i></a></li>
</ul>
<br>
<h4><b>Join our supportive community that always has your back 🚀</b></h4><br><br>
<div class="social-button">
<a href="https://chat.whatsapp.com/GMNWoMEOgmh4oZnMb0iAXB"><button class="btn"
style="background-color: #25D366;"><img src="img/whatsapp icon2.png"
style="background-color: #25D366; box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);"><img src="img/whatsapp icon2.png"
width="35" />Join Us On <b>Whatsapp</b> </button></a>
<a href="https://discord.gg/DZAJYmsG"><button class="btn" style="background-color: #7289d9;"><img
<a href="https://discord.gg/DZAJYmsG"><button class="btn" style="background-color: #7289d9; box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);"><img
src="img/Discord icon" width="60" />Join Us On <b>Discord</b> </button></a></div>

<a href="https://t.me/joinchat/0Y0nT-yXjGxmM2Vl"><button class="btn" style="background-color: #7289d9;"><img
<a href="https://t.me/joinchat/0Y0nT-yXjGxmM2Vl"><button class="btn" style="background-color: #7289d9;box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);"><img
src="img/teleram icon.png" width="60" />Join Us On <b>Telegram</b> </button></a></div>
</div>
</div>
Expand Down