Skip to content

Commit 44b4eda

Browse files
tkrupesh14tkrupesh14
committed
frontend->youtube animation
1 parent fdbef4c commit 44b4eda

File tree

3 files changed

+133
-147
lines changed

3 files changed

+133
-147
lines changed

‎Fronted Projects/Youtube Loading Animation/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Skeleton Animation | TK</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="card">
11+
<div class="header">
12+
<div class="img">
13+
14+
</div>
15+
</div>
16+
<div class="content">
17+
<div class="line line-1"></div>
18+
<div class="line line-2"></div>
19+
<div class="line line-3"></div>
20+
</div>
21+
<div class="btns">
22+
<div class="btn btn-1"></div>
23+
<div class="btn btn-2"></div>
24+
</div>
25+
</div>
26+
</body>
27+
</html>

‎Fronted Projects/Youtube Loading Animation/style.css‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body{
8+
display: flex;
9+
align-items: center;
10+
justify-content: center;
11+
min-height: 100vh;
12+
background: #414247;
13+
}
14+
.card{
15+
max-width: 350px;
16+
width: 100%;
17+
border: 1px solid #656871;
18+
border-radius: 10px;
19+
padding: 30px;
20+
}
21+
22+
.card .header{
23+
display: flex;
24+
align-items: center;
25+
}
26+
27+
.card .header .img{
28+
height: 70px;
29+
width: 70px;
30+
background: #656871;
31+
border-radius: 5px;
32+
border-radius: 50%;
33+
position: relative;
34+
overflow: hidden;
35+
36+
}
37+
38+
.header .details{
39+
margin-left: 100px;
40+
}
41+
42+
43+
44+
.card .content{
45+
margin: 25px 0;
46+
}
47+
48+
.content .line{
49+
background: #656871;
50+
height: 13px;
51+
width: 100%;
52+
border-radius: 10px;
53+
margin: 10px 0;
54+
position: relative;
55+
overflow: hidden;
56+
}
57+
58+
.content .line-1{
59+
width: calc(100% - 60%);
60+
}
61+
.content .line-3{
62+
width: calc(100% - 40%);
63+
}
64+
65+
.card .btns{
66+
display: flex;
67+
}
68+
.card .btns .btn{
69+
height: 45px;
70+
width: 100%;
71+
background: #656871;
72+
border-radius: 25px;
73+
position: relative;
74+
overflow: hidden;
75+
}
76+
77+
.btns .btn-1{
78+
margin-right: 10px;
79+
}
80+
.btns .btn-2{
81+
margin-left: 10px;
82+
}
83+
.card .header .img::before,
84+
.content .line::before,
85+
.btns .btn::before{
86+
content: '';
87+
position: absolute;
88+
height: 100%;
89+
width: 100%;
90+
background-image: linear-gradient(to right, #656871 0%, #888b94 20%, #656871 40%, #656871 100%);
91+
background-size: 450px 400px;
92+
background-repeat: no-repeat;
93+
animation: shimmer 1s linear infinite;
94+
}
95+
96+
@keyframes shimmer{
97+
0%{
98+
background-position: -450px 0;
99+
}
100+
100%{
101+
background-position: 450px 0;
102+
}
103+
}

‎README.md‎

Lines changed: 3 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -1,149 +1,5 @@
1-
<div align="center">
2-
<h1> Hacktober-2022 </h1>
3-
🚀 This repository is for collecting the different projects made by people who wants to contribute in open source.
1+
# Random Advice Generator
42

5-
<br/>
3+
## Working Demo
64

7-
8-
9-
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat&logo=github)](https://github.com/kaal-coder/hacktoberfest)
10-
[![Open Source Love](https://img.shields.io/badge/Open%20Source-%F0%9F%A4%8D-Green)](https://github.com/kaal-coder/hacktoberfest)
11-
[![contributions welcome](https://img.shields.io/static/v1.svg?label=Contributions&message=Welcome&color=0059b3)](https://github.com/kaal-coder/hacktoberfest)
12-
[![Hacktoberfest-2022](https://img.shields.io/static/v1.svg?label=Hacktoberfest-2022&message=accepted&color=red)](https://github.com/kaal-coder/hacktoberfest)
13-
14-
</div>
15-
16-
17-
18-
19-
- Anyone can add any type of valid html-css web page depending on you.
20-
21-
- You can add any small projects you have made.
22-
23-
- You can add programs too, in any programming language, but your program must be something different or unique.
24-
25-
- Do not just re-edit the file or make some small changes this kind of PRs will not be accepted.
26-
27-
- Do not add anyone else's work in this repository. It will leads to failure of your pull request.
28-
29-
30-
31-
32-
33-
## `Steps To Generate PR(Pull Request)`
34-
35-
- (Star ⭐ & Fork 🍽️) this repository. - Must Step
36-
- Follow [kaal-coder](https://www.github.com/kaal-coder) get it merged fast.
37-
# Fork this repository
38-
39-
Fork this repository by clicking on the fork button on the top of this page. This will create a copy of this repository in your account.
40-
41-
# Clone the repository
42-
43-
Now clone the forked repository to your system. Go to your GitHub account, open the forked repository, click on the code button and then clone the repository.
44-
45-
*if you want to use the terminal, use the following commands*
46-
after you fork the repository , open the terminal type the given command
47-
```
48-
git clone https://github.com/{your-github-username}/Hacktober-2022.git
49-
50-
```
51-
52-
# Create a branch
53-
54-
Then create a branch on your local repository to solve a problem.
55-
56-
*terminal commands*
57-
```
58-
git checkout -b your_new_branch_name
59-
60-
```
61-
62-
63-
# Add & commit
64-
65-
Add your changes(folder) to that branch. <br/>
66-
Make necessary changes and commit those changes.
67-
*terminal commands*
68-
```
69-
git add .
70-
git commit -m "your-commit-message"
71-
72-
```
73-
74-
# Push changes to GitHub
75-
76-
Finally push your local repository to remote repository
77-
Compare & Submit a Pull Request
78-
79-
*terminal commands*
80-
```
81-
git push origin <branch-name>
82-
83-
```
84-
85-
Then go to your repository on GitHub, you'll see a Compare & pull request button. Click on that button.
86-
87-
Now submit the pull request.
88-
89-
90-
### Don't forget to read the contributing rules mentioned below to be successfully merged your PR and get rewards!!!
91-
92-
🏹 Visit <a href="hacktoberfest.com" target="_blank">Hacktoberfest</a> to get more information about Hacktoberfest 2022!!!
93-
94-
✈ Visit <a href="https://hacktoberfest-swag.com" target="_blank">Hacktoberfest-swag</a> to know more about your swags and rewards!!!
95-
96-
# 🛡Rules to Contribute
97-
- ⚓Star this repo to get latest updates.
98-
If you had fun while contributing to this project, then don't forget to give this project a star ⭐.
99-
100-
- ⚓Give your file a proper extension according to language. Ex. .py, .java, .js. html etc.
101-
- ⚓Name your file related to your topic.
102-
- ⚓Put your files in correct folder like .py in Python, .js in Javascript etc.
103-
- ⚓You can follow ME😁.
104-
-----------------------------------------
105-
106-
107-
## Contributors of `Hacktoberfest 2022`
108-
109-
<div align="center">
110-
111-
<a href="https://github.com/kaal-coder/hacktoberfest/graphs/contributors">
112-
<img src="https://contrib.rocks/image?repo="kaal-coder/hacktoberfest/>
113-
</a>
114-
115-
</div>
116-
117-
118-
119-
120-
121-
## Note
122-
All contributors who have followed the rules to contribute get successfully merged PR. Don't forget to follow!!!
123-
124-
Have some patience to get successfully merged PR. Keep Patience!!!
125-
126-
We're happy to merge valid pull requests to this repository !
127-
128-
129-
130-
131-
132-
133-
134-
135-
136-
137-
138-
139-
## + Follow Me : } Quick Approval of Pull Request
140-
141-
```py
142-
'''
143-
To get approval of the pull request much quicker (`Follow Me`)🚀
144-
'''
145-
```
146-
<a align="center" href="https://github.com/kaal-coder"><kbd><img src="https://avatars.githubusercontent.com/u/85815858?v=4" width="100px;" alt=""/></kbd><br /><sub><b>Kaushik Lakhani</b></sub></a><br />
147-
148-
`For doubts contact kaushik.lakhani123@gmail.com`
149-
### Happy coding fellas!!💕✨
5+
![Screenshot](https://user-images.githubusercontent.com/88226411/196946183-15e4d78c-2575-405b-a694-839404a1cece.png)

0 commit comments

Comments
 (0)