Some Important Days Themes With Hover Card Effect Of HTML Program

Ticker

10/recent/ticker-posts

Some Important Days Themes With Hover Card Effect Of HTML Program

AK Creative 4/24/2021 09:56:00 PM

Hover Card Effect of Programming 


HTML Code

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <link rel="stylesheet" type="text/css" href="styles.css" />

  </head>

  <body>

    <div class="card">

      <div class="card-image"></div>

      <div class="card-text">

        <span class="date">23rd April 2021</span>

        <h2>World Book Day</h2>

        <p><b>World Book and Copyright Day: Keeping Covid-19 in mind, the theme for this year is 'To share a story'. Tbilisi has been chosen to be the World Book Capital in 2021. April 23 is globally observed as the World Book Day, also known as the World Book and Copyright Day or International Day of the Book.</b></p>

      </div>

      <div class="card-stats">

        <div class="stat">

          <div class="value">10<sup>m</sup></div>

          <div class="type">Read</div>

        </div>

        <div class="stat border">

          <div class="value">10000</div>

          <div class="type">Views</div>

        </div>

        <div class="stat">

          <div class="value">32k</div>

          <div class="type">Likes</div>

        </div>

      </div>

    </div>

    <div class="card">

      <div class="card-image card2"></div>

      <div class="card-text card2">

        <span class="date">7th April 2021</span>

        <h2>World Health Day</h2>

        <p><b>World Health Day is a global health awareness day celebrated every year on April 7, under the sponsorship of the World Health Organization (WHO), as well as other related organizations.</b></p>

      </div>

      <div class="card-stats card2">

        <div class="stat">

          <div class="value">20<sup>m</sup></div>

          <div class="type">Read</div>

        </div>

        <div class="stat border">

          <div class="value">25000</div>

          <div class="type">Views</div>

        </div>

        <div class="stat">

          <div class="value">51k</div>

          <div class="type">Likes</div>

        </div>

      </div>

    </div>

    <div class="card">

        <div class="card-image card3"></div>

        <div class="card-text card3">

          <span class="date">22nd March 2021</span>

          <h2>World Water Day</h2>

          <p><b>The World Water Day celebrates water and raises awareness of the global water crisis, and a core focus of the observance is to support the achievement of Sustainable Development Goal (SDG) 6: water and sanitation for all by 2030. The theme of World Water Day 2021 is valuing water.</b></p>

        </div>

        <div class="card-stats card3">

          <div class="stat">

            <div class="value">50<sup>m</sup></div>

            <div class="type">Read</div>

          </div>

          <div class="stat border">

            <div class="value">100000</div>

            <div class="type">Views</div>

          </div>

          <div class="stat">

            <div class="value">100k</div>

            <div class="type">Likes</div>

          </div>

        </div>

      </div>

  </body>

</html>


CSS Code


body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:url("https://www.imagesjunction.com/images/img/background.jpg") center center;
  overflow: hidden;
}
.card {
  display: grid;
  grid-template-columns: 300px;
  grid-template-rows: 210px 210px 80px;
  grid-template-areas: "image" "text" "stats";

  border-radius: 18px;
  background: white;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
  font-family: century;
  text-align: center;
  

  transition: 0.5s ease;
  cursor: pointer;
  margin:30px;
}
.card-image {
  grid-area: image;
  background: url("https://st.adda247.com/https://wpassets.adda247.com/wp-content/uploads/multisite/sites/5/2019/04/11065818/9bf1ba61f477d9072c1c4e85d422bff2.jpg") no-repeat center center;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-size: cover;
}

.card-text {
  grid-area: text;
  margin: 7px;
}
.card-text .date {
  color: rgb(255, 7, 110);
  font-size:20px;
}
.card-text p {
  color: red;
  font-size:14px;
  font-weight: 300;
}
.card-text h2 {
  margin-top:0px;
  font-size:20px;
}
.card-stats {
  grid-area: stats; 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  background: rgb(255,127,80);
}
.card-stats .stat {
  padding:10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: yellow;
}
.card-stats .border {
  border-left: 1px solid rgb(172, 26, 87);
  border-right: 1px solid rgb(172, 26, 87);
}
.card-stats .value{
  font-size:22px;
  font-weight: 500;
}
.card-stats .value sup{
  font-size:12px;
}
.card-stats .type{
  font-size:11px;
  font-weight: 300;
  text-transform: uppercase;
}
.card:hover {
  transform: scale(1.15);
  box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
}
.card-image.card2 {
  background: url("https://c.ndtvimg.com/2021-04/jl4o59o8_health-day_625x300_07_April_21.jpg");
  background-size: cover;
}
.card-text.card2 .date {
  color: rgb(255, 77, 0);
}
.card-stats.card2 .border {
  border-left: 1px solid rgb(185, 67, 60);
  border-right: 1px solid rgb(185, 67, 60);
}
.card-stats.card2 {
  background: rgb(100,149,237);
}
.card-image.card3 {
  background: url("https://cdn.wallpapersafari.com/14/62/sX90UP.jpg");
  background-size: cover;
}
.card-text.card3 .date {
  color: rgb(0, 189, 63);
}
.card-stats.card3 .border {
  border-left: 1px solid rgb(14, 122, 50);
  border-right: 1px solid rgb(14, 122, 50);
}
.card-stats.card3 {
  background: rgb(65,105,225);
}



OUTPUT SCREEN



 

Tags:

Post a Comment

18 Comments