Skip to content

Commit 64c01dc

Browse files
josnavchjosnavch
committed
CSS practice JN
1 parent cedbc50 commit 64c01dc

File tree

15 files changed

+135
-6
lines changed

15 files changed

+135
-6
lines changed

‎.learn/resets/03-Inline-Styles/index.html

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>03 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/04-Class-Selector/index.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+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
<title>
6+
04 Class selector
7+
</title>
8+
</head>
9+
10+
<body>
11+
<p>Hello!</p>
12+
<p>World!</p>
13+
</body>
14+
</html>

‎.learn/resets/04-Class-Selector/styles.css

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+
}

‎.learn/resets/04.1-Combined-Rules/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+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
<title>
6+
04 Combined Rules
7+
</title>
8+
</head>
9+
10+
<body>
11+
<div class="myBox">Hello!</div>
12+
</body>
13+
</html>

‎.learn/resets/04.1-Combined-Rules/styles.css

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://assets.breatheco.de/apis/img/funny/baby.jpg);
11+
background-position-x: 100px;
12+
background-repeat: no-repeat;
13+
background-size: contain;
14+
}

‎.learn/resets/04.2-Apply-several-classes/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+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
<title>
6+
04 Class selector
7+
</title>
8+
</head>
9+
10+
<body>
11+
<div class="card spades">9</div>
12+
</body>
13+
</html>

‎.learn/resets/04.2-Apply-several-classes/styles.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.card {
2+
display: inline-block;
3+
width: 50px;
4+
height: 80px;
5+
position: relative;
6+
border: 1px solid black;
7+
text-align: center;
8+
line-height: 80px;
9+
border-radius: 5px;
10+
}
11+
.card:after {
12+
font-size: 70%;
13+
font-weight: bold;
14+
}
15+
16+
.spades,
17+
.spades:after {
18+
content: "♤";
19+
color: black;
20+
}
21+
22+
.heart,
23+
.heart:after {
24+
content: "♡";
25+
color: red;
26+
}

‎.learn/resets/04.3-id-Selector/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+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
<title>
6+
04.3 ID selector
7+
</title>
8+
</head>
9+
10+
<body>
11+
<span>I should look like a button</span>
12+
</body>
13+
</html>

‎.learn/resets/04.3-id-Selector/styles.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
#button1 {
2+
background: #BDBDBD;
3+
border: #5E5E5E;
4+
border-radius: 5px;
5+
}

‎exercises/01.3-Your-Second-Style/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html>
33
<head>
44
<style>
5+
/* Your code here */
56
body {
67
background: blue;
78
}

‎exercises/02.1-Background/styles.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
body {
22
background-image: url(https://4geeksacademy.github.io/exercise-assets/img/bg/small-mosaic.jpg);
3-
background-size: cover;
4-
background-repeat: no-repeat;
3+
background-size: 25px 25px;
4+
background-repeat: inherit;
55
}

‎exercises/03-Inline-Styles/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</head>
66

77
<body>
8-
<table>
8+
<table style="background-color: green;">
99
<tr>
1010
<td>Hello</td>
1111
</tr>

‎exercises/04-Class-Selector/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</head>
99

1010
<body>
11-
<p>Hello!</p>
12-
<p>World!</p>
11+
<p class="b-blue">Hello!</p>
12+
<p class="b-blue">World!</p>
1313
</body>
1414
</html>

‎exercises/04.1-Combined-Rules/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,6 @@
99

1010
<body>
1111
<div class="myBox">Hello!</div>
12+
<div class="myBox2">Hello2!</div>
1213
</body>
1314
</html>

‎exercises/04.1-Combined-Rules/styles.css

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,18 @@
66
padding-right: 190px;
77
padding-bottom: 50px;
88

9-
background: rgb(189, 189, 189);
9+
background: rgb(189, 189, 189);
1010
background-image: url(https://assets.breatheco.de/apis/img/funny/baby.jpg);
1111
background-position-x: 100px;
1212
background-repeat: no-repeat;
1313
background-size: contain;
1414
}
15+
16+
.myBox2 {
17+
border-style: solid;
18+
width: 50px;
19+
height: 50px;
20+
padding: 10px 190px 50px 30px;
21+
22+
background: yellowgreen url("https://assets.breatheco.de/apis/img/funny/baby.jpg") no-repeat right bottom;
23+
}

0 commit comments

Comments
 (0)