Adorable kittens for adoption
Hover over the images
Using CSS position, z-index and transform to animate on hover. Outline with outline-offset used for the purple border effect.
Gradients, diagonals, transforms and animations
Linear gradients used on header and footer sections and for the h1 element in the main section. The diagonal effect of the header and footer sections is achieved via the use of clip-path. Animations of the heading titles and button are specified in @keyframes rules. Transforms are used to animate the cards below.
Give a kitten a home
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab enim, tenetur autem! Autem repellendus harum,
Playful Kittens
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab enim, tenetur autem! Autem repellendus harum,
Kitten Love
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab enim, tenetur autem! Autem repellendus harum,
Choose your kitten
Flower Kitten
Lorem ipsum dolor sit amet elit, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimus veniamus, quis nostrudus exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
Flower Kitten
Adopt now!Playful Kitten
Lorem ipsum dolor sit amet elit, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimus veniamus, quis nostrudus exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
Playful Kitten
Adopt now!Luxury Kitten
Lorem ipsum dolor sit amet elit, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimus veniamus, quis nostrudus exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
Luxury Kitten
Adopt now!