Skip to content

Commit 9a9bf31

Browse files
committed
terminado
1 parent 453b1ca commit 9a9bf31

File tree

23 files changed

+178
-13
lines changed

23 files changed

+178
-13
lines changed
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 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: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
body {
2+
background: #bdbdbd;
3+
}
4+
.rounded {
5+
border-radius: 100%;
6+
}
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>10 Anchor Styles</title>
8+
</head>
9+
10+
<body>
11+
<a class="threeDimension" href="#">Click me</a>
12+
</body>
13+
</html>
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
2+
.threeDimension {
3+
display: block;
4+
border: 1px solid;
5+
border-color: #aaa #000 #000 #aaa;
6+
width: 8em;
7+
background: #fc0;
8+
text-decoration: none;
9+
text-align: center;
10+
color: black;
11+
font-size: 22px;
12+
}
13+
14+
a.threeDimension:active {
15+
/* your code here*/
16+
17+
}
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>11 Your Own Font</title>
10+
</head>
11+
<body>
12+
<h1 class="myTitle">My unique font</h1>
13+
</body>
14+
</html>
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.myTitle {
2+
/* Add your code below this line */
3+
}
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>12 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: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
li {
2+
font-size: 2.5rem;
3+
list-style: none;
4+
}
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>13 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: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
#my-first-div {
2+
font-size: 15px;
3+
}
4+
#the-second-one {
5+
font-size: 25px;
6+
}
7+
8+
/* YOUR CODE BELOW THIS LINE */
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>14 Anchor Like Button</title>
8+
</head>
9+
<body>
10+
<a href="#" class="orange-btn">Beautiful Button</a>
11+
</body>
12+
</html>
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.orange-btn {
2+
display: inline-block;
3+
/* your code below */
4+
5+
}
6+
7+
.orange-btn:hover {
8+
/* YOUR CODE HERE FOR THE HOVER STATE */
9+
10+
}

exercises/07-practicing-rules/styles.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,5 @@ h2 {
1818
}
1919
a:hover {
2020
text-decoration: none;
21-
color: green;
21+
color: green;
2222
}
23-

exercises/08-very-specific-rules/styles.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
/** Insert your code here **/
22

3+
ul li {
4+
color: red !important;
5+
}
6+
7+
ol li:nth-child(2){
8+
background-color: green;
9+
}
10+
11+
tr:nth-child(odd) {
12+
background-color: yellow;
13+
}
14+
315
/********** READ-ONLY BLOCK ******
416
You CANNOT UPDATE anything from here on,
517
only add lines of code on top of these lines

exercises/09-rounded-image/styles.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,9 @@ body {
22
background: #bdbdbd;
33
}
44
.rounded {
5-
border-radius: 100%;
5+
object-position: top;
6+
border-radius: 0%;
7+
width: 120px;
8+
height: 120px;
9+
object-fit: cover;
610
}

exercises/10-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,6 +11,5 @@
1211
}
1312

1413
a.threeDimension:active {
15-
/* your code here*/
16-
14+
border-color: #000 #aaa #aaa #000;
1715
}

exercises/11-your-own-font/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width" />
6+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine" />
67
<!-- Add your code below this line -->
78

89
<link rel="stylesheet" type="text/css" href="./styles.css" />

exercises/11-your-own-font/styles.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.myTitle {
2-
/* Add your code below this line */
2+
font-family: "Tangerine", serif;
33
}

exercises/12-font-awesome-icons/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
<body>
1111
<ul>
1212
<li><i class="fas fa-camera-retro"></i> Hello</li>
13+
<li><i class="fa-solid fa-music"></i></i></li>
14+
<li><i class="fa-brands fa-instagram"></i></li>
1315
</ul>
1416
</body>
1517
</html>

exercises/13-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/13-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/13-relative-length-em-rem/styles.css

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

88
/* YOUR CODE BELOW THIS LINE */
9+
10+
h2 {
11+
font-size: 0.8em;
12+
}
13+
14+
h3 {
15+
font-size: 0.8rem;
16+
}
Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
.orange-btn {
22
display: inline-block;
33
/* your code below */
4-
4+
padding: 10px;
5+
border-radius: 4px;
6+
background-color: orange;
57
}
68

79
.orange-btn:hover {
810
/* YOUR CODE HERE FOR THE HOVER STATE */
9-
11+
background-color: darkorange;
12+
text-decoration: none;
13+
color: white;
1014
}

0 commit comments

Comments
 (0)