Added style for the website

index.html

@@ -130,7 +130,8 @@
                 <div class="view back-view">
                     <img src="img/img-7.png" alt="back-view">
                 </div>
-            </li>\            <li class="card">
+            </li>          
+            <li class="card">
                 <div class="view front-view">
                     <span class="material-symbols-outlined">question_mark</span>
                 </div>

style.css

@@ -0,0 +1,100 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    background-color: #6563ff;
+}
+
+.wrapper {
+    padding: 25px;
+    border-radius: 10px;;
+    background: #f8f8f8;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+.cards, .card, .view {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.cards {
+    height: 400px;
+    width: 400px;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.cards .card {
+    cursor: pointer;
+    list-style: none;
+    user-select: none;
+    position: relative;
+    perspective: 1000px;
+    transform-style: preserve-3d;
+    height: calc(25% - 10px);
+    width: calc(25% - 10px);
+}
+
+.card .view {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background: #fff;
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 7px;
+    pointer-events: none;
+    backface-visibility: hidden;
+    transition: transform 0.25s linear;
+}
+
+.card .front-view span {
+    font-size: 40px;
+    color: #6563ff;
+}
+
+.card .back-view {
+    transform: rotateY(-180deg);
+}
+
+.card .flip .back-view {
+    transform: rotateY(0);
+}
+
+.card .flip .front-view {
+    transform: rotateY(-180deg);
+}
+
+.card .shake {
+    animation: shake 0.35s ease-in-out;
+}
+
+@keyframes shake {
+    0%, 100% {
+      transform: translateX(0);
+    }
+    20% {
+      transform: translateX(-13px);
+    }
+    40% {
+      transform: translateX(13px);
+    }
+    60% {
+      transform: translateX(-8px);
+    }
+    80% {
+      transform: translateX(8px);
+    }
+}
+
+
+.back-view img {
+    max-width: 45px;;
+}