Se compleeto ejercicios

EduFG1211 · EduFG1211 · commit a81fd3ec7021 · 2021-02-24T21:27:23.000Z
diff --git a/exercises/01-Hello-World/index.html b/exercises/01-Hello-World/index.html
@@ -1 +1,8 @@
-<!-- your code here -->
+<!-- your code here -->
+<style>
+	a {
+		/* change this style to yellow */
+		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,9 @@
 <!-- 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.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 yellow */
-				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
@@ -3,6 +3,9 @@
 	<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/styles.css b/exercises/02.1-Background/styles.css
@@ -1,5 +1,7 @@
 body {
 	background-image: url(https://4geeksacademy.github.io/exercise-assets/img/bg/small-mosaic.jpg);
-	background-size: cover;
-	background-repeat: no-repeat;
+	/* 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/04-Class-Selector/index.html b/exercises/04-Class-Selector/index.html
@@ -2,13 +2,11 @@
 <html>
 	<head>
 		<link rel="stylesheet" type="text/css" href="./styles.css" />
-		<title>
-			04 Class selector
-		</title>
+		<title>04 Class selector</title>
 	</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/index.html b/exercises/04.1-Combined-Rules/index.html
@@ -2,9 +2,7 @@
 <html>
 	<head>
 		<link rel="stylesheet" type="text/css" href="./styles.css" />
-		<title>
-			04 Combined Rules
-		</title>
+		<title>04 Combined Rules</title>
 	</head>
 
 	<body>
diff --git a/exercises/04.1-Combined-Rules/styles.css b/exercises/04.1-Combined-Rules/styles.css
@@ -1,14 +1,9 @@
 .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) 100px no-repeat
+		url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true);
 	background-size: contain;
 }
diff --git a/exercises/04.2-Apply-several-classes/index.html b/exercises/04.2-Apply-several-classes/index.html
@@ -2,12 +2,10 @@
 <html>
 	<head>
 		<link rel="stylesheet" type="text/css" href="./styles.css" />
-		<title>
-			04 Class selector
-		</title>
+		<title>04 Class selector</title>
 	</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/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;
 }
diff --git a/exercises/05-Specificity/styles.css b/exercises/05-Specificity/styles.css
@@ -1,9 +1,11 @@
-ul li{
+ul li {
 	background: blue;
 }
 
-#thirditem{
+#thirditem {
 	background: yellow;
-} 
+}
 /****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/
-  
+#thirditem {
+	background-color: red;
+}
diff --git a/exercises/06-Practicing-Rules/index.html b/exercises/06-Practicing-Rules/index.html
@@ -21,14 +21,12 @@ <h2>3 reasons you know you are learning</h2>
 		<h2>3 reasons you know love what you are learning</h2>
 		<ul>
 			<li>Time passes fast.</li>
-			<li>
-				You are anxious to finish this excercise and start the next one.
-			</li>
+			<li>You are anxious to finish this excercise and start the next one.</li>
 			<li>Is 12am and you don't want to go to sleep.</li>
 		</ul>
 		<p>
 			If you can't sleep, what better than watching videos of cats?
 			<a href="https://www.youtube.com/watch?v=WEgWMOzQ8IE">click here</a>
 		</p>
 	</body>
-</html>
+</html>
diff --git a/exercises/06-Practicing-Rules/styles.css b/exercises/06-Practicing-Rules/styles.css
@@ -1 +1,23 @@
-/* add your styles here */
+/* add your styles here */
+body {
+	font-family: "Times New Roman", Times, serif;
+	padding-left: 20px;
+	background: repeat-y
+		url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/background-vertical.jpg?raw=true);
+}
+h1 {
+	font-family: "Courier New", Courier, monospace;
+	color: red;
+	text-align: center;
+}
+h2 {
+	text-decoration: underline;
+}
+#id1 {
+	background: rgba(255, 255, 255, 0.2);
+	padding: 5px;
+}
+a:hover {
+	color: green;
+	text-decoration: none;
+}
diff --git a/exercises/07-Very-Specific-Rules/styles.css b/exercises/07-Very-Specific-Rules/styles.css
@@ -1,5 +1,12 @@
 /** Insert your code here **/
-
+body ul li {
+	color: red;
+}
+ol li:nth-child(2) {
+	background-color: green;
+}
+table tr:nth-child(odd) {
+	background-color: yelyellow}
 /*********** READ ONLY BLOCK ******
 You CAN NOT UPDATE anything from here on,
 only add lines of code on top of this lines
diff --git a/exercises/08-Rounded-Image/styles.css b/exercises/08-Rounded-Image/styles.css
@@ -3,4 +3,5 @@ body {
 }
 .rounded {
 	border-radius: 100%;
+	object-fit: contain;
 }
diff --git a/exercises/09-Anchor-Styles/index.html b/exercises/09-Anchor-Styles/index.html
@@ -6,7 +6,7 @@
 		<link rel="stylesheet" type="text/css" href="./styles.css" />
 		<title>09 Anchor Styles</title>
 	</head>
-    
+
 	<body>
 		<a class="threeDimension" href="#">Click me</a>
 	</body>
diff --git a/exercises/09-Anchor-Styles/styles.css b/exercises/09-Anchor-Styles/styles.css
@@ -1,4 +1,3 @@
-
 .threeDimension {
 	display: block;
 	border: 1px solid;
@@ -12,5 +11,5 @@
 
 a.threeDimension:active {
 	/* your code here*/
-	
-}
+	border-color: #000 #aaa #aaa #000;
+}
diff --git a/exercises/10-Your-Own-Font/index.html b/exercises/10-Your-Own-Font/index.html
@@ -1,15 +1,18 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width" />
-    <!--your code here -->
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<!--your code here -->
+		<link rel="preconnect" href="https://fonts.gstatic.com" />
+		<link href="https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap" rel="stylesheet" />
 
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
 
-    <title>10 Your Own Font</title>
-  </head>
-  <body>
-    <h1 class="myTitle">My unique font</h1>
-  </body>
+		<title>10 Your Own Font</title>
+	</head>
+
+	<body>
+		<h1 class="myTitle">My unique font</h1>
+	</body>
 </html>
diff --git a/exercises/10-Your-Own-Font/styles.css b/exercises/10-Your-Own-Font/styles.css
@@ -1,3 +1,4 @@
 .myTitle {
 	/*your code here*/
+	font-family: "Akaya Telivigala", cursive;
 }
diff --git a/exercises/11-Font-Awesome-Icons/index.html b/exercises/11-Font-Awesome-Icons/index.html
@@ -1,14 +1,17 @@
 <!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>11 Font Awesome</title>
-  </head>
-  <body>
-    <ul>
-      <li><i class="fa fa-camera-retro"></i> Hello</li>
-    </ul>
-  </body>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<script src="https://kit.fontawesome.com/af42a2600a.js" crossorigin="anonymous"></script>
+		<title>11 Font Awesome</title>
+	</head>
+	<body>
+		<ul>
+			<li><i class="fas fa-basketball-ball"></i> Hello</li>
+			<li><i class="fas fa-allergies"></i> Hello</li>
+			<li><i class="fas fa-apple-alt"></i>Hello</li>
+		</ul>
+	</body>
 </html>
diff --git a/exercises/12-Relative-Length-EM-REM/styles.css b/exercises/12-Relative-Length-EM-REM/styles.css
@@ -6,3 +6,9 @@
 }
 
 /* YOUR CODE BELOW THIS LINE */
+h2 {
+	font-size: 0.8em;
+}
+h3 {
+	font-size: 0.8rem;
+}
diff --git a/exercises/13-Anchor-Like-Button/styles.css b/exercises/13-Anchor-Like-Button/styles.css
@@ -1,7 +1,13 @@
 .orange-btn {
 	/*your code here*/
+	background-color: orange;
+	padding: 10px;
+	border-radius: 4px;
+	text-decoration: none;
+	color: white;
 }
 
 .orange-btn:hover {
 	/*YOUR CODE HERE FOR THE HOVER STATE*/
+	background-color: rgba(255, 166, 0, 0.212);
 }

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@`
`4`	`4`	`<style>`
`5`	`5`	`a {`
`6`	`6`	`/* change this style to yellow */`
`7`		`- color: red;`
	`7`	`+ color: yellow;`
`8`	`8`	`}`
`9`	`9`	`</style>`
`10`	`10`	`</head>`