Skip to content

Commit a2ee8db

Browse files
SimubuntuSimubuntu
committed
Ejercicios CSS
1 parent cb69126 commit a2ee8db

File tree

26 files changed

+136
-66
lines changed

26 files changed

+136
-66
lines changed

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

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

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
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>
6+
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 & 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: pink;
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: red; color: blue">
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="small">Hello!</p>
10+
<p class="small">World!</p>
1311
</body>
1412
</html>

‎exercises/04-Class-Selector/styles.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
11
.b-blue {
22
background: blue;
33
}
4+
a {
5+
color: yellow;
6+
}
7+
.small {
8+
font-size: 9px;
9+
}

‎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: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,9 @@
55
padding-left: 30px;
66
padding-right: 190px;
77
padding-bottom: 50px;
8-
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;
8+
/* padding: 10px 30px 50px 190px; */
9+
background: rgb(189, 189, 189)
10+
url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true)
11+
100px no-repeat;
1312
background-size: contain;
1413
}

‎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: 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.3 ID selector
7-
</title>
5+
<title>04.3 ID selector</title>
86
</head>
97

108
<body>

‎exercises/04.3-id-Selector/styles.css

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

‎exercises/05-Specificity/styles.css

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
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+
10+
#thirditem {
11+
background-color: transparent;
12+
}

‎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: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,20 @@
1-
/* add your styles here */
1+
body {
2+
background: url("https://3000-tomato-minnow-kftqf5w9.ws-us15.gitpod.io/.learn/assets/background-vertical.jpg?raw=true");
3+
font-family: "Times New Roman", Times, serif;
4+
padding: 0 0 0 20px;
5+
}
6+
h1 {
7+
font-family: "Courier New", Courier, monospace;
8+
color: red;
9+
}
10+
h2 {
11+
text-decoration: underline;
12+
}
13+
#id1 {
14+
background: rgba(198 206 227 / 29%);
15+
padding: 5px;
16+
}
17+
a:hover {
18+
color: green;
19+
text-decoration: none;
20+
}

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

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

9+
table tr:nth-child(odd) {
10+
background: yellow;
11+
}
312
/*********** READ ONLY BLOCK ******
413
You CAN NOT UPDATE anything from here on,
514
only add lines of code on top of this lines

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,11 @@ body {
22
background: #bdbdbd;
33
}
44
.rounded {
5-
border-radius: 100%;
5+
border-radius: 150px;
6+
7+
}
8+
9+
div {
10+
object-fit: fill;
11+
object-position: 50px 120px;
612
}

‎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;
@@ -11,6 +10,6 @@
1110
}
1211

1312
a.threeDimension:active {
13+
background-color: red;
1414
/* your code here*/
15-
16-
}
15+
}

‎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+
<!--your code here -->
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: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200&display=swap");
12
.myTitle {
2-
/*your code here*/
3+
font-family: "Source Code Pro", monospace;
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+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
8+
<title>11 Font Awesome</title>
9+
</head>
10+
<body>
11+
<ul>
12+
<li><i class="fa fa-camera-retro"></i> Camera</li>
13+
<li><i class="fas fa-address-card"></i> Adress card</li>
14+
<li><i class="fa fa-bullhorn"></i> Megafono</li>
15+
</ul>
16+
</body>
1417
</html>

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

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

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

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

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

510
.orange-btn:hover {
11+
background-color: rgb(139, 94, 8);
12+
613
/*YOUR CODE HERE FOR THE HOVER STATE*/
714
}

0 commit comments

Comments
 (0)