India's World Heritage Site Know From 3D Hover Card

Ticker

10/recent/ticker-posts

India's World Heritage Site Know From 3D Hover Card

AK Creative 4/20/2021 09:42:00 PM

3D Foldable Card With India's Heritage Site From This Source Code


 HTML Code

<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

    <title></title>

    <link rel="stylesheet" href="style.css">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">

  </head>

  <body>


    <div class="card middle">

      <div class="front">

        <img src="https://st1.latestly.com/wp-content/uploads/2021/04/15-World-Heritage-Day-2021.jpg" alt="">

      </div>

      <div class="back">

        <div class="back-content middle">

          <h2>Maa Blogger</h2>

          <span>Blog<br>38 World Heritage Sites in India <br>

Khajuraho, Madhya Pradesh

Hampi, Karnataka

Ajanta Caves, Maharashtra

Ellora Caves, Maharashtra

Bodh Gaya, Bihar

Sun Temple, Konark, Odisha

Red Fort Complex, Delhi

Sanchi, Madhya Pradesh

Chola Temples, Tamil Nadu

Group of Monuments in Mahabalipuram, Tamil Nadu

Humayun’s Tomb, New Delhi

Jantar Mantar, Jaipur, Rajasthan

Agra Fort, Uttar Pradesh

Fatehpur Sikri, Uttar Pradesh

Taj Mahal, Agra

Rani Ki Vav, Patan, Gujarat

Group of Monuments in Pattadakal, Karnataka

Elephanta Caves, Maharashtra

Nalanda Mahavihara (Nalanda University), Bihar

Chhatrapati Shivaji Maharaj Terminus (formerly Victoria Terminus), Maharashtra

Mountain Railways of India

Qutub Minar and its Monuments, New Delhi

Champaner-Pavagadh Archaeological Park, Gujarat

Hill Forts of Rajasthan

Churches and Convents of Goa

Rock Shelters of Bhimbetka, Madhya Pradesh

The Victorian and Art Deco Ensemble of Mumbai

The Pink City - Jaipur

The Historic City of Ahmedabad

Capitol Complex, Chandigarh

Kaziranga Wild Life Sanctuary, Assam

Sundarbans National Park, West Bengal

Great Himalayan National Park, Himachal Pradesh

Manas Wild Life Sanctuary, Assam

Keoladeo National Park, Bharatpur, Rajasthan

Nanda Devi and Valley of Flowers National Parks, Uttarakhand

Western Ghats

Kanchenjunga National Park, Sikkim

Khangchendzonga National Park</span>

          <div class="sm">

            <a href="#"><i class="fab fa-facebook-f"></i></a>

            <a href="#"><i class="fab fa-twitter"></i></a>

            <a href="#"><i class="fab fa-youtube"></i></a>

            <a href="#"><i class="fab fa-instagram"></i></a>

          </div>

        </div>

      </div>

    </div>




  </body>

</html>


CSS Code

*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: "century";
}
body{
  background: url(https://www.holidify.com/blog/wp-content/uploads/2014/06/Taj-Mahal.jpg) center center fixed;
}
.middle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.card{
  cursor: pointer;
  width: 940px;
  height: 480px;
}
.front,.back{
  width: 100%;
  height: 100%;
  overflow: hidden;
  backface-visibility: hidden;
  position: absolute;
  transition: transform .6s linear;
}
.front img{
  height: 100%;
}
.front{
  transform: perspective(600px) rotateY(0deg);
}
.back{
  background: #fff243;
  transform: perspective(600px) rotateY(180deg);
}
.back-content{
  color: #2c3e50;
  text-align: center;
  width: 100%;
}
.sm{
  margin: 20px 0;
}
.sm a{
  display: inline-flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  color: #2c3e50;
  font-size: 38px;
  transition: 0.4s;
  border-radius: 50%
}
.sm a:hover{
  background: #2c3e50;
  color: white;
}
.card:hover > .front{
  transform: perspective(600px) rotateY(-180deg);
}
.card:hover > .back{
  transform: perspective(600px) rotateY(0deg);
}



OUTPUT Screen





Tags:

Post a Comment

15 Comments