Skip to content

Commit a81fd3e

Browse files
EduFG1211EduFG1211
committed
Se compleeto ejercicios
1 parent 648c81f commit a81fd3e

File tree

25 files changed

+122
-67
lines changed

25 files changed

+122
-67
lines changed

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

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

‎exercises/01.1-The-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 and 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 coding at a young age prepares them for the future. Coding helps children with communication, creativity,

‎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 & 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/02-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/02.1-Background/styles.css

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
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: cover;
4+
background-repeat: no-repeat; */
5+
background-size: contain;
6+
background-repeat: inherit;
57
}

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

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
/** Insert your code here **/
2-
2+
body ul li {
3+
color: red;
4+
}
5+
ol li:nth-child(2) {
6+
background-color: green;
7+
}
8+
table tr:nth-child(odd) {
9+
background-color: yelyellow}
310
/*********** READ ONLY BLOCK ******
411
You CAN NOT UPDATE anything from here on,
512
only add lines of code on top of this lines

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ body {
33
}
44
.rounded {
55
border-radius: 100%;
6+
object-fit: contain;
67
}

‎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 & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
.threeDimension {
32
display: block;
43
border: 1px solid;
@@ -12,5 +11,5 @@
1211

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

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

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
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+
<!--your code here -->
7+
<link rel="preconnect" href="https://fonts.gstatic.com" />
8+
<link href="https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap" rel="stylesheet" />
79

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

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

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
.myTitle {
22
/*your code here*/
3+
font-family: "Akaya Telivigala", cursive;
34
}

‎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/af42a2600a.js" crossorigin="anonymous"></script>
8+
<title>11 Font Awesome</title>
9+
</head>
10+
<body>
11+
<ul>
12+
<li><i class="fas fa-basketball-ball"></i> Hello</li>
13+
<li><i class="fas fa-allergies"></i> Hello</li>
14+
<li><i class="fas fa-apple-alt"></i>Hello</li>
15+
</ul>
16+
</body>
1417
</html>

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

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

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

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
.orange-btn {
22
/*your code here*/
3+
background-color: orange;
4+
padding: 10px;
5+
border-radius: 4px;
6+
text-decoration: none;
7+
color: white;
38
}
49

510
.orange-btn:hover {
611
/*YOUR CODE HERE FOR THE HOVER STATE*/
12+
background-color: rgba(255, 166, 0, 0.212);
713
}

0 commit comments

Comments
 (0)