tinchoaranda05 · tinchoaranda05 · Apr 23, 2017 · Apr 23, 2017 · Apr 23, 2017 · Apr 23, 2017
diff --git a/00-HTML-CSS-basics/imagen1.jpg b/00-HTML-CSS-basics/imagen1.jpg
diff --git a/00-HTML-CSS-basics/imagen2.jpg b/00-HTML-CSS-basics/imagen2.jpg
diff --git a/00-HTML-CSS-basics/imagen3.jpg b/00-HTML-CSS-basics/imagen3.jpg
diff --git a/00-HTML-CSS-basics/imagen4.jpg b/00-HTML-CSS-basics/imagen4.jpg
diff --git a/00-HTML-CSS-basics/imagen5.jpg b/00-HTML-CSS-basics/imagen5.jpg
diff --git a/00-HTML-CSS-basics/imagen6.jpg b/00-HTML-CSS-basics/imagen6.jpg
diff --git a/00-HTML-CSS-basics/layout.css b/00-HTML-CSS-basics/layout.css
@@ -0,0 +1,107 @@
+*, *:before, *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+html {
+  font: 100%/1.5 "Open Sans", sans-serif;
+  font-weight: 400;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+@media (min-width: 40rem) {
+  html { font-size: 112%; }
+}
+
+@media (min-width: 64rem) {
+  html { font-size: 120%; }
+}
+
+body {
+  background-color: #ffffff;
+  color: #555;
+}
+
+.container {
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+  display: block;
+  position: relative;
+
+}
+
+
+.column { margin-bottom: 1.5rem; }
+
+@media (min-width: 40rem) {
+  .column {
+    float: left;
+    margin: 10;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .column.full { width: 100%; }
+  .column.two-thirds { width: 66.7%; }
+  .column.half { width: 50%; }
+  .column.third { width: 33.3%; }
+  .column.fourth { width: 25%; }
+  .column.flow-opposite { float: right; }
+}
+
+.row {
+  margin-right: -15px;
+  margin-left: -15px;
+}
+
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  display: table;
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+.clearfix {
+  *zoom: 1;
+}
+
+img {
+  width: 100%;
+  max-width: 450px;
+  display: block;
+}
+
+/* Can't make the screen just for one image at time. Need to figurate out how to
+change that property and I think thats it. */
+
+
+/* fixed.. ish.. I left the new box's width exactly as its image but not 
+with image's height. */
+
+.screen { 
+  background-color: rgba(0,0,0,0.5);
+  position: absolute;
+  width: 100%;
+  max-width: 380px;
+  opacity: 0;
+  z-index: 1000;
+  transition: all 0.9s ease-in-out;
+  display: block;
+  color: #d3d3d3;
+}
+.column:hover .screen{
+  opacity: 1;
+}
+
+a {
+  color: black;
+  text-decoration: none;
+  font-weight: bold;
+}
diff --git a/00-HTML-CSS-basics/layout.html b/00-HTML-CSS-basics/layout.html
@@ -0,0 +1,111 @@
+<!doctype html>
+
+<html lang="en">
+	<head>
+	  <meta charset="utf-8">
+
+	  <title>Topic 00</title>  <!-- forgot to upload before. web in progress. Need to finish the hover thing and I'm all set. Hope it's fine! !-->
+	  <meta name="description" content="Exercises">
+	  <meta name="author" content="Martin Aranda">
+	  <meta name="viewport" content="width=device-width, initial-scale=1">
+	  <title>Bootcamp Globant</title>
+	  <link href="normalize.css" rel="stylesheet">
+	  <link href="layout.css" rel="stylesheet">
+	</head>
+
+	<body>
+		<header>
+			<div class="container">
+				<div class="row clearfix">
+					<div class="column third">
+						<h3>Showcase</h3>
+					</div>
+					<div class="column two-thirds">
+					<p>Incredible types is a curated collection and showcase of outstanding typography and design from around the world. We currently have 354 pieces of inspirational design in our showcase, from 365 creatives and studios from 46 different countries.</p>
+					<p>Follow us on <a href="#" target="_blank">Twitter</a>, <a href="#" target="_blank">Facebook</a> and <a href="#" target="_blank">Pinterest</a> or subscribe to our <a href="#" target="_blank">RSS Feed</a></p>
+					</div>
+				</div>
+			</div>
+		</header>
+		<section>
+			<div class="container">
+				<div class="row clearfix">
+					<article class="column third">
+						<div class="screen">
+					        <p>
+					          Computadoras mac al mejor precio!
+					        </p>
+					    </div>
+					    <a href="#" target="_blank">
+					    	<img class="large" src="imagen1.jpg" alt="imagen mac" />
+					    </a>
+					</article>
+					<article class="column third">
+						<div class="screen">
+					        <p>
+					          teclados mac importados!
+					        </p>
+					    </div>
+					    <a href="#" target="_blank">
+							<img class="large" src="imagen2.jpg" alt="teclado mac" />
+						</a>
+					</article>
+					<article class="column third">
+						<div class="screen">
+					        <p>
+					          iPhones 4, 5 ,6 y 7!
+					        </p>
+					    </div>
+					    <a href="#" target="_blank">
+							<img class="large" src="imagen3.jpg" alt="iphone" />
+						</a>
+					</article>
+				</div>
+				<div class="row clearfix">
+					<article class="column third">
+						<div class="screen">
+					        <p>
+					          baterias samsung en oferta!
+					        </p>
+					    </div>
+					    <a href="#" target="_blank">
+							<img class="large" src="imagen4.jpg" alt="baterias samsung" />
+						</a>
+					</article>
+					<article class="column third">
+						<div class="screen">
+					        <p>
+					          Restauradores de sistema!
+					        </p>
+					    </div>
+					    <a href="#" target="_blank">
+							<img class="large" src="imagen5.jpg" alt="pendrive comun" />
+						</a>
+					</article>
+					<article class="column third">
+						<div class="screen">
+					        <p>
+					          Pendrives apple 500GB y 1TB!
+					        </p>
+					    </div>
+					    <a href="#" target="_blank">
+							<img class="large" src="imagen6.jpg" alt="pendrive apple" />
+						</a>
+					</article>
+				</div>
+			</div>
+		</section>
+	</body>
+</html>
+
+
+
+
+
+
+
+
+
+
+
+