diff --git a/01-Expanding-Cards/index.html b/01-Expanding-Cards/index.html new file mode 100644 index 0000000..d56d4ca --- /dev/null +++ b/01-Expanding-Cards/index.html @@ -0,0 +1,60 @@ + + + + + + + + Talha - Expanding cards + + +
+
+

Explore the world

+
+
+

Explore the world

+
+
+

Explore the world

+
+
+

Explore the world

+
+
+

Explore the world

+
+
+ + + diff --git a/01-Expanding-Cards/script.js b/01-Expanding-Cards/script.js new file mode 100644 index 0000000..c6bcdd0 --- /dev/null +++ b/01-Expanding-Cards/script.js @@ -0,0 +1,14 @@ +const panels = document.querySelectorAll(".panel"); + +panels.forEach((panel) => { + panel.addEventListener("click", () => { + removeActiveClasses(); + panel.classList.add("active"); + }); +}); + +const removeActiveClasses = () => { + panels.forEach((panel) => { + panel.classList.remove("active"); + }); +}; diff --git a/01-Expanding-Cards/style.css b/01-Expanding-Cards/style.css new file mode 100644 index 0000000..d3741bc --- /dev/null +++ b/01-Expanding-Cards/style.css @@ -0,0 +1,64 @@ +@import url("https://fonts.googleapis.com/css2?family=Muli&display=swap"); + +* { + box-sizing: border-box; /* to avoid width problems if padding */ +} + +body { + font-family: "Muli", sans-serif; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; /* to hide scrollbars */ + margin: 0; +} + +.container { + display: flex; + width: 90vw; +} + +.panel { + background-size: auto 100%; + background-position: center; + background-repeat: no-repeat; + height: 80vh; + border-radius: 50px; + color: #fff; + cursor: pointer; + flex: 0.5; + margin: 10px; + position: relative; + transition: flex 0.7s ease-in; + -webkit-transition: all 700ms ease-in; +} + +.panel h3 { + font-size: 24px; + position: absolute; + bottom: 20px; + left: 20px; + margin: 0; + opacity: 0; +} + +.panel.active { + flex: 5; +} + +.panel.active h3 { + opacity: 1; + transition: opacity 0.3s ease-in 0.4s; +} + +@media (max-width: 480px) { + .container { + width: 100vw; + } + + .panel:nth-of-type(4), + .panel:nth-of-type(5) { + display: none; + } +} diff --git a/02-3d-Card-With-Hover/index.html b/02-3d-Card-With-Hover/index.html new file mode 100644 index 0000000..a13fc2f --- /dev/null +++ b/02-3d-Card-With-Hover/index.html @@ -0,0 +1,45 @@ + + + + + Talha - 3D Card Hover Effect + + + + +
+
+ +
+ + +
+ +
+
+ +
+ + +
+ + + diff --git a/02-3d-Card-With-Hover/style.css b/02-3d-Card-With-Hover/style.css new file mode 100644 index 0000000..29d8b02 --- /dev/null +++ b/02-3d-Card-With-Hover/style.css @@ -0,0 +1,107 @@ +:root { + --card-height: 300px; + --card-width: calc(var(--card-height) / 1.5); +} +* { + box-sizing: border-box; +} +body { + width: 100vw; + height: 100vh; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + background: #191c29; +} +.card { + width: var(--card-width); + height: var(--card-height); + position: relative; + display: flex; + justify-content: center; + align-items: flex-end; + padding: 0 36px; + perspective: 2500px; + margin: 0 50px; +} + +.cover-image { + width: 100%; + height: 100%; + object-fit: cover; +} + +.wrapper { + transition: all 0.5s; + position: absolute; + width: 100%; + z-index: -1; +} + +.card:hover .wrapper { + transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0); + box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); + -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); +} + +.wrapper::before, +.wrapper::after { + content: ""; + opacity: 0; + width: 100%; + height: 80px; + transition: all 0.5s; + position: absolute; + left: 0; +} +.wrapper::before { + top: 0; + height: 100%; + background-image: linear-gradient( + to top, + transparent 46%, + rgba(12, 13, 19, 0.5) 68%, + rgba(12, 13, 19) 97% + ); +} +.wrapper::after { + bottom: 0; + opacity: 1; + background-image: linear-gradient( + to bottom, + transparent 46%, + rgba(12, 13, 19, 0.5) 68%, + rgba(12, 13, 19) 97% + ); +} + +.card:hover .wrapper::before, +.wrapper::after { + opacity: 1; +} + +.card:hover .wrapper::after { + height: 120px; +} +.title { + width: 100%; + transition: transform 0.5s; +} +.card:hover .title { + transform: translate3d(0%, -50px, 100px); +} + +.character { + width: 100%; + opacity: 0; + transition: all 0.5s; + position: absolute; + z-index: -1; +} + +.card:hover .character { + opacity: 1; + transform: translate3d(0%, -30%, 100px); +} \ No newline at end of file diff --git a/03-Creative-Cards/index.html b/03-Creative-Cards/index.html new file mode 100644 index 0000000..eb56d67 --- /dev/null +++ b/03-Creative-Cards/index.html @@ -0,0 +1,19 @@ + + + + + + Talha - Creative Card + + + +
+
+ +
+
+

Olivia

+
+
+ + diff --git a/03-Creative-Cards/marian-oleksyn-Edv_EEWiB3E-unsplash.jpg b/03-Creative-Cards/marian-oleksyn-Edv_EEWiB3E-unsplash.jpg new file mode 100644 index 0000000..f01ba36 Binary files /dev/null and b/03-Creative-Cards/marian-oleksyn-Edv_EEWiB3E-unsplash.jpg differ diff --git a/03-Creative-Cards/style.css b/03-Creative-Cards/style.css new file mode 100644 index 0000000..f652aa9 --- /dev/null +++ b/03-Creative-Cards/style.css @@ -0,0 +1,73 @@ +body { + margin: 0; + height: 100vh; + background: linear-gradient(#0093e9, #80d0c7); + display: flex; + justify-content: center; + align-items: center; + font-family: sans-serif; +} + +.card { + position: relative; + width: 30rem; + height: 30rem; + background: white; + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); +} + +.card:before, +.card:after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: white; + transition: 1s; + z-index: -1; +} + +.card:hover:before { + transform: rotate(20deg); + box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); +} + +.card:hover:after { + transform: rotate(10deg); + box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); +} + +.imgBox { + position: absolute; + top: 10px; + left: 10px; + bottom: 10px; + right: 10px; + background: #222; + transition: 1s; + z-index: 2; +} + +img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; +} + +.card:hover .imgBox { + bottom: 80px; +} + +.details { + position: absolute; + left: 10px; + right: 10px; + bottom: 10px; + height: 60px; + text-align: center; +} diff --git a/04-Expanding-Cards/app.js b/04-Expanding-Cards/app.js new file mode 100644 index 0000000..13641e6 --- /dev/null +++ b/04-Expanding-Cards/app.js @@ -0,0 +1,14 @@ +const slides = document.querySelectorAll(".slide"); + +slides.forEach((slide) => { + slide.addEventListener("click", () => { + removeCurrentActives(); + slide.classList.add("active"); + }); +}); + +function removeCurrentActives() { + slides.forEach((slide) => { + slide.classList.remove("active"); + }); +} diff --git a/04-Expanding-Cards/index.html b/04-Expanding-Cards/index.html new file mode 100644 index 0000000..887d4cf --- /dev/null +++ b/04-Expanding-Cards/index.html @@ -0,0 +1,30 @@ + + + + + + Talha - Expanding Cards + + + +
+
+

Dark Siders 2

+
+
+

Assassin's Creed

+
+
+

Dishonored

+
+
+

Watch Dogs 2

+
+
+

Call Of Duty

+
+
+ + + + diff --git a/04-Expanding-Cards/style.css b/04-Expanding-Cards/style.css new file mode 100644 index 0000000..1c3cc0f --- /dev/null +++ b/04-Expanding-Cards/style.css @@ -0,0 +1,85 @@ +* { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; + background-color: rgb(5, 5, 5); + color: #fff; +} + +.container { + display: flex; + width: 100vw; +} + +.bg-image { + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +/* IMAGES SOURCES */ +/* https://wallpapercave.com/pc-games-wallpapers */ + +.image-1 { + background-image: url(https://wallpapercave.com/dwp2x/wp3163455.jpg); +} + +.image-2 { + background-image: url(https://wallpapercave.com/dwp2x/wp3163465.jpg); +} + +.image-3 { + background-image: url(https://wallpapercave.com/dwp2x/wp4257699.jpg); +} + +.image-4 { + background-image: url(https://wallpapercave.com/dwp2x/wp4257708.jpg); +} + +.image-5 { + background-image: url(https://wallpapercave.com/dwp2x/wp3163453.jpg); +} + +.slide { + position: relative; + height: 80vh; + flex: 0.5; + border-radius: 50px; + color: #fff; + margin: 10px; + cursor: pointer; + transition: all 700ms ease-in; +} + +.slide h3 { + position: absolute; + bottom: 20px; + left: 20px; + margin: 0; + opacity: 0; + font-size: 24px; +} + +@media (max-width: 480px) { + .slide:nth-of-type(4), + .slide:nth-of-type(5) { + display: none; + } +} + +/* JavaScript */ +.slide.active { + flex: 5; +} + +.slide.active h3 { + opacity: 1; + transition: opacity 0.3s ease-in 0.4s; +} diff --git a/05-3D-Product-Card/images/adidas.png b/05-3D-Product-Card/images/adidas.png new file mode 100644 index 0000000..04776e8 Binary files /dev/null and b/05-3D-Product-Card/images/adidas.png differ diff --git a/05-3D-Product-Card/index.html b/05-3D-Product-Card/index.html new file mode 100644 index 0000000..b595008 --- /dev/null +++ b/05-3D-Product-Card/index.html @@ -0,0 +1,35 @@ + + + + + + + Talha - 3D Product Card + + +
+
+
+
+ adidas +
+
+

Adidas ZX

+

+ FUTURE-READY TRAINERS WITH WRAPPED BOOST FOR EXCEPTION COMFORT. +

+
+ + + + +
+
+ +
+
+
+
+ + + diff --git a/05-3D-Product-Card/script.js b/05-3D-Product-Card/script.js new file mode 100644 index 0000000..515ad0c --- /dev/null +++ b/05-3D-Product-Card/script.js @@ -0,0 +1,40 @@ +// Movement Animation to happen +const card = document.querySelector(".card"); +const container = document.querySelector(".container"); + +// 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 = `rotateX(${yAxis}deg) rotateY(${xAxis}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 = `rotateX(0deg) rotateY(0deg)`; + //Popback + title.style.transform = "translateZ(0px)"; + sneaker.style.transform = "translateZ(0) rotateZ(0deg)"; + description.style.transform = "translateZ(0px)"; + sizes.style.transform = "translateZ(0px)"; + purchase.style.transform = "translateZ(0px)"; +}); diff --git a/05-3D-Product-Card/style.css b/05-3D-Product-Card/style.css new file mode 100644 index 0000000..edfcc7a --- /dev/null +++ b/05-3D-Product-Card/style.css @@ -0,0 +1,137 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"); + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: "Poppins", sans-serif; + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + overflow: hidden; + perspective: 1000px; +} + +.container { + width: 50%; + display: flex; + justify-content: center; + align-items: center; +} + +.card { + min-height: 80vh; + width: 25rem; + box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.2); + border-radius: 30px; + padding: 0rem 2rem; + transform-style: preserve-3d; +} + +.sneaker { + min-height: 35vh; + display: flex; + justify-content: center; + align-items: center; + position: relative; +} + +.sneaker img { + width: 13rem; + z-index: 2; + transition: all 0.75s ease-out; +} + +.circle { + width: 7rem; + height: 7rem; + background: linear-gradient( + to right, + rgba(245, 70, 66, 0.75), + rgba(8, 83, 156, 0.75) + ); + position: absolute; + z-index: -1; + border-radius: 50%; +} + +.info h1 { + font-size: 1.7rem; + transition: all 0.75s ease-out; +} + +.info h3 { + font-size: 1rem; + padding: 2rem 0rem; + color: #585858; + font-weight: lighter; + transition: all 0.75s ease-out; +} + +.sizes { + display: flex; + justify-content: space-between; + transition: all 0.75s ease-out; +} + +.sizes button { + padding: 0.5rem 2rem; + background: none; + border: none; + box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); + border-radius: 30px; + cursor: pointer; + font-weight: bold; + font-family: inherit; + color: #585858; +} + +button.active { + color: white; + background-color: #585858; +} + +.purchase { + margin-top: 3rem; + transition: all 0.75s ease-out; +} + +.purchase button { + width: 100%; + padding: 1rem 0rem; + background: #f54642; + border: none; + color: white; + cursor: pointer; + border-radius: 30px; + font-weight: bolder; + font-family: inherit; +} + +@media screen and (min-width: 740px) { + .card { + width: 35rem; + padding: 0rem 5rem; + } + + .sneaker img { + width: 20rem; + } + + .circle { + width: 15rem; + height: 15rem; + } + + .info h1 { + font-size: 3rem; + } + + .info h3 { + font-size: 1.3rem; + } +} diff --git a/06-Memory-Cards/index.html b/06-Memory-Cards/index.html new file mode 100644 index 0000000..3702725 --- /dev/null +++ b/06-Memory-Cards/index.html @@ -0,0 +1,58 @@ + + + + + + + + Talha - Memory Cards + + + +

+ Memory Cards + +

+
+
+ +

+ +
+
+

+ Add New Card + +

+
+ + +
+ +
+ + +
+ + +
+ + + diff --git a/06-Memory-Cards/script.js b/06-Memory-Cards/script.js new file mode 100644 index 0000000..33eb373 --- /dev/null +++ b/06-Memory-Cards/script.js @@ -0,0 +1,118 @@ +const cardsContainer = document.getElementById("cards-container"); +const prevButton = document.getElementById("prev"); +const nextButton = document.getElementById("next"); +const currentElement = document.getElementById("current"); +const showButton = document.getElementById("show"); +const hideButton = document.getElementById("hide"); +const questionElement = document.getElementById("question"); +const answerElement = document.getElementById("answer"); +const addCardButton = document.getElementById("add-card"); +const clearButton = document.getElementById("clear"); +const addContainer = document.getElementById("add-container"); + +let currentActiveCard = 0; +const cardsElement = []; + +const cardsData = [ + { + question: "What does CSS stand for?", + answer: "Cascading Style Sheets", + }, + { + question: "What year was JavaScript launched?", + answer: "1995", + }, + { + question: "What does HTML stand for?", + answer: "Hypertext Markup Language", + }, +]; +// const cardsData = getCardsData(); + +function createCards() { + cardsData.forEach((data, index) => createCard(data, index)); +} + +function createCard(data, index) { + const card = document.createElement("div"); + card.classList.add("card"); + if (index === 0) card.classList.add("active"); + card.innerHTML = ` +
+
+

${data.question}

+
+
+

${data.answer}

+
+
+ `; + card.addEventListener("click", () => card.classList.toggle("show-answer")); + cardsElement.push(card); + cardsContainer.appendChild(card); + updateCurrentText(); +} + +function updateCurrentText() { + currentElement.innerText = `${currentActiveCard + 1}/${cardsElement.length}`; +} + +// function getCardsData() { +// const cards = JSON.parse(localStorage.getItem("cards")); +// return cards === null ? [] : cards; +// } + +// function setCardsData(cards) { +// localStorage.setItem("cards", JSON.stringify(cards)); +// history.go(0); +// } + +// Event Listeners +nextButton.addEventListener("click", () => { + cardsElement[currentActiveCard].className = "card left"; + currentActiveCard++; + if (currentActiveCard > cardsElement.length - 1) { + currentActiveCard = 0; + } + cardsElement[currentActiveCard].className = "card active"; + updateCurrentText(); +}); + +prevButton.addEventListener("click", () => { + cardsElement[currentActiveCard].className = "card right"; + currentActiveCard--; + if (currentActiveCard < 0) { + currentActiveCard = cardsElement.length - 1; + } + cardsElement[currentActiveCard].className = "card active"; + updateCurrentText(); +}); + +showButton.addEventListener("click", () => addContainer.classList.add("show")); +hideButton.addEventListener("click", () => + addContainer.classList.remove("show") +); + +addCardButton.addEventListener("click", () => { + const question = questionElement.value; + const answer = answerElement.value; + if (question.trim() && answer.trim()) { + const newCard = { question, answer }; + createCard(newCard); + questionElement.value = ""; + answerElement.value = ""; + addContainer.classList.remove("show"); + cardsData.push(newCard); + // setCardsData(cardsData); + } +}); + +clearButton.addEventListener("click", () => { + // localStorage.clear(); + cardsContainer.innerHTML = ""; + currentElement.innerText = ""; + // history.go(0); +}); + +// Init +createCards(); diff --git a/06-Memory-Cards/style.css b/06-Memory-Cards/style.css new file mode 100644 index 0000000..d6be60c --- /dev/null +++ b/06-Memory-Cards/style.css @@ -0,0 +1,221 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap"); + +:root { + --primary-color: #8e44ad; + --background-color: #b8c6db; + --secondary-background-color: #f5f7fa; + --light-color: #fff; + --border-color: #aaa; +} + +* { + box-sizing: border-box; +} + +body { + background-color: var(--background-color); + background-image: linear-gradient(315deg, var(--background-color) 0%, var(--secondary-background-color) 100%); + font-family: "Poppins", sans-serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; +} + +h1 button { + position: absolute; + top: 2rem; + right: 2rem; + z-index: 2; +} + +.btn { + cursor: pointer; + background-color: var(--background-color); + border: none; + border-radius: 0.625rem; + font-size: 0.875rem; + padding: 0.5rem 1rem; +} + +.btn-small { + font-size: 0.75rem; + padding: 0.25rem 0.5rem; +} + +.btn-ghost { + border: 0; + background-color: transparent; +} + +.btn-margin { + margin-top: 1.25rem; + width: 28.125rem; + max-width: 90%; +} + +.btn:hover { + background-color: var(--primary-color); + color: var(--light-color); +} + +.btn:focus, .navigation .nav-button:focus { + outline: none; +} + +.clear { + position: absolute; + bottom: 2rem; + left: 2rem; +} + +.cards { + perspective: 1000px; + position: relative; + width: 31.25rem; + max-width: 90%; + height: 18.75rem; +} + +.card { + background-color: var(--light-color); + border-radius: 0.625rem; + position: absolute; + font-size: 1.5rem; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + transform: translateX(50%) rotateY(-10deg); + transition: transform 0.4s ease, opacity 0.4s ease; +} + +.card.active { + cursor: pointer; + opacity: 1; + z-index: 10; + transform: translateX(0) rotateY(0deg); +} + +.card.left { + transform: translateX(-50%) rotateY(10deg); +} + +.inner-card { + box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); + border-radius: 0.625rem; + position: relative; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: transform 0.4s ease; +} + +.card.show-answer .inner-card { + transform: rotateX(180deg); +} + +.inner-card-front, .inner-card-back { + backface-visibility: hidden; + background-color: var(--light-color); + border-radius: 0.625rem; + position: absolute; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; +} + +.inner-card-front { + transform: rotateX(0deg); + z-index: 2; +} + +.inner-card-back { + transform: rotateX(180deg); +} + +.inner-card-front::after, .inner-card-back::after { + content: '\f021 Flip'; + font-family: 'Font Awesome 5 Free', 'Poppins', sans-serif; + position: absolute; + top: 0.625rem; + right: 0.625rem; + font-weight: bold; + font-size: 1rem; + color: var(--background-color); +} + +.navigation { + display: flex; + margin: 1.25rem 0; +} + +.navigation .nav-button { + border: none; + background-color: transparent; + cursor: pointer; + font-size: 1rem; +} + +.navigation .nav-button:hover { + transform: scale(1.2) +} + +.navigation p { + margin: 0 1.5rem; +} + +.add-container { + background-color: var(--secondary-background-color); + border-top: 2px solid var(--border-color); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 0.625rem 0; + position: absolute; + top: 0; + bottom: 0; + width: 100%; + opacity: 0; + z-index: -1; + transition: all 0.3s ease; +} + +.add-container.show { + opacity: 1; + z-index: 2; +} + +.add-container h3 { + margin: 0.625rem 0; +} + +.form-group { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.form-group label { + display: block; + margin: 1.25rem 0 0.625rem; +} + +.form-group textarea { + border: 1px solid var(--border-color); + border-radius: 0.625rem; + font-size: 1rem; + padding: 0.75rem; + width: 31.25rem; + max-width: 90%; +} diff --git a/07-Card-Hover-Effect-V1/index.html b/07-Card-Hover-Effect-V1/index.html new file mode 100644 index 0000000..91a9c26 --- /dev/null +++ b/07-Card-Hover-Effect-V1/index.html @@ -0,0 +1,36 @@ + + + + + Talha - Hovering Cards V1 + + + + + +
+

Tourist Attractions

+
+
+ +

Pyramids

+

The Egyptian pyramids are ancient pyramid-shaped masonry structures located in Egypt. As of November 2008, sources cite either 118 or 138 as the number of identified Egyptian pyramids.

+
+ +
+ Eiffel Tower +

Statue of Liberty

+

The Statue of Liberty is a colossal neoclassical sculpture on Liberty Island in New York Harbor in New York City, in the United States.

+
+ +
+ +

Taj Mahal

+

The Taj Mahal is an ivory-white marble mausoleum on the south bank of the Yamuna river in the Indian city of Agra. It was commissioned in 1632 by the Mughal emperor.

+
+
+
+ + + + diff --git a/07-Card-Hover-Effect-V1/style.css b/07-Card-Hover-Effect-V1/style.css new file mode 100644 index 0000000..8240352 --- /dev/null +++ b/07-Card-Hover-Effect-V1/style.css @@ -0,0 +1,119 @@ +@import url('https://fonts.googleapis.com/css?family=Exo:700'); +@import url('https://fonts.googleapis.com/css?family=Abel'); +body { + background-color: #dfe6e9; + -webkit-transform: perspective(900px); + -webkit-transform-style: preserve-3d; +} +.title{ + width=100%; + text-align: center; +} +.title h1{ + font-size:50px; + font-family: 'Exo', sans-serif; +} +.card1 { + text-align:center; + position: absolute; + left: 100px; + width: 250px; + height: 350px; + margin-top: 10px; + margin-bottom: 10px; + background: linear-gradient(rgb(225,150,58),rgb(227,144,91)); + transition:.6s; + + transform: rotatex(75deg) translatey(-200px) translatez(-100px); + box-shadow: 0px 20px 60px rgba(0,0,0, 0.5); +} +.card1:hover{ + transform: rotatex(0deg); + transform: rotatez(0deg); + transition:.6s; + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); +} +.card1 img{ + transform: translateY(15px); + width:200px; + height:120px; +} +h3{ + font-size:25px; + font-family: 'Abel', sans-serif; + color:rgb(255,255,255); + text-shadow: 0 0 2px rgb(255,255,255); + transform: translatey(10px); +} + +p{ + + font-family: 'Abel', sans-serif; + color: white; + text-align:center; + width:220px; + transform: translatex(12px); +} + + +.card2 { + text-align:center; + position: absolute; + left: 550px; + width: 250px; + height: 350px; + margin-top: 10px; + margin-bottom: 10px; + background: linear-gradient(rgb(93,94,170),rgb(93,66,103)); + animation: animate 1s linear infinite; + transition:.6s; + + transform: rotatex(75deg) translatey(-200px) translatez(-100px); + box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.5); +} +.card2:hover{ + transform: rotatex(0deg); + transition:.6s; + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); +} +.card2 img{ + transform: translateY(15px); + width:180px; + height:150px; +} +.card3 { + text-align:center; + position: absolute; + left: 1000px; + width: 250px; + height: 350px; + margin-top: 10px; + margin-bottom: 10px; + background: linear-gradient(#ff5252, #b33939); + transition:.6s; + + transform: rotatex(75deg) translatey(-200px) translatez(-100px); + box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.5); +} +.card3:hover{ + transform: rotatex(0deg); + transition:.6s; + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); +} +.card3 img{ + transform: translateY(15px); + width:200px; + height:120px; +} +.footer{ + position: absolute; + top: 500px; + marging: 10px; + width: 100%; + text-align: center; +} +.footer h2{ + font-size:18px; + font-family: 'Exo', sans-serif; + +} \ No newline at end of file diff --git a/08-Card-Hover-Effect-V2/index.html b/08-Card-Hover-Effect-V2/index.html new file mode 100644 index 0000000..1bef682 --- /dev/null +++ b/08-Card-Hover-Effect-V2/index.html @@ -0,0 +1,63 @@ + + + + + Talha - Hovering Cards V2 + + + + +
+
+
+
+ +

Java

+

+ Java is a class-based, object-oriented programming language that + is designed to have as few implementation dependencies as + possible. +

+
+
+
+

01

+
+
+ +
+
+
+ +

Python

+

+ Python is an interpreted, high-level and general-purpose + programming language. +

+
+
+
+

02

+
+
+ +
+
+
+ +

C#

+

+ C# is a general-purpose, multi-paradigm programming language + encompassing static typing, strong typing, lexically scoped and + component-oriented programming disciplines. +

+
+
+
+

03

+
+
+
+ + + diff --git a/08-Card-Hover-Effect-V2/style.css b/08-Card-Hover-Effect-V2/style.css new file mode 100644 index 0000000..aa0c971 --- /dev/null +++ b/08-Card-Hover-Effect-V2/style.css @@ -0,0 +1,92 @@ +@import url("https://fonts.googleapis.com/css2?family=Righteous&display=swap"); +body { + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + font-family: "Righteous", cursive; + min-height: 100vh; + background-color: #a9c9ff; + background-image: linear-gradient(180deg, #a9c9ff 0%, #ffbbec 100%); +} +body .container { + max-width: 100vw; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + grid-gap: 35px; + margin: 0 auto; + padding: 40px 0; +} +body .container .card { + position: relative; + width: 300px; + height: 400px; + margin: 0 auto; + background: #000; + border-radius: 15px; + box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5); +} +body .container .card .face { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +body .container .card .face.face1 { + box-sizing: border-box; + padding: 20px; +} +body .container .card .face.face1 h2 { + margin: 0; + padding: 0; +} +body .container .card .face.face1 .java { + background-color: #fffc00; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +body .container .card .face.face1 .python { + background-color: #00fffc; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +body .container .card .face.face1 .cSharp { + background-color: #fc00ff; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +body .container .card .face.face2 { + transition: 0.5s; +} +body .container .card .face.face2 h2 { + margin: 0; + padding: 0; + font-size: 10em; + color: #fff; + transition: 0.5s; + text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + z-index: 10; +} +body .container .card:hover .face.face2 { + height: 60px; +} +body .container .card:hover .face.face2 h2 { + font-size: 2em; +} +body .container .card:nth-child(1) .face.face2 { + background-image: linear-gradient(40deg, #fffc00 0%, #fc00ff 45%, #00fffc 100%); + border-radius: 15px; +} +body .container .card:nth-child(2) .face.face2 { + background-image: linear-gradient(40deg, #fc00ff 0%, #00fffc 45%, #fffc00 100%); + border-radius: 15px; +} +body .container .card:nth-child(3) .face.face2 { + background-image: linear-gradient(40deg, #00fffc 0%, #fc00ff 45%, #fffc00 100%); + border-radius: 15px; +} \ No newline at end of file diff --git a/09-Card-Hover-Effect-V3/index.html b/09-Card-Hover-Effect-V3/index.html new file mode 100644 index 0000000..acacb34 --- /dev/null +++ b/09-Card-Hover-Effect-V3/index.html @@ -0,0 +1,46 @@ + + + + + Talha - Hovering Cards V3 + + + + + +
+
+
+ +
+
+

Karan Singh
+ Graphic Designer +

+
+
+
+
+ +
+
+

Dolly Seth
+ Digital Marketing +

+
+
+
+
+ +
+
+

Aakash Agrawal
+ Chartered Accountant C.A +

+
+
+
+ + + + diff --git a/09-Card-Hover-Effect-V3/style.css b/09-Card-Hover-Effect-V3/style.css new file mode 100644 index 0000000..856b380 --- /dev/null +++ b/09-Card-Hover-Effect-V3/style.css @@ -0,0 +1,103 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap"); +*, +*::after, +*::before { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 62.5%; +} + +body { + width: 100vw; + min-height: 100vh; + background-color: #f0f0f0; + font-family: "Poppins", sans-serif; + display: flex; + justify-content: center; + align-items: center; +} + +.container { + position: relative; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} + +.container .box { + position: relative; + width: 30rem; + height: 30rem; + margin: 4rem; +} + +.container .box:hover .imgBox { + transform: translate(-3.5rem, -3.5rem); +} + +.container .box:hover .content { + transform: translate(3.5rem, 3.5rem); +} + +.imgBox { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 2; + transition: all 0.5s ease-in-out; +} + +.imgBox img { + width: 30rem; + height: 30rem; + object-fit: cover; + resize: both; +} + +.content { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 1.5rem; + display: flex; + justify-content: center; + background-color: #fff; + z-index: 1; + align-items: flex-end; + text-align: center; + transition: 0.5s ease-in-out; +} + +.content h2 { + display: block; + font-size: 2rem; + color: #111; + font-weight: 500; + line-height: 2rem; + letter-spacing: 1px; +} + +.content span { + color: #555; + font-size: 1.4rem; + font-weight: 300; + letter-spacing: 2px; +} + +@media (max-width: 600px) { + .container .box:hover .content { + transform: translate(0, 3.5rem); + } + .container .box:hover .imgBox { + transform: translate(0, -3.5rem); + } +} \ No newline at end of file diff --git a/10-I-Love-You-Card/index.html b/10-I-Love-You-Card/index.html new file mode 100644 index 0000000..c8003cd --- /dev/null +++ b/10-I-Love-You-Card/index.html @@ -0,0 +1,75 @@ + + + + + Talha - I love you + + + + + + +
+
+
+
+
+
+
+
+
+
+
+ 
  console.log(
+    'I Love You'
+  );
+
+
+
+
+
+
+
+
+ 
  console.log(
+    'I Love You'
+  );
+
+
+
+
+
+
+
+
+
+
+ 
  console.log(
+    'I Love You'
+  );
+
Click me
+
+
+
+
+
+
+
+
+ 
  console.log(
+    'I Love You '
+  );
+
Click me
+
+
+
+
+
+
+ + + + + + diff --git a/10-I-Love-You-Card/script.js b/10-I-Love-You-Card/script.js new file mode 100644 index 0000000..102de30 --- /dev/null +++ b/10-I-Love-You-Card/script.js @@ -0,0 +1,235 @@ +(function () { + + hljs.highlightAll(); + + var Confetti = function (options) { + var t = this; + t.o = options || {}; + + + //DOM storage + t.doms = {}; + + //Vars storage + t.vars = { + confettiFrequency: 3, //DEP??? + confettiColors: ['#fce18a', '#ff726d', '#b48def', '#f4306d'], + confettiSpeed: ['slow', 'medium', 'fast'], + confetiCount: 0, + confetiLimit: 100, + confettiDestroyTime: 3000, //ms + confettiRenderTime: 60, //ms + confettiSizeRange: [3, 7] }; + + + //classes store + t.classes = { + 'confettiContainer': 'confetti-container' }; + + + //callbacks store + t.callbacks = {}; + + //Init if options are valid + if (t.handleOptions()) { + t.init(); + } + + }; + + + + Confetti.prototype.handleOptions = function () { + var t = this; + + if (t.o.target) { + t.doms.target = t.o.target; + } else { + throw 'Confetti.options.target - is not valid DOM element'; + return false; + } + + if (!!t.o.onstart) { + t.callbacks.onstart = t.o.onstart; + } + + if (!!t.o.ondone) { + t.callbacks.ondone = t.o.ondone; + } + + return true; + }; + + Confetti.prototype.setupElements = function () { + var t = this, + containerDOM = document.createElement('div'), + targetPosition = t.doms.target.style.position; + + containerDOM.className = t.classes['confettiContainer']; + + if (targetPosition != 'relative' || targetPosition != 'absolute') { + t.doms.target.style.position = 'relative'; + } + + t.doms.target.appendChild(containerDOM); + t.doms.containerDOM = containerDOM; + }; + + Confetti.prototype.getContainerSize = function () { + var t = this; + + return Math.floor(Math.random() * t.vars.confettiSizeRange[0]) + t.vars.confettiSizeRange[1] + 'px'; + }; + + Confetti.prototype.getConfettiColor = function () { + var t = this; + + return t.vars.confettiColors[Math.floor(Math.random() * t.vars.confettiColors.length)]; + }; + + + Confetti.prototype.getConfettiSpeed = function () { + var t = this; + + return t.vars.confettiSpeed[Math.floor(Math.random() * t.vars.confettiSpeed.length)]; + }; + + + Confetti.prototype.getConfettiPosition = function () { + var t = this; + + return Math.floor(Math.random() * t.doms.target.offsetWidth) + 'px'; + }; + + Confetti.prototype.generateConfetti = function () {var _confettiDOM$classLis, _confettiDOM$classLis2; + var t = this, + confettiDOM = document.createElement('div'), + confettiSize = t.getContainerSize(), + confettiBackground = t.getConfettiColor(), + confettiLeft = t.getConfettiPosition(), + confettiSpeed = t.getConfettiSpeed(); + + confettiDOM === null || confettiDOM === void 0 ? void 0 : (_confettiDOM$classLis = confettiDOM.classList) === null || _confettiDOM$classLis === void 0 ? void 0 : _confettiDOM$classLis.add('confetti'); + confettiDOM === null || confettiDOM === void 0 ? void 0 : (_confettiDOM$classLis2 = confettiDOM.classList) === null || _confettiDOM$classLis2 === void 0 ? void 0 : _confettiDOM$classLis2.add('confetti-animation-' + confettiSpeed); + confettiDOM.style.left = confettiLeft; + confettiDOM.style.width = confettiSize; + confettiDOM.style.height = confettiSize; + confettiDOM.style.backgroundColor = confettiBackground; + + confettiDOM.removeTimeout = setTimeout(function () { + confettiDOM.parentNode.removeChild(confettiDOM); + }, t.vars.confettiDestroyTime); + + t.doms.containerDOM.appendChild(confettiDOM); + }; + + Confetti.prototype.renderConfetti = function () { + var t = this; + + if (t.callbacks.onstart) { + t.callbacks.onstart(); + } + + t.confettiInterval = setInterval(function () { + t.vars.confetiCount++; + + if (t.vars.confetiCount > t.vars.confetiLimit) { + if (t.callbacks.ondone) { + t.callbacks.ondone(); + } + clearInterval(t.confettiInterval); + return false; + } else { + t.generateConfetti(); + } + + + }, t.vars.confettiRenderTime); + }; + + Confetti.prototype.restart = function (instance) { + var t = this || instance; + t.vars.confetiCount = 0; + t.renderConfetti(); + }; + + Confetti.prototype.start = Confetti.prototype.restart; + + Confetti.prototype.stop = function () { + var t = this || instance; + t.vars.confetiCount = t.vars.confetiLimit; + }; + + + Confetti.prototype.init = function () { + var t = this; + + t.setupElements(); + }; + + + const content = document.querySelector('.content'); + const gradient = document.querySelector('#background'); + const cardWrapper = document.querySelector('.card-wrapper'); + const audio = document.querySelector('audio'); + const confetti = new Confetti({ target: content }); + + cardWrapper.addEventListener('click', () => { + const isActive = cardWrapper.classList.contains('active'); + + if (isActive) { + cardWrapper.classList.remove('active'); + audio.pause(); + confetti.stop(); + gradient.style.opacity = 0; + } else { + cardWrapper.classList.add('active'); + audio.play(); + confetti.start(); + gradient.style.opacity = 1; + } + }); + + + // https://codesandbox.io/s/3d-hover-effect-hqy6h?file=/src/index.js:0-944 + const card = cardWrapper; + const motionMatchMedia = window.matchMedia("(prefers-reduced-motion)"); + const THRESHOLD = 30; + + function handleHover(e) { + const { clientX, clientY, currentTarget } = e; + const { clientWidth, clientHeight, offsetLeft, offsetTop } = currentTarget; + + const horizontal = (clientX - offsetLeft) / clientWidth; + const vertical = (clientY - offsetTop) / clientHeight; + const rotateX = (THRESHOLD / 2 - horizontal * THRESHOLD).toFixed(2); + const rotateY = (vertical * THRESHOLD - THRESHOLD / 2).toFixed(2); + + card.style.transform = `perspective(${clientWidth}px) rotateX(${rotateY}deg) rotateY(${rotateX}deg) scale3d(1, 1, 1)`; + } + + function resetStyles(e) { + card.style.transform = `perspective(${e.currentTarget.clientWidth}px) rotateX(0deg) rotateY(0deg)`; + } + + if (!motionMatchMedia.matches) { + card.addEventListener("mousemove", handleHover); + card.addEventListener("mouseleave", resetStyles); + } + + + new Granim({ + element: '#gradient', + direction: 'radial', + isPausedWhenNotInView: true, + states: { + "default-state": { + gradients: [ + ['#ff8faf', '#ffe5ed'], + ['#f38fff', '#ffe5ed'], + ['#ff8f8f', '#ffe5ed']] } } }); + + + + +})(); \ No newline at end of file diff --git a/10-I-Love-You-Card/style.css b/10-I-Love-You-Card/style.css new file mode 100644 index 0000000..3532f59 --- /dev/null +++ b/10-I-Love-You-Card/style.css @@ -0,0 +1,223 @@ +.content { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; +} + +.card-wrapper { + width: 560px; +} +.card-wrapper .card { + position: relative; + width: 280px; + height: 497.7777777778px; + transform: perspective(1000px) translate(50%) scale(0.5) rotateY(0deg); + transform-origin: 50px center; + transition: 1s cubic-bezier(0, 0, 0, 0.94); +} +.card-wrapper .card .side { + background: transparent; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + transform: perspective(1000px) rotateY(0); + transform-origin: right center; + transform-style: preserve-3d; + transition: 1s cubic-bezier(0, 0, 0, 0.94); +} +.card-wrapper .card .side.side-a { + border-radius: 10px 0 0 10px; +} +.card-wrapper .card .side.side-b { + border-radius: 10px 0 0 10px; +} +.card-wrapper .card .side .back, +.card-wrapper .card .side .front { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + backface-visibility: hidden; + transition: 0 0.5s cubic-bezier(0, 0, 0, 0.94); + overflow: hidden; +} +.card-wrapper .card .side .front { + z-index: 2; + transform-origin: center; +} +.card-wrapper .card .side .back { + transform: rotateY(180deg); +} +.card-wrapper .card .side .back .heart { + transform: rotateY(180deg); + max-height: 100%; +} +.card-wrapper .card .side.side-b .front .heart .circle, +.card-wrapper .card .side.side-b .front .heart .rect { + background: #f9bec7; +} +.card-wrapper .card .side.side-b .back .heart .title { + display: none; +} +.card-wrapper.active .card { + transform: perspective(1000px) translate(0%) scale(1) rotateY(0); +} +.card-wrapper.active .card .side.side-b { + transform: perspective(1000px) rotateY(180deg); +} +.card-wrapper.active .card .side-a .front .heart .circle, +.card-wrapper.active .card .side-a .front .heart .rect { + background: #ff5c8a !important; +} +.card-wrapper.active .card .side-b .back .heart .circle, +.card-wrapper.active .card .side-b .back .heart .rect { + background: #ff5c8a !important; +} +.card-wrapper:not(.active) .heart { + cursor: pointer; +} + +.heart { + font-family: "Satisfy", cursive; +} +.heart .heart-half { + transform: rotate(-45deg) scale(0.8) translateX(23%) translateY(10%); + transform-origin: 140px 140px; +} +.heart .heart-half .circle { + width: 280px; + height: 280px; + background: red; + border-radius: 50%; + transition: background 1s cubic-bezier(0, 0, 0, 0.94); +} +.heart .heart-half .rect { + width: 280px; + height: 280px; + background: red; + margin-top: -140px; + transition: background 1s cubic-bezier(0, 0, 0, 0.94); +} +.heart .title { + position: absolute; + top: 30%; + font-family: "Quicksand", sans-serif; + right: 10%; + font-size: 38px; + transform: rotate(45deg); + color: #ff0a54; +} + +.ijustcode { + position: absolute; + top: 124.4444444444px; + right: 0; + height: 100px; + margin: auto; + backface-visibility: hidden; + transform: translateX(50%); +} + +.side-b .ijustcode code { + transform: rotateY(-180deg); +} +.side-b .front .ijustcode { + display: none; +} + +.hljs-addition, .hljs-attribute, .hljs-meta .hljs-string, .hljs-regexp, .hljs-string { + color: #c379ba; + font-weight: 600; +} + +pre code.hljs { + border-radius: 10px; +} + +audio { + display: none; +} + +/******* +******** + +Confeti styles + +******** +*******/ +@keyframes confetti-slow { + 0% { + transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); + } + 100% { + transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg); + } +} +@keyframes confetti-medium { + 0% { + transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); + } + 100% { + transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg); + } +} +@keyframes confetti-fast { + 0% { + transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); + } + 100% { + transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg); + } +} +.container { + /*width: 100vw; + height: 100vh; + background: #f0f0f0;*/ +} + +.confetti-container { + perspective: 700px; + position: absolute; + overflow: hidden; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; +} + +.confetti { + position: absolute; + z-index: 1; + top: -10px; + border-radius: 0%; +} + +.confetti-animation-slow { + animation: confetti-slow 2.5s linear 1 forwards; +} + +.confetti-animation-medium { + animation: confetti-medium 2s linear 1 forwards; +} + +.confetti-animation-fast { + animation: confetti-fast 1.5s linear 1 forwards; +} + +#gradient { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100vw; + height: 100vh; + z-index: -2; + opacity: 0; + transition: opacity 1s cubic-bezier(0, 0, 0, 0.94); +} \ No newline at end of file diff --git a/11-Item-Card-Hover-Effect/index.html b/11-Item-Card-Hover-Effect/index.html new file mode 100644 index 0000000..7bd62be --- /dev/null +++ b/11-Item-Card-Hover-Effect/index.html @@ -0,0 +1,34 @@ + + + + + Talha - Item Card Hover Effect + + + + + +
+
+
+ +
+ +
+ UI/Web&Graph design for teenagers 11-17 years old +
+ +
+ Start: + 04.11.2022 +
+ +
+
+
+ + + diff --git a/11-Item-Card-Hover-Effect/style.css b/11-Item-Card-Hover-Effect/style.css new file mode 100644 index 0000000..888f1c0 --- /dev/null +++ b/11-Item-Card-Hover-Effect/style.css @@ -0,0 +1,142 @@ +.ag-format-container { + width: 1142px; + margin: 0 auto; +} + +body { + background-color: #000; +} +.ag-courses_box { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + + padding: 50px 0; +} +.ag-courses_item { + -ms-flex-preferred-size: calc(33.33333% - 30px); + flex-basis: calc(33.33333% - 30px); + + margin: 0 15px 30px; + + overflow: hidden; + + border-radius: 28px; +} +.ag-courses-item_link { + display: block; + padding: 30px 20px; + background-color: #121212; + + overflow: hidden; + + position: relative; +} +.ag-courses-item_link:hover, +.ag-courses-item_link:hover .ag-courses-item_date { + text-decoration: none; + color: #fff; +} +.ag-courses-item_link:hover .ag-courses-item_bg { + -webkit-transform: scale(10); + -ms-transform: scale(10); + transform: scale(10); +} +.ag-courses-item_title { + min-height: 87px; + margin: 0 0 25px; + + overflow: hidden; + + font-weight: bold; + font-size: 30px; + color: #fff; + + z-index: 2; + position: relative; +} +.ag-courses-item_date-box { + font-size: 18px; + color: #fff; + + z-index: 2; + position: relative; +} +.ag-courses-item_date { + font-weight: bold; + color: #f9b234; + + -webkit-transition: color 0.5s ease; + -o-transition: color 0.5s ease; + transition: color 0.5s ease; +} +.ag-courses-item_bg { + height: 128px; + width: 128px; + background-color: #f9b234; + + z-index: 1; + position: absolute; + top: -75px; + right: -75px; + + border-radius: 50%; + + -webkit-transition: all 0.5s ease; + -o-transition: all 0.5s ease; + transition: all 0.5s ease; +} +.ag-courses_item:nth-child(2n) .ag-courses-item_bg { + background-color: #3ecd5e; +} +.ag-courses_item:nth-child(3n) .ag-courses-item_bg { + background-color: #e44002; +} +.ag-courses_item:nth-child(4n) .ag-courses-item_bg { + background-color: #952aff; +} +.ag-courses_item:nth-child(5n) .ag-courses-item_bg { + background-color: #cd3e94; +} +.ag-courses_item:nth-child(6n) .ag-courses-item_bg { + background-color: #4c49ea; +} + +@media only screen and (max-width: 979px) { + .ag-courses_item { + -ms-flex-preferred-size: calc(50% - 30px); + flex-basis: calc(50% - 30px); + } + .ag-courses-item_title { + font-size: 24px; + } +} + +@media only screen and (max-width: 767px) { + .ag-format-container { + width: 96%; + } +} +@media only screen and (max-width: 639px) { + .ag-courses_item { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + } + .ag-courses-item_title { + min-height: 72px; + line-height: 1; + + font-size: 24px; + } + .ag-courses-item_link { + padding: 22px 40px; + } + .ag-courses-item_date-box { + font-size: 16px; + } +} \ No newline at end of file diff --git a/12-Product-Card-Info/index.html b/12-Product-Card-Info/index.html new file mode 100644 index 0000000..a95aef7 --- /dev/null +++ b/12-Product-Card-Info/index.html @@ -0,0 +1,66 @@ + + + + + Talha - Hover For Product Info + + + + + + +
+
+
+

SIZE

+ +
+
+

PRICE

+ $150 +
+
+

COLORS

+ +
+
Nike Air Max
+
+
+
+
+

SIZE

+ +
+
+

PRICE

+ $50 +
+
+

COLORS

+ +
+
Crew-neck t-shirt
+
+ + + + diff --git a/12-Product-Card-Info/style.css b/12-Product-Card-Info/style.css new file mode 100644 index 0000000..0060d58 --- /dev/null +++ b/12-Product-Card-Info/style.css @@ -0,0 +1,153 @@ +:root { + --size: 400px; + --blue: #aad5ff; + --lb: rgba(0, 0, 0, 0.5); +} +body { + display: grid; + justify-items: center; + grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); + background-color: var(--blue); + color: cornsilk; + font-family: "Roboto Condensed", sans-serif; +} +.container { + width: var(--size); + height: var(--size); + display: grid; + grid-template-columns: repeat(2, 50%); + grid-template-rows: repeat(2, 50%); + justify-items: center; + align-items: center; + filter: drop-shadow(0px 0px 7px rgba(1, 1, 1, .7)); +} +.productImage { + grid-column: 1/span 2; + grid-row: 1 /span 2; + width: var(--size); + height: var(--size); + background-size: cover; + clip-path: polygon( + 20% 20%, + 50% 20%, + 50% 20%, + 80% 20%, + 80% 50%, + 80% 50%, + 80% 80%, + 50% 80%, + 50% 80%, + 20% 80%, + 20% 50%, + 20% 50% + ); + transition: all 0.7s cubic-bezier(0.895, 0.03, 0.685, 0.22); +} +.shoeImg { + background-image: url(https://source.unsplash.com/l8p1aWZqHvE/1000x1000); + background-color: #148bff; +} +.shirtImg { + background-image: url(https://source.unsplash.com/49wtmkUVmFQ/1000x1000); + background-color: #aace29; +} +h4, +ul, +span { + padding: 0; + margin: 0; +} +.size, +.color { + grid-column: 1; + grid-row: 1; + justify-self: center; + z-index: 1; + opacity: 0; + transition: all 0.6s cubic-bezier(0.895, 0.03, 0.685, 0.22); +} +.size ul li, +.color ul li { + list-style: none; + width: 20px; + height: 20px; + margin: 5px; + padding: 5px; + text-align: center; + background-color: rgba(0, 0, 0, 0.5); +} +.color { + grid-column: 2; + grid-row: 2; +} +.color ul li span { + width: 10px; + height: 10px; + border-radius: 50px; + display: inline-block; +} +.red { + background-color: red; +} +.yellow { + background-color: greenyellow; +} +.blue { + background-color: #0070ee; +} +.price { + grid-column: 2; + grid-row: 1; + justify-self: center; + z-index: 1; + opacity: 0; + transition: all 0.6s cubic-bezier(0.895, 0.03, 0.685, 0.22); +} +.price h4 { + margin-bottom: 8px; +} +.price span { + width: 20px; + height: 20px; + padding: 5px; + background-color: rgba(0, 0, 0, 0.5); +} +.productName { + grid-column: 1; + grid-row: 2; + align-self: center; + justify-self: center; + z-index: 1; + transition: all 0.7s cubic-bezier(0.895, 0.03, 0.685, 0.22); +} + +.productImage:hover { + clip-path: polygon( + 20% 0%, + 50% 0%, + 50% 20%, + 100% 20%, + 100% 50%, + 80% 50%, + 80% 100%, + 50% 100%, + 50% 80%, + 0% 80%, + 0% 50%, + 20% 50% + ); + transform: rotate(-15deg); + transition: all 0.4s cubic-bezier(0.86, 0, 0.07, 1); +} +.productImage:hover ~ * { + opacity: 1; + transform: rotate(-15deg); + transition: all 0.4s cubic-bezier(0.86, 0, 0.07, 1); +} +.credits{ + color:white; + font-size: 1.2rem; + grid-column: 1 / -1 ; + justify-self: center; + text-align: center; +} \ No newline at end of file diff --git a/13-Sliding-Product-Card/index.html b/13-Sliding-Product-Card/index.html new file mode 100644 index 0000000..3b027b6 --- /dev/null +++ b/13-Sliding-Product-Card/index.html @@ -0,0 +1,34 @@ + + + + Talha - Sliding Product Card + + + +
+
+ +
+
+

Nike Air Max
Men's Shoe

+

Product Details

+

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla + ducimus iusto. +

+

Size

+ +
+

$199.99

+ Buy Now +
+
+
+ + diff --git a/13-Sliding-Product-Card/shoe.jpg b/13-Sliding-Product-Card/shoe.jpg new file mode 100644 index 0000000..ad1be9b Binary files /dev/null and b/13-Sliding-Product-Card/shoe.jpg differ diff --git a/13-Sliding-Product-Card/style.css b/13-Sliding-Product-Card/style.css new file mode 100644 index 0000000..1521084 --- /dev/null +++ b/13-Sliding-Product-Card/style.css @@ -0,0 +1,171 @@ +@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap'); +* +{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +body +{ + display: flex; + justify-content: center; + align-items: center; + background: linear-gradient(#4ba9e9 0,#4ba9e9 50%,#fff 50%,#fff 100%); + min-height: 100vh; +} +.card +{ + position: relative; + width: 300px; + height: 380px; + background: #0000; + display: flex; + box-shadow: 0 15px 45px rgba(0,0,0,0.1); + overflow: hidden; + transition: 0.5s ease-in-out; +} +.card:hover +{ + width: 600px; +} +.card .imgBx +{ + position: relative; + min-width: 300px; + height: 100%; + background: #fff; + display: flex; + justify-content: center; + align-items: center; + z-index: 10; +} +.card .imgBx img +{ + max-width: 250px; + transition: 0.5s ease-in-out; +} +.card:hover .imgBx img +{ + transform: rotate(-35deg) translateX(-20px); +} +.card .details +{ + position: absolute; + left: 0; + width: 300px; + height: 100%; + background: #4ba9e9; + display: flex; + justify-content: center; + padding: 20px; + flex-direction: column; + transition: 0.5s ease-in-out; +} +.card:hover .details +{ + left: 300px; +} +.card .details::before +{ + content: ''; + position: absolute; + left: 0px; + width: 0; + height: 0; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + border-left: 10px solid #fff; + z-index: 1; +} +.card .details h3 +{ + color: #fff; + text-transform: uppercase; + font-weight: 600; + font-size: 1.5em; + line-height: 1em; +} +.card .details h3 span +{ + font-size: 0.65em; + font-weight: 300; + opacity: 0.85; + text-transform: none; +} +.card .details h4 +{ + color: #fff; + text-transform: uppercase; + font-weight: 600; + font-size: 0.9em; + line-height: 1em; + margin-top: 20px; + margin-bottom: 10px; +} +p +{ + color: #fff; + font-size: 0.8em; + opacity: 0.85; +} +.size +{ + display: flex; + gap: 10px; +} +.size li +{ + list-style: none; + color: #fff; + font-size: 0.9em; + width: 40px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + border: 2px solid #fff; + cursor: pointer; + font-weight: 500; + opacity: 0.5; +} +.size li:hover +{ + background: #fff; + color: #4ba9e9; + opacity: 1; +} +.group +{ + position: relative; + display: flex; + justify-content: space-between; + margin-top: 20px; + align-items: center; +} +.card .details h2 +{ + color: #fff; + text-transform: uppercase; + font-weight: 600; + font-size: 2em; +} +.card .details h2 sup +{ + font-weight: 300; +} +.card .details h2 small +{ + font-size: 0.75em; +} +.card .details a +{ + display: inline-flex; + padding: 10px 25px; + background: #fff; + font-weight: 500; + text-decoration: none; + text-transform: uppercase; + font-weight: 600; + color: #4ba9e9; +} \ No newline at end of file diff --git a/14-Sneakers-Product-Card/index.html b/14-Sneakers-Product-Card/index.html new file mode 100644 index 0000000..e38be91 --- /dev/null +++ b/14-Sneakers-Product-Card/index.html @@ -0,0 +1,80 @@ + + + + + Talha - Sneaker Product Cards + + + + +
+
+
+ OFF-white Red Edition +
+
+

Nike X OFF-white

+

The 10: Air Jordan 1 off-white - Chicago

+
$999
+
+
+ + +
+
+
+
+ OFF-white Blue Edition +
+
+

Nike X OFF-white

+

Air Jordan 1 Retro High "Off-White - UNC" sneakers

+
$1599
+
+
+ + +
+
+
+ + + diff --git a/14-Sneakers-Product-Card/style.css b/14-Sneakers-Product-Card/style.css new file mode 100644 index 0000000..16c8901 --- /dev/null +++ b/14-Sneakers-Product-Card/style.css @@ -0,0 +1,151 @@ +/*===== GOOGLE FONTS =====*/ +@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"); + +/*===== VARIABLES CSS =====*/ +:root { + --dark-color-lighten: #f2f5ff; + --red-card: #a62121; + --blue-card: #4bb7e6; + --btn: #141414; + --btn-hover: #3a3a3a; + --text: #fbf7f7; +} + +/*===== RESET =====*/ +*, +::before, +::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + margin: 0; + padding: 0; + box-sizing: border-box; + height: 100vh; + width: 100vw; + background-color: var(--dark-color-lighten); + font-family: "Montserrat", sans-serif; +} +button { + font-family: "Montserrat", sans-serif; + display: inline-block; + border: none; + outline: none; + border-radius: 0.2rem; + color: var(--text); + cursor: pointer; +} + +a { + text-decoration: none; +} + +img { + max-width: 100%; + height: 100%; + user-select: none; +} + +/*===== CARD =====*/ +.container { + height: 100%; + width: 850px; + margin: auto; + display: flex; + align-items: center; + justify-content: space-evenly; +} +.card { + position: relative; + padding: 1rem; + width: 350px; + height: 450px; + box-shadow: -1px 15px 30px -12px rgb(32, 32, 32); + border-radius: 0.9rem; + background-color: var(--red-card); + color: var(--text); + cursor: pointer; +} + +.card-blue { + background: var(--blue-card); +} + +.product-image { + height: 230px; + width: 100%; + transform: translate(0, -1.5rem); + transition: transform 500ms ease-in-out; + filter: drop-shadow(5px 10px 15px rgba(8, 9, 13, 0.4)); +} +.product-info { + text-align: center; +} + +.card:hover .product-image { + transform: translate(-1.5rem, -7rem) rotate(-20deg); +} + +.product-info h2 { + font-size: 1.4rem; + font-weight: 600; +} +.product-info p { + margin: 0.4rem; + font-size: 0.8rem; + font-weight: 600; +} +.price { + font-size: 1.2rem; + font-weight: 500; +} +.btn { + display: flex; + justify-content: space-evenly; + align-items: center; + margin-top: 0.8rem; +} +.buy-btn { + background-color: var(--btn); + padding: 0.6rem 3.5rem; + font-weight: 600; + font-size: 1rem; + transition: 300ms ease; +} +.buy-btn:hover { + background-color: var(--btn-hover); +} +.fav { + box-sizing: border-box; + background: #fff; + padding: 0.5rem 0.5rem; + border: 1px solid#000; + display: grid; + place-items: center; +} + +.svg { + height: 25px; + width: 25px; + fill: #fff; + transition: all 500ms ease; +} + +.fav:hover .svg { + fill: #000; +} + +@media screen and (max-width: 800px) { + body { + height: auto; + } + .container { + padding: 2rem 0; + width: 100%; + flex-direction: column; + gap: 3rem; + } +} \ No newline at end of file diff --git a/15-Text-Card-Hover-Effect/index.html b/15-Text-Card-Hover-Effect/index.html new file mode 100644 index 0000000..c15d6d6 --- /dev/null +++ b/15-Text-Card-Hover-Effect/index.html @@ -0,0 +1,122 @@ + + + + + Talha - Text Card Hover Effect + + + + + +
+ +
+ + + + + + + + + + + + + +
+
+ +
+
+ Heading + Hello + World + Details and stuff +
+ + +
+ + + + + + + + + + + + + +
+
+ +
+
+ Heading + Hello + World + Details and stuff +
+ +
+ + + diff --git a/15-Text-Card-Hover-Effect/style.css b/15-Text-Card-Hover-Effect/style.css new file mode 100644 index 0000000..4188f5e --- /dev/null +++ b/15-Text-Card-Hover-Effect/style.css @@ -0,0 +1,208 @@ +@import url("https://fonts.googleapis.com/css?family=Lato:300,900"); +*, :after, :before { + box-sizing: border-box; +} + +html, body { + height: 100%; +} + +body { + font-family: "Lato", sans-serif; + background: #eee; + padding: 100px 60px; + -webkit-animation: fade-in 3s ease-in-out forwards; + animation: fade-in 3s ease-in-out forwards; +} + +strong { + font-weight: 900; +} + +.canvas-wrapper { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} +.canvas-wrapper .canvas + .canvas { + margin-left: 40px; +} + +.canvas { + position: relative; + display: block; + width: 400px; + height: 400px; + padding: 20px; + color: inherit; + text-decoration: none; +} + +.canvas_border { + position: absolute; + top: 40px; + left: -40px; + height: 100%; + width: 100%; + z-index: 0; +} +.canvas_border svg { + height: 100%; + width: 100%; +} + +.rect-gradient { + stroke-dasharray: 2000; + stroke-dashoffset: 2000; + -webkit-animation: erase-line 1s ease-in-out forwards; + animation: erase-line 1s ease-in-out forwards; +} + +.canvas_img-wrapper { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + top: 0; + left: 0; + transform: rotate(-10deg) skew(-10deg); + overflow: hidden; + background: white; +} + +.canvas_img { + transform: scale3d(0.9, 0.9, 0.9); + opacity: 0.3; + max-width: 200px; + max-height: 200px; +} + +.canvas_copy { + position: absolute; + bottom: 0; + left: 85%; + text-transform: uppercase; + color: #dac527; + z-index: 100; +} + +.canvas_copy--left { + left: -25%; +} + +.canvas_copy_title { + font-size: 62px; + display: block; + transform: translateX(-80px); + transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; + color: black; +} +.canvas_copy_title:nth-child(1) { + transition-delay: 0.1s; +} +.canvas_copy_title:nth-child(2) { + transition-delay: 0.2s; +} + +.canvas_copy_subtitle { + display: block; + transform: rotate(270deg) translateY(-100%) translateX(calc(-100% - 80px)); + transform-origin: top left; + position: absolute; + left: 0; + top: 8px; + font-size: 24px; + font-weight: 900; + transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.35s; +} + +.canvas_copy_details { + display: block; + transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.14s; + transform: translateX(-80px); +} + +.canvas_border, .canvas_img-wrapper, .canvas_img { + transition: all 0.25s ease-in-out 0s; +} + +.canvas_border, .canvas_img-wrapper { + transform: rotate(-10deg) skew(-10deg); +} + +.canvas_copy_title, .canvas_copy_subtitle, .canvas_copy_details { + opacity: 0; +} + +.canvas:hover .canvas_copy_title, .canvas:hover .canvas_copy_subtitle, .canvas:hover .canvas_copy_details, .canvas:hover .canvas_img { + opacity: 1; +} +.canvas:hover .canvas_border, .canvas:hover .canvas_img-wrapper { + transform: rotate(-14deg) skew(-14deg) scale(0.96); +} +.canvas:hover .canvas_img { + transform: scale3d(1, 1, 1); +} +.canvas:hover .canvas_copy_title, .canvas:hover .canvas_copy_details { + transform: translateX(0); +} +.canvas:hover .canvas_copy_subtitle { + transform: rotate(270deg) translateY(-100%) translateX(-100%); +} +.canvas:hover .rect-gradient { + -webkit-animation: draw-line 3s cubic-bezier(0.19, 1, 0.22, 1) forwards; + animation: draw-line 3s cubic-bezier(0.19, 1, 0.22, 1) forwards; +} + +@-webkit-keyframes draw-line { + from { + stroke-dashoffset: 2000; + } + to { + stroke-dashoffset: 0; + } +} + +@keyframes draw-line { + from { + stroke-dashoffset: 2000; + } + to { + stroke-dashoffset: 0; + } +} +@-webkit-keyframes erase-line { + from { + stroke-dashoffset: 0; + } + to { + stroke-dashoffset: 2000; + } +} +@keyframes erase-line { + from { + stroke-dashoffset: 0; + } + to { + stroke-dashoffset: 2000; + } +} +@-webkit-keyframes fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} \ No newline at end of file