Skip to content

Commit 90ac47b

Browse files
Lazaroth93Lazaroth93
committed
Resolved exercises 1 to 9
1 parent b1febda commit 90ac47b

File tree

18 files changed

+90
-22
lines changed

18 files changed

+90
-22
lines changed

‎exercises/01-inline-styles/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</head>
66

77
<body>
8-
<table>
8+
<table style="background-color: green;">
99
<tr>
1010
<td>Hello</td>
1111
</tr>

‎exercises/02-style-tag/index.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,7 @@
11
<!-- Your code here -->
2+
<style>
3+
a {
4+
color: pink;
5+
}
6+
</style>
7+
<a href="https://google.com" target="_blank">Click me to open google.com</a>

‎exercises/02.1-add-a-style-tag/index.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
<!-- add a style tag and select the <p> tag, then make it color "blue" -->
2+
<style>
3+
p {
4+
color: blue;
5+
}
6+
</style>
27
<p>
38
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
49
around them. Having children learn to code at a young age prepares them for the future. Coding helps children with communication, creativity,

‎exercises/02.2-rbga-colors/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<style>
55
a {
66
/* change this style to yellow */
7-
color: red;
7+
color: yellow;
88
}
99
</style>
1010
</head>

‎exercises/02.3-your-second-style/index.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
<head>
44
<style>
55
/* Your code here */
6+
body {
7+
background-color: blue;
8+
}
69
</style>
710
</head>
811
<body>

‎exercises/03-separate-stylesheet/styles.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,6 @@
22
1. Select the body tag
33
2. Add the background rule equal to blue
44
*/
5+
body {
6+
background-color: blue;
7+
}

‎exercises/03.1-background/styles.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
body {
22
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: repeat;
55
}

‎exercises/04-list-styling/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,4 @@ <h4>Web-developer drinks</h4>
4040
</ul>
4141
</div>
4242
</body>
43-
</html>
43+
</html>

‎exercises/04-list-styling/styles.css

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,10 @@ body {
1111
background-color: white;
1212
padding: 120px;
1313
width: 300px;
14-
}
14+
}
15+
16+
ul {
17+
list-style-type: circle;
18+
margin: 0;
19+
padding: 0;
20+
}

‎exercises/05-class-selector/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
</head>
77

88
<body>
9-
<p>Hello!</p>
10-
<p>World!</p>
9+
<p class="b-blue">Hello!</p>
10+
<p class="b-blue">World!</p>
1111
</body>
1212
</html>

‎exercises/05.1-combined-rules/styles.css

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
.myBox {
22
width: 50px;
33
height: 50px;
4+
5+
padding: 10px 190px 50px 30px;
6+
7+
/* Al definir las proporciones en una misma regla "padding"
8+
se nombran en el siguiente orden: top, rigth,bottom, left
49
padding-top: 10px;
510
padding-left: 30px;
611
padding-right: 190px;
7-
padding-bottom: 50px;
12+
padding-bottom: 50px; */
13+
14+
background: 100px / contain rgb(189, 189, 189) url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true) no-repeat;
815

9-
background: rgb(189, 189, 189);
10-
background-image: url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true);
11-
background-position-x: 100px;
12-
background-repeat: no-repeat;
13-
background-size: contain;
1416
}

‎exercises/05.2-apply-several-classes/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66
</head>
77

88
<body>
9-
<div class="card spades">9</div>
9+
<div class="card heart">9</div>
1010
</body>
1111
</html>

‎exercises/05.3-id-selector/index.html

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,10 @@
22
<html>
33
<head>
44
<link rel="stylesheet" type="text/css" href="./styles.css" />
5-
<title>
6-
05.3 ID selector
7-
</title>
5+
<title>05.3 ID selector</title>
86
</head>
97

108
<body>
11-
<span>I should look like a button</span>
9+
<span id="button1">I should look like a button</span>
1210
</body>
1311
</html>

‎exercises/05.3-id-selector/solution.hide.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22
<html>
33
<head>
44
<link rel="stylesheet" type="text/css" href="./styles.css" />
5-
<title>
6-
05.3 ID selector
7-
</title>
5+
<title>05.3 ID selector</title>
86
</head>
97

108
<body>

‎exercises/06-specificity/styles.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,7 @@ li + #thirditem {
66
background: yellow;
77
}
88
/**** DO NOT EDIT ANYTHING ABOVE THIS LINE ****/
9+
10+
#thirditem {
11+
background: green !important;
12+
}

‎exercises/07-practicing-rules/styles.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,27 @@
11
/* add your styles here */
2+
body {
3+
background-image: url("../../.learn/assets/background-vertical.jpg?raw=true");
4+
background-repeat: repeat-y;
5+
font-family: "Times New Roman";
6+
padding-left: 20px;
7+
}
8+
9+
h1 {
10+
font-family: "Courier";
11+
color: red;
12+
}
13+
14+
h2 {
15+
text-decoration: underline;
16+
}
17+
18+
#id1 {
19+
background-color: rgba(255, 255, 255, 0.5);
20+
padding: 5px;
21+
}
22+
23+
a:hover {
24+
color: green;
25+
text-decoration: none;
26+
}
27+

‎exercises/08-very-specific-rules/styles.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
11
/** Insert your code here **/
2+
ul li {
3+
color: red !important;
4+
}
5+
ol li:nth-child(2) {
6+
background-color: green;
7+
}
8+
9+
table tr:nth-child(odd) {
10+
background-color: yellow;
11+
}
212

313
/********** READ-ONLY BLOCK ******
414
You CANNOT UPDATE anything from here on,

‎exercises/09-rounded-image/styles.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,11 @@ body {
33
}
44
.rounded {
55
border-radius: 100%;
6+
width: 100px;
7+
height: 100px;
8+
}
9+
10+
img {
11+
object-fit: cover;
12+
object-position: top;
613
}

0 commit comments

Comments
 (0)