Ejercicios CSS

Simubuntu · Simubuntu · commit a2ee8db7c601 · 2021-09-20T15:26:53.000Z
diff --git a/exercises/01-Hello-World/index.html b/exercises/01-Hello-World/index.html
@@ -1 +1,9 @@
-<!-- your code here -->
+<style>
+	a {
+		color: pink;
+	}
+</style>
+
+<a href="https://google.com" target="_blank">Click me to open google.com</a>
+<a href="https://google.com" target="_blank">Click me to open facebook.com</a>
+<a href="https://google.com" target="_blank">Click me to open breathecode.de</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
@@ -2,7 +2,9 @@
 <html>
 	<head>
 		<style>
-			/* Your code here */
+			body {
+				background: 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: pink;
+}
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: red; color: blue">
 			<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="small">Hello!</p>
+		<p class="small">World!</p>
 	</body>
 </html>
diff --git a/exercises/04-Class-Selector/styles.css b/exercises/04-Class-Selector/styles.css
@@ -1,3 +1,9 @@
 .b-blue {
 	background: blue;
 }
+a {
+	color: yellow;
+}
+.small {
+	font-size: 9px;
+}
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
@@ -5,10 +5,9 @@
 	padding-left: 30px;
 	padding-right: 190px;
 	padding-bottom: 50px;
-
-    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;
+	/* padding: 10px 30px 50px 190px; */
+	background: rgb(189, 189, 189)
+		url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true)
+		100px no-repeat;
 	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,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,8 @@
 #button1 {
-	background: #BDBDBD;
-    border: #5E5E5E;
-    border-radius: 5px;
+	background: #bdbdbd;
+	border: #5e5e5e;
+	border-radius: 5px;
+}
+span {
+	color: red;
 }
diff --git a/exercises/05-Specificity/styles.css b/exercises/05-Specificity/styles.css
@@ -1,9 +1,12 @@
-ul li{
+ul li {
 	background: blue;
 }
 
-#thirditem{
+#thirditem {
 	background: yellow;
-} 
+}
 /****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/
-  
+
+#thirditem {
+	background-color: transparent;
+}
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,20 @@
-/* add your styles here */
+body {
+	background: url("https://3000-tomato-minnow-kftqf5w9.ws-us15.gitpod.io/.learn/assets/background-vertical.jpg?raw=true");
+	font-family: "Times New Roman", Times, serif;
+	padding: 0 0 0 20px;
+}
+h1 {
+	font-family: "Courier New", Courier, monospace;
+	color: red;
+}
+h2 {
+	text-decoration: underline;
+}
+#id1 {
+	background: rgba(198 206 227 / 29%);
+	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,14 @@
 /** Insert your code here **/
+body ul li {
+	color: red;
+}
+ol li:nth-child(2) {
+	background: green;
+}
 
+table tr:nth-child(odd) {
+	background: yellow;
+}
 /*********** 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
@@ -2,5 +2,11 @@ body {
 	background: #bdbdbd;
 }
 .rounded {
-	border-radius: 100%;
+	border-radius: 150px;
+	
+}
+
+div {
+	object-fit: fill;
+	object-position: 50px 120px;
 }
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;
@@ -11,6 +10,6 @@
 }
 
 a.threeDimension:active {
+	background-color: red;
 	/* your code here*/
-	
-}
+}
diff --git a/exercises/10-Your-Own-Font/index.html b/exercises/10-Your-Own-Font/index.html
@@ -1,15 +1,15 @@
 <!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="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 @@
+@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200&display=swap");
 .myTitle {
-	/*your code here*/
+	font-family: "Source Code Pro", monospace;
 }
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" />
+		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
+		<title>11 Font Awesome</title>
+	</head>
+	<body>
+		<ul>
+			<li><i class="fa fa-camera-retro"></i> Camera</li>
+			<li><i class="fas fa-address-card"></i> Adress card</li>
+			<li><i class="fa fa-bullhorn"></i> Megafono</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,10 @@
 }
 
 /* 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,14 @@
 .orange-btn {
+	padding: 10px;
+	border-radius: 4px;
+	background-color: orange;
+	color: white;
+	text-decoration: none;
 	/*your code here*/
 }
 
 .orange-btn:hover {
+	background-color: rgb(139, 94, 8);
+
 	/*YOUR CODE HERE FOR THE HOVER STATE*/
 }

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>`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`body {`
`2`	`2`	`background-image: url(https://4geeksacademy.github.io/exercise-assets/img/bg/small-mosaic.jpg);`
`3`		`- background-size: cover;`
`4`		`- background-repeat: no-repeat;`
	`3`	`+ background-size: contain;`
	`4`	`+ background-repeat: inherit;`
`5`	`5`	`}`