Skip to content

Commit df7a913

Browse files
thapatechnicalthapatechnical
committed
world best css course is finally in github for free
0 parents  commit df7a913

File tree

273 files changed

+13692
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

273 files changed

+13692
-0
lines changed

‎CSS_complete_code/.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎CSS_complete_code/advanced_css/animation/animation.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
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>Document</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
body {
14+
width: 100%;
15+
height: 100vh;
16+
background-image: linear-gradient(
17+
to right,
18+
rgba(0, 0, 0, 0.3),
19+
rgba(0, 0, 0, 0.1)
20+
),
21+
url("../../images/mario-bg.png");
22+
background-repeat: no-repeat;
23+
background-size: 100% 100%;
24+
}
25+
26+
img {
27+
width: 200px;
28+
position: absolute;
29+
bottom: 8.7%;
30+
animation: mariorun 3s linear infinite;
31+
}
32+
@keyframes mariorun {
33+
0% {
34+
translate: 0%;
35+
}
36+
100% {
37+
translate: calc(100vw - 200px);
38+
}
39+
}
40+
</style>
41+
</head>
42+
<body>
43+
<img src="../../images/mario-run.gif" alt="mario running " />
44+
</body>
45+
</html>

‎CSS_complete_code/advanced_css/animation/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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>Animation in CSS</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;700&family=Poppins:wght@200;300;400;600&family=Quicksand:wght@300;400;500;600;700&family=Urbanist:wght@300;400;600;700;800;900&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<link rel="stylesheet" href="style.css" />
14+
</head>
15+
<body>
16+
<div class="container">
17+
<h1>CSS Animation</h1>
18+
<div class="box"></div>
19+
</div>
20+
</body>
21+
</html>

‎CSS_complete_code/advanced_css/animation/style.css‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
/** ------------------------------------- -->
2+
/** NOTES + TIPS
3+
/** ---------------------------------------- --> */
4+
5+
/*? animation-name: This property specifies the name of the keyframe animation you want to apply to an element.
6+
Example: animation-name: myAnimation; */
7+
8+
/*? animation-duration: Sets the duration of the animation in seconds (s) or milliseconds (ms).
9+
Example: animation-duration: 2s; */
10+
11+
/*? animation-timing-function: Defines the timing function that determines the acceleration and deceleration of the animation.
12+
Common values include ease, linear, ease-in, ease-out, ease-in-out, and more.
13+
Example: animation-timing-function: ease-in-out; */
14+
15+
/*? animation-delay: Specifies a delay before the animation starts. It can be in seconds (s) or milliseconds (ms).
16+
Example: animation-delay: 1s; */
17+
18+
/*? animation-iteration-count: Sets the number of times the animation should repeat. You can use values like infinite, 3, or 2n (for even iterations).
19+
Example: animation-iteration-count: infinite; */
20+
21+
/*? animation-direction: Determines whether the animation runs forwards, backward, or alternates between forward and backward cycles.
22+
Values include normal, reverse, alternate, and alternate-reverse.
23+
Example: animation-direction: alternate; */
24+
25+
/* very Important */
26+
27+
/*? @keyframes:
28+
This is not a property but a rule used to define the animation's keyframes. Keyframes specify how the element should look at various points during the animation. */
29+
30+
* {
31+
margin: 0;
32+
padding: 0;
33+
box-sizing: border-box;
34+
font-family: "Jost";
35+
}
36+
37+
body {
38+
background-color: #2b3033;
39+
}
40+
41+
.container {
42+
width: 100vw;
43+
height: 100vh;
44+
}
45+
46+
h1 {
47+
padding: 50px;
48+
color: #fff;
49+
font-size: 48px;
50+
}
51+
52+
.box {
53+
width: 100px;
54+
height: 100px;
55+
background-color: #4861ec;
56+
box-shadow: 0 0 0px 15px #353f6d;
57+
margin: 50px;
58+
display: inline-block;
59+
border-radius: 50%;
60+
/*? animation start here */
61+
animation-name: trip;
62+
animation-duration: 2.5s;
63+
animation-timing-function: linear;
64+
/* animation-delay: 2s; */
65+
animation-iteration-count: 2;
66+
animation-direction: alternate;
67+
/* animation-fill-mode: backwards; */
68+
}
69+
70+
/* @keyframes lefttoright {
71+
from {
72+
translate: 0%;
73+
}
74+
to { */
75+
/* translate: 90vw; */
76+
/* translate: calc(90vw - 100px);
77+
}
78+
} */
79+
80+
/* @keyframes lefttoright {
81+
0% {
82+
translate: 0%;
83+
}
84+
50% {
85+
translate: 50vw 50vh;
86+
}
87+
100% {
88+
translate: calc(90vw - 100px);
89+
}
90+
} */
91+
92+
@keyframes trip {
93+
0% {
94+
background-color: #ffbb5cb5;
95+
transform: translate(200px, 0%);
96+
}
97+
25% {
98+
background-color: #fcbf49;
99+
transform: translate(calc(90vw - 10%));
100+
}
101+
50% {
102+
background-color: #000000;
103+
transform: translate(calc(90vw - 10%), 500px);
104+
}
105+
75% {
106+
background-color: #fcbf49;
107+
transform: translate(20%, 500px);
108+
}
109+
100% {
110+
background-color: #ffbb5cb5;
111+
transform: translate(20%, 0%);
112+
}
113+
}
114+
115+
/** ------------------------------------- -->
116+
/** INTERVIEW QUESTIONS
117+
/** ---------------------------------------- --> */
118+
119+
/*? 1: In CSS animations, is it necessary to use the :hover or pseudo-class to trigger animations, or can animations be applied to elements on page load without user interaction? */
120+
/* No need to use hover or anything. */
121+
122+
/*? 2: Explain the @keyframes rule in CSS animations.
123+
The @keyframes rule is used to define the animation sequence by specifying styles at various points during the animation's duration. */
124+
125+
/*? 3: What is the purpose of the animation-fill-mode property?
126+
animation-fill-mode determines how styles are applied to elements before and after the animation. Options include none, forwards, backwards, and both. */
127+
128+
/*? 4:How do you create an animation that reverses its direction when it reaches the end using CSS?
129+
You can achieve this by setting the animation-direction property to alternate or alternate-reverse. */

‎CSS_complete_code/advanced_css/perspective.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!-- * ------------------------------------- -->
2+
<!-- * TRANSFORM IN CSS
3+
<!-- * ---------------------------------------- -->
4+
5+
<!--? The perspective property in CSS is used to create a 3D perspective effect by defining the position of the viewer (the "camera") relative to the 3D transformed elements. This property simulates a sense of depth in the 3D space. -->
6+
7+
<!DOCTYPE html>
8+
<html lang="en">
9+
<head>
10+
<meta charset="UTF-8" />
11+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
12+
<link rel="preconnect" href="https://fonts.googleapis.com" />
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
14+
<link
15+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;600&family=Quicksand:wght@300;400;500;600;700&family=Urbanist:wght@300;400;600;700;800;900&display=swap"
16+
rel="stylesheet"
17+
/>
18+
<style>
19+
* {
20+
margin: 0;
21+
padding: 0;
22+
box-sizing: border-box;
23+
font-family: "Urbanist", sans-serif;
24+
}
25+
26+
body {
27+
background-color: hsl(0, 0%, 85%);
28+
background-color: #2b3033;
29+
}
30+
31+
.container {
32+
width: 100vw;
33+
height: 100vh;
34+
display: flex;
35+
flex-direction: column;
36+
justify-content: center;
37+
align-items: center;
38+
gap: 30px;
39+
box-shadow: inset 0 0 0 5px #4861ec;
40+
perspective: 1000px;
41+
}
42+
43+
.box {
44+
/* width: 250px;
45+
height: 100px; */
46+
/* below three properties for scale and transform */
47+
width: 100%;
48+
width: 500px;
49+
height: auto;
50+
background-color: #4861ec;
51+
box-shadow: 0 0 0px 15px #353f6d;
52+
margin: 20px;
53+
color: #fff;
54+
font-size: 2rem;
55+
text-transform: capitalize;
56+
display: flex;
57+
justify-content: center;
58+
align-items: center;
59+
/* border-radius: 50%; */
60+
transition: all 2s linear;
61+
}
62+
63+
.box:hover {
64+
transform: rotateY(180deg);
65+
/* transform: rotateY(-60deg); */
66+
/* transform: scale(2); */
67+
/* transform: translateZ(200px); */
68+
/* use mobile and show near camera front and back */
69+
}
70+
</style>
71+
</head>
72+
<body>
73+
<div class="container">
74+
<img class="box" src="../images/html.png" />
75+
</div>
76+
</body>
77+
</html>

‎CSS_complete_code/advanced_css/project.html‎

Lines changed: 96 additions & 0 deletions
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 name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Lunar Eclipse</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
body {
14+
background-color: #ffe4d6;
15+
width: 100vw;
16+
height: 100vh;
17+
/* display: grid;
18+
place-items: center; */
19+
display: flex;
20+
justify-content: center;
21+
align-items: center;
22+
}
23+
24+
.universe {
25+
width: 40vw;
26+
aspect-ratio: 1;
27+
background-color: #ffbb5c;
28+
display: flex;
29+
justify-content: center;
30+
align-items: center;
31+
border-radius: 12px;
32+
animation: skychange 8s ease infinite;
33+
}
34+
35+
@keyframes skychange {
36+
0% {
37+
background-color: #ffbb5cb5;
38+
}
39+
25% {
40+
background-color: #fcbf49;
41+
}
42+
50% {
43+
background-color: #000000;
44+
}
45+
75% {
46+
background-color: #fcbf49;
47+
}
48+
100% {
49+
background-color: #ffbb5cb5;
50+
}
51+
}
52+
53+
.sun {
54+
width: 18vw;
55+
aspect-ratio: 1;
56+
background-color: #e25e3e;
57+
border-radius: 50%;
58+
position: relative;
59+
overflow: hidden;
60+
61+
&::after {
62+
content: "";
63+
position: absolute;
64+
top: 0;
65+
left: 0;
66+
width: inherit;
67+
aspect-ratio: 1;
68+
border-radius: inherit;
69+
background-color: #000;
70+
animation: moonwalk 8s ease-in-out infinite;
71+
}
72+
}
73+
74+
@keyframes moonwalk {
75+
0% {
76+
translate: 100%;
77+
scale: 1;
78+
}
79+
50% {
80+
translate: 0%;
81+
scale: 0.95;
82+
box-shadow: rgba(255, 255, 255, 0.5) 0px 48px 100px 0px;
83+
}
84+
100% {
85+
translate: -100%;
86+
scale: 0.9;
87+
}
88+
}
89+
</style>
90+
</head>
91+
<body>
92+
<div class="universe">
93+
<div class="sun"></div>
94+
</div>
95+
</body>
96+
</html>

0 commit comments

Comments
 (0)