├── images
├── jojo.jpg
└── jojo2.jpg
├── index.html
└── css
└── style.css
/images/jojo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asif-daffodil/jojo/HEAD/images/jojo.jpg
--------------------------------------------------------------------------------
/images/jojo2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asif-daffodil/jojo/HEAD/images/jojo2.jpg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 | JOJO
12 |
13 |
14 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | .main {
8 | width: 100%;
9 | height: 100vh;
10 | display: grid;
11 | font-size: 76px;
12 | letter-spacing: 100px;
13 | animation: jojo 2s linear infinite
14 | }
15 |
16 | @keyframes jojo {
17 | 0% {
18 | letter-spacing: 100px;
19 | color: orange;
20 | place-items: start;
21 | background: url("../images/jojo.jpg");
22 | background-size: cover;
23 | background-position: center;
24 | }
25 | 50% {
26 | letter-spacing: 50px;
27 | color: white;
28 | place-items: center;
29 | background: url("../images/jojo2.jpg");
30 | background-size: cover;
31 | }
32 | 100% {
33 | letter-spacing: 100px;
34 | color: orange;
35 | place-items: end;
36 | background: url("../images/jojo.jpg");
37 | background-size: cover;
38 | background-position: center;
39 | }
40 | }
--------------------------------------------------------------------------------