feat(JS): create sliding-part container

josueJURE · josueJURE · commit b03826e3d6f0 · 2023-12-25T11:48:42.000Z
diff --git a/index.css b/index.css
@@ -23,13 +23,31 @@ body {
   border-radius: 15px;
   overflow: hidden;
   display: grid;
+  /* grid-template-columns: repeat(4, 1fr); */
+  /* column-gap: 10px; */
+  row-gap: 10px;
+  padding: 10px;
+  padding-top: 0;
+  background-color: rgb(27 22 22 / 39%);
+  justify-content: center;
+
+}
+
+.sliding-part {
+  height: 550px;
+  width: 400px;
+  border: black 1px solid;
+  border-radius: 15px;
+  overflow: hidden;
+  display: grid;
   grid-template-columns: repeat(4, 1fr);
   column-gap: 10px;
   row-gap: 10px;
   padding: 10px;
   background-color: rgb(27 22 22 / 39%);
-}
+  
 
+}
 .history,
 .child {
   border: 1px black solid;
@@ -40,6 +58,7 @@ body {
 }
 
 .screen {
+  height: 50px;
   grid-column-start: 1;
   grid-column-end: 5;
   border-radius: 15px;
diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
 <body>
     <div class="parent">
         <div data-screen class="screen">0</div>
-      
+        <div class="sliding-part">
             <div data-value="AC" class="child symbol">AC</div>
             <div data-value="minus" class="child symbol">+/-</div>
             <div data-value="%" data-operator class="child symbol">%</div>
@@ -30,9 +30,14 @@
             <div data-value="DE" class="child DE">DE</div>
             <div data-value="." class="child">.</div>
             <div data-value="=" data-operator  class="child operator">=</div>
+            <div data-value="history" class="history">history</div>
             <div data-value="(" data-operator  class="child operator">(</div>
             <div data-value=")" data-operator  class="child operator">)</div>
-            <div data-value="history" class="history">history</div>
+            
+
+        </div>
+      
+           
 
     
      
