Skip to content

Commit e6e39f1

Browse files
raghavvvgabaraghavvvgaba
committed
Initial commit
0 parents  commit e6e39f1

File tree

50 files changed

+1651
-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.

50 files changed

+1651
-0
lines changed

Diff for: ‎.gitattributes

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto

Diff for: ‎25. Styling Lists using CSS/index.html

+27
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>CSS Lists</title>
7+
<style>
8+
nav ul{
9+
list-style: devanagari;
10+
background-color: aqua;
11+
list-style-position: inside;
12+
list-style-type: "✅";
13+
display: flex;
14+
padding: 10px;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<nav>
20+
<ul>
21+
<li>Home</li>
22+
<li>About</li>
23+
<li>Contact</li>
24+
</ul>
25+
</nav>
26+
</body>
27+
</html>

Diff for: ‎26. CSS Overflow/index.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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>CSS Overflow</title>
7+
<style>
8+
.box{
9+
border: 2px solid black;
10+
padding: 23px;
11+
margin: 23px;
12+
height: 100px;
13+
overflow: auto;
14+
}
15+
.box2{
16+
padding: 23px;
17+
border: 2px solid black;
18+
margin: 23px;
19+
overflow: scroll hidden;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<div class="box">
25+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam minus eos aut facilis voluptatem ratione, nulla quibusdam odit a neque fugiat aliquid, dolorem dolores amet! Inventore molestiae quod magni suscipit quasi quas deleniti omnis cumque a ipsa est, explicabo, facere, cum architecto veniam repellat nostrum iure atque. Consectetur ratione minus laboriosam explicabo velit optio sed voluptas qui quo? Esse labore modi inventore quod placeat consequuntur iusto sint porro, nobis voluptatum nisi voluptas ut illum dolorem neque doloribus fugiat natus magnam vel! Quasi labore nam esse quam, aperiam corporis sed, unde est blanditiis, praesentium error inventore exercitationem fugiat quos asperiores. Hic?
26+
</div>
27+
<div class="box2">
28+
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Saepe quis consequuntur repudiandae aliquid accusantium, est in quibusdam asperiores provident laudantium explicabo eum praesentium neque, impedit natus sunt, voluptas velit voluptatem vitae iusto mollitia culpa? Officiis iusto eligendi dolore porro assumenda praesentium deserunt totam nulla rerum deleniti asperiores atque placeat animi amet eveniet repellendus, beatae quidem iste.
29+
</div>
30+
</body>
31+
</html>

Diff for: ‎28. Position Property/index.html

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
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>Position Property</title>
7+
<style>
8+
*{
9+
margin: 0;
10+
padding: 0;
11+
}
12+
.mainbox{
13+
border: 2px solid brown;
14+
padding: 43px;
15+
margin: 34px;
16+
height: 50vh;
17+
overflow-y: scroll;
18+
}
19+
.box{
20+
height: 433px;
21+
width: 100%;
22+
margin: 10px;
23+
padding: 3px;
24+
border: 2px solid black;
25+
}
26+
.box1{
27+
background-color: antiquewhite;
28+
position: sticky;
29+
top: 0;
30+
height: 133px;
31+
}
32+
.box2{
33+
background-color: aqua;
34+
}
35+
.box3{
36+
background-color: burlywood;
37+
}
38+
.box4{
39+
background-color: purple;
40+
}
41+
</style>
42+
</head>
43+
<body>
44+
<div class="mainbox">
45+
<div class="box box1"></div>
46+
<div class="box box2"></div>
47+
<div class="box box3"></div>
48+
<div class="box box4"></div>
49+
</div>
50+
</body>
51+
</html>

Diff for: ‎28. Position Property/index2.html

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
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 Position</title>
8+
<style>
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
}
13+
14+
.box {
15+
height: 433px;
16+
width: 80vw;
17+
padding: 3px;
18+
margin: 3px;
19+
border: 2px solid black;
20+
}
21+
22+
.box1 {
23+
background-color: aqua;
24+
/* position: sticky;
25+
top:0px;
26+
height: 111px;
27+
width:100%;
28+
margin: 0;
29+
padding: 0; */
30+
position: absolute;
31+
top: 0px;
32+
left:3px;
33+
}
34+
35+
.box2 {
36+
background-color: azure;
37+
/* position: relative;
38+
top: 34px;
39+
left: 56px; */
40+
}
41+
42+
.box3 {
43+
background-color: antiquewhite;
44+
/* position: fixed;
45+
bottom: 0px;
46+
left:8vw;
47+
height: 111px; */
48+
}
49+
50+
.box4 {
51+
background-color: purple;
52+
}
53+
54+
55+
56+
.parent {
57+
padding: 43px;
58+
margin: 34px;
59+
border: 3px solid purple;
60+
/* position: relative; */
61+
62+
63+
/* Exception: transform, filter, or perspective properties can also make an element appear as positioned */
64+
/* transform: translate(0); */
65+
/* filter: invert(0); */
66+
/* perspective: 0em; */
67+
}
68+
</style>
69+
</head>
70+
71+
<body>
72+
<div class="parent">
73+
<div class="box box1"></div>
74+
<div class="box box2"></div>
75+
<div class="box box3"></div>
76+
<div class="box box4"></div>
77+
</div>
78+
</body>
79+
80+
</html>

Diff for: ‎29. Exercise 3/card.png

240 KB
Loading

Diff for: ‎29. Exercise 3/index.html

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
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+
padding: 0;
10+
margin: 0;
11+
}
12+
.box{
13+
height: 95vh;
14+
width: 65vh;
15+
border: 2px solid grey;
16+
border-radius: 20px;
17+
margin: 5px;
18+
position: relative;
19+
left: 115px;
20+
}
21+
.b1{
22+
border: 1px solid lightgray;
23+
margin: 5px;
24+
padding: 5px;
25+
border-radius: 20px;
26+
position: relative;
27+
top:350px;
28+
left: 24px;
29+
text-align: center;
30+
31+
}
32+
.b2{
33+
border: 1px solid lightgray;
34+
margin: 5px;
35+
padding: 5px;
36+
border-radius: 20px;
37+
position: relative;
38+
top:350px;
39+
left: 24px;
40+
text-align: center;
41+
42+
}
43+
.card-content{
44+
padding: 7px;
45+
margin: 6px;
46+
position: relative;
47+
top: 350px;
48+
}
49+
.card-link{
50+
border: 1px solid rgb(138, 138, 239);
51+
52+
color: blue;
53+
text-align: center;
54+
padding: 0;
55+
margin: 180px;
56+
position: relative;
57+
top: 170px;
58+
right: 10px;
59+
border-radius: 50px;
60+
}
61+
</style>
62+
</head>
63+
<body>
64+
<div class="box">
65+
<span class="b1">
66+
Nature
67+
</span>
68+
<span class="b2">
69+
Lake
70+
</span>
71+
<div class="card-content">
72+
<h2>Lago di Braies</h2>
73+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione beatae, quod natus esse ut reprehenderit aperiam expedita inventore magnam laboriosam quidem architecto aspernatur?</p>
74+
</div>
75+
<div class="card-link">Read More</div>
76+
</div>
77+
</body>
78+
</html>

Diff for: ‎29. Exercise 3/index2.html

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
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+
body{
9+
background-color: lightgray;
10+
}
11+
.card{
12+
background-color: white;
13+
height: 500px;
14+
width: 350px;
15+
padding: 10px;
16+
margin: 70px;
17+
border-radius: 20px;
18+
}
19+
.image{
20+
padding: 25px;
21+
width: 1px;
22+
}
23+
.image img{
24+
width: 300px;
25+
border-radius: 20px;
26+
}
27+
.capsule{
28+
padding: 0px 34px;
29+
}
30+
.capsule span{
31+
border: 1px solid gray;
32+
padding: 5px;
33+
border-radius: 10px;
34+
}
35+
.card-content{
36+
margin: 20px;
37+
padding: 0 34px 0 14px;
38+
}
39+
.capsule2{
40+
margin: 20px;
41+
padding: 0 110px 0 110px;
42+
}
43+
.capsule2 button{
44+
padding: 5px;
45+
border: 2px solid rgba(54, 54, 255, 0.373);
46+
border-radius: 20px;
47+
color: blue;
48+
background-color:rgba(54, 54, 255, 0.373) ;
49+
}
50+
</style>
51+
</head>
52+
<body>
53+
<div class="card">
54+
<div class="image">
55+
<img src="https://static.standard.co.uk/s3fs-public/thumbnails/image/2019/03/05/11/sei26139543-1-0.jpg?crop=8:5,smart&quality=75&auto=webp&width=960" alt="image">
56+
</div>
57+
<div class="capsule">
58+
<span>Nature</span>
59+
<span>Lake</span>
60+
</div>
61+
<div class="card-content">
62+
<h2>Raghav Gaba</h2>
63+
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia placeat eius deleniti consectetur provident modi saepe velit perspiciatis ab delectus. Temporibus, officiis dolorem.</p>
64+
</div>
65+
<div class="capsule2">
66+
<button>Read More</button>
67+
</div>
68+
</div>
69+
</body>
70+
</html>

0 commit comments

Comments
 (0)