Skip to content

Commit 7c32cf8

Browse files
jacobtranjacobtran
committed
add day 8 files
1 parent 9ea45a3 commit 7c32cf8

18 files changed

+10751
-0
lines changed

‎day_7/7_flex_exercise.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Flex!!!</title>
6+
<style>
7+
.container {
8+
padding: 10px;
9+
background-color: teal;
10+
border: thick solid black;
11+
border-radius: 5px;
12+
display: flex;
13+
justify-content: space-around;
14+
align-items: center;
15+
flex-direction: row-reverse;
16+
height: 500px;
17+
}
18+
.item {
19+
width: 100px;
20+
height: 100px;
21+
background-color: firebrick;
22+
border-radius: 5px;
23+
margin: 10px;
24+
/* float: left; */
25+
/* display: inline-block; */
26+
color: white;
27+
font-size: 20px;
28+
font-weight: bold;
29+
flex-shrink: 0;
30+
}
31+
.item:nth-child(2) {
32+
background-color: pink;
33+
}
34+
#item6 {
35+
display: flex;
36+
align-self: flex-end;
37+
order: 0;
38+
}
39+
#item5 {
40+
display: flex;
41+
align-self: center;
42+
order: 0;
43+
}
44+
#item4 {
45+
display: flex;
46+
align-self: flex-start;
47+
}
48+
#item3 {
49+
display: flex;
50+
align-self: flex-start;
51+
}
52+
#item1 {
53+
display: flex;
54+
align-self: flex-end;
55+
}
56+
</style>
57+
</head>
58+
<body>
59+
<div class="container">
60+
<div id="item1" class="item">1</div>
61+
<div id="item2" class="item">2</div>
62+
<div id="item3" class="item">3</div>
63+
<div id="item4" class="item">4</div>
64+
<div id="item5" class="item">5</div>
65+
<div id="item6" class="item">6</div>
66+
</div>
67+
</body>
68+
</html>

‎day_8/0_zindex.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Z Index</title>
6+
<style>
7+
img {
8+
position: absolute;
9+
top: 0px;
10+
left: 0px;
11+
}
12+
#puppy {
13+
z-index: -1;
14+
}
15+
#kitty {
16+
z-index: -2;
17+
}
18+
</style>
19+
</head>
20+
<body>
21+
<img id="puppy" src="puppy.png" />
22+
<img id="kitty" src="kitten.jpg" />
23+
</body>
24+
</html>

‎day_8/1_flex.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Flex!!!</title>
6+
<style>
7+
.container {
8+
padding: 10px;
9+
background-color: teal;
10+
border: thick solid black;
11+
border-radius: 5px;
12+
display: flex;
13+
justify-content: space-around;
14+
align-items: center;
15+
flex-direction: row-reverse;
16+
height: 500px;
17+
}
18+
.item {
19+
width: 100px;
20+
height: 100px;
21+
background-color: firebrick;
22+
border-radius: 5px;
23+
margin: 10px;
24+
/* float: left; */
25+
/* display: inline-block; */
26+
color: white;
27+
font-size: 20px;
28+
font-weight: bold;
29+
flex-shrink: 0;
30+
}
31+
#item1 {
32+
display: flex;
33+
align-self: flex-end;
34+
}
35+
</style>
36+
</head>
37+
<body>
38+
<div class="container">
39+
<div id="item1" class="item">1</div>
40+
<div class="item">2</div>
41+
<div class="item">3</div>
42+
<div class="item">4</div>
43+
<div class="item">5</div>
44+
<div class="item">6</div>
45+
</div>
46+
</body>
47+
</html>

‎day_8/2_menu.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Menu</title>
6+
<style>
7+
.vg {
8+
border: thin red solid;
9+
}
10+
ul {
11+
display: flex;
12+
list-style: none;
13+
}
14+
li {
15+
padding: 20px;
16+
}
17+
a {
18+
text-decoration: none;
19+
color: grey;
20+
font-family: Helvetica;
21+
}
22+
a:hover {
23+
text-decoration: underline;
24+
font-weight: bold;
25+
}
26+
</style>
27+
</head>
28+
<body>
29+
<ul>
30+
<li><a href="#">Home</a></li>
31+
<li><a href="#">About</a></li>
32+
<li><a href="#">Portfolio</a></li>
33+
<li><a href="#">Contact</a></li>
34+
</ul>
35+
</body>
36+
</html>

‎day_8/3_media.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Menu</title>
6+
<style>
7+
/* @ */
8+
/* @import "style2.css"; */
9+
/* @font-face - google fonts */
10+
/* media query */
11+
@media (max-width: 700px) {
12+
body {
13+
background-color: purple;
14+
}
15+
16+
ul {
17+
/* we don't need to specify these because they are already defined below */
18+
/* display: flex; */
19+
/* list-style: none; */
20+
/* we simply add/modify the existing property with this media query */
21+
flex-direction: column;
22+
}
23+
}
24+
25+
.vg {
26+
border: thin red solid;
27+
}
28+
ul {
29+
display: flex;
30+
list-style: none;
31+
}
32+
li {
33+
padding: 20px;
34+
}
35+
a {
36+
text-decoration: none;
37+
color: grey;
38+
font-family: Helvetica;
39+
}
40+
a:hover {
41+
text-decoration: underline;
42+
font-weight: bold;
43+
}
44+
</style>
45+
</head>
46+
<body>
47+
<ul>
48+
<li><a href="#">Home</a></li>
49+
<li><a href="#">About</a></li>
50+
<li><a href="#">Portfolio</a></li>
51+
<li><a href="#">Gallery</a></li>
52+
<li><a href="#">Newsletter</a></li>
53+
<li><a href="#">Donation</a></li>
54+
<li><a href="#">Contact</a></li>
55+
</ul>
56+
</body>
57+
</html>

‎day_8/4_devices.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Menu</title>
6+
<style>
7+
/* @ */
8+
/* @import "style2.css"; */
9+
/* @font-face - google fonts */
10+
/* media query */
11+
/* // Extra small devices (portrait phones, less than 576px) */
12+
/* // No media query since this is the default in Bootstrap */
13+
14+
/* // Small devices (landscape phones, 576px and up) */
15+
@media (min-width: 0) { body { background-color: blue } }
16+
17+
@media (min-width: 576px) { body { background-color: red } }
18+
19+
/* // Medium devices (tablets, 768px and up) */
20+
@media (min-width: 768px) { body { background-color: orange } }
21+
22+
/* // Large devices (desktops, 992px and up) */
23+
@media (min-width: 992px) { body { background-color: yellow } }
24+
25+
/* // Extra large devices (large desktops, 1200px and up) */
26+
@media (min-width: 1200px) { body { background-color: green } }
27+
28+
.vg {
29+
border: thin red solid;
30+
}
31+
ul {
32+
display: flex;
33+
list-style: none;
34+
}
35+
li {
36+
padding: 20px;
37+
}
38+
a {
39+
text-decoration: none;
40+
color: grey;
41+
font-family: Helvetica;
42+
}
43+
a:hover {
44+
text-decoration: underline;
45+
font-weight: bold;
46+
}
47+
</style>
48+
</head>
49+
<body>
50+
<ul>
51+
<li><a href="#">Home</a></li>
52+
<li><a href="#">About</a></li>
53+
<li><a href="#">Portfolio</a></li>
54+
<li><a href="#">Gallery</a></li>
55+
<li><a href="#">Newsletter</a></li>
56+
<li><a href="#">Donation</a></li>
57+
<li><a href="#">Contact</a></li>
58+
</ul>
59+
</body>
60+
</html>

‎day_8/5_grids.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Grids</title>
6+
<style>
7+
.container {
8+
display: grid;
9+
grid-template-columns: 33.33% 33.33% 33.33%;
10+
grid-template-rows: 33.33% 33.33% 33.33%;
11+
}
12+
.item {
13+
border: thick dashed maroon;
14+
grid-row: auto;
15+
grid-column: auto;
16+
}
17+
</style>
18+
</head>
19+
<body>
20+
<div class="container">
21+
<div class="item">a</div>
22+
<div class="item">b</div>
23+
<div class="item">c</div>
24+
25+
<div class="item">d</div>
26+
<div class="item">e</div>
27+
<div class="item">f</div>
28+
29+
<div class="item">g</div>
30+
<div class="item">h</div>
31+
<div class="item">i</div>
32+
</div>
33+
</body>
34+
</html>

‎day_8/6_responsive_design.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Responsive Design</title>
6+
</head>
7+
<body>
8+
9+
</body>
10+
</html>

0 commit comments

Comments
 (0)