From 0117c50fa735583a97cf1f40ebe13a54d78520a3 Mon Sep 17 00:00:00 2001
From: alirezashafiun <alirezashafiun@gmail.com>
Date: Wed, 26 Jul 2023 12:20:48 +0330
Subject: [PATCH] finished car project

---
 movingCar/index.html |  7 ++++++
 movingCar/style.css  | 59 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 66 insertions(+)

diff --git a/movingCar/index.html b/movingCar/index.html
index e505e15..230109a 100644
--- a/movingCar/index.html
+++ b/movingCar/index.html
@@ -12,6 +12,13 @@
     <div class="main-bg">
         <div class="road"></div>
         <div class="buildings"></div>
+        <div class="car">
+            <img src="./image/carImage.png" alt="">
+        </div>
+        <div class="wheels">
+            <img class="wheel-back" src="./image/circle.png" alt="">
+            <img class="wheel-front" src="./image/circle.png" alt="">
+        </div>
     </div>
 </body>
 
diff --git a/movingCar/style.css b/movingCar/style.css
index d247591..c85747a 100644
--- a/movingCar/style.css
+++ b/movingCar/style.css
@@ -76,4 +76,63 @@ ul {
     100% {
         transform: translateX(-4000px);
     }
+}
+
+.car {
+    width: 400px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 130px;
+    z-index: 2;
+}
+
+.car img {
+    width: 100%;
+    animation: shake 1s linear infinite;
+}
+
+@keyframes shake {
+    0% {
+        transform: translateY(-1px);
+    }
+
+    50% {
+        transform: translateY(1px);
+    }
+
+    100% {
+        transform: translateY(-1px);
+    }
+}
+
+.wheels {
+    left: 50%;
+    position: absolute;
+    bottom: 120px;
+    transform: translateX(-50%);
+    z-index: 3;
+}
+
+.wheels img {
+    width: 58px;
+    animation: rotate 1s linear infinite;
+}
+
+.wheels .wheel-back {
+    position: absolute;
+    left: -152px;
+    bottom: 13px;
+}
+
+.wheels .wheel-front {
+    position: absolute;
+    left: 58px;
+    bottom: 13px;
+}
+
+@keyframes rotate {
+    100% {
+        transform: rotate(360deg);
+    }
 }
\ No newline at end of file