Ada-C11 · kguadron · Apr 8, 2019 · Apr 8, 2019 · Apr 8, 2019 · Apr 8, 2019
diff --git a/about-me.html b/about-me.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>Karla Guadron</title>
+  <link href="styles/main.css" rel="stylesheet">
+  <link href="styles/about-me.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="parallax">
+    <nav>
+      <ul>
+        <li><a href="./index.html">home</a></li>
+        <li><a href="./portfolio.html">portfolio</a></li>
+        <li><a href="./blog.html">blog</a></li>
+      </ul>
+    </nav>
+    <header>
+      <h1>Karla Guadron</h1>
+    </header>
+  </div>
+
+  <div class="main">
+    <p>
+      under construction
+    </p>
+  </div>
+
+  <div class="parallax2">
+    <footer>
+      <a href="https://github.com/kguadron">
+        <img alt="GitHub logo" src="./images/github.png">
+      </a>
+      <a href="https://www.linkedin.com/in/karla-guadron-23975b26/">
+        <img alt="LinkedIn logo" src="./images/linkedin.png">
+      </a>
+    </footer>
+
+    <div id="photo-cred">
+      <p> All mosaic images are personal photographs from
+      <a href="https://en.wikipedia.org/wiki/Wat_Pha_Sorn_Kaew">
+        Wat Pha Sorn Kaew
+      </a>
+      </p>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/blog.html b/blog.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>Karla Guadron</title>
+  <link href="styles/main.css" rel="stylesheet">
+  <link href="styles/blog.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="parallax">
+    <nav>
+      <ul>
+        <li><a href="./index.html">home</a></li>
+        <li><a href="./about-me.html">about me</a></li>
+        <li><a href="./portfolio.html">portfolio</a></li>
+      </ul>
+    </nav>
+    <header>
+      <h1>Musings</h1>
+    </header>
+  </div>
+
+  <div class="main">
+    <p>
+      under construction
+    </p>
+  </div>
+
+  <div class="parallax2">
+    <footer>
+      <a href="https://github.com/kguadron">
+        <img alt="GitHub logo" src="./images/github.png">
+      </a>
+      <a href="https://www.linkedin.com/in/karla-guadron-23975b26/">
+        <img alt="LinkedIn logo" src="./images/linkedin.png">
+      </a>
+    </footer>
+
+    <div id="photo-cred">
+      <p> All mosaic images are personal photographs from
+      <a href="https://en.wikipedia.org/wiki/Wat_Pha_Sorn_Kaew">
+        Wat Pha Sorn Kaew
+      </a>
+      </p>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/images/adagrams.jpeg b/images/adagrams.jpeg
diff --git a/images/arch.jpg b/images/arch.jpg
diff --git a/images/bowl.jpg b/images/bowl.jpg
diff --git a/images/github.png b/images/github.png
diff --git a/images/hotel.jpeg b/images/hotel.jpeg
diff --git a/images/linkedin.png b/images/linkedin.png
diff --git a/images/me.jpg b/images/me.jpg
diff --git a/images/rideshare.jpeg b/images/rideshare.jpeg
diff --git a/images/shells.jpg b/images/shells.jpg
diff --git a/images/slack.png b/images/slack.png
diff --git a/images/slack_api.png b/images/slack_api.png
diff --git a/images/stairs.jpg b/images/stairs.jpg
diff --git a/images/stripes.jpg b/images/stripes.jpg
diff --git a/images/sun.jpg b/images/sun.jpg
diff --git a/images/swirl.jpg b/images/swirl.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>Karla Guadron</title>
+  <link href="styles/main.css" rel="stylesheet">
+  <link href="styles/index.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="parallax">
+    <nav>
+      <ul>
+        <li><a href="./about-me.html">about me</a></li>
+        <li><a href="./portfolio.html">portfolio</a></li>
+        <li><a href="./blog.html">blog</a></li>
+      </ul>
+    </nav>
+    <header>
+      <h1>Hi, I'm Karla</h1>
+    </header>
+  </div>
+
+  <div class="main">
+    <p>
+      I am a ...<br>
+      software developer<br>
+      human rights advocate<br>
+      teacher<br>
+      forever student<br>
+    </p>
+  </div>
+
+  <div class="parallax2">
+    <footer>
+      <a href="https://github.com/kguadron">
+        <img alt="GitHub logo" src="./images/github.png">
+      </a>
+      <a href="https://www.linkedin.com/in/karla-guadron-23975b26/">
+        <img alt="LinkedIn logo" src="./images/linkedin.png">
+      </a>
+    </footer>
+
+    <div id="photo-cred">
+      <p> All mosaic images are personal photographs from
+      <a href="https://en.wikipedia.org/wiki/Wat_Pha_Sorn_Kaew">
+        Wat Pha Sorn Kaew
+      </a>
+      </p>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>Karla Guadron</title>
+  <link href="styles/main.css" rel="stylesheet">
+  <link href="styles/portfolio.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="parallax">
+    <nav>
+      <ul>
+        <li><a href="./index.html">home</a></li>
+        <li><a href="./about-me.html">about me</a></li>
+        <li><a href="./blog.html">blog</a></li>
+      </ul>
+    </nav>
+    <header>
+      <h1>Projects & Creations</h1>
+    </header>
+  </div>
+
+  <div class="main">
+    <img id="hotel-img" alt="hotel" src="./images/hotel.jpeg">
+    <a id="hotel" href="https://github.com/kguadron/hotel">
+      Hotel<br>
+      A system used for managing bookings for a hotel using object-oriented programming design principles
+    </a>
+    <img id="rides-img" alt="cars on a road" src="./images/rideshare.jpeg">
+    <a id= "rides" href="https://github.com/kguadron/ride-share">
+      Ride Share
+    </a>
+    <img id="slack-img" alt="Slack logo" src="./images/slack.png">
+    <a id="slack" href="https://github.com/kguadron/slack-cli">
+      Slack CLI
+    </a>
+    <img id="letters-img" alt="letter blocks" src="./images/adagrams.jpeg">
+    <a id="letters" href="https://github.com/kguadron/adagrams">
+      Adagrams
+    </a>
+  </div>
+
+  <div class="parallax2">
+    <footer>
+      <a href="https://github.com/kguadron">
+        <img alt="GitHub logo" src="./images/github.png">
+      </a>
+      <a href="https://www.linkedin.com/in/karla-guadron-23975b26/">
+        <img alt="LinkedIn logo" src="./images/linkedin.png">
+      </a>
+    </footer>
+
+    <div id="photo-cred">
+      <p> All mosaic images are personal photographs from
+        <a href="https://en.wikipedia.org/wiki/Wat_Pha_Sorn_Kaew">
+          Wat Pha Sorn Kaew
+        </a>
+      </p>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/styles/about-me.css b/styles/about-me.css
@@ -0,0 +1,12 @@
+.parallax { 
+  background-image: url("../images/sun.jpg");
+}
+
+header > h1 {
+  padding: .5em;
+  font-size: 3em;
+}
+
+.parallax2 { 
+  background-image: url("../images/arch.jpg");
+}
diff --git a/styles/blog.css b/styles/blog.css
@@ -0,0 +1,12 @@
+.parallax { 
+  background-image: url("../images/swirl.jpg");
+}
+
+header > h1 {
+  padding: .5em;
+  font-size: 3em;
+}
+
+.parallax2 { 
+  background-image: url("../images/stairs.jpg");
+}
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,12 @@
+.parallax { 
+  background-image: url("../images/me.jpg");
+}
+
+header > h1 {
+  padding: .5em;
+  font-size: 3em;
+}
+
+.parallax2 { 
+  background-image: url("../images/stripes.jpg");
+}
diff --git a/styles/main.css b/styles/main.css
@@ -0,0 +1,89 @@
+@import url('https://fonts.googleapis.com/css?family=Raleway');
+
+body, html {
+  height: 100%;
+  font-family: raleway;
+  margin-top: 0%;
+}
+
+.parallax { 
+  height: 104%; 
+
+  /* Create the parallax scrolling effect */
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  margin: -3% -1% 0 -3%;
+}
+
+ul {
+  list-style-type: none;
+  display: flex;
+  justify-content: space-around;
+}
+
+li, header > h1, #photo-cred > p {
+  background-color: white;
+  border-radius: 15%;
+  border: 1px black solid;
+  padding: 5px;
+  margin-top: 5%;
+  font-size: 1.2em;
+}
+
+a {
+  text-decoration: none;
+  color: black;
+}
+
+a:hover {
+  color: white;
+}
+
+li:hover {
+  background-color: black;
+}
+
+header {
+  display: flex;
+  justify-content: flex-end;
+  margin: 20% 20% 0 0; 
+}
+
+.main {
+  padding: 10% 10% 10% 10%;
+  text-align: center;
+}
+
+.parallax2 { 
+  height: 70%; 
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  margin: 0 -1% 0 -3%;
+}
+
+footer {
+  display: flex;
+  justify-content: space-evenly;
+  padding-top: 20%;
+}
+
+#photo-cred {
+  display: flex;
+  justify-content: center;
+}
+
+#photo-cred > p {
+  font-size: 1em;
+}
+#photo-cred > p > a {
+  text-decoration: underline;
+}
+
+#photo-cred > p > a:hover {
+  color: #cc5500;
+  text-decoration: underline;
+}