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

#webdev #javascript #programming #beginners 
<!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
profile
_SurveyJS
 Promoted

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

profile
Pieces.app
 Promoted

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

Read next

0x2e_tech profile image

Android WebView Crash: Fix "Operation not permitted"

0x2e Tech -

ruturajmaggirwar profile image

Passing variables from the static page to the widget

RuturajMaggirwar -

antonmartyniuk profile image

How To Increase Performance of Web APIs in .NET

Anton Martyniuk -

d_thiranjaya_6d3ec4552111 profile image

🚀 React Patterns: Essential Tips and Tricks for Developers

Pawani Madushika -