html, css and js

guldus98 · guldus98 · commit ee39e4aa4c13 · 2019-03-01T07:46:34.000+03:00
diff --git a/JavaScript Card Flip 1/JavaScript Card Flip.css b/JavaScript Card Flip 1/JavaScript Card Flip.css
@@ -0,0 +1,54 @@
+﻿html,body{
+    height: 100%;
+    margin: 0;
+}
+body{
+    background: #262626;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.container{
+    position: relative;
+    width: 225px;
+    height: 350px;
+    perspective:1000px;
+    -webkit-perspective: 1000px;
+    border-radius: 4px;
+}
+.card {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    -webkit-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    transition: 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    border-radius: 6px;
+    box-shadow: 0 6px 16px rgba(0,0,0,.15);
+    cursor: pointer;
+}
+.card div{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    border-radius: 6px;
+    background: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 18px;
+    font-family: Verdana;
+    color: #262626;
+}
+.card .back {
+  -webkit-transform: rotateX(180deg);
+          transform: rotateX(180deg);
+}
+.container.active .card{
+    -webkit-transform: rotateX(180deg);
+    transform: rotateX(180deg);
+}
diff --git a/JavaScript Card Flip 1/JavaScript Card Flip.html b/JavaScript Card Flip 1/JavaScript Card Flip.html
@@ -0,0 +1,43 @@
+﻿<!DOCTYPE html>
+
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>page</title>
+    <link rel="stylesheet" type="text/css" href="JavaScript Card Flip.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
+</head>
+<body onkeydown="keyFunction(event)">
+
+    <div class="container">
+
+        <div class="card">
+            <div class="front word1_front">TRUECODES</div>
+        </div>
+
+        <div class="card">
+            <div class="back word1_back">CODEBLOGGER</div>
+        </div>
+    </div>
+
+    <script>
+
+        let box = document.querySelector(".container");
+        box.addEventListener("click", function () {
+            box.classList.toggle("active");
+        });
+
+        function keyFunction(e) {
+            if (e.keyCode == 38) {
+                box.classList.add("active");
+            };
+            if (e.keyCode == 40) {
+                box.classList.remove("active");
+            };
+        };
+
+    </script>
+
+</body>
+</html>
diff --git a/JavaScript Card Flip 1/Screenshot_1.png b/JavaScript Card Flip 1/Screenshot_1.png
