CSS practice JN

josnavch · josnavch · commit 64c01dcf989b · 2021-02-04T23:41:14.000Z
diff --git a/.learn/resets/03-Inline-Styles/index.html b/.learn/resets/03-Inline-Styles/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>03 Inline Styles</title>
+	</head>
+
+	<body>
+		<table>
+			<tr>
+				<td>Hello</td>
+			</tr>
+			<tr>
+				<td>My brother</td>
+			</tr>
+		</table>
+	</body>
+</html>
diff --git a/.learn/resets/04-Class-Selector/index.html b/.learn/resets/04-Class-Selector/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<title>
+			04 Class selector
+		</title>
+	</head>
+
+	<body>
+		<p>Hello!</p>
+		<p>World!</p>
+	</body>
+</html>
diff --git a/.learn/resets/04-Class-Selector/styles.css b/.learn/resets/04-Class-Selector/styles.css
@@ -0,0 +1,3 @@
+.b-blue {
+	background: blue;
+}
diff --git a/.learn/resets/04.1-Combined-Rules/index.html b/.learn/resets/04.1-Combined-Rules/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<title>
+			04 Combined Rules
+		</title>
+	</head>
+
+	<body>
+		<div class="myBox">Hello!</div>
+	</body>
+</html>
diff --git a/.learn/resets/04.1-Combined-Rules/styles.css b/.learn/resets/04.1-Combined-Rules/styles.css
@@ -0,0 +1,14 @@
+.myBox {
+	width: 50px;
+	height: 50px;
+	padding-top: 10px;
+	padding-left: 30px;
+	padding-right: 190px;
+	padding-bottom: 50px;
+
+    background: rgb(189, 189, 189);
+	background-image: url(https://assets.breatheco.de/apis/img/funny/baby.jpg);
+	background-position-x: 100px;
+	background-repeat: no-repeat;
+	background-size: contain;
+}
diff --git a/.learn/resets/04.2-Apply-several-classes/index.html b/.learn/resets/04.2-Apply-several-classes/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<title>
+			04 Class selector
+		</title>
+	</head>
+
+	<body>
+		<div class="card spades">9</div>
+	</body>
+</html>
diff --git a/.learn/resets/04.2-Apply-several-classes/styles.css b/.learn/resets/04.2-Apply-several-classes/styles.css
@@ -0,0 +1,26 @@
+.card {
+	display: inline-block;
+	width: 50px;
+	height: 80px;
+	position: relative;
+	border: 1px solid black;
+	text-align: center;
+	line-height: 80px;
+	border-radius: 5px;
+}
+.card:after {
+	font-size: 70%;
+	font-weight: bold;
+}
+
+.spades,
+.spades:after {
+	content: "♤";
+	color: black;
+}
+
+.heart,
+.heart:after {
+	content: "♡";
+	color: red;
+}
diff --git a/.learn/resets/04.3-id-Selector/index.html b/.learn/resets/04.3-id-Selector/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<title>
+			04.3 ID selector
+		</title>
+	</head>
+
+	<body>
+		<span>I should look like a button</span>
+	</body>
+</html>
diff --git a/.learn/resets/04.3-id-Selector/styles.css b/.learn/resets/04.3-id-Selector/styles.css
@@ -0,0 +1,5 @@
+#button1 {
+	background: #BDBDBD;
+    border: #5E5E5E;
+    border-radius: 5px;
+}
diff --git a/exercises/01.3-Your-Second-Style/index.html b/exercises/01.3-Your-Second-Style/index.html
@@ -2,6 +2,7 @@
 <html>
 	<head>
 		<style>
+			/* Your code here */
 			body {
 				background: blue;
 			}
diff --git a/exercises/02.1-Background/styles.css b/exercises/02.1-Background/styles.css
@@ -1,5 +1,5 @@
 body {
 	background-image: url(https://4geeksacademy.github.io/exercise-assets/img/bg/small-mosaic.jpg);
-	background-size: cover;
-	background-repeat: no-repeat;
+	background-size: 25px 25px;
+	background-repeat: inherit;
 }
diff --git a/exercises/03-Inline-Styles/index.html b/exercises/03-Inline-Styles/index.html
@@ -5,7 +5,7 @@
 	</head>
 
 	<body>
-		<table>
+		<table style="background-color: green;">
 			<tr>
 				<td>Hello</td>
 			</tr>
diff --git a/exercises/04-Class-Selector/index.html b/exercises/04-Class-Selector/index.html
@@ -8,7 +8,7 @@
 	</head>
 
 	<body>
-		<p>Hello!</p>
-		<p>World!</p>
+		<p class="b-blue">Hello!</p>
+		<p class="b-blue">World!</p>
 	</body>
 </html>
diff --git a/exercises/04.1-Combined-Rules/index.html b/exercises/04.1-Combined-Rules/index.html
@@ -9,5 +9,6 @@
 
 	<body>
 		<div class="myBox">Hello!</div>
+		<div class="myBox2">Hello2!</div>
 	</body>
 </html>
diff --git a/exercises/04.1-Combined-Rules/styles.css b/exercises/04.1-Combined-Rules/styles.css
@@ -6,9 +6,18 @@
 	padding-right: 190px;
 	padding-bottom: 50px;
 
-    background: rgb(189, 189, 189);
+	background: rgb(189, 189, 189);
 	background-image: url(https://assets.breatheco.de/apis/img/funny/baby.jpg);
 	background-position-x: 100px;
 	background-repeat: no-repeat;
 	background-size: contain;
 }
+
+.myBox2 {
+	border-style: solid;
+	width: 50px;
+	height: 50px;
+	padding: 10px 190px 50px 30px;
+
+	background: yellowgreen url("https://assets.breatheco.de/apis/img/funny/baby.jpg") no-repeat right bottom;
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.b-blue {`
	`2`	`+ background: blue;`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@`
`2`	`2`	`<html>`
`3`	`3`	`<head>`
`4`	`4`	`<style>`
	`5`	`+ /* Your code here */`
`5`	`6`	`body {`
`6`	`7`	`background: blue;`
`7`	`8`	`}`