PdxCodeGuild
diff --git a/‎Code/matthew/html_css_flask/labs/lab_1/index.html‎
Lines changed: 105 additions & 0 deletions b/‎Code/matthew/html_css_flask/labs/lab_1/index.html‎
Lines changed: 105 additions & 0 deletions
diff --git a/‎Code/matthew/html_css_flask/labs/lab_1/style.css‎
Lines changed: 77 additions & 0 deletions b/‎Code/matthew/html_css_flask/labs/lab_1/style.css‎
Lines changed: 77 additions & 0 deletions
diff --git a/‎Code/matthew/html_css_flask/labs/lab_2/index.htm‎
Lines changed: 88 additions & 0 deletions b/‎Code/matthew/html_css_flask/labs/lab_2/index.htm‎
Lines changed: 88 additions & 0 deletions
diff --git a/‎Code/matthew/html_css_flask/labs/lab_2/style.css‎
Lines changed: 122 additions & 0 deletions b/‎Code/matthew/html_css_flask/labs/lab_2/style.css‎
Lines changed: 122 additions & 0 deletions
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Batman</title>
+    
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300&family=PT+Sans:ital@1&family=Syne+Mono&display=swap" rel="stylesheet">
+</head>
+<body>
+    
+    <div class='banner'>
+        <h1>Batman/Bruce Wayne</h1>  
+    </div>
+
+    <br>
+
+    
+    <div class="line"></div>
+
+    <!-- <br> -->
+    <div class="intro">
+        <div class="background">
+            
+            <div class="picture">
+                
+                <img src="https://images.unsplash.com/photo-1531259683007-016a7b628fc3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80" 
+                alt="A picture of batman">
+                
+                <blockquote>“No miracles...No mercy...No redemption...No heaven...No hell...No higher power. Just life. Just... us.” -Batman</blockquote>
+                
+            </div>
+            
+            <h2>Introduction</h2>
+            <p>
+                Batman is a superhero appearing in American comic books published by DC Comics. The character was created 
+            by artist Bob Kane and writer Bill Finger, and debuted in the 27th issue of the comic book Detective Comics on 
+            March 30, 1939. In the DC Universe continuity, Batman is the alias of Bruce Wayne, a wealthy American playboy, 
+            philanthropist, and industrialist who resides in Gotham City. Batman's origin story features him swearing vengeance 
+            against criminals after witnessing the murder of his parents Thomas and Martha, a vendetta tempered with the ideal of justice. 
+            He trains himself physically and intellectually, crafts a bat-inspired persona, and monitors the Gotham streets at night. 
+            Kane, Finger, and other creators accompanied Batman with supporting characters, including his sidekicks Robin and Batgirl; allies 
+            Alfred Pennyworth, James Gordon, and Catwoman; and foes such as the Penguin, the Riddler, Two-Face, and his archenemy the Joker.
+            Kane conceived Batman in early 1939 to capitalize on the popularity of DC's Superman; although Kane frequently claimed sole creation 
+            credit, Finger substantially developed the concept from a generic superhero into something more bat-like. The character received his 
+            own spin-off publication, Batman, in 1940. Batman was originally introduced as a ruthless vigilante who frequently killed or maimed 
+            criminals, but evolved into a character with a stringent moral code and strong sense of justice. Unlike most superheroes, Batman 
+            does not possess any superpowers, instead relying on his intellect, fighting skills, and wealth. The 1960s Batman television series
+            used a camp aesthetic, which continued to be associated with the character for years after the show ended. Various creators 
+            worked to return the character to his darker roots in the 1970s and 1980s, culminating with the 1986 miniseries The Dark 
+            Knight Returns by Frank Miller.
+
+            DC has featured Batman in many comic books, including comics published under its imprints such as Vertigo and Black Label. 
+            The longest-running Batman comic, Detective Comics, is the longest-running comic book in the United States. Batman is frequently 
+            depicted alongside other DC superheroes, such as Superman and Wonder Woman, as a member of organizations such as the Justice 
+            League and the Outsiders. In addition to Bruce Wayne, other characters have taken on the Batman persona on different occasions, 
+            such as Jean-Paul Valley / Azrael in the 1993–1994 "Knightfall" story arc; Dick Grayson, the first Robin, from 2009 to 2011; 
+            and Jace Fox, son of Wayne's ally Lucius, as of 2021.[4] DC has also published comics featuring alternate versions of Batman, 
+            including the incarnation seen in The Dark Knight Returns and its successors, the incarnation from the Flashpoint (2011) event,
+            and numerous interpretations from Elseworlds stories.
+            
+            One of the most iconic characters in popular culture, Batman has been listed among the greatest comic book superheroes and 
+            fictional characters ever created. He is one of the most commercially successful superheroes, and his likeness has been licensed 
+            and featured in various media and merchandise sold around the world; this includes toy lines such as Lego Batman and video games 
+            like the Batman: Arkham series. Batman has been adapted in live-action and animated incarnations, including the 1960s Batman 
+            television series played by Adam West and in film by Michael Keaton in Batman (1989), Batman Returns (1992) and The Flash (2022), 
+            Christian Bale in The Dark Knight trilogy (2005–2012), Ben Affleck in the DC Extended Universe (2016–present), and Robert Pattinson 
+            in The Batman (2022). Kevin Conroy, Jason O'Mara, and Will Arnett, among others, have provided the character's voice.
+        </p>
+    
+        </div>
+    </div>
+    
+    
+    <a href="https://en.wikipedia.org/wiki/Batman">Here is a link to learn more</a>
+    
+    <br>
+    
+    <h2>Can also be found in</h2>
+
+    <ul>
+        <li>Citizen Wayne</li>
+        <li>DC Bombshells</li>
+        <li>The Dark Night</li>
+        <li>The Dark Multiverse</li>
+        <li>Injustice: Gods Among Us</li>
+    </ul>
+
+    <br>
+    <h2>Places of residence</h2>
+    
+    <ul>
+        <li>Old Wayne Manor</li>
+        <li>New Wayne Manor</li>
+    </ul>
+
+    <div class="line"></div>
+
+    <p class="ext">Information gathered Via wikipedia and general google searches</p>
+
+
+</body>
+</html>
@@ -0,0 +1,77 @@
+body {
+    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%));
+    background-size: 16%;
+    color: rgb(194, 194, 187);
+    font-family: 'pt sans';
+    vertical-align: top;
+
+}
+.banner {
+    background-image: radial-gradient(circle at 16% 83%, rgba(148, 148, 148,0.06) 0%, rgba(148, 148, 148,0.06) 50%,rgba(63, 63, 63,0.06) 50%, rgba(63, 63, 63,0.06) 100%),radial-gradient(circle at 68% 87%, rgba(66, 66, 66,0.06) 0%, rgba(66, 66, 66,0.06) 50%,rgba(105, 105, 105,0.06) 50%, rgba(105, 105, 105,0.06) 100%),radial-gradient(circle at 38% 50%, rgba(123, 123, 123,0.06) 0%, rgba(123, 123, 123,0.06) 50%,rgba(172, 172, 172,0.06) 50%, rgba(172, 172, 172,0.06) 100%),linear-gradient(90deg, hsl(18,0%,1%),hsl(18,0%,1%));
+    background-size: 20%;
+    opacity: 75%;
+    /* background-repeat: no-repeat; */
+    /* border: 2px solid red; */
+    width: 100%;
+    height: 100px;
+    text-align:center;
+}
+h1 {
+    padding: 24px;
+    color: rgba(255, 255, 0, 0.842);
+    opacity: 90%;
+    text-shadow: black 10px 10px;
+}
+
+.line {
+    border: 1px solid rgb(153, 151, 151);
+    opacity: 50%;
+}
+
+h2 {
+    color: black ;
+    font-family: "oswald";
+}
+.intro {
+
+    /* height: ; */
+    margin: 0px;
+    padding: 20px;
+    clear: right;
+}
+
+.picture {
+    /* border: 2px solid red; */
+    width: 35% ;
+    /* height: 500px; */
+    float :right;
+    vertical-align: text-top;
+
+}
+
+img {
+    width:100%;
+    margin: 10px;
+    border-radius: 20px;
+
+}
+
+blockquote {
+    float: right;
+    font-family: 'syne mono';
+    color: black;
+}
+
+a {
+    color: rgb(173, 173, 121);
+
+}
+
+ul {   
+    list-style-type:circle;
+    
+}
+
+.ext {
+    text-align: center;
+}
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <link href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Permanent+Marker&display=swap" rel="stylesheet">
+    <title>Blog</title>
+  </head>
+
+  <body>
+      <nav>
+          <header>
+              <h2><a id="logo" href="">blog_name_me</a></h2>
+                <div ><a class="google" href="https://www.google.com/">Google</a></div>
+            </header>
+            
+            <aside>
+                <a href="#top">Top</a>
+                <!-- <a class='side' href="#introduction">Introduction</a> -->
+                <a class='bottom' href="#footer">Bottom</a>
+            </aside>
+        </nav>
+        <br id="top">
+       <br>
+       <br>
+       <br>
+       <br>
+       <br>
+       <br>
+       
+       <div class="box">
+           <summary>
+               <h3 >Introduction</h3>
+                <br>
+                <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>
+            </summary>
+       </div>
+
+       <br>
+       <main>
+            <div class="left">
+                <img src="https://picsum.photos/200/300" alt="random picture">
+            </div>
+
+            <div class="blog_structure">
+                <div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit, 
+                    atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis 
+                    tenetur, labore sed rerum facere consequuntur ratione, eius possimus.
+                </div>
+                <div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit, 
+                    atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis 
+                    tenetur, labore sed rerum facere consequuntur ratione, eius possimus.
+                </div>
+                <div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit, 
+                    atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis 
+                    tenetur, labore sed rerum facere consequuntur ratione, eius possimus.
+                </div>
+                <div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit, 
+                    atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis 
+                    tenetur, labore sed rerum facere consequuntur ratione, eius possimus.
+                </div>
+                <!-- <div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit, 
+                    atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis 
+                    tenetur, labore sed rerum facere consequuntur ratione, eius possimus.
+                </div>
+                <div class="blog">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita impedit, 
+                    atque accusantium veritatis natus quae non doloremque. Atque quaerat, impedit perferendis 
+                    tenetur, labore sed rerum facere consequuntur ratione, eius possimus. -->
+                </div>
+
+            </div>
+            
+            <div class="right">
+                <img src="https://picsum.photos/200/300" alt="random picture">
+            </div>
+        </main>
+     
+    
+    
+    
+
+    <footer id="footer">
+        <p>Matthew Holmes &copy; 2022</p>
+    </footer>
+  </body>
+</html>
@@ -0,0 +1,122 @@
+body {
+    margin: 0;
+    font-family: "indie Flower";
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    justify-content: space-between;
+    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%);
+    
+}
+
+nav{
+    /* border: 2px solid black; */
+    margin: 0;
+    padding: 0;
+    display: flex;
+    position: fixed;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    width: 100vw;
+    
+    
+}
+header {
+    /* border: 2px solid black; */
+    margin: 0;
+    background-color: rgb(80, 80, 80);
+    width: 100vw;
+    display: flex;
+    justify-content: space-between;
+    
+    
+    
+}
+#logo {
+    color: rgb(0, 0, 0);
+    margin: 0;
+    font-family: "permanent Marker";
+}
+.google {
+    color: rgb(181, 185, 189);
+    font-size: x-large;
+}
+
+aside {
+    /* border: 2px solid black; */
+    /* padding: 10px; */
+    background-color: rgb(88, 86, 86);
+    display: flex;
+    justify-content: space-between;
+    color: rgb(181, 185, 189);  
+    min-width: 100vw;
+    height: 30px;
+}
+.bottom {
+    padding-right: 20px;
+}
+
+.box {
+    margin: 10px;
+    background-color: black;
+
+}
+summary {
+    background-color: rgb(80, 80, 80);
+    justify-content: center;
+    display: flex;
+    flex-wrap: wrap;
+    text-align: center;
+    align-items: center;
+    margin: 10px;
+    color: rgb(181, 185, 189);
+    
+}
+
+
+main {
+    
+    display: flex;
+    flex-wrap: wrap;
+    justify-content:space-between;
+    color: rgb(159, 179, 195);
+}
+
+.left {
+    margin-left: 10px;
+    width: 200px;
+    /* border: 2px solid green; */
+    justify-content: flex-start;
+}
+
+.blog_structure {
+    width: 70vw;
+    /* border: 2px solid green; */
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+.blog {
+    text-align: center;
+    margin: 15px;
+    border: 2px solid rgb(0, 0, 0);
+    border-radius: 10%;
+    width: 225px;
+    background-color: rgb(80, 80, 80);
+}
+
+.right {
+    margin-right: 10px;
+    width: 200px;
+    /* border: 2px solid green; */
+    justify-content: flex-start;
+}
+
+footer {
+    display: flex;
+    background-color: rgb(56, 56, 68);
+    color: whitesmoke;
+    justify-content: center;
+}
+
+