vikkisnax · vikkisnax · Nov 9, 2021
diff --git a/about.html b/about.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>About</title>
 </head>
 <body>
     <h1> ABOUT </h1>

diff --git a/index.html b/index.html
@@ -1,11 +1,94 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
+
+    <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>
+    <title>VB Portfolio</title>
 </head>
+
+<header>
+    <h1> Victoria Blancas </h1>
+    <nav>
+        <a class="home" href="index.html">Home</a>
+        <a class="about" href="about.html">About</a>
+        <a class="contact" href="contact.html">Contact</a>
+        <a class="projects" href="projects.html">Projects</a>
+    </nav>
+</header>
+<!--I didn't give nav a name bc I only have one nav so refering to it 
+in the css styling sheet will just be nav{}-->
+
+
 <body>
-
+<section class="top">
+    <div class="left">
+        <div class="topImage">
+            <img src="https://i.picsum.photos/id/1045/3936/2624.jpg?hmac=PMfAbC94Asle_jgeRYsj7zQHFabfTfsIwL247Ewetwc" alt="">
+        </div>
+        <div class="text">
+            <h2>Victoria Blancas</h2>
+            <a class="projects" href="projects.html"><button>My Projects</button></a>
+            <!--I copied this from above, so hopefull when I edit it once in 
+            the CSS styling sheet it'll work on both-->
+            <p> --> write about coding journey</p>
+        </div>
+    </div>
+</section>
+
+
+<section class="middle">
+    <div class="box">
+        <img src="https://i.picsum.photos/id/739/200/200.jpg?hmac=vjkuMOuAEhToH9GIXkmBicl7sUqPZ3k4rRHh6sQJWZ8" alt="random">
+        <div class="boxText">1</div>
+    </div>
+
+    <div class="box">
+        <img src="https://i.picsum.photos/id/908/200/200.jpg?hmac=CovMVsq4EkU03tnOxNLyxYsLlemPPHBizxcnmaHaRcU" alt="">
+        <div class="boxText">2</div>
+    </div>
+
+    <div class="box">
+        <img src="https://i.picsum.photos/id/766/200/200.jpg?hmac=i8NIvzl3XXKwMZzUUjQWAbKOWskcKnOApccdqQpiEzQ" alt="">
+        <div class="boxText">3</div>
+    </div>
+
+    <div class="box">
+        <img src="https://i.picsum.photos/id/868/200/200.jpg?hmac=TH6VPbfiRO1pMY4ZYWqECwlH8wSnlxN_KlCVOzTpbe8" alt="">
+        <div class="boxText">4</div>
+    </div>
+
+    <div class="box">
+        <img src="https://i.picsum.photos/id/134/200/200.jpg?hmac=a3L-JjVSGeG8w3SdNpzxdh8WSC0xHJXgeD6QryCK7pU" alt="">
+        <div class="boxText">5</div>
+    </div>
+
+    <div class="box">
+        <img src="https://i.picsum.photos/id/127/200/200.jpg?hmac=WYBTvlVHFeXjWOUvDgKRt6YUtVxGF2ZdUGO9aoYimdg" alt="">
+        <div class="boxText">6</div>
+    </div>
+
+    <div class="box">
+        <img src="https://i.picsum.photos/id/570/200/200.jpg?hmac=fgqmD9u8TqyXJG9fhqV-EbhIUXYwTIxfsPiNfaD28_Y" alt="">
+        <div class="boxText">7</div>
+    </div>
+
+    <div class="box">
+        <img src="https://i.picsum.photos/id/103/200/200.jpg?hmac=iAYeZbg7h6KXJzEJuemMnhxfHUPDu6OkgQ_TfAMWlRM" alt="">
+        <div class="boxText">8</div>
+    </div>
+</section>
+
+
+<footer>
+        <h2>Like What You See?</h2>
+        <a class="contact" href="contact.html">Contact</a>
+</footer>
+
 </body>
 </html>
diff --git a/style/index.css b/style/index.css
@@ -1 +1,163 @@
-/* Add CSS styling here */
+/* Add CSS styling here */
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+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;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+    /* i deleted border:0 bc i want border around things
+    HTML5 display-role reset for older browsers */
+}
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+/*General Styles*/
+* {
+    box-sizing: border-box;
+    max-width: 100%;
+    /*border: 1px solid grey;*/
+}
+
+/*General section below*/
+html{
+    font-size:62.5%;
+}
+
+body{
+    font-size: 1.6rem;
+    line-height: 1.5;
+    padding: 2%;
+}
+
+
+h1 {
+    font-family: 'Roboto Mono', monospace;
+    font-size: 4rem;
+    font-weight: bold;
+    padding: 0.5% 2%;
+}
+
+h2 {
+    font-family: 'Roboto Mono', monospace;
+    font-size: 3rem;
+}
+
+
+/*Nav section below*/
+header{
+    background-color:lightcyan;
+}
+nav{
+    padding: 0% 5%;
+    display: flex;
+}
+
+a{
+    text-decoration: none;
+    /*border: solid 1px #4f4f4f;*/
+    padding: 0.5% 2.5%;
+    text-align: center;
+}
+
+/*body styles*/
+.top, .middle{
+    padding: 2%;
+    max-width: 100%;
+}
+
+.topImage{
+    display:flex;
+    display:inline-block;
+    width: 50rem;
+}
+
+.left{
+    display:flex;
+    /* border: 1px solid pink; */
+    align-items: center;
+}
+
+.text{
+    padding-left: 10%;
+    line-height: 2;
+}
+
+button{
+    padding: 2% 7%;
+}
+
+/*middle style*/
+.middle{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-content: space-between;
+}
+
+.box {
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    display:inline-block;
+    width: 25%;
+    padding: 20px;
+}
+
+.box img {
+    width: 100%;
+}
+
+.boxText{
+    text-align: center;
+}
+
+/*Footer style*/
+footer{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-color:lightcyan;
+    padding: 9rem;
+}
+
+footer a{
+    background-color: white;
+}