Skip to content

Commit a9a37ac

Browse files
committed
commit
1 parent 326a5d2 commit a9a37ac

File tree

20 files changed

+180
-20
lines changed

20 files changed

+180
-20
lines changed
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 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>
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: 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>
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: 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+
<!--your code here -->
7+
8+
<link rel="stylesheet" type="text/css" href="./styles.css" />
9+
10+
<title>10 Your Own Font</title>
11+
</head>
12+
<body>
13+
<h1 class="myTitle">My unique font</h1>
14+
</body>
15+
</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/78d2a11ad0.js" crossorigin="anonymous"></script>
8+
<title>11 Font Awesome</title>
9+
</head>
10+
<body>
11+
<ul>
12+
<li><i class="fa fa-camera-retro"></i> Hello</li>
13+
</ul>
14+
</body>
15+
</html>
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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+
<div id="the-second-one">
16+
<h2>Second h2 heading</h2>
17+
<h3>Second h3 heading</h3>
18+
<p>More fake content but now in the second container</p>
19+
</div>
20+
</body>
21+
</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/01-Hello-World/index.html

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,17 @@
1-
<!-- your code here -->
1+
<!DOCTYPE html>
2+
<html lang="en">
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+
<title>Document</title>
8+
</head>
9+
<body>
10+
<style>
11+
a {
12+
color: pink;
13+
}
14+
</style>
15+
<a href="https://google.com" target="_blank">click here to open</a>
16+
</body>
17+
</html>
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+
color: blue;
3+
}

exercises/08-Rounded-Image/styles.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,6 @@ body {
33
}
44
.rounded {
55
border-radius: 100%;
6+
object-fit: cover;
7+
object-position: 10;
68
}

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: 1 addition & 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,4 @@
1211

1312
a.threeDimension:active {
1413
/* your code here*/
15-
16-
}
14+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<body>
1111
<ul>
1212
<li><i class="fa fa-camera-retro"></i> Hello</li>
13+
<li><i class="fas fa-address-card"></i> Xulo</li>
1314
</ul>
1415
</body>
1516
</html>

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,19 @@
77
<title>12 Relative Length EM REM</title>
88
</head>
99
<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>
10+
<div class="headings2">
11+
<div id="my-first-div">
12+
<h2>First h2 heading</h2>
13+
<h3>First h3 heading</h3>
14+
<p>Here is some nice fake content</p>
15+
</div>
1416
</div>
15-
<div id="the-second-one">
16-
<h2>Second h2 heading</h2>
17-
<h3>Second h3 heading</h3>
18-
<p>More fake content but now in the second container</p>
17+
<div class="headings3">
18+
<div id="the-second-one">
19+
<h2>Second h2 heading</h2>
20+
<h3>Second h3 heading</h3>
21+
<p>More fake content but now in the second container</p>
22+
</div>
1923
</div>
2024
</body>
2125
</html>

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,9 @@
44
#the-second-one {
55
font-size: 25px;
66
}
7-
8-
/* YOUR CODE BELOW THIS LINE */
7+
.headings2 h2 {
8+
font-size: 0.8em;
9+
}
10+
.headings3 h3 {
11+
font-size: 0.8rem;
12+
}
Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
.orange-btn {
2+
text-decoration: none;
3+
color: white;
4+
border-radius: 4px;
5+
padding: 10px;
6+
background-color: orange;
27
/*your code here*/
38
}
49

510
.orange-btn:hover {
6-
/*YOUR CODE HERE FOR THE HOVER STATE*/
11+
background-color: rgb(209, 145, 26);
712
}

0 commit comments

Comments
 (0)