Skip to content

Commit

Permalink
add hovering effect in login page
Browse files Browse the repository at this point in the history
  • Loading branch information
@ANKeshri
ANKeshri committed Jul 5, 2024
1 parent db03b28 commit 2b39f4d
Show file tree
Hide file tree
Showing 2 changed files with 143 additions and 13 deletions.
58 changes: 45 additions & 13 deletions Login/index1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,29 @@
<div class="form-container sign-up">
<img src="../assets/images/logo/logo..png" alt="Website Logo" class="logo-right">
<form action="https://sk66641.github.io/Random-Disco-Light-Simulator/">
<h1 style="color: #f09819;">Activate Your Account</h1>
<div class="social-icons">
<a href="http://www.gmail.com" class="icon"><i class="fa-brands fa-google-plus-g"></i></a>
<a href="http://www.facebook.com" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
<a href="http://www.github.com" class="icon"><i class="fa-brands fa-github"></i></a>
<a href="http://www.linkedin.com" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
</div>
<h1 style="color: #f09819; margin-bottom: 2rem;">Activate Your Account</h1>
<div class="socialIcons">
<span class="icons">
<a href="" aria-label="Linkedin" title="linkedin"><i class="fab fa-linkedin ico"></i></a>
</span>
<span class="icons">
<a href="" aria-label="Instagram" title="instagram"><i class="fa-brands fa-instagram ico"></i></a>
</span>

<span class="icons">
<a href="https://github.com/sk66641/Random-Disco-Light-Simulator" title="github">
<i class="fab fa-github ico"></i>
</a>
</span>

<span class="icons">
<a href="" aria-label="X" title="Twitter"><i class="fa-brands fa-x-twitter ico"></i></a>
</span>

<span class="icons">
<a href="" aria-label="Discord" title="discord"><i class="fa-brands fa-discord ico"></i></a>
</span>
</div>
<span style="color: #f09819;">Secure Access with Your Email Password</span>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
Expand All @@ -49,12 +65,28 @@ <h1 style="color: #f09819;">Activate Your Account</h1>
<div class="form-container sign-in">
<form action="https://sk66641.github.io/Random-Disco-Light-Simulator/">
<p><img src="../assets/images/logo/logo..png" alt="Website Logo" class="logo-left"></p>
<div class="social-icons">
<a href="http://www.gmail.com" class="icon"><i class="fa-brands fa-google-plus-g"></i></a>
<a href="http://www.facebook.com" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
<a href="http://www.github.com" class="icon"><i class="fa-brands fa-github"></i></a>
<a href="http://www.linkedin.com" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
</div>
<div class="socialIcons">
<span class="icons">
<a href="" aria-label="Linkedin" title="linkedin"><i class="fab fa-linkedin ico"></i></a>
</span>
<span class="icons">
<a href="" aria-label="Instagram" title="instagram"><i class="fa-brands fa-instagram ico"></i></a>
</span>

<span class="icons">
<a href="https://github.com/sk66641/Random-Disco-Light-Simulator" title="github">
<i class="fab fa-github ico"></i>
</a>
</span>

<span class="icons">
<a href="" aria-label="X" title="Twitter"><i class="fa-brands fa-x-twitter ico"></i></a>
</span>

<span class="icons">
<a href="" aria-label="Discord" title="discord"><i class="fa-brands fa-discord ico"></i></a>
</span>
</div>
<span style="color: #f09819;">Secure Access with Your Email Password</span>
<input type="email" placeholder="Email">
<div class="password-container">
Expand Down
98 changes: 98 additions & 0 deletions Login/styles1.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -613,3 +613,101 @@ body {
right: 5px;
}
}
.socialIcons {
transform: translateY(-50%);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;

gap: 30px;
backdrop-filter: blur(8px);

}
.icons {
position: relative;
background: rgba(106, 106, 106, 0.189);
top: 0px;
color: white;
box-shadow: 3px 4px 10px rgba(176, 175, 175, 0.248);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50% 50%;
overflow: hidden;
}
.icons a::after {
content: "";
width: 40px;
height: 40px;
top: -40px;
left: 0;
background: linear-gradient(40deg,
rgb(246, 126, 28),
rgb(221, 54, 54),
rgb(250, 41, 118),
rgb(214, 18, 214));
position: absolute;
transition: 0.5s;
}

.icons a:hover::after {
top: 0;
left: 0;
}

.icons:nth-child(1) a::after {
background: linear-gradient(40deg,
rgb(13, 108, 139),
rgb(48, 106, 126),
rgb(38, 126, 156),
rgb(15, 112, 145));
}

.icons:nth-child(2) a::after {
background: linear-gradient(40deg,
rgb(246, 126, 28),
rgb(221, 54, 54),
rgb(250, 41, 118),
rgb(214, 18, 214));
}

.icons:nth-child(3) a::after {
background: linear-gradient(40deg, #000000, #410bc8);
}

.icons:nth-child(4) a::after {
background: rgb(19, 12, 12);
}

.icons:nth-child(5) a::after {
background:
rgb(88, 101, 242)
}
.ico {
position: absolute;
font-size: 21px;
z-index: 20;
top: 50%;
left: 50%;

transform: translate(-50%, -50%);

color: white;
}

.light-mode .icons {
background: rgba(10, 9, 9, 0.063);
box-shadow: 4px 6px 10px rgba(19, 19, 19, 0.333);
}

.light-mode .ico {
color: rgb(102, 100, 100);
}

.light-mode .ico:hover {
color: white;
transition: all ease-in 0.1s;
}

0 comments on commit 2b39f4d

Please sign in to comment.