Skip to content

Commit f0ccc80

Browse files
enhance: Learn more Button and smooth hover effect (#1388)
* enhance: Learn more Button and smooth hover effect * update light mode Co-Authored-By: Sanjay Viswanathan <[email protected]> --------- Co-authored-by: Sanjay Viswanathan <[email protected]>
1 parent e87e6aa commit f0ccc80

File tree

2 files changed

+43
-17
lines changed

2 files changed

+43
-17
lines changed

pages/events.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -76,14 +76,14 @@ <h1 class="main-heading">Events Timeline</h1>
7676
allowfullscreen></iframe>
7777
</div>
7878

79-
<h2 class="event-title">GitHub Profile Review Live Session</h2>
79+
<h2 class="event-title">GitHub Profile Review Live Session : 1</h2>
8080
<p class="event-date">Date: 18 Jul 2024</p>
8181
<p class="event-description">Session Highlights:
8282
🔍 Live GitHub Profile Reviews: Get feedback on your GitHub profile.
8383
💡 Tips to Enhance Your GitHub: Learn valuable tips and tricks to make your profile stand out.
8484

8585
</p>
86-
<a href="#" class="event-link">Learn More</a>
86+
<a href="https://youtube.com/@recodehive?si=ZcOHiLlFBaO_N6nH" class="event-link">Learn More</a>
8787
</div>
8888
<div class="line line--left scroll-animate " id="scroll1"></div>
8989

@@ -95,12 +95,12 @@ <h2 class="event-title">GitHub Profile Review Live Session</h2>
9595
<iframe width="100%" height="315" src="https://www.youtube.com/embed/Rm2lT9j6VxQ?start=522" frameborder="0"
9696
allowfullscreen></iframe>
9797
</div>
98-
<h2 class="event-title">GitHub Profile Review Live Session : #2</h2>
98+
<h2 class="event-title">GitHub Profile Review Live Session : 2</h2>
9999
<p class="event-date">Date: 21 Jul 2024</p>
100100
<p class="event-description">Session Highlights:
101101
🔍 Live GitHub Profile Reviews: Get feedback on your GitHub profile.
102102
💡 Tips to Enhance Your GitHub: Learn valuable tips and tricks to make your profile stand out.</p>
103-
<a href="#" class="event-link">Learn More</a>
103+
<a href="https://youtube.com/@recodehive?si=ZcOHiLlFBaO_N6nH" class="event-link">Learn More</a>
104104
</div>
105105
<div class="line line--right scroll-animate" id="scroll2"></div>
106106

@@ -113,12 +113,12 @@ <h2 class="event-title">GitHub Profile Review Live Session : #2</h2>
113113
<iframe width="100%" height="315" src="https://www.youtube.com/embed/rNF66FCLmYM?start=90" frameborder="0"
114114
allowfullscreen></iframe>
115115
</div>
116-
<h2 class="event-title">GitHub Profile Review Live Session : #3</h2>
116+
<h2 class="event-title">GitHub Profile Review Live Session : 3</h2>
117117
<p class="event-date">Date: 7 Aug 2024</p>
118118
<p class="event-description">Session Highlights:
119119
🔍 Live GitHub Profile Reviews: Get feedback on your GitHub profile.
120120
💡 Tips to Enhance Your GitHub: Learn valuable tips and tricks to make your profile stand out.</p>
121-
<a href="#" class="event-link">Learn More</a>
121+
<a href="https://youtube.com/@recodehive?si=ZcOHiLlFBaO_N6nH" class="event-link">Learn More</a>
122122
</div>
123123
<div class="line line--left scroll-animate" id="scroll3"></div>
124124

styles/events.css

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
padding: 20px 30px;
6161
background-color: #fff;
6262
position: relative;
63-
border-radius: 6px;
63+
border-radius: 10px;
6464
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
6565
}
6666

@@ -105,17 +105,43 @@
105105
}
106106

107107
.event-link {
108-
display: inline-block;
109-
background-color: #333;
110-
color: #fff;
111-
padding: 8px 15px;
112-
border-radius: 4px;
108+
background-color: #222121;
109+
color: #fcfcfc;
110+
padding: 10px 20px;
111+
border: none;
112+
border-radius: 100px;
113+
font-size: 16px;
114+
font-weight: 600;
115+
cursor: pointer;
116+
transition: all 0.3s ease;
117+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
113118
text-decoration: none;
114-
transition: background-color 0.3s;
119+
display: inline-block;
120+
position: relative;
121+
overflow: hidden;
122+
z-index: 1;
123+
}
124+
125+
.event-link::before {
126+
content: "";
127+
position: absolute;
128+
top: 0;
129+
left: -100%;
130+
width: 100%;
131+
height: 100%;
132+
background: linear-gradient(120deg, #ff416c, #ff4b2b);
133+
transition: all 0.3s ease;
134+
z-index: -1;
135+
border: none;
136+
}
137+
138+
.event-link:hover::before {
139+
left: 0;
115140
}
116141

117142
.event-link:hover {
118-
background-color: #555;
143+
color: #ffffff;
144+
transform: scale(1.05);
119145
}
120146

121147
/* Dark mode styles */
@@ -150,12 +176,12 @@ body.dark-mode .event-date {
150176
}
151177

152178
body.dark-mode .event-link {
153-
background-color: #f0f0f0;
154-
color: #333;
179+
background-color: #e7e9eb;
180+
color: #201f1f;
155181
}
156182

157183
body.dark-mode .event-link:hover {
158-
background-color: #ccc;
184+
background-color: #ffffff;
159185
}
160186

161187
body.dark-mode .navbar-text {

0 commit comments

Comments
 (0)