Skip to content

Commit a8aafb7

Browse files
championswimmerchampionswimmer
committed
lec04: visiblity, pseudo class, combinators
Signed-off-by: Arnav Gupta <[email protected]>
1 parent 01d057f commit a8aafb7

File tree

8 files changed

+293
-1
lines changed

8 files changed

+293
-1
lines changed

‎Lecture02/HTMLBasics/iframes.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
this is a different page
1212
<br>
13-
<iframe
13+
<iframe frameborder="0"
1414
name="pagebox"
1515
height="400"
1616
width="600"

‎Lecture04/collapsible-list/index.html

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<ul>
11+
<li>
12+
sfh
13+
<ul>
14+
<li>kjgy</li>
15+
<li>kjgy</li>
16+
<li>
17+
kjgy
18+
<ul>
19+
<li>oboij</li>
20+
<li>oboij</li>
21+
<li>oboij</li>
22+
<li>oboij</li>
23+
</ul>
24+
</li>
25+
<li>kjgy</li>
26+
</ul>
27+
</li>
28+
<li>sfh</li>
29+
<li>
30+
sfh
31+
<ul>
32+
<li>kjgy</li>
33+
<li>kjgy</li>
34+
<li>
35+
kjgy
36+
<ul>
37+
<li>oboij</li>
38+
<li>oboij</li>
39+
<li>oboij</li>
40+
<li>oboij</li>
41+
</ul>
42+
</li>
43+
<li>kjgy</li>
44+
</ul>
45+
</li>
46+
<li>sfh</li>
47+
<li>sfh</li>
48+
<li>sfh</li>
49+
<li>sfh</li>
50+
<li>sfh</li>
51+
52+
53+
54+
</ul>
55+
</body>
56+
</html>

‎Lecture04/css-combinators/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+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Document</title>
8+
<link href="style.css" rel="stylesheet" />
9+
</head>
10+
<body>
11+
<p>This is a paragraph of text</p>
12+
<p>This is a paragraph of text</p>
13+
<div>
14+
This is simple div
15+
<span>with a span</span>
16+
</div>
17+
<ul>
18+
<li>a list</li>
19+
<li>of</li>
20+
<li>elements</li>
21+
</ul>
22+
<p>This is a paragraph of text</p>
23+
<p>
24+
This is a paragraph of text
25+
<span>containing a span</span>
26+
</p>
27+
<div>
28+
A nice little div
29+
<div>an inner div</div>
30+
<p>
31+
with a para in it
32+
</p>
33+
</div>
34+
35+
<div>
36+
this is a div
37+
38+
<ul>
39+
<li>item here</li>
40+
</ul>
41+
42+
<ul>
43+
<li>
44+
top level item
45+
<ul>
46+
<li>
47+
item in inner div
48+
</li>
49+
</ul>
50+
</li>
51+
</ul>
52+
</div>
53+
54+
<p>This is a paragraph of text</p>
55+
<div>This is simple div</div>
56+
<p>This is a paragraph of text</p>
57+
<p>This is a paragraph of text</p>
58+
<p>This is a paragraph of text</p>
59+
60+
<div class="outer">
61+
<div class="middle">
62+
<div class="inner">
63+
inner div
64+
</div>
65+
</div>
66+
</div>
67+
68+
<div class="outer">
69+
<div class="inner">
70+
inner div
71+
</div>
72+
</div>
73+
74+
<div class="inner">
75+
inner div
76+
</div>
77+
</body>
78+
</html>

‎Lecture04/css-combinators/style.css

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
div {
2+
color: red;
3+
}
4+
5+
div ~ p {
6+
color: blue;
7+
}
8+
9+
div > div {
10+
font-size: 18pt;
11+
}
12+
13+
div > ul > li {
14+
background-color: aqua;
15+
}
16+
17+
div > ul > li > ul > li {
18+
background-color: bisque;
19+
}
20+
21+
22+
.outer > .inner {
23+
font-style: italic;
24+
}

‎Lecture04/pseudo-selectors/index.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
12+
<div class="one">
13+
this is a div
14+
</div>
15+
16+
<input class="two">
17+
18+
</body>
19+
</html>

‎Lecture04/pseudo-selectors/style.css

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.one {
2+
height: 60px;
3+
width: 60px;
4+
background-color: silver;
5+
}
6+
7+
.one:hover {
8+
background-color: black;
9+
color: white;
10+
}
11+
12+
.one:active {
13+
background-color: white;
14+
color: red;
15+
}
16+
17+
.two:focus {
18+
font-size: 30pt;
19+
}

‎Lecture04/visibility/index.html

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
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+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Document</title>
8+
<link href="style.css" rel="stylesheet" />
9+
</head>
10+
<body>
11+
<p>This is a paragraph of text</p>
12+
<p>This is a paragraph of text</p>
13+
<div>
14+
This is simple div
15+
<span>with a span</span>
16+
</div>
17+
<ul>
18+
<li>a list</li>
19+
<li>of</li>
20+
<li>elements</li>
21+
</ul>
22+
<p>This is a paragraph of text</p>
23+
<p>
24+
This is a paragraph of text
25+
<span>containing a span</span>
26+
</p>
27+
<div>
28+
A nice little div
29+
<div>an inner div</div>
30+
<p>
31+
with a para in it
32+
</p>
33+
</div>
34+
35+
<div>
36+
this is a div
37+
38+
<ul>
39+
<li>item here</li>
40+
</ul>
41+
42+
<ul>
43+
<li>
44+
top level item
45+
<ul>
46+
<li>
47+
item in inner div
48+
</li>
49+
</ul>
50+
</li>
51+
</ul>
52+
</div>
53+
54+
<p>This is a paragraph of text</p>
55+
<div>This is simple div</div>
56+
<p>This is a paragraph of text</p>
57+
<p>This is a paragraph of text</p>
58+
<p>This is a paragraph of text</p>
59+
60+
<div class="outer">
61+
<div class="middle">
62+
<div class="inner">
63+
inner div
64+
</div>
65+
</div>
66+
</div>
67+
68+
<div class="outer">
69+
<div class="inner">
70+
inner div
71+
</div>
72+
</div>
73+
74+
<div class="inner">
75+
inner div
76+
</div>
77+
78+
<div class="tinydiv">hello</div>
79+
<div class="tinydiv">world</div>
80+
</body>
81+
</html>

‎Lecture04/visibility/style.css

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
div ul {
2+
visibility: hidden;
3+
}
4+
5+
div p {
6+
display: none;
7+
}
8+
9+
.tinydiv {
10+
display: inline-block;
11+
}
12+
13+
div {
14+
height: 30px
15+
}

0 commit comments

Comments
 (0)