globant-ui · Crowxe · Feb 26, 2018 · Feb 27, 2018 · Feb 28, 2018 · Feb 28, 2018
diff --git a/00-HTML-CSS-basics/CSS-2.5-2.6/img/01.jpg b/00-HTML-CSS-basics/CSS-2.5-2.6/img/01.jpg
diff --git a/00-HTML-CSS-basics/CSS-2.5-2.6/img/02.jpg b/00-HTML-CSS-basics/CSS-2.5-2.6/img/02.jpg
diff --git a/00-HTML-CSS-basics/CSS-2.5-2.6/img/03.jpg b/00-HTML-CSS-basics/CSS-2.5-2.6/img/03.jpg
diff --git a/00-HTML-CSS-basics/CSS-2.5-2.6/img/04.jpg b/00-HTML-CSS-basics/CSS-2.5-2.6/img/04.jpg
diff --git a/00-HTML-CSS-basics/CSS-2.5-2.6/img/05.jpg b/00-HTML-CSS-basics/CSS-2.5-2.6/img/05.jpg
diff --git a/00-HTML-CSS-basics/CSS-2.5-2.6/img/06.jpg b/00-HTML-CSS-basics/CSS-2.5-2.6/img/06.jpg
diff --git a/00-HTML-CSS-basics/CSS-2.5-2.6/index.html b/00-HTML-CSS-basics/CSS-2.5-2.6/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS GRID LAYOUT</title>
+    <link rel="stylesheet" href="/C:\Users\jocg\Desktop\CSS-2.5-2.6-Jo\style.css">
+  </head>
+  <body>
+    <header>
+      <p class="parrafo">
+                Incredible Types is a curated collection and showcase of typography and design
+                from around the world. We currently have 354 pieces of inspirational design in
+                our showcase, from 365 creative studios from 46 different countries.
+                <br>
+                Follow us on
+                <a href="https://twitter.com/incredibletypes">
+                  <strong>Twitter</strong>
+                </a>
+                ,
+                <a href="https://www.facebook.com/IncredibleTypes">
+                  <strong>Facebook</strong>
+                </a>
+                and
+                <a href="https://ar.pinterest.com/?show_error=true">
+                  <strong>Pinterest</strong>
+                </a>
+                or subscribe to our
+                <a href="http://feeds.feedburner.com/IncredibleTypes">
+                  <strong>RSS feed</strong>
+                </a>
+              </p> </header>
+  <nav>
+    <h1>Showcase</h1>
+  </nav>
+      <div id="content">
+        <div class="one">
+        <p id="paraph">Descripcion de la imagen numero uno</p>
+        </div>
+        <div class="two">
+          <p id="paraph2">Descripcion de la imagen numero dos</p>
+        </div>
+        <div class="three">
+          <p id="paraph3">Descripcion de la imagen numero tres</p>
+        </div>
+        <div class="four">
+          <p id="paraph4">Descripcion de la imagen numero cuatro</p>
+        </div>
+        <div class="five">
+          <p id="paraph5">Descripcion de la imagen numero cinco</p>
+        </div>
+        <div class="six">
+          <p id="paraph6">Descripcion de la imagen numero seis</p>
+        </div>
+
+      </div>
+      <footer>@Showcase Bootcamp UI</footer>
+  </body>
+</html>
diff --git a/00-HTML-CSS-basics/CSS-2.5-2.6/style.css b/00-HTML-CSS-basics/CSS-2.5-2.6/style.css
@@ -0,0 +1,237 @@
+*{
+  box-sizing: border-box;
+}
+html{
+  height:100%;
+}
+h1{
+  color: black;
+  text-align: left;
+  font-family:sans-serif;
+  font-weight: bold;
+  font-size: 20px;
+  padding-left: 20px;
+}
+h2{
+  float: right;
+  color: black;
+  font-weight:normal;
+  font-style: oblique;
+  padding-left: 600px;
+  padding-right: 200px;
+}
+a{
+  color:black;
+}
+header{
+  height: 130px;
+  background-color: light-gray;
+  font-family: sans-serif;
+  color:black;
+  font-size: 17px;
+  padding-top: 50px;
+  padding-right: 20em;
+  padding-left: 30em;
+  text-align: left;
+}
+
+body{
+  color: #fff;
+  font-family: 'Nunito Semibold';
+  text-align: center;
+  background-color: lightgray;
+}
+
+#content{
+  padding-top: 10px;
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: minmax(150px, auto);
+  grid-gap: 20px;
+  display: grid;
+  max-width: 80%;
+  margin: 0 auto;
+}
+
+div p{
+  opacity: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+.one{
+  grid-column: 1 / 3;
+  grid-row: 1 / 3;
+  background-image: url(img/01.jpg);
+  background-size: cover;
+  background-position: top-right;
+  transition: all ease-in-out 200ms;
+  position: relative;
+  overflow:hidden;
+
+}
+.one:hover{
+  background-blend-mode:multiply;
+  background-color: gray;
+  background-position: center;
+}
+
+p#paraph{
+  font-size: 21px;
+  font-style: italic;
+  position: absolute;
+  margin-left: -70px;
+  transition: all ease-in-out 400ms;
+}
+.one:hover p#paraph{
+  opacity:0.75;
+  margin-left: 50px;
+}
+
+.two{
+  grid-column: 5 / 6;
+  grid-row: 1 / 3;
+  background-image: url(img/02.jpg);
+  background-size: cover;
+  background-position: top-right;
+  transition: all ease-in-out 400ms;
+  position: relative;
+  overflow:hidden;
+}
+.two:hover{
+  background-blend-mode:multiply;
+  background-color: gray;
+  background-position: center;
+  background-position: top;
+}
+p#paraph2{
+  font-size: 21px;
+  font-style: italic;
+  position: absolute;
+  margin-left: -70px;
+  transition: all ease-in-out 400ms;
+  text-align: left;
+  padding-right: 30%;
+}
+.two:hover p#paraph2{
+  opacity:0.75;
+  margin-left: 30px;
+}
+
+.three{
+  grid-column: 3 / 5;
+  grid-row: 1 / 3;
+  background-image: url(img/03.jpg);
+  background-size: cover;
+  background-position: top-right;
+  transition: all ease-in-out 200ms;
+  position: relative;
+  overflow:hidden;
+}
+.three:hover{
+  background-blend-mode:multiply;
+  background-color: gray;
+  background-position: center;
+  background-position: top;
+}
+p#paraph3{
+  font-size: 21px;
+  font-style: italic;
+  position: absolute;
+  margin-left: -70px;
+  transition: all ease-in-out 400ms;
+}
+.three:hover p#paraph3{
+  opacity:0.75;
+  margin-left: 50px;
+}
+.four{
+  grid-column: 4 / 6;
+  grid-row: 3 / 5;
+  background-image: url(img/04.jpg);
+  background-size: cover;
+  background-position: top-right;
+  transition: all ease-in-out 200ms;
+  position: relative;
+  overflow:hidden;
+}
+.four:hover{
+  background-blend-mode:multiply;
+  background-color: gray;
+  background-position: center;
+}
+p#paraph4{
+  font-size: 21px;
+  font-style: italic;
+  position: absolute;
+  margin-left: -70px;
+  transition: all ease-in-out 400ms;
+}
+.four:hover p#paraph4{
+  opacity:0.75;
+  margin-left: 50px;
+}
+.five{
+   grid-column: 6 / 7;
+   grid-row: 1 / 5;
+   background-image: url(img/05.jpg);
+   background-size: cover;
+   background-position: top-right;
+   transition: all ease-in-out 600ms;
+   position: relative;
+   overflow:hidden;
+}
+.five:hover{
+  background-blend-mode:multiply;
+  background-color: gray;
+  background-position: center;
+}
+p#paraph5{
+  font-size: 21px;
+  font-style: italic;
+  position: absolute;
+  margin-left: -70px;
+  transition: all ease-in-out 400ms;
+  padding-right: 40%;
+}
+.five:hover p#paraph5{
+  opacity:0.75;
+  margin-left: 40px;
+}
+.six{
+  grid-column:1 / 4;
+  grid-row: 3 / 5;
+  background-image: url(img/06.jpg);
+  background-size: cover;
+  background-position: top-right;
+  transition: all ease-in-out 400ms;
+  position: relative;
+  overflow:hidden;
+}
+.six:hover{
+  background-blend-mode:multiply;
+  background-color: gray;
+  background-position: center;
+}
+p#paraph6{
+  font-size: 21px;
+  font-style: italic;
+  position: absolute;
+  margin-left: -70px;
+  transition: all ease-in-out 400ms;
+}
+.six:hover p#paraph6{
+  opacity:0.75;
+  margin-left: 70px;
+}
+#content div{
+  border: 1 solid;
+  padding: 30px;
+}
+footer{
+  text-align:center;
+  font-family:sans-serif;
+  font-size: 15px;
+  padding-top: 40px;
+  color: black;
+  font-weight: bold;
+}
diff --git a/00-HTML-CSS-basics/CSS-2/index2.html b/00-HTML-CSS-basics/CSS-2/index2.html
@@ -0,0 +1,62 @@
+<!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="C:\Users\jocg\Desktop\Bootcamp-UI\CSS/normalize.css">
+
+        <link rel="stylesheet" href="C:/Users/jocg/Desktop/Bootcamp-UI/CSS/main.css">
+        <link rel="stylesheet" href="C:/Users/jocg/Desktop/Bootcamp-UI/CSS/style.css">
+
+    </head>
+
+    <body>
+              <header class="header">
+                    Header
+              </header>
+
+        <nav class="navigation">
+          nav
+        </nav>
+
+        <section class="content">
+          Section
+          <header>
+              HeaderSection
+          </header>
+          <article>
+            <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>
+          </article>
+          <footer>FooterSection</footer>
+        </section>
+        <aside class="sidebar">
+          Aside
+        </aside>
+
+        <footer class=”oh-no-inline-styles” style=background:red>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>
+
+        <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>