galias11 · lazcanogaston · Oct 12, 2018 · Oct 16, 2018 · Oct 16, 2018 · Oct 16, 2018
diff --git a/00-HTML-CSS-basics/topic 0/expensesTable.html b/00-HTML-CSS-basics/topic 0/expensesTable.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8"> 
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>Expenses table</title>
+</head>
+<body>
+	<header>
+		<h2>Expenses table</h2>
+	</header>
+	<section class="main">
+		<table border="1" bgcolor="#C9EA89" width="300" > <!-- I should use css with this atributes-->
+			<caption align="top">EXPENSES</caption>
+			<tr valign="middle" >
+				<th>article</th>
+				<th>price</th>
+			</tr>
+			<tr>
+				<td>article 1</td>
+				<td>300</td>
+			</tr>
+			<tr>
+				<td>article 2</td>
+				<td>3000</td>
+			</tr>
+			<tr>
+				<td>article 3</td>
+				<td>100</td>
+			</tr>
+		</table>
+
+
+	</section>
+
+</body>
+</html>
diff --git a/00-HTML-CSS-basics/topic 0/formulario.html b/00-HTML-CSS-basics/topic 0/formulario.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" > 
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta http-equiv="X-UA-Compatible" content="ie=edge">
+		<title>sign-up</title>
+	</head>
+	<body>
+
+		<section class="form"> 
+			<h2>SIGN UP</h2>
+			<form action="" method="GET">
+
+				<label for="name">Nombre:</label>
+				<input type="text" name="fname" id="name" placeholder="Ingrese su nombre" required>
+				<br>
+				<label for="surname">Apellido:</label>
+				<input type="text" name="lname" id="surname" placeholder="Ingrese su apellido" required>
+				<br>
+				<label for="mail">Mail:</label>
+				<input type="email" name="email" id="mail" placeholder="ej: nombre@gmail.com" required>
+				<br>
+				<label for="bday">Fecha de nacimiento:</label>
+				<input type="date" name="bday" id="bday" min="2000-01-01" required>
+				<br>
+				<label for="sport">Deporte favorito:</label>
+				<select name="sport" id="sport" >
+					<option value="futbol">Futbol</option>
+					<option value="basquet">Basquet</option>	
+					<option value="golf">Golf</option>
+					<option value="natacion">Natacion</option>
+				</select>
+				<br>
+				<!--<label for="bio">Descripcion</label>
+				<input type="text" name="bio" id="bio" maxlength="200" placeholder="Ingrese una descripcion."> -->
+				<label for="bio">Descripcion</label>
+				<br>
+				<textarea name="bio" id="bio" cols="30" rows="10"></textarea>
+				<br>
+				<button type="submit">Enviar</button>
+				<p>  </p>
+				<button type="reset">Reestablecer</button>
+			</form>
+		</section>
+	</body>
+</html>
+
diff --git a/00-HTML-CSS-basics/topic 0/index.html b/00-HTML-CSS-basics/topic 0/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="shortcut icon" type="image/x-icon" href="media/simpsons.ico">
+    <link rel="stylesheet" type="text/css" href="styles-css/normalize.css">
+    <link rel="stylesheet" type="text/css" href="styles-css/style.css">
+    <title>index</title>
+</head>
+<body class="body">
+    <header class="header">
+        <h1>TITLE</h1>   
+    </header>
+    <nav class="navegation">
+        <ul>
+            <li>inicio</li>
+            <li>temporada 1</li>
+            <li>temporada 2</li>
+            <li>temporada 3</li>
+        </ul>
+    </nav>
+    <section class="content">
+        <header>
+            <h2>TEMPORADAS</h2>
+        </header>
+        <section class="articles">
+            <h2>Inicio</h2>
+            <article> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos veritatis eveniet maiores numquam est ullam fuga sequi quaerat. Repudiandae error aliquam unde assumenda voluptatibus atque cumque ipsum, reprehenderit ut itaque!</p></article>
+            <h2>Temporada 1</h2>
+            <article> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos veritatis eveniet maiores numquam est ullam fuga sequi quaerat. Repudiandae error aliquam unde assumenda voluptatibus atque cumque ipsum, reprehenderit ut itaque!</p></article>
+            <h2>Temporada 2</h2>
+            <article> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos veritatis eveniet maiores numquam est ullam fuga sequi quaerat. Repudiandae error aliquam unde assumenda voluptatibus atque cumque ipsum, reprehenderit ut itaque!</p></article>
+            <h2>Temporada 3</h2>
+            <article> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos veritatis eveniet maiores numquam est ullam fuga sequi quaerat. Repudiandae error aliquam unde assumenda voluptatibus atque cumque ipsum, reprehenderit ut itaque!</p></article>
+        </section>
+        <footer><p>footer</p></footer>
+    </section>
+    <aside class="sidebar">  <p>lorem  Lo beatae commodi consectetur aspernatur necessitatibus atque eveniet hic eum officia sequi iusto temporibus, veniam magni explicabo repellat pariatur eaque quae. Magnam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae quaerat accusamus officia ad porro! Officiis deleniti tempora voluptate earum neque quas dolorum, doloremque alias quod aliquid sapiente. Facilis, ducimus. Sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis temporibus non, quae repellat id dignissimos eveniet facere laborum nesciunt asperiores harum beatae perspiciatis vel, maxime ea voluptatum sint, excepturi illum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus perspiciatis dolore quis accusantium, facilis deleniti blanditiis aspernatur ipsum quod. Dolorem voluptatem similique reiciendis eius? Harum consectetur corporis placeat velit modi?    Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus corporis quos architecto vero possimus nemo libero est! Ea fugit maiores voluptas rerum repellendus. Ut voluptatibus, hic eligendi ipsa quos cupiditate? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos veritatis eveniet maiores numquam est ullam fuga sequi quaerat. Repudiandae error aliquam unde assumenda voluptatibus atque cumque ipsum,m  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error voluptatibus mollitia, consequatur accusantium consectetur iure similique nisi aspernatur at unde enim amet aperiam nemo earum quas minus cupiditate dolorum eos. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae beatae commodi consectetur aspernatur necessitatibus atque eveniet hic eum officia sequi iusto temporibus, veniam magni explicabo repellat pariatur eaque quae. Magnam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae quaerat accusamus officia ad porro! Officiis deleniti tempora voluptate earum neque quas dolorum, doloremque alias quod aliquid sapiente. Facilis, ducimus. Sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis temporibus non, quae repellat id dignissimos eveniet facere laborum nesciunt asperiores harum beatae perspiciatis vel, maxime ea voluptatum sint, excepturi illum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus perspiciatis dolore quis accusantium, facilis deleniti blanditiis aspernatur ipsum quod. Dolorem voluptatem similique reiciendis eius? Harum consectetur corporis placeat velit modi?    Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus corporis quos architecto vero possimus nemo libero est! Ea fugit maiores voluptas rerum repellendus. Ut voluptatibus, hic eligendi ipsa quos cupiditate? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos veritatis eveniet maiores numquam est ullam fuga sequi quaerat. Repudiandae error aliquam unde assumenda voluptatibus atque cumque ipsum, reprehenderit ut ita reprehenderit ut itaque!</p>
+    </aside>
+    <footer class="footer"> <p>Autor: Lazcano Gastón 12/10/2018</p> </footer>
+
+</body>
+</html>
diff --git a/00-HTML-CSS-basics/topic 0/layout.html b/00-HTML-CSS-basics/topic 0/layout.html
@@ -0,0 +1,90 @@
+<!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">
+    <meta name="author" content="Lazcano Gaston"> 
+    <meta name="keywords" content="landscape,landscapes,views">
+    <title>landscapes</title>
+
+  <link rel="stylesheet" type="text/css" href="styles-css/normalize.css" >
+  <link rel="stylesheet" type="text/css"  href="styles-css/style-layout.css" >
+
+
+
+</head>
+<body>
+
+  <header>
+    <h1>LANDSCAPES</h1>
+  </header>
+
+  <section class="clearfix container">
+
+    <article>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor nesciunt voluptate qui repudiandae. Corporis deleniti aliquam molestiae consequatur iusto. At voluptate quasi aperiam ducimus corrupti, exercitationem ad pariatur accusamus similique. </p>
+    </article>
+
+    <div class="row">
+        <div class="column third">
+            <img src="media/landscape1.jpg" alt="landscape image" title="landscape">
+            <div class="column text">
+                <h3>Image</h3>
+                <p>description</p>
+            </div>
+        </div>
+
+        <div class="column third">
+            <img src="media/landscape2.jpg" alt="landscape image" title="landscape">
+            <div class="column text">
+                <h3>Image</h3>
+                <p>description</p>
+            </div>
+        </div>
+
+        <div class="column third">
+            <img src="media/landscape3.jpg" alt="landscape image" title="landscape">
+            <div class="column text">
+                <h3>Image</h3>
+                <p>description</p>
+            </div>
+        </div>
+
+    </div>
+
+    <div class="row">
+        <div class="column third">
+            <img src="media/landscape4.jpg" alt="landscape image" title="landscape">
+            <div class="column text">
+                <h3>Image</h3>
+                <p>description</p>
+            </div>
+        </div>
+
+        <div class="column third">
+            <img src="media/landscape1.jpg" alt="landscape image" title="landscape">
+            <div class="column text">
+                <h3>Image</h3>
+                <p>description</p>
+            </div>
+        </div>
+
+        <div class="column third">
+            <img src="media/landscape2.jpg" alt="landscape image" title="landscape">
+            <div class="column text">
+                <h3>Image</h3>
+                <p>description</p>
+            </div>
+        </div>
+
+    </div>
+
+
+  </section>
+
+  <footer>
+    <p>Gaston Lazcano 2018</p>
+  </footer>
+
+</html>
diff --git a/00-HTML-CSS-basics/topic 0/media/audioSimpsons.ogg b/00-HTML-CSS-basics/topic 0/media/audioSimpsons.ogg
diff --git a/00-HTML-CSS-basics/topic 0/media/landscape1.jpg b/00-HTML-CSS-basics/topic 0/media/landscape1.jpg
diff --git a/00-HTML-CSS-basics/topic 0/media/landscape2.jpg b/00-HTML-CSS-basics/topic 0/media/landscape2.jpg
diff --git a/00-HTML-CSS-basics/topic 0/media/landscape3.jpg b/00-HTML-CSS-basics/topic 0/media/landscape3.jpg
diff --git a/00-HTML-CSS-basics/topic 0/media/landscape4.jpg b/00-HTML-CSS-basics/topic 0/media/landscape4.jpg
diff --git a/00-HTML-CSS-basics/topic 0/media/simpsons.jpg b/00-HTML-CSS-basics/topic 0/media/simpsons.jpg
diff --git a/00-HTML-CSS-basics/topic 0/media/videoSimpsons.mp4 b/00-HTML-CSS-basics/topic 0/media/videoSimpsons.mp4
diff --git a/00-HTML-CSS-basics/topic 0/multimedia.html b/00-HTML-CSS-basics/topic 0/multimedia.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8"> 
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta http-equiv="X-UA-Compatible" content="ie=edge">
+		<title>multimedia</title>
+
+	</head>
+
+	<body>
+		<header>
+			<h1>LOS SIMPSONS</h1>
+		</header>
+		<section>
+			<div>
+
+				<img src="media/simpsons.jpg" alt="imagen de Los Simpsons" title="Los Simpsons">
+				<img src="https://www.formulatv.com/images/series/posters/000/33/1_m3.jpg" alt="imagen de Los Simpsons" title="Los Simpsons">
+			</div>
+
+			<div>
+				<audio src="media/audioSimpsons.ogg" controls>
+
+					Your browser does not support the <code>audio</code> element.  <!--if thr browser doesn't recognize the audio, with this line, it works-->
+				</audio>
+				<p>puede acceder a la transcripcion	del audio haciendo click <a href="trans.html">aqui</a></p> <!--I don´t prepare the translation-->
+			</div>
+			<div>
+				<!--<video src="media/videoSimpsons.mp4"  poster="multimedia/simpsons.jpg" controls>  it can be like this, but it's better if I do it as it is in the next line because if the browser doesn't support the video type(.ogg, .mp4) I can write different alternatives with <source> 	
+				-->
+				<video poster="media/simpsons.jpg" controls>
+					<source src="media/videoSimpsons.mp4" type= "video/mp4" >  
+					Your browser does not support the <code>video</code> element. <!--if i don't write this line, it doesn't works in mozilla-->
+				</video>
+			</div>
+		</section>
+
+	</body>
+</html>
+
+