globant-ui · pfeldman · Nov 17, 2017 · Nov 17, 2017 · Nov 17, 2017 · Nov 17, 2017
diff --git a/00-HTML-CSS-basics/CSS Basics/css/normalize.css b/00-HTML-CSS-basics/CSS Basics/css/normalize.css
diff --git a/00-HTML-CSS-basics/CSS Basics/css/style.css b/00-HTML-CSS-basics/CSS Basics/css/style.css
@@ -0,0 +1,95 @@
+*
+{
+	/*font-size: 14px;*/
+	font-family: "Arial";
+}
+
+body
+{
+	background-color: #A4A4A4;
+}
+
+header, nav, aside, footer
+{
+	background-color: #00FF80;
+}
+
+header, footer
+{
+	text-align: center;
+}
+
+.header, .footer
+{
+	background-color: magenta;	/*SI EL NOMBRE DE LA CLASE TERMINA CON 'R', EL FONDO DEBE SER DE COLOR MAGENTA ¿COMO SE HARIA ESO?*/
+	width: 95%;
+	margin: 2.5%;
+}
+
+.navigation, .sidebar
+{
+	background-color: blue;		/*SI EL NOMBRE DE LA CLASE CONTIENE UNA 'A', EL FONDO DEBE SER DE COLOR AZUL ¿COMO SE HARIA ESO?*/
+	color: white;
+}
+
+.header
+{
+	font-size: 46px;
+	border: thick solid black;
+}
+
+h1
+{
+	display: inline;
+}
+
+.main
+{
+	margin: 2.5%;
+	width: 95%;
+}
+
+.footer
+{
+	font-size: 10px;
+}
+
+.content
+{
+	font-size: 14px; /*SI ESTA EN font-size EN EL SELECTOR UNIVERSAL, SE IGNORA ESTA LINEA ¿PORQUE?*/
+	display: inline-block;
+	/*position: absolute;*/ /*¿PORQUE SE ROMPE EL DISEÑO SI AGREGO ESTO ACA? AL SE inline-block SIN LOS MARGENES DEBERIA APARECER JUSTO AL LADO DE NAV BAR*/
+	height: 200px;
+	width: 80%;
+	margin-left: 10%;
+	margin-right: 1%;
+	background-color: orange;
+	padding: 1%;
+	 -webkit-box-sizing: border-box;
+     	-moz-box-sizing: border-box;
+          	box-sizing: border-box;
+}
+
+.navigation
+{
+	font-size: 12px;
+	display: inline-block;
+	position: absolute;
+	height: 200px;
+	width: 9%;
+}
+
+.sidebar
+{
+	font-size: 10px;
+	display: inline-block;
+	position: absolute;
+	height: 200px;
+	width: 9%;
+}
+
+ul
+{
+	list-style: none;
+	padding: 0px;
+}
diff --git a/00-HTML-CSS-basics/CSS Basics/index.html b/00-HTML-CSS-basics/CSS Basics/index.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html class="no-js" lang="">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <title></title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+        <link rel="manifest" href="site.webmanifest">
+        <link rel="apple-touch-icon" href="icon.png">
+        <!-- Place favicon.ico in the root directory -->
+
+        <link rel="stylesheet" href="css/normalize.css">
+        <link rel="stylesheet" href="css/style.css">
+    </head>
+    <body>
+        <!--[if lte IE 9]>
+            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
+        <![endif]-->
+
+
+
+        <!-- Add your site or application content here -->
+        <header class="header">
+            <h1>This is the Header</h1>
+        </header>
+        <div class="main">
+            <nav class="navigation">
+                <ul>
+                    <li>This is the Navigaion Bar</li>
+                </ul>
+            </nav>
+            <section class="content">
+                <h2>This is the Section Header</h2>
+                <p>This is the article</p>
+                <p>This is the section footer</p>
+            </section>
+            <aside class="sidebar">
+                <p>This is the sidebar</p>
+            </aside>
+        </div>
+        <footer class="footer">This is the Footer</footer>
+
+
+
+        <script src="js/vendor/modernizr-{{MODERNIZR_VERSION}}.min.js"></script>
+        <script src="https://code.jquery.com/jquery-{{JQUERY_VERSION}}.min.js" integrity="{{JQUERY_SRI_HASH}}" crossorigin="anonymous"></script>
+        <script>window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>')</script>
+        <script src="js/plugins.js"></script>
+        <script src="js/main.js"></script>
+
+        <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
+        <script>
+            window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
+            ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
+        </script>
+        <script src="https://www.google-analytics.com/analytics.js" async defer></script>
+    </body>
+</html>
diff --git a/00-HTML-CSS-basics/HTML Basics/Expenses.html b/00-HTML-CSS-basics/HTML Basics/Expenses.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Expenses</title>
+	</head>
+	<body>
+		<table>
+			<tr>
+				<td>Food</td>
+				<td>$5000</td>
+			</tr>
+			<tr>
+				<td>Electricity</td>
+				<td>$300</td>
+			</tr>
+			<tr>
+				<td>Cable TV and Internet</td>
+				<td>$1000</td>
+			</tr>
+			<tr>
+				<td>Petrol</td>
+				<td>$2000</td>
+			</tr>
+		</table>
+	</body>
+</html>
diff --git a/00-HTML-CSS-basics/HTML Basics/Media.html b/00-HTML-CSS-basics/HTML Basics/Media.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Media</title>
+</head>
+<body>
+
+	<img src="img.png" width="500px" alt="Logotipo de Google" title="Logotipo de Google">
+
+	<audio controls>
+		<source src="audio.mp3" type="audio/mpeg">
+	</audio>
+
+	<video controls autoplay>
+		<source src="video.mp4" type="video/mp4">
+	</video>
+
+</body>
+</html>
diff --git a/00-HTML-CSS-basics/HTML Basics/SignUp.html b/00-HTML-CSS-basics/HTML Basics/SignUp.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Sign Up</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="author" content="Leonel Signore">
+	<meta name="keywords" content="form, HTML">
+</head>
+<body>
+	<form>
+		<label for="fname">First Name</label>
+		<input required="" type="text" id="fname">
+		<br>
+		<br>
+		<label for="lname">Last Name</label>
+		<input required="" type="text" id="lname">
+		<br>
+		<br>
+		<label for="e-mail">E-Mail</label>
+		<input required="" type="email" id="e-mail">
+		<br>
+		<br>
+		<label for="birth">Birthday</label>
+		<input required="" type="date" id="birth">
+		<br>
+		<br>
+		<label>Favorite Sport</label>
+		<select>
+			<option value="no">Select One</option>
+			<option value="foot">Football</option>
+			<option value="basket">Basketball</option>
+			<option value="volley">Volleyball</option>
+			<option value="base">Baseball</option>
+		</select>
+		<br>
+		<br>
+		<label>Biography</label>
+		<textarea>Write something about you...</textarea>
+		<br>
+		<br>
+		<button type="submit">Send</button>
+		<button type="reset">Reset</button>
+	</form>
+</body>
+</html>
diff --git a/00-HTML-CSS-basics/HTML Basics/TodoList.html b/00-HTML-CSS-basics/HTML Basics/TodoList.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>My Todo List</title>
+	</head>
+	<body>
+		<header>
+			<h1>My Todo List</h1>
+			<ul>
+				<li>Laundry</li>
+				<li>Clean the Room</li>
+				<li>Cook for the Night</li>
+				<li>Check the e-mail</li>
+			</ul>
+		</header>
+	</body>
+</html>
diff --git a/00-HTML-CSS-basics/HTML Basics/audio.mp3 b/00-HTML-CSS-basics/HTML Basics/audio.mp3
diff --git a/00-HTML-CSS-basics/HTML Basics/img.png b/00-HTML-CSS-basics/HTML Basics/img.png
diff --git a/00-HTML-CSS-basics/HTML Basics/video.mp4 b/00-HTML-CSS-basics/HTML Basics/video.mp4
diff --git a/00-HTML-CSS-basics/Layout/Layout.html b/00-HTML-CSS-basics/Layout/Layout.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Layout</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+	<header>
+		<h1>Showcase</h1>
+		<p>
+		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+		</p>
+	</header>
+	<section class="container">
+		<div class="hovered">
+			<div><h2>Obelisk - Buenos Aires, Argentina</h2></div>
+			<img src="baires.jpg">
+		</div>
+		<div class="hovered">
+			<div><h2>London Eye and Big Ben - London, England</h2></div>
+			<img src="london.jpg">
+		</div>
+		<div class="hovered">
+			<div><h2>Monument of Independence, Mexico D.F, Mexico</h2></div>
+			<img src="mexico.jpg">
+		</div>
+		<div class="hovered">
+			<div><h2>Brooklyn Bridge, New York, United States</h2></div>
+			<img src="newyork.jpg">
+		</div>
+		<div class="hovered">
+			<div><h2>Eiffel Tower, Paris, France</h2></div>
+			<img src="paris.jpg">
+		</div>
+		<div class="hovered">
+			<div><h2>Colisuem, Rome, Italy</h2></div>
+			<img src="rome.jpg">
+		</div>	
+	</section>
+</body>
+</html>
diff --git a/00-HTML-CSS-basics/Layout/baires.jpg b/00-HTML-CSS-basics/Layout/baires.jpg
diff --git a/00-HTML-CSS-basics/Layout/css/main.css b/00-HTML-CSS-basics/Layout/css/main.css
@@ -0,0 +1,69 @@
+body
+{
+	background-color: #848484;
+}
+
+/* 										HEADER STYLES									*/
+h1
+{
+	display: inline-block;
+	margin-left: 1%;
+	width: 30%;
+	position: absolute;
+}
+
+p
+{
+	display: inline-block;
+	margin-left: 31%;
+	width: 50%;
+}
+
+/*									CONTEINER STYLES  								*/
+.container
+{
+	margin-top: 50px;
+}
+
+div
+{
+	width: 30%;
+	height: 300px;
+	padding: 1%;
+	float: left;
+
+}
+
+img
+{
+	width: 100%;
+	height: 100%;
+
+}
+
+.hovered div
+{
+	position: absolute;
+	padding: 0%;
+	visibility: hidden;
+}
+
+.hovered:hover img
+{
+	opacity: 0.2;
+	transition: opacity 0.3s;
+}
+
+.hovered:hover div
+{
+	visibility: visible;
+}
+
+h2
+{
+	font-size: 18px;
+	font-weight: bold;
+	color: black;
+	text-align: center;
+	margin-top: 40px;
+}