Skip to content

Commit b557ce0

Browse files
HolmesMatthewHolmesMatthew
committed
adding lab2 and notes
1 parent f01d049 commit b557ce0

File tree

6 files changed

+309
-0
lines changed

6 files changed

+309
-0
lines changed

‎Code/matthew/html_css/labs/lab_1/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Batman</title>
8+
89
<link rel="stylesheet" href="style.css">
910
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300&family=PT+Sans:ital@1&family=Syne+Mono&display=swap" rel="stylesheet">
1011
</head>
@@ -16,6 +17,7 @@ <h1>Batman/Bruce Wayne</h1>
1617

1718
<br>
1819

20+
1921
<div class="line"></div>
2022

2123
<!-- <br> -->

‎Code/matthew/html_css/labs/lab_1/style.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,12 @@ blockquote {
6464

6565
a {
6666
color: rgb(173, 173, 121);
67+
6768
}
6869

6970
ul {
7071
list-style-type:circle;
72+
7173
}
7274

7375
.ext {

‎Code/matthew/html_css/labs/lab_2/index.htm‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="style.css" />
8+
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Permanent+Marker&display=swap" rel="stylesheet">
9+
<title>Blog</title>
10+
</head>
11+
12+
<body>
13+
<header>
14+
<h2><a id="top" href="">blog_name_me</a></h2>
15+
16+
<div ><a class="google" href="https://www.google.com/">Google</a></div>
17+
</header>
18+
19+
<div class="sidebar">
20+
21+
<aside>
22+
<a class='side' href="#top">Top</a>
23+
<a class='side' href="#introduction">Introduction</a>
24+
<a class='side' href="#footer">Bottom</a>
25+
</aside>
26+
27+
<div class="right">
28+
29+
<summary>
30+
<h3 id="#introduction">Introduction</h3>
31+
<br>
32+
<p class=intro>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae, doloribus aliquam ipsum quam quaerat minus a maxime culpa quae corporis, consequatur minima quos accusantium, necessitatibus fuga assumenda quis consectetur atque.</p>
33+
</summary>
34+
35+
<main>
36+
<div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit,
37+
atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis
38+
tenetur, labore sed rerum facere consequuntur ratione, eius possimus.
39+
</div>
40+
<div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit,
41+
atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis
42+
tenetur, labore sed rerum facere consequuntur ratione, eius possimus.
43+
</div>
44+
<div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit,
45+
atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis
46+
tenetur, labore sed rerum facere consequuntur ratione, eius possimus.
47+
</div>
48+
<div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit,
49+
atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis
50+
tenetur, labore sed rerum facere consequuntur ratione, eius possimus.
51+
</div>
52+
<div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit,
53+
atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis
54+
tenetur, labore sed rerum facere consequuntur ratione, eius possimus.
55+
</div>
56+
<div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit,
57+
atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis
58+
tenetur, labore sed rerum facere consequuntur ratione, eius possimus.
59+
</div>
60+
61+
</main>
62+
63+
<!--
64+
Im not sure why but the footer is only pushed to the bottom with this random div. I tried replacing it with a br but it gets pushed back up....
65+
-->
66+
</div>
67+
</div>
68+
69+
70+
<footer id="footer">
71+
<p>Matthew Holmes &copy; 2022</p>
72+
</footer>
73+
</body>
74+
</html>

‎Code/matthew/html_css/labs/lab_2/style.css‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
body {
2+
font-family: "indie Flower";
3+
display: flex;
4+
flex-wrap: wrap;
5+
border: 2px dashed black;
6+
flex-direction: column;
7+
min-height: 100vh;
8+
justify-content: space-between;
9+
background-image: linear-gradient(129deg, rgba(49, 49, 49, 0.47) 0%, rgba(49, 49, 49, 0.47) 12.5%,rgba(59, 59, 59, 0.47) 12.5%, rgba(59, 59, 59, 0.47) 25%,rgba(68, 68, 68, 0.47) 25%, rgba(68, 68, 68, 0.47) 37.5%,rgba(78, 78, 78, 0.47) 37.5%, rgba(78, 78, 78, 0.47) 50%,rgba(88, 88, 88, 0.47) 50%, rgba(88, 88, 88, 0.47) 62.5%,rgba(98, 98, 98, 0.47) 62.5%, rgba(98, 98, 98, 0.47) 75%,rgba(107, 107, 107, 0.47) 75%, rgba(107, 107, 107, 0.47) 87.5%,rgba(117, 117, 117, 0.47) 87.5%, rgba(117, 117, 117, 0.47) 100%),linear-gradient(329deg, rgb(25, 25, 25) 0%, rgb(25, 25, 25) 12.5%,rgb(44, 44, 44) 12.5%, rgb(44, 44, 44) 25%,rgb(63, 63, 63) 25%, rgb(63, 63, 63) 37.5%,rgb(82, 82, 82) 37.5%, rgb(82, 82, 82) 50%,rgb(100, 100, 100) 50%, rgb(100, 100, 100) 62.5%,rgb(119, 119, 119) 62.5%, rgb(119, 119, 119) 75%,rgb(138, 138, 138) 75%, rgb(138, 138, 138) 87.5%,rgb(157, 157, 157) 87.5%, rgb(157, 157, 157) 100%);
10+
11+
}
12+
header {
13+
background-color: rgb(80, 80, 80);
14+
15+
border: 2px solid black;
16+
display: flex;
17+
justify-content: space-between;
18+
height: 10vh;
19+
20+
}
21+
22+
h2 {
23+
margin: 0;
24+
font-family: "permanent Marker";
25+
}
26+
27+
#top {
28+
color: rgb(0, 0, 0);
29+
}
30+
.google {
31+
color: rgb(181, 185, 189);
32+
font-size: x-large;
33+
}
34+
.sidebar {
35+
display: flex;
36+
justify-content: space-evenly;
37+
}
38+
39+
aside {
40+
/* border: 3px dashed red; */
41+
display: flex;
42+
flex-direction: column;
43+
height: 100vh;
44+
width: 10vw;
45+
}
46+
.side {
47+
color: rgb(181, 185, 189);
48+
}
49+
50+
summary {
51+
/* border: 3px dashed red; */
52+
justify-content: center;
53+
display: flex;
54+
flex-wrap: wrap;
55+
text-align: center;
56+
align-items: center;
57+
margin: 10px;
58+
color: rgb(181, 185, 189);
59+
60+
}
61+
62+
63+
main {
64+
/* border: 2px solid green; */
65+
display: flex;
66+
flex-wrap: wrap;
67+
justify-content: space-evenly;
68+
color: rgb(159, 179, 195);
69+
}
70+
71+
.blog {
72+
text-align: center;
73+
margin: 15px;
74+
border: 2px solid rgb(0, 0, 0);
75+
border-radius: 10%;
76+
width: 225px;
77+
background-color: rgb(80, 80, 80);
78+
}
79+
80+
footer {
81+
background-color: rgb(56, 56, 68);
82+
color: whitesmoke;
83+
text-align: center;
84+
}

‎Code/matthew/html_css/lectures/5_semantic_elements/index.html‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>Semantic Elements</title>
9+
</head>
10+
<body>
11+
<header>
12+
<!-- First Child -->
13+
<h2>Class Kiwi</h2>
14+
<!-- Second Child -->
15+
<div class="links">
16+
<a href="">Class Repository</a>
17+
<a href="">PDX Code Guild</a>
18+
<a href="">About</a>
19+
</div>
20+
</header>
21+
22+
<!-- div.box*6 -->
23+
<!-- <section>
24+
<div class="box">1</div>
25+
<div class="box">2</div>
26+
<div class="box">3</div>
27+
<div class="box">4</div>
28+
<div class="box">5</div>
29+
<div class="box">6</div>
30+
</section> -->
31+
32+
<main>
33+
<div class="box">
34+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum
35+
consectetur sequi atque quidem quos est excepturi numquam, odio quisquam
36+
ex aut ab aspernatur laudantium, mollitia totam alias amet voluptatem
37+
soluta!
38+
</div>
39+
<div class="box">
40+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum
41+
consectetur sequi atque quidem quos est excepturi numquam, odio quisquam
42+
ex aut ab aspernatur laudantium, mollitia totam alias amet voluptatem
43+
soluta!
44+
</div>
45+
<div class="box">
46+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum
47+
consectetur sequi atque quidem quos est excepturi numquam, odio quisquam
48+
ex aut ab aspernatur laudantium, mollitia totam alias amet voluptatem
49+
soluta!
50+
</div>
51+
<div class="box">
52+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum
53+
consectetur sequi atque quidem quos est excepturi numquam, odio quisquam
54+
ex aut ab aspernatur laudantium, mollitia totam alias amet voluptatem
55+
soluta!
56+
</div>
57+
<div class="box">
58+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum
59+
consectetur sequi atque quidem quos est excepturi numquam, odio quisquam
60+
ex aut ab aspernatur laudantium, mollitia totam alias amet voluptatem
61+
soluta!
62+
</div>
63+
<div class="box">
64+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum
65+
consectetur sequi atque quidem quos est excepturi numquam, odio quisquam
66+
ex aut ab aspernatur laudantium, mollitia totam alias amet voluptatem
67+
soluta!
68+
</div>
69+
</main>
70+
71+
<footer>
72+
<p>&rarr; Class Kiwi &copy; 2022 &larr;</p>
73+
</footer>
74+
</body>
75+
</html>
76+
77+
<!--
78+
<div>Hello World</div>
79+
Semantic Elements: named divs
80+
<header>This is the Header</header>
81+
<article>This is an article</article>
82+
<footer>This is a footer</footer>
83+
<aside>this is a sidebar</aside>
84+
<details></details>
85+
<main></main>
86+
<nav></nav>
87+
<section></section>
88+
<summary></summary>
89+
<make_your_own_name></make_your_own_name>
90+
-->

‎Code/matthew/html_css/lectures/5_semantic_elements/style.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
body {
2+
display: flex;
3+
flex-direction: column;
4+
justify-content: space-between;
5+
min-height: 100vh;
6+
}
7+
8+
header {
9+
border: 2px solid cyan;
10+
display: flex;
11+
/* Horizontal positioning */
12+
justify-content: space-between;
13+
/* Vertical positioning */
14+
/* align-items: flex-start; */
15+
}
16+
17+
h2 {
18+
margin: 0;
19+
/* display: inline; */
20+
/* float: left; */
21+
}
22+
a {
23+
/* float: right; */
24+
}
25+
26+
27+
main {
28+
display: flex;
29+
flex-wrap: wrap;
30+
justify-content: space-evenly;
31+
}
32+
33+
.box {
34+
border: 2px solid black;
35+
background-color: aqua;
36+
text-align: center;
37+
font-size: 16px;
38+
width: 300px;
39+
margin: 12px 0;
40+
}
41+
42+
footer {
43+
background-color: black;
44+
color: antiquewhite;
45+
text-align: center;
46+
}
47+
section {
48+
border: 2px solid red;
49+
display: flex;
50+
/* position children in a column */
51+
flex-direction: column;
52+
height: 400px;
53+
/* When in a column, justify-content is vertical positioning */
54+
justify-content: space-between;
55+
/* When in a column, align-items is horizontal positioning */
56+
align-items: center;
57+
}

0 commit comments

Comments
 (0)