DEV Community

0 seconds of 46 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
00:00
00:00
00:46
 
Prince
Prince

Posted on

3

Flip Love Cards Purpose Animation Video with code

<!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">
   <link rel="stylesheet" href="style.css">
   <title>Love</title>
</head>

<body>
   <h4><a href="" target="_blank" style="font-size: larger; color: white; text-decoration: none;">J πŸ’— I</a></h4>

   <div class="flip">
      <div class="front" style="background-image: url(images/One.png)">
         <h1 class="text-shadow">Hi ❀️</hi>
      </div>
      <div class="back">
         <p>I try to pretend I’m just a friend when in all I dream about is you.</p>
      </div>
   </div>

   <div class="flip">
      <div class="front" style="background-image: url(images/Two.png)">
         <h1 class="text-shadow">Hello 😊</hi>
      </div>
      <div class="back">
         <p>Why am I so afraid to lose you when you are not even mine.</p>
      </div>
   </div>

   <div class="flip">
      <div class="front" style="background-image: url(images/Three.png)">
         <h1 class="text-shadow">Umm 😳</hi>
      </div>
      <div class="back">

         <p>I’m not sure of anything but I’m certain that I loved you with a depth that stars cannot understand.</p>
      </div>
   </div>

   <br>
   <br>

   <div class="flip flip-vertical">
      <div class="front" style="background-image: url(images/Four.png)">
         <h1 class="text-shadow">I </hi>
      </div>
      <div class="back">
         <p>I just need you and some sunsets.</p>
      </div>
   </div>

   <div class="flip flip-vertical">
      <div class="front" style="background-image: url(images/Five.png)">
         <h1 class="text-shadow">Love ❀️</hi>
      </div>
      <div class="back">
         <p>I always hope you’re looking at me while I’m looking away.</p>
      </div>
   </div>

   <div class="flip flip-vertical">
      <div class="front" style="background-image: url(images/Six.png)">
         <h1 class="text-shadow">You</hi>
      </div>
      <div class="back">
         <p>I dream about you in colors that don’t exist.</p>
      </div>
   </div>

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

</html>
Enter fullscreen mode Exit fullscreen mode
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono");
* {
  box-sizing: border-box;
  font-weight: normal;
}

body {
  color: #6c6b6b;
  background: #222;
  text-align: center;
  font-family: "Roboto Mono";
  padding: 1em;
}

h1 {
  font-size: 2.2em;
}

.flip {
  position: relative;
  margin: 5px;
  border-width: 2px white;
  border: 3px white;
}
.flip > .front,
.flip > .back {
  display: block;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 0.5s;
  transition-property: transform, opacity;
}
.flip > .front {
  transform: rotateY(0deg);
}
.flip > .back {
  position: absolute;
  opacity: 0;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  transform: rotateY(-180deg);
}
.flip:hover > .front {
  transform: rotateY(180deg);
}
.flip:hover > .back {
  opacity: 1;
  transform: rotateY(0deg);
}
.flip.flip-vertical > .back {
  transform: rotateX(-180deg);
}
.flip.flip-vertical:hover > .front {
  transform: rotateX(180deg);
}
.flip.flip-vertical:hover > .back {
  transform: rotateX(0deg);
}

.flip {
  position: relative;
  display: inline-block;
  margin-right: 2px;
  margin-bottom: 1em;
  width: 400px;
}
.flip > .front,
.flip > .back {
  display: block;
  color: white;
  font-size: large;
  width: inherit;
  background-size: cover !important;
  background-position: center !important;
  height: 220px;
  padding: 1em 2em;
  background: #313131;
  border-radius: 10px;
}
.flip > .front p,
.flip > .back p {
  justify-items: center;
  justify-content: center;
  font-size: large;
  line-height: 160%;
  color: #999;
}

.text-shadow {
  text-shadow: 1px 1px rgba(0, 0, 0, 0.04), 2px 2px rgba(0, 0, 0, 0.04), 3px 3px rgba(0, 0, 0, 0.04), 4px 4px rgba(0, 0, 0, 0.04), 5px 5px rgba(0, 0, 0, 0.04), 6px 6px rgba(0, 0, 0, 0.04), 7px 7px rgba(0, 0, 0, 0.04), 8px 8px rgba(0, 0, 0, 0.04), 9px 9px rgba(0, 0, 0, 0.04), 10px 10px rgba(0, 0, 0, 0.04);
}
Enter fullscreen mode Exit fullscreen mode

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
πŸŽ₯ Audio/video file upload with real-time preview
πŸ—£οΈ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
πŸ“€ Export interview's subtitles in VTT format

Read full post

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay