Topic1

00-HTML-CSS-basics/ownGridSystem.css

@@ -0,0 +1,144 @@
+
+.grid-container {
+        width : 100%;
+        max-width : 1300px; 
+        padding-right: 15px;
+	    padding-left: 15px;
+	    margin-right: auto;
+	    margin-left: auto;
+    }
+
+.grid-container *{
+        box-sizing: border-box; 
+    }
+
+    .outline, .outline *{
+        outline: 1px solid red;
+    }
+
+.row:before, 
+    .row:after {
+        content:"";
+        display: table ;
+         clear:both;
+    }
+
+[class*='col-'] {
+        float: left;
+        min-height: 1px; 
+        padding: 12px;
+    }
+
+.col-1{
+        width: 16.66%; 
+    }
+.col-2{
+        width: 33.33%; 
+    }
+.col-3{
+        width: 50%; 
+    }
+.col-4{
+        width: 66.664%;
+    }
+.col-5{
+        width: 83.33%;
+    }
+.col-6{
+        width: 100%;
+    }
+
+.screen{
+	background-color: rgba(0,0,0,0.5);
+    border-radius: 0;
+    height: 200px;
+    width: 400px;
+    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-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;
+    padding-left: 20px;
+    margin-left: -20px;
+}
+.screen:hover .title {
+  margin-left: 0;
+}
+p {
+    display: block;
+    -webkit-margin-before: 1em;
+    -webkit-margin-after: 1em;
+    -webkit-margin-start: 0px;
+    -webkit-margin-end: 0px;
+}
+.screen.fade-in .title {
+  margin-left: 0;
+}
+.screen.fade-in:hover {
+}
+
+/* Responsive Grid */
+@media all and (max-width:800px){
+        .col-1{ 
+        	width: 33.33%;    
+        }
+        .col-2{ 
+        	width: 50%;        
+        }
+        .col-3{ 
+        	width: 83.33%;    
+        }
+        .col-4{ 
+        	width: 100%;
+        }
+        .col-5{ 
+        	width: 100%;    
+        }
+        .col-6{ 
+        	width: 100%;      
+        }
+
+        .row .col-2:last-of-type{
+            width: 100%; 
+        }
+
+        .row .col-5 ~ .col-1{
+            width: 100%; 
+        }
+    }
+
+@media all and (max-width:650px){
+        .col-1{ 
+        	width: 50%;        
+        }
+        .col-2{ 
+        	width: 100%;    
+        }
+        .col-3{ 
+        	width: 100%;    
+        }
+        .col-4{ 
+        	width: 100%;    
+        }
+        .col-5{ 
+        	width: 100%;    
+        }
+        .col-6{ 
+        	width: 100%;      
+        }
+    }

00-HTML-CSS-basics/style.css

@@ -0,0 +1,128 @@
+
+html{
+	font-size: 14px;
+	font-family: serif;
+}
+/*SECTION*/
+.content{
+	width: 650px;
+	background-color: grey;
+	padding-top: 20px;
+	padding-bottom: 20px;
+	margin-bottom: 10px;
+	border-radius: 20px;
+	float: left;
+}
+
+.content .header{
+	height: 40px;
+	padding-top: 10px;
+	margin-left: 10px;
+	margin-right: 10px;	
+	padding-bottom: 10px;
+
+}
+.content .article{
+	background-color: yellow;
+	text-align: center;
+	height: 125px;
+	margin-left: 10px;
+	margin-right: 10px;
+	padding-top: 100px;
+	padding-bottom: 20px;
+	border-radius: 20px;
+}
+.content .footer{
+	margin-top: 10px;
+	height: 45px;
+	padding-top: 15px;
+	border-radius: 20px;
+	margin-right: 10px;
+	margin-left: 10px;
+}
+/*END SECTION*/
+header{
+	background-color: red; 
+}
+.header {
+	font-size: 46px;
+	text-align: center;
+	font-size: 40px;
+	width: auto;
+	height: 60px;
+	padding: 25px;
+	border-radius: 20px;
+	margin-bottom: 10px;
+}
+footer{
+	background-color: blue;
+	text-align: center;
+}
+.footer {
+	height: 50px;
+	font-size: 10px;
+	padding-top: 25px;
+	border-radius: 20px;
+	margin-top: 10px;
+	clear: left;
+}
+.footer p{
+	display: none; /* This is because I just want to see the design of the elements*/
+	border-bottom-right-radius: 20px;
+	border-bottom-left-radius: 20px; 
+}
+nav{
+	background-color: orange;
+}
+.navigation {
+	font-size: 12px;
+	text-align: center;
+	width: 275px;
+	height: 375px;
+	padding: 25px;
+	margin-right: 10px;
+	border-radius: 20px;
+	float: left;
+}
+aside{
+	background-color: green;
+}
+.sidebar {
+	font-size: 10px;
+	text-align: center;
+	background-color: green;
+	width: 275px;
+	height: 375px;
+	padding: 25px;
+	margin-bottom: 10px;
+	margin-left: 10px;
+	border-radius: 20px;
+	float: left;
+}
+
+[class$="r"]{
+	background-color: magenta;
+}
+
+
+/*2.3 Point 7*/
+p[style] {
+	background-color: green !important;
+}
+
+/*
+.header[style]{
+	font-size: 60px !important; but this, override the inline style declaration. Im going to left the other one(inline style)
+}*/
+
+[class*='a']:not([class$='r']):not([class$='e']){
+	background-color: blue;
+}
+
+/*To make the content responsive */
+@media all and (max-width:800px){
+	.content{
+		width: 100%;
+	}
+}
+

00-HTML-CSS-basics/topic0-1.2ii.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="description" content="Topic 0">
+	<meta name="keywords" content="HTML,CSS">
+	<meta name="author" content="Facundo Maldonado">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>Topic 0-2</title>
+
+	<style> 
+		#interaction-elements {
+		    width: 1200px;
+		    height: 300px;
+		    display: -webkit-flex;
+		    -webkit-justify-content: space-around; 
+		    display: flex;
+		    justify-content: space-around;
+		}
+
+		#interaction-elements div {
+		    width: 200px;
+		    height: 200px;
+		}
+	</style>
+</head>
+<body>
+	<div id="interaction-elements">
+	  <div>
+	  	<h3>Bird with Hat!</h3>
+			<img src="bird.jpg" alt="Bird" style="width: 150px;height: 150px">
+	  </div>
+	  <div>
+	  	<h3>Video!</h3>
+			<video width="320" height="240" controls>
+				<source src="video.mp4" type="video/mp4">
+			</video>
+	  </div>
+	  <div>
+	  	<h3>Sound!</h3>
+	  	<br>
+		<audio controls>
+			<source src="horse.ogg" type="audio/ogg">
+		</audio>
+	  </div>
+	</div>
+
+	<form id="sign-up" name="sign-up-form">
+		<h4>Sign Up!</h4>
+		First Name: <input type="text" name="firstName" placeholder="First Name">
+		<br>
+		Last Name: <input type="text" name="lastName" placeholder="Last Name">
+		<br>
+		Email: <input type="email" name="email" placeholder="E-mail">
+		<br>
+		Birthday: <input type="date" name="birthday">
+		<br>
+		Favorite Sport: 
+		<select id="sports">
+			<option id="football">Football</option>
+			<option id="basketball">Basketball</option>
+			<option id="tennis">Tennis</option>
+			<option id="golf">Golf</option>
+			<option id="rugby">Rugby</option>
+		</select>
+		<br>
+		Small bio:
+		<br>
+		<textarea>
+		</textarea>
+		<br>
+		<button type="submit" value="Submit">Submit</button>
+		<button type="reset" value="Reset">Clear</button>
+	</form>
+</body>
+</html>

00-HTML-CSS-basics/topic0-1i-1ii-1iii.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Topic 0, Exercise 1.i, ii, iii</title>
+</head>
+<body>
+	<header>
+		My todo list
+		<ul>
+			Todo Items
+			<li>
+				abc
+			</li>
+
+		</ul>
+	</header>
+</body>
+</html>