Ada-C9 · brendarios · Mar 17, 2018 · Mar 18, 2018 · Mar 18, 2018 · Mar 18, 2018
diff --git a/about.html b/about.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Welcome my personal portfolio</title>
+  <link href="stylesheets/style.css" rel="stylesheet">
+  <link href="stylesheets/about.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet">
+  <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Delius" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+</head>
+<body>
+  <div>
+    <nav id="navigation-container">
+      <div><a href="index.html">Home</a></div>
+      <div><a href="about.html"> About me </a></div>
+      <div><a href="portfolio.html">Projects </a></div>
+      <div><a href="hobby-log.html">Blog</a></div>
+      <div class="email"><a href="mailto:[email protected]">Contact</a></div>
+    </nav>
+  </div>
+
+    <main>
+      <section id="quotes">
+        <aside id="sidebar">
+          <h3>My favorite quotes:</h3>
+          <div class="pull-quote">
+            <p>"It is not the strongest of the species that survive, nor the most intelligent,
+              but the one most responsive to change."</p>
+            <p class="author">--Charles Darwin</p>
+            <p>"You will never be completely at home again, because part of your heart will always
+              be elsewhere. That is the price you pay for the richness of loving and knowing people
+              in more than one place."</p>
+            <p class="author">---Unknown</p>
+          </div>
+        </aside>
+      </section>
+
+      <section id="story">
+        <div>
+          <h1>My Story</h1>
+          <div class="my-story">
+            <p><span class="first-letter"> I </span> am from Mexico <img src="img/mexico.jpg" alt="Mexico Flag" height="20" width="30"> but have lived my last 8 years
+              abroad. My expatriate life has been divided between countries such as Argentina <img src="img/argentina.jpg" alt="Argentina Flag" height="20" width="30">, Brazil<img src="img/brazil.jpg" alt="Brazil" height="20" width="30">,
+              and United States <img src="img/usa.png" alt="United States Flag" height="20" width="30"> .
+            </p>
+            <p>
+              I'm married to Tadeo Perez and we have three beautiful kids named Santiago, Juan Pablo, and Luciana.
+            </p>
+
+            <p>In my past life, I was a Chemical Engineer and dedicated several years of my
+              professional life in the area of Finance and Product Management Non Tech.
+              Currently, I'm studying at <a href="https://www.adadevelopersacademy.org/">Ada Developers Academy</a>, which is a training to become a
+              software engineer. My favorite hobby is spending time with his family and enjoying nature.
+            </p>
+              <hr>
+          </div>
+        </div>
+      </section>
+
+      <hr>
+
+
+      <div class ="images-container">
+        <div><img src="img/mykids.jpg" alt="My kids" height= "350" width="350"></div>
+        <div><img src="img/seattle.jpg" alt="my kids and I in Seattle" height= "350" width="350"></div>
+        <div><img src="img/buenosaires.jpg" alt="My family and I in Buenos Aires" height= "350" width="350"></div>
+        <div><img src="img/family.jpg" alt="My family" height= "350" width="350"></div>
+
+
+      </div>
+
+    </main>
+
+  <footer id="footer">
+    <div class="social-media">
+      <div class="social-icons">
+        <div><h4><strong>Follow me on:</strong></h4></div>
+        <div><a href="https://www.facebook.com/brenda.rios.94651" class="fa fa-facebook"></a></div>
+        <div><a href="https://twitter.com/BrenRios" class="fa fa-twitter"></a></div>
+        <div><a href="https://www.linkedin.com/in/brenda-rios/" class="fa fa-linkedin"></a></div>
+      </div>
+    </div>
+    <div class="Copyright">All information on this site is owned by Brenda Rios unless otherwise stated. Copyright <i class="em em-copyright"></i> 2018 Brenda Rios.</div>
+  </footer>
+
+
+</body>
+</html>
diff --git a/hobby-log.html b/hobby-log.html
diff --git a/img/argentina.jpg b/img/argentina.jpg
diff --git a/img/baby.jpeg b/img/baby.jpeg
diff --git a/img/baby.jpg b/img/baby.jpg
diff --git a/img/backgrounds.jpg b/img/backgrounds.jpg
diff --git a/img/brazil.jpg b/img/brazil.jpg
diff --git a/img/buenosaires.jpg b/img/buenosaires.jpg
diff --git a/img/candy-machine.jpg b/img/candy-machine.jpg
diff --git a/img/cat.jpg b/img/cat.jpg
diff --git a/img/chapters.jpg b/img/chapters.jpg
diff --git a/img/family.jpg b/img/family.jpg
diff --git a/img/flowers.jpg b/img/flowers.jpg
diff --git a/img/lucy_brazil.jpg b/img/lucy_brazil.jpg
diff --git a/img/mexico.jpg b/img/mexico.jpg
diff --git a/img/move.jpg b/img/move.jpg
diff --git a/img/my_kids.jpg b/img/my_kids.jpg
diff --git a/img/mykids.jpg b/img/mykids.jpg
diff --git a/img/santi.jpg b/img/santi.jpg
diff --git a/img/santiago.jpg b/img/santiago.jpg
diff --git a/img/seattle.jpg b/img/seattle.jpg
diff --git a/img/sky.jpg b/img/sky.jpg
diff --git a/img/usa.png b/img/usa.png
diff --git a/img/world.jpg b/img/world.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Welcome my personal portfolio</title>
+  <link href="stylesheets/style.css" rel="stylesheet">
+  <link href="stylesheets/index.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet">
+  <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
+</head>
+<body>
+  <div>
+    <nav id="navigation-container">
+      <div><a href="index.html">Home</a></div>
+      <div><a href="about.html"> About me </a></div>
+      <div><a href="portfolio.html">Projects </a></div>
+      <div><a href="hobby-log.html">Blog</a></div>
+      <div class="email"><a href="mailto:[email protected]">Contact</a></div>
+    </nav>
+  </div>
+
+  <main id="welcome">
+    <header>
+      <h1>Hi, I'm Brenda!</h1>
+      <h2><i class="em em-construction"></i> A software developer under construction <i class="em em-construction"></i></h2>
+      <div class="read-more">
+        <a href="about.html">Read more</a>
+      </div>
+    </header>
+  </main>
+
+
+  <footer id="footer">
+    <div class="social-media">
+      <div class="social-icons">
+        <div><h4><strong>Follow me on:</strong></h4></div>
+        <div><a href="https://www.facebook.com/brenda.rios.94651" class="fa fa-facebook"></a></div>
+        <div><a href="https://twitter.com/BrenRios" class="fa fa-twitter"></a></div>
+        <div><a href="https://www.linkedin.com/in/brenda-rios/" class="fa fa-linkedin"></a></div>
+      </div>
+    </div>
+    <div class="Copyright">All information on this site is owned by Brenda Rios unless otherwise stated. Copyright <i class="em em-copyright"></i> 2018 Brenda Rios.</div>
+  </footer>
+
+
+</body>
+</html>
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Welcome my personal portfolio</title>
+  <link href="stylesheets/style.css" rel="stylesheet">
+  <link href="stylesheets/portfolio.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet">
+  <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Delius" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+</head>
+<body>
+  <div>
+    <nav id="navigation-container">
+      <div><a href="index.html">Home</a></div>
+      <div><a href="about.html"> About me </a></div>
+      <div><a href="portfolio.html">Projects </a></div>
+      <div><a href="hobby-log.html">Blog</a></div>
+      <div class="email"><a href="mailto:[email protected]">Contact</a></div>
+    </nav>
+  </div>
+
+  <main>
+  <section class="projects-section">
+    <h2>My projects</h2>
+    <hr>
+    <ul>
+      <li>
+        <a href="https://gist.github.com/brendarios/a65373a083aaf4914887ad4f5b26d5d0"><strong>Ada Challenge</strong>
+          <img src="img/world.jpg" alt="world" height="200" width="210">
+        </a>
+        <p>
+          This was the first offical code of my life.
+        </li>
+        <li>
+          <a href="https://gist.github.com/brendarios/87f0ee9d7da168845bd0f27275bc4b05"><strong>Election Program</strong>
+            <img src="img/cat.jpg" alt="cat" height="200" width="200">
+          </a>
+          <p>
+            This was the first offical code of my life.
+          </p>
+        </li>
+        <li>
+          <a href="https://gist.github.com/brendarios/dacb68d14eeec3413b0c4bf014eb9fcc"><strong>Candy Machine</strong>
+            <img src = "img/candy-machine.jpg" alt="candy-machine" height="200" width="200">
+          </a>
+          <p>
+            This was one of my first coding programs at Ada. It is in Ruby language and is based
+            on Hashes, Arrays and conditionals.
+          </p>
+        </li>
+        <li>
+          <a href="https://github.com/brendarios/hotel"><strong>Hotel</strong>
+            <img src = "img/flowers.jpg" alt="flowers" height="200" width="200">
+          </a>
+          <p>
+            This was the last code program from my first month at Ada.
+            This program marked the end of our learning of Ruby language.
+          </p>
+        </li>
+        <li>
+          <a href="https://github.com/brendarios/Startrly"><strong>Startly</strong>
+            <img src = "img/sky.jpg" alt="sky" height="200" width="200">
+          </a>
+          <p>
+            This was my first project of HTML and CSS of my whole life.
+          </p>
+        </li>
+      </ul>
+    </section>
+  </main>
+
+
+    <footer id="footer">
+      <div class="social-media">
+        <div class="social-icons">
+          <div><h4><strong>Follow me on:</strong></h4></div>
+          <div><a href="https://www.facebook.com/brenda.rios.94651" class="fa fa-facebook"></a></div>
+          <div><a href="https://twitter.com/BrenRios" class="fa fa-twitter"></a></div>
+          <div><a href="https://www.linkedin.com/in/brenda-rios/" class="fa fa-linkedin"></a></div>
+        </div>
+      </div>
+      <div class="Copyright">All information on this site is owned by Brenda Rios unless otherwise stated. Copyright <i class="em em-copyright"></i> 2018 Brenda Rios.</div>
+    </footer>
+
+  </body>
+  </html>
diff --git a/stylesheets/about.css b/stylesheets/about.css
@@ -0,0 +1,62 @@
+
+main {
+  margin-top: -3.5%;
+  background: url("../img/backgrounds.jpg") no-repeat;
+  background-size: cover;
+}
+
+.my-story {
+  font-family: Delius;
+  font-size: 15pt;
+  background-color: lightgray;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  line-height: 30pt;
+  margin-right: 10%;
+  margin-left: 10%;
+  padding-left: 2%;
+  border: outset;
+}
+
+#story h1 {
+  text-align: center;
+  padding-right: 15%;
+  padding-top: 2%;
+}
+
+.my-story .first-letter {
+  font: 40pt Delius;
+  color: #a64dff;
+}
+
+#sidebar {
+  display: inline-block;
+  float: left;
+  margin-left: 5%;
+  margin-top: 10%;
+  width: 20%;
+  font-size: 20pt;
+  font-family: Indie Flower;
+  color: #330033;
+  padding-right: 2%;
+}
+
+.images-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap:wrap;
+  justify-content: space-around;
+  margin-right: 10%;
+  padding-top: 10pt;
+  padding-bottom: 10pt;
+}
+
+.pull-quote {
+  width =85%;
+  margin-top: 20%;
+}
+
+#quotes .author {
+  text-align: right
+}
diff --git a/stylesheets/hobby-log.css b/stylesheets/hobby-log.css
@@ -0,0 +1,91 @@
+
+
+.blog-post {
+  background: lightgray;
+}
+
+#blog > p {
+  font-size: 16pt;
+  font-family: Special Elite;
+}
+
+.figures {
+    width: 100%;
+}
+
+#blog {
+  text-align: center;
+  padding-top: 5%;
+}
+
+article {
+  margin-left: 10%;
+  margin-right: 10%;
+  padding-top: 5%;
+  display: block;
+  text-align:justify;
+  font-size: 14pt;
+  font-family: Arial;
+}
+
+article p {
+  align-self: center;
+}
+
+.images {
+  margin-top: 0;
+  font-family: Arial;
+  padding-top: 10px;
+  margin-right: 10%;
+  padding-bottom: 5px;
+}
+.images ul {
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  padding-bottom: 10px;
+  padding-top: 10px;
+  padding-left: 200px;
+}
+
+.images ul a {
+  font-family: Special Elite;
+  color: #5900b3;
+  font-size: 15pt;
+}
+
+.images ul p {
+  font-family: Indie Flower;
+  color: black;
+  font-size: 12pt;
+}
+
+
+.images img {
+  float:left;
+  margin-right: 30px;
+  margin-bottom: 10%;
+  padding-right: 20px;
+  padding-bottom: 10px;
+}
+
+.images p {
+    width: 500px;
+}
+
+figure {
+    margin-right: 35%;
+    margin-left: 35%;
+}
+
+figure figcaption {
+    color: #666;
+    font-style: italic;
+    font-size: 0.8em;
+}
+
+.articles article .top {
+  text-decoration: underline;
+  color: #5900b3;
+}