Ada-C14 · jwinchan · Oct 26, 2020 · Oct 26, 2020 · Oct 26, 2020 · Oct 26, 2020
diff --git a/images/20151021_164823.jpg b/images/20151021_164823.jpg
diff --git a/images/unicorn_latte.jpg b/images/unicorn_latte.jpg
diff --git a/pages/about.html b/pages/about.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Jessica Chan About Me</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
+    <link href="../styles/style.css" rel="stylesheet" />
+    <link href="../styles/about.css" rel="stylesheet" />
+</head>
+<body>
+<div class="container">
+    <nav class="menu">
+        <div class="page-nav"><a href="index.html">Home</a></div>
+        <div class="page-nav"><a href="about.html">About Me</a></div>
+        <div class="page-nav"><a href="portfolio.html">Portfolio</a></div>
+        <div class="page-nav"><a href="hobby-blog.html">Blog</a></div>
+    </nav>
+
+    <main class="content">
+
+        <div><img src="../images/unicorn_latte.jpg" alt="me drinking unicorn latte" /></div>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim tempus efficitur. Praesent porta luctus consectetur. Donec efficitur gravida eros, nec ullamcorper risus pellentesque tincidunt. Etiam et ultrices lacus. Morbi interdum est diam, in interdum ex tempor at. Proin ultricies, ipsum at venenatis congue, metus urna porttitor quam, eget porta mauris sapien tristique dui. Ut finibus a sem non luctus. Aenean venenatis ultricies iaculis. Pellentesque quis hendrerit est, a fermentum ante.</p>
+
+        <p>Duis mauris orci, egestas in metus quis, luctus luctus turpis. Mauris euismod enim sed dolor interdum, non mollis nunc iaculis. Sed pellentesque vel magna vitae varius. Proin blandit diam sit amet odio elementum ornare. Curabitur nulla nisi, varius non felis at, semper posuere tellus. Sed accumsan faucibus mauris eget facilisis. Pellentesque congue placerat tincidunt. Nulla aliquet dui egestas, lacinia augue in, facilisis tortor. Pellentesque lorem lacus, semper suscipit ornare vitae, elementum in massa. Etiam bibendum erat arcu, imperdiet auctor augue vehicula et. Fusce ut elit arcu. Phasellus sit amet tellus ac neque suscipit mattis. Curabitur rhoncus velit sit amet blandit elementum. Cras porttitor massa a eleifend finibus. Praesent ut sapien vel ex tincidunt vehicula vel ac mi.</p>
+
+        <p>Cras ultricies massa ut massa gravida auctor. Aliquam erat volutpat. Aliquam quis enim non orci placerat semper. Maecenas dapibus est eu pharetra pretium. Nullam aliquet arcu fermentum, porta quam at, iaculis est. Cras finibus rhoncus ex, ut elementum lacus blandit vel. Integer cursus lectus non sollicitudin tempor. Morbi nec auctor nibh. Cras eu vehicula elit. Aliquam mollis nunc in metus placerat congue. Suspendisse tortor dui, faucibus sed ante in, ornare auctor lacus. Vivamus quis sem non lectus fringilla venenatis.</p>
+
+        <p>Nullam interdum, nulla non finibus tincidunt, turpis eros auctor lorem, eget rhoncus risus augue dapibus massa. Quisque et porta urna, et fringilla enim. Aenean sagittis dui justo, id venenatis lacus fringilla vitae. Nullam ullamcorper cursus nisl consequat rhoncus. Donec porta, neque eget fringilla tincidunt, ex lacus dapibus est, nec commodo turpis justo hendrerit augue. Ut nisi lectus, congue a tempus luctus, semper a lacus. Sed sed sagittis dolor, eu feugiat nisi. Curabitur eget elit vitae nunc dapibus facilisis vel porttitor risus. Sed eu sem ultricies sem tempor pellentesque. Etiam metus erat, dictum nec pulvinar non, suscipit at lacus.</p>
+
+        <p>Curabitur a lacinia mi. Nam porttitor tempus feugiat. Vivamus vel neque non augue congue vulputate non quis neque. Vestibulum ut libero eget metus elementum aliquam id nec est. Donec eu interdum metus, eget maximus est. Maecenas laoreet rhoncus auctor. Nullam feugiat tempus neque sit amet pretium. Donec luctus lacus id ornare lacinia. Mauris quis metus aliquet, ultricies turpis eget, viverra tortor. Nunc rhoncus felis congue lacus sodales, vel efficitur libero fermentum.</p>
+    </main>
+    <footer>
+        &#169; 2020, Jessica Chan. All rights reserved.
+    </footer>
+</div>
+</body>
+</html>
diff --git a/pages/hobby-blog.html b/pages/hobby-blog.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Jessica Chan Blog</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
+    <link href="../styles/style.css" rel="stylesheet" />
+    <link href="../styles/hobby-blog.css" rel="stylesheet" />
+</head>
+<body>
+<div class="container">
+    <nav class="menu">
+        <div class="page-nav"><a href="index.html">Home</a></div>
+        <div class="page-nav"><a href="about.html">About Me</a></div>
+        <div class="page-nav"><a href="portfolio.html">Portfolio</a></div>
+        <div class="page-nav"><a href="hobby-blog.html">Blog</a></div>
+    </nav>
+
+    <main class="content">
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim tempus efficitur. Praesent porta luctus consectetur. Donec efficitur gravida eros, nec ullamcorper risus pellentesque tincidunt. Etiam et ultrices lacus. Morbi interdum est diam, in interdum ex tempor at. Proin ultricies, ipsum at venenatis congue, metus urna porttitor quam, eget porta mauris sapien tristique dui. Ut finibus a sem non luctus. Aenean venenatis ultricies iaculis. Pellentesque quis hendrerit est, a fermentum ante.</p>
+
+        <p>Duis mauris orci, egestas in metus quis, luctus luctus turpis. Mauris euismod enim sed dolor interdum, non mollis nunc iaculis. Sed pellentesque vel magna vitae varius. Proin blandit diam sit amet odio elementum ornare. Curabitur nulla nisi, varius non felis at, semper posuere tellus. Sed accumsan faucibus mauris eget facilisis. Pellentesque congue placerat tincidunt. Nulla aliquet dui egestas, lacinia augue in, facilisis tortor. Pellentesque lorem lacus, semper suscipit ornare vitae, elementum in massa. Etiam bibendum erat arcu, imperdiet auctor augue vehicula et. Fusce ut elit arcu. Phasellus sit amet tellus ac neque suscipit mattis. Curabitur rhoncus velit sit amet blandit elementum. Cras porttitor massa a eleifend finibus. Praesent ut sapien vel ex tincidunt vehicula vel ac mi.</p>
+
+        <p>Cras ultricies massa ut massa gravida auctor. Aliquam erat volutpat. Aliquam quis enim non orci placerat semper. Maecenas dapibus est eu pharetra pretium. Nullam aliquet arcu fermentum, porta quam at, iaculis est. Cras finibus rhoncus ex, ut elementum lacus blandit vel. Integer cursus lectus non sollicitudin tempor. Morbi nec auctor nibh. Cras eu vehicula elit. Aliquam mollis nunc in metus placerat congue. Suspendisse tortor dui, faucibus sed ante in, ornare auctor lacus. Vivamus quis sem non lectus fringilla venenatis.</p>
+
+        <p>Nullam interdum, nulla non finibus tincidunt, turpis eros auctor lorem, eget rhoncus risus augue dapibus massa. Quisque et porta urna, et fringilla enim. Aenean sagittis dui justo, id venenatis lacus fringilla vitae. Nullam ullamcorper cursus nisl consequat rhoncus. Donec porta, neque eget fringilla tincidunt, ex lacus dapibus est, nec commodo turpis justo hendrerit augue. Ut nisi lectus, congue a tempus luctus, semper a lacus. Sed sed sagittis dolor, eu feugiat nisi. Curabitur eget elit vitae nunc dapibus facilisis vel porttitor risus. Sed eu sem ultricies sem tempor pellentesque. Etiam metus erat, dictum nec pulvinar non, suscipit at lacus.</p>
+
+        <p>Curabitur a lacinia mi. Nam porttitor tempus feugiat. Vivamus vel neque non augue congue vulputate non quis neque. Vestibulum ut libero eget metus elementum aliquam id nec est. Donec eu interdum metus, eget maximus est. Maecenas laoreet rhoncus auctor. Nullam feugiat tempus neque sit amet pretium. Donec luctus lacus id ornare lacinia. Mauris quis metus aliquet, ultricies turpis eget, viverra tortor. Nunc rhoncus felis congue lacus sodales, vel efficitur libero fermentum.</p>
+    </main>
+    <footer>
+        &#169; 2020, Jessica Chan. All rights reserved.
+    </footer>
+</div>
+</body>
+</html>
diff --git a/pages/index.html b/pages/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Jessica Chan Homepage</title>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
+        <link href="../styles/style.css" rel="stylesheet" />
+        <link href="../styles/index.css" rel="stylesheet" />
+    </head>
+    <body>
+        <div class="container">
+            <nav class="menu">
+                <div class="page-nav"><a href="index.html">Home</a></div>
+                <div class="page-nav"><a href="about.html">About Me</a></div>
+                <div class="page-nav"><a href="portfolio.html">Portfolio</a></div>
+                <div class="page-nav"><a href="hobby-blog.html">Blog</a></div>
+            </nav>
+
+            <main class="content">
+
+                <h1>Welcome to Jessica Chan's Chamber of Secrets</h1>
+                <div><img src="../images/20151021_164823.jpg" alt="Lab Mix Puppy" /></div>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim tempus efficitur. Praesent porta luctus consectetur. Donec efficitur gravida eros, nec ullamcorper risus pellentesque tincidunt. Etiam et ultrices lacus. Morbi interdum est diam, in interdum ex tempor at. Proin ultricies, ipsum at venenatis congue, metus urna porttitor quam, eget porta mauris sapien tristique dui. Ut finibus a sem non luctus. Aenean venenatis ultricies iaculis. Pellentesque quis hendrerit est, a fermentum ante.</p>
+
+                <p>Duis mauris orci, egestas in metus quis, luctus luctus turpis. Mauris euismod enim sed dolor interdum, non mollis nunc iaculis. Sed pellentesque vel magna vitae varius. Proin blandit diam sit amet odio elementum ornare. Curabitur nulla nisi, varius non felis at, semper posuere tellus. Sed accumsan faucibus mauris eget facilisis. Pellentesque congue placerat tincidunt. Nulla aliquet dui egestas, lacinia augue in, facilisis tortor. Pellentesque lorem lacus, semper suscipit ornare vitae, elementum in massa. Etiam bibendum erat arcu, imperdiet auctor augue vehicula et. Fusce ut elit arcu. Phasellus sit amet tellus ac neque suscipit mattis. Curabitur rhoncus velit sit amet blandit elementum. Cras porttitor massa a eleifend finibus. Praesent ut sapien vel ex tincidunt vehicula vel ac mi.</p>
+
+                <p>Cras ultricies massa ut massa gravida auctor. Aliquam erat volutpat. Aliquam quis enim non orci placerat semper. Maecenas dapibus est eu pharetra pretium. Nullam aliquet arcu fermentum, porta quam at, iaculis est. Cras finibus rhoncus ex, ut elementum lacus blandit vel. Integer cursus lectus non sollicitudin tempor. Morbi nec auctor nibh. Cras eu vehicula elit. Aliquam mollis nunc in metus placerat congue. Suspendisse tortor dui, faucibus sed ante in, ornare auctor lacus. Vivamus quis sem non lectus fringilla venenatis.</p>
+
+                <p>Nullam interdum, nulla non finibus tincidunt, turpis eros auctor lorem, eget rhoncus risus augue dapibus massa. Quisque et porta urna, et fringilla enim. Aenean sagittis dui justo, id venenatis lacus fringilla vitae. Nullam ullamcorper cursus nisl consequat rhoncus. Donec porta, neque eget fringilla tincidunt, ex lacus dapibus est, nec commodo turpis justo hendrerit augue. Ut nisi lectus, congue a tempus luctus, semper a lacus. Sed sed sagittis dolor, eu feugiat nisi. Curabitur eget elit vitae nunc dapibus facilisis vel porttitor risus. Sed eu sem ultricies sem tempor pellentesque. Etiam metus erat, dictum nec pulvinar non, suscipit at lacus.</p>
+
+                <p>Curabitur a lacinia mi. Nam porttitor tempus feugiat. Vivamus vel neque non augue congue vulputate non quis neque. Vestibulum ut libero eget metus elementum aliquam id nec est. Donec eu interdum metus, eget maximus est. Maecenas laoreet rhoncus auctor. Nullam feugiat tempus neque sit amet pretium. Donec luctus lacus id ornare lacinia. Mauris quis metus aliquet, ultricies turpis eget, viverra tortor. Nunc rhoncus felis congue lacus sodales, vel efficitur libero fermentum.</p>
+            </main>
+            <footer>
+                &#169; 2020, Jessica Chan. All rights reserved.
+            </footer>
+        </div>
+    </body>
+</html>
diff --git a/pages/portfolio.html b/pages/portfolio.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Jessica Chan Portfolio</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
+    <link href="../styles/style.css" rel="stylesheet" />
+    <link href="../styles/portfolio.css" rel="stylesheet" />
+</head>
+<body>
+<div class="container">
+    <nav class="menu">
+        <div class="page-nav"><a href="index.html">Home</a></div>
+        <div class="page-nav"><a href="about.html">About Me</a></div>
+        <div class="page-nav"><a href="portfolio.html">Portfolio</a></div>
+        <div class="page-nav"><a href="hobby-blog.html">Blog</a></div>
+    </nav>
+
+    <main class="content">
+        <h3> Click a project to go to the github repo: </h3>
+        <p><a href="https://github.com/jwinchan/book-review-site" target="_blank">Book Review Site</a></p>
+        <p><a href="https://github.com/jwinchan/slack-cli" target="_blank">Slack CLI</a></p>
+        <p><a href="https://github.com/jwinchan/oo-ride-share" target="_blank">OO Rideshare</a></p>
+    </main>
+    <footer>
+        &#169; 2020, Jessica Chan. All rights reserved.
+    </footer>
+</div>
+</body>
+</html>
diff --git a/styles/about.css b/styles/about.css
@@ -0,0 +1,6 @@
+img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 25%;
+}
diff --git a/styles/hobby-blog.css b/styles/hobby-blog.css
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,6 @@
+img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 25%;
+}
diff --git a/styles/portfolio.css b/styles/portfolio.css
@@ -0,0 +1,14 @@
+.content a {
+    color: #a5a58d;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+.content a:hover {
+    background: #ddd;
+    color: black;
+}
+
+h3 {
+    text-align: center;
+}
diff --git a/styles/style.css b/styles/style.css
@@ -0,0 +1,69 @@
+* ul {
+    list-style: none;
+}
+
+body {
+    color: #a5a58d;
+    background-color: #fff1e6;
+    font-family: "Montserrat";
+}
+
+.container {
+    height: 100%;
+    display: grid;
+    grid-gap: 3px;
+    grid-template-rows: 10% 80% 10%;
+}
+
+.menu {
+    overflow:hidden;
+    position: fixed;
+    display: flex;
+    top: 0;
+    width: 100%;
+    border: none;
+    background-color: #eddcd2;
+    margin: 0 auto;
+}
+
+.menu a {
+    display: flex;
+    color: #a5a58d;
+    justify-content: flex-end;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+.menu a:hover {
+    background: #ddd;
+    color: black;
+}
+
+main {
+    grid-row: 2 / -3;
+    align-content: center;
+}
+
+h1 {
+    text-align:center;
+    margin: 20px;
+}
+
+p {
+    text-align: center;
+    margin: 20px;
+}
+
+footer {
+    border: none;
+    background-color: #eddcd2;
+    padding: 15px 0px 10px 0px;
+    font-size: 10px;
+    text-align:center;
+    margin-top: 50px;
+    float: left;
+    grid-row: -1;
+}
+
+
+