7ExpandingCards/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>expanding cards</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">

     <div class="panel active"  style="background-image: url(https://images.unsplash.com/photo-1564507592333-c60657eea523?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dGFqJTIwbWFoYWx8ZW58MHx8MHx8&w=1000&q=80);">
           <h3>Taj mahel</h3>

     </div>

     <div
     class="panel "
     style="
       background-image: url(https://media.istockphoto.com/photos/hawa-mahal-jaipur-india-picture-id482557081?b=1&k=20&m=482557081&s=170667a&w=0&h=YJBauRNVcSkY5va727gQ9ycycYXbMAnlY5WORudNURk=);
     "
   >
     <h3>Hawa Mahal</h3>
   </div>

   <div
     class="panel "
     style="
       background-image: url(https://images.unsplash.com/photo-1551161242-b5af797b7233?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Y2hhcm1pbmFyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60);
     "
   >
     <h3>charminar</h3>
   </div>

   <div
     class="panel "
     style="
       background-image: url(https://media.istockphoto.com/photos/lighthouse-in-ancient-dwarka-city-india-picture-id675488644?b=1&k=20&m=675488644&s=170667a&w=0&h=89GS9v8HIKoL6FkmIqgcCKVgyD-WkrcSKZXa3YIXWTo=);
     "
   >
     <h3>Marine Drive</h3>
   </div>

   <div
     class="panel "
     style="
       background-image: url(https://media.istockphoto.com/photos/nandy-statue-picture-id179469330?b=1&k=20&m=179469330&s=170667a&w=0&h=zrJcY3PtbyrYey0fSGoQnKUvxM37i-rs_LsUVAnM71E=);
     "
   >
     <h3>Nandi statue</h3>

    </div>
    

    <script src="logic.js"></script>
</body>
</html>