pushdev-code · mayravargasbecerra13 · Jun 30, 2022 · Jul 5, 2022 · Jul 5, 2022 · Jul 7, 2022
diff --git a/1-the-basics/basics.html b/1-the-basics/basics.html
@@ -0,0 +1,14 @@
+<!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>Mayra Vargas</title>
+</head>
+<body>
+
+    <p>Mayra Vargas</p>
+
+</body>
+</html>
diff --git a/2-other-html-tags/img/correo.png b/2-other-html-tags/img/correo.png
diff --git a/2-other-html-tags/img/foto-hoja-vida.jpg b/2-other-html-tags/img/foto-hoja-vida.jpg
diff --git a/2-other-html-tags/img/mapa.png b/2-other-html-tags/img/mapa.png
diff --git a/2-other-html-tags/img/telefono.png b/2-other-html-tags/img/telefono.png
diff --git a/2-other-html-tags/index.html b/2-other-html-tags/index.html
@@ -0,0 +1,76 @@
+<!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>My resume</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <section class="contenido">
+        <p>Mayra Vargas</p>
+        <img src="img/foto-hoja-vida.jpg" alt="My photo">
+
+    </section>
+    <section class="contenido-dos">
+        <div class="descripcion">
+        <img class="mapa" src="img/mapa.png" alt="Ubicación">
+        <p class="ciudad">Duitama, Boyacá</p>
+        <div >
+            <img class="correo" src="img/correo.png" alt="Correo">
+            <a class="direcc-correo" href="Mailto:vargasmayra800@gmail.com">vargasmayra800@gmail.com</a>
+        </div>
+        <div class="telefono">
+            <img  src="img/telefono.png" alt="Telefono">
+            <P>3138661775</P>
+        </div >
+        <div class="administradora">
+        <p>Habilidades</p>
+        </div>
+        <p class="valores">Soy una persona positiva y optimista, dispuesta al
+            aprendizaje y la superación personal, con sentido de
+            pertenencia. Responsable, amable, me gusta ser
+            colaboradora y sobretodo conservar un ambiente laboral
+            agradable con buena disposición. <br> <br>
+            Cuento con excelentes relaciones interpersonales y 
+            facilidad para trabajar en grupo, responsable, atenta,
+            respetuosa y dedicada a mis ocupaciones diarias</p>
+        <div class="lugares">
+                <p>Lugares</p>
+        </div>
+        <div class="sitios">
+        <p>Paipa - Boyacá <a href="https://www.corpoboyaca.gov.co/sochagota/">Lago Sochagota</a> </p>
+        <p>Melgar - Tolima <a href="https://www.piscilago.co/piscitour">Piscilago</a> </p>
+        <p>Yopal - Casanare <a href="https://www.tripadvisor.co/Tourism-g1220262-Yopal_Casanare_Department-Vacations.html">Yopal</a> </p>
+    </div>
+
+    <div class="experiencia">
+        <p>Experiencia Profesional</p>
+    </div>
+
+    <p class="trabajos"><span>REEDSO,</span> <br>
+        Administradora de contenido
+        Tareas realizadas: Manejo y publicación del
+        Contenido en redes sociales, administración de catálogos
+        virtuales en prestashop, publicación de contenido en 
+        plataformas wordpress, maquetación de mails y landings
+        pequeños para campañas. <br> <br>
+
+       <span> Disarq Constructora,</span> <br>
+        Community manager
+        Tareas realizadas: Manejas y publicación del
+        Contenido en redes sociale<br><br>
+
+        <span> Igloolab</span> <br>
+        Administracion de contenido, maquetacion de emails
+        y landings
+        </p>
+    </div>
+
+
+    </section>
+
+</body>
+</html>
diff --git a/2-other-html-tags/style.css b/2-other-html-tags/style.css
@@ -0,0 +1,176 @@
+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;
+}
+
+
+body{
+    font-family: Arial, Helvetica, sans-serif;
+    max-width: 1200px;
+    width: 100%;
+    margin: auto;
+    display: block;
+}
+.contenido{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  margin: auto 0;
+  background-color: #492f55;
+  width: 100%;
+  height: 100%;
+  padding: 18px;
+
+}
+.contenido p{
+
+    max-width: 340px;
+    font-size: 51px;
+    color: white;
+    font-weight: bold;
+    font-family: Arial, Helvetica, sans-serif;
+    margin-right: 30px;
+    text-align: center;
+}
+
+.contenido img{
+
+   max-width: 230px;
+    border-radius: 30px;
+    border: 10px solid white;
+    margin-bottom: 25px;
+}
+
+.contenido-dos{
+    background-color: #492f55;
+    width: 100%;
+    margin: 0;
+    display: block;
+    padding: 18px;
+}
+.descripcion{
+    background-color: white;
+    border-radius: 15px;
+    width: 84%;
+    margin: auto;
+    display: block;
+
+}
+.mapa{
+    width: 28px;
+    display: inline-block;
+}
+.ciudad{
+    display: inline-block;
+
+}
+.correo{
+    width: 28px;
+}
+.direcc-correo{
+    list-style: none;
+    text-decoration: none;
+    color: black;
+}
+.telefono img{
+    width: 28px;
+    display: inline-block;
+}
+.telefono p{
+    display: inline-block;
+}
+
+.administradora{
+    background-color: #ac5cb6;
+    max-width: 312px;
+    height: 38px;
+}
+.administradora p{
+    font-size: 25px;
+    color: white;
+    padding: 5px;
+    text-align: center;
+
+}
+
+.valores{
+    font-size: 21px;
+    padding: 20px;
+}
+
+.lugares{
+    background-color: #263427;
+    max-width: 312px;
+}
+.lugares{
+    font-size: 25px;
+    color: white;
+    height: 38px;
+    text-align: center;
+}
+
+.sitios{
+    padding: 30px;
+}
+.sitios p{
+  font-size: 21px;
+}
+.experiencia{
+    background-color: #e4ae3a;
+    max-width: 312px;
+    height: 38px;
+}
+.experiencia p{
+   font-size: 21px;
+   text-align: center;
+   padding: 7px;
+   color: white;
+}
+.trabajos span{
+  font-weight: bold;
+  font-size: 21px;
+}
+.trabajos {
+    font-size: 21px;
+    padding: 18px;
+}
+
diff --git a/3-semantic-html/index.md b/3-semantic-html/index.md
@@ -150,3 +150,5 @@ Let's see more examples: [Semantic structure](https://www.internetingishard.com/
 * [Semantic structure](https://www.internetingishard.com/html-and-css/semantic-html/)
 * [Why use semantic HTML](https://www.lifewire.com/why-use-semantic-html-3468271)
 * [Element list](https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos)
+
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -150,3 +150,5 @@ Let's see more examples: [Semantic structure](https://www.internetingishard.com/
		* [Semantic structure](https://www.internetingishard.com/html-and-css/semantic-html/)
		* [Why use semantic HTML](https://www.lifewire.com/why-use-semantic-html-3468271)
		* [Element list](https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos)