globant-ui · JuanAraneta · Apr 19, 2017 · Apr 20, 2017 · Apr 20, 2017 · Apr 22, 2017
diff --git a/00-HTML-CSS-basics/Media.html b/00-HTML-CSS-basics/Media.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Media examples</title>
+</head>
+<body>
+<h1>Video</h1>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/V6JcxAN5kXs" frameborder="0" allowfullscreen></iframe>
+<h1>Image</h1>
+<img src="lionel.jpg" alt="Messi" >
+<h1>Sound</h1>
+<audio controls>
+  <source src="AudioClip.mp3" type="audio/mp3">
+</audio>
+</body>
+</html>
diff --git a/00-HTML-CSS-basics/MyTodoList.html b/00-HTML-CSS-basics/MyTodoList.html
@@ -0,0 +1,13 @@
+<html>
+<head>
+	<title></title>
+</head>
+<body>
+<header>My todo list</header>
+<ul>
+  <li>Play tennis</li>
+  <li>Clean the car</li>
+  <li>Order a new computer</li>
+</ul>
+</body>
+</html>
diff --git a/00-HTML-CSS-basics/SingUp.html b/00-HTML-CSS-basics/SingUp.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="description" content="Bootcamp UI">
+  <meta name="keywords" content="HTML,CSS,JavaScript">
+  <meta name="viewport" content="width=device-width">
+</head>
+<style>
+form {
+    border: 3px solid #f1f1f1;
+}
+
+input[type=text], input[type=password], input[type=date] , input[type=email], input[type=hidden], input[type=textarea]   {
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: inline-block;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+}
+
+button {
+    background-color: #4CAF50;
+    color: white;
+    padding: 14px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+}
+
+button:hover {
+    opacity: 0.8;
+}
+
+.cancelbtn {
+    width: auto;
+    padding: 10px 18px;
+    background-color: #f44336;
+}
+
+.clearbtn {
+    width: auto;
+    padding: 10px 18px;
+    background-color: #0040FF;
+}
+
+.imgcontainer {
+    text-align: center;
+    margin: 24px 0 12px 0;
+}
+
+img.avatar {
+    width: 40%;
+    border-radius: 50%;
+}
+
+.container {
+    padding: 16px;
+}
+
+span.psw {
+    float: right;
+    padding-top: 16px;
+}
+@media screen and (max-width: 300px) {
+    span.psw {
+       display: block;
+       float: none;
+    }
+    .cancelbtn {
+       width: 100%;
+    }
+}
+</style>
+<body>
+
+<h2>Login Form</h2>
+
+<form action="/action_page.php">
+
+  <div class="container">
+    <label><b>First name</b></label>
+    <input type="text" placeholder="Enter First name" name="fname" required>
+
+    <label><b>Last name</b></label>
+    <input type="text" placeholder="Enter Last name" name="lname" required>
+
+    <label><b>Email</b></label>
+    <input type="email" placeholder="Enter email" name="email" required>
+
+    <label><b>Birthdate</b></label>
+    <input type="date" placeholder="Enter Birthdate" name="Birthdate" required>
+
+    <label><b>Favourite sport</b></label>
+    <input type="hidden" name="Favouritesport" list="Favouritesport">
+    <select>
+      <option value="Tennis">Tennis</option>
+      <option value="Soccer">Soccer</option>
+      <option value="Golf">Golf</option>
+      <option value="Basketball">Basketball</option>
+    </select>
+
+    <br><br><label><b>Give us a personal description</b></label>
+    <input type="textarea" placeholder="Who are you?" name="description" required>
+
+    <button type="submit">Login</button>
+    <input type="checkbox" checked="checked"> Remember me
+  </div>
+
+  <div class="container" style="background-color:#f1f1f1">
+    <button type="button" class="cancelbtn">Cancel</button>
+    <button type="button" class="clearbtn">Clear</button>
+    <span class="psw">Forgot <a href="#">password?</a></span>
+  </div>
+</form>
+
+</body>
+</html>
diff --git a/00-HTML-CSS-basics/expenses.html b/00-HTML-CSS-basics/expenses.html
@@ -0,0 +1,25 @@
+<html>
+<head>
+	<title>Expenses Mar2017</title>
+</head>
+<body>
+<table border="2px"> 
+          <tr>
+          	  <th>Description</th>
+          	  <th>Amount</th>	
+          </tr>
+          <tr>
+              <td>University</td>
+              <td>$4213</td>
+          </tr>
+          <tr>
+              <td>Medical Care</td>
+              <td>$4526</td>
+          </tr>
+          <tr>
+              <td>Gym</td>
+              <td>$456</td>
+          </tr>
+        </table>
+</body>
+</html>
diff --git a/00-HTML-CSS-basics/index.html b/00-HTML-CSS-basics/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <link href="style.css" rel="stylesheet">
+        <title></title>
+    </head>
+    <body>
+        <div id="header">
+            <header class="header"></header>
+            <p>HEADER</p>
+        </div>
+        <table>
+        <tr>
+          <td>
+            <div id="nav">
+                <nav class="navigation">
+                    <p>NAV</p>
+                </nav>
+            </div>
+          </td>
+          <td>
+            <div id="section">
+                <section class="content">SECTION
+                    <div>
+                        <header class="header">HEADER</header>
+                    </div>
+                    <div>
+                        <article>ARTICLE</article>
+                    </div>
+                    <div>
+                        <footer class="footer">FOOTER</footer>
+                    </div>
+                </section>
+            </div>
+          </td>
+          <td>
+            <div id="aside">
+                <aside class="sidebar">ASIDE</aside>
+            </div> 
+           </td>
+        </tr>
+        </table>
+        <div id="footer">
+            <footer class="footer">FOOTER</footer>
+        </div>
+    </body>
+</html>
diff --git a/00-HTML-CSS-basics/media/AudioClip.mp3 b/00-HTML-CSS-basics/media/AudioClip.mp3
diff --git a/00-HTML-CSS-basics/media/Lionel.jpg b/00-HTML-CSS-basics/media/Lionel.jpg
diff --git a/00-HTML-CSS-basics/media/mueble1.jpg b/00-HTML-CSS-basics/media/mueble1.jpg
diff --git a/00-HTML-CSS-basics/media/mueble2.jpg b/00-HTML-CSS-basics/media/mueble2.jpg
diff --git a/00-HTML-CSS-basics/media/mueble3.jpg b/00-HTML-CSS-basics/media/mueble3.jpg
diff --git a/00-HTML-CSS-basics/media/mueble4.jpg b/00-HTML-CSS-basics/media/mueble4.jpg
diff --git a/00-HTML-CSS-basics/media/mueble5.jpg b/00-HTML-CSS-basics/media/mueble5.jpg
diff --git a/00-HTML-CSS-basics/media/mueble6.jpg b/00-HTML-CSS-basics/media/mueble6.jpg
diff --git a/00-HTML-CSS-basics/prototype.css b/00-HTML-CSS-basics/prototype.css
@@ -0,0 +1,97 @@
+*, *:before, *:after {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+}
+.gallery-grid {
+	clear: both;
+  background: grey;
+  display: block;
+  float: left;
+  width: 100%;
+  padding: 8px;
+}
+.gallery-grid.columns {
+	margin-right: 0;
+}
+.one-third {
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3);
+  width: -ms-calc(33.3333% - 16px);
+  width: -moz-calc(33.3333% - 16px);
+  width: -webkit-calc(33.3333% - 16px);
+  width: calc(33.3333% - 16px);
+  margin: 8px;
+  height: auto;
+  position: relative;
+  float: left;
+}
+.two-third {
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3);
+  width: -ms-calc(33.3333% - 16px);
+  width: -moz-calc(33.3333% - 16px);
+  width: -webkit-calc(33.3333% - 16px);
+  width: calc(33.3333% - 16px);
+  margin: 8px;
+  height: auto;
+  position: relative;
+  float: left;
+}
+.one-third:last-of-type {
+  margin-right: 0;
+}
+.gallery-grid img {
+  width: 100%;
+  height: auto;
+  position: relative;
+  float: left;
+}
+.gallery-grid a {
+  display: block;
+}
+.screen {
+	background-color: rgba(0,0,0,0.5);
+	left: 0;
+	top: 0;
+	border-radius: 0;
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	opacity: 0;
+	z-index: 1000;
+  -webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
+      -o-transition: all 0.3s ease-in-out;
+        -ms-transition: all 0.3s ease-in-out;
+          transition: all 0.3s ease-in-out;
+}
+.screen:hover {
+  opacity: 1
+}
+.title {
+  color: #fff;
+  font-family: arial, helvetica, sans-serif;
+  font-weight: bold;
+  -webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
+      -o-transition: all 0.3s ease-in-out;
+        -ms-transition: all 0.3s ease-in-out;
+          transition: all 0.3s ease-in-out;
+  margin-left: -30px;
+}
+.screen:hover .title {
+  margin-left: 0;
+}
+p {
+  font-size: 2em;
+  padding: 5%;
+}
+.screen.fade-in .title {
+  margin-left: 0;
+}
+.cta {
+	clear: both;
+	font-weight: bold;
+	font-family: arial,helvetica, sans-serif;
+	display: block;
+	font-size: 2em;
+}