globant-ui · chemaso · May 9, 2018 · May 9, 2018 · May 9, 2018 · May 9, 2018
diff --git a/00-HTML-CSS-basics/.empty b/00-HTML-CSS-basics/.empty
diff --git a/00-HTML-CSS-basics/2-3Specificity.html b/00-HTML-CSS-basics/2-3Specificity.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html class="no-js" lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <title>2.1 CSS Practice</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="manifest" href="site.webmanifest">
+  <link rel="icon" href="sandia.png" type="image/gif" sizes="16x16">
+  <!-- Place favicon.ico in the root directory -->
+
+  <link rel="stylesheet" href="css/normalize.css">
+  <link rel="stylesheet" href="css/style-selectors.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]-->
+    <header class="header"> 
+      HEADER
+    </header>
+    <nav class="navigation">
+      NAVIGATION
+    </nav>
+    <section class="content">
+      SECTION
+      <header class="header-section">
+          HEADER
+      </header>
+      <article>
+          ARTICLE
+      </article>
+      <footer class="footer-section">
+        FOOTER SECTION
+      </footer>
+    </section>
+    <aside class="sidebar">
+      ASIDE
+    </aside>
+    <footer class="footer">
+      FOOTER
+    </footer>
+</body>
+</html>
diff --git a/00-HTML-CSS-basics/Exercise answers 2.3 apart 7.txt b/00-HTML-CSS-basics/Exercise answers 2.3 apart 7.txt
@@ -0,0 +1,11 @@
+Question:
+
+Imagine there is a declaration like class=�oh-no-inline-styles� style=�background:red� and you need to change the background to green without changing the inline style. How could you accomplish this?
+
+Answer:
+
+I will add the next code:
+
+.oh-no-inline-styles{
+  background-color: green !important;
+}
diff --git a/00-HTML-CSS-basics/Resources/labrador-barking-daniel_simon.mp3 b/00-HTML-CSS-basics/Resources/labrador-barking-daniel_simon.mp3
diff --git a/00-HTML-CSS-basics/accessibility.html b/00-HTML-CSS-basics/accessibility.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title id="title">Multimedia site</title>
+</head>
+<body>
+  <!-- Embedded multimedia resources -->
+  <header>
+    <h1>Multimedia Test on HTML5</h1>
+  </header>
+    <!-- Embedded Videos -->
+    <article>
+      <h2>Video Test</h2>
+        <video src="https://www.chemas.ga/wp-content/uploads/2018/03/Che_Marketing__Social_Portadayoutube.com_.mp4" width="620" controls>
+        <p>Sorry, your browser doesn't support embedded videos. Here is a <a href="https://www.chemas.ga/wp-content/uploads/2018/03/Che_Marketing__Social_Portadayoutube.com_.mp4">link to the video</a> instead.</p>
+        </video>
+      <!-- Embedded Audio -->
+      <h2>Audio Test</h2>
+        <audio src="Resources/labrador-barking-daniel_simon.mp3" controls autoplay loop>
+          <p>Sorry, your browser doesn't support embedded audio. Here is a <a href="Resources/labrador-barking-daniel_simon.mp3">link to the audio</a> instead.</p>
+        </audio>
+       <!-- Embedded Image -->
+      <h2>Image Test</h2>
+        <img src="https://www.chemas.ga/wp-content/uploads/2018/05/monitablet.png" alt="Desktop computer and tablet image">
+    </article>
+</body>
+</html>
diff --git a/00-HTML-CSS-basics/contact-form.html b/00-HTML-CSS-basics/contact-form.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Contact Us</title>
+</head>
+<body>
+  <header>
+  	 <!-- Contact form title and items -->
+    <h1 align="center">Contact Form:</h1>
+  </header>
+  <form action="/contact-control" method="post" align="center">
+    <div>
+      <label for="name">First Name:</label><br>
+      <input type="text" id="name" required>
+    </div><br>
+     <div>
+      <label for="last-name">Last Name:</label><br>
+      <input type="text" id="last-name" required>
+    </div><br>
+    <div>
+      <label for="mail">Email:</label><br>
+      <input type="email" id="mail" required>
+    </div><br>
+     <div>
+      <label for="birthday">Birthday:</label><br>
+      <input id="date" type="date" required>
+    </div><br>
+     <!-- Dropdown list for favorite sport -->
+    <div>
+      <label for="Favorite sport">Favorite Sport:</label><br>
+      <select name="Sports">
+        <option value="Futbol">Futbol</option>
+        <option value="Tennis">Tennis</option>
+        <option value="Golf">Golf</option>
+        <option value="Baseball">Baseball</option>
+      </select>
+    </div><br>
+    <div>
+      <label for="Bio">Add your Short Bio:</label><br>
+      <textarea id="Bio" required></textarea>
+    </div><br> 
+    <!-- Send form button and Reset form button -->
+     <div class="button">
+        <button type="submit">Send Message</button>
+        <button type="reset" value="Reset">Clear form</button>
+    </div>
+
+  </form>
+</body>
+</html>
diff --git a/00-HTML-CSS-basics/css/estilos.css b/00-HTML-CSS-basics/css/estilos.css
@@ -0,0 +1,111 @@
+* {
+	font-size: 14px;
+	font-family: "lato", "serif";
+	padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+.top-container {
+	font-size: 20px;
+	display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+.top-header {
+	padding-left: 10px;
+	margin:20px;
+	width: 30%;
+}
+.header-article {
+	margin: 20px;
+	width: 60%;
+}
+p {
+  font-size: 1.1rem;
+}
+strong {
+	font-size: 1.2rem;
+}
+
+.center-container {
+	box-sizing: content-box;
+	margin: 10px;
+	display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex; 
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+	text-align: center;
+	border-radius: 15px;
+}
+.bottom-container {
+	box-sizing: content-box;
+	margin: 10px;
+	display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+	color: orange;
+	background-color: #666666;
+	color:white;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	border-radius: 15px;
+	padding-top: 30px; 
+	padding-bottom: 30px;
+}
+.side-navigation {
+	background-color: #939393;
+	padding-top: 168px; 
+	padding-bottom: 168px;
+	color: white;
+	width: 20%;
+	margin-right: 10px;
+	border-radius: 15px;
+}
+.center-section {
+	background-color: #666666;
+	color: white;
+	width: 60%;
+	border-radius: 15px;
+}
+.aside-left {
+	background-color: #939393;
+	padding-top: 168px; 
+	padding-bottom: 168px;
+	color: white;
+	width: 20%;
+	margin-left: 10px;
+	border-radius: 15px;
+}
+.section-header {
+	background-color: #999999;
+	color: white;
+	margin: 10px;
+	padding-top: 15px; 
+	padding-bottom: 15px;
+	border-radius: 15px;
+}
+.section-article {
+	background-color: #999999;
+	padding-top: 65px; 
+	padding-bottom: 65px;
+	color: white;
+	margin: 10px;
+	border-radius: 15px;
+}
+.section-footer {
+	background-color: #999999;
+	padding-top: 15px; 
+	padding-bottom: 15px;
+	color: white;
+	margin: 10px;
+	border-radius: 15px;
+}
+.bottom-footer {
+	color:white;
+	align-items: center;
+	text-align: center;
+	border-radius: 15px;
+}