RococoCoding · RococoCoding · Sep 3, 2020 · Sep 3, 2020 · Sep 3, 2020 · Sep 3, 2020
diff --git a/HONK.PNG b/HONK.PNG
diff --git a/ReadMe.md b/ReadMe.md
@@ -73,3 +73,17 @@ Follow these steps for completing your project.
 - [ ] Submit a pull request to merge <firstName-lastName> Branch into master (student's  Repo). **Please don't merge your own pull request**
 - [ ] Add your Team Lead as a reviewer on the pull request
 - [ ] Your Team Lead will count the project as complete by merging the branch back into master
+
+
+PART2:
+ Introduce max-width media queries into your project at 800px and 500px
+ Add accessability features to your webpage
+
+ stretch: 
+  Test your website at several breakpoints and refactor code as needed. A few common breakpoints are below:
+ iPhone: 360×640
+ Laptop: 1366×768
+ Widescreen: 1920×1080
+ Test your webpage's accessibility with a screen reader like this
+ Start over with min-width media queries to get a feel for how a mobile first approach would be like. I recommend making a branch of all your content in a new folder named "mobile-first" to keep it separate
+ Test your webpage's accessibility with a screen reader like this
diff --git a/cat.jpg b/cat.jpg
diff --git a/contact.html b/contact.html
@@ -3,9 +3,42 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=    <h1> ABOUT </h1>, initial-scale=1.0">
-    <title>Document</title>
+    <link rel="stylesheet" href="style/contact.css">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Mitr:wght@500&&display=swap" rel="stylesheet">
+    <title>Contact</title>
 </head>
 <body>
-    <h1> CONTACT </h1>
+    <header>
+        <h1>Rococo Code</h1>
+        <nav>
+            <a href="index.html">Home</a>
+            <a href="">About</a>
+            <a href="contact.html">Contact</a>
+            <a href="">Projects</a>
+        </nav>
+    </header>
+    <main>
+        <h1>CONTACT</h1>
+        <!-- <label id="name-label" for="name">Name:</label> -->
+        <form id="contact-me">
+            <input type="text"
+            id="name"
+            name="name"
+            class="text-input"
+            placeholder="Name"
+            required/>
+            <!-- <label id="email-label" for="email">Email:</label> -->
+            <input type="email"
+                name="email"
+                id="email"
+                class="text-input"
+                placeholder="Email"
+                required/>
+            <textarea id="message"
+            name="message"
+            placeholder="Message"></textarea>
+        </form>
+        <button>Submit</button>
+    </main>
 </body>
 </html>
diff --git a/cool.jpg b/cool.jpg
diff --git a/cow.jpg b/cow.jpg
diff --git a/doggo.jpg b/doggo.jpg
diff --git a/envelope-line.png b/envelope-line.png
diff --git a/fun.jpg b/fun.jpg
diff --git a/goose.jpg b/goose.jpg
diff --git a/index.html b/index.html
@@ -3,9 +3,46 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <link rel="stylesheet" href="style/index.css"> 
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Mitr:wght@500&&display=swap" rel="stylesheet">
+    <title>Rococo Code</title>
 </head>
 <body>
-
+    <header>
+        <h1>Rococo Code</h1>
+        <nav>
+            <a href="index.html">Home</a>
+            <a href="">About</a>
+            <a href="contact.html">Contact</a>
+            <a href="">Projects</a>
+        </nav>
+    </header>
+    <main>
+        <section class="intro">
+            <a href="https://rocococoding.github.io/stacks/"><img class="showcase" src="stacks.PNG" alt="screenshot of library database project"></a>
+            <div>
+                <h2>Alice Chang</h2>
+                <a href="">My Projects</a>
+                <p>Full-time web dev student at Lamba School learning how to code! My dream job would be working remotely building educational games. I love learning new things and am excited to learn programming because people say you never get bored.</p>      
+           </div>
+        </section>
+        <section class="projects">
+            <div><a href="https://codepen.io/rocococode/full/jObmJvv"><img src="HONK.PNG" alt="screenshot of Untitled Goose Game fan site"></a>HONK!</div>
+            <div><img class="placeholder" src="cow.jpg" alt="photo of a highland cattle">Moo</div>
+            <div><img class="placeholder" src="doggo.jpg" alt="black lab puppy">Woof</div>
+            <div><img class="placeholder" src="cat.jpg" alt="kitten head popping out of a bag">Meow</div>
+            <div><img class="placeholder" src="cool.jpg" alt="ice floes">Cool</div>
+            <div><img class="placeholder" src="fun.jpg" alt="pineapples with party hats and sunglasses and balloons">Fun</div>
+            <div><img class="placeholder" src="spicy.jpg" alt="handful of chili peppers">Spicy</div>
+            <div><img class="placeholder" src="special.jpg" alt="gift box wrapped with ribbon">Special</div>
+        </section>
+    </main>
+    <footer>
+        <h3>Like what you see?</h3>
+        <a class="contact-me" href="">Contact Me</a>
+        <a href="https://twitter.com/rocococode"><img class="social-media" src="twitter.png" alt="twitter mini icon"></a>
+        <a href="https://www.linkedin.com/in/alice-chang-9348a63/"><img class="social-media" src="linkedin.png" alt="linkedin mini icon"></a>
+        <a href="mailto: alicetchang@gmail.com"><img class="social-media" src="envelope-line.png" alt="email icon"></a>
+    </footer>
 </body>
-</html>
+</html>  
diff --git a/linkedin.png b/linkedin.png
diff --git a/special.jpg b/special.jpg
diff --git a/spicy.jpg b/spicy.jpg
diff --git a/stacks.PNG b/stacks.PNG
diff --git a/style/contact.css b/style/contact.css
@@ -0,0 +1,134 @@
+/*#region css reset */
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+/*#endregion*/
+
+:root {
+    --dark-color2: #12095F;
+    --med-dark-color2: #211778;
+    --med-color2: #392E96;
+    --med-light-color2: #574EA4;
+    --light-color2:#867ECA;
+    --dark-color1: #001c1a;
+    --med-dark-color1: #076966;
+    --med-color1: #1A837F;
+    --med-light-color1: #39908C;
+    --light-color1: #6ABAB7;
+    --offwhite: #dbdbdb;
+}
+html {
+    font-size: 62.5%;
+}
+
+body {
+    position: absolute;
+    font-size: 2rem;
+    font-family: 'Poppins', sans-serif;
+    background-color: var(--light-color1);
+}
+
+a {
+    text-decoration: none;
+    color: white;
+}
+
+img {
+    box-shadow: .5rem .5rem 4rem -0.5rem black; /*thanks to erick in slack!*/
+}
+
+
+/*#region nav*/
+header {
+    position: fixed;
+    z-index: 2;
+    width: 100%;
+    height: 13%;
+    background-color: var(--med-color1);
+    padding: 1%;
+}
+
+h1 {
+    font-family: 'Mitr', sans-serif;
+    font-size: 5rem;
+    margin-bottom: 1.5%;
+    margin-left: 0.5%;
+    color: var(--med-dark-color2);
+}
+
+nav a {
+    background-color: var(--med-dark-color2);
+    color: var(--offwhite);
+    border-radius: 15px;
+    padding: 0.2% 0.5%;
+    margin-left: 0.5%;
+}
+
+/*#endregion*/
+
+
+main {
+    margin-top: 10%;
+    width: 100vw;
+    text-align: center;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    margin: 0 auto;
+}
+
+input {
+    height: 3rem;
+}
+
+textarea {
+    height: 20rem;
+}