'view-more' Sınıfı

Coddy'nin 3D Kart | Front-end Projesi kursunda ders 19 / 31.

Görev

Kolay

‘bottom’ içindeki ‘view-more’ sınıfını hedefleyin:

Display özelliğini Flex olarak ayarlayın.
align-items özelliğini center olarak ayarlayın.
justify-content özelliğini flex-end olarak ayarlayın.
Genişliği (width) 40% olarak ayarlayın.

Şunu ekleyin:

transition: all 0.2s ease-in-out;

Ayrıca üzerine gelme (hover) efektini ekleyin (Önemli):

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

Kendin dene

<!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' Sınıfı

3D Kart | Front-end Projesi bölümündeki tüm dersler