Skip to content

Commit 934f898

Browse files
bpiumabpiuma
committed
Ejercicios finalizados
1 parent 648c81f commit 934f898

File tree

26 files changed

+151
-86
lines changed

26 files changed

+151
-86
lines changed

‎exercises/01-Hello-World/index.html

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,17 @@
1-
<!-- your code here -->
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Document</title>
7+
<style>
8+
a {
9+
/* cambia este estilo a yellow */
10+
color: yellow;
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
<a href="https://google.com" target="_blank">Click me to open google.com</a>
16+
</body>
17+
</html>

‎exercises/01.1-The-Style-Tag/index.html

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,21 @@
1-
<!-- add a style tag and select the p tag and make it color blue -->
2-
<p>
3-
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
4-
around them. Having children learn coding at a young age prepares them for the future. Coding helps children with communication, creativity,
5-
math,writing, and confidence.
6-
</p>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Document</title>
7+
<style>
8+
p {
9+
color: blue;
10+
}
11+
</style>
12+
</head>
13+
<body>
14+
<!-- add a style tag and select the p tag and make it color blue -->
15+
<p>
16+
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
17+
technology around them. Having children learn coding at a young age prepares them for the future. Coding helps children with
18+
communication, creativity, math,writing, and confidence.
19+
</p>
20+
</body>
21+
</html>

‎exercises/01.2-Your-First-Style/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/01.3-Your-Second-Style/index.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
<html>
33
<head>
44
<style>
5-
/* Your code here */
5+
body {
6+
background-color: blue;
7+
}
68
</style>
79
</head>
810
<body>

‎exercises/02-Separate-Stylesheet/styles.css

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/* your styles here:
2-
1. Select the body tag.
3-
2. Add the background rule equal to blue.
4-
*/
1+
body {
2+
background-color: blue;
3+
}

‎exercises/02.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: inherit;
55
}

‎exercises/03-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/04-Class-Selector/index.html

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

108
<body>
11-
<p>Hello!</p>
12-
<p>World!</p>
9+
<p class="b-blue">Hello!</p>
10+
<p class="b-blue">World!</p>
1311
</body>
1412
</html>

‎exercises/04.1-Combined-Rules/index.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-
04 Combined Rules
7-
</title>
5+
<title>04 Combined Rules</title>
86
</head>
97

108
<body>

‎exercises/04.1-Combined-Rules/styles.css

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
11
.myBox {
22
width: 50px;
33
height: 50px;
4-
padding-top: 10px;
5-
padding-left: 30px;
6-
padding-right: 190px;
7-
padding-bottom: 50px;
4+
padding: 10px 190px 50px 30px;
85

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;
6+
background: 100px no-repeat rgb(189, 189, 189)
7+
url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true);
138
background-size: contain;
149
}

‎exercises/04.2-Apply-several-classes/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-
04 Class selector
7-
</title>
5+
<title>04 Class selector</title>
86
</head>
97

108
<body>
11-
<div class="card spades">9</div>
9+
<div class="card heart">9</div>
1210
</body>
1311
</html>

‎exercises/04.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-
04.3 ID selector
7-
</title>
5+
<title>04.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/04.3-id-Selector/styles.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
#button1 {
2-
background: #BDBDBD;
3-
border: #5E5E5E;
4-
border-radius: 5px;
2+
background: #bdbdbd;
3+
border: #5e5e5e;
4+
border-radius: 5px;
55
}

‎exercises/05-Specificity/styles.css

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
ul li{
1+
ul li {
22
background: blue;
33
}
44

5-
#thirditem{
5+
#thirditem {
66
background: yellow;
7-
}
7+
}
88
/****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/
9-
9+
#thirditem {
10+
background: green;
11+
}

‎exercises/06-Practicing-Rules/index.html

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,12 @@ <h2>3 reasons you know you are learning</h2>
2121
<h2>3 reasons you know love what you are learning</h2>
2222
<ul>
2323
<li>Time passes fast.</li>
24-
<li>
25-
You are anxious to finish this excercise and start the next one.
26-
</li>
24+
<li>You are anxious to finish this excercise and start the next one.</li>
2725
<li>Is 12am and you don't want to go to sleep.</li>
2826
</ul>
2927
<p>
3028
If you can't sleep, what better than watching videos of cats?
3129
<a href="https://www.youtube.com/watch?v=WEgWMOzQ8IE">click here</a>
3230
</p>
3331
</body>
34-
</html>
32+
</html>

‎exercises/06-Practicing-Rules/styles.css

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,22 @@
1-
/* add your styles here */
1+
body {
2+
background: repeat-y
3+
url("https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/background-vertical.jpg?raw=true");
4+
font-family: "Times New Roman";
5+
padding-left: 20px;
6+
}
7+
h1 {
8+
font-family: "Courier";
9+
color: red;
10+
text-align: center;
11+
}
12+
h2 {
13+
text-decoration: underline;
14+
}
15+
#id1 {
16+
background: rgba(255, 255, 255, 0.2);
17+
padding: 5px;
18+
}
19+
a:hover {
20+
color: green;
21+
text-decoration: none;
22+
}

‎exercises/07-Very-Specific-Rules/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,14 @@ <h2>3 reasons you know you are learning</h2>
1414
</p>
1515
<ol>
1616
<li>You are able to complete the exercises by yourself.</li>
17-
<li>You understand what the teacher is talking about</li>
17+
<li class="li2">You understand what the teacher is talking about</li>
1818
<li>Your are able to have conversations about the topic</li>
1919
</ol>
2020
<h2>3 reasons you know love what you are learning</h2>
2121
<ul>
22-
<li>Time passes fast.</li>
23-
<li>You are anxious to finish this excercise and start the next one.</li>
24-
<li>Is 12am and you don't want to go to sleep.</li>
22+
<li class="li1">Time passes fast.</li>
23+
<li class="li1">You are anxious to finish this excercise and start the next one.</li>
24+
<li class="li1">Is 12am and you don't want to go to sleep.</li>
2525
</ul>
2626
<p>
2727
If you can't sleep, what better than watching videos of cats?

‎exercises/07-Very-Specific-Rules/styles.css

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,13 @@
1-
/** Insert your code here **/
1+
.li1 {
2+
color: red;
3+
}
4+
5+
.li2 {
6+
background-color: green;
7+
}
8+
tr:nth-child(odd) {
9+
background-color: yellow;
10+
}
211

312
/*********** READ ONLY BLOCK ******
413
You CAN NOT UPDATE anything from here on,

‎exercises/08-Rounded-Image/styles.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,8 @@ body {
22
background: #bdbdbd;
33
}
44
.rounded {
5+
height: 286px;
6+
width: 286px;
57
border-radius: 100%;
8+
object-fit: cover;
69
}

‎exercises/09-Anchor-Styles/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<link rel="stylesheet" type="text/css" href="./styles.css" />
77
<title>09 Anchor Styles</title>
88
</head>
9-
9+
1010
<body>
1111
<a class="threeDimension" href="#">Click me</a>
1212
</body>

‎exercises/09-Anchor-Styles/styles.css

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
.threeDimension {
32
display: block;
43
border: 1px solid;
@@ -11,6 +10,5 @@
1110
}
1211

1312
a.threeDimension:active {
14-
/* your code here*/
15-
16-
}
13+
border-color: #000 #aaa #aaa #000;
14+
}

‎exercises/10-Your-Own-Font/index.html

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width" />
6-
<!--your code here -->
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<link href="https://fonts.googleapis.com/css?family=New Tegomin" rel="stylesheet" />
77

8-
<link rel="stylesheet" type="text/css" href="./styles.css" />
8+
<link rel="stylesheet" type="text/css" href="./styles.css" />
99

10-
<title>10 Your Own Font</title>
11-
</head>
12-
<body>
13-
<h1 class="myTitle">My unique font</h1>
14-
</body>
10+
<title>10 Your Own Font</title>
11+
</head>
12+
<body>
13+
<h1 class="myTitle">My unique font</h1>
14+
</body>
1515
</html>

‎exercises/10-Your-Own-Font/styles.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.myTitle {
2-
/*your code here*/
2+
font-family: "New Tegomin";
33
}

‎exercises/11-Font-Awesome-Icons/index.html

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width" />
6-
<link rel="stylesheet" type="text/css" href="./styles.css" />
7-
<title>11 Font Awesome</title>
8-
</head>
9-
<body>
10-
<ul>
11-
<li><i class="fa fa-camera-retro"></i> Hello</li>
12-
</ul>
13-
</body>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<link rel="stylesheet" type="text/css" href="./styles.css" />
7+
<script src="https://kit.fontawesome.com/06140c0349.js" crossorigin="anonymous"></script>
8+
<title>11 Font Awesome</title>
9+
</head>
10+
<body>
11+
<ul>
12+
<li><i class="fa fa-camera-retro"></i> Hello</li>
13+
<li><i class="far fa-smile"></i> Smile</li>
14+
<li><i class="fab fa-amazon"></i> Amazon</li>
15+
</ul>
16+
</body>
1417
</html>

‎exercises/12-Relative-Length-EM-REM/styles.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,11 @@
66
}
77

88
/* YOUR CODE BELOW THIS LINE */
9+
10+
h2 {
11+
font-size: 0.8em;
12+
}
13+
14+
h3 {
15+
font-size: 0.8rem;
16+
}

‎exercises/13-Anchor-Like-Button/styles.css

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
.orange-btn {
2-
/*your code here*/
2+
padding: 10px;
3+
border-radius: 4px;
4+
background-color: rgb(242, 180, 23);
5+
text-decoration: none;
6+
color: white;
37
}
48

59
.orange-btn:hover {
6-
/*YOUR CODE HERE FOR THE HOVER STATE*/
10+
background-color: rgb(208, 132, 0);
711
}

0 commit comments

Comments
 (0)