First 4 exercises done

gtsasil · gtsasil · commit 6d4918eb22aa · 2023-01-10T16:16:04.000Z
diff --git a/.learn/resets/01-Hello-World/index.html b/.learn/resets/01-Hello-World/index.html
@@ -0,0 +1 @@
+<!-- your code here -->
diff --git a/.learn/resets/01.1-The-Style-Tag/index.html b/.learn/resets/01.1-The-Style-Tag/index.html
@@ -0,0 +1,6 @@
+<!-- add a style tag and select the p tag and make it color blue -->
+<p>
+	Coding is a basic literacy in the digital age, and it is important for kids to understand and be able to work with and understand the technology
+	around them. Having children learn coding at a young age prepares them for the future. Coding helps children with communication, creativity,
+	math,writing, and confidence.
+</p>
diff --git a/.learn/resets/01.2-Your-First-Style/index.html b/.learn/resets/01.2-Your-First-Style/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<style>
+			a {
+				/* change this style to blue */
+				color: red;
+			}
+		</style>
+	</head>
+	<body>
+		Hello! <a href="#">I am an anchor in red, change my color to yellow</a>
+	</body>
+</html>
diff --git a/.learn/resets/01.3-Your-Second-Style/index.html b/.learn/resets/01.3-Your-Second-Style/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<style>
+			/* Your code here */
+		</style>
+	</head>
+	<body>
+		Hello! My background should be blue!
+	</body>
+</html>
diff --git a/.learn/resets/02-Separate-Stylesheet/index.html b/.learn/resets/02-Separate-Stylesheet/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+	</head>
+	<body>
+		My background should be blue.
+	</body>
+</html>
diff --git a/.learn/resets/02.1-Background/index.html b/.learn/resets/02.1-Background/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<title>02 Background</title>
+	</head>
+	<body>
+		My background should be an image with th size "contain"
+	</body>
+</html>
diff --git a/.learn/resets/03-Inline-Styles/index.html b/.learn/resets/03-Inline-Styles/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>03 Inline Styles</title>
+	</head>
+
+	<body>
+		<table>
+			<tr>
+				<td>Hello</td>
+			</tr>
+			<tr>
+				<td>My brother</td>
+			</tr>
+		</table>
+	</body>
+</html>
diff --git a/.learn/resets/04-Class-Selector/index.html b/.learn/resets/04-Class-Selector/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<title>04 Class selector</title>
+	</head>
+
+	<body>
+		<p>Hello!</p>
+		<p>World!</p>
+	</body>
+</html>
diff --git a/.learn/resets/04.1-Combined-Rules/index.html b/.learn/resets/04.1-Combined-Rules/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<title>04.1 Combined Rules</title>
+	</head>
+
+	<body>
+		<div class="myBox">Hello!</div>
+	</body>
+</html>
diff --git a/.learn/resets/04.2-Apply-several-classes/index.html b/.learn/resets/04.2-Apply-several-classes/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<title>04.2 Apply several classes</title>
+	</head>
+
+	<body>
+		<div class="card spades">9</div>
+	</body>
+</html>
diff --git a/.learn/resets/04.3-id-Selector/index.html b/.learn/resets/04.3-id-Selector/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<title>
+			04.3 ID selector
+		</title>
+	</head>
+
+	<body>
+		<span>I should look like a button</span>
+	</body>
+</html>
diff --git a/.learn/resets/05-Specificity/index.html b/.learn/resets/05-Specificity/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<title>05 Specificity</title>
+	</head>
+	<body>
+		<ul>
+			<li>My first item of the list</li>
+			<li>My second item of the list</li>
+			<li id="thirditem">My third item of the list</li>
+			<li>My forth item of the list</li>
+			<li>My fifth item of the list</li>
+		</ul>
+	</body>
+</html>
diff --git a/exercises/01-Hello-World/index.html b/exercises/01-Hello-World/index.html
@@ -1 +1,6 @@
-<!-- your code here -->
+<style>
+	a {
+		color: pink;
+	}
+</style>
+<a href="https://google.com" target="_blank">Click me to open google.com</a>
diff --git a/exercises/01.1-The-Style-Tag/index.html b/exercises/01.1-The-Style-Tag/index.html
@@ -1,4 +1,8 @@
-<!-- add a style tag and select the p tag and make it color blue -->
+<style>
+	p {
+		color: blue;
+	}
+</style>
 <p>
 	Coding is a basic literacy in the digital age, and it is important for kids to understand and be able to work with and understand the technology
 	around them. Having children learn coding at a young age prepares them for the future. Coding helps children with communication, creativity,
diff --git a/exercises/01.1-The-Style-Tag/solution.hide.html b/exercises/01.1-The-Style-Tag/solution.hide.html
@@ -9,4 +9,4 @@
 	Coding is a basic literacy in the digital age, and it is important for kids to understand and be able to work with and understand the technology
 	around them. Having children learn coding at a young age prepares them for the future. Coding helps children with communication, creativity,
 	math,writing, and confidence.
-</p>
+</p>
diff --git a/exercises/01.2-Your-First-Style/index.html b/exercises/01.2-Your-First-Style/index.html
@@ -4,7 +4,7 @@
 		<style>
 			a {
 				/* change this style to blue */
-				color: red;
+				color: yellow;
 			}
 		</style>
 	</head>
diff --git a/exercises/01.3-Your-Second-Style/index.html b/exercises/01.3-Your-Second-Style/index.html
@@ -2,7 +2,9 @@
 <html>
 	<head>
 		<style>
-			/* Your code here */
+			body {
+				background-color: blue;
+			}
 		</style>
 	</head>
 	<body>
diff --git a/exercises/02-Separate-Stylesheet/styles.css b/exercises/02-Separate-Stylesheet/styles.css
@@ -2,3 +2,6 @@
     1. Select the body tag.
     2. Add the background rule equal to blue.
  */
+body {
+	background-color: blue;
+}
diff --git a/exercises/02.1-Background/solution.hide.css b/exercises/02.1-Background/solution.hide.css
@@ -2,4 +2,4 @@ body {
 	background-image: url(https://4geeksacademy.github.io/exercise-assets/img/bg/small-mosaic.jpg);
 	background-size: contain;
 	background-repeat: inherit;
-}
+}
diff --git a/exercises/02.1-Background/styles.css b/exercises/02.1-Background/styles.css
@@ -1,5 +1,5 @@
 body {
 	background-image: url(https://4geeksacademy.github.io/exercise-assets/img/bg/small-mosaic.jpg);
-	background-size: cover;
-	background-repeat: no-repeat;
+	background-size: contain;
+	background-repeat: inherit;
 }
diff --git a/exercises/03-Inline-Styles/index.html b/exercises/03-Inline-Styles/index.html
@@ -5,7 +5,7 @@
 	</head>
 
 	<body>
-		<table>
+		<table style="background-color: green">
 			<tr>
 				<td>Hello</td>
 			</tr>
diff --git a/exercises/03-Inline-Styles/solution.hide.html b/exercises/03-Inline-Styles/solution.hide.html
@@ -14,4 +14,4 @@
 			</tr>
 		</table>
 	</body>
-</html>
+</html>
diff --git a/exercises/04-Class-Selector/index.html b/exercises/04-Class-Selector/index.html
@@ -6,7 +6,7 @@
 	</head>
 
 	<body>
-		<p>Hello!</p>
-		<p>World!</p>
+		<p class="b-blue">Hello!</p>
+		<p class="b-blue">World!</p>
 	</body>
 </html>
diff --git a/exercises/04.1-Combined-Rules/solution.hide.css b/exercises/04.1-Combined-Rules/solution.hide.css
@@ -3,6 +3,8 @@
 	height: 50px;
 	padding: 10px 190px 50px 30px;
 
-    background: rgb(189, 189, 189) url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true) no-repeat 100px;
+	background: rgb(189, 189, 189)
+		url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true)
+		no-repeat 100px;
 	background-size: contain;
-}
+}
diff --git a/exercises/04.1-Combined-Rules/styles.css b/exercises/04.1-Combined-Rules/styles.css
@@ -1,14 +1,10 @@
 .myBox {
 	width: 50px;
 	height: 50px;
-	padding-top: 10px;
-	padding-left: 30px;
-	padding-right: 190px;
-	padding-bottom: 50px;
+	padding: 10px 190px 50px 30px;
 
-    background: rgb(189, 189, 189);
-	background-image: url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true);
-	background-position-x: 100px;
-	background-repeat: no-repeat;
+	background: rgb(189, 189, 189)
+		url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true)
+		no-repeat 100px;
 	background-size: contain;
 }
diff --git a/exercises/04.2-Apply-several-classes/index.html b/exercises/04.2-Apply-several-classes/index.html
@@ -6,6 +6,6 @@
 	</head>
 
 	<body>
-		<div class="card spades">9</div>
+		<div class="card heart">9</div>
 	</body>
 </html>
diff --git a/exercises/04.3-id-Selector/index.html b/exercises/04.3-id-Selector/index.html
@@ -2,12 +2,10 @@
 <html>
 	<head>
 		<link rel="stylesheet" type="text/css" href="./styles.css" />
-		<title>
-			04.3 ID selector
-		</title>
+		<title>04.3 ID selector</title>
 	</head>
 
 	<body>
-		<span>I should look like a button</span>
+		<span id="button1">I should look like a button</span>
 	</body>
 </html>
diff --git a/exercises/04.3-id-Selector/solution.hide.html b/exercises/04.3-id-Selector/solution.hide.html
@@ -2,9 +2,7 @@
 <html>
 	<head>
 		<link rel="stylesheet" type="text/css" href="./styles.css" />
-		<title>
-			04.3 ID selector
-		</title>
+		<title>04.3 ID selector</title>
 	</head>
 
 	<body>
diff --git a/exercises/04.3-id-Selector/styles.css b/exercises/04.3-id-Selector/styles.css
@@ -1,5 +1,5 @@
 #button1 {
-	background: #BDBDBD;
-    border: #5E5E5E;
-    border-radius: 5px;
+	background: #bdbdbd;
+	border: #5e5e5e;
+	border-radius: 5px;
 }
