Ada-C9 · knockknockhusthere · Mar 17, 2018 · Mar 19, 2018 · Mar 19, 2018 · Mar 19, 2018
diff --git a/img/books.jpg b/img/books.jpg
diff --git a/img/china.jpg b/img/china.jpg
diff --git a/img/desk.jpg b/img/desk.jpg
diff --git a/img/ideas.jpg b/img/ideas.jpg
diff --git a/img/laptop.jpg b/img/laptop.jpg
diff --git a/img/ny.jpg b/img/ny.jpg
diff --git a/img/palms.jpg b/img/palms.jpg
diff --git a/img/pink.jpg b/img/pink.jpg
diff --git a/img/plantwall.jpg b/img/plantwall.jpg
diff --git a/img/scott-webb-unsplash.jpg b/img/scott-webb-unsplash.jpg
diff --git a/img/sea.jpg b/img/sea.jpg
diff --git a/img/th.jpg b/img/th.jpg
diff --git a/img/tx.jpg b/img/tx.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Angela Hu Homepage</title>
+  <link rel="stylesheet" href="styles/main.css">
+  <link href="https://fonts.googleapis.com/css?family=Limelight" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
+</head>
+<body class="site-container">
+  <nav>
+    <ul>
+      <li>
+        <a href="./index.html">Home</a>
+      </li>
+      <li>
+        <a href="pages/aboutme.html">About Me</a>
+      </li>
+      <li>
+        <a href="pages/projects.html">Projects</a>
+      </li>
+      <li>
+        <a href="pages/code-journal.html">Code Journal</a>
+      </li>
+      <li>
+        <a href="pages/contactme.html">Contact Me</a>
+      </li>
+    </ul>
+  </nav>
+
+  <main>
+    <h1> Hello, World!</h1>
+    <h2>I'm Angela Hu</h2>
+    <h3>[ Ex-Banker, Aspiring Software Engineer, Full-time Foodie ]</h3>
+  </main>
+
+  <footer>
+    <p>&copy; Angela Hu 2018</p>
+  </footer>
+
+</body>
+</html>
diff --git a/pages/aboutme.html b/pages/aboutme.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>About Me</title>
+  <link rel="stylesheet" href="../styles/main.css">
+  <link rel="stylesheet" href="../styles/aboutme.css">
+  <link href="https://fonts.googleapis.com/css?family=Limelight" rel="stylesheet">
+</head>
+
+<body class="site-container">
+  <nav>
+    <ul>
+      <li>
+        <a href="../index.html">Home</a>
+      </li>
+      <li>
+        <a href="./aboutme.html">About Me</a>
+      </li>
+      <li>
+        <a href="projects.html">Projects</a>
+      </li>
+      <li>
+        <a href="code-journal.html">Code Journal</a>
+      </li>
+      <li>
+        <a href="contactme.html">Contact Me</a>
+      </li>
+    </ul>
+  </nav>
+
+  <main>
+    <section class="about-me">
+      <h1>ABOUT ME</h1>
+      <p>I like food, live shows, food, art, food, puppies, food, photography, food, travel, food, puns, and pho-ood. </p>
+    </section>
+
+    <section class="geo">
+      <div class="place">
+        <p>Born in China</p>
+        <img src="../img/china.jpg" alt="with family in Shanghai">
+      </div>
+      <div class="place">
+        <p>Raised in Texas</p>
+        <img src="../img/tx.jpg" alt="graduating from Texas A&M">
+      </div>
+      <div class="place">
+        <p>Worked in New York</p>
+        <img src="../img/ny.jpg" alt="igloo with tiki torches after Winter Storm Jonas">
+      </div>
+      <div class="place">
+        <p>Explored in Thailand</p>
+        <img src="../img/th.jpg" alt="with friends at top of a mountain temple in Thailand">
+      </div>
+      <div class="place">
+        <p>Learning in Seattle</p>
+        <img src="../img/sea.JPG" alt="snowtubing with Adies at Snoqualmie">
+      </div>
+    </section>
+  </main>
+
+  <footer>
+    <p>&copy; Angela Hu 2018</p>
+  </footer>
+</body>
+</html>
diff --git a/pages/code-journal.html b/pages/code-journal.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Code Journal</title>
+  <link rel="stylesheet" href="../styles/main.css">
+  <link rel="stylesheet" href="../styles/code-journal.css">
+  <link href="https://fonts.googleapis.com/css?family=Limelight" rel="stylesheet">
+</head>
+<body class="site-container">
+  <nav>
+    <ul>
+      <li>
+        <a href="../index.html">Home</a>
+      </li>
+      <li>
+        <a href="aboutme.html">About Me</a>
+      </li>
+      <li>
+        <a href="projects.html">Projects</a>
+      </li>
+      <li>
+        <a href="./code-journal.html">Code Journal</a>
+      </li>
+      <li>
+        <a href="contactme.html">Contact Me</a>
+      </li>
+    </ul>
+  </nav>
+
+  <main>
+    <div class="bkimg">
+      <h1>CODE JOURNAL</h1>
+      <h2>Latest Posts</h2>
+      <div class="content">
+        <section class="latest_posts">
+          <div class="post">
+            <p>Week 6</p>
+            <p>3.16.2018</p>
+            <a href="#03-16-2018" class="button">Read Post</a>
+          </div>
+          <div class="post">
+            <p>Week 5</p>
+            <p>3.8.2018</p>
+            <a href="#03-08-2018" class="button">Read Post</a>
+          </div>
+          <div class="post">
+            <p>Week 4</p>
+            <p>3.2.2018</p>
+            <a href="#03-02-2018" class="button">Read Post</a>
+          </div>
+        </section>
+      </div>
+      <section class="posts">
+        <div id="03-16-2018">
+          <h3>Week 6</h3>
+          <p>
+            Red hair crookshanks bludger Marauder’s Map Prongs sunshine daisies butter mellow Ludo Bagman. Beaters gobbledegook N.E.W.T., Honeydukes eriseD inferi Wormtail. Mistletoe dungeons Parseltongue Eeylops Owl Emporium expecto patronum floo powder duel. Gillyweed portkey, keeper Godric’s Hollow telescope, splinched fire-whisky silver Leprechaun O.W.L. stroke the spine. Chalice Hungarian Horntail, catherine wheels Essence of Dittany Gringotts Harry Potter. Prophecies Yaxley green eyes Remembrall horcrux hand of the servant. Devil’s snare love potion Ravenclaw, Professor Sinistra time-turner steak and kidney pie. Cabbage Daily Prophet letters from no one Dervish and Banges leg.
+          </p>
+          <p>
+            Prefect’s bathroom Trelawney veela squashy armchairs, SPEW: Gamp’s Elemental Law of Transfiguration. Magic Nagini bezoar, Hippogriffs Headless Hunt giant squid petrified. Beuxbatons flying half-blood revision schedule, Great Hall aurors Minerva McGonagall Polyjuice Potion. Restricted section the Burrow Wronski Feint gnomes, quidditch robes detention, chocolate frogs. Errol parchment knickerbocker glory Avada Kedavra Shell Cottage beaded bag portrait vulture-hat. Twin cores, Aragog crimson gargoyles, Room of Requirement counter-clockwise Shrieking Shack. Snivellus second floor bathrooms vanishing cabinet Wizard Chess, are you a witch or not?
+          </p>
+          <p>
+            Half-giant jinxes peg-leg gillywater broken glasses large black dog Great Hall. Nearly-Headless Nick now string them together, and answer me this, which creature would you be unwilling to kiss? Poltergeist sticking charm, troll umbrella stand flying cars golden locket Lily Potter. Pumpkin juice Trevor wave your wand out glass orbs, a Grim knitted hats. Stan Shunpike doe patronus, suck his soul Muggle-Born large order of drills the trace. Bred in captivity fell through the veil, quaffle blue flame ickle diddykins Aragog. Yer a wizard, Harry Doxycide the woes of Mrs. Weasley Goblet of Fire.
+          </p>
+
+        </div>
+
+        <div id="03-08-2018">
+          <h3>Week 5</h3>
+          <p>
+            Prefect’s bathroom Trelawney veela squashy armchairs, SPEW: Gamp’s Elemental Law of Transfiguration. Magic Nagini bezoar, Hippogriffs Headless Hunt giant squid petrified. Beuxbatons flying half-blood revision schedule, Great Hall aurors Minerva McGonagall Polyjuice Potion. Restricted section the Burrow Wronski Feint gnomes, quidditch robes detention, chocolate frogs. Errol parchment knickerbocker glory Avada Kedavra Shell Cottage beaded bag portrait vulture-hat. Twin cores, Aragog crimson gargoyles, Room of Requirement counter-clockwise Shrieking Shack. Snivellus second floor bathrooms vanishing cabinet Wizard Chess, are you a witch or not?
+          </p>
+          <p>
+            Half-giant jinxes peg-leg gillywater broken glasses large black dog Great Hall. Nearly-Headless Nick now string them together, and answer me this, which creature would you be unwilling to kiss? Poltergeist sticking charm, troll umbrella stand flying cars golden locket Lily Potter. Pumpkin juice Trevor wave your wand out glass orbs, a Grim knitted hats. Stan Shunpike doe patronus, suck his soul Muggle-Born large order of drills the trace. Bred in captivity fell through the veil, quaffle blue flame ickle diddykins Aragog. Yer a wizard, Harry Doxycide the woes of Mrs. Weasley Goblet of Fire.
+          </p>
+          <p>
+            Thestral dirigible plums, Viktor Krum hexed memory charm Animagus Invisibility Cloak three-headed Dog. Half-Blood Prince Invisibility Cloak cauldron cakes, hiya Harry! Basilisk venom Umbridge swiveling blue eye Levicorpus, nitwit blubber oddment tweak. Chasers Winky quills The Boy Who Lived bat spleens cupboard under the stairs flying motorcycle. Sirius Black Holyhead Harpies, you’ve got dirt on your nose. Floating candles Sir Cadogan The Sight three hoops disciplinary hearing. Grindlewald pig’s tail Sorcerer's Stone biting teacup. Side-along dragon-scale suits Filch 20 points, Mr. Potter.
+
+          </p>
+        </div>
+
+        <div id="03-02-2018">
+          <h3>Week 4</h3>
+          <p>
+            Toad-like smile Flourish and Blotts he knew I’d come back Quidditch World Cup. Fat Lady baubles banana fritters fairy lights Petrificus Totalus. So thirsty, deluminator firs’ years follow me 12 inches of parchment. Head Boy start-of-term banquet Cleansweep Seven roaring lion hat. Unicorn blood crossbow mars is bright tonight, feast Norwegian Ridgeback. Come seek us where our voices sound, we cannot sing above the ground, Ginny Weasley bright red. Fanged frisbees, phoenix tears good clean match.
+          </p>
+          <p>
+            Boggarts lavender robes, Hermione Granger Fantastic Beasts and Where to Find Them. Bee in your bonnet Hand of Glory elder wand, spectacles House Cup Bertie Bott’s Every Flavor Beans Impedimenta. Stunning spells tap-dancing spider Slytherin’s Heir mewing kittens Remus Lupin. Palominos scarlet train black robes, Metamorphimagus Niffler dead easy second bedroom. Padma and Parvati Sorting Hat Minister of Magic blue turban remember my last.
+          </p>
+          <p>
+            Thestral dirigible plums, Viktor Krum hexed memory charm Animagus Invisibility Cloak three-headed Dog. Half-Blood Prince Invisibility Cloak cauldron cakes, hiya Harry! Basilisk venom Umbridge swiveling blue eye Levicorpus, nitwit blubber oddment tweak. Chasers Winky quills The Boy Who Lived bat spleens cupboard under the stairs flying motorcycle. Sirius Black Holyhead Harpies, you’ve got dirt on your nose. Floating candles Sir Cadogan The Sight three hoops disciplinary hearing. Grindlewald pig’s tail Sorcerer's Stone biting teacup. Side-along dragon-scale suits Filch 20 points, Mr. Potter.
+          </p>
+
+        </div>
+      </section>
+    </div>
+    <footer>
+      <p>&copy; Angela Hu 2018</p>
+    </footer>
+  </main>
+
+
+</body>
+</html>
diff --git a/pages/contactme.html b/pages/contactme.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Contact Me</title>
+  <link rel="stylesheet" href="../styles/main.css">
+  <link rel="stylesheet" href="../styles/contactme.css">
+  <link href="https://fonts.googleapis.com/css?family=Limelight" rel="stylesheet">
+</head>
+<!-- <div class="container"> -->
+<body class="site-container">
+  <nav>
+    <ul>
+      <li>
+        <a href="../index.html">Home</a>
+      </li>
+      <li>
+        <a href="aboutme.html">About Me</a>
+      </li>
+      <li>
+        <a href="projects.html">Projects</a>
+      </li>
+      <li>
+        <a href="code-journal.html">Code Journal</a>
+      </li>
+      <li>
+        <a href="./contactme.html">Contact Me</a>
+      </li>
+    </ul>
+  </nav>
+
+  <main>
+    <h1>CONTACT ME</h1>
+    <h2>Call me, Beep me, if you wanna reach me!</h2>
+    <div id="icons">
+      <a href="https://www.facebook.com/egadsitsangela"> <img class="fb" src="http://www.novotelbangkokploenchit.com/wp-content/themes/novotel-template/images/icon-facebook-black.svg" alt="FB icon"></a>
+
+      <a href= "https://www.instagram.com/knockknockhusthere/"><img class="ig" src="http://objects.airfrance.com/FR/common/common/img/tab1st/social/picto_instagram_login.svg" alt="IG icon"></a>
+
+      <a href="https://www.linkedin.com/in/angela-hu-a971b580"><img class="linkedin" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png" alt="LinkedIn icon"></a>
+
+      <a href="https://github.com/knockknockhusthere"><img class="git" src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="GH icon"></a>
+    </div>
+  </main>
+  <footer>
+    <p>&copy; Angela Hu 2018</p>
+  </footer>
+</body>
+<!-- </div> -->
+</html>
diff --git a/pages/projects.html b/pages/projects.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Projects</title>
+  <link rel="stylesheet" href="../styles/main.css">
+  <link rel="stylesheet" href="../styles/projects.css">
+  <link href="https://fonts.googleapis.com/css?family=Limelight" rel="stylesheet">
+</head>
+
+<body class="site-container">
+  <nav>
+    <ul>
+      <li>
+        <a href="../index.html">Home</a>
+      </li>
+      <li>
+        <a href="aboutme.html">About Me</a>
+      </li>
+      <li>
+        <a href="./projects.html">Projects</a>
+      </li>
+      <li>
+        <a href="code-journal.html">Code Journal</a>
+      </li>
+      <li>
+        <a href="contactme.html">Contact Me</a>
+      </li>
+    </ul>
+  </nav>
+  <main>
+    <h1>PROJECTS</h1>
+    <section class="projects">
+      <div>
+        <h2>Calculator</h2>
+        <a href="https://github.com/knockknockhusthere/Calculator"><img class="git" src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="GH icon"></a>
+      </div>
+
+      <div>
+        <h2>Solar System</h2>
+        <a href="https://github.com/knockknockhusthere/Solar-System"><img class="git" src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="GH icon"></a>
+      </div>
+      <div>
+        <h2>Word Guess</h2>
+        <a href="https://github.com/knockknockhusthere/Word-Guess"><img class="git" src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="GH icon"></a>
+      </div>
+      <div>
+        <h2>Grocery Store</h2>
+        <a href="https://github.com/knockknockhusthere/grocery-store"><img class="git" src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="GH icon"></a>
+      </div>
+      <div>
+        <h2>Scrabble</h2>
+        <a href="https://github.com/torshimizu/Scrabble"><img class="git" src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="GH icon"></a>
+      </div>
+      <div>
+        <h2>Ride Share</h2>
+        <a href="https://github.com/knockknockhusthere/oo-ride-share"><img class="git" src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="GH icon"></a>
+      </div>
+      <div>
+        <h2>Hotel</h2>
+        <a href="https://github.com/knockknockhusthere/hotel"><img class="git" src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="GH icon"></a>
+      </div>
+      <div>
+        <h2>Startrly</h2>
+        <a href="https://github.com/knockknockhusthere/Startrly"><img class="git" src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="GH icon"></a>
+      </div>
+    </section>
+  </main>
+
+  <footer>
+    <p>&copy; Angela Hu 2018</p>
+  </footer>
+</body>
+</html>
diff --git a/styles/aboutme.css b/styles/aboutme.css
@@ -0,0 +1,54 @@
+.site-container {
+  width: 100vw;
+  height: 100vh;
+  background-image: url("../img/palms.jpg");
+  color: black;
+}
+
+main {
+  display: grid;
+  grid-template-rows: 1fr 3fr;
+  justify-content: center;
+}
+
+main h1 {
+  font-size: 4em;
+  text-align: center;
+  margin-left: 0;
+  margin-top: 10%;
+  margin-bottom: 5px;
+}
+
+p {
+  font-family: 'Satisfy', cursive;
+  font-size: 1.50em;
+  text-align: center;
+  font-weight: bold;
+}
+
+main h2 {
+  font-size: 2em;
+  text-align: center;
+  margin-top: 0;
+  margin-left: 0;
+  margin-bottom: 0;
+}
+
+.geo {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+footer p {
+  font-size: 1em;
+  font-family: none;
+  color:black;
+  text-align: left;
+  position:fixed;
+  left:0px;
+  bottom:-5px;
+  height:10px;
+  width:100%;
+}