Skip to content

Commit 86de257

Browse files
deividxyzdeividxyz
committed
ejercicios css 2
1 parent c4916f2 commit 86de257

File tree

16 files changed

+129
-21
lines changed

16 files changed

+129
-21
lines changed

‎.learn/resets/08-Rounded-Image/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+
<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>

‎.learn/resets/09-Anchor-Styles/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+
<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>

‎.learn/resets/10-Your-Own-Font/index.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>

‎.learn/resets/11-Font-Awesome-Icons/index.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>

‎.learn/resets/12-Relative-Length-EM-REM/index.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>

‎.learn/resets/13-Anchor-Like-Button/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+
<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/07-Very-Specific-Rules/styles.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
/** Insert your code here **/
2-
ul {
2+
ul li {
33
color: red !important;
44
}
55

6-
ol > li:nth-child(2) {
6+
ol li:nth-child(2) {
77
background-color: green;
88
}
99

10-
tr:nth-child(2) {
10+
tr:nth-child(2n + 1) {
1111
background-color: yellow;
1212
}
1313
/*********** READ ONLY BLOCK ******

‎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+
object-fit: cover;
7+
object-position: 50% 0%;
8+
width: 300px;
9+
height: 300px;
610
}

‎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: 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; /* cuando esta activo lo hago */
15+
}

‎exercises/10-Your-Own-Font/index.html

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width" />
6-
<!--your code here -->
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<!--your code here -->
77

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>
8+
<link rel="stylesheet" type="text/css" href="./styles.css" />
9+
<link href="https://fonts.googleapis.com/css?family=Hurricane" rel="stylesheet" /> <!-- código para añadir fuente, debe ir en head-->
10+
<title>10 Your Own Font</title>
11+
</head>
12+
<body>
13+
<h1 class="myTitle">My unique font</h1>
14+
</body>
1515
</html>

‎exercises/10-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-
/*your code here*/
2+
font-family: Hurricane; /* acá llamo a la google font para la clase myTitle */
33
}

‎exercises/11-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="fa fa-camera-retro"></i> Hello</li>
13+
<li><i class="fa fa-bomb"></i> Kernel panic</li>
14+
<li><i class="fa fa-skull-crossbones"></i> Peter veneno</li>
1315
</ul>
1416
</body>
1517
</html>

‎exercises/12-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+
}

‎exercises/13-Anchor-Like-Button/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<title>13 Anchor Like Button</title>
88
</head>
99
<body>
10-
<a href="#" class="orange-btn">Beautiful Button</a>
10+
<a href="#" class="orange-btn">Beautiful Button</a> <!--llamo al estilo con la clase-->
1111
</body>
1212
</html>

‎exercises/13-Anchor-Like-Button/styles.css

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
.orange-btn {
22
/*your code here*/
3+
padding: 10px 10px 10px 10px; /*padding de 10px a cada lado, recordar que parte clockwise */
4+
border-radius: 4px; /*redondeo*/
5+
background-color: rgb(243, 156, 18); /*color según color picker */
6+
text-decoration: none; /*sin subrayado*/
7+
color: white; /*color del texto*/
38
}
49

510
.orange-btn:hover {
6-
/*YOUR CODE HERE FOR THE HOVER STATE*/
11+
/*selector hover*/
12+
background-color: darkorange; /*más oscuro*/
713
}

0 commit comments

Comments
 (0)