الفئة 'view-more'

الدرس 19 من 31 في دورة بطاقة 3D | مشروع Front-end على Coddy.

التحدي

سهل

استهدف الفئة 'view-more' داخل 'bottom':

اضبط display على Flex
اضبط align-items على center.
اضبط justify-content على flex-end.
اضبط width على 40%.

أضف:

transition: all 0.2s ease-in-out;

أضف أيضاً تأثير التحويم (هام):

.bottom .view-more:hover {
  transform: translate3d(0, 0, 10px);
}

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

الفئة 'view-more'

جميع دروس بطاقة 3D | مشروع Front-end