Skip to content

Commit c0946d8

Browse files
committed
all exercises completed
1 parent 6d4918e commit c0946d8

File tree

20 files changed

+275
-10
lines changed

20 files changed

+275
-10
lines changed
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+
<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 pharagraph the 3 most comon 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>Your are able to have conversations about the topic</li>
21+
</ol>
22+
<h2>3 reasons you know love what you are learning</h2>
23+
<ul>
24+
<li>Time passes fast.</li>
25+
<li>You are anxious to finish this excercise and start the next one.</li>
26+
<li>Is 12am and you don't want to go to sleep.</li>
27+
</ul>
28+
<p>
29+
If you can't sleep, what better than watching videos of cats?
30+
<a href="https://www.youtube.com/watch?v=WEgWMOzQ8IE">click here</a>
31+
</p>
32+
</div>
33+
</body>
34+
</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>
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+
<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 Rounded Image</title>
8+
</head>
9+
10+
<body>
11+
<img class="rounded" src="https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/einstein.png?raw=true" />
12+
</body>
13+
</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+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<link rel="stylesheet" type="text/css" href="./styles.css" />
7+
<title>09 Anchor Styles</title>
8+
</head>
9+
10+
<body>
11+
<a class="threeDimension" href="#">Click me</a>
12+
</body>
13+
</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+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<!-- Add your code below this line -->
7+
8+
<link rel="stylesheet" type="text/css" href="./styles.css" />
9+
<title>10 Your Own Font</title>
10+
</head>
11+
<body>
12+
<h1 class="myTitle">My unique font</h1>
13+
</body>
14+
</html>
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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+
<script src="https://kit.fontawesome.com/072e5df971.js" crossorigin="anonymous"></script>
8+
<title>11 Font Awesome</title>
9+
</head>
10+
<body>
11+
<ul>
12+
<li><i class="fas fa-camera-retro"></i> Hello</li>
13+
</ul>
14+
</body>
15+
</html>
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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>12 Relative Length EM REM</title>
8+
</head>
9+
<body>
10+
<div id="my-first-div">
11+
<h2>First h2 heading</h2>
12+
<h3>First h3 heading</h3>
13+
<p>Here is some nice fake content</p>
14+
</div>
15+
16+
<div id="the-second-one">
17+
<h2>Second h2 heading</h2>
18+
<h3>Second h3 heading</h3>
19+
<p>More fake content but now in the second container</p>
20+
</div>
21+
</body>
22+
</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+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<link rel="stylesheet" type="text/css" href="./styles.css" />
7+
<title>13 Anchor Like Button</title>
8+
</head>
9+
<body>
10+
<a href="#" class="orange-btn">Beautiful Button</a>
11+
</body>
12+
</html>

exercises/05-Specificity/styles.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,6 @@ ul li {
66
background: yellow;
77
}
88
/****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/
9+
#thirditem {
10+
background: green !important;
11+
}
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,26 @@
11
/* add your styles here */
2+
body {
3+
background: url("../../.learn/assets/background-vertical.jpg?raw=true");
4+
background-repeat: no-repeat;
5+
font-family: "Times New Roman";
6+
padding-left: 20px;
7+
}
8+
9+
h1 {
10+
font-family: "Courier";
11+
color: red;
12+
}
13+
14+
h2 {
15+
text-decoration: underline;
16+
}
17+
18+
#id1 {
19+
background-color: rgba(255, 255, 255, 0.2);
20+
padding: 5px;
21+
}
22+
23+
a:hover {
24+
color: green;
25+
text-decoration: none;
26+
}

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

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

10+
tr:nth-child(odd) {
11+
background-color: yellow;
12+
}
313
/*********** READ ONLY BLOCK ******
414
You CANNOT UPDATE anything from here on,
515
only add lines of code on top of this lines

exercises/08-Rounded-Image/styles.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,8 @@ body {
33
}
44
.rounded {
55
border-radius: 100%;
6+
width: 400px;
7+
height: 400px;
8+
object-position: top;
9+
object-fit: cover;
610
}

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: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width" />
66
<!-- Add your code below this line -->
7+
<link href="https://fonts.googleapis.com/css?family=YOUR_FONT" rel="stylesheet" />
78

89
<link rel="stylesheet" type="text/css" href="./styles.css" />
910
<title>10 Your Own Font</title>

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
/* Add your code below this line */
3+
font-family: "Poppins", sans-serif;
34
}

exercises/11-Font-Awesome-Icons/index.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,11 @@
1111
<ul>
1212
<li><i class="fas fa-camera-retro"></i> Hello</li>
1313
</ul>
14+
<ul>
15+
<li><i class="fas fa-camera-retro"></i> Camera Retro</li>
16+
</ul>
17+
<ul>
18+
<li><i class="fa-solid fa-skull"></i> Skull</li>
19+
</ul>
1420
</body>
1521
</html>

exercises/12-Relative-Length-EM-REM/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ <h2>First h2 heading</h2>
1212
<h3>First h3 heading</h3>
1313
<p>Here is some nice fake content</p>
1414
</div>
15-
15+
1616
<div id="the-second-one">
1717
<h2>Second h2 heading</h2>
1818
<h3>Second h3 heading</h3>

exercises/12-Relative-Length-EM-REM/solution.hide.css

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

88
/* YOUR CODE BELOW THIS LINE */
9-
h2{
9+
h2 {
1010
font-size: 0.8em;
1111
}
1212

13-
h3{
13+
h3 {
1414
font-size: 0.8rem;
15-
}
15+
}

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+
h2 {
10+
font-size: 0.8em;
11+
}
12+
13+
h3 {
14+
font-size: 0.8rem;
15+
}
Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
.orange-btn {
22
/*your code here*/
3-
3+
padding: 10px;
4+
border-radius: 4px;
5+
background-color: orange;
6+
text-decoration: none;
7+
color: white;
48
}
59

610
.orange-btn:hover {
711
/*YOUR CODE HERE FOR THE HOVER STATE*/
8-
9-
}
12+
background-color: #cc7a00;
13+
}

0 commit comments

Comments
 (0)