Ada-C12 · north108 · Sep 24, 2019 · Sep 25, 2019 · Sep 27, 2019 · Sep 27, 2019
diff --git a/about.html b/about.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Elizabeth Northrop</title>
+
+  <link rel="stylesheet" href="styles/about-style.css">
+  <link rel="stylesheet" href="styles/styles.css">
+  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
+  <link rel="icon" href="images/logo.png">
+</head>
+
+<body>
+
+  <nav>
+    <ul class="nav-container">
+      <li id="home">
+        <a href="index.html">EN</a>
+      </li>
+      <li id="about">
+        About
+      </li>
+      <li id="hobbies">
+        <a href="hobby-blog.html">Hobbies</a>
+      </li>
+      <li id="portfolio">
+        <a href="portfolio.html">Portfolio</a>
+      </li>
+    </ul>
+  </nav>
+
+  <h1>About Me</h1>
+
+  <section class="about-me">
+      <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium diam eros, non placerat ex fringilla at. Phasellus cursus, nulla ac vulputate fringilla, nunc sapien porta leo, et cursus dui arcu vitae diam. Duis pellentesque sapien ut risus faucibus tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris sollicitudin quam eget metus auctor, vitae placerat diam convallis. Sed tristique blandit nisl, non efficitur mi tincidunt ut. Ut faucibus neque massa, sit amet gravida enim tincidunt et. Quisque eu metus erat. Donec gravida turpis leo, id aliquet turpis pellentesque ut. Nunc ante est, pharetra vitae feugiat in, convallis non nunc. Maecenas ut urna elit.
+      </p>
+    <img src="images/23316286_1702597489790880_3690314914472247183_n.jpg" alt="Elizabeth standing on a bridge">
+
+  </section>
+
+    <section class="contact">
+      <ul>
+        <li><a href="mailto:[email protected]" target="_blank">Email</a></li>
+        <li><a href="https://www.linkedin.com/in/elizabeth-northrop-5b1351112/" target="_blank">LinkedIn</a></li>
+        <li><a href= "https://github.com/north108" target="_blank">GitHub</a></li>
+      </ul>
+    </section>
+
+    <footer>&copy; 2019 Elizabeth Northrop</footer>
+
+</body>
+</html>
diff --git a/hobby-blog.html b/hobby-blog.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Elizabeth Northrop</title>
+
+  <link rel="stylesheet" href="styles/hobby-blog-style.css">
+  <link rel="stylesheet" href="styles/styles.css">
+  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
+  <link rel="icon" href="images/logo.png">
+</head>
+
+<body>
+
+  <nav>
+    <ul class="nav-container">
+      <li id="home">
+        <a href="index.html">EN</a>
+      </li>
+      <li id="about">
+        <a href="about.html">About</a>
+      </li>
+      <li id="hobbies">
+        Hobbies
+      </li>
+      <li id="portfolio">
+        <a href="portfolio.html">Portfolio</a>
+      </li>
+    </ul>
+  </nav>
+
+  <h1>My Hobbies</h1>
+
+  <div>
+    <section class="yoga">
+      <img src="images/yoga-poses.jpg" alt="yoga poses">
+      <h2>Yoga</h2>
+      <p>In faucibus sem a turpis placerat ultricies. Integer eget fringilla odio. Vivamus tincidunt non augue vitae convallis. Aliquam vitae interdum erat, ut luctus eros. Praesent dictum nec nulla at vestibulum. In suscipit, mi quis vestibulum facilisis, lorem mauris dapibus lectus, ac consequat mauris mauris ac dui. Aliquam erat volutpat. Sed id posuere ante. Etiam scelerisque orci elit, non consectetur turpis semper in. Suspendisse aliquam a enim eu imperdiet. Fusce elementum at elit et interdum. Suspendisse sed pharetra turpis.</p>
+    </section>
+
+    <section class="music">
+      <img src="images/music.jpg" alt="listening to music">
+      <h2>Music</h2>
+      <p>In faucibus sem a turpis placerat ultricies. Integer eget fringilla odio. Vivamus tincidunt non augue vitae convallis. Aliquam vitae interdum erat, ut luctus eros. Praesent dictum nec nulla at vestibulum. In suscipit, mi quis vestibulum facilisis, lorem mauris dapibus lectus, ac consequat mauris mauris ac dui. Aliquam erat volutpat. Sed id posuere ante. Etiam scelerisque orci elit, non consectetur turpis semper in. Suspendisse aliquam a enim eu imperdiet. Fusce elementum at elit et interdum. Suspendisse sed pharetra turpis.</p>
+    </section>
+
+    <section class="plants">
+      <h2>Houseplants</h2>
+      <img src="images/plants.jpg" alt="houseplants">
+      <p>In faucibus sem a turpis placerat ultricies. Integer eget fringilla odio. Vivamus tincidunt non augue vitae convallis. Aliquam vitae interdum erat, ut luctus eros. Praesent dictum nec nulla at vestibulum. In suscipit, mi quis vestibulum facilisis, lorem mauris dapibus lectus, ac consequat mauris mauris ac dui. Aliquam erat volutpat. Sed id posuere ante. Etiam scelerisque orci elit, non consectetur turpis semper in. Suspendisse aliquam a enim eu imperdiet. Fusce elementum at elit et interdum. Suspendisse sed pharetra turpis.</p>
+    </section>
+
+    <section class="fashion"> 
+        <h2>Fashion</h2>
+      <img src="images/fashion.jpg" alt="fashion sketch">
+      <p>In faucibus sem a turpis placerat ultricies. Integer eget fringilla odio. Vivamus tincidunt non augue vitae convallis. Aliquam vitae interdum erat, ut luctus eros. Praesent dictum nec nulla at vestibulum. In suscipit, mi quis vestibulum facilisis, lorem mauris dapibus lectus, ac consequat mauris mauris ac dui. Aliquam erat volutpat. Sed id posuere ante. Etiam scelerisque orci elit, non consectetur turpis semper in. Suspendisse aliquam a enim eu imperdiet. Fusce elementum at elit et interdum. Suspendisse sed pharetra turpis.</p>
+    </section>
+  </div>
+
+    <section class="contact">
+      <ul>
+        <li><a href="mailto:[email protected]" target="_blank">Email</a></li>
+        <li><a href="https://www.linkedin.com/in/elizabeth-northrop-5b1351112/" target="_blank">LinkedIn</a></li>
+        <li><a href= "https://github.com/north108" target="_blank">GitHub</a></li>
+      </ul>
+    </section>
+
+    <footer>&copy; 2019 Elizabeth Northrop</footer>
+
+</body>
+</html>
diff --git a/images/23316286_1702597489790880_3690314914472247183_n.jpg b/images/23316286_1702597489790880_3690314914472247183_n.jpg
diff --git a/images/ELIZABETH_NORTHROP.jpg b/images/ELIZABETH_NORTHROP.jpg
diff --git a/images/fashion.jpg b/images/fashion.jpg
diff --git a/images/logo.png b/images/logo.png
diff --git a/images/music.jpg b/images/music.jpg
diff --git a/images/plants.jpg b/images/plants.jpg
diff --git a/images/yoga-poses.jpg b/images/yoga-poses.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Elizabeth Northrop</title>
+
+  <link rel="stylesheet" href="styles/index-style.css">
+  <link rel="stylesheet" href="styles/styles.css">
+  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
+  <link rel="icon" href="images/logo.png">
+</head>
+
+<body>
+
+  <nav>
+    <ul class="nav-container">
+      <li id="home">
+        EN
+      </li>
+      <li id="about">
+        <a href="about.html">About</a>
+      </li>
+      <li id="hobbies">
+        <a href="hobby-blog.html">Hobbies</a>
+      </li>
+      <li id="portfolio">
+        <a href="portfolio.html">Portfolio</a>
+      </li>
+    </ul>
+  </nav>
+
+  <h1>Elizabeth Northrop</h1>
+
+  <section class="greeting">
+    <img src="images/ELIZABETH_NORTHROP.jpg" alt="Picture of Elizabeth">
+    <p>
+      Hey hey! I am Elizabeth - Software Developer
+    </p>
+  </section>
+
+    <section class="contact">
+      <ul>
+        <li><a href="mailto:[email protected]" target="_blank">Email</a></li>
+        <li><a href="https://www.linkedin.com/in/elizabeth-northrop-5b1351112/" target="_blank">LinkedIn</a></li>
+        <li><a href= "https://github.com/north108" target="_blank">GitHub</a></li>
+      </ul>
+    </section>
+
+    <footer>&copy; 2019 Elizabeth Northrop</footer>
+
+</body>
+</html>
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Elizabeth Northrop</title>
+
+  <link rel="stylesheet" href="styles/styles.css">
+  <link rel="stylesheet" href="styles/portfolio-style.css">
+  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
+  <link rel="icon" href="images/logo.png">
+</head>
+
+<body>
+
+  <nav>
+    <ul class="nav-container">
+      <li id="home">
+        <a href="index.html">EN</a>
+      </li>
+      <li id="about">
+        <a href="about.html">About</a>
+      </li>
+      <li id="hobbies">
+        <a href="hobby-blog.html">Hobbies</a>
+      </li>
+      <li id="portfolio">
+        Portfolio
+      </li>
+    </ul>
+  </nav>
+
+  <h1>Notable Projects</h1>
+
+  <section class="portfolio">
+    <h2><a href="https://github.com/north108/hotel" target="_blank">Hotel</a></h2> 
+    <h2><a href="https://github.com/north108/ride-share" target="_blank">Ride Share</a></h2>
+    <h2><a href="https://github.com/north108/grocery-store" target="_blank">Grocery Store</a></h2>
+    <h2><a href="https://github.com/north108/personal-portfolio-site" target="_blank">Personal Site</a></h2>
+
+  </section>
+
+    <section class="contact">
+      <ul>
+        <li><a href="mailto:[email protected]" target="_blank">Email</a></li>
+        <li><a href="https://www.linkedin.com/in/elizabeth-northrop-5b1351112/" target="_blank">LinkedIn</a></li>
+        <li><a href= "https://github.com/north108" target="_blank">GitHub</a></li>
+      </ul>
+    </section>
+
+    <footer>&copy; 2019 Elizabeth Northrop</footer>
+
+</body>
+</html>
diff --git a/styles/about-style.css b/styles/about-style.css
@@ -0,0 +1,32 @@
+#about {
+  color: rgb(228, 22, 22);
+}
+
+.about-me {
+  display: grid;
+  width: 80%;
+  text-align: center;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+  padding-top: 3%;
+  padding-inline-start: 10%; 
+  padding-inline-end: 10%;
+}
+
+.about-me p {
+  margin: 0;
+  grid-column-start: 1;
+  padding-inline-end: 5%;
+  text-align: right;
+  font-size: 2vw;
+}
+
+.about-me img {
+  grid-column-start: 2;
+  text-align: right;
+  width: 100%;
+  height: auto;
+}
+
+
+
diff --git a/styles/hobby-blog-style.css b/styles/hobby-blog-style.css
@@ -0,0 +1,48 @@
+#hobbies {
+  color: rgb(228, 22, 22);
+}
+
+
+div {
+  display: grid;
+  grid-template-rows: 1fr 1fr 1fr .8fr;
+  padding-inline-start: 5%;
+  padding-inline-end: 5%;
+}
+
+
+div section {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 30px 1fr;
+  padding-bottom: 5%;
+
+}
+
+
+div section h2 {
+  grid-row-start: 1;
+  margin: 0;
+  font-size: 2.2vw;
+  padding-inline-start: 5%;
+  grid-column-start: 2;
+}
+
+
+div section p {
+  padding-inline-start: 5%;
+  margin: 0;
+  font-size: 2vw;
+  grid-row-start: 2;
+  grid-column-start: 2;
+
+}
+
+section img {
+  text-align: center;
+  width: 100%;
+  height: auto;
+  grid-column-start: 1;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
diff --git a/styles/index-style.css b/styles/index-style.css
@@ -0,0 +1,31 @@
+#home {
+  color: rgb(228, 22, 22);
+}
+
+.greeting {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+  padding-top: 3%;
+  padding-inline-start: 5%; 
+  padding-inline-end: 5%;
+}
+
+.greeting img {
+  grid-column-start: 1;
+  grid-column-end: 2;
+  text-align: left;
+  width: 100%;
+  height: auto;
+  align-self: center;
+}
+
+.greeting p {
+  text-align: left;
+  grid-column-start: 2;
+  grid-column-end: 3;
+  padding-inline-start: 5%;
+  font-size: 3vw;
+  align-self: center;
+}
+