Skip to content

Commit 0a30b0d

Browse files
raj-rathodraj-rathod
authored
Merge pull request #93 from raj-rathod/rajesh
chore:<Whatsapp chat remove> github fab button add
2 parents 4a6d6dc + b7a0d73 commit 0a30b0d

File tree

2 files changed

+132
-32
lines changed

2 files changed

+132
-32
lines changed

‎src/index.html‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,29 @@
2525
<link rel="preconnect" href="https://fonts.gstatic.com">
2626
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
2727
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
28+
<!-- github button -->
29+
<script async defer src="https://buttons.github.io/buttons.js"></script>
2830
</head>
2931
<body>
3032
<app-root></app-root>
31-
<!--whatsapp chat--->
32-
<a href="https://api.whatsapp.com/send?phone=919148002717&text=Hi!%20" class="whatsapp-container" target="_blank">
33-
<img class="whatsapp-icon" src="./assets/icons/whatsapp.svg" alt="whatsapp">
34-
</a>
35-
<!------>
33+
<div class="floating-container">
34+
<div class="floating-button">
35+
<img src="assets/icons/github.png" height="30" width="30" alt="GitHub">
36+
</div>
37+
<div class="element-container">
38+
<div class="float-element">
39+
<a class="github-button" href="https://github.com/raj-rathod" data-size="large" aria-label="Follow @raj-rathod on GitHub">Follow @raj-rathod</a>
40+
</div>
41+
<div class="float-element">
42+
<a class="github-button" href="https://github.com/sponsors/raj-rathod" data-icon="octicon-heart" data-size="large" aria-label="Sponsor @raj-rathod on GitHub">Sponsor</a>
43+
</div>
44+
<div class="float-element">
45+
<a class="github-button" href="https://github.com/raj-rathod/DSA-visualisation-in-angular" data-icon="octicon-star" data-size="large" aria-label="Star raj-rathod/DSA-visualisation-in-angular on GitHub">Star</a>
46+
</div>
47+
<div class="float-element">
48+
<a class="github-button" href="https://github.com/raj-rathod/DSA-visualisation-in-angular/discussions" data-icon="octicon-comment-discussion" data-size="large" aria-label="Discuss raj-rathod/DSA-visualisation-in-angular on GitHub">Discuss</a>
49+
</div>
50+
</div>
51+
</div>
3652
</body>
3753
</html>

‎src/styles.css‎

Lines changed: 111 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -167,28 +167,116 @@ li {
167167
/* Firefox */
168168
}
169169

170-
/*-------- WhatsApp------------------------------------------------*/
171-
.whatsapp-container {
170+
171+
/* floating button */
172+
@-webkit-keyframes come-in {
173+
0% {
174+
-webkit-transform: translatey(100px);
175+
transform: translatey(100px);
176+
opacity: 0;
177+
}
178+
30% {
179+
-webkit-transform: translateX(-50px) scale(0.4);
180+
transform: translateX(-50px) scale(0.4);
181+
}
182+
70% {
183+
-webkit-transform: translateX(0px) scale(1.2);
184+
transform: translateX(0px) scale(1.2);
185+
}
186+
100% {
187+
-webkit-transform: translatey(0px) scale(1);
188+
transform: translatey(0px) scale(1);
189+
opacity: 1;
190+
}
191+
}
192+
@keyframes come-in {
193+
0% {
194+
-webkit-transform: translatey(100px);
195+
transform: translatey(100px);
196+
opacity: 0;
197+
}
198+
30% {
199+
-webkit-transform: translateX(-50px) scale(0.4);
200+
transform: translateX(-50px) scale(0.4);
201+
}
202+
70% {
203+
-webkit-transform: translateX(0px) scale(1.2);
204+
transform: translateX(0px) scale(1.2);
205+
}
206+
100% {
207+
-webkit-transform: translatey(0px) scale(1);
208+
transform: translatey(0px) scale(1);
209+
opacity: 1;
210+
}
211+
}
212+
213+
.floating-container {
172214
position: fixed;
173-
width: 60px;
174-
height: 60px;
175-
bottom: 30px;
176-
right: 30px;
177-
background-color: #25d366;
178-
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
179-
color: #FFF;
215+
z-index: 9999;
216+
width: 150px;
217+
height: 100px;
218+
bottom: 0;
219+
right: 0;
220+
margin: 35px 25px;
221+
}
222+
.floating-container:hover {
223+
height: 300px;
224+
}
225+
.floating-container:hover .floating-button {
226+
box-shadow: 0 10px 25px rgba(29, 26, 26, 0.6);
227+
-webkit-transform: translatey(5px);
228+
transform: translatey(5px);
229+
-webkit-transition: all 0.3s;
230+
transition: all 0.3s;
231+
}
232+
.floating-container:hover .element-container .float-element:nth-child(1) {
233+
-webkit-animation: come-in 0.4s forwards 0.2s;
234+
animation: come-in 0.4s forwards 0.2s;
235+
}
236+
.floating-container:hover .element-container .float-element:nth-child(2) {
237+
-webkit-animation: come-in 0.4s forwards 0.4s;
238+
animation: come-in 0.4s forwards 0.4s;
239+
}
240+
.floating-container:hover .element-container .float-element:nth-child(3) {
241+
-webkit-animation: come-in 0.4s forwards 0.6s;
242+
animation: come-in 0.4s forwards 0.6s;
243+
}
244+
.floating-container:hover .element-container .float-element:nth-child(4) {
245+
-webkit-animation: come-in 0.4s forwards 0.8s;
246+
animation: come-in 0.4s forwards 0.8s;
247+
}
248+
.floating-container .floating-button {
249+
position: absolute;
250+
width: 65px;
251+
height: 65px;
252+
background: #E8EAEA;
253+
bottom: 0;
180254
border-radius: 50%;
255+
left: 0;
256+
right: 0;
257+
margin: auto;
258+
margin-right: 0px;
259+
color: white;
260+
line-height: 65px;
181261
text-align: center;
182-
display: flex;
183-
align-items: center;
184-
justify-content: center;
185-
z-index: 99999;
262+
font-size: 23px;
263+
z-index: 9999;
264+
box-shadow: 0 10px 25px -5px rgba(232,234,234, 0.6);
265+
cursor: pointer;
266+
-webkit-transition: all 0.3s;
267+
transition: all 0.3s;
186268
}
187-
188-
.whatsapp-icon {
189-
width: 35px;
190-
height: 35px;
269+
.floating-container .float-element {
270+
position: relative;
271+
display: block;
272+
z-index: 0;
273+
opacity: 0;
274+
float: right;
275+
margin:10px auto;
276+
-webkit-transform: translateY(100px);
277+
transform: translateY(100px);
191278
}
279+
/* end */
192280

193281
/* tree representation classes */
194282
.tree {
@@ -357,17 +445,13 @@ li {
357445
font-size: 0.75rem !important;
358446
}
359447

360-
.whatsapp-container {
361-
362-
width: 40px;
363-
height: 40px;
364-
bottom: 16px;
365-
right: 12px;
448+
.floating-container {
449+
width: 150px;
450+
height: 70px;
451+
margin: 16px !important;
366452
}
367-
368-
.whatsapp-icon {
369-
width: 25px;
370-
height: 25px;
453+
.floating-container .floating-button {
454+
margin-right: 0px !important;
371455
}
372456
.data-section{
373457
height: 50px;

0 commit comments

Comments
 (0)