Code 2 - Class 15

MDJAmin · MDJAmin · commit 641cd4e79e13 · 2026-02-26T15:16:29.000+03:30
diff --git a/Block Chain Collage Code 2/15/css/style.css b/Block Chain Collage Code 2/15/css/style.css
@@ -0,0 +1,47 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  list-style: none;
+}
+
+.container {
+  height: 90vh;
+  position: relative;
+  overflow: hidden;
+}
+
+.container img {
+  position: absolute;
+  z-index: 100;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transition: all 0.5s;
+}
+
+.container i {
+  position: absolute;
+  padding: 10px;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 50%;
+  color: white;
+  font-size: 35px;
+  z-index: 101;
+  cursor: pointer;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.container .bx-arrow-left {
+  left: 5%;
+}
+
+.container .bx-arrow-right {
+  right: 5%;
+}
+
+.show {
+  opacity: 1 !important;
+}
diff --git a/Block Chain Collage Code 2/15/index.html b/Block Chain Collage Code 2/15/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href='https://cdn.boxicons.com/fonts/basic/boxicons.min.css' rel='stylesheet'>
+  <link rel="stylesheet" href="css/style.css">
+  <title>Document</title>
+</head>
+<body>
+  <div class="container">
+    <i class='bx bx-arrow-left' id="prev"></i>
+
+    <i class='bx bx-arrow-right' id="next"></i>
+  </div>
+  <script src="js/script.js"></script>
+</body>
+</html>
