Code 2 - Class 4

MDJAmin · MDJAmin · commit bbb1f7e64285 · 2025-12-26T13:30:13.000+03:30
diff --git a/Block Chain Collage Code 2/4/assets/headphone.png b/Block Chain Collage Code 2/4/assets/headphone.png
diff --git a/Block Chain Collage Code 2/4/css/style.css b/Block Chain Collage Code 2/4/css/style.css
@@ -0,0 +1,51 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+section {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+section:nth-child(1) {
+  background-color: rgb(183, 183, 183);
+}
+section:nth-child(2) {
+  background-color: rgb(0, 213, 255)
+}
+section:nth-child(3) {
+  background-color: rgb(255, 0, 204);
+}
+section div {
+  width: 100px;
+  height: 100px;
+}
+
+section div.box-red {
+  background-color: rgb(255, 0, 0);
+  position: absolute;
+  top: 10px;
+  left: 40%;
+  z-index: 2;
+}
+
+section div.box-yellow {
+  background-color: yellow;
+  position: absolute;
+  z-index: 1;
+  left: 35%;
+  top: 15px;
+}
+
+section div.box-green {
+  background-color: green;
+  position: absolute;
+  left: 30%;
+  top: 20px;
+}
diff --git a/Block Chain Collage Code 2/4/index.html b/Block Chain Collage Code 2/4/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <link
+      rel="stylesheet"
+      href="css/style.css"
+    />
+    <title>Document</title>
+  </head>
+  <body>
+    <section>
+      <div class="box-red"></div>
+      <div class="box-yellow"></div>
+      <div class="box-green"></div>
+    </section>
+    <section>
+      <div class="box-red"></div>
+      <div class="box-yellow"></div>
+      <div class="box-green"></div>
+    </section>
+    <section>
+      <div class="box-red"></div>
+      <div class="box-yellow"></div>
+      <div class="box-green"></div>
+    </section>
+  </body>
+</html>
