├── .gitattributes ├── 01-Expanding-Cards ├── index.html ├── script.js └── style.css ├── 02-3d-Card-With-Hover ├── index.html └── style.css ├── 03-Creative-Cards ├── index.html ├── marian-oleksyn-Edv_EEWiB3E-unsplash.jpg └── style.css ├── 04-Expanding-Cards ├── app.js ├── index.html └── style.css ├── 05-3D-Product-Card ├── images │ └── adidas.png ├── index.html ├── script.js └── style.css ├── 06-Memory-Cards ├── index.html ├── script.js └── style.css ├── 07-Card-Hover-Effect-V1 ├── index.html └── style.css ├── 08-Card-Hover-Effect-V2 ├── index.html └── style.css ├── 09-Card-Hover-Effect-V3 ├── index.html └── style.css ├── 10-I-Love-You-Card ├── index.html ├── script.js └── style.css ├── 11-Item-Card-Hover-Effect ├── index.html └── style.css ├── 12-Product-Card-Info ├── index.html └── style.css ├── 13-Sliding-Product-Card ├── index.html ├── shoe.jpg └── style.css ├── 14-Sneakers-Product-Card ├── index.html └── style.css ├── 15-Text-Card-Hover-Effect ├── index.html └── style.css ├── LICENSE └── README.md /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /01-Expanding-Cards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | 13 | Talha - Expanding cards 14 | 15 | 16 |

17 |

23 |

Explore the world

24 |

25 |

31 |

Explore the world

32 |

33 |

39 |

Explore the world

40 |

41 |

47 |

Explore the world

48 |

49 |

55 |

Explore the world

56 |

57 |

58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /01-Expanding-Cards/script.js: -------------------------------------------------------------------------------- 1 | const panels = document.querySelectorAll(".panel"); 2 | 3 | panels.forEach((panel) => { 4 | panel.addEventListener("click", () => { 5 | removeActiveClasses(); 6 | panel.classList.add("active"); 7 | }); 8 | }); 9 | 10 | const removeActiveClasses = () => { 11 | panels.forEach((panel) => { 12 | panel.classList.remove("active"); 13 | }); 14 | }; 15 | -------------------------------------------------------------------------------- /01-Expanding-Cards/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Muli&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; /* to avoid width problems if padding */ 5 | } 6 | 7 | body { 8 | font-family: "Muli", sans-serif; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | height: 100vh; 13 | overflow: hidden; /* to hide scrollbars */ 14 | margin: 0; 15 | } 16 | 17 | .container { 18 | display: flex; 19 | width: 90vw; 20 | } 21 | 22 | .panel { 23 | background-size: auto 100%; 24 | background-position: center; 25 | background-repeat: no-repeat; 26 | height: 80vh; 27 | border-radius: 50px; 28 | color: #fff; 29 | cursor: pointer; 30 | flex: 0.5; 31 | margin: 10px; 32 | position: relative; 33 | transition: flex 0.7s ease-in; 34 | -webkit-transition: all 700ms ease-in; 35 | } 36 | 37 | .panel h3 { 38 | font-size: 24px; 39 | position: absolute; 40 | bottom: 20px; 41 | left: 20px; 42 | margin: 0; 43 | opacity: 0; 44 | } 45 | 46 | .panel.active { 47 | flex: 5; 48 | } 49 | 50 | .panel.active h3 { 51 | opacity: 1; 52 | transition: opacity 0.3s ease-in 0.4s; 53 | } 54 | 55 | @media (max-width: 480px) { 56 | .container { 57 | width: 100vw; 58 | } 59 | 60 | .panel:nth-of-type(4), 61 | .panel:nth-of-type(5) { 62 | display: none; 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /02-3d-Card-With-Hover/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Talha - 3D Card Hover Effect 6 | 7 | 8 | 9 | 10 |

11 |

12 |

16 |

17 |

21 |

25 |

26 | 27 |

28 |

29 |

33 |

34 |

38 |

42 |

43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /02-3d-Card-With-Hover/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --card-height: 300px; 3 | --card-width: calc(var(--card-height) / 1.5); 4 | } 5 | * { 6 | box-sizing: border-box; 7 | } 8 | body { 9 | width: 100vw; 10 | height: 100vh; 11 | margin: 0; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | background: #191c29; 16 | } 17 | .card { 18 | width: var(--card-width); 19 | height: var(--card-height); 20 | position: relative; 21 | display: flex; 22 | justify-content: center; 23 | align-items: flex-end; 24 | padding: 0 36px; 25 | perspective: 2500px; 26 | margin: 0 50px; 27 | } 28 | 29 | .cover-image { 30 | width: 100%; 31 | height: 100%; 32 | object-fit: cover; 33 | } 34 | 35 | .wrapper { 36 | transition: all 0.5s; 37 | position: absolute; 38 | width: 100%; 39 | z-index: -1; 40 | } 41 | 42 | .card:hover .wrapper { 43 | transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0); 44 | box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); 45 | -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); 46 | -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); 47 | } 48 | 49 | .wrapper::before, 50 | .wrapper::after { 51 | content: ""; 52 | opacity: 0; 53 | width: 100%; 54 | height: 80px; 55 | transition: all 0.5s; 56 | position: absolute; 57 | left: 0; 58 | } 59 | .wrapper::before { 60 | top: 0; 61 | height: 100%; 62 | background-image: linear-gradient( 63 | to top, 64 | transparent 46%, 65 | rgba(12, 13, 19, 0.5) 68%, 66 | rgba(12, 13, 19) 97% 67 | ); 68 | } 69 | .wrapper::after { 70 | bottom: 0; 71 | opacity: 1; 72 | background-image: linear-gradient( 73 | to bottom, 74 | transparent 46%, 75 | rgba(12, 13, 19, 0.5) 68%, 76 | rgba(12, 13, 19) 97% 77 | ); 78 | } 79 | 80 | .card:hover .wrapper::before, 81 | .wrapper::after { 82 | opacity: 1; 83 | } 84 | 85 | .card:hover .wrapper::after { 86 | height: 120px; 87 | } 88 | .title { 89 | width: 100%; 90 | transition: transform 0.5s; 91 | } 92 | .card:hover .title { 93 | transform: translate3d(0%, -50px, 100px); 94 | } 95 | 96 | .character { 97 | width: 100%; 98 | opacity: 0; 99 | transition: all 0.5s; 100 | position: absolute; 101 | z-index: -1; 102 | } 103 | 104 | .card:hover .character { 105 | opacity: 1; 106 | transform: translate3d(0%, -30%, 100px); 107 | } -------------------------------------------------------------------------------- /03-Creative-Cards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Talha - Creative Card 7 | 8 | 9 | 10 |

11 |

12 |

13 |

14 |

15 |

Olivia

16 |

17 |

18 | 19 | 20 | -------------------------------------------------------------------------------- /03-Creative-Cards/marian-oleksyn-Edv_EEWiB3E-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/he-is-talha/html-css-javascript-card/dbdb28740befe3bdea2fcdc791df99277ccf26bc/03-Creative-Cards/marian-oleksyn-Edv_EEWiB3E-unsplash.jpg -------------------------------------------------------------------------------- /03-Creative-Cards/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | height: 100vh; 4 | background: linear-gradient(#0093e9, #80d0c7); 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | font-family: sans-serif; 9 | } 10 | 11 | .card { 12 | position: relative; 13 | width: 30rem; 14 | height: 30rem; 15 | background: white; 16 | box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); 17 | } 18 | 19 | .card:before, 20 | .card:after { 21 | content: ""; 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | width: 100%; 26 | height: 100%; 27 | background: white; 28 | transition: 1s; 29 | z-index: -1; 30 | } 31 | 32 | .card:hover:before { 33 | transform: rotate(20deg); 34 | box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); 35 | } 36 | 37 | .card:hover:after { 38 | transform: rotate(10deg); 39 | box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); 40 | } 41 | 42 | .imgBox { 43 | position: absolute; 44 | top: 10px; 45 | left: 10px; 46 | bottom: 10px; 47 | right: 10px; 48 | background: #222; 49 | transition: 1s; 50 | z-index: 2; 51 | } 52 | 53 | img { 54 | position: absolute; 55 | top: 0; 56 | left: 0; 57 | width: 100%; 58 | height: 100%; 59 | object-fit: cover; 60 | } 61 | 62 | .card:hover .imgBox { 63 | bottom: 80px; 64 | } 65 | 66 | .details { 67 | position: absolute; 68 | left: 10px; 69 | right: 10px; 70 | bottom: 10px; 71 | height: 60px; 72 | text-align: center; 73 | } 74 | -------------------------------------------------------------------------------- /04-Expanding-Cards/app.js: -------------------------------------------------------------------------------- 1 | const slides = document.querySelectorAll(".slide"); 2 | 3 | slides.forEach((slide) => { 4 | slide.addEventListener("click", () => { 5 | removeCurrentActives(); 6 | slide.classList.add("active"); 7 | }); 8 | }); 9 | 10 | function removeCurrentActives() { 11 | slides.forEach((slide) => { 12 | slide.classList.remove("active"); 13 | }); 14 | } 15 | -------------------------------------------------------------------------------- /04-Expanding-Cards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Talha - Expanding Cards 7 | 8 | 9 | 10 |

11 |

12 |

Dark Siders 2

13 |

14 |

15 |

Assassin's Creed

16 |

17 |

18 |

Dishonored

19 |

20 |

21 |

Watch Dogs 2

22 |

23 |

24 |

Call Of Duty

25 |

26 |

27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /04-Expanding-Cards/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-family: sans-serif; 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | height: 100vh; 11 | margin: 0; 12 | background-color: rgb(5, 5, 5); 13 | color: #fff; 14 | } 15 | 16 | .container { 17 | display: flex; 18 | width: 100vw; 19 | } 20 | 21 | .bg-image { 22 | background-size: cover; 23 | background-position: center; 24 | background-repeat: no-repeat; 25 | } 26 | 27 | /* IMAGES SOURCES */ 28 | /* https://wallpapercave.com/pc-games-wallpapers */ 29 | 30 | .image-1 { 31 | background-image: url(https://wallpapercave.com/dwp2x/wp3163455.jpg); 32 | } 33 | 34 | .image-2 { 35 | background-image: url(https://wallpapercave.com/dwp2x/wp3163465.jpg); 36 | } 37 | 38 | .image-3 { 39 | background-image: url(https://wallpapercave.com/dwp2x/wp4257699.jpg); 40 | } 41 | 42 | .image-4 { 43 | background-image: url(https://wallpapercave.com/dwp2x/wp4257708.jpg); 44 | } 45 | 46 | .image-5 { 47 | background-image: url(https://wallpapercave.com/dwp2x/wp3163453.jpg); 48 | } 49 | 50 | .slide { 51 | position: relative; 52 | height: 80vh; 53 | flex: 0.5; 54 | border-radius: 50px; 55 | color: #fff; 56 | margin: 10px; 57 | cursor: pointer; 58 | transition: all 700ms ease-in; 59 | } 60 | 61 | .slide h3 { 62 | position: absolute; 63 | bottom: 20px; 64 | left: 20px; 65 | margin: 0; 66 | opacity: 0; 67 | font-size: 24px; 68 | } 69 | 70 | @media (max-width: 480px) { 71 | .slide:nth-of-type(4), 72 | .slide:nth-of-type(5) { 73 | display: none; 74 | } 75 | } 76 | 77 | /* JavaScript */ 78 | .slide.active { 79 | flex: 5; 80 | } 81 | 82 | .slide.active h3 { 83 | opacity: 1; 84 | transition: opacity 0.3s ease-in 0.4s; 85 | } 86 | -------------------------------------------------------------------------------- /05-3D-Product-Card/images/adidas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/he-is-talha/html-css-javascript-card/dbdb28740befe3bdea2fcdc791df99277ccf26bc/05-3D-Product-Card/images/adidas.png -------------------------------------------------------------------------------- /05-3D-Product-Card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Talha - 3D Product Card 8 | 9 | 10 |

11 |

12 |

13 |

14 |

15 |

16 |

17 |

Adidas ZX

18 |

19 | FUTURE-READY TRAINERS WITH WRAPPED BOOST FOR EXCEPTION COMFORT. 20 |

21 |

22 | 23 | 24 | 25 | 26 |

27 |

28 | 29 |

30 |

31 |

32 |

33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /05-3D-Product-Card/script.js: -------------------------------------------------------------------------------- 1 | // Movement Animation to happen 2 | const card = document.querySelector(".card"); 3 | const container = document.querySelector(".container"); 4 | 5 | // Items 6 | const title = document.querySelector(".title"); 7 | const sneaker = document.querySelector(".sneaker img"); 8 | const purchase = document.querySelector(".purchase"); 9 | const description = document.querySelector(".info h3"); 10 | const sizes = document.querySelector(".sizes"); 11 | 12 | // Moving animation event 13 | container.addEventListener("mousemove", (e) => { 14 | let xAxis = (window.innerWidth / 2 - e.pageX) / 25; 15 | let yAxis = (window.innerHeight / 2 - e.pageY) / 25; 16 | card.style.transform = `rotateX(${yAxis}deg) rotateY(${xAxis}deg)`; 17 | }); 18 | 19 | // Animate In 20 | container.addEventListener("mouseenter", (e) => { 21 | card.style.transition = "none"; 22 | // Popout 23 | title.style.transform = "translateZ(150px)"; 24 | sneaker.style.transform = "translateZ(200px) rotateZ(-45deg)"; 25 | description.style.transform = "translateZ(125px)"; 26 | sizes.style.transform = "translateZ(100px)"; 27 | purchase.style.transform = "translateZ(75px)"; 28 | }); 29 | 30 | // Animate Out 31 | container.addEventListener("mouseleave", (e) => { 32 | card.style.transition = "all 0.5s ease"; 33 | card.style.transform = `rotateX(0deg) rotateY(0deg)`; 34 | //Popback 35 | title.style.transform = "translateZ(0px)"; 36 | sneaker.style.transform = "translateZ(0) rotateZ(0deg)"; 37 | description.style.transform = "translateZ(0px)"; 38 | sizes.style.transform = "translateZ(0px)"; 39 | purchase.style.transform = "translateZ(0px)"; 40 | }); 41 | -------------------------------------------------------------------------------- /05-3D-Product-Card/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | body { 10 | font-family: "Poppins", sans-serif; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | min-height: 100vh; 15 | overflow: hidden; 16 | perspective: 1000px; 17 | } 18 | 19 | .container { 20 | width: 50%; 21 | display: flex; 22 | justify-content: center; 23 | align-items: center; 24 | } 25 | 26 | .card { 27 | min-height: 80vh; 28 | width: 25rem; 29 | box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.2); 30 | border-radius: 30px; 31 | padding: 0rem 2rem; 32 | transform-style: preserve-3d; 33 | } 34 | 35 | .sneaker { 36 | min-height: 35vh; 37 | display: flex; 38 | justify-content: center; 39 | align-items: center; 40 | position: relative; 41 | } 42 | 43 | .sneaker img { 44 | width: 13rem; 45 | z-index: 2; 46 | transition: all 0.75s ease-out; 47 | } 48 | 49 | .circle { 50 | width: 7rem; 51 | height: 7rem; 52 | background: linear-gradient( 53 | to right, 54 | rgba(245, 70, 66, 0.75), 55 | rgba(8, 83, 156, 0.75) 56 | ); 57 | position: absolute; 58 | z-index: -1; 59 | border-radius: 50%; 60 | } 61 | 62 | .info h1 { 63 | font-size: 1.7rem; 64 | transition: all 0.75s ease-out; 65 | } 66 | 67 | .info h3 { 68 | font-size: 1rem; 69 | padding: 2rem 0rem; 70 | color: #585858; 71 | font-weight: lighter; 72 | transition: all 0.75s ease-out; 73 | } 74 | 75 | .sizes { 76 | display: flex; 77 | justify-content: space-between; 78 | transition: all 0.75s ease-out; 79 | } 80 | 81 | .sizes button { 82 | padding: 0.5rem 2rem; 83 | background: none; 84 | border: none; 85 | box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); 86 | border-radius: 30px; 87 | cursor: pointer; 88 | font-weight: bold; 89 | font-family: inherit; 90 | color: #585858; 91 | } 92 | 93 | button.active { 94 | color: white; 95 | background-color: #585858; 96 | } 97 | 98 | .purchase { 99 | margin-top: 3rem; 100 | transition: all 0.75s ease-out; 101 | } 102 | 103 | .purchase button { 104 | width: 100%; 105 | padding: 1rem 0rem; 106 | background: #f54642; 107 | border: none; 108 | color: white; 109 | cursor: pointer; 110 | border-radius: 30px; 111 | font-weight: bolder; 112 | font-family: inherit; 113 | } 114 | 115 | @media screen and (min-width: 740px) { 116 | .card { 117 | width: 35rem; 118 | padding: 0rem 5rem; 119 | } 120 | 121 | .sneaker img { 122 | width: 20rem; 123 | } 124 | 125 | .circle { 126 | width: 15rem; 127 | height: 15rem; 128 | } 129 | 130 | .info h1 { 131 | font-size: 3rem; 132 | } 133 | 134 | .info h3 { 135 | font-size: 1.3rem; 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /06-Memory-Cards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | 13 | Talha - Memory Cards 14 | 15 | 16 | 19 |

20 | Memory Cards 21 | 24 |

25 |

26 | 35 |

36 |

37 | Add New Card 38 | 41 |

42 |

43 | Question 44 | 45 |

46 | 47 |

48 | Answer 49 | 50 |

51 | 52 | 55 |

56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /06-Memory-Cards/script.js: -------------------------------------------------------------------------------- 1 | const cardsContainer = document.getElementById("cards-container"); 2 | const prevButton = document.getElementById("prev"); 3 | const nextButton = document.getElementById("next"); 4 | const currentElement = document.getElementById("current"); 5 | const showButton = document.getElementById("show"); 6 | const hideButton = document.getElementById("hide"); 7 | const questionElement = document.getElementById("question"); 8 | const answerElement = document.getElementById("answer"); 9 | const addCardButton = document.getElementById("add-card"); 10 | const clearButton = document.getElementById("clear"); 11 | const addContainer = document.getElementById("add-container"); 12 | 13 | let currentActiveCard = 0; 14 | const cardsElement = []; 15 | 16 | const cardsData = [ 17 | { 18 | question: "What does CSS stand for?", 19 | answer: "Cascading Style Sheets", 20 | }, 21 | { 22 | question: "What year was JavaScript launched?", 23 | answer: "1995", 24 | }, 25 | { 26 | question: "What does HTML stand for?", 27 | answer: "Hypertext Markup Language", 28 | }, 29 | ]; 30 | // const cardsData = getCardsData(); 31 | 32 | function createCards() { 33 | cardsData.forEach((data, index) => createCard(data, index)); 34 | } 35 | 36 | function createCard(data, index) { 37 | const card = document.createElement("div"); 38 | card.classList.add("card"); 39 | if (index === 0) card.classList.add("active"); 40 | card.innerHTML = ` 41 |

42 |

43 |

${data.question}

44 |

45 |

46 |

${data.answer}

47 |

48 |

49 | `; 50 | card.addEventListener("click", () => card.classList.toggle("show-answer")); 51 | cardsElement.push(card); 52 | cardsContainer.appendChild(card); 53 | updateCurrentText(); 54 | } 55 | 56 | function updateCurrentText() { 57 | currentElement.innerText = `${currentActiveCard + 1}/${cardsElement.length}`; 58 | } 59 | 60 | // function getCardsData() { 61 | // const cards = JSON.parse(localStorage.getItem("cards")); 62 | // return cards === null ? [] : cards; 63 | // } 64 | 65 | // function setCardsData(cards) { 66 | // localStorage.setItem("cards", JSON.stringify(cards)); 67 | // history.go(0); 68 | // } 69 | 70 | // Event Listeners 71 | nextButton.addEventListener("click", () => { 72 | cardsElement[currentActiveCard].className = "card left"; 73 | currentActiveCard++; 74 | if (currentActiveCard > cardsElement.length - 1) { 75 | currentActiveCard = 0; 76 | } 77 | cardsElement[currentActiveCard].className = "card active"; 78 | updateCurrentText(); 79 | }); 80 | 81 | prevButton.addEventListener("click", () => { 82 | cardsElement[currentActiveCard].className = "card right"; 83 | currentActiveCard--; 84 | if (currentActiveCard < 0) { 85 | currentActiveCard = cardsElement.length - 1; 86 | } 87 | cardsElement[currentActiveCard].className = "card active"; 88 | updateCurrentText(); 89 | }); 90 | 91 | showButton.addEventListener("click", () => addContainer.classList.add("show")); 92 | hideButton.addEventListener("click", () => 93 | addContainer.classList.remove("show") 94 | ); 95 | 96 | addCardButton.addEventListener("click", () => { 97 | const question = questionElement.value; 98 | const answer = answerElement.value; 99 | if (question.trim() && answer.trim()) { 100 | const newCard = { question, answer }; 101 | createCard(newCard); 102 | questionElement.value = ""; 103 | answerElement.value = ""; 104 | addContainer.classList.remove("show"); 105 | cardsData.push(newCard); 106 | // setCardsData(cardsData); 107 | } 108 | }); 109 | 110 | clearButton.addEventListener("click", () => { 111 | // localStorage.clear(); 112 | cardsContainer.innerHTML = ""; 113 | currentElement.innerText = ""; 114 | // history.go(0); 115 | }); 116 | 117 | // Init 118 | createCards(); 119 | -------------------------------------------------------------------------------- /06-Memory-Cards/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap"); 2 | 3 | :root { 4 | --primary-color: #8e44ad; 5 | --background-color: #b8c6db; 6 | --secondary-background-color: #f5f7fa; 7 | --light-color: #fff; 8 | --border-color: #aaa; 9 | } 10 | 11 | * { 12 | box-sizing: border-box; 13 | } 14 | 15 | body { 16 | background-color: var(--background-color); 17 | background-image: linear-gradient(315deg, var(--background-color) 0%, var(--secondary-background-color) 100%); 18 | font-family: "Poppins", sans-serif; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | height: 100vh; 24 | overflow: hidden; 25 | margin: 0; 26 | } 27 | 28 | h1 button { 29 | position: absolute; 30 | top: 2rem; 31 | right: 2rem; 32 | z-index: 2; 33 | } 34 | 35 | .btn { 36 | cursor: pointer; 37 | background-color: var(--background-color); 38 | border: none; 39 | border-radius: 0.625rem; 40 | font-size: 0.875rem; 41 | padding: 0.5rem 1rem; 42 | } 43 | 44 | .btn-small { 45 | font-size: 0.75rem; 46 | padding: 0.25rem 0.5rem; 47 | } 48 | 49 | .btn-ghost { 50 | border: 0; 51 | background-color: transparent; 52 | } 53 | 54 | .btn-margin { 55 | margin-top: 1.25rem; 56 | width: 28.125rem; 57 | max-width: 90%; 58 | } 59 | 60 | .btn:hover { 61 | background-color: var(--primary-color); 62 | color: var(--light-color); 63 | } 64 | 65 | .btn:focus, .navigation .nav-button:focus { 66 | outline: none; 67 | } 68 | 69 | .clear { 70 | position: absolute; 71 | bottom: 2rem; 72 | left: 2rem; 73 | } 74 | 75 | .cards { 76 | perspective: 1000px; 77 | position: relative; 78 | width: 31.25rem; 79 | max-width: 90%; 80 | height: 18.75rem; 81 | } 82 | 83 | .card { 84 | background-color: var(--light-color); 85 | border-radius: 0.625rem; 86 | position: absolute; 87 | font-size: 1.5rem; 88 | top: 0; 89 | left: 0; 90 | width: 100%; 91 | height: 100%; 92 | opacity: 0; 93 | transform: translateX(50%) rotateY(-10deg); 94 | transition: transform 0.4s ease, opacity 0.4s ease; 95 | } 96 | 97 | .card.active { 98 | cursor: pointer; 99 | opacity: 1; 100 | z-index: 10; 101 | transform: translateX(0) rotateY(0deg); 102 | } 103 | 104 | .card.left { 105 | transform: translateX(-50%) rotateY(10deg); 106 | } 107 | 108 | .inner-card { 109 | box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 110 | border-radius: 0.625rem; 111 | position: relative; 112 | width: 100%; 113 | height: 100%; 114 | transform-style: preserve-3d; 115 | transition: transform 0.4s ease; 116 | } 117 | 118 | .card.show-answer .inner-card { 119 | transform: rotateX(180deg); 120 | } 121 | 122 | .inner-card-front, .inner-card-back { 123 | backface-visibility: hidden; 124 | background-color: var(--light-color); 125 | border-radius: 0.625rem; 126 | position: absolute; 127 | top: 0; 128 | left: 0; 129 | display: flex; 130 | align-items: center; 131 | justify-content: center; 132 | width: 100%; 133 | height: 100%; 134 | } 135 | 136 | .inner-card-front { 137 | transform: rotateX(0deg); 138 | z-index: 2; 139 | } 140 | 141 | .inner-card-back { 142 | transform: rotateX(180deg); 143 | } 144 | 145 | .inner-card-front::after, .inner-card-back::after { 146 | content: '\f021 Flip'; 147 | font-family: 'Font Awesome 5 Free', 'Poppins', sans-serif; 148 | position: absolute; 149 | top: 0.625rem; 150 | right: 0.625rem; 151 | font-weight: bold; 152 | font-size: 1rem; 153 | color: var(--background-color); 154 | } 155 | 156 | .navigation { 157 | display: flex; 158 | margin: 1.25rem 0; 159 | } 160 | 161 | .navigation .nav-button { 162 | border: none; 163 | background-color: transparent; 164 | cursor: pointer; 165 | font-size: 1rem; 166 | } 167 | 168 | .navigation .nav-button:hover { 169 | transform: scale(1.2) 170 | } 171 | 172 | .navigation p { 173 | margin: 0 1.5rem; 174 | } 175 | 176 | .add-container { 177 | background-color: var(--secondary-background-color); 178 | border-top: 2px solid var(--border-color); 179 | display: flex; 180 | flex-direction: column; 181 | align-items: center; 182 | justify-content: center; 183 | padding: 0.625rem 0; 184 | position: absolute; 185 | top: 0; 186 | bottom: 0; 187 | width: 100%; 188 | opacity: 0; 189 | z-index: -1; 190 | transition: all 0.3s ease; 191 | } 192 | 193 | .add-container.show { 194 | opacity: 1; 195 | z-index: 2; 196 | } 197 | 198 | .add-container h3 { 199 | margin: 0.625rem 0; 200 | } 201 | 202 | .form-group { 203 | display: flex; 204 | flex-direction: column; 205 | align-items: center; 206 | justify-content: center; 207 | } 208 | 209 | .form-group label { 210 | display: block; 211 | margin: 1.25rem 0 0.625rem; 212 | } 213 | 214 | .form-group textarea { 215 | border: 1px solid var(--border-color); 216 | border-radius: 0.625rem; 217 | font-size: 1rem; 218 | padding: 0.75rem; 219 | width: 31.25rem; 220 | max-width: 90%; 221 | } 222 | -------------------------------------------------------------------------------- /07-Card-Hover-Effect-V1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Talha - Hovering Cards V1 6 | 7 | 8 | 9 | 10 | 11 |

12 |

Tourist Attractions

13 |

14 |

15 |

16 |

Pyramids

17 |

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.

18 |

19 | 20 |

21 |

22 |

Statue of Liberty

23 |

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

24 |

25 | 26 |

27 |

28 |

Taj Mahal

29 |

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.

30 |

31 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /07-Card-Hover-Effect-V1/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Exo:700'); 2 | @import url('https://fonts.googleapis.com/css?family=Abel'); 3 | body { 4 | background-color: #dfe6e9; 5 | -webkit-transform: perspective(900px); 6 | -webkit-transform-style: preserve-3d; 7 | } 8 | .title{ 9 | width=100%; 10 | text-align: center; 11 | } 12 | .title h1{ 13 | font-size:50px; 14 | font-family: 'Exo', sans-serif; 15 | } 16 | .card1 { 17 | text-align:center; 18 | position: absolute; 19 | left: 100px; 20 | width: 250px; 21 | height: 350px; 22 | margin-top: 10px; 23 | margin-bottom: 10px; 24 | background: linear-gradient(rgb(225,150,58),rgb(227,144,91)); 25 | transition:.6s; 26 | 27 | transform: rotatex(75deg) translatey(-200px) translatez(-100px); 28 | box-shadow: 0px 20px 60px rgba(0,0,0, 0.5); 29 | } 30 | .card1:hover{ 31 | transform: rotatex(0deg); 32 | transform: rotatez(0deg); 33 | transition:.6s; 34 | box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); 35 | } 36 | .card1 img{ 37 | transform: translateY(15px); 38 | width:200px; 39 | height:120px; 40 | } 41 | h3{ 42 | font-size:25px; 43 | font-family: 'Abel', sans-serif; 44 | color:rgb(255,255,255); 45 | text-shadow: 0 0 2px rgb(255,255,255); 46 | transform: translatey(10px); 47 | } 48 | 49 | p{ 50 | 51 | font-family: 'Abel', sans-serif; 52 | color: white; 53 | text-align:center; 54 | width:220px; 55 | transform: translatex(12px); 56 | } 57 | 58 | 59 | .card2 { 60 | text-align:center; 61 | position: absolute; 62 | left: 550px; 63 | width: 250px; 64 | height: 350px; 65 | margin-top: 10px; 66 | margin-bottom: 10px; 67 | background: linear-gradient(rgb(93,94,170),rgb(93,66,103)); 68 | animation: animate 1s linear infinite; 69 | transition:.6s; 70 | 71 | transform: rotatex(75deg) translatey(-200px) translatez(-100px); 72 | box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.5); 73 | } 74 | .card2:hover{ 75 | transform: rotatex(0deg); 76 | transition:.6s; 77 | box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); 78 | } 79 | .card2 img{ 80 | transform: translateY(15px); 81 | width:180px; 82 | height:150px; 83 | } 84 | .card3 { 85 | text-align:center; 86 | position: absolute; 87 | left: 1000px; 88 | width: 250px; 89 | height: 350px; 90 | margin-top: 10px; 91 | margin-bottom: 10px; 92 | background: linear-gradient(#ff5252, #b33939); 93 | transition:.6s; 94 | 95 | transform: rotatex(75deg) translatey(-200px) translatez(-100px); 96 | box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.5); 97 | } 98 | .card3:hover{ 99 | transform: rotatex(0deg); 100 | transition:.6s; 101 | box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); 102 | } 103 | .card3 img{ 104 | transform: translateY(15px); 105 | width:200px; 106 | height:120px; 107 | } 108 | .footer{ 109 | position: absolute; 110 | top: 500px; 111 | marging: 10px; 112 | width: 100%; 113 | text-align: center; 114 | } 115 | .footer h2{ 116 | font-size:18px; 117 | font-family: 'Exo', sans-serif; 118 | 119 | } -------------------------------------------------------------------------------- /08-Card-Hover-Effect-V2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Talha - Hovering Cards V2 6 | 7 | 8 | 9 | 10 |

11 |

12 |

13 |

14 | 15 |

Java

16 |

17 | Java is a class-based, object-oriented programming language that 18 | is designed to have as few implementation dependencies as 19 | possible. 20 |

21 |

22 |

23 |

24 |

01

25 |

26 |

27 | 28 |

29 |

30 |

31 | 32 |

Python

33 |

34 | Python is an interpreted, high-level and general-purpose 35 | programming language. 36 |

37 |

38 |

39 |

40 |

02

41 |

42 |

43 | 44 |

45 |

46 |

47 | 48 |

C#

49 |

50 | C# is a general-purpose, multi-paradigm programming language 51 | encompassing static typing, strong typing, lexically scoped and 52 | component-oriented programming disciplines. 53 |

54 |

55 |

56 |

57 |

03

58 |

59 |

60 |

61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /08-Card-Hover-Effect-V2/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Righteous&display=swap"); 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | font-family: "Righteous", cursive; 9 | min-height: 100vh; 10 | background-color: #a9c9ff; 11 | background-image: linear-gradient(180deg, #a9c9ff 0%, #ffbbec 100%); 12 | } 13 | body .container { 14 | max-width: 100vw; 15 | display: grid; 16 | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 17 | grid-gap: 35px; 18 | margin: 0 auto; 19 | padding: 40px 0; 20 | } 21 | body .container .card { 22 | position: relative; 23 | width: 300px; 24 | height: 400px; 25 | margin: 0 auto; 26 | background: #000; 27 | border-radius: 15px; 28 | box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5); 29 | } 30 | body .container .card .face { 31 | position: absolute; 32 | bottom: 0; 33 | left: 0; 34 | width: 100%; 35 | height: 100%; 36 | display: flex; 37 | justify-content: center; 38 | align-items: center; 39 | } 40 | body .container .card .face.face1 { 41 | box-sizing: border-box; 42 | padding: 20px; 43 | } 44 | body .container .card .face.face1 h2 { 45 | margin: 0; 46 | padding: 0; 47 | } 48 | body .container .card .face.face1 .java { 49 | background-color: #fffc00; 50 | -webkit-background-clip: text; 51 | -webkit-text-fill-color: transparent; 52 | } 53 | body .container .card .face.face1 .python { 54 | background-color: #00fffc; 55 | -webkit-background-clip: text; 56 | -webkit-text-fill-color: transparent; 57 | } 58 | body .container .card .face.face1 .cSharp { 59 | background-color: #fc00ff; 60 | -webkit-background-clip: text; 61 | -webkit-text-fill-color: transparent; 62 | } 63 | body .container .card .face.face2 { 64 | transition: 0.5s; 65 | } 66 | body .container .card .face.face2 h2 { 67 | margin: 0; 68 | padding: 0; 69 | font-size: 10em; 70 | color: #fff; 71 | transition: 0.5s; 72 | text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 73 | z-index: 10; 74 | } 75 | body .container .card:hover .face.face2 { 76 | height: 60px; 77 | } 78 | body .container .card:hover .face.face2 h2 { 79 | font-size: 2em; 80 | } 81 | body .container .card:nth-child(1) .face.face2 { 82 | background-image: linear-gradient(40deg, #fffc00 0%, #fc00ff 45%, #00fffc 100%); 83 | border-radius: 15px; 84 | } 85 | body .container .card:nth-child(2) .face.face2 { 86 | background-image: linear-gradient(40deg, #fc00ff 0%, #00fffc 45%, #fffc00 100%); 87 | border-radius: 15px; 88 | } 89 | body .container .card:nth-child(3) .face.face2 { 90 | background-image: linear-gradient(40deg, #00fffc 0%, #fc00ff 45%, #fffc00 100%); 91 | border-radius: 15px; 92 | } -------------------------------------------------------------------------------- /09-Card-Hover-Effect-V3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Talha - Hovering Cards V3 6 | 7 | 8 | 9 | 10 | 11 |

12 |

13 |

14 |

15 |

16 |

17 |

Karan Singh
18 | Graphic Designer 19 |

20 |

21 |

22 |

23 |

24 |

25 |

26 |

27 |

Dolly Seth
28 | Digital Marketing 29 |

30 |

31 |

32 |

33 |

34 |

35 |

36 |

37 |

Aakash Agrawal
38 | Chartered Accountant C.A 39 |

40 |

41 |

42 |

43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /09-Card-Hover-Effect-V3/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap"); 2 | *, 3 | *::after, 4 | *::before { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | } 9 | 10 | html { 11 | font-size: 62.5%; 12 | } 13 | 14 | body { 15 | width: 100vw; 16 | min-height: 100vh; 17 | background-color: #f0f0f0; 18 | font-family: "Poppins", sans-serif; 19 | display: flex; 20 | justify-content: center; 21 | align-items: center; 22 | } 23 | 24 | .container { 25 | position: relative; 26 | display: flex; 27 | justify-content: center; 28 | align-items: center; 29 | flex-wrap: wrap; 30 | } 31 | 32 | .container .box { 33 | position: relative; 34 | width: 30rem; 35 | height: 30rem; 36 | margin: 4rem; 37 | } 38 | 39 | .container .box:hover .imgBox { 40 | transform: translate(-3.5rem, -3.5rem); 41 | } 42 | 43 | .container .box:hover .content { 44 | transform: translate(3.5rem, 3.5rem); 45 | } 46 | 47 | .imgBox { 48 | position: absolute; 49 | top: 0; 50 | left: 0; 51 | width: 100%; 52 | height: 100%; 53 | z-index: 2; 54 | transition: all 0.5s ease-in-out; 55 | } 56 | 57 | .imgBox img { 58 | width: 30rem; 59 | height: 30rem; 60 | object-fit: cover; 61 | resize: both; 62 | } 63 | 64 | .content { 65 | position: absolute; 66 | top: 0; 67 | left: 0; 68 | width: 100%; 69 | height: 100%; 70 | padding: 1.5rem; 71 | display: flex; 72 | justify-content: center; 73 | background-color: #fff; 74 | z-index: 1; 75 | align-items: flex-end; 76 | text-align: center; 77 | transition: 0.5s ease-in-out; 78 | } 79 | 80 | .content h2 { 81 | display: block; 82 | font-size: 2rem; 83 | color: #111; 84 | font-weight: 500; 85 | line-height: 2rem; 86 | letter-spacing: 1px; 87 | } 88 | 89 | .content span { 90 | color: #555; 91 | font-size: 1.4rem; 92 | font-weight: 300; 93 | letter-spacing: 2px; 94 | } 95 | 96 | @media (max-width: 600px) { 97 | .container .box:hover .content { 98 | transform: translate(0, 3.5rem); 99 | } 100 | .container .box:hover .imgBox { 101 | transform: translate(0, -3.5rem); 102 | } 103 | } -------------------------------------------------------------------------------- /10-I-Love-You-Card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Talha - I love you 6 | 7 | 8 | 9 | 10 | 11 | 12 |

13 |

14 |

15 |

16 |

17 |

18 |

19 |

20 |

21 |

22 |

23 |

  console.log(
24 |     'I Love You'
25 |   );

26 |

27 |

28 |

29 |

30 |

31 |

32 |

33 |

34 |

  console.log(
35 |     'I Love You'
36 |   );

37 |

38 |

39 |

40 |

41 |

42 |

43 |

44 |

45 |

46 |

47 |

  console.log(
48 |     'I Love You'
49 |   );

50 |

Click me

51 |

52 |

53 |

54 |

55 |

56 |

57 |

58 |

59 |

  console.log(
60 |     'I Love You '
61 |   );

62 |

Click me

63 |

64 |

65 |

66 |

67 |

68 |

70 | 71 | 72 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /10-I-Love-You-Card/script.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 3 | hljs.highlightAll(); 4 | 5 | var Confetti = function (options) { 6 | var t = this; 7 | t.o = options || {}; 8 | 9 | 10 | //DOM storage 11 | t.doms = {}; 12 | 13 | //Vars storage 14 | t.vars = { 15 | confettiFrequency: 3, //DEP??? 16 | confettiColors: ['#fce18a', '#ff726d', '#b48def', '#f4306d'], 17 | confettiSpeed: ['slow', 'medium', 'fast'], 18 | confetiCount: 0, 19 | confetiLimit: 100, 20 | confettiDestroyTime: 3000, //ms 21 | confettiRenderTime: 60, //ms 22 | confettiSizeRange: [3, 7] }; 23 | 24 | 25 | //classes store 26 | t.classes = { 27 | 'confettiContainer': 'confetti-container' }; 28 | 29 | 30 | //callbacks store 31 | t.callbacks = {}; 32 | 33 | //Init if options are valid 34 | if (t.handleOptions()) { 35 | t.init(); 36 | } 37 | 38 | }; 39 | 40 | 41 | 42 | Confetti.prototype.handleOptions = function () { 43 | var t = this; 44 | 45 | if (t.o.target) { 46 | t.doms.target = t.o.target; 47 | } else { 48 | throw 'Confetti.options.target - is not valid DOM element'; 49 | return false; 50 | } 51 | 52 | if (!!t.o.onstart) { 53 | t.callbacks.onstart = t.o.onstart; 54 | } 55 | 56 | if (!!t.o.ondone) { 57 | t.callbacks.ondone = t.o.ondone; 58 | } 59 | 60 | return true; 61 | }; 62 | 63 | Confetti.prototype.setupElements = function () { 64 | var t = this, 65 | containerDOM = document.createElement('div'), 66 | targetPosition = t.doms.target.style.position; 67 | 68 | containerDOM.className = t.classes['confettiContainer']; 69 | 70 | if (targetPosition != 'relative' || targetPosition != 'absolute') { 71 | t.doms.target.style.position = 'relative'; 72 | } 73 | 74 | t.doms.target.appendChild(containerDOM); 75 | t.doms.containerDOM = containerDOM; 76 | }; 77 | 78 | Confetti.prototype.getContainerSize = function () { 79 | var t = this; 80 | 81 | return Math.floor(Math.random() * t.vars.confettiSizeRange[0]) + t.vars.confettiSizeRange[1] + 'px'; 82 | }; 83 | 84 | Confetti.prototype.getConfettiColor = function () { 85 | var t = this; 86 | 87 | return t.vars.confettiColors[Math.floor(Math.random() * t.vars.confettiColors.length)]; 88 | }; 89 | 90 | 91 | Confetti.prototype.getConfettiSpeed = function () { 92 | var t = this; 93 | 94 | return t.vars.confettiSpeed[Math.floor(Math.random() * t.vars.confettiSpeed.length)]; 95 | }; 96 | 97 | 98 | Confetti.prototype.getConfettiPosition = function () { 99 | var t = this; 100 | 101 | return Math.floor(Math.random() * t.doms.target.offsetWidth) + 'px'; 102 | }; 103 | 104 | Confetti.prototype.generateConfetti = function () {var _confettiDOM$classLis, _confettiDOM$classLis2; 105 | var t = this, 106 | confettiDOM = document.createElement('div'), 107 | confettiSize = t.getContainerSize(), 108 | confettiBackground = t.getConfettiColor(), 109 | confettiLeft = t.getConfettiPosition(), 110 | confettiSpeed = t.getConfettiSpeed(); 111 | 112 | confettiDOM === null || confettiDOM === void 0 ? void 0 : (_confettiDOM$classLis = confettiDOM.classList) === null || _confettiDOM$classLis === void 0 ? void 0 : _confettiDOM$classLis.add('confetti'); 113 | confettiDOM === null || confettiDOM === void 0 ? void 0 : (_confettiDOM$classLis2 = confettiDOM.classList) === null || _confettiDOM$classLis2 === void 0 ? void 0 : _confettiDOM$classLis2.add('confetti-animation-' + confettiSpeed); 114 | confettiDOM.style.left = confettiLeft; 115 | confettiDOM.style.width = confettiSize; 116 | confettiDOM.style.height = confettiSize; 117 | confettiDOM.style.backgroundColor = confettiBackground; 118 | 119 | confettiDOM.removeTimeout = setTimeout(function () { 120 | confettiDOM.parentNode.removeChild(confettiDOM); 121 | }, t.vars.confettiDestroyTime); 122 | 123 | t.doms.containerDOM.appendChild(confettiDOM); 124 | }; 125 | 126 | Confetti.prototype.renderConfetti = function () { 127 | var t = this; 128 | 129 | if (t.callbacks.onstart) { 130 | t.callbacks.onstart(); 131 | } 132 | 133 | t.confettiInterval = setInterval(function () { 134 | t.vars.confetiCount++; 135 | 136 | if (t.vars.confetiCount > t.vars.confetiLimit) { 137 | if (t.callbacks.ondone) { 138 | t.callbacks.ondone(); 139 | } 140 | clearInterval(t.confettiInterval); 141 | return false; 142 | } else { 143 | t.generateConfetti(); 144 | } 145 | 146 | 147 | }, t.vars.confettiRenderTime); 148 | }; 149 | 150 | Confetti.prototype.restart = function (instance) { 151 | var t = this || instance; 152 | t.vars.confetiCount = 0; 153 | t.renderConfetti(); 154 | }; 155 | 156 | Confetti.prototype.start = Confetti.prototype.restart; 157 | 158 | Confetti.prototype.stop = function () { 159 | var t = this || instance; 160 | t.vars.confetiCount = t.vars.confetiLimit; 161 | }; 162 | 163 | 164 | Confetti.prototype.init = function () { 165 | var t = this; 166 | 167 | t.setupElements(); 168 | }; 169 | 170 | 171 | const content = document.querySelector('.content'); 172 | const gradient = document.querySelector('#background'); 173 | const cardWrapper = document.querySelector('.card-wrapper'); 174 | const audio = document.querySelector('audio'); 175 | const confetti = new Confetti({ target: content }); 176 | 177 | cardWrapper.addEventListener('click', () => { 178 | const isActive = cardWrapper.classList.contains('active'); 179 | 180 | if (isActive) { 181 | cardWrapper.classList.remove('active'); 182 | audio.pause(); 183 | confetti.stop(); 184 | gradient.style.opacity = 0; 185 | } else { 186 | cardWrapper.classList.add('active'); 187 | audio.play(); 188 | confetti.start(); 189 | gradient.style.opacity = 1; 190 | } 191 | }); 192 | 193 | 194 | // https://codesandbox.io/s/3d-hover-effect-hqy6h?file=/src/index.js:0-944 195 | const card = cardWrapper; 196 | const motionMatchMedia = window.matchMedia("(prefers-reduced-motion)"); 197 | const THRESHOLD = 30; 198 | 199 | function handleHover(e) { 200 | const { clientX, clientY, currentTarget } = e; 201 | const { clientWidth, clientHeight, offsetLeft, offsetTop } = currentTarget; 202 | 203 | const horizontal = (clientX - offsetLeft) / clientWidth; 204 | const vertical = (clientY - offsetTop) / clientHeight; 205 | const rotateX = (THRESHOLD / 2 - horizontal * THRESHOLD).toFixed(2); 206 | const rotateY = (vertical * THRESHOLD - THRESHOLD / 2).toFixed(2); 207 | 208 | card.style.transform = `perspective(${clientWidth}px) rotateX(${rotateY}deg) rotateY(${rotateX}deg) scale3d(1, 1, 1)`; 209 | } 210 | 211 | function resetStyles(e) { 212 | card.style.transform = `perspective(${e.currentTarget.clientWidth}px) rotateX(0deg) rotateY(0deg)`; 213 | } 214 | 215 | if (!motionMatchMedia.matches) { 216 | card.addEventListener("mousemove", handleHover); 217 | card.addEventListener("mouseleave", resetStyles); 218 | } 219 | 220 | 221 | new Granim({ 222 | element: '#gradient', 223 | direction: 'radial', 224 | isPausedWhenNotInView: true, 225 | states: { 226 | "default-state": { 227 | gradients: [ 228 | ['#ff8faf', '#ffe5ed'], 229 | ['#f38fff', '#ffe5ed'], 230 | ['#ff8f8f', '#ffe5ed']] } } }); 231 | 232 | 233 | 234 | 235 | })(); -------------------------------------------------------------------------------- /10-I-Love-You-Card/style.css: -------------------------------------------------------------------------------- 1 | .content { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | height: 100vh; 6 | } 7 | 8 | .card-wrapper { 9 | width: 560px; 10 | } 11 | .card-wrapper .card { 12 | position: relative; 13 | width: 280px; 14 | height: 497.7777777778px; 15 | transform: perspective(1000px) translate(50%) scale(0.5) rotateY(0deg); 16 | transform-origin: 50px center; 17 | transition: 1s cubic-bezier(0, 0, 0, 0.94); 18 | } 19 | .card-wrapper .card .side { 20 | background: transparent; 21 | position: absolute; 22 | top: 0; 23 | left: 0; 24 | right: 0; 25 | bottom: 0; 26 | transform: perspective(1000px) rotateY(0); 27 | transform-origin: right center; 28 | transform-style: preserve-3d; 29 | transition: 1s cubic-bezier(0, 0, 0, 0.94); 30 | } 31 | .card-wrapper .card .side.side-a { 32 | border-radius: 10px 0 0 10px; 33 | } 34 | .card-wrapper .card .side.side-b { 35 | border-radius: 10px 0 0 10px; 36 | } 37 | .card-wrapper .card .side .back, 38 | .card-wrapper .card .side .front { 39 | position: absolute; 40 | top: 0; 41 | left: 0; 42 | right: 0; 43 | bottom: 0; 44 | backface-visibility: hidden; 45 | transition: 0 0.5s cubic-bezier(0, 0, 0, 0.94); 46 | overflow: hidden; 47 | } 48 | .card-wrapper .card .side .front { 49 | z-index: 2; 50 | transform-origin: center; 51 | } 52 | .card-wrapper .card .side .back { 53 | transform: rotateY(180deg); 54 | } 55 | .card-wrapper .card .side .back .heart { 56 | transform: rotateY(180deg); 57 | max-height: 100%; 58 | } 59 | .card-wrapper .card .side.side-b .front .heart .circle, 60 | .card-wrapper .card .side.side-b .front .heart .rect { 61 | background: #f9bec7; 62 | } 63 | .card-wrapper .card .side.side-b .back .heart .title { 64 | display: none; 65 | } 66 | .card-wrapper.active .card { 67 | transform: perspective(1000px) translate(0%) scale(1) rotateY(0); 68 | } 69 | .card-wrapper.active .card .side.side-b { 70 | transform: perspective(1000px) rotateY(180deg); 71 | } 72 | .card-wrapper.active .card .side-a .front .heart .circle, 73 | .card-wrapper.active .card .side-a .front .heart .rect { 74 | background: #ff5c8a !important; 75 | } 76 | .card-wrapper.active .card .side-b .back .heart .circle, 77 | .card-wrapper.active .card .side-b .back .heart .rect { 78 | background: #ff5c8a !important; 79 | } 80 | .card-wrapper:not(.active) .heart { 81 | cursor: pointer; 82 | } 83 | 84 | .heart { 85 | font-family: "Satisfy", cursive; 86 | } 87 | .heart .heart-half { 88 | transform: rotate(-45deg) scale(0.8) translateX(23%) translateY(10%); 89 | transform-origin: 140px 140px; 90 | } 91 | .heart .heart-half .circle { 92 | width: 280px; 93 | height: 280px; 94 | background: red; 95 | border-radius: 50%; 96 | transition: background 1s cubic-bezier(0, 0, 0, 0.94); 97 | } 98 | .heart .heart-half .rect { 99 | width: 280px; 100 | height: 280px; 101 | background: red; 102 | margin-top: -140px; 103 | transition: background 1s cubic-bezier(0, 0, 0, 0.94); 104 | } 105 | .heart .title { 106 | position: absolute; 107 | top: 30%; 108 | font-family: "Quicksand", sans-serif; 109 | right: 10%; 110 | font-size: 38px; 111 | transform: rotate(45deg); 112 | color: #ff0a54; 113 | } 114 | 115 | .ijustcode { 116 | position: absolute; 117 | top: 124.4444444444px; 118 | right: 0; 119 | height: 100px; 120 | margin: auto; 121 | backface-visibility: hidden; 122 | transform: translateX(50%); 123 | } 124 | 125 | .side-b .ijustcode code { 126 | transform: rotateY(-180deg); 127 | } 128 | .side-b .front .ijustcode { 129 | display: none; 130 | } 131 | 132 | .hljs-addition, .hljs-attribute, .hljs-meta .hljs-string, .hljs-regexp, .hljs-string { 133 | color: #c379ba; 134 | font-weight: 600; 135 | } 136 | 137 | pre code.hljs { 138 | border-radius: 10px; 139 | } 140 | 141 | audio { 142 | display: none; 143 | } 144 | 145 | /******* 146 | ******** 147 | 148 | Confeti styles 149 | 150 | ******** 151 | *******/ 152 | @keyframes confetti-slow { 153 | 0% { 154 | transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); 155 | } 156 | 100% { 157 | transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg); 158 | } 159 | } 160 | @keyframes confetti-medium { 161 | 0% { 162 | transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); 163 | } 164 | 100% { 165 | transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg); 166 | } 167 | } 168 | @keyframes confetti-fast { 169 | 0% { 170 | transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); 171 | } 172 | 100% { 173 | transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg); 174 | } 175 | } 176 | .container { 177 | /*width: 100vw; 178 | height: 100vh; 179 | background: #f0f0f0;*/ 180 | } 181 | 182 | .confetti-container { 183 | perspective: 700px; 184 | position: absolute; 185 | overflow: hidden; 186 | top: 0; 187 | right: 0; 188 | bottom: 0; 189 | left: 0; 190 | z-index: -1; 191 | } 192 | 193 | .confetti { 194 | position: absolute; 195 | z-index: 1; 196 | top: -10px; 197 | border-radius: 0%; 198 | } 199 | 200 | .confetti-animation-slow { 201 | animation: confetti-slow 2.5s linear 1 forwards; 202 | } 203 | 204 | .confetti-animation-medium { 205 | animation: confetti-medium 2s linear 1 forwards; 206 | } 207 | 208 | .confetti-animation-fast { 209 | animation: confetti-fast 1.5s linear 1 forwards; 210 | } 211 | 212 | #gradient { 213 | position: absolute; 214 | top: 0; 215 | left: 0; 216 | right: 0; 217 | bottom: 0; 218 | width: 100vw; 219 | height: 100vh; 220 | z-index: -2; 221 | opacity: 0; 222 | transition: opacity 1s cubic-bezier(0, 0, 0, 0.94); 223 | } -------------------------------------------------------------------------------- /11-Item-Card-Hover-Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Talha - Item Card Hover Effect 6 | 10 | 11 | 12 | 13 | 14 |

15 |

16 |

17 | 18 |

19 | 20 |

21 | UI/Web&Graph design for teenagers 11-17 years old 22 |

23 | 24 |

25 | Start: 26 | 04.11.2022 27 |

28 | 29 |

30 |

31 |

32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /11-Item-Card-Hover-Effect/style.css: -------------------------------------------------------------------------------- 1 | .ag-format-container { 2 | width: 1142px; 3 | margin: 0 auto; 4 | } 5 | 6 | body { 7 | background-color: #000; 8 | } 9 | .ag-courses_box { 10 | display: -webkit-box; 11 | display: -ms-flexbox; 12 | display: flex; 13 | -webkit-box-align: start; 14 | -ms-flex-align: start; 15 | align-items: flex-start; 16 | -ms-flex-wrap: wrap; 17 | flex-wrap: wrap; 18 | 19 | padding: 50px 0; 20 | } 21 | .ag-courses_item { 22 | -ms-flex-preferred-size: calc(33.33333% - 30px); 23 | flex-basis: calc(33.33333% - 30px); 24 | 25 | margin: 0 15px 30px; 26 | 27 | overflow: hidden; 28 | 29 | border-radius: 28px; 30 | } 31 | .ag-courses-item_link { 32 | display: block; 33 | padding: 30px 20px; 34 | background-color: #121212; 35 | 36 | overflow: hidden; 37 | 38 | position: relative; 39 | } 40 | .ag-courses-item_link:hover, 41 | .ag-courses-item_link:hover .ag-courses-item_date { 42 | text-decoration: none; 43 | color: #fff; 44 | } 45 | .ag-courses-item_link:hover .ag-courses-item_bg { 46 | -webkit-transform: scale(10); 47 | -ms-transform: scale(10); 48 | transform: scale(10); 49 | } 50 | .ag-courses-item_title { 51 | min-height: 87px; 52 | margin: 0 0 25px; 53 | 54 | overflow: hidden; 55 | 56 | font-weight: bold; 57 | font-size: 30px; 58 | color: #fff; 59 | 60 | z-index: 2; 61 | position: relative; 62 | } 63 | .ag-courses-item_date-box { 64 | font-size: 18px; 65 | color: #fff; 66 | 67 | z-index: 2; 68 | position: relative; 69 | } 70 | .ag-courses-item_date { 71 | font-weight: bold; 72 | color: #f9b234; 73 | 74 | -webkit-transition: color 0.5s ease; 75 | -o-transition: color 0.5s ease; 76 | transition: color 0.5s ease; 77 | } 78 | .ag-courses-item_bg { 79 | height: 128px; 80 | width: 128px; 81 | background-color: #f9b234; 82 | 83 | z-index: 1; 84 | position: absolute; 85 | top: -75px; 86 | right: -75px; 87 | 88 | border-radius: 50%; 89 | 90 | -webkit-transition: all 0.5s ease; 91 | -o-transition: all 0.5s ease; 92 | transition: all 0.5s ease; 93 | } 94 | .ag-courses_item:nth-child(2n) .ag-courses-item_bg { 95 | background-color: #3ecd5e; 96 | } 97 | .ag-courses_item:nth-child(3n) .ag-courses-item_bg { 98 | background-color: #e44002; 99 | } 100 | .ag-courses_item:nth-child(4n) .ag-courses-item_bg { 101 | background-color: #952aff; 102 | } 103 | .ag-courses_item:nth-child(5n) .ag-courses-item_bg { 104 | background-color: #cd3e94; 105 | } 106 | .ag-courses_item:nth-child(6n) .ag-courses-item_bg { 107 | background-color: #4c49ea; 108 | } 109 | 110 | @media only screen and (max-width: 979px) { 111 | .ag-courses_item { 112 | -ms-flex-preferred-size: calc(50% - 30px); 113 | flex-basis: calc(50% - 30px); 114 | } 115 | .ag-courses-item_title { 116 | font-size: 24px; 117 | } 118 | } 119 | 120 | @media only screen and (max-width: 767px) { 121 | .ag-format-container { 122 | width: 96%; 123 | } 124 | } 125 | @media only screen and (max-width: 639px) { 126 | .ag-courses_item { 127 | -ms-flex-preferred-size: 100%; 128 | flex-basis: 100%; 129 | } 130 | .ag-courses-item_title { 131 | min-height: 72px; 132 | line-height: 1; 133 | 134 | font-size: 24px; 135 | } 136 | .ag-courses-item_link { 137 | padding: 22px 40px; 138 | } 139 | .ag-courses-item_date-box { 140 | font-size: 16px; 141 | } 142 | } -------------------------------------------------------------------------------- /12-Product-Card-Info/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Talha - Hover For Product Info 6 | 10 | 11 | 12 | 13 | 14 | 15 |

16 |

17 |

18 |

SIZE

19 |

24 |

25 |

26 |

PRICE

27 | $150 28 |

29 |

30 |

COLORS

31 |

36 |

37 |

Nike Air Max

38 |

39 |

40 |

41 |

42 |

SIZE

43 |

48 |

49 |

50 |

PRICE

51 | $50 52 |

53 |

54 |

COLORS

55 |

60 |

61 |

Crew-neck t-shirt

62 |

63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /12-Product-Card-Info/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --size: 400px; 3 | --blue: #aad5ff; 4 | --lb: rgba(0, 0, 0, 0.5); 5 | } 6 | body { 7 | display: grid; 8 | justify-items: center; 9 | grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); 10 | background-color: var(--blue); 11 | color: cornsilk; 12 | font-family: "Roboto Condensed", sans-serif; 13 | } 14 | .container { 15 | width: var(--size); 16 | height: var(--size); 17 | display: grid; 18 | grid-template-columns: repeat(2, 50%); 19 | grid-template-rows: repeat(2, 50%); 20 | justify-items: center; 21 | align-items: center; 22 | filter: drop-shadow(0px 0px 7px rgba(1, 1, 1, .7)); 23 | } 24 | .productImage { 25 | grid-column: 1/span 2; 26 | grid-row: 1 /span 2; 27 | width: var(--size); 28 | height: var(--size); 29 | background-size: cover; 30 | clip-path: polygon( 31 | 20% 20%, 32 | 50% 20%, 33 | 50% 20%, 34 | 80% 20%, 35 | 80% 50%, 36 | 80% 50%, 37 | 80% 80%, 38 | 50% 80%, 39 | 50% 80%, 40 | 20% 80%, 41 | 20% 50%, 42 | 20% 50% 43 | ); 44 | transition: all 0.7s cubic-bezier(0.895, 0.03, 0.685, 0.22); 45 | } 46 | .shoeImg { 47 | background-image: url(https://source.unsplash.com/l8p1aWZqHvE/1000x1000); 48 | background-color: #148bff; 49 | } 50 | .shirtImg { 51 | background-image: url(https://source.unsplash.com/49wtmkUVmFQ/1000x1000); 52 | background-color: #aace29; 53 | } 54 | h4, 55 | ul, 56 | span { 57 | padding: 0; 58 | margin: 0; 59 | } 60 | .size, 61 | .color { 62 | grid-column: 1; 63 | grid-row: 1; 64 | justify-self: center; 65 | z-index: 1; 66 | opacity: 0; 67 | transition: all 0.6s cubic-bezier(0.895, 0.03, 0.685, 0.22); 68 | } 69 | .size ul li, 70 | .color ul li { 71 | list-style: none; 72 | width: 20px; 73 | height: 20px; 74 | margin: 5px; 75 | padding: 5px; 76 | text-align: center; 77 | background-color: rgba(0, 0, 0, 0.5); 78 | } 79 | .color { 80 | grid-column: 2; 81 | grid-row: 2; 82 | } 83 | .color ul li span { 84 | width: 10px; 85 | height: 10px; 86 | border-radius: 50px; 87 | display: inline-block; 88 | } 89 | .red { 90 | background-color: red; 91 | } 92 | .yellow { 93 | background-color: greenyellow; 94 | } 95 | .blue { 96 | background-color: #0070ee; 97 | } 98 | .price { 99 | grid-column: 2; 100 | grid-row: 1; 101 | justify-self: center; 102 | z-index: 1; 103 | opacity: 0; 104 | transition: all 0.6s cubic-bezier(0.895, 0.03, 0.685, 0.22); 105 | } 106 | .price h4 { 107 | margin-bottom: 8px; 108 | } 109 | .price span { 110 | width: 20px; 111 | height: 20px; 112 | padding: 5px; 113 | background-color: rgba(0, 0, 0, 0.5); 114 | } 115 | .productName { 116 | grid-column: 1; 117 | grid-row: 2; 118 | align-self: center; 119 | justify-self: center; 120 | z-index: 1; 121 | transition: all 0.7s cubic-bezier(0.895, 0.03, 0.685, 0.22); 122 | } 123 | 124 | .productImage:hover { 125 | clip-path: polygon( 126 | 20% 0%, 127 | 50% 0%, 128 | 50% 20%, 129 | 100% 20%, 130 | 100% 50%, 131 | 80% 50%, 132 | 80% 100%, 133 | 50% 100%, 134 | 50% 80%, 135 | 0% 80%, 136 | 0% 50%, 137 | 20% 50% 138 | ); 139 | transform: rotate(-15deg); 140 | transition: all 0.4s cubic-bezier(0.86, 0, 0.07, 1); 141 | } 142 | .productImage:hover ~ * { 143 | opacity: 1; 144 | transform: rotate(-15deg); 145 | transition: all 0.4s cubic-bezier(0.86, 0, 0.07, 1); 146 | } 147 | .credits{ 148 | color:white; 149 | font-size: 1.2rem; 150 | grid-column: 1 / -1 ; 151 | justify-self: center; 152 | text-align: center; 153 | } -------------------------------------------------------------------------------- /13-Sliding-Product-Card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Talha - Sliding Product Card 5 | 6 | 7 | 8 |

9 |

10 |

11 |

12 |

13 |

Nike Air Max
Men's Shoe

14 |

Product Details

15 |

16 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla 17 | ducimus iusto. 18 |

19 |

Size

20 |

27 |

28 |

^$199.99

29 | Buy Now 30 |

31 |

32 |

33 | 34 | 35 | -------------------------------------------------------------------------------- /13-Sliding-Product-Card/shoe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/he-is-talha/html-css-javascript-card/dbdb28740befe3bdea2fcdc791df99277ccf26bc/13-Sliding-Product-Card/shoe.jpg -------------------------------------------------------------------------------- /13-Sliding-Product-Card/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap'); 2 | * 3 | { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Poppins', sans-serif; 8 | } 9 | body 10 | { 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | background: linear-gradient(#4ba9e9 0,#4ba9e9 50%,#fff 50%,#fff 100%); 15 | min-height: 100vh; 16 | } 17 | .card 18 | { 19 | position: relative; 20 | width: 300px; 21 | height: 380px; 22 | background: #0000; 23 | display: flex; 24 | box-shadow: 0 15px 45px rgba(0,0,0,0.1); 25 | overflow: hidden; 26 | transition: 0.5s ease-in-out; 27 | } 28 | .card:hover 29 | { 30 | width: 600px; 31 | } 32 | .card .imgBx 33 | { 34 | position: relative; 35 | min-width: 300px; 36 | height: 100%; 37 | background: #fff; 38 | display: flex; 39 | justify-content: center; 40 | align-items: center; 41 | z-index: 10; 42 | } 43 | .card .imgBx img 44 | { 45 | max-width: 250px; 46 | transition: 0.5s ease-in-out; 47 | } 48 | .card:hover .imgBx img 49 | { 50 | transform: rotate(-35deg) translateX(-20px); 51 | } 52 | .card .details 53 | { 54 | position: absolute; 55 | left: 0; 56 | width: 300px; 57 | height: 100%; 58 | background: #4ba9e9; 59 | display: flex; 60 | justify-content: center; 61 | padding: 20px; 62 | flex-direction: column; 63 | transition: 0.5s ease-in-out; 64 | } 65 | .card:hover .details 66 | { 67 | left: 300px; 68 | } 69 | .card .details::before 70 | { 71 | content: ''; 72 | position: absolute; 73 | left: 0px; 74 | width: 0; 75 | height: 0; 76 | border-top: 10px solid transparent; 77 | border-bottom: 10px solid transparent; 78 | border-left: 10px solid #fff; 79 | z-index: 1; 80 | } 81 | .card .details h3 82 | { 83 | color: #fff; 84 | text-transform: uppercase; 85 | font-weight: 600; 86 | font-size: 1.5em; 87 | line-height: 1em; 88 | } 89 | .card .details h3 span 90 | { 91 | font-size: 0.65em; 92 | font-weight: 300; 93 | opacity: 0.85; 94 | text-transform: none; 95 | } 96 | .card .details h4 97 | { 98 | color: #fff; 99 | text-transform: uppercase; 100 | font-weight: 600; 101 | font-size: 0.9em; 102 | line-height: 1em; 103 | margin-top: 20px; 104 | margin-bottom: 10px; 105 | } 106 | p 107 | { 108 | color: #fff; 109 | font-size: 0.8em; 110 | opacity: 0.85; 111 | } 112 | .size 113 | { 114 | display: flex; 115 | gap: 10px; 116 | } 117 | .size li 118 | { 119 | list-style: none; 120 | color: #fff; 121 | font-size: 0.9em; 122 | width: 40px; 123 | height: 40px; 124 | display: flex; 125 | justify-content: center; 126 | align-items: center; 127 | border: 2px solid #fff; 128 | cursor: pointer; 129 | font-weight: 500; 130 | opacity: 0.5; 131 | } 132 | .size li:hover 133 | { 134 | background: #fff; 135 | color: #4ba9e9; 136 | opacity: 1; 137 | } 138 | .group 139 | { 140 | position: relative; 141 | display: flex; 142 | justify-content: space-between; 143 | margin-top: 20px; 144 | align-items: center; 145 | } 146 | .card .details h2 147 | { 148 | color: #fff; 149 | text-transform: uppercase; 150 | font-weight: 600; 151 | font-size: 2em; 152 | } 153 | .card .details h2 sup 154 | { 155 | font-weight: 300; 156 | } 157 | .card .details h2 small 158 | { 159 | font-size: 0.75em; 160 | } 161 | .card .details a 162 | { 163 | display: inline-flex; 164 | padding: 10px 25px; 165 | background: #fff; 166 | font-weight: 500; 167 | text-decoration: none; 168 | text-transform: uppercase; 169 | font-weight: 600; 170 | color: #4ba9e9; 171 | } -------------------------------------------------------------------------------- /14-Sneakers-Product-Card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Talha - Sneaker Product Cards 6 | 7 | 8 | 9 | 10 |

11 |

12 |

13 |

18 |

19 |

20 |

Nike X OFF-white

21 |

The 10: Air Jordan 1 off-white - Chicago

22 |

$999

23 |

24 |

25 | 26 | 42 |

43 |

44 |

45 |

46 |

51 |

52 |

53 |

Nike X OFF-white

54 |

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

55 |

$1599

56 |

57 |

58 | 59 | 75 |

76 |

77 |

78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /14-Sneakers-Product-Card/style.css: -------------------------------------------------------------------------------- 1 | /*===== GOOGLE FONTS =====*/ 2 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"); 3 | 4 | /*===== VARIABLES CSS =====*/ 5 | :root { 6 | --dark-color-lighten: #f2f5ff; 7 | --red-card: #a62121; 8 | --blue-card: #4bb7e6; 9 | --btn: #141414; 10 | --btn-hover: #3a3a3a; 11 | --text: #fbf7f7; 12 | } 13 | 14 | /*===== RESET =====*/ 15 | *, 16 | ::before, 17 | ::after { 18 | margin: 0; 19 | padding: 0; 20 | box-sizing: border-box; 21 | } 22 | 23 | body { 24 | margin: 0; 25 | padding: 0; 26 | box-sizing: border-box; 27 | height: 100vh; 28 | width: 100vw; 29 | background-color: var(--dark-color-lighten); 30 | font-family: "Montserrat", sans-serif; 31 | } 32 | button { 33 | font-family: "Montserrat", sans-serif; 34 | display: inline-block; 35 | border: none; 36 | outline: none; 37 | border-radius: 0.2rem; 38 | color: var(--text); 39 | cursor: pointer; 40 | } 41 | 42 | a { 43 | text-decoration: none; 44 | } 45 | 46 | img { 47 | max-width: 100%; 48 | height: 100%; 49 | user-select: none; 50 | } 51 | 52 | /*===== CARD =====*/ 53 | .container { 54 | height: 100%; 55 | width: 850px; 56 | margin: auto; 57 | display: flex; 58 | align-items: center; 59 | justify-content: space-evenly; 60 | } 61 | .card { 62 | position: relative; 63 | padding: 1rem; 64 | width: 350px; 65 | height: 450px; 66 | box-shadow: -1px 15px 30px -12px rgb(32, 32, 32); 67 | border-radius: 0.9rem; 68 | background-color: var(--red-card); 69 | color: var(--text); 70 | cursor: pointer; 71 | } 72 | 73 | .card-blue { 74 | background: var(--blue-card); 75 | } 76 | 77 | .product-image { 78 | height: 230px; 79 | width: 100%; 80 | transform: translate(0, -1.5rem); 81 | transition: transform 500ms ease-in-out; 82 | filter: drop-shadow(5px 10px 15px rgba(8, 9, 13, 0.4)); 83 | } 84 | .product-info { 85 | text-align: center; 86 | } 87 | 88 | .card:hover .product-image { 89 | transform: translate(-1.5rem, -7rem) rotate(-20deg); 90 | } 91 | 92 | .product-info h2 { 93 | font-size: 1.4rem; 94 | font-weight: 600; 95 | } 96 | .product-info p { 97 | margin: 0.4rem; 98 | font-size: 0.8rem; 99 | font-weight: 600; 100 | } 101 | .price { 102 | font-size: 1.2rem; 103 | font-weight: 500; 104 | } 105 | .btn { 106 | display: flex; 107 | justify-content: space-evenly; 108 | align-items: center; 109 | margin-top: 0.8rem; 110 | } 111 | .buy-btn { 112 | background-color: var(--btn); 113 | padding: 0.6rem 3.5rem; 114 | font-weight: 600; 115 | font-size: 1rem; 116 | transition: 300ms ease; 117 | } 118 | .buy-btn:hover { 119 | background-color: var(--btn-hover); 120 | } 121 | .fav { 122 | box-sizing: border-box; 123 | background: #fff; 124 | padding: 0.5rem 0.5rem; 125 | border: 1px solid#000; 126 | display: grid; 127 | place-items: center; 128 | } 129 | 130 | .svg { 131 | height: 25px; 132 | width: 25px; 133 | fill: #fff; 134 | transition: all 500ms ease; 135 | } 136 | 137 | .fav:hover .svg { 138 | fill: #000; 139 | } 140 | 141 | @media screen and (max-width: 800px) { 142 | body { 143 | height: auto; 144 | } 145 | .container { 146 | padding: 2rem 0; 147 | width: 100%; 148 | flex-direction: column; 149 | gap: 3rem; 150 | } 151 | } -------------------------------------------------------------------------------- /15-Text-Card-Hover-Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Talha - Text Card Hover Effect 6 | 10 | 11 | 12 | 13 | 14 |

15 | 16 |

66 | 67 | 68 |

118 | 119 |

120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /15-Text-Card-Hover-Effect/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Lato:300,900"); 2 | *, :after, :before { 3 | box-sizing: border-box; 4 | } 5 | 6 | html, body { 7 | height: 100%; 8 | } 9 | 10 | body { 11 | font-family: "Lato", sans-serif; 12 | background: #eee; 13 | padding: 100px 60px; 14 | -webkit-animation: fade-in 3s ease-in-out forwards; 15 | animation: fade-in 3s ease-in-out forwards; 16 | } 17 | 18 | strong { 19 | font-weight: 900; 20 | } 21 | 22 | .canvas-wrapper { 23 | display: flex; 24 | align-items: center; 25 | justify-content: center; 26 | height: 100%; 27 | } 28 | .canvas-wrapper .canvas + .canvas { 29 | margin-left: 40px; 30 | } 31 | 32 | .canvas { 33 | position: relative; 34 | display: block; 35 | width: 400px; 36 | height: 400px; 37 | padding: 20px; 38 | color: inherit; 39 | text-decoration: none; 40 | } 41 | 42 | .canvas_border { 43 | position: absolute; 44 | top: 40px; 45 | left: -40px; 46 | height: 100%; 47 | width: 100%; 48 | z-index: 0; 49 | } 50 | .canvas_border svg { 51 | height: 100%; 52 | width: 100%; 53 | } 54 | 55 | .rect-gradient { 56 | stroke-dasharray: 2000; 57 | stroke-dashoffset: 2000; 58 | -webkit-animation: erase-line 1s ease-in-out forwards; 59 | animation: erase-line 1s ease-in-out forwards; 60 | } 61 | 62 | .canvas_img-wrapper { 63 | position: absolute; 64 | display: flex; 65 | align-items: center; 66 | justify-content: center; 67 | width: 100%; 68 | height: 100%; 69 | top: 0; 70 | left: 0; 71 | transform: rotate(-10deg) skew(-10deg); 72 | overflow: hidden; 73 | background: white; 74 | } 75 | 76 | .canvas_img { 77 | transform: scale3d(0.9, 0.9, 0.9); 78 | opacity: 0.3; 79 | max-width: 200px; 80 | max-height: 200px; 81 | } 82 | 83 | .canvas_copy { 84 | position: absolute; 85 | bottom: 0; 86 | left: 85%; 87 | text-transform: uppercase; 88 | color: #dac527; 89 | z-index: 100; 90 | } 91 | 92 | .canvas_copy--left { 93 | left: -25%; 94 | } 95 | 96 | .canvas_copy_title { 97 | font-size: 62px; 98 | display: block; 99 | transform: translateX(-80px); 100 | transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; 101 | color: black; 102 | } 103 | .canvas_copy_title:nth-child(1) { 104 | transition-delay: 0.1s; 105 | } 106 | .canvas_copy_title:nth-child(2) { 107 | transition-delay: 0.2s; 108 | } 109 | 110 | .canvas_copy_subtitle { 111 | display: block; 112 | transform: rotate(270deg) translateY(-100%) translateX(calc(-100% - 80px)); 113 | transform-origin: top left; 114 | position: absolute; 115 | left: 0; 116 | top: 8px; 117 | font-size: 24px; 118 | font-weight: 900; 119 | transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.35s; 120 | } 121 | 122 | .canvas_copy_details { 123 | display: block; 124 | transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.14s; 125 | transform: translateX(-80px); 126 | } 127 | 128 | .canvas_border, .canvas_img-wrapper, .canvas_img { 129 | transition: all 0.25s ease-in-out 0s; 130 | } 131 | 132 | .canvas_border, .canvas_img-wrapper { 133 | transform: rotate(-10deg) skew(-10deg); 134 | } 135 | 136 | .canvas_copy_title, .canvas_copy_subtitle, .canvas_copy_details { 137 | opacity: 0; 138 | } 139 | 140 | .canvas:hover .canvas_copy_title, .canvas:hover .canvas_copy_subtitle, .canvas:hover .canvas_copy_details, .canvas:hover .canvas_img { 141 | opacity: 1; 142 | } 143 | .canvas:hover .canvas_border, .canvas:hover .canvas_img-wrapper { 144 | transform: rotate(-14deg) skew(-14deg) scale(0.96); 145 | } 146 | .canvas:hover .canvas_img { 147 | transform: scale3d(1, 1, 1); 148 | } 149 | .canvas:hover .canvas_copy_title, .canvas:hover .canvas_copy_details { 150 | transform: translateX(0); 151 | } 152 | .canvas:hover .canvas_copy_subtitle { 153 | transform: rotate(270deg) translateY(-100%) translateX(-100%); 154 | } 155 | .canvas:hover .rect-gradient { 156 | -webkit-animation: draw-line 3s cubic-bezier(0.19, 1, 0.22, 1) forwards; 157 | animation: draw-line 3s cubic-bezier(0.19, 1, 0.22, 1) forwards; 158 | } 159 | 160 | @-webkit-keyframes draw-line { 161 | from { 162 | stroke-dashoffset: 2000; 163 | } 164 | to { 165 | stroke-dashoffset: 0; 166 | } 167 | } 168 | 169 | @keyframes draw-line { 170 | from { 171 | stroke-dashoffset: 2000; 172 | } 173 | to { 174 | stroke-dashoffset: 0; 175 | } 176 | } 177 | @-webkit-keyframes erase-line { 178 | from { 179 | stroke-dashoffset: 0; 180 | } 181 | to { 182 | stroke-dashoffset: 2000; 183 | } 184 | } 185 | @keyframes erase-line { 186 | from { 187 | stroke-dashoffset: 0; 188 | } 189 | to { 190 | stroke-dashoffset: 2000; 191 | } 192 | } 193 | @-webkit-keyframes fade-in { 194 | from { 195 | opacity: 0; 196 | } 197 | to { 198 | opacity: 1; 199 | } 200 | } 201 | @keyframes fade-in { 202 | from { 203 | opacity: 0; 204 | } 205 | to { 206 | opacity: 1; 207 | } 208 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Talha Bin Yousaf 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML/CSS and JavaScript Cards 2 | 3 | This repository contains a collection of 15 card designs and effects built with HTML, CSS, and JavaScript. These projects showcase various creative and interactive card layouts, including expanding cards, 3D effects, hover animations, and more. Each project demonstrates different techniques and styles to enhance user interface design. 4 | 5 | | # | Project | Live Demo | 6 | | :-: | ----------------------------------------------- | --------- | 7 | | 01 | [Expanding Cards](https://github.com/he-is-talha/html-css-javascript-card/tree/main/01-Expanding-Cards) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-card/01-Expanding-Cards/) | 8 | | 02 | [3D Card with Hover](https://github.com/he-is-talha/html-css-javascript-card/tree/main/02-3d-Card-With-Hover) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-card/02-3d-Card-With-Hover/) | 9 | | 03 | [Creative Cards](https://github.com/he-is-talha/html-css-javascript-card/tree/main/03-Creative-Cards) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-card/03-Creative-Cards/) | 10 | | 04 | [Expanding Cards](https://github.com/he-is-talha/html-css-javascript-card/tree/main/04-Expanding-Cards) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-card/04-Expanding-Cards/) | 11 | | 05 | [3D Product Card](https://github.com/he-is-talha/html-css-javascript-card/tree/main/05-3D-Product-Card) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-card/05-3D-Product-Card/) | 12 | | 06 | [Memory Cards](https://github.com/he-is-talha/html-css-javascript-card/tree/main/06-Memory-Cards) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-card/06-Memory-Cards/) | 13 | | 07 | [Card Hover Effect V1](https://github.com/he-is-talha/html-css-javascript-card/tree/main/07-Card-Hover-Effect-V1) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-card/07-Card-Hover-Effect-V1/) | 14 | | 08 | [Card Hover Effect V2](https://github.com/he-is-talha/html-css-javascript-card/tree/main/08-Card-Hover-Effect-V2) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-card/08-Card-Hover-Effect-V2/) | 15 | | 09 | [Card Hover Effect V3](https://github.com/he-is-talha/html-css-javascript-card/tree/main/09-Card-Hover-Effect-V3) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-card/09-Card-Hover-Effect-V3/) | 16 | | 10 | [I Love You Card](https://github.com/he-is-talha/html-css-javascript-card/tree/main/10-I-Love-You-Card) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-card/10-I-Love-You-Card/) | 17 | | 11 | [Item Card Hover Effect](https://github.com/he-is-talha/html-css-javascript-card/tree/main/11-Item-Card-Hover-Effect) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-card/11-Item-Card-Hover-Effect/) | 18 | | 12 | [Product Card Info](https://github.com/he-is-talha/html-css-javascript-card/tree/main/12-Product-Card-Info) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-card/12-Product-Card-Info/) | 19 | | 13 | [Sliding Product Card](https://github.com/he-is-talha/html-css-javascript-card/tree/main/13-Sliding-Product-Card) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-card/13-Sliding-Product-Card/) | 20 | | 14 | [Sneakers Product Card](https://github.com/he-is-talha/html-css-javascript-card/tree/main/14-Sneakers-Product-Card) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-card/14-Sneakers-Product-Card/) | 21 | | 15 | [Text Card Hover Effect](https://github.com/he-is-talha/html-css-javascript-card/tree/main/15-Text-Card-Hover-Effect) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-card/15-Text-Card-Hover-Effect/) | 22 | 23 | ## License 24 | 25 | The MIT License 26 | 27 | Permission is hereby granted, free of charge, to any person obtaining a copy 28 | of this software and associated documentation files (the "Software"), to deal 29 | in the Software without restriction, including without limitation the rights 30 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 31 | copies of the Software, and to permit persons to whom the Software is 32 | furnished to do so, subject to the following conditions: 33 | 34 | The above copyright notice and this permission notice shall be included in 35 | all copies or substantial portions of the Software. 36 | 37 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 38 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 39 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 40 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 41 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 42 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 43 | THE SOFTWARE. 44 | --------------------------------------------------------------------------------

Explore the world

Explore the world

Explore the world

Explore the world

Explore the world

Olivia

Dark Siders 2

Assassin's Creed

Dishonored

Watch Dogs 2

Call Of Duty

Adidas ZX

19 | FUTURE-READY TRAINERS WITH WRAPPED BOOST FOR EXCEPTION COMFORT. 20 |

20 | Memory Cards 21 | 22 | Add New Card 23 | 24 |

37 | Add New Card 38 | 39 | 40 | 41 |

Tourist Attractions

Pyramids

Statue of Liberty

Taj Mahal

Java

01

Python

02

C#

03

Karan Singh 18 | Graphic Designer 19 |

Dolly Seth 28 | Digital Marketing 29 |

Aakash Agrawal 38 | Chartered Accountant C.A 39 |

SIZE

PRICE

COLORS

SIZE

PRICE

COLORS

Nike Air MaxMen's Shoe

Product Details

Size

$199.99

Nike X OFF-white

Nike X OFF-white

20 | Memory Cards 21 | 24 |

37 | Add New Card 38 | 41 |

Karan Singh
18 | Graphic Designer 19 |

Dolly Seth
28 | Digital Marketing 29 |

Aakash Agrawal
38 | Chartered Accountant C.A 39 |

Nike Air Max
Men's Shoe

^$199.99