fix the position

mewmewdevart · Sep 30, 2023 · a289c0d · a289c0d
1 parent 3e2a26e
commit a289c0d
Showing 1 changed file with 28 additions and 2 deletions.
diff --git a/AbstractCSS/10_CSSBattle/10css.html b/AbstractCSS/10_CSSBattle/10css.html
@@ -3,8 +3,34 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <style>body{display:flex;justify-content:center;background-color:#C74E4E}div{position:absolute;margin:82px;width:20px;height:20px;background:#FFF;border-radius:100px}div:after{content:"";width:20px;height:20px;background:#E0E246;position:absolute;margin-left:100px;border-radius:5px;box-shadow:25px 0 0 0 #E0E246,50px 0 0 0 #E0E246,75px 0 0 0 #E0E246,100px 0 0 0 #E0E246,100px 25px 0 0 #E0E246,100px 50px 0 0 #E0E246,100px 75px 0 0 #E0E246,100px 100px 0 0 #E0E246,75px 100px 0 0 #E0E246,50px 100px 0 0 #E0E246,25px 100px 0 0 #E0E246,0 100px 0 0 #E0E246,-25px 100px 0 0 #E0E246,-50px 100px 0 0 #E0E246,-75px 100px 0 0 #E0E246,-100px 100px 0 0 #E0E246}
-    </style>
+    <style>
+        body {
+          display: flex;
+          justify-content: center;
+          background-color: #C74E4E;
+        }
+
+        div {
+          position: absolute;
+          width: 20px;
+          height: 20px;
+          margin-left: -200px;
+          background: #FFF;
+          border-radius: 100px;
+        }
+
+        div:after {
+          content: "";
+          width: 20px;
+          height: 20px;
+          background: #E0E246;
+          position: absolute;
+          margin-left: 100px;
+          border-radius: 5px;
+          box-shadow: 25px 0 0 0 #E0E246, 50px 0 0 0 #E0E246, 75px 0 0 0 #E0E246, 100px 0 0 0 #E0E246, 100px 25px 0 0 #E0E246, 100px 50px 0 0 #E0E246, 100px 75px 0 0 #E0E246, 100px 100px 0 0 #E0E246, 75px 100px 0 0 #E0E246, 50px 100px 0 0 #E0E246, 25px 100px 0 0 #E0E246, 0 100px 0 0 #E0E246, -25px 100px 0 0 #E0E246, -50px 100px 0 0 #E0E246, -75px 100px 0 0 #E0E246, -100px 100px 0 0 #E0E246;
+        }
+      </style>
+
     <title>10CSS Battle</title>
 </head>
 <body>