Ada-C10 · sheland · Sep 17, 2018 · Sep 17, 2018 · Sep 17, 2018 · Sep 17, 2018
diff --git a/about.html b/about.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>About</title>
+    <link href="normalize.css" rel="stylesheet">
+    <link href="styles/about.css" rel="stylesheet">
+  </head>
+    <body>
+
+      <section class="header">
+        <li><a href="portfolio.html">portfolio.</a></li>
+        <li><a href="blog.html">blog.</a></li>
+        <li><a href="index(port).html">home.</a></li>
+        <li><a href="contact.html">contact.</a></li>
+      </section>
+
+      <div class="background">
+      <div class="info">
+        <h1>About Me</h1>
+        <div class="meta">
+          <a  href="https://i.imgur.com/AAfOSPx.jpg" target="_b" class="author"></a><br>
+        </div>
+      </div>
+    </div>
+
+    <section class="content">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nisl turpis, porttitor et finibus id, viverra a metus. Praesent non ante sed orci posuere varius quis sit amet dui. Cras molestie magna orci, id gravida dolor molestie in. Duis sollicitudin turpis quis tortor egestas, ut ultrices nisl elementum. Vestibulum sed ipsum eget nulla laoreet cursus in ac sem. Integer a suscipit justo, quis aliquam sapien. Maecenas et tellus nibh. Vivamus tincidunt eros id commodo pellentesque. porttitor et finibus id, viverra a metus. Praesent non ante sed orci posuere varius quis sit amet dui. Cras molestie magna orci, id gravida dolor molestie in. Duis sollicitudin turpis quis tortor egestas, ut ultrices nisl ele</p>
+      <!-- <p align="center"><a href="https://twitter.com/nodws" class="btn twtr" target="_b">Follow me on Twitter</a>
+      </p> -->
+    </section>
+<!--- Footer -------------->
+    <footer>
+      <ul class="footer">
+        <li>© 2018-</li>
+        <li>contact information: [email protected] <a href="[email protected]"</li>
+      </ul>
+    </footer>
+  </body>
+</html>
diff --git a/blog.html b/blog.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+  <html>
+    <head>
+      <meta charset="utf-8">
+      <title>Blog</title>
+      <link href="normalize.css" rel="stylesheet">
+      <link href="styles/blog.css" rel="stylesheet">
+    </head>
+      <body class="container">
+        <section class="header">
+          <li><a href="index(port).html">home.</a></li>
+          <li><a href="portfolio.html">portfolio.</a></li>
+          <li><a href="about.html">about me.</a></li>
+          <li><a href="contact.html">contact.</a></li>
+        </section>
+
+        <section class="title">
+          <h1>Blog Posts<h1>
+        </section>
+
+
+        <section class="blogs">
+          <a href="blog_posts.html">
+            <img src="https://i.imgur.com/WVECL14.jpg" alt="blogpost" /></a>
+        </section>    
+
+
+<!--- Footer -------------->
+        <footer>
+          <ul class="footer">
+            <li>© 2018-</li>
+            <li>contact information: [email protected] <a href="[email protected]"</li>
+          </ul>
+        </footer>
+    </body>
+  </head>
+</html>
diff --git a/blog_posts.html b/blog_posts.html
@@ -0,0 +1,21 @@
+<section class="blogs">
+  <blockquote class="blog_one">
+    <h1>Why coding is awesome!</h1>
+    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.Now we'll fluff it. Do a cabin-ectomy. There's some little stringy ones that live down here. There's nothing worse than an angry tree. I think you'll be tickled with what you can do with something that starts out looking this bad.
+  </blockquote>
+
+  <blockquote class="blog_two">
+    <h1>Ruby 101</h1>
+    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.Now we'll fluff it. Do a cabin-ectomy. There's some little stringy ones that live down here. There's nothing worse than an angry tree. I think you'll be tickled with what you can do with something that starts out looking this bad.
+  </blockquote>
+
+  <blockquote class="blog_three">
+    <h1>Studying tips</h1>
+    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.Now we'll fluff it. Do a cabin-ectomy. There's some little stringy ones that live down here. There's nothing worse than an angry tree. I think you'll be tickled with what you can do with something that starts out looking this bad.
+  </blockquote>
+
+  <blockquote class="blog_four">
+    <h1>Eye exercises</h1>
+    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Now we'll fluff it. Do a cabin-ectomy. There's some little stringy ones that live down here. There's nothing worse than an angry tree. I think you'll be tickled with what you can do with something that starts out looking this bad.
+  </blockquote>
+</section>
diff --git a/contact.html b/contact.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Contact</title>
+    <link href="normalize.css" rel="stylesheet">
+    <link href="styles/contact.css" rel="stylesheet">
+  </head>
+      <body>
+        <section class="header">
+          <li><a href="portfolio.html">portfolio.</a></li>
+          <li><a href="index(port).html">home.</a></li>
+          <li><a href="blog.html">blog.</a></li>
+          <li><a href="about.html">about me.</a></li>
+        </section>
+        <h1>Contact Information</h1>
+<!-- An Unordered List with List Items -->
+        <nav>
+          <ul class="contact">
+            <li>Twitter: <a href="https://twitter.com/shelandebesai">Shelan's Twitter Page</a>
+              <img src="https://i.imgur.com/3zYA5x0.png" alt="twitter"/>
+            </li>
+            <li>Github: <a href="https://github.com/sheland/"> Shelan's Github</a>
+              <img src="https://i.imgur.com/GT4QCa1.png" alt="github"/>
+            </li>
+            <li>Email: <a href="[email protected]/"></a>
+              <a href="mailto:[email protected]">Shelan's Email</a>
+              <img src="https://i.imgur.com/KGQdvsr.png" alt="email"/>
+            </li>
+          </ul>
+        </nav>
+<!--- Footer -------------->
+        <footer>
+          <ul class="footer">
+            <li>© 2018-</li>
+            <li>contact information: [email protected] <a href="[email protected]">
+          </ul>
+      </footer>
+    </body>
+  </head>
+</html>
diff --git a/images/background_bottom_plants.png b/images/background_bottom_plants.png
diff --git a/images/background_bricks.jpg b/images/background_bricks.jpg
diff --git a/images/background_plant_right.jpeg b/images/background_plant_right.jpeg
diff --git a/images/background_retro.jpeg b/images/background_retro.jpeg
diff --git a/images/background_waterpaint.jpg b/images/background_waterpaint.jpg
diff --git a/images/books.jpg b/images/books.jpg
diff --git a/images/email.png b/images/email.png
diff --git a/images/github.png b/images/github.png
diff --git a/images/glasses.jpg b/images/glasses.jpg
diff --git a/images/sitting.jpg b/images/sitting.jpg
diff --git a/images/standing.jpg b/images/standing.jpg
diff --git a/images/twitter.png b/images/twitter.png
diff --git a/index(port).html b/index(port).html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Home</title>
+    <link href="normalize.css" rel="stylesheet">
+    <link href="styles/styles(port).css" rel="stylesheet">
+  </head>
+  <body class="container">
+
+    <section class="header">
+      <li><a href="portfolio.html">portfolio.</a></li>
+      <li><a href="blog.html">blog.</a></li>
+      <li><a href="about.html">about me.</a></li>
+      <li><a href="contact.html">contact.</a></li>
+    </section>
+
+<!-- Welcome message -->
+    <section class="greeting">
+      <h1 class="first_greet">Shelan's Portfolio</h1>
+      <h1 class="second_greet">Student at Ada Developer's Academy</h1>
+      <h1 class="third_greet">Seattle Native</h1>
+    </section>
+<!--- Footer -------------->
+    <footer>
+      <ul class="footer">
+        <li>© 2018-</li>
+        <li>contact information: [email protected] <a href="[email protected]">
+      </ul>
+    </footer>
+  </body>
+  </head>
+</html>
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+  <html>
+    <head>
+      <meta charset="utf-8">
+      <title>Portfolio</title>
+      <link href="normalize.css" rel="stylesheet">
+      <link href="styles/portfolio.css" rel="stylesheet">
+    </head>
+      <body class="container">
+        <section class="header">
+          <li><a href="portfolio.html">portfolio.</a></li>
+          <li><a href="index(port).html">home.</a></li>
+          <li><a href="blog.html">blog.</a></li>
+          <li><a href="about.html">about me.</a></li>
+          <li><a href="contact.html">contact.</a></li>
+        </section>
+
+        <section class="title">
+          <h1>Projects</h1>
+        </section>
+
+<!-- Section of listed projects -->
+        <section class="projects">
+          <ul class="project_blog">
+            <li class="project">
+              <a href="https://github.com/sheland/oo-ride-share">
+                <img src="https://i.imgur.com/KCzNwqf.jpg)" alt="Bicycle" />
+              </a>
+              <span>Project Ride Share</span>
+            </li>
+            <li class="project">
+              <a href="https://github.com/sheland/grocery-store">
+                <img src="https://i.imgur.com/oWffCPW.png" alt="Grocery Store" />
+              </a>
+              <span>Project Grocery Store</span>
+            </li>
+            <li class="project">
+              <a href="https://github.com/sheland/adagrams">
+                <img src="https://i.imgur.com/LgzHHYr.png" alt="Game" />
+              </a>
+              <span>Project Adagrams</span>
+            </li>
+            <li class="project">
+              <a href="https://github.com/sheland/Solar-System">
+                <img src="https://i.imgur.com/98scHyo.jpg" alt="Solar System" />
+              </a>
+              <span>Project Solar System</span>
+            </li>
+          </ul>
+        </section>
+<!--- Footer -------------->
+        <footer>
+          <ul class="footer">
+            <li>© 2018-</li>
+            <li>contact information: [email protected] <a href="[email protected]  ">
+          </ul>
+        </footer>
+    </body>
+  </head>
+</html>
diff --git a/styles/about.css b/styles/about.css
@@ -0,0 +1,84 @@
+@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,600,600i');
+html,body{
+  margin:0;
+  height:120%;
+  font-family: 'Josefin Sans', sans-serif;
+
+}
+
+.header {
+  display: flex;
+  list-style-type: none;
+  justify-content: flex-end;
+  font-size: 2em;
+}
+.background{
+  position:relative;
+  overflow:hidden;
+  display:flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: flex-start;
+  align-content: flex-start;
+  height:50vw;
+  min-height:400px;
+  max-height:550px;
+  min-width:300px;
+  color:#eee;
+}
+
+.background:before{
+  content:"";
+  width:100%;
+  height:100%;
+  position:absolute;
+  top:0;
+  left:0;
+    -webkit-backface-visibility: hidden;
+    -webkit-transform: translateZ(0) scale(1.0, 1.0);
+    transform: translateZ(0);
+  background:#1B2030 url(https://i.imgur.com/MEyQpKv.jpg) top center no-repeat;
+  background-size:cover;
+  background-attachment:fixed;
+  animation: grow 60s  linear 10ms infinite;
+  transition:all 0.2s ease-in-out;
+  z-index:-2
+}
+
+.sides, .info{
+  flex: 0 0 auto;
+  width:50%
+}
+.info{
+  width:100%;
+  padding:15% 10% 0 10%;
+  text-align:center;
+  text-shadow:0 2px 3px rgba(0,0,0,0.2)
+}
+.author{
+  display:inline-block;
+  width:80px;
+  height:80px;
+  border-radius:90%;
+  background:url(https://i.imgur.com/AAfOSPx.jpg) center no-repeat;
+  background-size:cover;
+  box-shadow:0 2px 3px rgba(0,0,0,0.3);
+  margin-bottom:5px
+}
+
+@keyframes grow{
+  0% { transform:scale(1)}
+  50% { transform:scale(1.2)}
+}
+.content{
+  padding:5% 10%;
+  text-align:justify
+}
+
+.footer {
+    display: flex;
+    justify-content: center;
+    padding-top: 50px;
+    list-style-type: none;
+    font-size: 1em;
+  }
diff --git a/styles/blog.css b/styles/blog.css
@@ -0,0 +1,49 @@
+@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,600,600i');
+html, body {
+  width: 100%;
+  height: 100%;
+  font-family: 'Josefin Sans', sans-serif;
+}
+
+body {
+  background-image: url("https://i.imgur.com/LSpa1mM.jpg");
+}
+
+.container {
+  display: grid;
+  grid-template-rows: 1fr 1fr 4fr 1fr
+}
+
+.header {
+  display: flex;
+  list-style-type: none;
+  margin-left: auto;
+  font-size: 2em;
+}
+
+.title {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  font-size: 30px;
+  padding-top: 20px;
+}
+
+.blogs img {
+  width: 500px;
+  height: 500px;
+  border-radius: 70%;
+  margin-left: 300px;
+  padding-bottom: 20px;
+  display: wrap;
+
+}
+
+
+.footer {
+    display: flex;
+    justify-content: center;
+    padding-top: 50px;
+    list-style-type: none;
+    font-size: 1em;
+  }