Skip to content

Commit ebf0505

Browse files
HolmesMatthewHolmesMatthew
committed
adding lab 1
1 parent 03b9101 commit ebf0505

File tree

10 files changed

+263
-36
lines changed

10 files changed

+263
-36
lines changed

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

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
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+
<title>Batman</title>
8+
<link rel="stylesheet" href="style.css">
9+
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300&family=PT+Sans:ital@1&family=Syne+Mono&display=swap" rel="stylesheet">
10+
</head>
11+
<body>
12+
13+
<div class='banner'>
14+
<h1>Batman/Bruce Wayne</h1>
15+
</div>
16+
17+
<!-- <br> -->
18+
<div class="intro">
19+
<div class="background">
20+
21+
<div class="picture">
22+
23+
<img src="https://images.unsplash.com/photo-1531259683007-016a7b628fc3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80"
24+
alt="A picture of batman">
25+
26+
<blockquote>“No miracles...No mercy...No redemption...No heaven...No hell...No higher power. Just life. Just... us.” -Batman</blockquote>
27+
28+
</div>
29+
30+
<h2>Introduction</h2>
31+
<p>
32+
Batman is a superhero appearing in American comic books published by DC Comics. The character was created
33+
by artist Bob Kane and writer Bill Finger, and debuted in the 27th issue of the comic book Detective Comics on
34+
March 30, 1939. In the DC Universe continuity, Batman is the alias of Bruce Wayne, a wealthy American playboy,
35+
philanthropist, and industrialist who resides in Gotham City. Batman's origin story features him swearing vengeance
36+
against criminals after witnessing the murder of his parents Thomas and Martha, a vendetta tempered with the ideal of justice.
37+
He trains himself physically and intellectually, crafts a bat-inspired persona, and monitors the Gotham streets at night.
38+
Kane, Finger, and other creators accompanied Batman with supporting characters, including his sidekicks Robin and Batgirl; allies
39+
Alfred Pennyworth, James Gordon, and Catwoman; and foes such as the Penguin, the Riddler, Two-Face, and his archenemy the Joker.
40+
Kane conceived Batman in early 1939 to capitalize on the popularity of DC's Superman; although Kane frequently claimed sole creation
41+
credit, Finger substantially developed the concept from a generic superhero into something more bat-like. The character received his
42+
own spin-off publication, Batman, in 1940. Batman was originally introduced as a ruthless vigilante who frequently killed or maimed
43+
criminals, but evolved into a character with a stringent moral code and strong sense of justice. Unlike most superheroes, Batman
44+
does not possess any superpowers, instead relying on his intellect, fighting skills, and wealth. The 1960s Batman television series
45+
used a camp aesthetic, which continued to be associated with the character for years after the show ended. Various creators
46+
worked to return the character to his darker roots in the 1970s and 1980s, culminating with the 1986 miniseries The Dark
47+
Knight Returns by Frank Miller.
48+
49+
DC has featured Batman in many comic books, including comics published under its imprints such as Vertigo and Black Label.
50+
The longest-running Batman comic, Detective Comics, is the longest-running comic book in the United States. Batman is frequently
51+
depicted alongside other DC superheroes, such as Superman and Wonder Woman, as a member of organizations such as the Justice
52+
League and the Outsiders. In addition to Bruce Wayne, other characters have taken on the Batman persona on different occasions,
53+
such as Jean-Paul Valley / Azrael in the 1993–1994 "Knightfall" story arc; Dick Grayson, the first Robin, from 2009 to 2011;
54+
and Jace Fox, son of Wayne's ally Lucius, as of 2021.[4] DC has also published comics featuring alternate versions of Batman,
55+
including the incarnation seen in The Dark Knight Returns and its successors, the incarnation from the Flashpoint (2011) event,
56+
and numerous interpretations from Elseworlds stories.
57+
58+
One of the most iconic characters in popular culture, Batman has been listed among the greatest comic book superheroes and
59+
fictional characters ever created. He is one of the most commercially successful superheroes, and his likeness has been licensed
60+
and featured in various media and merchandise sold around the world; this includes toy lines such as Lego Batman and video games
61+
like the Batman: Arkham series. Batman has been adapted in live-action and animated incarnations, including the 1960s Batman
62+
television series played by Adam West and in film by Michael Keaton in Batman (1989), Batman Returns (1992) and The Flash (2022),
63+
Christian Bale in The Dark Knight trilogy (2005–2012), Ben Affleck in the DC Extended Universe (2016–present), and Robert Pattinson
64+
in The Batman (2022). Kevin Conroy, Jason O'Mara, and Will Arnett, among others, have provided the character's voice.
65+
</p>
66+
67+
</div>
68+
</div>
69+
70+
<br>
71+
72+
<a href="https://en.wikipedia.org/wiki/Batman">Here is a link to learn more</a>
73+
74+
<br>
75+
76+
<h2>Places of residence</h2>
77+
78+
<ul>
79+
<li>Old Wayne Manor</li>
80+
<li>New Wayne Manor</li>
81+
</ul>
82+
83+
84+
</body>
85+
</html>

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
body {
2+
background-image: linear-gradient(161deg, rgba(121, 121, 121, 0.02) 0%, rgba(121, 121, 121, 0.02) 16.667%,rgba(193, 193, 193, 0.02) 16.667%, rgba(193, 193, 193, 0.02) 33.334%,rgba(177, 177, 177, 0.02) 33.334%, rgba(177, 177, 177, 0.02) 50.001000000000005%,rgba(5, 5, 5, 0.02) 50.001%, rgba(5, 5, 5, 0.02) 66.668%,rgba(229, 229, 229, 0.02) 66.668%, rgba(229, 229, 229, 0.02) 83.33500000000001%,rgba(211, 211, 211, 0.02) 83.335%, rgba(211, 211, 211, 0.02) 100.002%),linear-gradient(45deg, rgba(223, 223, 223, 0.02) 0%, rgba(223, 223, 223, 0.02) 14.286%,rgba(70, 70, 70, 0.02) 14.286%, rgba(70, 70, 70, 0.02) 28.572%,rgba(109, 109, 109, 0.02) 28.572%, rgba(109, 109, 109, 0.02) 42.858%,rgba(19, 19, 19, 0.02) 42.858%, rgba(19, 19, 19, 0.02) 57.144%,rgba(180, 180, 180, 0.02) 57.144%, rgba(180, 180, 180, 0.02) 71.42999999999999%,rgba(63, 63, 63, 0.02) 71.43%, rgba(63, 63, 63, 0.02) 85.71600000000001%,rgba(87, 87, 87, 0.02) 85.716%, rgba(87, 87, 87, 0.02) 100.002%),linear-gradient(337deg, rgba(142, 142, 142, 0.02) 0%, rgba(142, 142, 142, 0.02) 20%,rgba(164, 164, 164, 0.02) 20%, rgba(164, 164, 164, 0.02) 40%,rgba(203, 203, 203, 0.02) 40%, rgba(203, 203, 203, 0.02) 60%,rgba(228, 228, 228, 0.02) 60%, rgba(228, 228, 228, 0.02) 80%,rgba(54, 54, 54, 0.02) 80%, rgba(54, 54, 54, 0.02) 100%),linear-gradient(314deg, rgba(187, 187, 187, 0.02) 0%, rgba(187, 187, 187, 0.02) 12.5%,rgba(170, 170, 170, 0.02) 12.5%, rgba(170, 170, 170, 0.02) 25%,rgba(214, 214, 214, 0.02) 25%, rgba(214, 214, 214, 0.02) 37.5%,rgba(187, 187, 187, 0.02) 37.5%, rgba(187, 187, 187, 0.02) 50%,rgba(190, 190, 190, 0.02) 50%, rgba(190, 190, 190, 0.02) 62.5%,rgba(6, 6, 6, 0.02) 62.5%, rgba(6, 6, 6, 0.02) 75%,rgba(206, 206, 206, 0.02) 75%, rgba(206, 206, 206, 0.02) 87.5%,rgba(171, 171, 171, 0.02) 87.5%, rgba(171, 171, 171, 0.02) 100%),linear-gradient(300deg, rgba(243, 243, 243, 0.01) 0%, rgba(243, 243, 243, 0.01) 12.5%,rgba(209, 209, 209, 0.01) 12.5%, rgba(209, 209, 209, 0.01) 25%,rgba(179, 179, 179, 0.01) 25%, rgba(179, 179, 179, 0.01) 37.5%,rgba(3, 3, 3, 0.01) 37.5%, rgba(3, 3, 3, 0.01) 50%,rgba(211, 211, 211, 0.01) 50%, rgba(211, 211, 211, 0.01) 62.5%,rgba(151, 151, 151, 0.01) 62.5%, rgba(151, 151, 151, 0.01) 75%,rgba(16, 16, 16, 0.01) 75%, rgba(16, 16, 16, 0.01) 87.5%,rgba(242, 242, 242, 0.01) 87.5%, rgba(242, 242, 242, 0.01) 100%),linear-gradient(6deg, rgba(31, 31, 31, 0.02) 0%, rgba(31, 31, 31, 0.02) 20%,rgba(193, 193, 193, 0.02) 20%, rgba(193, 193, 193, 0.02) 40%,rgba(139, 139, 139, 0.02) 40%, rgba(139, 139, 139, 0.02) 60%,rgba(14, 14, 14, 0.02) 60%, rgba(14, 14, 14, 0.02) 80%,rgba(122, 122, 122, 0.02) 80%, rgba(122, 122, 122, 0.02) 100%),linear-gradient(279deg, rgba(190, 190, 190, 0.02) 0%, rgba(190, 190, 190, 0.02) 14.286%,rgba(160, 160, 160, 0.02) 14.286%, rgba(160, 160, 160, 0.02) 28.572%,rgba(23, 23, 23, 0.02) 28.572%, rgba(23, 23, 23, 0.02) 42.858%,rgba(60, 60, 60, 0.02) 42.858%, rgba(60, 60, 60, 0.02) 57.144%,rgba(149, 149, 149, 0.02) 57.144%, rgba(149, 149, 149, 0.02) 71.42999999999999%,rgba(4, 4, 4, 0.02) 71.43%, rgba(4, 4, 4, 0.02) 85.71600000000001%,rgba(50, 50, 50, 0.02) 85.716%, rgba(50, 50, 50, 0.02) 100.002%),linear-gradient(109deg, rgba(124, 124, 124, 0.03) 0%, rgba(124, 124, 124, 0.03) 12.5%,rgba(61, 61, 61, 0.03) 12.5%, rgba(61, 61, 61, 0.03) 25%,rgba(187, 187, 187, 0.03) 25%, rgba(187, 187, 187, 0.03) 37.5%,rgba(207, 207, 207, 0.03) 37.5%, rgba(207, 207, 207, 0.03) 50%,rgba(206, 206, 206, 0.03) 50%, rgba(206, 206, 206, 0.03) 62.5%,rgba(118, 118, 118, 0.03) 62.5%, rgba(118, 118, 118, 0.03) 75%,rgba(89, 89, 89, 0.03) 75%, rgba(89, 89, 89, 0.03) 87.5%,rgba(96, 96, 96, 0.03) 87.5%, rgba(96, 96, 96, 0.03) 100%),linear-gradient(329deg, rgba(35, 35, 35, 0.02) 0%, rgba(35, 35, 35, 0.02) 20%,rgba(246, 246, 246, 0.02) 20%, rgba(246, 246, 246, 0.02) 40%,rgba(118, 118, 118, 0.02) 40%, rgba(118, 118, 118, 0.02) 60%,rgba(245, 245, 245, 0.02) 60%, rgba(245, 245, 245, 0.02) 80%,rgba(140, 140, 140, 0.02) 80%, rgba(140, 140, 140, 0.02) 100%),linear-gradient(90deg, hsl(314,0%,31%),hsl(314,0%,31%));
3+
background-size: 16%;
4+
color: rgb(194, 194, 187);
5+
font-family: 'pt sans';
6+
vertical-align: middle;
7+
8+
}
9+
.banner {
10+
/* border: 2px solid red; */
11+
width: 100%;
12+
height: 100px;
13+
text-align: center;
14+
vertical-align: top;
15+
}
16+
17+
18+
h1, h2 {
19+
color: black ;
20+
font-family: "oswald";
21+
}
22+
.intro {
23+
24+
/* height: ; */
25+
margin: 0px;
26+
padding: 20px;
27+
clear: right;
28+
}
29+
30+
.picture {
31+
/* border: 2px solid red; */
32+
width: 35% ;
33+
/* height: 500px; */
34+
float :right;
35+
vertical-align: text-top;
36+
37+
}
38+
39+
img {
40+
width:100%;
41+
margin: 10px;
42+
border-radius: 20px;
43+
44+
}
45+
46+
blockquote {
47+
float: right;
48+
font-family: 'syne mono';
49+
color: black;
50+
}
51+
52+
a {
53+
color: rgb(173, 173, 121);
54+
}

‎Code/matthew/html_css/lectures/hello_world/index.html‎ renamed to ‎Code/matthew/html_css/lectures/1_hello_world/index.html‎

File renamed without changes.

‎Code/matthew/html_css/lectures/kiwi_profile/index.html‎ renamed to ‎Code/matthew/html_css/lectures/2_kiwi_profile/index.html‎

File renamed without changes.

‎Code/matthew/html_css/lectures/kiwi_profile/styles.css‎ renamed to ‎Code/matthew/html_css/lectures/2_kiwi_profile/styles.css‎

File renamed without changes.

‎Code/matthew/html_css/lectures/element_types/index.html‎ renamed to ‎Code/matthew/html_css/lectures/3_element_types/index.html‎

File renamed without changes.

‎Code/matthew/html_css/lectures/4_css_properties/Kiwi.jpeg‎

49.5 KB
Loading

‎Code/matthew/html_css/lectures/4_css_properties/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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+
<title>CSS Properties</title>
8+
<link rel="stylesheet" href="styles.css">
9+
</head>
10+
<body>
11+
<!-- using lorem emmit -->
12+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae fuga vero autem,
13+
reiciendis in animi explicabo a iure facere veritatis ullam molestiae cumque mollitia quod
14+
neque error non rerum doloribus.</p>
15+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae fuga vero autem,
16+
reiciendis in animi explicabo a iure facere veritatis ullam molestiae cumque mollitia quod
17+
neque error non rerum doloribus.</p>
18+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae fuga vero autem,
19+
reiciendis in animi explicabo a iure facere veritatis ullam molestiae cumque mollitia quod
20+
neque error non rerum doloribus.</p>
21+
22+
<div class="parent">
23+
<div class="child">This is the child element 1</div>
24+
<div class="background"></div>
25+
</div>
26+
27+
<div class="parent-2">
28+
<div class="child-2">This is the child element 2</div>
29+
<div class="background"></div>
30+
31+
</body>
32+
</html>

‎Code/matthew/html_css/lectures/4_css_properties/styles.css‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
body {
2+
/* Background color */
3+
4+
background-color: slategray;
5+
}
6+
7+
p {
8+
/* Font color */
9+
10+
/* color: tomato; */
11+
/* color: hsl(196, 54%, 70%) */
12+
/* color: whitesmoke; */
13+
/* rgb(71, 163, 196) */
14+
15+
color: #47a3c4; /* using Hex code from googling color picker */
16+
17+
background-color: #685d5d;
18+
19+
/* Font size */
20+
21+
font-size: 20px;
22+
}
23+
24+
.parent {
25+
/* Borders */
26+
27+
border: 2px solid #e2e2e2;
28+
/* width: 500px;
29+
height: 300px; */
30+
}
31+
32+
.child {
33+
border: 4px dashed tomato;
34+
width: 200px;
35+
height: 150px;
36+
margin: 10px 20px;
37+
38+
/* Text alignment */
39+
text-align: center;
40+
41+
/* Background image */
42+
43+
/* using local file */
44+
background-image: url("kiwi.jpeg");
45+
background-size: 100%;
46+
background-position: center;
47+
48+
49+
50+
/* googling gradient magic */
51+
/* background-image: linear-gradient(216deg, rgba(77, 77, 77,0.05) 0%, rgba(77, 77, 77,0.05) 25%,rgba(42, 42, 42,0.05) 25%, rgba(42, 42, 42,0.05) 38%,rgba(223, 223, 223,0.05) 38%, rgba(223, 223, 223,0.05) 75%,rgba(36, 36, 36,0.05) 75%, rgba(36, 36, 36,0.05) 100%),linear-gradient(44deg, rgba(128, 128, 128,0.05) 0%, rgba(128, 128, 128,0.05) 34%,rgba(212, 212, 212,0.05) 34%, rgba(212, 212, 212,0.05) 57%,rgba(25, 25, 25,0.05) 57%, rgba(25, 25, 25,0.05) 89%,rgba(135, 135, 135,0.05) 89%, rgba(135, 135, 135,0.05) 100%),linear-gradient(241deg, rgba(55, 55, 55,0.05) 0%, rgba(55, 55, 55,0.05) 14%,rgba(209, 209, 209,0.05) 14%, rgba(209, 209, 209,0.05) 60%,rgba(245, 245, 245,0.05) 60%, rgba(245, 245, 245,0.05) 69%,rgba(164, 164, 164,0.05) 69%, rgba(164, 164, 164,0.05) 100%),linear-gradient(249deg, rgba(248, 248, 248,0.05) 0%, rgba(248, 248, 248,0.05) 32%,rgba(148, 148, 148,0.05) 32%, rgba(148, 148, 148,0.05) 35%,rgba(202, 202, 202,0.05) 35%, rgba(202, 202, 202,0.05) 51%,rgba(181, 181, 181,0.05) 51%, rgba(181, 181, 181,0.05) 100%),linear-gradient(92deg, hsl(214,0%,11%),hsl(214,0%,11%)); */
52+
53+
/* for using website */
54+
/* background-image: url("https://media.istockphoto.com/photos/north-island-brown-kiwi-apteryx-mantelli-picture-id525151431?b=1&k=20&m=525151431&s=170667a&w=0&h=L7KvUvQv8tYpFNLlVSZC_Dgduyb4iLsBS6xl38A7_PY="
55+
alt="Kiwi bird"); */
56+
57+
/* margin: 10px */
58+
/* margin: top bottom */
59+
/* margin: top right bottom left */
60+
/* margin-top: 10px; */
61+
/* margin-bottom: 10px;
62+
margin-right: 10px;
63+
margin-left: 10px ; */
64+
65+
/* Full screen width*/
66+
67+
/* width: 50vw */
68+
69+
/* 50% of "parent" size */
70+
/* height: 50vh; */
71+
}
72+
73+
.parent-2 {
74+
height: 300px;
75+
width: 300px;
76+
background-color: antiquewhite;
77+
}
78+
79+
.child-2 {
80+
border: 2px solid red;
81+
text-align: center;
82+
padding-top: 10px;
83+
padding-bottom: 10px;
84+
}
85+
86+
.background {
87+
/* border: 2px solid red; */
88+
height: calc(100% - 44px);
89+
background-image: url(Kiwi.jpeg);
90+
background-size: 10%;
91+
background-repeat: repeat;
92+
}

‎Code/matthew/python/Labs/lab8_v2.py‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

0 commit comments

Comments
 (0)