Skip to content

Commit c4916f2

Browse files
deividxyzdeividxyz
committed
ejercicios css
1 parent 9f3eb5b commit c4916f2

File tree

31 files changed

+336
-36
lines changed

31 files changed

+336
-36
lines changed

‎.learn/resets/01-Hello-World/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!-- your code here -->

‎.learn/resets/01.1-The-Style-Tag/index.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
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>

‎.learn/resets/01.2-Your-First-Style/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
a {
6+
/* change this style to blue */
7+
color: red;
8+
}
9+
</style>
10+
</head>
11+
<body>
12+
Hello! <a href="#">I am an anchor in red, change my color to yellow</a>
13+
</body>
14+
</html>

‎.learn/resets/01.3-Your-Second-Style/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
/* Your code here */
6+
</style>
7+
</head>
8+
<body>
9+
Hello! My background should be blue!
10+
</body>
11+
</html>

‎.learn/resets/02-Separate-Stylesheet/index.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
</head>
6+
<body>
7+
My background should be blue.
8+
</body>
9+
</html>

‎.learn/resets/02.1-Background/index.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
<title>02 Background</title>
6+
</head>
7+
<body>
8+
My background should be an image with th size "contain"
9+
</body>
10+
</html>

‎.learn/resets/03-Inline-Styles/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>03 Inline Styles</title>
5+
</head>
6+
7+
<body>
8+
<table>
9+
<tr>
10+
<td>Hello</td>
11+
</tr>
12+
<tr>
13+
<td>My brother</td>
14+
</tr>
15+
</table>
16+
</body>
17+
</html>

‎.learn/resets/04-Class-Selector/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
<title>
6+
04 Class selector
7+
</title>
8+
</head>
9+
10+
<body>
11+
<p>Hello!</p>
12+
<p>World!</p>
13+
</body>
14+
</html>

‎.learn/resets/04.1-Combined-Rules/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
<title>
6+
04 Combined Rules
7+
</title>
8+
</head>
9+
10+
<body>
11+
<div class="myBox">Hello!</div>
12+
</body>
13+
</html>

‎.learn/resets/04.2-Apply-several-classes/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
<title>
6+
04 Class selector
7+
</title>
8+
</head>
9+
10+
<body>
11+
<div class="card spades">9</div>
12+
</body>
13+
</html>

‎.learn/resets/04.3-id-Selector/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
<title>
6+
04.3 ID selector
7+
</title>
8+
</head>
9+
10+
<body>
11+
<span>I should look like a button</span>
12+
</body>
13+
</html>

‎.learn/resets/05-Specificity/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<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>05 Specificity</title>
8+
</head>
9+
<body>
10+
<ul>
11+
<li>My first item of the list</li>
12+
<li>My second item of the list</li>
13+
<li id="thirditem">My third item of the list</li>
14+
<li>My forth item of the list</li>
15+
<li>My fifth item of the list</li>
16+
</ul>
17+
</body>
18+
</html>

‎.learn/resets/06-Practicing-Rules/index.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<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>06 Practicing Rules</title>
8+
</head>
9+
10+
<body>
11+
<h1>The learning essay</h1>
12+
<h2>3 reasons you know you are learning</h2>
13+
<p id="id1">
14+
We are going to explain in this pharagraph the 3 most comon signs that you should look into yourself to recognize if you are learning.
15+
</p>
16+
<ol>
17+
<li>You are able to complete the exercises by yourself.</li>
18+
<li>You understand what the teacher is talking about</li>
19+
<li>Your are able to have conversations about the topic</li>
20+
</ol>
21+
<h2>3 reasons you know love what you are learning</h2>
22+
<ul>
23+
<li>Time passes fast.</li>
24+
<li>
25+
You are anxious to finish this excercise and start the next one.
26+
</li>
27+
<li>Is 12am and you don't want to go to sleep.</li>
28+
</ul>
29+
<p>
30+
If you can't sleep, what better than watching videos of cats?
31+
<a href="https://www.youtube.com/watch?v=WEgWMOzQ8IE">click here</a>
32+
</p>
33+
</body>
34+
</html>

‎.learn/resets/07-Very-Specific-Rules/index.html

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<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>07 Very Specific Rules</title>
8+
</head>
9+
<body>
10+
<h1>The learning essay</h1>
11+
<h2>3 reasons you know you are learning</h2>
12+
<p id="id1">
13+
We are going to explain in this pharagraph the 3 most comon signs that you should look into yourself to recognize if you are learning.
14+
</p>
15+
<ol>
16+
<li>You are able to complete the exercises by yourself.</li>
17+
<li>You understand what the teacher is talking about</li>
18+
<li>Your are able to have conversations about the topic</li>
19+
</ol>
20+
<h2>3 reasons you know love what you are learning</h2>
21+
<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>
25+
</ul>
26+
<p>
27+
If you can't sleep, what better than watching videos of cats?
28+
<a href="https://www.youtube.com/watch?v=WEgWMOzQ8IE">click here</a>
29+
</p>
30+
31+
<table>
32+
<tr>
33+
<td>Age</td>
34+
<td>Gender</td>
35+
</tr>
36+
<tr>
37+
<td>12 years</td>
38+
<td>Male</td>
39+
</tr>
40+
<tr>
41+
<td>22 years</td>
42+
<td>Female</td>
43+
</tr>
44+
<tr>
45+
<td>11 years</td>
46+
<td>Male</td>
47+
</tr>
48+
<tr>
49+
<td>21 years</td>
50+
<td>Male</td>
51+
</tr>
52+
<tr>
53+
<td>22 years</td>
54+
<td>Female</td>
55+
</tr>
56+
<tr>
57+
<td>10 years</td>
58+
<td>Male</td>
59+
</tr>
60+
<tr>
61+
<td>13 years</td>
62+
<td>Female</td>
63+
</tr>
64+
<tr>
65+
<td>13 years</td>
66+
<td>Male</td>
67+
</tr>
68+
<tr>
69+
<td>10 years</td>
70+
<td>Male</td>
71+
</tr>
72+
<tr>
73+
<td>11 years</td>
74+
<td>Male</td>
75+
</tr>
76+
<tr>
77+
<td>11 years</td>
78+
<td>Male</td>
79+
</tr>
80+
</table>
81+
</body>
82+
</html>

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,7 @@
1-
<!-- your code here -->
1+
<style>
2+
a {
3+
/* change this style to yellow */
4+
color: yellow;
5+
}
6+
</style>
7+
<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 & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
<!-- add a style tag and select the p tag and make it color blue -->
1+
<style>
2+
p {
3+
color: blue;
4+
}
5+
</style>
26
<p>
37
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
48
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 blue */
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: blue;
7+
}
68
</style>
79
</head>
810
<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: 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: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,12 @@
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+
<!-- aplico la clase b-blue-->
11+
<p class="b-blue">World!</p>
1312
</body>
1413
</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: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,14 @@
55
padding-left: 30px;
66
padding-right: 190px;
77
padding-bottom: 50px;
8+
padding: 10px 190px 50px 30px;
89

9-
background: rgb(189, 189, 189);
10+
background: rgb(189, 189, 189);
1011
background-image: url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true);
1112
background-position-x: 100px;
1213
background-repeat: no-repeat;
1314
background-size: contain;
15+
background: rgb(189, 189, 189)
16+
url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true)
17+
100px no-repeat;
1418
}

‎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>

0 commit comments

Comments
 (0)