Skip to content

Commit 615da94

Browse files
committed
These are my results
1 parent 6ddfc18 commit 615da94

File tree

63 files changed

+650
-35
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+650
-35
lines changed
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 -->
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>
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>
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>
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>
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+
*/
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>
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+
}
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>
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+
}
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>
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+
}
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>
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+
}
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>
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+
}
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>
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+
}
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>06 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 fourth item of the list</li>
15+
<li>My fifth item of the list</li>
16+
</ul>
17+
</body>
18+
</html>
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
ul li {
2+
background: blue;
3+
}
4+
5+
li + #thirditem {
6+
background: yellow;
7+
}
8+
/**** DO NOT EDIT ANYTHING ABOVE THIS LINE ****/
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>07 Practicing Rules</title>
8+
</head>
9+
10+
<body>
11+
<div style="width: 640px">
12+
<h1>The learning essay</h1>
13+
<h2>3 reasons you know you are learning</h2>
14+
<p id="id1">
15+
We are going to explain in this paragraph the 3 most common signs that you should look into yourself to recognize if you are learning.
16+
</p>
17+
<ol>
18+
<li>You are able to complete the exercises by yourself.</li>
19+
<li>You understand what the teacher is talking about.</li>
20+
<li>You are able to have conversations about the topic.</li>
21+
</ol>
22+
<h2>3 reasons you love what you are learning</h2>
23+
<ul>
24+
<li>Time passes fast.</li>
25+
<li>You are anxious to finish this exercise and start the next one.</li>
26+
<li>It's 12am and you don't want to go to sleep.</li>
27+
</ul>
28+
<p>
29+
If you can't sleep, what's better than watching videos of cats?
30+
<a href="https://www.youtube.com/shorts/wdjpworLSk8">click here</a>
31+
</p>
32+
</div>
33+
</body>
34+
</html>
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* add your styles here */
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>08 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 paragraph the 3 most common 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>You 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 exercise and start the next one.</li>
24+
<li>It's 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/shorts/wdjpworLSk8">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</td>
38+
<td>Male</td>
39+
</tr>
40+
<tr>
41+
<td>22</td>
42+
<td>Female</td>
43+
</tr>
44+
<tr>
45+
<td>11</td>
46+
<td>Male</td>
47+
</tr>
48+
<tr>
49+
<td>21</td>
50+
<td>Male</td>
51+
</tr>
52+
<tr>
53+
<td>22</td>
54+
<td>Female</td>
55+
</tr>
56+
<tr>
57+
<td>10</td>
58+
<td>Male</td>
59+
</tr>
60+
<tr>
61+
<td>13</td>
62+
<td>Female</td>
63+
</tr>
64+
<tr>
65+
<td>13</td>
66+
<td>Male</td>
67+
</tr>
68+
<tr>
69+
<td>10</td>
70+
<td>Male</td>
71+
</tr>
72+
<tr>
73+
<td>11</td>
74+
<td>Male</td>
75+
</tr>
76+
<tr>
77+
<td>11</td>
78+
<td>Male</td>
79+
</tr>
80+
</table>
81+
</body>
82+
</html>

0 commit comments

Comments
 (0)