AdaGold · andrygzt · May 18, 2022 · May 25, 2022 · May 25, 2022 · May 25, 2022
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/feedback.md b/feedback.md
@@ -8,7 +8,7 @@ Appropriate Git Usage |
 Answered comprehension questions |
 Page fully loads |
 No broken links (regular or images) |
-Includes at least 4 pages and styling |
+Includes at least 3 pages and styling |
 **HTML** |
 Uses the high-level tags for organization: `header, footer, main` |
 Appropriately using semantic tags: `section, article`, etc. |

diff --git a/images/I2.jpg b/images/I2.jpg
diff --git a/images/Lobo.jpg b/images/Lobo.jpg
diff --git a/images/Lobo_3.jpg b/images/Lobo_3.jpg
diff --git a/images/expoexp.jpg b/images/expoexp.jpg
diff --git a/images/home_sunset.JPG b/images/home_sunset.JPG
diff --git a/images/impro-picture.JPG b/images/impro-picture.JPG
diff --git a/images/intern_research.JPG b/images/intern_research.JPG
diff --git a/images/lobo_2.JPG b/images/lobo_2.JPG
diff --git a/images/lobo_4.jpg b/images/lobo_4.jpg
diff --git a/images/software_dev.jpg b/images/software_dev.jpg
diff --git a/images/sunset_10.JPG b/images/sunset_10.JPG
diff --git a/images/sunset_11.jpg b/images/sunset_11.jpg
diff --git a/images/sunset_12.jpg b/images/sunset_12.jpg
diff --git a/images/sunset_13.jpg b/images/sunset_13.jpg
diff --git a/images/sunset_14.JPG b/images/sunset_14.JPG
diff --git a/images/sunset_15.JPG b/images/sunset_15.JPG
diff --git a/images/sunset_16.JPG b/images/sunset_16.JPG
diff --git a/images/sunset_17.jpg b/images/sunset_17.jpg
diff --git a/images/sunset_2.jpg b/images/sunset_2.jpg
diff --git a/images/sunset_3.JPG b/images/sunset_3.JPG
diff --git a/images/sunset_4.jpg b/images/sunset_4.jpg
diff --git a/images/sunset_5.jpg b/images/sunset_5.jpg
diff --git a/images/sunset_6.jpg b/images/sunset_6.jpg
diff --git a/images/sunset_7.jpg b/images/sunset_7.jpg
diff --git a/images/sunset_8.jpg b/images/sunset_8.jpg
diff --git a/images/sunset_9.JPG b/images/sunset_9.JPG
diff --git a/images/together_at_sunset.JPG b/images/together_at_sunset.JPG
diff --git a/index.html b/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Andrea Garcia</title>
+  <link href="styles/style.css" type="text/css" rel="stylesheet"/>
+</head>
+<body>
+  <header>
+    <h1 class="main"> <strong>Welcome</strong> </h1>
+
+
+    <nav>
+      <div class="navbar">
+        <a href="pages/about.html">This is me</a>
+        <a href="pages/portfolio.html">This is what I do</a>
+      </div>
+    </nav>
+  </header>
+
+
+<h2><a class="links" href="https://goo.gl/maps/RScDR6n2FqFzuanu6">Bandon Beach</a></h2>
+<img class="images" src="images/home_sunset.JPG" alt="My favorite sunset 2" width="1000">
+<br/>
+<br/>
+<br/>
+
+
+<div class="logo">
+  <a class="links" href="https://www.tiktok.com/@andrygzt">
+    <svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <title>Tiktok</title>
+        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+          <path d="M38.0766847,15.8542954 C36.0693906,15.7935177 34.2504839,14.8341149 32.8791434,13.5466056 C32.1316475,12.8317108 31.540171,11.9694126 31.1415066,11.0151329 C30.7426093,10.0603874 30.5453728,9.03391952 30.5619062,8 L24.9731521,8 L24.9731521,28.8295196 C24.9731521,32.3434487 22.8773693,34.4182737 20.2765028,34.4182737 C19.6505623,34.4320127 19.0283477,34.3209362 18.4461858,34.0908659 C17.8640239,33.8612612 17.3337909,33.5175528 16.8862248,33.0797671 C16.4386588,32.6422142 16.0833071,32.1196657 15.8404292,31.5426268 C15.5977841,30.9658208 15.4727358,30.3459348 15.4727358,29.7202272 C15.4727358,29.0940539 15.5977841,28.4746337 15.8404292,27.8978277 C16.0833071,27.3207888 16.4386588,26.7980074 16.8862248,26.3604545 C17.3337909,25.9229017 17.8640239,25.5791933 18.4461858,25.3491229 C19.0283477,25.1192854 19.6505623,25.0084418 20.2765028,25.0219479 C20.7939283,25.0263724 21.3069293,25.1167239 21.794781,25.2902081 L21.794781,19.5985278 C21.2957518,19.4900128 20.7869423,19.436221 20.2765028,19.4380839 C18.2431278,19.4392483 16.2560928,20.0426009 14.5659604,21.1729264 C12.875828,22.303019 11.5587449,23.9090873 10.7814424,25.7878401 C10.003907,27.666593 9.80084889,29.7339663 10.1981162,31.7275214 C10.5953834,33.7217752 11.5748126,35.5530237 13.0129853,36.9904978 C14.4509252,38.4277391 16.2828722,39.4064696 18.277126,39.8028054 C20.2711469,40.1991413 22.3382874,39.9951517 24.2163416,39.2169177 C26.0948616,38.4384508 27.7002312,37.1209021 28.8296253,35.4300711 C29.9592522,33.7397058 30.5619062,31.7522051 30.5619062,29.7188301 L30.5619062,18.8324027 C32.7275484,20.3418321 35.3149087,21.0404263 38.0766847,21.0867664 L38.0766847,15.8542954 Z" id="Fill-1" fill="#000000"></path>
+        </g>
+    </svg>
+  </a>
+</div>
+<h2>More favorite sunsets</h2>
+
+<div class="fling-minislide">
+  <img src="images/sunset_3.jpg" alt="Slide 1" />
+  <img src="images/sunset_5.jpg" alt="Slide 2" />
+  <img src="images/sunset_6.jpg" alt="Slide 3" />
+  <img src="images/sunset_7.jpg" alt="Slide 4" />
+  <img src="images/sunset_9.jpg" alt="Slide 5" />
+  <img src="images/sunset_10.JPG" alt="Slide 6" />
+  <img src="images/sunset_11.jpg" alt="Slide 7" />
+  <img src="images/sunset_13.jpg" alt="Slide 8" />
+  <img src="images/sunset_14.JPG" alt="Slide 9" />
+  <img src="images/sunset_15.JPG" alt="Slide 10" />
+  <img src="images/sunset_16.JPG" alt="Slide 11" />
+  <img src="images/sunset_17.jpg" alt="Slide 12" />
+  <img src="images/together_at_sunset.JPG" alt="Slide 13"/>
+</div>
+
+
+<div class="fling-minislid">
+  <img src="images/sunset_2.jpg" alt="Slid 13" />
+  <img src="images/sunset_4.jpg" alt="Slid 14" />
+  <img src="images/sunset_8.jpg" alt="Slid 15" />
+  <img src="images/sunset_12.jpg" alt="Slid 16" />
+</div>
+</body>
+</html>
diff --git a/pages/about.html b/pages/about.html
@@ -4,9 +4,126 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <title>This is me</title>
+  <link href="../styles/style.css" type="text/css" rel="stylesheet"/>
 </head>
+<header>
+  <h1> <strong>Welcome</strong> </h1>
+
+    <div class="navbar">
+      <a href="../index.html">Home</a>
+      <a href="portfolio.html">This is what I do</a>
+    </div>
+  </header>
+<br/>
+<br/>
 <body>
+  <section>
+    <h1 class="main"><strong>Andrea Garcia Zapata</strong></h1>
+    <h2>About me:</h2>
+    <img class="images" src="../images/I2.jpg" alt="Mine" width="300">
+    <p> My name is Luz Andrea Garcia Zapata <a href="https://namedrop.io/andreagarciazapata">(click to listen how to pronounce)</a> I use pronouns she/her. I am a Mexican woman living in the Us since 2019, before that I spent 
+    my whole life living in Veracruz and Mexico City. Since I moved to US I started looking for my place in this country, I've met incredible 
+    and beloved people. I enjoy a lot spend time with my husband, my friends and my beautiful dog Lobo. My favorite part of the day is the sunset,
+    I love the colors on the sky, the effect that the light can spread on the clouds specially when we are in the transitions of seasons.
+    </p>
+  </section>
+
+  <aside id="about-dog"> 
+    <h1 class="navbar">Introducing my dog Lobo</h1>
+    <section>
+      <img class="item" src="../images/Lobo.jpg" alt="Lobophoto" width="180">
+      <img class="item" src="../images/lobo_2.JPG" alt="Lobophoto2" width="180">
+      <img class="item" src="../images/Lobo_3.jpg" alt="Lobophoto3" width="180">
+      <img class="item" src="../images/lobo_4.jpg" alt="Lobophoto4" width="600"></aside>
+    <p> Lobo means wolf in spanish, he is a 6.5 years old mix Alaskan Malanute and Siberian Husky. He is a beautiful sweet rescue boy. Apparently he was bron in Madera California and when he turned 1 year old something happened he got lost, animal services got him at first, he had some aggresive behivour and it was hard for him to find a family then, an asociation rescue him from the city shelter and put him in another sanctuary, after 2 years that he was sent to another sanctuary in Oregon where he was giving a home but the family did not have enough time for him and he got again into the shelter. Finally he was sent to <a href="https://www.wamal.com/">WAMAL</a> where we found him. He used to be a shy timid dog, mainly afraid of men and he got hard times on desensitize and learning how to trusting in humans again. Right now he is a beloved and cared dog, we are so happy to share our time and our house with him, he is very sweet and lazy dog. If you are interested in addopt or being a foster for an animal like Lobo, please visit the link I left before.
+    </p>
+    </section>
+
+  <aside> 
+    <h1 class="navbar">My favorite game</h1>
+    <section class="page-subtitle">
+      <h2>La loteria</h2>
+      <a href="https://g.co/kgs/RwM7bt" > Click to play </a>
+    </section>
+    </aside>
 
+  <aside> 
+    <h1 class="navbar" >My music</h1>
+    <section class="page-subtitle">
+      <h2>Don't judge my likes</h2>
+      <a href="https://open.spotify.com/playlist/4WlDtEIhzKQon50EIbZpRO?si=2cdede57e5974d28"> Click to listen</a>
+    </section>
+    </aside>
+  <br/>    
+  <aside> 
+    <h1 class="navbar">My favorite home-made food</h1>
+    <section>
+      <h2>Mexican Flan</h2>
+      <img src="http://www.mexicanrecipes.me/FlanMexicano.jpg" alt="profile photo" width="300">
+      <h2 class="highlight"> Ingredients </h2>
+
+    <ul>
+        <li>1 cup white sugar</li>
+        <li>1 cup whole milk</li>
+        <li>1 (14 ounce) can sweetened condensed milk</li>
+        <li>4 eggs</li>
+        <li>1 tablespoon vanilla extract</li>
+        <li> 4 oz Cream Cheese</li>
+    </ul>
+    <h2 class="highlight"> Directions </h2>
+    <ul>
+    <li><h3>Step 1</h3></li>
+      <p>Place sugar in a heavy saucepan over medium-high heat, and cook, 
+        stirring constantly, until the sugar melts and turns a golden amber color, 
+        about 10 minutes. Watch carefully once syrup begins to change color, because 
+        it burns easily. 
+        Carefully pour the melted sugar syrup into a flan mold. Let cool.</p>
+      <li><h3>Step 2</h3></li>
+      <p>Preheat oven to 350 degrees F (175 degrees C).</p>
+      <li><h3>Step 3</h3></li>
+      <p>Pour whole milk, sweetened condensed milk, eggs, egg yolks, orange juice, orange peel, vanilla extract, and cornstarch into a blender, 
+      and blend for a minute or so, until the mixture is smooth. Pour in the cream, and pulse several times to incorporate the cream. 
+      Pour the mixture over the cooled caramel syrup in the flan mold.</p>
+      <li><h3>Step 3</h3></li>
+      <p>Pour whole milk, sweetened condensed milk, eggs, egg yolks, orange juice, orange peel, vanilla extract, and cornstarch into a blender, 
+        and blend for a minute or so, until the mixture is smooth. Pour in the cream, and pulse several times to incorporate the cream. 
+        Pour the mixture over the cooled caramel syrup in the flan mold.</p>
+      <li><h3>Step 4</h3></li>
+      <p>Line a roasting pan with a damp kitchen towel. Place the flan mold on the towel, inside roasting pan, and place roasting pan on oven rack. 
+        Fill roasting pan with boiling water to reach halfway up the sides of the baking dish.</p>
+      <li><h3>Step 5</h3></li>
+      <p>Bake in the preheated oven until the center of the flan is set but still slightly jiggly when moved, 45 minutes to 1 hour. Let the flan cool, 
+        then refrigerate for at least 4 hours. To serve, run a sharp paring knife around the inside of the mold to release the flan. 
+        Invert a plate on the mold, flip the mold over, and gently remove the mold to unmold the flan and reveal the syrupy caramel topping.</p>
+    </ul>
+</section>
+<footer>
+  <h4> &copy; 2022 </h4>
+  <p id="disclaimer">  This is my first portfolio, please consider this work has educational purposes and the owner reserves the right over these photos, specially those where dog is in them. PS enjoy the Mexican flan</p>
+  <nav>
+    <ul>
+      <li><a href="mailto:andrygzt@gmail.com"> email</a></li>
+      <li>
+        <a href="https://instagram.com/andrygzt">
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            xmlns="http://www.w3.org/2000/svg">
+            <title>Instagram</title>
+            <g>
+              <circle cx="12.145" cy="3.892" r="1" />
+              <path
+                d="M8 12c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4-1.794 4-4 4zm0-6c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2z" />
+              <path
+                d="M12 16H4c-2.056 0-4-1.944-4-4V4c0-2.056 1.944-4 4-4h8c2.056 0 4 1.944 4 4v8c0 2.056-1.944 4-4 4zM4 2c-.935 0-2 1.065-2 2v8c0 .953 1.047 2 2 2h8c.935 0 2-1.065 2-2V4c0-.935-1.065-2-2-2H4z" />
+            </g>
+          </svg>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</footer>
 </body>
 </html>
diff --git a/pages/index.html b/pages/index.html
diff --git a/pages/portfolio.html b/pages/portfolio.html
@@ -4,9 +4,148 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <link href="../styles/style.css" type="text/css" rel="stylesheet"/>
+  <title>My portfolio</title>
 </head>
+  <header class="main">
+    <h1 class="main"><strong>This is what I do</strong></h1>
+    <div class="navbar">
+    <a href="../index.html">Home</a>
+    <a href="about.html">This is me</a>
+  </div>
+  </header>
+<br/>
+<br/>
+
 <body>
-
-</body>
+<h1>My professional experience...</h1>
+
+<section class="carousel" aria-label="Gallery">
+  <ol class="carousel__viewport">
+    <li id="carousel__slide1"
+        tabindex="0"
+        class="carousel__slide">
+        <div class="carousel__snapper"></div>
+          <a href="#carousel__slide4"
+            class="carousel__prev">Go to last slide</a>
+          <a href="#carousel__slide2"
+            class="carousel__next">Go to next slide</a>
+    </li>
+    <li id="carousel__slide2"
+        tabindex="0"
+        class="carousel__slide">
+      <div class="carousel__snapper"></div>
+      <a href="#carousel__slide1"
+        class="carousel__prev">Go to previous slide</a>
+      <a href="#carousel__slide3"
+        class="carousel__next">Go to next slide</a>
+    </li>
+    <li id="carousel__slide3"
+        tabindex="0"
+        class="carousel__slide">
+      <div class="carousel__snapper"></div>
+      <a href="#carousel__slide2"
+        class="carousel__prev">Go to previous slide</a>
+      <a href="#carousel__slide4"
+        class="carousel__next">Go to next slide</a>
+    </li>
+    <li id="carousel__slide4"
+        tabindex="0"
+        class="carousel__slide">
+      <div class="carousel__snapper"></div>
+      <a href="#carousel__slide3"
+        class="carousel__prev">Go to previous slide</a>
+      <a href="#carousel__slide1"
+        class="carousel__next">Go to first slide</a>
+    </li>
+  </ol>
+  <aside class="carousel__navigation">
+    <ol class="carousel__navigation-list">
+      <li class="carousel__navigation-item">
+        <a href="#carousel__slide1"
+          class="carousel__navigation-button">Go to slide 1</a>
+      </li>
+      <li class="carousel__navigation-item">
+        <a href="#carousel__slide2"
+          class="carousel__navigation-button">Go to slide 2</a>
+      </li>
+      <li class="carousel__navigation-item">
+        <a href="#carousel__slide3"
+          class="carousel__navigation-button">Go to slide 3</a>
+      </li>
+      <li class="carousel__navigation-item">
+        <a href="#carousel__slide4"
+          class="carousel__navigation-button">Go to slide 4</a>
+      </li>
+    </ol>
+  </aside>
+</section>
+
+
+
+  <table>
+    <tr>
+      <th>Company</th>
+      <th> </th>
+      <th>Position</th>
+      <th> </th>
+      <th>Year</th>
+      <th> </th>
+      <th> </th>
+      <th> </th>
+      <th>About</th>
+
+    </tr>
+    <tr>
+      <td>Instituto Mexicano del Petroleo</td>
+      <td> </td>
+      <td>Research Intern</td>
+      <td> </td>
+      <td>2017</td>
+      <td> </td>
+      <td> </td>
+      <td> </td>
+      <th>Study of thermodynamic properties of catalysts.</th>
+    </tr>
+    <tr>
+      <td>First Quality Chemicals</td>
+      <td> </td>
+      <td>Technical Sales Specialist</td>
+      <td> </td>
+      <td>2018</td>
+      <td> </td>
+      <td> </td>
+      <td> </td>
+      <th>Technical advisor on polyurethane specialties.</th>
+    </tr>
+    <tr>
+      <td>ATAGO USA</td>
+      <td> </td>
+      <td>Technical Sales Specialist</td>
+      <td> </td>
+      <td>2020</td>
+      <td> </td>
+      <td> </td>
+      <td> </td>
+      <th>Technical advisor for Latin America Countries.</th>
+    <tr>
+      <td>Ada developers Academy</td>
+      <td> </td>
+      <td>Student</td>
+      <td> </td>
+      <td>2022</td>
+      <td> </td>
+      <td> </td>
+      <td> </td>
+      <th>FullstackFull stack software developer in Python, SQL, html, CSS, Javascript </th>
+    </tr>
+  </table>
+<a href="https://linkedin.com/in/andrygzt">
+  <svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Icon/Social/linkedin-color" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <path d="M20.9716667,33.5527338 L25.001,33.5527338 L25.001,27.1328007 C25.001,25.439485 25.3213333,23.7988354 27.4206667,23.7988354 C29.491,23.7988354 29.517,25.7351486 29.517,27.2404662 L29.517,33.5527338 L33.5506667,33.5527338 L33.5506667,26.4341413 C33.5506667,22.9381777 32.796,20.2505391 28.711,20.2505391 C26.7483333,20.2505391 25.432,21.3265278 24.8943333,22.3471839 L24.839,22.3471839 L24.839,20.5725357 L20.9716667,20.5725357 L20.9716667,33.5527338 Z M16.423,14.1202696 C15.1273333,14.1202696 14.0823333,15.1682587 14.0823333,16.4595785 C14.0823333,17.7508984 15.1273333,18.7992208 16.423,18.7992208 C17.7133333,18.7992208 18.761,17.7508984 18.761,16.4595785 C18.761,15.1682587 17.7133333,14.1202696 16.423,14.1202696 L16.423,14.1202696 Z M14.4026667,33.5527338 L18.4406667,33.5527338 L18.4406667,20.5725357 L14.4026667,20.5725357 L14.4026667,33.5527338 Z M9.76633333,40 C8.79033333,40 8,39.2090082 8,38.2336851 L8,9.76631493 C8,8.79065843 8.79033333,8 9.76633333,8 L38.234,8 C39.2093333,8 40,8.79065843 40,9.76631493 L40,38.2336851 C40,39.2090082 39.2093333,40 38.234,40 L9.76633333,40 Z" id="Shape" fill="#000000"></path>
+    </g>
+  </svg>
+</a>
+  </body>
 </html>