Jb zn patch 1

Questions.md

@@ -1,15 +1,16 @@
 # In a single paragraph, briefly describe your project. What is its subject matter and extent? What makes it historically important? Why are you interested in it?
 
-Answer here.
+I want to explore queer fashion culture and its influence on the mainstream world. I would break it down into three to four thematics in this course. These thematics would include queer political fashion, its transnational movement and its effect on citizenship and identity. Secondly, I would like to look at early queer modelling and couture by exploring its impact on ballroom culture. My third thematic would look at gender-bending fashion in lesbian culture from the 1920s onward. While these topics are niche, I believe they are vitally important and underrepresented in the study of cultural and gender history. Furthermore, through this research, I would prioritize queer bipoc culture, which is even more underrepresented in the study of queer history and queer theory and the broader history community. Finally, I am interested in this topic because this vaguely is my intended study of research and thesis focus as I advance into my Masters degree. 
 
 # What makes the card format useful for this topic? What limits do the cards present and how might you expand your project to get around those limits?
 
-Answer here.
+The card format is helpful for my topic because it will allow easy and accessible access to historical knowledge and evidence. I believe in accessible higher education, which includes creating accessible ways to access knowledge without a post-secondary institution. Queer culture is not taught in public education (k-12), and many queer youths go to the internet to learn about their sexuality, identity, and culture. A card format would allow queer individuals from all ages and walks of life to learn about the history of their culture and help understand and formulate their identity. The card format may be limited because, while accessible, they may not offer the space to expand on the history. I will work around these limits by creating pathways and links to a separate web page that expands on the history and theory. These links will contain further information, citations, extra readings, and photo archives to explore. 
+
 
 # What data fields does each card need in your project? Why? How might you store this data?
 
-Answer here.
+Data Fields I will need are 
 
 # Explain the changes you made to the HTML structure and the CSS rules for this project. Why did you make these changes and how happy are you with the result? 
+I changed the background sections to different shades of Lavender, replacing the harsh green for aesthetic and symbolic reasons. Lavender as a colour historically is associated with Queer resistance. This began in the early 19th-century fashion trends following the introduction of synthetic purple  dyes (natural purple dyes are notoriously hard to make and were traditionally reserved for royalty). Originally a popular colour amongst men, it soon became associated with homosexuality; and later used during the McCarthy era  as a symbol anti-gay rhetoric and propoganda coined the "lavender scare." Considering my theme is queer fashion history, I felt it made sense to adjust the colours. I chose to change the font (HTML) to courier for aesthetic reasoning. I felt that courier resembled a classic typewriter setting. Many of the reports and primary sources on Queer prosecution and harrasment I read are written on typewriters; I feel aesthically this made sense to change. Next, I centred the photo and adjusted the size to a square. If everythign works out the image I uploaded to github has also been edited into a square. This task I found diffiuclt and time consuming (due completely to my lack of knowledge on coding); Overall I am happy with how things turned out. Ideally, if I knew more, I would have preferred to move the picture to either the right or left and have the text paragraph wrap around it. I spent a lot of time trying and while I could move the pciture the words just didn't fall into place the way I wanted. 
 
-Answer here. 

index.html

@@ -3,7 +3,7 @@
 
     <head>
         <meta charset="UTF-8" />
-        <title>Your Title Here</title>
+        <title>HTML Card Assignment: Jade</title>
         <!-- external resources -->
         <!-- steal some base styles from chota: https://jenil.github.io/chota/ -->
         <link rel="stylesheet" href="https://unpkg.com/chota@latest">
@@ -19,38 +19,50 @@
 
         <nav class="bg-primary">     
             <div class="nav-center">
-                <h1><a class="brand" href="#">Your Title Here</a></h1>
+                <h1 style=" font-family:courier;color:black;font-size:3rem">Undressing Queer</h1>
+
+           <h1 style="font-family:courier;"></h1>
             </div>
         </nav>
 
         <main id="cardcontainer">
             <section class="card"> 
-                <header class="card-header">
-                    Card Subject
+                <header style=" font-family:courier;color:black;Font-size:2rem">
+                     A History of Queer Gender Bending Fashion 
                 </header>
-                <img class="profile-image" src="images/your-img.jpg" alt="Description of Image for non-graphic viewers" title="Image Title">
+                <img class="profile-image" src="images_Queer.jpg" alt="Photo Cred: Jade Nelson" title="Image Title">
                 <section class="card-body">
-                    <p class="card-text"><b>Your Categories:</b> ...content</p>
+                    <p style="font-family:courier;Font-size:1.5rem">>><b> <b>Project Proposal:</b></b> Queer Fashion History</p>
                     <!-- THis code is ocmmented out, but I'm leaving it here as an example -->
                     <!-- <figure>
                          <figure-caption>Tech Skills</figure-caption>
                          <div class="progress-bar">
-			 <span class="progress-bar-fill" style="width: 80%;" title="4 stars"></span>
+			 <span class="progress-bar-fill" style="width: 0%;" title="0 stars"></span>
 			 </div>
                          </figure> -->
-                    <p>Longer description goes here; will be slightly painful, but write it out in HTML.</p>
+
+<p class=" intro">
+> I want to explore queer fashion culture and its influence on the mainstream world. I would break it down into three to four thematics in this course. These thematics would include queer political fashion, its transnational movement and its effect on citizenship and identity. Secondly, I would like to look at early queer modelling and couture by exploring its impact on ballroom culture. My third thematic would look at gender-bending fashion in lesbian culture from the 1920s onward. While these topics are niche, I believe they are vitally important and underrepresented in the study of cultural and gender history. Furthermore, through this research, I would prioritize queer bipoc culture, which is even more underrepresented in the study of queer history and queer theory and the broader history community. Finally, I am interested in this topic because this vaguely is my intended study of research and thesis focus as I advance into my Masters degree. 
+</p>
+<p class=" intro">
+> The card format is helpful for my topic because it will allow easy and accessible access to historical knowledge and evidence. I believe in accessible higher education, which includes creating accessible ways to access knowledge without a post-secondary institution. Queer culture is not taught in public education (k-12), and many queer youths go to the internet to learn about their sexuality, identity, and culture. A card format would allow queer individuals from all ages and walks of life to learn about the history of their culture and help understand and formulate their identity. The card format may be limited because, while accessible, they may not offer the space to expand on the history. I will work around these limits by creating pathways and links to a separate web page that expands on the history and theory. These links will contain further information, citations, extra readings, and photo archives to explore. 
+</p>
+<p class=" intro">
+> The data fields I will use are: The names/peices of clothing, the name of the designer, the date in which it was created, where it was made; where it was presented such as NewYork Fashion Week, the designers artist statements,and the historical importance of the piece. I will store this data
+</p>
+<p class=" intro">
+> I changed the background sections to different shades of Lavender, replacing the harsh green for aesthetic and symbolic reasons. Lavender as a colour is associated with Queer resistance. This began in the early 19th-century fashion trends following the introduction of synthetic purple synthetic dyes (natural purple dyes are notoriously hard to make and were traditionally reserved royalty). Originally a popular colour amongst men, it soon became associated with homosexuality; later used during the McCarthy era  in anti-gay rhetoric and propoganda coined the "lavender scare." Considering my theme is queer fashion history, I felt it made sense to adjust the colours. I mostly chose to change the font (HTML) to courier for aesthetic reasoning. I felt that courier resembled a classic typewriter setting. Many of the reports and primary sources on Queer prosecution and harrasment I read are written on typewriters;I felt it could make sense aesthetically. I also added little markings to separate each paragrpah so it is easier to read and differenciate between each question prompt; however, I decided not to add the questions as well. centred the photo and adjusted the size to a square. If everythign works out the image I uploaded to github has also been edited into a square. This task I found diffiuclt and time consuming (due completely to my lack of knowledge on coding); Overall I am happy with how things turned out. Ideally, if I knew more, I would have preferred to move the picture to either the right or left and have the text paragraph wrap around it. I spent a lot of time trying and while I could move the pciture the words just didn't fall into place the way I wanted.  
+</p>
 
                 </section> <!-- card-body -->
-                <footer class="card-footer text-center">
-                    <a href="link-address" class="button">Feel Free to use a button</a>
-                    <a href="link-address" class="button">... Or Two</a>
+                <footer style=" font-family:courier;color:black text-center">
+                    <a href="https://sds.utoronto.ca/qtrl-cohort-2021-22/" class="button">QTRL &#127752</a>
+                    <a href="mailto:[email protected]" class="button">email &#128231</a>
+                    <a href="https://www.instagram.com/jb.z.n/" class="button">Instagram &#128247</a>
                 </footer>  <!-- card-footer -->
             </section>
 
         </main>
-
-    </body>
-</html>
 
 
 

style.css

@@ -8,28 +8,30 @@
 body {
   display:grid;
   grid-template-rows: 10rem 1fr;
-  grid-gap: 2rem;
-
+  grid-gap: 0rem;
+  --color-primary: #d8b1fe
 }
 
 .bg-primary a, .bg-success a {
-  color: white;
+  color:color: #f0e2fe;
 }
 
 main#cardcontainer {
+
   justify-content: center;
   display: grid;
   grid-auto-rows: 80rem;
-  grid-gap: 2rem;
+  grid-gap: 3rem;
+
 }
 
 
 section.card {
-  border: 1px solid var(--color-darkGrey) ;
-  background-color: var(--color-lightGrey);
+  border: 3px solid black ;
+  background-color:#EBECF0;
   display: grid;
   grid-template-rows: 1fr 7fr 7fr 1fr;
-  grid-gap: 0rem;
+  grid-gap: 3rem;
   align-items: stretch;
   justify-items: stretch;
   padding: 0;
@@ -41,44 +43,35 @@ section.card {
 }
 
 section.card header, section.card footer {
-  font-size: 2.2rem;
+  font-size: 3rem;
   text-align: center;
   padding-top: 0.3rem;
+  padding-bottom: 0.3rem;
   /* background-color: var(--color-success) */
-  background-color: var(--color-primary)
+  background-color: #f0e2fe
+
 }
 
 /* make links visible again! */
 
 section.card header a, section.card footer a {
-  color: black;
+  color:black;
 }
 
-/* some CSS Magic Examples for the "skills" bar */
-.progress-bar {
-  width: 100%;
-  background-color: #e0e0e0;
-  padding: 3px;
-  border-radius: 3px;
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
-}
-
-.progress-bar-fill {
-  display: block;
-  height: 22px;
-  background-color: var(--color-primary);
-  border-radius: 3px;
-
-  transition: width 500ms ease-in-out;
-}
 
 /* get the image to fit */
 section.card img.profile-image {
   object-fit: cover;
   height: 35rem;
-  /* height: 100%; */
-  /* width: 100%; */
-  /* object-fit: contain; */
-  /* object-position: 50% 0; */
+  width: 35rem;
+   display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 55%;
+  }
 
-}
+  .intro {
+    font-family:courier;
+    Font-size:.5rem;
+    }
+