YorAlexVargas · YorAlexVargas · May 6, 2020
diff --git a/.DS_Store b/.DS_Store
diff --git a/IMG/.DS_Store b/IMG/.DS_Store
diff --git a/IMG/Dog.jpg b/IMG/Dog.jpg
diff --git a/IMG/Lambda Assignment 4 intro to ux.jpg b/IMG/Lambda Assignment 4 intro to ux.jpg
diff --git a/IMG/a.jpg b/IMG/a.jpg
diff --git a/IMG/b.jpg b/IMG/b.jpg
diff --git a/IMG/c.jpg b/IMG/c.jpg
diff --git a/IMG/d.jpg b/IMG/d.jpg
diff --git a/IMG/e.jpeg b/IMG/e.jpeg
diff --git a/IMG/f.jpg b/IMG/f.jpg
diff --git a/IMG/h.jpg b/IMG/h.jpg
diff --git a/IMG/herson-rodriguez-96102-unsplash.jpg b/IMG/herson-rodriguez-96102-unsplash.jpg
diff --git a/IMG/humphrey-muleba-1119283-unsplash.jpg b/IMG/humphrey-muleba-1119283-unsplash.jpg
diff --git a/IMG/jakob-owens-1240106-unsplash.jpg b/IMG/jakob-owens-1240106-unsplash.jpg
diff --git a/IMG/jakob-owens-300990-unsplash.jpg b/IMG/jakob-owens-300990-unsplash.jpg
diff --git a/IMG/jcob-nasyr-765785-unsplash.jpg b/IMG/jcob-nasyr-765785-unsplash.jpg
diff --git a/IMG/jj-jordan-1432811-unsplash.jpg b/IMG/jj-jordan-1432811-unsplash.jpg
diff --git a/IMG/joel-mott-1315248-unsplash.jpg b/IMG/joel-mott-1315248-unsplash.jpg
diff --git a/IMG/joelvalve-B4tl_xW5Pco-unsplash.jpg b/IMG/joelvalve-B4tl_xW5Pco-unsplash.jpg
diff --git a/IMG/jonathan-borba-1339221-unsplash.jpg b/IMG/jonathan-borba-1339221-unsplash.jpg
diff --git a/IMG/jorge-vasconez-648837-unsplash.jpg b/IMG/jorge-vasconez-648837-unsplash.jpg
diff --git a/IMG/karim-manjra-fm9wqDNXyQ0-unsplash.jpg b/IMG/karim-manjra-fm9wqDNXyQ0-unsplash.jpg
diff --git a/IMG/kate-trysh-167890-unsplash.jpg b/IMG/kate-trysh-167890-unsplash.jpg
diff --git a/IMG/katya-austin-493886-unsplash.jpg b/IMG/katya-austin-493886-unsplash.jpg
diff --git a/IMG/kaylee-garrett-1235852-unsplash.jpg b/IMG/kaylee-garrett-1235852-unsplash.jpg
diff --git a/IMG/keem-ibarra-391315-unsplash.jpg b/IMG/keem-ibarra-391315-unsplash.jpg
diff --git a/IMG/kris-mikael-krister-556573-unsplash.jpg b/IMG/kris-mikael-krister-556573-unsplash.jpg
diff --git a/IMG/linkedin-sales-navigator-402819-unsplash.jpg b/IMG/linkedin-sales-navigator-402819-unsplash.jpg
diff --git a/IMG/luis-perez-companc-vSrN9W3JSMY-unsplash.jpg b/IMG/luis-perez-companc-vSrN9W3JSMY-unsplash.jpg
diff --git a/IMG/m-b-m-795202-unsplash.jpg b/IMG/m-b-m-795202-unsplash.jpg
diff --git a/IMG/maddi-bazzocco-1174201-unsplash.jpg b/IMG/maddi-bazzocco-1174201-unsplash.jpg
diff --git a/IMG/mae-mu-1428027-unsplash.jpg b/IMG/mae-mu-1428027-unsplash.jpg
diff --git a/IMG/markus-spiske-1182985-unsplash.jpg b/IMG/markus-spiske-1182985-unsplash.jpg
diff --git a/IMG/medical_mockup.jpg b/IMG/medical_mockup.jpg
diff --git a/IMG/michael-mroczek-440382-unsplash.jpg b/IMG/michael-mroczek-440382-unsplash.jpg
diff --git a/IMG/mohamed-maail-481915-unsplash.jpg b/IMG/mohamed-maail-481915-unsplash.jpg
diff --git a/IMG/monika-grabkowska-759473-unsplash.jpg b/IMG/monika-grabkowska-759473-unsplash.jpg
diff --git a/IMG/pablo-merchan-montes-218858-unsplash.jpg b/IMG/pablo-merchan-montes-218858-unsplash.jpg
diff --git a/IMG/patricia-palma-974393-unsplash.jpg b/IMG/patricia-palma-974393-unsplash.jpg
diff --git a/IMG/paul-bence-OM9nU5wsq2w-unsplash.jpg b/IMG/paul-bence-OM9nU5wsq2w-unsplash.jpg
diff --git a/IMG/pcwork.jpg b/IMG/pcwork.jpg
diff --git a/IMG/phone_icon_clip_art_9064.jpg b/IMG/phone_icon_clip_art_9064.jpg
diff --git a/IMG/photo-1455884981818-54cb785db6fc.jpeg b/IMG/photo-1455884981818-54cb785db6fc.jpeg
diff --git a/IMG/photo-1464802686167-b939a6910659.jpeg b/IMG/photo-1464802686167-b939a6910659.jpeg
diff --git a/IMG/photo-1506919258185-6078bba55d2a.jpeg b/IMG/photo-1506919258185-6078bba55d2a.jpeg
diff --git a/IMG/photo-1507591064344-4c6ce005b128.jpeg b/IMG/photo-1507591064344-4c6ce005b128.jpeg
diff --git a/IMG/photo-1518467166778-b88f373ffec7.jpeg b/IMG/photo-1518467166778-b88f373ffec7.jpeg
diff --git a/IMG/photo-1525707513103-6e354b9fffb9.jpeg b/IMG/photo-1525707513103-6e354b9fffb9.jpeg
diff --git a/IMG/photo-1534352956036-cd81e27dd615.jpeg b/IMG/photo-1534352956036-cd81e27dd615.jpeg
diff --git a/IMG/photo-1551058639-e209197aba8b.jpeg b/IMG/photo-1551058639-e209197aba8b.jpeg
diff --git a/IMG/piotr-miazga-119392-unsplash.jpg b/IMG/piotr-miazga-119392-unsplash.jpg
diff --git a/IMG/rainier-ridao-1064649-unsplash.jpg b/IMG/rainier-ridao-1064649-unsplash.jpg
diff --git a/IMG/random-institute-vgRjl3r8XmA-unsplash.jpg b/IMG/random-institute-vgRjl3r8XmA-unsplash.jpg
diff --git a/IMG/roberto-delgado-webb-722736-unsplash.jpg b/IMG/roberto-delgado-webb-722736-unsplash.jpg
diff --git a/IMG/robin-stickel-82145-unsplash.jpg b/IMG/robin-stickel-82145-unsplash.jpg
diff --git a/IMG/room-l9QPabiKKhw-unsplash.jpg b/IMG/room-l9QPabiKKhw-unsplash.jpg
diff --git a/IMG/roya-ann-miller-325259-unsplash.jpg b/IMG/roya-ann-miller-325259-unsplash.jpg
diff --git a/IMG/sebastian-herrmann-jzTQVxCyKYs-unsplash.jpg b/IMG/sebastian-herrmann-jzTQVxCyKYs-unsplash.jpg
diff --git a/IMG/slim-emcee-ug-the-poet-truth_from_africa_photography-slsgpLFB6xE-unsplash.jpg b/IMG/slim-emcee-ug-the-poet-truth_from_africa_photography-slsgpLFB6xE-unsplash.jpg
diff --git a/IMG/taili-samson-1299240-unsplash.jpg b/IMG/taili-samson-1299240-unsplash.jpg
diff --git a/IMG/the-creative-exchange-1480932-unsplash.jpg b/IMG/the-creative-exchange-1480932-unsplash.jpg
diff --git a/IMG/victor-freitas-546919-unsplash.jpg b/IMG/victor-freitas-546919-unsplash.jpg
diff --git a/IMG/wexor-tmg-26886-unsplash.jpg b/IMG/wexor-tmg-26886-unsplash.jpg
diff --git a/index.html b/index.html
@@ -1,11 +1,106 @@
 <!DOCTYPE html>
 <html lang="en">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 <head>
+        <link rel="stylesheet" href="style/index.css"/>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
+    <section class="head">
+            <H1>My Name Is Alexander Vargas</H1>
+
+                <!--<input type="checkbox" id="nav-toggle" class="nav-toggle">-->
+                  <nav>
+                    <ul class ="Navlinks">
+                      <li><a href="#"><button class="Navbutton">Home</button></a></li>
+                      <li><a href="#"><button class="Navbutton">About</button></a></li>
+                      <li><a href="#"><button class="Navbutton">Contact</button></a></li>
+                      <li><a href="#"><button class="Navbutton">Project</button></a></li>
+                    </ul>
+                  </nav>
+                </section>
+                  <!--<label for="nav-toggle" class="nav-toggle-label">
+                    <span></span>
+                  </label>-->
+
 </head>
 <body>
-
+        <section class="top">
+                <img class="hero" src="IMG/pcwork.jpg"alt="">
+                <div class="topwords">
+                    <h2>Alexander Vargas</h2>
+                <button class="Probutton">My Projects</button>
+                <p>Here are some words about me and my journey in coding so far. 
+                    These words are authentic and inspiring. These words tell my story.</p>
+                </div>
+            </section>
+
+            <section class="projects">
+                    <div class="card">
+                         <a href=""> 
+                             <img class="pro-img" src="IMG/a.jpg"alt=""> 
+                            </a>
+                         <p>My Project1</p> 
+                            </a>
+                    </div>
+                    <div class="card">
+                            <a href=""> 
+                                <img class="pro-img" src="IMG/a.jpg"alt=""> 
+                               </a>
+                            <p>My Project2</p> 
+                               </a>
+                       </div>
+                       <div class="card">
+                            <a href=""> 
+                                <img class="pro-img" src="IMG/a.jpg"alt=""> 
+                               </a>
+                            <p>My Project3</p> 
+                               </a>
+                       </div>
+                       <div class="card">
+                            <a href=""> 
+                                <img class="pro-img" src="IMG/a.jpg"alt=""> 
+                               </a>
+                            <p>My Project4</p> 
+                               </a>
+                       </div>
+            </section>
+            <section class="projects2">
+                    <div class="card2">
+                            <a href=""> 
+                                <img class="pro-img" src="IMG/a.jpg"alt=""> 
+                               </a>
+                            <p>My Project5</p> 
+                               </a>
+                       </div>
+                       <div class="card2">
+                            <a href=""> 
+                                <img class="pro-img" src="IMG/a.jpg"alt=""> 
+                               </a>
+                            <p>My Project6</p> 
+                               </a>
+                       </div>
+                       <div class="card2">
+                            <a href=""> 
+                                <img class="pro-img" src="IMG/a.jpg"alt=""> 
+                               </a>
+                            <p>My Project7</p> 
+                               </a>
+                       </div>
+                       <div class="card2">
+                            <a href=""> 
+                                <img class="pro-img" src="IMG/a.jpg"alt=""> 
+                               </a>
+                            <p>My Project8</p> 
+                               </a>
+                       </div>
+            </section>
+
 </body>
+<footer>
+        <h3>Like what you see?</h3>
+        <nav>
+                <button class="card-btn">Contact Me</button> 
+        </nav>
+    </footer>
 </html>
diff --git a/style/index.css b/style/index.css
@@ -1 +1,284 @@
-/* Add CSS styling here */
+/* Add CSS styling here */
+@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+
+html{
+    font-size:62.5%; /*62.5% means that 10px = 1 rem */
+  }
+
+*, *::before, *::after {
+box-sizing: border-box;
+color: pink;
+font-size: 2rem;
+}
+.head {
+background-color: rgb(42, 67, 165);
+
+}
+li , a , button {
+    font-family: "" , sans-serif;
+    font-weight: 500;
+    font-size:  1.6rem; 
+    text-decoration: none;
+    margin: .5%;
+}
+
+.Navlinks{
+    font-size: 21;
+    display: flex;
+    justify-content: flex-start;
+    padding: 3% 5%;
+   list-style: none;
+
+}
+
+Navlinks li{
+    display: inline-block;
+    padding: 0  2rem;
+
+    }
+h2 {
+    font-size: 2rem;
+    font-weight: 500;
+}
+
+.top {
+text-align: left;
+display: flex;
+align-content: space-between;
+margin: .5% .5% 5% .5%;
+}
+
+.top p {
+font-size:  1.6rem;
+}
+h1 {
+padding: 2%;
+font-size: 2.5rem;
+font-weight: 600;
+}
+
+.topwords {
+padding: 10% 5% 5% 5%;
+display: flex;
+flex-direction: column;
+
+}
+p {
+
+    display: flex;
+    justify-content: center;
+    }
+
+.Probutton{
+color: rgb(255, 153, 0);
+background-color: rgb(48, 27, 108);
+border: none;
+border-radius: .5rem;
+width: 50%;
+text-align: center;
+margin: 2% 0 2% 0;
+padding: 2%;
+
+}
+
+
+body {
+margin: 0;
+font-family: 'Work Sans', sans-serif;
+font-weight: 400;
+position: relative;
+top: 0px;
+}
+
+.hero {
+    width: 50%;
+}
+.card {
+    display: flex;
+    flex-flow: column;
+    justify-content: space-evenly;
+/*text-align: center;*/  
+}
+
+.card2 {
+
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+
+}
+.card p {
+    text-decoration: underline;
+}
+.card2 p {
+    text-decoration: underline;
+}
+
+.pro-img{
+    width: 80%;
+    display: flex;
+    align-items: center;
+    text-align: center;
+}
+.projects {
+    margin: 0 5%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center
+
+
+}
+a {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+       margin: -10%;
+
+
+}
+.projects2 { 
+    margin: 5%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center
+
+}
+
+nav ul {
+display: flex;
+flex-direction: row; 
+justify-content: start;
+}
+
+.Navbutton {
+padding: .9rem 2.5 rem;
+background-color: rgba(0,136,169,1);
+border: none;
+border-radius: .5rem;
+}
+
+
+
+footer {
+    padding: 5%;
+    background-color:  rgba(0,136,169,1);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: space-around;
+    align-items: center;
+
+}
+h3 {
+    font-size: 3rem;
+    padding: 5%;
+}
+
+.card-btn {
+    color: red;
+    border: none;
+    border-radius: .5rem;
+
+}
+
+
+
+/*Tablet size*/
+@media (max-width: 800px){
+    * {
+        color: royalblue;
+    }
+   .card p {
+       font-weight: 800;
+   }
+   .card2 p {
+    font-weight: 800;
+}
+  }
+
+
+  /*Phone*/
+  @media (max-width: 450px){
+      * {
+          color: red;
+      }
+.head {
+    text-align: center;
+}
+Navlinks{
+    margin: 0 auto;
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+      .top {
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin: .5% .5% 5% .5%;
+        }
+    .projects{
+        min-width: 60%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin:  5%;
+
+
+    }
+    .projects2{
+        min-width: 80%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin:  5%;
+    }
+
+        a {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+           margin: 5%;
+
+
+    }
+    .hero {
+        width: 90%;
+    }
+    .topwords { 
+        display: flex;
+            flex-direction: column;
+            align-items: center;
+
+    }
+
+    h3 {
+        font-size: 1.6rem;
+
+    }
+}
+