Skip to content

Commit 6a86470

Browse files
Pritam-sPritam-s
committed
Initial Commit.
0 parents  commit 6a86470

5 files changed

+364
-0
lines changed

‎Animations_keyframes_and_Transitions.html

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Animations, keyframes and Transitions</title>
9+
<style>
10+
* {
11+
box-sizing: border-box;
12+
}
13+
14+
.container {
15+
border: 4px solid rgb(0, 13, 128);
16+
height: 800px;
17+
}
18+
19+
#box1 {
20+
border: 3px solid rgb(153, 44, 111);
21+
height: 200px;
22+
width: 200px;
23+
background-color: rgb(84, 177, 68);
24+
position: relative;
25+
top: 15%;
26+
27+
animation-name: nik1;
28+
animation-duration: 3s;
29+
animation-iteration-count: infinite;
30+
}
31+
32+
#box2 {
33+
border: 3px solid rgb(153, 44, 111);
34+
height: 200px;
35+
width: 200px;
36+
margin-top: 80px;
37+
background-color: rgb(68, 173, 177);
38+
position: relative;
39+
top: 15%;
40+
41+
animation-name: nik2;
42+
animation-duration: 3s;
43+
animation-iteration-count: infinite;
44+
}
45+
46+
47+
@keyframes nik1 {
48+
from {
49+
width: 200px;
50+
}
51+
52+
to {
53+
width: 500px;
54+
}
55+
}
56+
57+
@keyframes nik2 {
58+
0% {
59+
top: 0px;
60+
left: 0px;
61+
}
62+
63+
25% {
64+
top: 100px;
65+
left: 0px;
66+
}
67+
68+
75% {
69+
top: 100px;
70+
left: 100px;
71+
}
72+
73+
100% {
74+
top: 0px;
75+
left: 100px;
76+
}
77+
78+
}
79+
</style>
80+
81+
</head>
82+
83+
84+
<body>
85+
<div class="container">
86+
<div id="box1">
87+
This is a box for animations
88+
</div>
89+
90+
<div id="box2">
91+
This is a box for animations
92+
</div>
93+
</div>
94+
</body>
95+
96+
</html>

‎FigmaTest.html

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;700&display=swap"
10+
rel="stylesheet"
11+
/>
12+
<title>Document</title>
13+
</head>
14+
15+
<style>
16+
17+
body{
18+
font-family: "inter", sans-serif;
19+
20+
}
21+
22+
.mainimg{
23+
position: relative;
24+
width: 1440px;
25+
height: 1024px;
26+
}
27+
28+
29+
#gradientBox{
30+
position: absolute;
31+
width: 1036px;
32+
height: 140px;
33+
left: 403px;
34+
top: 884px;
35+
36+
background: linear-gradient(91.34deg, rgba(255, 255, 255, 0.1) 3.26%, rgba(255, 255, 255, 0) 100%);
37+
backdrop-filter: blur(40px);
38+
/* Note: backdrop-filter has minimal browser support */
39+
40+
border-radius: 0px;
41+
}
42+
43+
.letterings{
44+
position: absolute;
45+
width: 375px;
46+
height: 75px;
47+
left: 435px;
48+
top: 920px;
49+
50+
font-family:"inter";
51+
font-style: normal;
52+
font-weight: normal;
53+
font-size: 16px;
54+
line-height: 22px;
55+
56+
color: #FAFAFA;
57+
58+
59+
}
60+
61+
.linehori{
62+
position: absolute;
63+
width: 70px;
64+
height: 0px;
65+
left: 825px;
66+
top: 989px;
67+
68+
border: 1px solid #FAFAFA;
69+
transform: rotate(-90deg);
70+
}
71+
72+
73+
</style>
74+
75+
76+
<body>
77+
78+
<header>
79+
<nav class="navbar">
80+
<ul></ul>
81+
</nav>
82+
</header>
83+
84+
<div>
85+
<img class="mainimg" src="bruce-jastrow-l1H0sF8-v0k-unsplash.jpg" alt="">
86+
</div>
87+
88+
<div id="gradientBox">
89+
<p class="letterings">
90+
Indian Ringneck Parakeet (Rose-Ringed Parakeet) : Psittacula krameri manillensis
91+
</p>
92+
</div>
93+
94+
95+
</body>
96+
</html>

‎Spinner.html

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Spinner</title>
8+
9+
10+
<style>
11+
.Spinner {
12+
border: 18px solid #00A8A8;
13+
border-top: 18px solid #2EB5E0;
14+
border-radius: 50%;
15+
width: 110px;
16+
height: 110px;
17+
animation: spin 1.1s linear infinite;
18+
}
19+
20+
@keyframes spin{
21+
0%{
22+
transform: rotate(0deg);
23+
}
24+
100%{
25+
transform: rotate(360deg);
26+
}
27+
}
28+
</style>
29+
30+
</head>
31+
<!--This is the Head -->
32+
33+
34+
<body>
35+
<div class="Spinner">
36+
37+
</div>
38+
</body>
39+
</html>

‎Transform.html

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Transform Css</title>
8+
9+
10+
<style>
11+
.rect {
12+
background-color: #5f9ee5;
13+
border: 10px solid #00A8A8;
14+
height: 40px;
15+
width: 60px;
16+
transform: translate(10px, 20px) ;
17+
/* animation: slide 5s linear infinite; */
18+
animation: slide linear 1s infinite alternate;
19+
}
20+
21+
@keyframes slide{
22+
from{
23+
transform: translate(-20px);
24+
}
25+
to{
26+
transform: translate(20px);
27+
}
28+
}
29+
30+
</style>
31+
</head>
32+
33+
34+
<body>
35+
<div class="rect"></div>
36+
</body>
37+
</html>

‎circle.html

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Circle</title>
9+
10+
<style>
11+
.container {
12+
/* To apply align-items, height should be applied to the container. I was never aware of it. */
13+
14+
border: 2px solid pink;
15+
height: 700px;
16+
display: flex;
17+
18+
justify-content: center;
19+
align-items: center;
20+
21+
22+
}
23+
24+
.circle {
25+
26+
border: 30px solid rgb(140, 0, 255);
27+
border-top: 30px solid rgb(234, 0, 255);
28+
height: 300px;
29+
width: 300px;
30+
31+
border-radius: 300px;
32+
33+
animation-name: spin;
34+
35+
animation-duration: 1.3s;
36+
37+
animation-iteration-count: infinite;
38+
39+
animation-timing-function: ease-in-out;
40+
41+
/* Transitions */
42+
transition-property: all;
43+
transition-duration: 1s;
44+
}
45+
46+
.circle:hover {
47+
height: 400px;
48+
width: 400px;
49+
50+
border: 40px solid rgb(234, 0, 255);
51+
border-top: 40px solid rgb(140, 0, 255);
52+
53+
animation-name: spin-rev;
54+
animation-duration: 1.3s;
55+
animation-iteration-count: infinite;
56+
57+
animation-timing-function: ease-in-out;
58+
59+
transition-property: all;
60+
transition-duration: 1s;
61+
62+
}
63+
64+
@keyframes spin {
65+
0% {
66+
transform: rotate(0deg);
67+
}
68+
69+
100% {
70+
transform: rotate(360deg);
71+
}
72+
73+
}
74+
75+
@keyframes spin-rev {
76+
0% {
77+
transform: rotate(360deg);
78+
}
79+
80+
100% {
81+
transform: rotate(0deg);
82+
}
83+
84+
}
85+
</style>
86+
</head>
87+
88+
<body>
89+
<div class="container">
90+
<div class="circle">
91+
92+
</div>
93+
</div>
94+
</body>
95+
96+
</html>

0 commit comments

Comments
 (0)