k2iham · imgbot · Jan 31, 2022
diff --git a/adidas.png b/adidas.png
diff --git a/app.js b/app.js
@@ -0,0 +1,34 @@
+const container = document.querySelector('.container');
+const card = document.querySelector('.card');
+//Items
+const title = document.querySelector("h1");
+const sneaker = document.querySelector(".shoe img");
+const description = document.querySelector(".card p");
+// const sizes = document.querySelector("button");
+
+//const container = document.querySelector('.container');
+container.addEventListener("mousemove", (e) => {
+    let xAxis = (window.innerWidth / 2 - e.pageX) / 25;
+    let yAxis = (window.innerHeight / 2 - e.pageY) / 25;
+    card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
+});
+//Animation starts
+container.addEventListener("mouseenter", (e) => {
+    card.style.transition = "none";
+    //zoom
+    title.style.transform = "translateZ(150px)";
+    sneaker.style.transform = "translateZ(200px) rotateZ(-45deg) scale(1.4)";
+    description.style.transform = "translateZ(125px)";
+    sizes.style.transform = "translateZ(100px)";
+});
+// Animation ends
+container.addEventListener("mouseleave", (e) => {
+    card.style.transition = "all 0.5s ease";
+    card.style.transform = `rotateY(0deg) rotateX(0deg)`;
+    //Popback
+    title.style.transform = "translateZ(0px)";
+    sneaker.style.transform = "translateZ(0px) rotateZ(0deg)";
+    description.style.transform = "translateZ(0px)";
+    sizes.style.transform = "translateZ(0px)";
+    purchase.style.transform = "translateZ(0px)";
+})
diff --git a/apps.js b/apps.js
@@ -0,0 +1,38 @@
+//Movement Animation to happen
+const container = document.querySelector(".container");
+const card = document.querySelector(".card");
+
+//Items
+const title = document.querySelector(".title");
+const sneaker = document.querySelector(".sneaker img");
+const purchase = document.querySelector(".purchase");
+const description = document.querySelector(".info h3");
+const sizes = document.querySelector(".sizes");
+
+//Moving Animation Event
+container.addEventListener("mousemove", (e) => {
+    let xAxis = (window.innerWidth / 2 - e.pageX) / 25;
+    let yAxis = (window.innerHeight / 2 - e.pageY) / 25;
+    card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
+});
+//Animate In
+container.addEventListener("mouseenter", (e) => {
+    card.style.transition = "none";
+    //Popout
+    title.style.transform = "translateZ(150px)";
+    sneaker.style.transform = "translateZ(200px) rotateZ(-45deg)";
+    description.style.transform = "translateZ(125px)";
+    sizes.style.transform = "translateZ(100px)";
+    purchase.style.transform = "translateZ(75px)";
+});
+//Animate Out
+container.addEventListener("mouseleave", (e) => {
+    card.style.transition = "all 0.5s ease";
+    card.style.transform = `rotateY(0deg) rotateX(0deg)`;
+    //Popback
+    title.style.transform = "translateZ(0px)";
+    sneaker.style.transform = "translateZ(0px) rotateZ(0deg)";
+    description.style.transform = "translateZ(0px)";
+    sizes.style.transform = "translateZ(0px)";
+    purchase.style.transform = "translateZ(0px)";
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<link rel="stylesheet" href="styles.css">
+
+
+<head>
+    <meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE">
+    <title>snix</title>
+
+</head>
+
+<body>
+
+    <div class="container">
+        <div class="card">
+            <div class="shoe">
+                <img src="./adidas.png" alt="shoe">
+
+            </div>
+            <h1>Adidas Znix</h1>
+            <p>Future Ready Trainers with wrapped Boost Zoom your WAY</p>
+            <ul>Sizes
+                <button>22</button>
+                <button>28</button>
+                <button>30</button>
+                <button>32</button>
+            </ul>
+        </div>
+    </div>
+    <script src="app.js"></script>
+</body>
+
+</html>
diff --git a/styles.css b/styles.css
diff --git a/styles.css.map b/styles.css.map
diff --git a/styles.scss b/styles.scss
@@ -0,0 +1,85 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;800;900&display=swap');
+html {
+    font-size: 16px;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    height: 100vh;
+    perspective: 1000px;
+}
+
+.container {
+    margin-top: 5rem;
+    height: 40rem;
+    transform-style: preserve-3d;
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    padding: 3rem;
+    // width: 20rem;
+    // background-color: lightcoral;
+    border-radius: 18px;
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.3);
+}
+
+.shoe {
+    background: linear-gradient(90deg, red, blue);
+    border-radius: 50%;
+    width: 10rem;
+    height: 10rem;
+    place-self: center;
+}
+
+.card {
+    place-items: center;
+    display: flex;
+    transform-style: preserve-3d;
+    flex-wrap: nowrap;
+    width: 40rem;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.card>*,
+.shoe img {
+    transition: .8s;
+}
+
+img {
+    width: 15rem;
+    z-index: 1;
+    // position: absolute;
+    // left: 170px;
+}
+
+.shoe {
+    margin-bottom: 4rem;
+}
+
+p {
+    width: 18rem;
+}
+
+button {
+    font-size: medium;
+    padding: .4rem;
+    margin: 1rem;
+    border: none;
+    border-radius: 50%;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+}
+
+button:hover {
+    color: black;
+    background: linear-gradient(90deg, rgb(208, 99, 99), rgb(120, 120, 220));
+}