AdaGold · Lindseymarcea · Dec 15, 2022
diff --git a/Lindsey_picture.jpg b/Lindsey_picture.jpg
diff --git a/about.css b/about.css
@@ -0,0 +1,152 @@
+
+body {
+  font-family: sans-serif;
+  background-color: #FAF9F6; 
+  margin-left: 7em;
+  margin-top: 5em;
+  line-height: 1em;
+}
+
+.wrapper {
+  display:grid;
+  grid-gap: 10px;
+  row-gap: 0px;
+  grid-template-columns: [col1-start] 150px  [col2-start] 350px  [col3-start] 100px [col3-end];
+  grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
+  background-color: #FAF9F6;
+  color: #444;
+  /* margin-left: 7em; */
+  justify-items:left;
+}
+
+.h1 {
+  grid-column: col1-start / col3-start;
+  grid-row: row1-start;
+  justify-items:left;
+  margin-left: 4em;
+  font-size:larger;
+  font-weight: bold;
+  text-align: center;
+  line-height: 10em;
+
+} 
+.h2 {
+  grid-column: col1-start / col3-start;
+  grid-row: row2-start ;
+  margin-left: 4em;
+  justify-items:left;
+  text-align: center;
+  line-height: 2em;
+}
+.h3 {
+  grid-column: col1-start / col3-start;
+  grid-row: row3-start ;
+  margin-left: 4.5em;
+  justify-items:left;
+}
+.nav {
+  grid-column: col2-start /col3-start;
+  grid-row: row4-start;
+  margin-left: 5em;
+  justify-items:left;
+  text-align: center;
+  line-height: 2em ;
+}
+
+.footer {
+  /* margin-left: 7em; */
+  justify-items:left;
+  grid-column: col2-start /col3-start;
+  grid-row: row5-start;
+  line-height: 3em;
+  text-align: center;
+}
+
+main {
+  font-size: small;
+  font-family: sans-serif;
+  /* background-color: #5ea197; */
+}
+
+/* .h1 {
+  text-align:inherit;
+  justify-items:left;
+  margin-left: 9.3em;
+  margin-top: 5em;
+  color: black;
+  font-family: sans-serif;
+  grid-column: col1-start / col3-start;
+  grid-row: row1-start ;
+} */
+
+/* h2,h3,h4, nav {
+  margin-left: 9.3em;
+  justify-items:left;
+  text-align:inherit;
+  font-size: medium;
+  color: black;
+  font-family: sans-serif;
+  grid-column: col3-start ;
+  grid-row: row1-start / row2-end;
+} */
+
+/* .h2 {
+  grid-column: col1-start / col3-start;
+  grid-row: row1-start ;
+}
+
+.h3 {
+  grid-column: col1-start / col3-start;
+  grid-row: row1-start ;
+}
+
+
+.nav {
+  grid-column: col3-start ;
+  grid-row: row1-start / row2-end;
+} */
+
+
+.fit-picture {
+  width: 250px;
+  grid-column: col3-start ;
+  grid-row: row1-start / row2-end;
+  margin-left: 9.3em;
+  justify-items:left;
+
+}
+/* used grid settings from original h2 and am now changing h2 to be the same as h1 so that it will be right below */
+
+.container {
+  display: flex;
+  position: relative;
+}
+
+.text-block {
+  position: absolute;
+  text-align: center;
+  bottom: 50px;
+  right: 25px;
+  background-color: black;
+  color: white;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 18px;
+  color: white;
+  }
+
+img { 
+  width: 100%;
+  height: 100%;
+  /* opacity: 0.3; */
+  } 
+/* #nothing changes if i comment the above part out or not */
+/* styling for index and portfolio and about page */
+/* rgb(136, 146, 176)
diff --git a/about.html b/about.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <!-- <link rel="stylesheet" href="stylesheets/about.css" /> -->
+  <link rel="stylesheet" href="./about.css">
+  <!-- <link href="/stylesheets/about.css" rel="stylesheet"> -->
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+
+
+    <html>
+<body>
+
+<h2>Get to know Lindsey!</h2>
+
+<p>Fun facts listed below!</p>
+
+<div class="container">
+<img src="layered-waves.jpg" alt="Colorful Layered Waves" width="1000" height="300">
+<div class="center">I graudated college with my bachelors in Political Science & Public Service
+                    with a minor in Sociology. I'm a creative artist in many mediums, love to learn through reading and
+                    trying new things. I also love to travel and workout!
+</div>
+</div>
+
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link href="stylesheets/styles.css" rel="stylesheet">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+
+    <div class="wrapper">
+    <div class="h1">Hi, I'm Lindsey.</div>
+    <div class="h2">I am a Software Engineer Student currently studying at ADA Developers
+        Academy.</div>
+    <div class="h3">Check out my Portfolio and About Me links!</div>
+    <div class="nav">
+        <ul>
+            <li>
+                <a href = "portfolio.html">Portfolio</a>
+            <li>
+                <a href = "about.html">About me</a>
+        </ul>
+    </nav>
+</div>
+    <div class="footer">
+        <footer>
+            <!-- <nav>
+                <ul>
+                    <li>
+                        <a href="#">Contact</a>
+                </ul>
+            </nav> -->
+            <h4> &copy; 2022 </h4>
+        </footer>
+
+    </div>
+<img class="fit-picture"
+src="Lindsey_picture.jpg"
+alt="Graduation Picture of Lindsey Butler">
+
+</body>
+</html>
diff --git a/layered-waves.jpg b/layered-waves.jpg
diff --git a/pages/about.html b/pages/about.html
diff --git a/pages/index.html b/pages/index.html
diff --git a/pages/portfolio.html b/pages/portfolio.html
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link href="styles/styles-portfolio.css" rel="stylesheet">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+    <div class="grid">
+    <header>
+    Browse beautiful projects I've completed below!
+    </header>
+    <main>
+        <ul>
+            <li>
+                <a href = "https://github.com/Ada-C18/js-adagrams">Adagrams</a>
+                A game in which a player is given a random set of letters and must make an anagram using those letters.
+                Each submitted word will score points.
+            <li> <a href = "https://github.com/neidacreates/solar-system-api">Solar System API</a>
+                Solar System API. This API will store information about different planets.
+            <li>
+                <a href = "https://github.com/Lindseymarcea/task-list-api">Task List API</a>
+                Organize your to-do list for the day with my Task-List API. Never forget something on your list again!
+            <li>
+                <a href = "https://github.com/Lindseymarcea/swap-meet">Swap Meet</a>
+                We are hosting a Swap Meet! This is the backend for an app that allows
+                Vendors to be able to swap their top item and swap items by category as well
+                as list inventory items.
+            <li>
+                <a href = "https://github.com/Lindseymarcea/viewing-party">Viewing Party</a>
+                A way to keep track of a movie list, movies watched, to be watched and favorites!
+                Use this when you host regular movie or "Viewing Parties" with family and friends!
+
+        </ul>
+    </main>
+    <!-- <aside>
+    Sidebar
+    </aside> -->
+    <!-- can put something on the side(not sure what) -->
+    <footer>
+        <h2> &copy; 2022 </h2>
+        <nav>
+            <ul>
+                <li>
+                    <a href = "index.html">Home</a>
+                <li>
+                    <a href = "about.html">About me</a>
+                </ul>
+        </nav>
+    </footer>
+</div>
+<nav>
+</nav>
+</body>
+</html>
+</body>
+</html>
diff --git a/stylesheets/portfolio.css b/stylesheets/portfolio.css
@@ -0,0 +1,25 @@
+body {
+    font-family: sans-serif;
+    background-color: #FAF9F6;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: 75% 25%;
+    grid-template-rows: 50px 200px 100px;
+    grid-gap: 1em;
+    }
+
+    header,
+    footer {
+    grid-column-start: 1;
+    grid-column-end: 3;
+    }
+
+    .grid > * {
+    background: #FAF9F6;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1.5em;
+    }