Scribd
Upload
59 views3 pages

HTML Flip Card 3

The document describes a responsive image card layout with hover effects. It contains multiple image cards organized into rows, each with a title, description, and links for additional actions. When hovered over, each image card displays its details. The layout uses CSS for styling and responsiveness.

Uploaded by

laabid.morocco
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
59 views3 pages

HTML Flip Card 3

The document describes a responsive image card layout with hover effects. It contains multiple image cards organized into rows, each with a title, description, and links for additional actions. When hovered over, each image card displays its details. The layout uses CSS for styling and responsiveness.

Uploaded by

laabid.morocco
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Cards With Hover Effect</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.14.0/css/all.min.css">
</head>
<body>

<div class="container">
<div class="row">
<div class="image">
<img src="1.jpg" alt="">
<div class="details">
<h2>Your <span>Title</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="more">
<a href="#" class="read-more">Read <span>More</span></a>
<div class="icon-links">
<a href="#"><i class="fas fa-heart"></i></a>
<a href="#"><i class="fas fa-eye"></i></a>
<a href="#"><i class="fas fa-paperclip"></i></a>
</div>
</div>
</div>
</div>
<!--image card end-->
<!--image card start-->
<div class="image">
<img src="2.jpg" alt="">
<div class="details">
<h2>Your <span>Title</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="more">
<a href="#" class="read-more">Read <span>More</span></a>
<div class="icon-links">
<a href="#"><i class="fas fa-heart"></i></a>
<a href="#"><i class="fas fa-eye"></i></a>
<a href="#"><i class="fas fa-paperclip"></i></a>
</div>
</div>
</div>
</div>
<!--image card end-->
<!--image card start-->
<div class="image">
<img src="3.jpg" alt="">
<div class="details">
<h2>Your <span>Title</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="more">
<a href="#" class="read-more">Read <span>More</span></a>
<div class="icon-links">
<a href="#"><i class="fas fa-heart"></i></a>
<a href="#"><i class="fas fa-eye"></i></a>
<a href="#"><i class="fas fa-paperclip"></i></a>
</div>
</div>
</div>
</div>
<!--image card end-->
</div>
<!--image row end-->
<!--image row start-->
<div class="row">
<!--image card start-->
<div class="image">
<img src="4.jpg" alt="">
<div class="details">
<h2>Your <span>Title</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="more">
<a href="#" class="read-more">Read <span>More</span></a>
<div class="icon-links">
<a href="#"><i class="fas fa-heart"></i></a>
<a href="#"><i class="fas fa-eye"></i></a>
<a href="#"><i class="fas fa-paperclip"></i></a>
</div>
</div>
</div>
</div>
<!--image card end-->
<!--image card start-->
<div class="image">
<img src="5.jpg" alt="">
<div class="details">
<h2>Your <span>Title</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="more">
<a href="#" class="read-more">Read <span>More</span></a>
<div class="icon-links">
<a href="#"><i class="fas fa-heart"></i></a>
<a href="#"><i class="fas fa-eye"></i></a>
<a href="#"><i class="fas fa-paperclip"></i></a>
</div>
</div>
</div>
</div>
<!--image card end-->
<!--image card start-->
<div class="image">
<img src="6.jpg" alt="">
<div class="details">
<h2>Your <span>Title</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="more">
<a href="#" class="read-more">Read <span>More</span></a>
<div class="icon-links">
<a href="#"><i class="fas fa-heart"></i></a>
<a href="#"><i class="fas fa-eye"></i></a>
<a href="#"><i class="fas fa-paperclip"></i></a>
</div>
</div>
</div>
</div>
<!--image card end-->
</div>
<!--image row end-->
</div>
<!--image card layout end-->

</body>
</html>

You might also like