Skip to content

Commit fb2127e

Browse files
shovoalwaysshovoalways
authored
Add files via upload
1 parent 279175d commit fb2127e

10 files changed

Lines changed: 316 additions & 11 deletions

File tree

‎028_CSS_Specificity/style.css‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,18 @@ body {
22
font-family: 'Poppins', sans-serif;
33
margin: 0;
44
}
5-
#test p {
6-
color: blueviolet;
5+
#test p.para {
6+
color: blueviolet !important;
7+
}
8+
#test p.para {
9+
color: aqua;
710
}
811
.child p.para {
9-
color: green !important;
12+
color: blue;
1013
}
11-
p {
14+
p.para {
1215
color: red;
1316
}
1417
p {
15-
color: blue !important;
18+
color: green;
1619
}

‎029_CSS_Math/style.css‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,13 @@ body {
33
margin: 0;
44
}
55
/* #test {
6-
background: #ddd;
6+
background: aqua;
77
width: calc(100% - 200px);
88
margin: 0 auto;
99
} */
1010
#test {
11-
background: #ddd;
12-
/* width: 100%;
13-
max-width: 500px; */
14-
/* width: max(300px, 60%); */
15-
width: min(50%, 300px);
11+
background: aqua;
12+
width: max(70%, 700px);
13+
width: min(70%, 700px);
1614
margin: 0 auto;
1715
}

‎030_CSS_Box_Sizing/index.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>CSS Box Sizing</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
11+
<link rel="stylesheet" href="style.css">
12+
</head>
13+
14+
<body>
15+
<div id="one" class="test">
16+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt nihil esse, excepturi accusantium vel inventore
17+
expedita possimus dolorem tenetur reprehenderit?</p>
18+
</div>
19+
<div id="two" class="test">
20+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt nihil esse, excepturi accusantium vel inventore
21+
expedita possimus dolorem tenetur reprehenderit?</p>
22+
</div>
23+
24+
<div id="learning">
25+
<div class="child">
26+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas quae rem obcaecati placeat alias voluptatibus
27+
excepturi quasi dignissimos explicabo id.</p>
28+
</div>
29+
<div class="child">
30+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas quae rem obcaecati placeat alias voluptatibus
31+
excepturi quasi dignissimos explicabo id.</p>
32+
</div>
33+
<div class="child">
34+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas quae rem obcaecati placeat alias voluptatibus
35+
excepturi quasi dignissimos explicabo id.</p>
36+
</div>
37+
</div>
38+
</body>
39+
40+
</html>

‎030_CSS_Box_Sizing/style.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
*,
2+
*::after,
3+
*::before {
4+
box-sizing: border-box;
5+
}
6+
body {
7+
font-family: 'Poppins', sans-serif;
8+
margin: 0;
9+
}
10+
.test {
11+
width: 350px;
12+
height: 400px;
13+
margin-bottom: 15px;
14+
color: #fff;
15+
}
16+
#one {
17+
background: #8c7ae6;
18+
padding: 50px;
19+
border: 10px solid #fbc531;
20+
box-sizing: content-box;
21+
}
22+
#two {
23+
background: #192a56;
24+
padding: 50px;
25+
border: 10px solid #fbc531;
26+
}
27+
#learning {
28+
box-sizing: border-box;
29+
}
30+
.child {
31+
background: #8c7ae6;
32+
padding: 10px 8px;
33+
border: 5px solid #fbc531;
34+
width: 32%;
35+
float: left;
36+
margin-right: 1%;
37+
}

‎031_CSS_Transitions/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>CSS Transitions</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
11+
<link rel="stylesheet" href="style.css">
12+
</head>
13+
14+
<body>
15+
<div class="one">
16+
</div>
17+
<a href="">Subscribe</a>
18+
</body>
19+
20+
</html>

‎031_CSS_Transitions/style.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
*,
2+
*::after,
3+
*::before {
4+
box-sizing: border-box;
5+
}
6+
body {
7+
font-family: 'Poppins', sans-serif;
8+
margin: 0;
9+
}
10+
.one {
11+
background: #8c7ae6;
12+
border: 5px solid yellow;
13+
width: 100px;
14+
height: 100px;
15+
margin-top: 20px;
16+
margin-left: 15px;
17+
/* transition: idth 0.5s, height 3s, border 5s; */
18+
transition: 4s;
19+
transition-timing-function: ease-in-out;
20+
transition-delay: 1s;
21+
}
22+
.one:hover {
23+
border: 15px solid salmon;
24+
width: 400px;
25+
height: 350px;
26+
}
27+
28+
a {
29+
font-size: 35px;
30+
font-weight: bold;
31+
color: red;
32+
33+
transition: 1s;
34+
}
35+
a:hover {
36+
color: blue;
37+
}

‎032_CSS_Transform/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>CSS Transform</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
11+
<link rel="stylesheet" href="style.css">
12+
</head>
13+
14+
<body>
15+
<div class="one">
16+
</div>
17+
</body>
18+
19+
</html>

‎032_CSS_Transform/style.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
*,
2+
*::after,
3+
*::before {
4+
box-sizing: border-box;
5+
}
6+
body {
7+
font-family: 'Poppins', sans-serif;
8+
margin: 0;
9+
}
10+
.one {
11+
background: #8c7ae6;
12+
border: 5px solid green;
13+
width: 100px;
14+
height: 100px;
15+
margin-top: 20px;
16+
margin-left: 15px;
17+
transition: 0.5s;
18+
}
19+
.one:hover {
20+
/* transform: translate(25px, 20px); */
21+
/* transform: rotate(-180deg); */
22+
/* transform: scale(2, 4); */
23+
/* transform: skew(-25deg); */
24+
transform: matrix(1, 0.5, 3, 2, 0.1, 1);
25+
/* transform: matrix(scaleX(), skewX(), skewY(), scaleY(), translateX(), translateY()); */
26+
}

‎033_CSS_Animations/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>CSS Animations</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
11+
<link rel="stylesheet" href="style.css">
12+
</head>
13+
14+
<body>
15+
<div class="parent">
16+
<div class="two"></div>
17+
18+
</div>
19+
<div class="one">
20+
</div>
21+
22+
23+
</body>
24+
25+
</html>

‎033_CSS_Animations/style.css‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
*,
2+
*::after,
3+
*::before {
4+
box-sizing: border-box;
5+
}
6+
body {
7+
font-family: 'Poppins', sans-serif;
8+
margin: 0;
9+
}
10+
.one {
11+
background: #8c7ae6;
12+
border: 5px solid green;
13+
width: 100px;
14+
height: 100px;
15+
margin-top: 20px;
16+
margin-left: 15px;
17+
animation-name: learning;
18+
animation-duration: 6s;
19+
animation-delay: 2s;
20+
animation-iteration-count: infinite;
21+
}
22+
/* @keyframes learning {
23+
from {
24+
background: blue;
25+
width: 100px;
26+
height: 100px;
27+
}
28+
to {
29+
background: red;
30+
width: 400px;
31+
height: 400px;
32+
}
33+
} */
34+
@keyframes learning {
35+
0% {
36+
background: blue;
37+
width: 100px;
38+
height: 100px;
39+
}
40+
25% {
41+
background: aqua;
42+
width: 200px;
43+
height: 200px;
44+
}
45+
50% {
46+
background: red;
47+
width: 400px;
48+
height: 400px;
49+
}
50+
75% {
51+
background: violet;
52+
width: 100px;
53+
height: 100px;
54+
}
55+
100% {
56+
background: green;
57+
width: 100px;
58+
height: 100px;
59+
}
60+
}
61+
.parent {
62+
position: relative;
63+
width: 400px;
64+
height: 400px;
65+
}
66+
.two {
67+
background: #f5cd79;
68+
border: 3px solid #786fa6;
69+
width: 100px;
70+
height: 100px;
71+
border-radius: 50%;
72+
margin: 20px;
73+
position: absolute;
74+
animation-name: rounds;
75+
animation-duration: 5s;
76+
animation-iteration-count: infinite;
77+
animation-timing-function: ease-in-out;
78+
}
79+
@keyframes rounds {
80+
0% {
81+
left: 0;
82+
top: 0;
83+
}
84+
20% {
85+
left: 300px;
86+
top: 0;
87+
}
88+
40% {
89+
left: 300px;
90+
top: 300px;
91+
}
92+
75% {
93+
left: 0;
94+
top: 300px;
95+
}
96+
100% {
97+
left: 0;
98+
top: 0px;
99+
}
100+
}

0 commit comments

Comments
 (0)