galias11 · grercoli · Oct 12, 2018 · Oct 12, 2018 · Oct 12, 2018 · Oct 12, 2018
diff --git a/00-HTML-CSS-basics/README.md b/00-HTML-CSS-basics/README.md
@@ -0,0 +1,22 @@
+## How could you add weight to the global font definition to win over the classes added by point 3?
+
+I could use something like this:
+```
+* {
+	font-weight: bold;
+}
+```
+I also could add !important to the end of property value (but it's not recommended as possible to use), like this:
+```
+html {
+	font-weight: bold!important;
+}
+```
+## 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?
+
+Inline styles always override styles written in css files, so here we can use !important:
+```
+oh-no-inline-styles {
+	background: green!important;
+}
+```
diff --git a/00-HTML-CSS-basics/basics-css.html b/00-HTML-CSS-basics/basics-css.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html class="no-js" lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <title>Basics CSS</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">
+  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">  
+  <!-- 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">
+    <div>
+      <h1>Welcome to my site</h1>
+    </div>
+  </header>
+
+  <main class="clearfix">
+    <nav class="navigation">
+      <h2>Main Menu</h2>
+      <a href="#">Page N°1</a>
+      <br>
+      <a href="#">Page N°2</a>
+      <br>
+      <a href="#">Page N°3</a>
+      <br>
+      <a href="#">Page N°4</a>
+      <br>
+      <a href="#">Page N°5</a>
+    </nav><!-- End nav ".main-nav"
+
+ --><section class="content">
+      <header>
+        <h2>My Blogs</h2>
+      </header>
+      <article>
+        <h3>Blog N°1</h3>
+        <div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed similique, minus cum reiciendis ut incidunt odit ea dolor possimus tempora. Eligendi ipsa qui, cumque odio magnam nam, iusto pariatur veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed similique, minus cum reiciendis ut incidunt odit ea dolor possimus tempora. Eligendi ipsa qui, cumque odio magnam nam, iusto pariatur veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed similique, minus cum reiciendis ut incidunt odit ea dolor possimus tempora. Eligendi ipsa qui, cumque odio magnam nam, iusto pariatur veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed similique, minus cum reiciendis ut incidunt odit ea dolor possimus tempora. Eligendi ipsa qui, cumque odio magnam nam, iusto pariatur veniam.Sed similique, minus cum reiciendis ut incidunt odit ea dolor possimus tempora. Eligendi ipsa qui, cumque odio magnam nam, iusto pariatur veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed similique, minus cum reiciendis ut incidunt odit ea dolor possimus tempora. Eligendi ipsa qui, cumque odio magnam nam, iusto pariatur veniam.</p>
+        </div>
+      </article>
+      <footer>
+
+      </footer>
+    </section><!-- End section ".main-section"
+
+ --><aside class="sidebar">
+      <h2>More Information</h2>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint eius, error quod ex, velit, sunt eum ea cupiditate aut aliquam molestiae omnis eaque, necessitatibus eos distinctio vel quos blanditiis explicabo.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint eius, error quod ex, velit, sunt eum ea cupiditate aut aliquam molestiae omnis eaque, necessitatibus eos distinctio vel quos blanditiis explicabo.</p>
+    </aside>
+
+  </main> <!-- .container -->
+
+
+  <footer class="footer">
+      <p class="copyright">All rights reserved &copy;. My Blog 2018</p>
+  </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/css/mock-up.css b/00-HTML-CSS-basics/css/mock-up.css
@@ -0,0 +1,144 @@
+/** GLOBAL **/
+/* apply a natural box layout model to all elements, but allowing components to change */
+html {
+  box-sizing: border-box;
+  font-family: 'Roboto', sans-serif;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+ul {
+	list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+	margin: 0 auto;
+	width: 98%;
+}
+
+/** HELPER CLASSES**/
+
+.clearfix:before,
+.clearfix:after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+}
+
+.clearfix:after {
+    clear: both;
+}
+
+/** HEADER **/
+
+.introduction {
+	margin-bottom: 60px;
+}
+
+.site-title {
+	float: left;
+	font-weight: bold;
+	padding-left: 20px;
+	width: 30%;
+}
+
+.site-information {
+	float: right;
+	padding: 0 200px 0 20px;
+	width: 70%;
+}
+
+@media all and (max-width: 768px) {
+    .site-title {
+		float: none;
+	}
+
+    .site-information {
+        float: none;
+        width: 100%;
+        padding: 0 20px;
+    }
+}
+
+.site-information p span {
+	font-weight: bold;
+}
+
+/** ALBUMS **/
+
+.albums-list li {
+	float: left;
+	padding: 10px;
+	width: 33.3%;
+}
+
+@media all and (max-width: 600px){
+	.albums-list li {
+        width: 100%;
+    }
+}
+
+@media all and (max-width: 1020px) and (min-width: 600px){
+	.albums-list li {
+        width: 50%;
+    }
+}
+
+.album {
+	position: relative;
+}
+
+.album img {
+	filter: gray;
+	-moz-filter: grayscale(1);
+	-ms-filter: grayscale(1);
+    -webkit-filter: grayscale(1);
+    -moz-transition: all .5s ease-in-out;
+    -ms-transition: all .5s ease-in-out;
+    -webkit-transition: all .5s ease-in-out;
+}
+
+.screen {
+	background-color: rgba(0,0,0,0.5);
+	left: 0;
+	top: 0;
+	height: 30%;
+	width: 100%;
+	position: absolute;
+	opacity: 0;
+	z-index: 1000;
+  	-webkit-transition: all .3s ease-in-out;
+    -moz-transition: all .3s ease-in-out;
+    -ms-transition: all .3s ease-in-out;
+    transition: all .3s ease-in-out;
+}
+
+.album a:hover .screen,
+.album a:hover img {
+	opacity: 1;
+	-moz-filter: grayscale(0);
+	-ms-filter: grayscale(0);
+	-webkit-filter: grayscale(0);
+}
+
+.title {
+	color: #fff;
+	font-size: 16px;
+  	font-weight: bold;
+  	margin-left: 10px;
+  	-webkit-transition: all .3s ease-in-out;
+    -moz-transition: all .3s ease-in-out;
+    -ms-transition: all .3s ease-in-out;
+    transition: all .3s ease-in-out;
+}
+
+.album img {
+	width: 100%;
+}
+
+