Skip to content

Commit 30da847

Browse files
JoseAnt7JoseAnt7
committed
Primeros ejercicios de CSS
1 parent 6ddfc18 commit 30da847

File tree

31 files changed

+279
-15
lines changed

31 files changed

+279
-15
lines changed

‎.learn/resets/01-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>01 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/02-style-tag/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/02.1-add-a-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, then 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 to code at a young age prepares them for the future. Coding helps children with communication, creativity,
5+
math, writing, and confidence.
6+
</p>

‎.learn/resets/02.2-rbga-colors/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 yellow */
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/02.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/03-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/03-separate-stylesheet/styles.css

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

‎.learn/resets/03.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>03.1 Background</title>
6+
</head>
7+
<body>
8+
My background should be an image with the size "contain"
9+
</body>
10+
</html>

‎.learn/resets/03.1-background/styles.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
body {
2+
background-image: url(https://4geeksacademy.github.io/exercise-assets/img/bg/small-mosaic.jpg);
3+
background-size: cover;
4+
background-repeat: no-repeat;
5+
}

‎.learn/resets/04-list-styling/index.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" type="text/css" href="./styles.css" />
8+
<title>04 List styling</title>
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<h2>Your favorite drinks</h2>
14+
<h4>Coca Cola drinks</h4>
15+
<ol class="cocacola">
16+
<li>Coca Cola</li>
17+
<li>Dr. Pepper</li>
18+
<li>Fanta</li>
19+
</ol>
20+
21+
<h4>Pepsi drinks</h4>
22+
<ol class="pepsi">
23+
<li>Pepsi Cola</li>
24+
<li>Mountain Dew</li>
25+
<li>Gatorade</li>
26+
</ol>
27+
28+
<h4>Healthy drinks</h4>
29+
<ul class="healthy">
30+
<li>Kombucha</li>
31+
<li>Kale juice</li>
32+
<li>Sparkling Water</li>
33+
</ul>
34+
35+
<h4>Web-developer drinks</h4>
36+
<ul class="dev-drinks">
37+
<li>Coffee</li>
38+
<li>COFFEE</li>
39+
<li>COFFEE!!!</li>
40+
</ul>
41+
</div>
42+
</body>
43+
</html>

‎.learn/resets/04-list-styling/styles.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
body {
2+
height: 100vh;
3+
background: rgb(189, 189, 189);
4+
}
5+
6+
.container {
7+
font-family: "Comic Sans MS", "Comic Sans", cursive;
8+
margin: 0 auto;
9+
width: 70vw;
10+
box-shadow: 3px 5px 20px #312f2f;
11+
background-color: white;
12+
padding: 120px;
13+
width: 300px;
14+
}

‎.learn/resets/05-class-selector/index.html

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

‎.learn/resets/05-class-selector/styles.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.b-blue {
2+
background: blue;
3+
}

‎.learn/resets/05.1-combined-rules/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+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
<title>05.1 Combined Rules</title>
6+
</head>
7+
8+
<body>
9+
<div class="myBox">Hello!</div>
10+
</body>
11+
</html>

‎.learn/resets/05.1-combined-rules/styles.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.myBox {
2+
width: 50px;
3+
height: 50px;
4+
padding-top: 10px;
5+
padding-left: 30px;
6+
padding-right: 190px;
7+
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;
13+
background-size: contain;
14+
}

‎.learn/resets/05.2-apply-several-classes/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+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
<title>04.2 Apply several classes</title>
6+
</head>
7+
8+
<body>
9+
<div class="card spades">9</div>
10+
</body>
11+
</html>

‎.learn/resets/05.2-apply-several-classes/styles.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.card {
2+
width: 150px;
3+
height: 240px;
4+
border: 1px solid black;
5+
text-align: center;
6+
line-height: 240px;
7+
border-radius: 5px;
8+
font-size: 1.5rem;
9+
}
10+
.card:after {
11+
font-size: 80%;
12+
font-weight: bold;
13+
}
14+
15+
.spades,
16+
.spades:after {
17+
content: "♤";
18+
color: black;
19+
}
20+
21+
.heart,
22+
.heart:after {
23+
content: "♡";
24+
color: red;
25+
}

‎.learn/resets/05.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+
05.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.3-id-selector/styles.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
#button1 {
2+
background-color: #4caf50; /* Green */
3+
color: white;
4+
padding: 15px 32px;
5+
text-align: center;
6+
display: inline-block;
7+
border-radius: 5px;
8+
}

‎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 & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
1-
<!-- Your code here -->
1+
<style>
2+
a {
3+
color: pink;
4+
}
5+
</style>
6+
<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 & 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/03-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/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: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,18 @@ body {
1111
background-color: white;
1212
padding: 120px;
1313
width: 300px;
14-
}
14+
}
15+
16+
.cocacola {
17+
list-style: lower-latin;
18+
}
19+
.pepsi {
20+
list-style: square;
21+
}
22+
23+
.healthy {
24+
list-style: armenian;
25+
}
26+
.dev-drinks {
27+
list-style: none;
28+
}

‎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 & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
.myBox {
22
width: 50px;
33
height: 50px;
4+
/*
45
padding-top: 10px;
56
padding-left: 30px;
67
padding-right: 190px;
78
padding-bottom: 50px;
9+
*/
10+
padding: 10px 190px 50px 30px;
811

12+
/*
913
background: rgb(189, 189, 189);
1014
background-image: url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true);
1115
background-position-x: 100px;
1216
background-repeat: no-repeat;
1317
background-size: contain;
18+
*/
19+
background: rgb(189, 189, 189) url("https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true") no-repeat 100px / contain;
20+
21+
1422
}

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

0 commit comments

Comments
 (0)