AlixCat13 · AlixCat13 · May 12, 2020 · May 13, 2020 · May 13, 2020 · May 13, 2020
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,22 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        },
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/about.html b/about.html
@@ -1,11 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <h1> ABOUT </h1>
-</body>
-</html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Document</title>
+        <link rel="stylesheet" type="text/css" href="style/about.css">
+    </head>
+
+      <div class ="Home">
+          <header>
+            <h1>About Me</h1>
+            <nav>
+              <a href= "index.html">Home</a>
+              <a href= "about.html">About Me</a>
+              <a href= "contact.html">Contact Me</a>
+              <a href= "projects.html">My Projects</a>        
+            </nav>
+         </div>
+        </header>
+<body>    
+    <div class="image">
+      <img src= "https://lh3.googleusercontent.com/cS6X_lGMIsCWp2D1A5DD3u1rZ-lSUnQFV45SqrpAaeAUgwYpWaiJ6NE4HxY20PDptDj42n2cWjgQBcVRkfURfX8UemlJQt3ixFU321x2tp_ZQcmhySWTaOuFixH82422T6oPzuU4czvcZzVK5wB6pvXWyOXnZ8_a-YxhmCe2d1ACnChSUhLnzS5qQVkUBqu8wCHigXiqw2hzgfYoJdXiFlrozNkjX4r5iwp9ld_D2QDON_k50fvhOmjvwR1Bu7w-yfY5CYBuq_yrjTvN34keHz5ooWMfvl0RGgy0kErHHgUztMZ3C0_vXx598uBr7jnx9RlZ-BpFP5b227KiEjj1AVs52RfZ0SpDvY_lgS1kXsLYIdso4gTVHD5hN-YhpVlZMxbij8eN-CZv9SvmLXNhy7kQpOj9KYE_kbXq83pEX9-yYr-lEC8mgbq_9RZ6lr-EepXhsjjONm7tuGYdYXjF8z9_Phgsli6zLllevokCdka674Sf5j6G1e7ZEosD9JhlUR1XTSLbavkcsZUBF97NrjYYukJemg4lADHtIdjvS42s8urxDrbxdaJl2jlZ6cHZbS_NqhSvxdbKXqpxyISVGvH__Bua-IudNyjCtrH_qzEd1z4jfKHc5cglcBgS5O_d_OeHIDmRErK-9lW-QJpphXhjxER67WpYlFNruaXaCyYMrz5VvtsAqsFVH_CJ=w526-h657-no?authuser=0">
+      </div>
+    <p>I am a stay-at-home mom to a wild little girl - the cutie in the picture. As much as I love being home with her, I am ready to get back to work and start my new career. I am currently enrolled in Lambda School's Full Stack Web Development program. I love working with computers and creating new things. This class is the opportunity I have been waiting for to jumpstart my new career. I like a career path that allows growth and advancement and web development definitely offers that. As long as you keep working at it and never give up, you will go as far as you push yourself to go. 
+</body>   
+<section>
+  <footer>
+    <div class="footer">
+      <p>Want to see what I can do for you?</p>
+      <button><a href="contact.html">Contact Me!</a></button>
+      <p class="linkedin"><a href= "https://www.linkedin.com/in/alixcatalanotto/">My LinkedIn Profile</a></p>
+      <p class="instagram"><a href="https://www.instagram.com/alixncatalanotto/">Connect With Me on Instagram</a></p>
+    </div>
+  </footer>
+  </section>
+
+      </html>
diff --git a/contact.html b/contact.html
@@ -1,11 +1,40 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=    <h1> ABOUT </h1>, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <h1> CONTACT </h1>
-</body>
-</html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Document</title>
+        <link rel="stylesheet" type="text/css" href="style/contact.css">
+    </head>
+
+    <div class ="Home">
+        <header>
+          <h1>Contact Me</h1>
+          <nav>
+            <a href="index.html">Home</a>
+            <a href="about.html">About Me</a>
+            <a href="contact.html">Contact Me</a>
+            <a href="projects.html">My Projects</a>        
+          </nav>
+       </div>
+      </header>
+
+  <section>
+      <p>Clicking on any link below will allow you to get in contact with me fast. Let's find out what I can do for you!</p>
+
+      <p class="linkedin"><a href= "https://www.linkedin.com/in/alixcatalanotto/">Let's Network! Check out my LinkedIn profile!</a></p>
+
+      <p class="instagram"><a href="https://www.instagram.com/alixncatalanotto/">Connect With Me on Instagram</a></p>
+
+      <p class="codepen"><a href="https://codepen.io/anc13">Check out some of my earlier work on Code Pen!</p>
+
+       <p class="github"><a href="https://github.com/AlixCat13">Here is some more of my work on Git Hub!</p>
+</section>
+
+<section>
+<footer class="footer">
+
+</footer>
+</section>
+</html>
+
diff --git a/index.html b/index.html
@@ -1,11 +1,73 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
+  <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
+    <link rel="stylesheet" type="text/css" href="style/index.css">>
 </head>
+
+  <div class ="Home">
+      <header>
+        <h1>Alix Catalanotto's Portfolio</h1>
+      <nav>
+        <a href="index.html">Home</a>
+        <a href="about.html">About Me</a>
+        <a href="contact.html">Contact Me</a>
+        <a href="projects.html">My Projects</a>        
+      </nav>
+     </div>
+    </header>
+
 <body>
+  <div class="profile">
+    <img src= "https://lh3.googleusercontent.com/mH-IrTaioqMQSARGcVY6ajOZ117ndrMORxjg6MM_mB5yzY61NTkFZrUYPCoJaZYhp4IlUKEL2zkqtm65uD-VTVqWxSDtiDF_uyvvl0zHVvSucgCYa5zQr4zQMhE4J4jEQb3HlPbDiil3O8O1AhGt1qlpXMNAMSLJY5u4A3cALjPNWLlThm12EyDOrXLm_GobrT3UV6bO_f3ENHGXWLW3G2V6CrvIKlUOj4zn5FVD9CGm_NtROrrMx9AYTeWW0TyENNiEVC_UiwhN0I03wrtBQzrz2HUY8bV-BlATLC48ru0_PAAzaVvsXX739cwskR6btlKTAwStuEbDn6X0Wdm3NTJtR_AmDar06uO-tZCpHgvrgVrsyVvBzfCHmdDCnaVR8Y_KTh9eNMg0uGrHmG9YQLVMd7UonQ9DvtYAgzhE5idzlE1sUwo0DBeqDHDY5xy3JldUVVRYUw_Aus0wKkWdjmlUgOST70J1op2JkCVnbtvw9OXjp-cxg8y_RppkRnCZN1GRn03giOa1JbJkUi-QiDwALXtxOsC91KcS9zoAQmPsRdfdRsxT-fwFQzcqdVGWf1r_729PAH5yPvaeq7IwQlTrc7sdTc8sH7PUC1N65I9Rm4cC62dYRaf9xF4iouvpBopUbSeZsfFNFsFRADw15Wcfhwse-hoII_OwAOWbFfggebTjzg71IcwSmkiH=s608-no?authuser=0">
+  </div>
+  <span>
+    <div class="Intro">
+    <h2>Alix Catalanotto</h2>
+      <h3>Budding Web Developer<h3>
+        </div>
+
+        <button><a href="projects.html">My projects</a></button>
+  </span>
+<section>   
+      <p>I started my journey at Lambda School after talking to my husband about what I want to do when I decide to go back to work after being a stay-at-home mom for a few years. Before having my daughter, I had done nothing but office admin work since graduating college in 2012. I have a BA in Journalism from Angelo State University but have not been able to do anything with it. I knew when I was ready to go back to work, I didn't just want a job; I wanted a career! Joining Lambda's Web Development program has been the best decison I have made in my professional career. I'm learning to code and how to develop websites which is something I have always wanted to learn how to do. As I continue this journey, I expect this portfoli site to grow and develop as much as I will in this program. I can't wait to see where this adventure takes me next. </p>
+
+</section>
+
+
+  <div class="Project1">
+    <img src= "https://picsum.photos/id/20/367/267"> 
+    <img src= "https://picsum.photos/id/237/367/267">
+  </div> 
 
+  <div class="Projects2">
+    <img src= "https://picsum.photos/id/239/367/267">
+    <img src= "https://picsum.photos/id/244/367/267">
+  </div>  
+
+  <div class= "Projects3">
+    <img src= "https://picsum.photos/id/250/367/267"> 
+    <img src= "https://picsum.photos/id/292/367/267">
+  </div>
+
+  <div class="Projects4">
+    <img src= "https://picsum.photos/id/306/367/267">
+    <img src="https://picsum.photos/id/455/367/267">
+  </div>
 </body>
+
+
+<section>
+<footer>
+  <div class="footer">
+    <p>Want to see what I can do for you?</p>
+    <button><a href="contact.html">Contact Me!</a></button>
+    <p class="linkedin"><a href= "https://www.linkedin.com/in/alixcatalanotto/">My LinkedIn Profile</a></p>
+    <p class="instagram"><a href="https://www.instagram.com/alixncatalanotto/">Connect With Me on Instagram</a></p>
+  </div>
+</footer>
+</section>
+
 </html>
diff --git a/projects.html b/projects.html
@@ -4,8 +4,41 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
+    <link rel="stylesheet" type="text/css" href="style/projects.css">
 </head>
 <body>
-    <h1> PROJECTS </h1>
+
+      <div class ="Home">
+          <header>
+            <h1>Projects</h1>
+            <nav>
+              <a href="index.html">Home</a>
+              <a href="about.html">About Me</a>
+              <a href="contact.html">Contact Me</a>
+              <a href="projects.html">My Projects</a>        
+            </nav>
+         </div>
+        </header>
+
+        <p>During my time at Lambda School, I have learned a lot about what I am capable of! Help me in continueing my journey by checking out some of the work I have done not only as a student but for fun on the side!</p>
+        <span>
+        <p class="github"><a href="https://github.com/AlixCat13">Here is some more of my work on Git Hub!</p>
+        </span>
+
+          <span>
+
+        <p class="codepen"><a href="https://codepen.io/anc13">Check out some of my earlier work on Code Pen!</a></p>
+          </span>
 </body>
+<section>
+  <footer>
+    <div class="footer">
+      <p>Want to see what I can do for you?</p>
+      <button><a href="contact.html">Contact Me!</a></button>
+      <p class="linkedin"><a href= "https://www.linkedin.com/in/alixcatalanotto/">My LinkedIn Profile</a></p>
+      <p class="instagram"><a href="https://www.instagram.com/alixncatalanotto/">Connect With Me on Instagram</a></p>
+    </div>
+  </footer>
+  </section>
+
 </html>
diff --git a/style/about.css b/style/about.css
@@ -0,0 +1,140 @@
+/* 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;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* 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;
+}
+
+header {
+    margin: 10px auto;
+    margin-bottom: 30px;
+    padding: 10px;
+    background: pink;
+    border-bottom: 5px dotted purple;
+    text-align: center;  
+  }
+
+  h1 {
+    font-size: 45px;
+    font-family: Bradley Hand ITC;
+    font-weight: bold;
+    text-align: center;
+    background: pink;
+  }
+
+  header nav a {
+    margin: 0 10px;
+    border: 2px solid purple;
+    padding: 10px;
+    display: inline-block;
+    border-radius: 30px;
+    color: black;
+    font-family: comic sans ms;
+    text-decoration: none;
+    margin-bottom: 20px;
+    background: turquoise;  
+  }
+
+  .image img {
+    border: 5px dashed magenta;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin: 20px;
+    height: 450px;
+    width: 350px;
+    flex-wrap: wrap;
+    display: flex;
+    border-radius: 10px;
+}
+
+
+  p { 
+   font-size: 20px;
+   font-family: arial;
+   text-align: center;
+  }
+
+  .footer {
+    padding: 10px;
+    background: pink;
+    margin:0 auto;
+    margin-top: 30px;
+    text-align: center;
+    border-top: 5px dotted purple;
+  }
+
+  .footer p {
+    font-size: 30px;
+    font-family: Bradley Hand ITC;
+    font-weight: bold;
+  }
+
+  .footer .linkedin {
+    font-size: 20px;
+  }
+
+  .footer .linkedin :hover {
+    color: black;
+  }
+
+  .footer .instagram {
+    font-size: 20px;
+  }
+
+  .footer .instagram :hover{
+    color: black;
+  }
+
+  .footer button {
+    padding: 10px;
+    margin: 5px;
+    background: turquoise;
+    border: solid purple;
+    border-radius: 30px;
+    font-size: 20px;
+    font-family: comic sans ms;
+  }