Ada-C15 · dre-create · Jun 8, 2021
diff --git a/about.html b/about.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8"/>
+        <title>Blog &mdash; Personal Portfolio</title>
+        <link rel="stylesheet" href="./stylesheets/style.css"/>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" 
+        integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" /> 
+    </head>
+    <body>
+        <header class="navbar">
+            <a href="./index.html">Home</a>      
+            <a href="./portfolio.html">Portfolio</a>
+            <a href="./blog.html">Blog</a>
+            <a href="./about.html">About</a>
+        </header>
+        <main class="about">
+            <h2 class="large">About me</h2>
+            <p> An aspiring Full-Stack Software Engineer. Lorem ipsum dolor sit amet, 
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
+                labore et dolore magna aliqua. Neque laoreet suspendisse interdum 
+                consectetur libero id. Consectetur libero id faucibus nisl tincidunt 
+                eget. Consectetur adipiscing elit duis tristique sollicitudin.
+            </p>
+        </main>
+        </main>
+    <footer>&copy; 2021 Andrea Palacios</footer>
+    </body>
+</html>
diff --git a/blog.html b/blog.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8"/>
+        <title>Blog &mdash; Personal Portfolio</title>
+        <link rel="stylesheet" href="./stylesheets/style.css"/>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" 
+        integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" /> 
+    </head>
+    <body>
+        <header class="navbar">
+            <a href="./index.html">Home</a>      
+            <a href="./portfolio.html">Portfolio</a>
+            <a href="./blog.html">Blog</a>
+            <a href="./about.html">About</a>
+        </header>
+        <main class="blog">
+            <h2>Some fun Stuff I think is pretty cool</h2>
+            <article>
+                <h3>Fun Thing</h3>            
+                <p> Description of something I am interested in. Lorem ipsum dolor sit amet, 
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
+                labore et dolore magna aliqua. Neque laoreet suspendisse interdum 
+                consectetur libero id. Consectetur libero id faucibus nisl tincidunt 
+                eget. Consectetur adipiscing elit duis tristique sollicitudin.
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut                     labore et dolore magna aliqua. Neque laoreet suspendisse interdum 
+                consectetur libero id. Consectetur libero id faucibus nisl tincidunt 
+                eget. Consectetur adipiscing elit duis tristique sollicitudin.
+                </p>
+            </article>
+            <article>
+                <h3>Fun Thing</h3>            
+                <p>Description of something I am interested in. Lorem ipsum dolor sit amet, 
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
+                labore et dolore magna aliqua. Neque laoreet suspendisse interdum 
+                consectetur libero id. Consectetur libero id faucibus nisl tincidunt 
+                eget. Consectetur adipiscing elit duis tristique sollicitudin.
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut                     labore et dolore magna aliqua. Neque laoreet suspendisse interdum 
+                consectetur libero id. Consectetur libero id faucibus nisl tincidunt 
+                eget. Consectetur adipiscing elit duis tristique sollicitudin.
+                </p>
+            </article>
+            <article>
+                <h3>Fun Thing</h3>            
+                <p>  Description of something I am interested in.Lorem ipsum dolor sit amet, 
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
+                labore et dolore magna aliqua. Neque laoreet suspendisse interdum 
+                consectetur libero id. Consectetur libero id faucibus nisl tincidunt 
+                eget. Consectetur adipiscing elit duis tristique sollicitudin.
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut                     labore et dolore magna aliqua. Neque laoreet suspendisse interdum 
+                consectetur libero id. Consectetur libero id faucibus nisl tincidunt 
+                eget. Consectetur adipiscing elit duis tristique sollicitudin.
+                </p>
+            </article>
+        </main>
+    <footer>&copy; 2021 Andrea Palacios</footer>
+    </body>
+</html>
diff --git a/images/Oval.png b/images/Oval.png
diff --git a/images/PXL_20210405_005506500.PORTRAIT.png b/images/PXL_20210405_005506500.PORTRAIT.png
diff --git a/images/andrea.jpg b/images/andrea.jpg
diff --git a/images/anndrea.jpg b/images/anndrea.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8"/>
+        <title>Home &mdash; Personal Portfolio</title>
+        <link rel="stylesheet" href="./stylesheets/style.css"/>
+
+        <!--Font-->
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" 
+        integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />  
+        <link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@657&display=swap" rel="stylesheet"> 
+    </head>
+    <body class="front-page">
+        <header class="navbar">
+            <a href="./index.html">Home</a>        
+            <a href="./portfolio.html">Portfolio</a>
+            <a href="./blog.html">Blog</a>
+            <a href="./about.html">About</a>
+        </header>
+        <!--<img class="home-image"src="./images/anndrea.jpg"-->
+        <main>
+            <section><img src="./images/anndrea.jpg"></section>
+            <section class="intro">
+                <h2 class="main-font">Hi!</h2>
+                <h2 class="main-font">I'm Andrea</h2>  
+                <p> An aspiring Full-Stack Software Engineer. Lorem ipsum dolor sit amet, 
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
+                labore et dolore magna aliqua. Neque laoreet suspendisse interdum 
+                consectetur libero id. 
+                </p>  
+            </section>
+        </main>
+        <footer> &copy; 2021 Andrea Palacios</footer>
+    </body>
+</html>
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8"/>
+        <title>Blog &mdash; Personal Portfolio</title>
+        <link rel="stylesheet" href="./stylesheets/style.css"/>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" 
+        integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" /> 
+    </head>
+    <body>
+        <header class="navbar">
+            <a href="./index.html">Home</a>         
+            <a href="./portfolio.html">Portfolio</a>
+            <a href="./blog.html">Blog</a>
+            <a href="./about.html">About</a>
+        </header>
+        <main class="portfolio">
+            <h2 class="title">Projects of note</h2>
+            <article class="project">
+                <h3>Task-list</h3>
+                <h4>API</h4>            
+                <p> This is going to be an awesome summary of my project. Lorem ipsum dolor sit amet, 
+                    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
+                    labore et dolore magna aliqua. Neque laoreet suspendisse interdum 
+                    consectetur libero id. Consectetur libero id faucibus nisl tincidunt 
+                    eget. Consectetur adipiscing elit duis tristique sollicitudin.
+                    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
+                    labore et dolore magna aliqua. Neque laoreet suspendisse interdum 
+                    consectetur libero id. Consectetur libero id faucibus nisl tincidunt 
+                    eget. Consectetur adipiscing elit duis tristique sollicitudin.
+                </p>
+            </article>
+            <hr>
+            <article class="project">
+                <h3>Retro Video Store</h3>
+                <h4>API</h4>            
+                <p> This is going to be an awesome summary of my project.  Lorem ipsum dolor sit amet, 
+                    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
+                    labore et dolore magna aliqua. Neque laoreet suspendisse interdum 
+                    consectetur libero id. Consectetur libero id faucibus nisl tincidunt 
+                    eget. Consectetur adipiscing elit duis tristique sollicitudin.
+                </p>
+            </article>
+            <hr>
+            <article class="project">
+            <h3>Personal Portfolio Site</h3>            
+                <p> This is going to be an awesome summary of my project.  Lorem ipsum dolor sit amet, 
+                    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
+                    labore et dolore magna aliqua. Neque laoreet suspendisse interdum 
+                    consectetur libero id. Consectetur libero id faucibus nisl tincidunt 
+                    eget. Consectetur adipiscing elit duis tristique sollicitudin.
+                    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
+                    labore et dolore magna aliqua. Neque laoreet suspendisse interdum 
+                    consectetur libero id. Consectetur libero id faucibus nisl tincidunt 
+                    eget. Consectetur adipiscing elit duis tristique sollicitudin.
+                </p>
+            </article>
+        </main>
+        <footer>&copy; 2021 Andrea Palacios</footer>
+    </body>
+</html>
diff --git a/stylesheets/style.css b/stylesheets/style.css
@@ -0,0 +1,157 @@
+
+
+
+:root {
+    --ff-primary: 'Source Sans Pro', sans-serif;
+    --ff-secondary: 'Source Code Pro', monospace;
+    --ff-tertiary: 'Caveat', cursive;
+
+    --fw-reg: 300;
+    --fw-bold: 1000;
+
+    --clr-light: #fff;
+    --clr-dark: rgb(19, 27, 34);
+    --clr-accent:teal;
+
+    --fs-h1: 3rem;
+    --fs-h2: 2.25rem;
+    --fs-h3: 1.25rem;
+    --fs-body: 1rem;
+}
+
+/*Header Styles*/
+h1,
+h2,
+h3 {
+    line-height: .75;
+    margin: .75;
+}
+
+h1 { 
+    font-size: var(--fs-h1);
+    font-family: var(--ff-secondary);
+}
+
+h2 { 
+    font-size:var(--fs-h2) ;
+    font-family: var(--ff-secondary);
+    color:var(--clr-accent);
+}
+h3 { 
+    font-size: var(--fs-h3);
+    font-family:var(--ff-secondary);
+}
+
+h4{
+    font-family:var(--ff-secondary);
+}
+
+.main-font{
+    font-family: var(--ff-tertiary);
+    font-weight: var(--fw-bold);
+    font-size: 3rem;
+}
+
+/*Navigation bar*/
+.navbar {
+    background-color:var(--clr-dark);
+    position: fixed; /* Set the navbar to fixed position */
+    top: 0; /* Position the navbar at the top of the page */
+    left:0;
+    right:0;
+
+}
+
+.navbar a{
+    float: right;
+    display: block;
+    color: var(--clr-light);
+    text-align: left;
+    padding: 2em 2em;
+    text-decoration: none;
+    font-family: var(--ff-secondary)
+}
+
+.navbar a:hover {
+    background:var(--clr-accent);
+    color: black;
+}
+
+
+/* Main content */
+
+.intro {
+    display: inline-flexbox;
+    padding: 2em 2em;
+    max-width: 35%;
+    max-height: 25%;
+    margin-top: 15%;
+    margin-left: 46%;
+    background:var(--clr-light);
+    color: var(--clr-dark);
+    font-family: var(--ff-primary);
+    font-size: var(--fs-body);
+    line-height: 1.6;
+}
+
+.portfolio{
+    display: inline-block;
+    margin-top: 12%;
+    margin-bottom: 5%;
+    margin-right: 10%;
+    margin-left: 10%;
+}
+
+img{
+    display: inline-flexbox;
+    float:left;
+    margin-right: 2%;
+    margin-left: 27%;
+    max-width: 20%;
+    max-height: 20%;
+}
+
+
+main{
+
+    background:var(--clr-light);
+    color: var(--clr-dark);
+    font-family: var(--ff-primary);
+    font-size: var(--fs-body);
+    line-height: 1.3;
+}
+
+.large {
+    font-weight: var(--fw-bold);
+}
+
+section{
+    flex-shrink: inherit;
+}
+
+.blog {
+    display: block;
+    margin-top: 15%;
+    margin-bottom: 5%;
+    margin-right: 10%;
+    margin-left: 10%;
+    text-align: left;
+}
+
+.about{
+    display:block;
+    padding-top: 15%;
+    margin-left: 15%;
+    margin-right: 15%;
+    text-align:left;
+}
+
+footer {
+    background-color:var(--clr-dark); 
+    color:var(--clr-light);
+    text-align: center; 
+    position:fixed;
+    bottom:0;
+    left:0;
+    right:0;
+}