diff --git a/adidas.png b/adidas.png new file mode 100644 index 0000000..04776e8 Binary files /dev/null and b/adidas.png differ diff --git a/app.js b/app.js new file mode 100644 index 0000000..492b04e --- /dev/null +++ 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)"; +}) \ No newline at end of file diff --git a/apps.js b/apps.js new file mode 100644 index 0000000..a91ae8d --- /dev/null +++ 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)"; +}); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..8191cb1 --- /dev/null +++ b/index.html @@ -0,0 +1,33 @@ + + + + + + + + snix + + + + + +
+
+
+ shoe + +
+

Adidas Znix

+

Future Ready Trainers with wrapped Boost Zoom your WAY

+ +
+
+ + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..709ef7a --- /dev/null +++ b/styles.css @@ -0,0 +1,106 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;800;900&display=swap"); +html { + font-size: 16px; +} + +* { + margin: 0; + padding: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-line-pack: center; + align-content: center; + height: 100vh; + -webkit-perspective: 1000px; + perspective: 1000px; +} + +.container { + margin-top: 5rem; + height: 40rem; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + text-align: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + padding: 3rem; + border-radius: 18px; + -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.3); + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.3); +} + +.shoe { + background: -webkit-gradient(linear, left top, right top, from(red), to(blue)); + background: linear-gradient(90deg, red, blue); + border-radius: 50%; + width: 10rem; + height: 10rem; + place-self: center; +} + +.card { + place-items: center; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + width: 40rem; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 10px; +} + +.card > *, +.shoe img { + -webkit-transition: .8s; + transition: .8s; +} + +img { + width: 15rem; + z-index: 1; +} + +.shoe { + margin-bottom: 4rem; +} + +p { + width: 18rem; +} + +button { + font-size: medium; + padding: .4rem; + margin: 1rem; + border: none; + border-radius: 50%; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); +} + +button:hover { + color: black; + background: -webkit-gradient(linear, left top, right top, from(#d06363), to(#7878dc)); + background: linear-gradient(90deg, #d06363, #7878dc); +} +/*# sourceMappingURL=styles.css.map */ \ No newline at end of file diff --git a/styles.css.map b/styles.css.map new file mode 100644 index 0000000..1c2a39b --- /dev/null +++ b/styles.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "AAAA,OAAO,CAAC,qFAAI;AACZ,AAAA,IAAI,CAAC;EACD,SAAS,EAAE,IAAI;CAClB;;AAED,AAAA,CAAC,CAAC;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,UAAU;EACtB,WAAW,EAAE,qBAAqB;CACrC;;AAED,AAAA,IAAI,CAAC;EACD,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,aAAa,EAAE,MAAM;EACrB,MAAM,EAAE,KAAK;EACb,WAAW,EAAE,MAAM;CACtB;;AAED,AAAA,UAAU,CAAC;EACP,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,KAAK;EACb,eAAe,EAAE,WAAW;EAC5B,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,MAAM;EAClB,eAAe,EAAE,MAAM;EACvB,OAAO,EAAE,IAAI;EAGb,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,kBAAkB,EAAE,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,kBAAkB;CAC/E;;AAED,AAAA,KAAK,CAAC;EACF,UAAU,EAAE,iCAAiC;EAC7C,aAAa,EAAE,GAAG;EAClB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,MAAM;CACrB;;AAED,AAAA,KAAK,CAAC;EACF,WAAW,EAAE,MAAM;EACnB,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,WAAW;EAC5B,SAAS,EAAE,MAAM;EACjB,KAAK,EAAE,KAAK;EACZ,cAAc,EAAE,MAAM;EACtB,GAAG,EAAE,IAAI;CACZ;;AAED,AAAA,KAAK,GAAC,CAAC;AACP,KAAK,CAAC,GAAG,CAAC;EACN,UAAU,EAAE,GAAG;CAClB;;AAED,AAAA,GAAG,CAAC;EACA,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,CAAC;CAGb;;AAED,AAAA,KAAK,CAAC;EACF,aAAa,EAAE,IAAI;CACtB;;AAED,AAAA,CAAC,CAAC;EACE,KAAK,EAAE,KAAK;CACf;;AAED,AAAA,MAAM,CAAC;EACH,SAAS,EAAE,MAAM;EACjB,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,GAAG;EAClB,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,kBAAkB;CAC5C;;AAED,AAAA,MAAM,AAAA,MAAM,CAAC;EACT,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,wCAA4D;CAC3E", + "sources": [ + "styles.scss" + ], + "names": [], + "file": "styles.css" +} \ No newline at end of file diff --git a/styles.scss b/styles.scss new file mode 100644 index 0000000..c69e1df --- /dev/null +++ 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)); +} \ No newline at end of file