Scribd Logo
Upload

Welcome to Scribd!

  • HTML Flip Card 3

    Uploaded by

    laabid.morocco
    7 views3 pages
    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.

    Original Description:

    documents nécessaires

    Original Title

    html flip card 3

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    7 views3 pages

    HTML Flip Card 3

    Uploaded by

    laabid.morocco
    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.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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