starting transform section

index.html

@@ -122,7 +122,18 @@ <h1>Year Ending Sale</h1>
     <!-- transform and animation part -->
     <!-- transform and animation part -->
     <section class="transform-part">
-
+        <h2>It's transform</h2>
+        <div class="transform-box">
+            <div class="box box1">
+                <h5>Box No1</h5>
+            </div>
+            <div class="box box2">
+                <h5>Box No2</h5>
+            </div>
+            <div class="box box3">
+                <h5>Box No3</h5>
+            </div>
+        </div>
     </section>
 
 

transform.css

@@ -0,0 +1,31 @@
+.transform-part {
+    margin-top: 30px;
+    background-color: antiquewhite;
+}
+
+.transform-part h2 {
+    padding: 20px;
+
+}
+
+.transform-box {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+}
+
+.box {
+    padding: 10px;
+    background-color: lightcoral;
+    border-radius: 5px;
+}
+
+.box1 {
+    transform: ;
+}
+
+.box:hover {
+    background-color: darkorchid;
+    color: white;
+    transition: all 0.5s ease-in-out;
+}

transition.css

@@ -5,7 +5,7 @@
     justify-content: space-between;
     align-items: center;
     width: 80%;
-    margin: 20px auto;
+    margin: 40px auto;
 }
 
 .transition-portion {