mayravargasbecerra13 · mayravargasbecerra13 · Jul 19, 2022 · Jul 21, 2022 · Jul 21, 2022 · Jul 26, 2022
diff --git a/1-the-basics/form.html b/1-the-basics/form.html
@@ -0,0 +1,45 @@
+<!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>document</title>
+    <link rel="stylesheet" href="style.css">
+
+</head>
+<body>
+    <form class="contenido-p" action="">
+        <fieldset>
+        <legend>Please enter your contact details</legend>
+        <label for="name">Your name (required):</label>
+        <input type="text" id="name" name="name" required><br>
+        <label for="mail">E-mail address (required):</label>
+        <input type="email" id="mail" name="user_mail" required><br>
+        <label for="namber">Phone number (+57): (optional):</label>
+        <input type="number" id="namber" name="user_mail" required>
+        </fieldset>
+        <fieldset>
+        <legend>Please select the courses that you are interested in (required):</legend>
+        <input type="checkbox" id="cbox1" value="checkbox" required>
+        <label for="cbox1">Web Developer</label><br>
+        <input type="checkbox" id="cbox2" value="checkbox" required>
+        <label for="cbox2">React Developer</label><br>
+        <input type="checkbox" id="cbox3" value="checkbox" required>
+        <label for="cbox3">Fullstack Developer</label><br>
+        <input type="checkbox" id="cbox4" value="checkbox" required>
+        <label for="cbox4">Other</label><br>
+
+    </fieldset>
+        <legend>Please enter a massage (optional):</legend>
+        <label for="text"></label>
+        <textarea name="text" id="text" cols="100" rows="10"></textarea><br>
+        <button class="btn" type="submit">Send massage</button>
+        <button class="btn" aria-label="Close" type="reset">Reset form</button>
+    </form>
+    <footer class="footer">
+        <p>Formulario de validación</p>
+    </footer>
+
+</body> 
+</html>
diff --git a/1-the-basics/img-form/Burbujas-de-colores_Abstract-Wallpapers.jpg b/1-the-basics/img-form/Burbujas-de-colores_Abstract-Wallpapers.jpg
diff --git a/1-the-basics/style.css b/1-the-basics/style.css
@@ -0,0 +1,30 @@
+.contenido-p{
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 22px;
+    background-image: url(img-form/Burbujas-de-colores_Abstract-Wallpapers.jpg) ;
+    background-size: cover;
+    background-repeat: no-repeat;
+    width: 100%;
+    padding: 20px;
+ }
+ .btn:hover{
+     background-color: #133e11;
+     color: #6294a6;
+     font-family: Arial, Helvetica, sans-serif;
+
+ }
+ .btn{
+     width: 138px;
+     height: 30px;
+     border-radius: 5px;
+     background-color: #575a57;
+     color: white;
+     font-size: 15px;
+ }
+ .footer{
+     background-color: #9fa7aa;
+     height: 100px;
+     margin: 0px;
+     padding: 1px;
+     width: 100%;;
+ }
diff --git a/2-positioning/positioning.html b/2-positioning/positioning.html
@@ -0,0 +1,69 @@
+<!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>Position</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+
+      <header class="header">
+        <h1>This is my first layout</h1>
+      </header>
+
+      <nav class="cont-p">
+        <ul class="cont-indice">
+          <a href=""><li class="indice">Home</li></a>
+          <a href=""><li class="indice">Productos</li></a>
+          <a href=""><li class="indice">About us</li></a>
+          <a href=""><li class="indice">Contac</li></a>
+        </ul>
+      </nav>
+
+      <section class="cont-2">
+        <p>
+          Lorem Ipsum is simply dummy text of the printing and typesetting
+          industry. Lorem Ipsum has been the industry's standard dummy text ever
+          since the 1500s, when an unknown printer took a galley of type and
+          scrambled it to make a type specimen book. It has survived not only
+          five centuries, but also the leap into electronic typesetting,
+          remaining essentially unchanged. It was popularised in the 1960s with
+          the release of Letraset sheets containing Lorem Ipsum passages, and
+          more recently with desktop publishing software like Aldus PageMaker
+          including versions of Lorem Ipsum.
+        </p>
+      </section>
+      <section class="cont-2">
+        <p>
+          Lorem Ipsum is simply dummy text of the printing and typesetting
+          industry. Lorem Ipsum has been the industry's standard dummy text ever
+          since the 1500s, when an unknown printer took a galley of type and
+          scrambled it to make a type specimen book. It has survived not only
+          five centuries, but also the leap into electronic typesetting,
+          remaining essentially unchanged. It was popularised in the 1960s with
+          the release of Letraset sheets containing Lorem Ipsum passages, and
+          more recently with desktop publishing software like Aldus PageMaker
+          including versions of Lorem Ipsum.
+        </p>
+      </section>
+      <section class="cont-2">
+        <p>
+          Lorem Ipsum is simply dummy text of the printing and typesetting
+          industry. Lorem Ipsum has been the industry's standard dummy text ever
+          since the 1500s, when an unknown printer took a galley of type and
+          scrambled it to make a type specimen book. It has survived not only
+          five centuries, but also the leap into electronic typesetting,
+          remaining essentially unchanged. It was popularised in the 1960s with
+          the release of Letraset sheets containing Lorem Ipsum passages, and
+          more recently with desktop publishing software like Aldus PageMaker
+          including versions of Lorem Ipsum.
+        </p>
+      </section>
+      <footer>
+        About my company
+      </footer>
+
+  </body>
+</html>
diff --git a/2-positioning/style.css b/2-positioning/style.css
@@ -0,0 +1,53 @@
+.header{
+    width: 100%;
+    background-color: black;
+    color: white;
+    font-size: 7px;
+    border-width: 3px;
+    border-style: solid;
+    border-color: #2ff60b;
+}
+
+.cont-p{
+    width: 200px;
+    border-width: 3px;
+    border-style: solid;
+    border-color: #1031f7;
+    position: fixed;
+    top: 49px;
+    left: 10px;
+}
+
+.indice{
+    color: #1031f7;
+    text-decoration: #1031f7;
+    font-size: 20px;
+
+}
+
+.cont-2{
+    width: 70%;
+
+    padding-left: 227px;
+    margin: 0;
+    display: inline-block;
+}
+
+.cont-2 p{
+    border-width: 3px;
+    border-style: solid;
+    border-color: red;
+    margin: 0px;
+}
+footer{
+    background-color: black;
+    width: 100%;
+    color: white;
+    font-size: 25px;
+    border-width: 3px;
+    border-style: solid;
+    border-color: #f4d944;
+}
+
+
+
diff --git a/5-flexbox/assets/img-super-heroe/fondo-2.jpg b/5-flexbox/assets/img-super-heroe/fondo-2.jpg
diff --git a/5-flexbox/assets/img-super-heroe/fondo-3.jpg b/5-flexbox/assets/img-super-heroe/fondo-3.jpg
diff --git a/5-flexbox/assets/img-super-heroe/fondo4.jpg b/5-flexbox/assets/img-super-heroe/fondo4.jpg
diff --git a/5-flexbox/assets/img-super-heroe/images.jpg b/5-flexbox/assets/img-super-heroe/images.jpg
diff --git a/5-flexbox/assets/img-super-heroe/tela-superheroes-marvel.jpg b/5-flexbox/assets/img-super-heroe/tela-superheroes-marvel.jpg
diff --git a/5-flexbox/assets/index.html b/5-flexbox/assets/index.html
@@ -6,28 +6,32 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
     <title>Document</title>
+    <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
     <h1>Super heroes</h1>
     <main>
-        <article>
+    <ul>
+        <li>
             <h2>Wolverine</h2>
             <div class="content">
-                <img src="assets/wolverine.png" alt="wolverine">
+                <img src="wolverine.png" alt="wolverine">
                 <p>
                     In the fictional universe of Marvel, Wolverine has regenerative powers that can heal any wound, no
                     matter how mortal it is, in addition that same power makes him immune to any disease on Earth and
                     some extraterrestrials. He also possesses superhuman strength, which while not comparable to that of
                     other superheroes like the Hulk, does surpass that of any human.
                 </p>
             </div>
+            <div class="btn">
             <button type="button" class="heroe-button" >More...</button>
-        </article>
-        <article>
+        </div>
+        </li>
+        <li>
             <h2>Spiderman</h2>
             <div class="content">
-                <img src="assets/spiderman.png" alt="spiderman">
+                <img src="spiderman.png" alt="spiderman">
                 <p>
                     After being bitten by a radioactive spider, he obtained the following superhuman powers, great
                     strength,
@@ -39,12 +43,14 @@ <h2>Spiderman</h2>
                     danger
                 </p>
             </div>
+            <div class="btn">
             <button type="button" class="heroe-button" >More...</button>
-        </article>
-        <article>
+        </div>
+        </li>
+        <li>
             <h2>Hulk</h2>
             <div class="content">
-                <img src="assets/hulk.png" alt="Hulk">
+                <img src="hulk.png" alt="Hulk">
                 <p>
                     His main power is his ability to increase his strength to practically unlimited levels while
                     increasing
@@ -53,23 +59,27 @@ <h2>Hulk</h2>
                     but he makes up for it with his intelligence).
                 </p>
             </div>
+            <div class="btn">
             <button type="button" class="heroe-button" >More...</button>
-        </article>
-        <article>
+        </div>
+        </li>
+        <li>
             <h2>Aquaman</h2>
             <div class="content">
-                <img src="./assets/aquaman.png" alt="Aquaman">
+                <img src="aquaman.png" alt="Aquaman">
                 <p>
                     Aquaman's most recognized power is the telepathic ability to communicate with marine life, which can
                     summon at great distances
                 </p>
             </div>
+            <div class="btn">
             <button type="button" class="heroe-button" >More...</button>
-        </article>
-        <article>
+        </div>
+        </li>
+        <li>
             <h2>Batman</h2>
             <div class="content">
-                <img src="./assets/batman.png" alt="Batman">
+                <img src="batman.png" alt="Batman">
                 <p>
                     The main features of Batman are summarized in "physical dexterity, deductive abilities and
                     obsession".
@@ -78,22 +88,27 @@ <h2>Batman</h2>
                     have given to the character.
                 </p>
             </div>
+            <div class="btn">
             <button type="button" class="heroe-button" >More...</button>
-        </article>
-        <article>
+        </div>
+        </li>
+        <li>
             <h2>Daredevil</h2>
             <div class="content">
-                <img src="assets/daredevil.png" alt="Daredevil">
+                <img src="daredevil.png" alt="Daredevil">
                 <p>
                     Having lost his sight, Daredevil's remaining four senses were augmented by radiation to superhuman
                     levels, in the accident he had as a child. Despite his blindness, he can "see" through a "sixth
                     sense"
                     that serves as a bat-like radar.
                 </p>
             </div>
+            <div class="btn">
             <button type="button" class="heroe-button" >More...</button>
-        </article>
-    </main>
+        </div>
+        </li>
+    </ul>
+</main>
 </body>
 
 </html>
diff --git a/5-flexbox/assets/style.css b/5-flexbox/assets/style.css
@@ -0,0 +1,45 @@
+h1{
+    text-align: center;
+    font-family: Arial, Helvetica, sans-serif;
+    color: black;
+    font-size: 49px;
+}
+main{
+    background-image: url(img-super-heroe/fondo4.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 100%;
+}
+
+.content {
+    display: flex;
+    flex-direction: row;
+}
+h2{
+    font-size: 39px;
+    color: #ed8210;
+}
+.btn{
+    display: flex; 
+    flex-direction: row-reverse;
+}
+.btn button{
+    margin: 0 37px;
+    width: 100px;
+    border-radius: 30px;
+    background-color: #e2ea0f;
+}
+li{
+    margin-bottom: 70px;
+}
+
+img{
+    width: 239px;
+    height: 203px
+}
+p{
+    font-size: 30px;
+    color: #aa8316;
+}
+