Tuesday, October 13, 2020

FLIPCARD GAME HTML CODE

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flip The Card(greece version)</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section class="game">
        <div class="card" data-name="zeus">
            <img src="images/zeus.jpg" alt="" class="frontface" >
            <img src="images/greek mythology.jpg" alt="" class="backface">
        </div>
        <div class="card" data-name="aphrodite">
            <img src="images/aphrodite.jpg" alt="" class="frontface" >
            <img src="images/greek mythology.jpg" alt="" class="backface">
        </div>
        <div class="card" data-name="apollo">
            <img src="images/apollo.jpg" alt="" class="frontface" >
            <img src="images/greek mythology.jpg" alt="" class="backface">
        </div>
        <div class="card" data-name="athena">
            <img src="images/athena.jpg" alt="" class="frontface" >
            <img src="images/greek mythology.jpg" alt="" class="backface">
        </div>
        <div class="card" data-name="hades">
            <img src="images/hades.jpg" alt="" class="frontface" >
            <img src="images/greek mythology.jpg" alt="" class="backface">
        </div>
        
        <div class="card" data-name="poseiden">
            <img src="images/poseiden.jpg" alt="" class="frontface" >
            <img src="images/greek mythology.jpg" alt="" class="backface">
        </div>
        <div class="card" data-name="zeus">
            <img src="images/zeus.jpg" alt="" class="frontface" >
            <img src="images/greek mythology.jpg" alt="" class="backface">
        </div>
        <div class="card" data-name="aphrodite">
            <img src="images/aphrodite.jpg" alt="" class="frontface" >
            <img src="images/greek mythology.jpg" alt="" class="backface">
        </div>
        <div class="card" data-name="apollo">
            <img src="images/apollo.jpg" alt="" class="frontface" >
            <img src="images/greek mythology.jpg" alt="" class="backface">
        </div>
        <div class="card" data-name="athena">
            <img src="images/athena.jpg" alt="" class="frontface" >
            <img src="images/greek mythology.jpg" alt="" class="backface">
        </div>
        <div class="card" data-name="hades">
            <img src="images/hades.jpg" alt="" class="frontface" >
            <img src="images/greek mythology.jpg" alt="" class="backface">
        </div>
        
        <div class="card" data-name="poseiden">
            <img src="images/poseiden.jpg" alt="" class="frontface" >
            <img src="images/greek mythology.jpg" alt="" class="backface">
        </div>
    </section>
    <script src="index.js"></script>
</body>
</html>

No comments:

Post a Comment