├── 1_Resp_Cards ├── images │ ├── a1.jpg │ ├── a2.jpg │ ├── a3.jpg │ ├── a4.jpg │ ├── a5.jpg │ ├── a6.jpg │ ├── a7.jpg │ └── a8.jpg ├── index.html ├── script.js └── style.css ├── 2_CardFlip_3D ├── a1.jpg ├── a2.jpg ├── index.html └── style.css ├── 3D_rotating_image_gallery ├── images │ ├── p1.jpeg │ ├── p10.jpeg │ ├── p11.jpeg │ ├── p12.jpeg │ ├── p13.jpeg │ ├── p14.jpeg │ ├── p2.jpeg │ ├── p3.jpeg │ ├── p4.jpeg │ ├── p5.jpeg │ ├── p6.jpeg │ ├── p7.jpeg │ ├── p8.jpeg │ └── p9.jpeg ├── index.html └── style.css ├── 3_Add_to_cart ├── 3D_img_flip │ ├── bg1.jpg │ ├── bg2.jpg │ ├── index.html │ └── style.css ├── images │ ├── s1.jpg │ ├── s11.jpg │ ├── s12.jpg │ ├── s15.jpg │ ├── s18.jpg │ ├── s19.jpg │ ├── s2.jpg │ ├── s24.jpg │ ├── s25.jpg │ ├── s3.jpg │ ├── s4.jpg │ ├── s5.jpg │ ├── s6.jpg │ └── s7.jpg ├── index.html ├── script.js └── style.css ├── 4_Card_Effect ├── images │ ├── p1.jpeg │ ├── p2.jpeg │ ├── p3.jpeg │ ├── p4.jpeg │ ├── p5.jpg │ ├── p6.jpeg │ ├── p7.jpeg │ ├── p8.jpeg │ └── p9.jpeg ├── index.html ├── script.js └── style.css ├── 4_Registration_form ├── index.html └── style.css ├── 5_Registration_Form ├── index.html └── style.css ├── 6_Typing_Animation ├── index.html ├── script.js └── style.css ├── 7_DropDown ├── index.html ├── script.js └── style.css ├── 8_Card_Slider ├── card.js ├── image │ ├── a1.jpg │ ├── a10.avif │ ├── a11.avif │ ├── a2.jpg │ ├── a3.jpg │ ├── a4.jpg │ ├── a5.jpg │ ├── a6.jpg │ ├── a8.webp │ └── a9.webp ├── index.html ├── script.js └── style.css ├── Animated Background ├── index.html └── style.css ├── Clip Image in Text ├── a16.jpg ├── index.html └── style.css ├── Digital_Clock ├── index.html └── style.css ├── Expanding Card ├── images │ ├── p1.jpeg │ ├── p10.jpeg │ ├── p11.jpeg │ ├── p13.jpeg │ ├── p14.jpeg │ ├── p15.png │ ├── p3.jpeg │ ├── p4.jpeg │ ├── p5.jpeg │ ├── p6.jpeg │ ├── p7.jpeg │ ├── p8.jpeg │ └── p9.jpeg ├── index.html └── style.css ├── Login Form ├── bg_img.jpg ├── index.html └── style.css ├── Movie_Cards_Tutorial ├── cast1 │ ├── stc1.jpeg │ ├── stc2.jpeg │ ├── stc3.jpeg │ ├── stc4.jpeg │ └── stc5.jpeg ├── cast2 │ ├── hrc1.jpeg │ ├── hrc2.jpeg │ ├── hrc3.jpeg │ ├── hrc4.jpeg │ └── hrc5.jpeg ├── cast3 │ ├── gotc1.jpeg │ ├── gotc2.jpeg │ ├── gotc3.jpeg │ ├── gotc4.jpeg │ └── gotc5.jpeg ├── got_image.jpg ├── got_logo.png ├── harry_image.jpg ├── harry_logo.png ├── index.html ├── st_image.jpg ├── st_logo.png ├── st_logo2.png └── style.css ├── Neon_Btn ├── index.html └── style.css ├── Sidebar Menu ├── .vscode │ └── settings.json ├── a1.png ├── index.html ├── script.js └── style.css ├── Sliding_Navbar ├── index.html ├── index.js └── style.css ├── Video In Text ├── index.html ├── style.css └── v3.mp4 ├── a1_Image_Slider ├── index.html ├── story_images │ ├── a60.jpg │ ├── a61.jpg │ ├── a62.jpg │ ├── a63.jpg │ ├── a64.jpg │ ├── a65.jpg │ ├── a66.jpg │ ├── a67.jpg │ ├── a68.jpg │ ├── a69.jpg │ ├── a70.jpg │ ├── a71.jpeg │ ├── a72.jpeg │ └── a73.jpeg └── style.css └── a2_Image_Slider ├── images ├── p1.jpg ├── p2.jpg ├── p3.jpg └── p4.jpg ├── index.html ├── script.js └── style.css /1_Resp_Cards/images/a1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/1_Resp_Cards/images/a1.jpg -------------------------------------------------------------------------------- /1_Resp_Cards/images/a2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/1_Resp_Cards/images/a2.jpg -------------------------------------------------------------------------------- /1_Resp_Cards/images/a3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/1_Resp_Cards/images/a3.jpg -------------------------------------------------------------------------------- /1_Resp_Cards/images/a4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/1_Resp_Cards/images/a4.jpg -------------------------------------------------------------------------------- /1_Resp_Cards/images/a5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/1_Resp_Cards/images/a5.jpg -------------------------------------------------------------------------------- /1_Resp_Cards/images/a6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/1_Resp_Cards/images/a6.jpg -------------------------------------------------------------------------------- /1_Resp_Cards/images/a7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/1_Resp_Cards/images/a7.jpg -------------------------------------------------------------------------------- /1_Resp_Cards/images/a8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/1_Resp_Cards/images/a8.jpg -------------------------------------------------------------------------------- /1_Resp_Cards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Responsive Card 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /1_Resp_Cards/script.js: -------------------------------------------------------------------------------- 1 | 2 | // Color1: 'rgb(205, 255, 223)' 3 | // Color2: 'rgb(255, 246, 209)' 4 | // Color3: 'rgb(206, 191, 255)' 5 | // Color4: 'rgb(255, 209, 191)' 6 | // Color5: 'rgb(192, 253, 255)' 7 | // Color6: 'rgb(255, 188, 193)' 8 | 9 | 10 | const arrayData = [ 11 | { 12 | id: 1, 13 | imageUrl: "./images/a1.jpg", 14 | Heading: "London Bridge", 15 | bgColor: "rgb(205, 255, 223)", 16 | para: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus fugiat perspiciatis voluptatibus eligendi, deserunt corrupti atque ipsa, ipsam magnam iste consequuntur laborum consequatur harum blanditiis, porro quae quidem laboriosam inventore?" 17 | }, 18 | { 19 | id: 2, 20 | imageUrl: "./images/a2.jpg", 21 | Heading: "Burj Khalifa", 22 | bgColor: "rgb(255, 246, 209)", 23 | para: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus fugiat perspiciatis voluptatibus eligendi, deserunt corrupti atque ipsa, ipsam magnam iste consequuntur laborum consequatur harum blanditiis, porro quae quidem laboriosam inventore?" 24 | }, 25 | { 26 | id: 3, 27 | imageUrl: "./images/a3.jpg", 28 | Heading: "Taj Mahal", 29 | bgColor: "rgb(206, 191, 255)", 30 | para: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus fugiat perspiciatis voluptatibus eligendi, deserunt corrupti atque ipsa, ipsam magnam iste consequuntur laborum consequatur harum blanditiis, porro quae quidem laboriosam inventore?" 31 | }, 32 | { 33 | id: 4, 34 | imageUrl: "./images/a4.jpg", 35 | Heading: "Matsumoto Castle", 36 | bgColor: "rgb(255, 209, 191)", 37 | para: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus fugiat perspiciatis voluptatibus eligendi, deserunt corrupti atque ipsa, ipsam magnam iste consequuntur laborum consequatur harum blanditiis, porro quae quidem laboriosam inventore?" 38 | }, 39 | { 40 | id: 5, 41 | imageUrl: "./images/a5.jpg", 42 | Heading: "Lotus Temple", 43 | bgColor: "rgb(192, 253, 255)", 44 | para: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus fugiat perspiciatis voluptatibus eligendi, deserunt corrupti atque ipsa, ipsam magnam iste consequuntur laborum consequatur harum blanditiis, porro quae quidem laboriosam inventore?" 45 | }, 46 | { 47 | id: 6, 48 | imageUrl: "./images/a6.jpg", 49 | Heading: "Tokyo Tower", 50 | bgColor: "rgb(255, 188, 193)", 51 | para: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus fugiat perspiciatis voluptatibus eligendi, deserunt corrupti atque ipsa, ipsam magnam iste consequuntur laborum consequatur harum blanditiis, porro quae quidem laboriosam inventore?" 52 | }, 53 | ] 54 | 55 | 56 | const cardContainer = document.querySelector('.container') 57 | 58 | const functionCards = () => { 59 | arrayData.map((data) => { 60 | // console.log(data) 61 | cardContainer.innerHTML += ` 62 |
63 |
64 | 65 |
66 |

${data.Heading}

67 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus fugiat perspiciatis voluptatibus eligendi, deserunt corrupti atque ipsa, ipsam magnam iste consequuntur laborum consequatur harum blanditiis, porro quae quidem laboriosam inventore?

68 | 69 | 70 |
` 71 | }) 72 | } 73 | 74 | functionCards() -------------------------------------------------------------------------------- /1_Resp_Cards/style.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: sans-serif; 7 | } 8 | 9 | body{ 10 | background-color: rgb(64, 64, 64); 11 | width: 100vw; 12 | } 13 | 14 | .container{ 15 | width: 100%; 16 | height: auto; 17 | display: flex; 18 | flex-wrap: wrap; 19 | align-items: center; 20 | justify-content: center; 21 | margin: 100px 0; 22 | } 23 | 24 | .card{ 25 | /* background-color: rgb(205, 255, 223); */ 26 | color: #000; 27 | width: 350px; 28 | height: auto; 29 | padding: 10px; 30 | border-radius: 10px; 31 | margin: 30px 30px; 32 | } 33 | 34 | .card .image{ 35 | width: 100%; 36 | height: 200px; 37 | overflow: hidden; 38 | border-bottom-left-radius: 50px; 39 | border-top-right-radius: 50px; 40 | } 41 | 42 | .card .image img{ 43 | height: 100%; 44 | width: 100%; 45 | object-fit: cover; 46 | } 47 | 48 | .card h2{ 49 | margin: 15px 5px; 50 | position: relative; 51 | } 52 | 53 | .card h2::before{ 54 | content: ''; 55 | background-color: #000; 56 | height: 3px; 57 | width: 100px; 58 | position: absolute; 59 | bottom: -4px; 60 | border-radius: 50%; 61 | } 62 | 63 | .card p{ 64 | margin-left: 5px; 65 | } 66 | 67 | .card button{ 68 | background-color: #000; 69 | color: white; 70 | margin-top: 15px; 71 | margin-left: 5px; 72 | padding: 10px 15px; 73 | border-radius: 10px; 74 | font-weight: 600; 75 | font-size: 0.9rem; 76 | } 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /2_CardFlip_3D/a1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/2_CardFlip_3D/a1.jpg -------------------------------------------------------------------------------- /2_CardFlip_3D/a2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/2_CardFlip_3D/a2.jpg -------------------------------------------------------------------------------- /2_CardFlip_3D/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 3d Card Flip 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |

CASEY

16 |

Web | App Developer

17 |
18 |
19 |
20 |
21 | 22 |
23 |

CASEY

24 |

Web | App Developer

25 |
26 |
27 |

3.5k

28 |

followers

29 |
30 |
31 |
32 |

200

33 |

following

34 |
35 |
36 |
37 |

8.4m

38 |

views

39 |
40 |
41 | 42 |
43 | 44 | 45 | 46 | 47 |
48 | 49 |
50 | 53 |
54 | Hire Me 55 |
56 |
57 |
58 |
59 |
60 |
61 | 62 | 63 | -------------------------------------------------------------------------------- /2_CardFlip_3D/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | 8 | body{ 9 | height: 100vh; 10 | width: 100vw; 11 | } 12 | 13 | section{ 14 | width: 100%; 15 | height: 100vh; 16 | background: linear-gradient(30deg, #c99fff, #ff8656); 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | .card{ 23 | width: 320px; 24 | height: 500px; 25 | perspective: 1000px; 26 | } 27 | 28 | .card-content{ 29 | width: 100%; 30 | height: 100%; 31 | position: relative; 32 | transform-style: preserve-3d; 33 | transition: transform 1s; 34 | } 35 | 36 | .card:hover .card-content{ 37 | transform: rotateY(180deg); 38 | } 39 | 40 | .front, 41 | .back{ 42 | width: 100%; 43 | height: 100%; 44 | position: absolute; 45 | box-shadow: 2px 2px 10px #000; 46 | border-radius: 20px; 47 | overflow: hidden; 48 | backface-visibility: hidden; 49 | } 50 | 51 | .front{ 52 | background: url('a1.jpg'); 53 | background-size: cover; 54 | background-position: center; 55 | } 56 | 57 | .front h1{ 58 | position: absolute; 59 | bottom: 40px; 60 | left: 20px; 61 | background-color: #745bff; 62 | padding: 10px 20px; 63 | border-radius: 15px; 64 | } 65 | 66 | .front p{ 67 | color: white; 68 | position: absolute; 69 | bottom: 15px; 70 | left: 20px; 71 | } 72 | 73 | .back{ 74 | background: #111111; 75 | transform: rotateY(180deg); 76 | color: white; 77 | display: flex; 78 | flex-direction: column; 79 | text-align: center; 80 | position: relative; 81 | align-items: center; 82 | justify-content: center; 83 | } 84 | 85 | .color{ 86 | position: absolute; 87 | height: 100px; 88 | width: 100%; 89 | background: linear-gradient(30deg, #cb5aff, #2f66ff); 90 | top: 0; 91 | } 92 | 93 | .back .image{ 94 | height: 100px; 95 | width: 100px; 96 | border-radius: 50%; 97 | overflow: hidden; 98 | border: 4px solid #000; 99 | margin: 20px; 100 | z-index: 1; 101 | } 102 | 103 | .back .image img{ 104 | width: 100%; 105 | height: 100%; 106 | } 107 | 108 | .back h1{ 109 | margin: 2px; 110 | } 111 | 112 | .back h3{ 113 | color: rgb(205, 161, 255); 114 | font-size: 1.1rem; 115 | } 116 | 117 | .back .info{ 118 | margin-top: 30px; 119 | margin-bottom: 20px; 120 | display: flex; 121 | width: 90%; 122 | justify-content: space-evenly; 123 | } 124 | 125 | .back .info .vert-line{ 126 | background-color: white; 127 | width: 1px; 128 | } 129 | 130 | .media{ 131 | font-size: 18px; 132 | display: flex; 133 | gap: 20px; 134 | } 135 | 136 | .media i{ 137 | border: 2px solid rgb(50, 50, 50); 138 | height: 35px; 139 | width: 35px; 140 | border-radius: 50%; 141 | display: flex; 142 | align-items: center; 143 | justify-content: center; 144 | margin: 10px 0; 145 | } 146 | 147 | .media i:nth-child(1) { 148 | color: blue; 149 | border: 2px solid blue; 150 | box-shadow: 0 0 10px blue; 151 | &:hover{ 152 | font-size: 20px; 153 | } 154 | } 155 | 156 | .media i:nth-child(2) { 157 | color: #3a93ff; 158 | border: 2px solid #3a93ff; 159 | box-shadow: 0 0 10px #3a93ff; 160 | &:hover{ 161 | font-size: 20px; 162 | } 163 | } 164 | 165 | .media i:nth-child(3) { 166 | color: #ff00d9; 167 | border: 2px solid #ff00d9; 168 | box-shadow: 0 0 10px #ff00d9; 169 | &:hover{ 170 | font-size: 20px; 171 | } 172 | } 173 | 174 | .media i:nth-child(4) { 175 | color: red; 176 | border: 2px solid red; 177 | box-shadow: 0 0 10px red; 178 | &:hover{ 179 | font-size: 20px; 180 | } 181 | } 182 | 183 | .back .buttons{ 184 | display: flex; 185 | margin-top: 30px; 186 | } 187 | 188 | .buttons .follow-button{ 189 | background-color: #0088ff; 190 | font-size: 1.2rem; 191 | padding: 10px 20px; 192 | border-radius: 40px; 193 | margin: 15px; 194 | color: white; 195 | font-weight: 600; 196 | } 197 | 198 | .buttons .hire-button{ 199 | font-size: 1.2rem; 200 | padding: 10px 20px; 201 | border-radius: 40px; 202 | margin: 15px; 203 | color: white; 204 | font-weight: 600; 205 | border: 2px solid white; 206 | } -------------------------------------------------------------------------------- /3D_rotating_image_gallery/images/p1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3D_rotating_image_gallery/images/p1.jpeg -------------------------------------------------------------------------------- /3D_rotating_image_gallery/images/p10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3D_rotating_image_gallery/images/p10.jpeg -------------------------------------------------------------------------------- /3D_rotating_image_gallery/images/p11.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3D_rotating_image_gallery/images/p11.jpeg -------------------------------------------------------------------------------- /3D_rotating_image_gallery/images/p12.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3D_rotating_image_gallery/images/p12.jpeg -------------------------------------------------------------------------------- /3D_rotating_image_gallery/images/p13.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3D_rotating_image_gallery/images/p13.jpeg -------------------------------------------------------------------------------- /3D_rotating_image_gallery/images/p14.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3D_rotating_image_gallery/images/p14.jpeg -------------------------------------------------------------------------------- /3D_rotating_image_gallery/images/p2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3D_rotating_image_gallery/images/p2.jpeg -------------------------------------------------------------------------------- /3D_rotating_image_gallery/images/p3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3D_rotating_image_gallery/images/p3.jpeg -------------------------------------------------------------------------------- /3D_rotating_image_gallery/images/p4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3D_rotating_image_gallery/images/p4.jpeg -------------------------------------------------------------------------------- /3D_rotating_image_gallery/images/p5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3D_rotating_image_gallery/images/p5.jpeg -------------------------------------------------------------------------------- /3D_rotating_image_gallery/images/p6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3D_rotating_image_gallery/images/p6.jpeg -------------------------------------------------------------------------------- /3D_rotating_image_gallery/images/p7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3D_rotating_image_gallery/images/p7.jpeg -------------------------------------------------------------------------------- /3D_rotating_image_gallery/images/p8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3D_rotating_image_gallery/images/p8.jpeg -------------------------------------------------------------------------------- /3D_rotating_image_gallery/images/p9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3D_rotating_image_gallery/images/p9.jpeg -------------------------------------------------------------------------------- /3D_rotating_image_gallery/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 3D Rotating Image Gallery 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /3D_rotating_image_gallery/style.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | padding: 0; 4 | margin: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | body{ 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | min-height: 100vh; 13 | background: linear-gradient(150deg,rgb(214, 240, 68), rgb(47, 147, 218)); 14 | } 15 | 16 | .box { 17 | position: relative; 18 | width: 200px; 19 | height: 300px; 20 | transform-style: preserve-3d; 21 | animation: animate 20s linear infinite; 22 | 23 | } 24 | 25 | .box:hover{ 26 | animation-play-state: paused; 27 | } 28 | 29 | 30 | @keyframes animate { 31 | 0%{ 32 | transform: perspective(1000px) rotateY(0deg); 33 | } 34 | 100%{ 35 | transform: perspective(1000px) rotateY(360deg); 36 | } 37 | } 38 | 39 | .box span{ 40 | position: absolute; 41 | top: 0; 42 | left: 0; 43 | width: 100%; 44 | height: 100%; 45 | transform-origin: center; 46 | transform-style: preserve-3d; 47 | transform: rotateY(calc(var(--i) * 36deg)) translateZ(450px); 48 | -webkit-box-reflect: below 2px linear-gradient(transparent, transparent, rgba(4, 4, 4, 0.267)); 49 | } 50 | 51 | 52 | 53 | .box span img{ 54 | position: absolute; 55 | top: 0; 56 | left: 0; 57 | width: 100%; 58 | height: 100%; 59 | transition: 0.5s; 60 | border-radius: 15px; 61 | border: 4px double rgb(0, 0, 0); 62 | } 63 | 64 | img:hover{ 65 | transform: translateY(-2px); 66 | 67 | } 68 | -------------------------------------------------------------------------------- /3_Add_to_cart/3D_img_flip/bg1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3_Add_to_cart/3D_img_flip/bg1.jpg -------------------------------------------------------------------------------- /3_Add_to_cart/3D_img_flip/bg2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3_Add_to_cart/3D_img_flip/bg2.jpg -------------------------------------------------------------------------------- /3_Add_to_cart/3D_img_flip/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 3D Image Flip 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 | 22 | 23 | 24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /3_Add_to_cart/3D_img_flip/style.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body{ 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | min-height: 100vh; 12 | background: black; 13 | } 14 | 15 | .container{ 16 | position: relative; 17 | width: 600px; 18 | height: 400px; 19 | } 20 | 21 | .container .image{ 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | width: 100%; 26 | height: 100%; 27 | display: flex; 28 | } 29 | 30 | .container .image span{ 31 | width: 150px; 32 | /* image_width/4 */ 33 | height: 100%; 34 | transition: 1s; 35 | } 36 | 37 | .container .image1 span{ 38 | background: url("bg1.jpg"); 39 | transform-origin: top; 40 | background-size: cover; 41 | } 42 | 43 | .container:hover .image1 span{ 44 | transform: rotateX(90deg) translateY(-50%); 45 | } 46 | 47 | .container .image2 span{ 48 | background: url("bg2.jpg"); 49 | background-size: cover; 50 | transform-origin: bottom; 51 | transform: rotateX(90deg) translateY(50%); 52 | } 53 | 54 | .container:hover .image2 span{ 55 | transform: rotateX(0deg) translateY(0); 56 | } 57 | 58 | .container .image span{ 59 | background-position-x: calc(-150px * var(--i)); 60 | transition-delay: calc(0.2s * var(--i)); 61 | } 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /3_Add_to_cart/images/s1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3_Add_to_cart/images/s1.jpg -------------------------------------------------------------------------------- /3_Add_to_cart/images/s11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3_Add_to_cart/images/s11.jpg -------------------------------------------------------------------------------- /3_Add_to_cart/images/s12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3_Add_to_cart/images/s12.jpg -------------------------------------------------------------------------------- /3_Add_to_cart/images/s15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3_Add_to_cart/images/s15.jpg -------------------------------------------------------------------------------- /3_Add_to_cart/images/s18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3_Add_to_cart/images/s18.jpg -------------------------------------------------------------------------------- /3_Add_to_cart/images/s19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3_Add_to_cart/images/s19.jpg -------------------------------------------------------------------------------- /3_Add_to_cart/images/s2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3_Add_to_cart/images/s2.jpg -------------------------------------------------------------------------------- /3_Add_to_cart/images/s24.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3_Add_to_cart/images/s24.jpg -------------------------------------------------------------------------------- /3_Add_to_cart/images/s25.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3_Add_to_cart/images/s25.jpg -------------------------------------------------------------------------------- /3_Add_to_cart/images/s3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3_Add_to_cart/images/s3.jpg -------------------------------------------------------------------------------- /3_Add_to_cart/images/s4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3_Add_to_cart/images/s4.jpg -------------------------------------------------------------------------------- /3_Add_to_cart/images/s5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3_Add_to_cart/images/s5.jpg -------------------------------------------------------------------------------- /3_Add_to_cart/images/s6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3_Add_to_cart/images/s6.jpg -------------------------------------------------------------------------------- /3_Add_to_cart/images/s7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/3_Add_to_cart/images/s7.jpg -------------------------------------------------------------------------------- /3_Add_to_cart/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Add to Cart Javascript 7 | 8 | 9 | 10 | 11 |
12 |
13 |

Shop It

14 | 15 |
16 | 17 |
18 |
19 | 20 |
21 |
22 |
23 | 24 |
25 |

My cart

26 |
27 | 28 |
29 |
30 | 31 | 32 |
33 |
34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /3_Add_to_cart/script.js: -------------------------------------------------------------------------------- 1 | const productsData = [ 2 | { 3 | id: 0, 4 | image: "./images/s1.jpg", 5 | title: "Sunglasses 1", 6 | price: 100 7 | }, 8 | { 9 | id: 1, 10 | image: "./images/s2.jpg", 11 | title: "Sunglasses 2", 12 | price: 120 13 | }, 14 | { 15 | id: 2, 16 | image: "./images/s3.jpg", 17 | title: "Sunglasses 3", 18 | price: 90 19 | }, 20 | { 21 | id: 3, 22 | image: "./images/s4.jpg", 23 | title: "Sunglasses 4", 24 | price: 180 25 | }, 26 | { 27 | id: 4, 28 | image: "./images/s5.jpg", 29 | title: "Sunglasses 5", 30 | price: 300 31 | }, 32 | { 33 | id: 5, 34 | image: "./images/s6.jpg", 35 | title: "Sunglasses 6", 36 | price: 150 37 | }, 38 | 39 | ] 40 | 41 | 42 | const cardContainer = document.querySelector('.products') 43 | const cartContainer = document.querySelector('.cart') 44 | let cart = []; 45 | 46 | 47 | const renderCart = () => { 48 | 49 | if(cart.length === 0) { 50 | cartContainer.innerHTML = '

Your Cart is Empty

' 51 | } 52 | else{ 53 | cartContainer.innerHTML = ''; 54 | 55 | cart.map((cartItem) => { 56 | cartContainer.innerHTML += 57 | `
58 |
59 | 60 |
61 |

${productsData[cartItem.id].title}

62 |
63 | 64 |
${cartItem.quantity}
65 | 66 |
67 |

$ ${productsData[cartItem.id].price * cartItem.quantity}

68 | 69 |
` 70 | }) 71 | } 72 | 73 | } 74 | 75 | 76 | 77 | const renderCards = () => { 78 | productsData.map((product) => { 79 | cardContainer.innerHTML += 80 | `
81 |
82 | 83 |
84 |

${product.title}

85 |

$ ${product.price}

86 | 87 |
` 88 | }) 89 | } 90 | 91 | 92 | const addToCart = (productId) => { 93 | if(cart.find((item)=> item.id === productId)) { 94 | increaseQuantity(productId) 95 | } 96 | else{ 97 | cart.push({ id: productId, quantity: 1 }) 98 | // console.log(cart) 99 | } 100 | 101 | renderCart(); 102 | } 103 | 104 | const increaseQuantity = (productId) => { 105 | const element = cart.find((item) => item.id === productId); 106 | element.quantity += 1; 107 | 108 | renderCart(); 109 | } 110 | 111 | const decreaseQuantity = (productId) => { 112 | const element = cart.find((item) => item.id === productId); 113 | if(element.quantity > 1) { 114 | element.quantity -= 1; 115 | } 116 | else{ 117 | removeFromCart(element.id) 118 | } 119 | 120 | renderCart(); 121 | } 122 | 123 | 124 | const removeFromCart = (productId) => { 125 | cart = cart.filter((item) => item.id !== productId) 126 | 127 | renderCart(); 128 | } 129 | 130 | 131 | const clearCart = () => { 132 | cart = []; 133 | renderCart(); 134 | } 135 | 136 | 137 | renderCart(); 138 | renderCards(); 139 | -------------------------------------------------------------------------------- /3_Add_to_cart/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 6 | } 7 | 8 | body{ 9 | width: 100vw; 10 | display: flex; 11 | } 12 | 13 | .container{ 14 | padding: 0 5%; 15 | height: 100vh; 16 | } 17 | 18 | .container .topbar{ 19 | background-color: rgb(0, 0, 0); 20 | color: white; 21 | display: flex; 22 | align-items: center; 23 | position: relative; 24 | height: 50px; 25 | } 26 | 27 | .topbar h2{ 28 | position: relative; 29 | margin: 0 40px; 30 | font-size: 2.2rem; 31 | } 32 | 33 | .topbar a{ 34 | position: absolute; 35 | right: 30px; 36 | text-decoration: none; 37 | color: white; 38 | font-size: 1.4rem; 39 | } 40 | 41 | /* products */ 42 | 43 | .product-container{ 44 | width: 100%; 45 | } 46 | 47 | .product-container .products{ 48 | height: calc(100vh - 50px); 49 | overflow-y: scroll; 50 | display: flex; 51 | flex-wrap: wrap; 52 | justify-content: space-between; 53 | } 54 | 55 | .products::-webkit-scrollbar{ 56 | display: none; 57 | } 58 | 59 | .products .item{ 60 | width: 290px; 61 | background: rgb(171, 171, 171); 62 | display: flex; 63 | flex-direction: column; 64 | align-items: center; 65 | margin: 10px 0; 66 | overflow: hidden; 67 | border-radius: 15px; 68 | } 69 | 70 | .products .item .image{ 71 | width: 90%; 72 | height: 210px; 73 | overflow: hidden; 74 | display: flex; 75 | border-radius: 15px; 76 | margin: 10px 10px; 77 | } 78 | 79 | .products .image img{ 80 | width: 100%; 81 | height: 100%; 82 | object-fit: cover; 83 | } 84 | 85 | .products .item .item-name{ 86 | font-size: 1.1rem; 87 | font-weight: 500; 88 | } 89 | 90 | .products .item .price{ 91 | margin: 2px 0; 92 | font-size: 1.3rem; 93 | } 94 | 95 | .products .item button{ 96 | margin-top: 5px; 97 | margin-bottom: 15px; 98 | padding: 5px 20px; 99 | border-radius: 20px; 100 | border: none; 101 | background: rgb(0, 0, 0); 102 | color: white; 103 | font-size: 1.1rem; 104 | font-weight: 600; 105 | } 106 | 107 | 108 | .myCart{ 109 | width: 400px; 110 | background: rgb(74, 74, 74); 111 | height: 100vh; 112 | flex-shrink: 0; 113 | position: relative; 114 | } 115 | 116 | .myCart h3{ 117 | background: rgb(125, 242, 255); 118 | color: rgb(0, 0, 0); 119 | padding: 10px; 120 | margin: 10px; 121 | margin-bottom: 30px; 122 | } 123 | 124 | .cart .item{ 125 | background-color: rgb(255, 255, 255); 126 | margin: 10px 10px; 127 | border-radius: 10px; 128 | display: flex; 129 | justify-content: space-evenly; 130 | align-items: center; 131 | padding: 5px 0; 132 | height: 60px; 133 | 134 | } 135 | 136 | .cart .item .image{ 137 | height: 50px; 138 | width: 60px; 139 | overflow: hidden; 140 | display: flex; 141 | margin: 10px 10px; 142 | } 143 | 144 | .cart .image img{ 145 | width: 100%; 146 | height: 100%; 147 | object-fit: cover; 148 | } 149 | 150 | .cart .item .item-name{ 151 | text-align: center; 152 | justify-items: center; 153 | width: 150px; 154 | line-height: 1.2rem; 155 | font-weight: 500; 156 | } 157 | 158 | .cart .item .quantity{ 159 | display: flex; 160 | flex-direction: column; 161 | align-items: center; 162 | justify-content: space-between; 163 | height: 70%; 164 | } 165 | 166 | .myCart .buttons{ 167 | position: absolute; 168 | bottom: 2px; 169 | display: flex; 170 | width: 100%; 171 | } 172 | 173 | .myCart .buttons button{ 174 | width: 50%; 175 | height: 50px; 176 | font-size: 1.4rem; 177 | font-weight: 600; 178 | border-radius: 10px; 179 | border: none; 180 | margin: 2px; 181 | } 182 | 183 | .myCart .buttons button:nth-child(1) { 184 | color: white; 185 | background: rgb(255, 16, 16); 186 | } 187 | 188 | .myCart .buttons button:nth-child(2) { 189 | color: black; 190 | background: rgb(0, 251, 255); 191 | } 192 | 193 | .cart .empty-cart{ 194 | color: white; 195 | display: flex; 196 | justify-content: center; 197 | } -------------------------------------------------------------------------------- /4_Card_Effect/images/p1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/4_Card_Effect/images/p1.jpeg -------------------------------------------------------------------------------- /4_Card_Effect/images/p2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/4_Card_Effect/images/p2.jpeg -------------------------------------------------------------------------------- /4_Card_Effect/images/p3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/4_Card_Effect/images/p3.jpeg -------------------------------------------------------------------------------- /4_Card_Effect/images/p4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/4_Card_Effect/images/p4.jpeg -------------------------------------------------------------------------------- /4_Card_Effect/images/p5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/4_Card_Effect/images/p5.jpg -------------------------------------------------------------------------------- /4_Card_Effect/images/p6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/4_Card_Effect/images/p6.jpeg -------------------------------------------------------------------------------- /4_Card_Effect/images/p7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/4_Card_Effect/images/p7.jpeg -------------------------------------------------------------------------------- /4_Card_Effect/images/p8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/4_Card_Effect/images/p8.jpeg -------------------------------------------------------------------------------- /4_Card_Effect/images/p9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/4_Card_Effect/images/p9.jpeg -------------------------------------------------------------------------------- /4_Card_Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 |
17 |

Jujutsu Kaisen

18 |

8.6 / 10

19 |
20 |
21 |

Dark

22 |

8.7 / 10

23 |
24 |
25 |

Dr Strange

26 |

7.5 / 10

27 |
28 |
29 |

Attack on Titan

30 |

9.1 / 10

31 |
32 |
33 |

Asur

34 |

8.5 / 10

35 |
36 |
37 |

Money Heist

38 |

8.2 / 10

39 |
40 |
41 |

Game of Thrones

42 |

9.2 / 10

43 |
44 |
45 |

Demon Slayer

46 |

8.6 / 10

47 |
48 |
49 |

Avengers Endgame

50 |

8.4 / 10

51 |
52 | 53 |
54 |
55 |
56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /4_Card_Effect/script.js: -------------------------------------------------------------------------------- 1 | var swiper = new Swiper(".swiper", { 2 | effect: "cards", 3 | grabcursor: true, 4 | initialSlide: 4, 5 | speed: 500, 6 | rotate: true, 7 | // autoplay: { 8 | // delay: 1000, 9 | // }, 10 | mousewheel: { 11 | invert: false, 12 | } 13 | }) -------------------------------------------------------------------------------- /4_Card_Effect/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700;800&display=swap'); 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Comfortaa', cursive; 8 | } 9 | 10 | section{ 11 | position: relative; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | background: radial-gradient(circle, #d0acff 20%, #448ee3 100%); 16 | min-height: 100vh; 17 | overflow: hidden; 18 | } 19 | 20 | .swiper{ 21 | width: 280px; 22 | height: 430px; 23 | padding: 50px 0; 24 | /* background: #dbe344; */ 25 | } 26 | 27 | .swiper-slide{ 28 | position: relative; 29 | box-shadow: 0 15px 30px rgb(0, 0, 0, 0.5); 30 | border-radius: 20px; 31 | } 32 | 33 | .swiper-slide h3{ 34 | position: absolute; 35 | bottom: 0; 36 | right: 0; 37 | padding: 7px 10px; 38 | margin: 0 20px 20px 20px; 39 | border-radius: 20px; 40 | font-size: 0.7rem; 41 | font-weight: 800; 42 | word-spacing: -1px; 43 | background-color: #ffffff; 44 | box-shadow: inset 2px -2px 2px #bfbfbf, inset 3px -3px 3px #808080; 45 | } 46 | 47 | .swiper-slide h3 span{ 48 | font-size: 1.1rem; 49 | color: #1a24b9; 50 | font-weight: 900; 51 | } 52 | 53 | .swiper-slide h2{ 54 | position: absolute; 55 | width: 50%; 56 | bottom: 0; 57 | left: 0; 58 | color: #fff; 59 | font-weight: 900; 60 | font-size: 1.4rem; 61 | margin: 0 0 20px 20px; 62 | } 63 | 64 | .swiper-slide:nth-child(1) { 65 | background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("./images/p8.jpeg"); 66 | background-repeat: no-repeat; 67 | background-size: cover; 68 | } 69 | 70 | .swiper-slide:nth-child(2) { 71 | background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("./images/p1.jpeg"); 72 | background-repeat: no-repeat; 73 | background-size: cover; 74 | } 75 | 76 | .swiper-slide:nth-child(3) { 77 | background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("./images/p3.jpeg"); 78 | background-repeat: no-repeat; 79 | background-size: cover; 80 | } 81 | 82 | .swiper-slide:nth-child(4) { 83 | background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("./images/p4.jpeg"); 84 | background-repeat: no-repeat; 85 | background-size: cover; 86 | } 87 | 88 | .swiper-slide:nth-child(5) { 89 | background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("./images/p5.jpg"); 90 | background-repeat: no-repeat; 91 | background-size: cover; 92 | } 93 | 94 | .swiper-slide:nth-child(6) { 95 | background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("./images/p7.jpeg"); 96 | background-repeat: no-repeat; 97 | background-size: cover; 98 | } 99 | 100 | .swiper-slide:nth-child(7) { 101 | background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("./images/p6.jpeg"); 102 | background-repeat: no-repeat; 103 | background-size: cover; 104 | } 105 | 106 | .swiper-slide:nth-child(8) { 107 | background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("./images/p2.jpeg"); 108 | background-repeat: no-repeat; 109 | background-size: cover; 110 | } 111 | 112 | .swiper-slide:nth-child(9) { 113 | background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("./images/p9.jpeg"); 114 | background-repeat: no-repeat; 115 | background-size: cover; 116 | } 117 | -------------------------------------------------------------------------------- /4_Registration_form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | RESPONSIVE REGISTRATION FORM 7 | 8 | 9 | 10 |
11 |
Register
12 |
13 |
14 |
15 | Full name 16 | 17 |
18 |
19 | E-mail 20 | 21 |
22 |
23 | Date of birth 24 | 25 |
26 |
27 | Nationality 28 | 36 |
37 |
38 | Phone Number 39 | 40 |
41 |
42 | Password 43 | 44 |
45 |
46 | Address 47 | 48 |
49 | 50 |
51 | Gender 52 |
53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 |
66 |
67 |
68 | 69 |
70 | 71 | I hereby declare that I have read all the terms and conditions 72 |
73 | 74 | 75 |
76 |
77 | 78 | 79 | -------------------------------------------------------------------------------- /4_Registration_form/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: Verdana, Geneva, Tahoma, sans-serif; 6 | } 7 | 8 | body{ 9 | display: flex; 10 | height: 100vh; 11 | justify-content: center; 12 | align-items: center; 13 | padding: 10px; 14 | background: linear-gradient(45deg, #5dbfd3, #7cc48a); 15 | } 16 | 17 | .container{ 18 | max-width: 700px; 19 | width: 100%; 20 | background: #fff; 21 | padding: 25px 30px; 22 | border-radius: 10px; 23 | } 24 | 25 | .container .title{ 26 | font-size: 30px; 27 | font-weight: 500; 28 | position: relative; 29 | margin-bottom: 30px; 30 | } 31 | 32 | .container form .form-container{ 33 | display: flex; 34 | flex-wrap: wrap; 35 | justify-content: space-between; 36 | margin: 20px 0 15px 0; 37 | } 38 | 39 | form .form-container .input-box{ 40 | margin-bottom: 15px; 41 | width: calc(100% / 2 - 20px); 42 | } 43 | 44 | form .form-container .full-info{ 45 | width: 100%; 46 | } 47 | 48 | .form-container .input-box .details{ 49 | display: block; 50 | font-weight: 500; 51 | margin-bottom: 5px; 52 | } 53 | 54 | .form-container .input-box input,select{ 55 | color: #5b5b5b; 56 | height: 45px; 57 | width: 100%; 58 | outline: none; 59 | border-radius: 5px; 60 | border: 1px solid #ccc; 61 | padding: 0 15px; 62 | font-size: 16px; 63 | border-bottom-width: 2px; 64 | transition: all 0.3s ease; 65 | } 66 | 67 | form .gender-details .gender-title{ 68 | font-size: 20px; 69 | font-weight: 500; 70 | } 71 | 72 | .gender-box{ 73 | margin: 5px 0; 74 | } 75 | 76 | .category{ 77 | display: flex; 78 | align-items: center; 79 | margin: 5px 0; 80 | } 81 | 82 | .category span{ 83 | margin-right: 20px; 84 | } 85 | 86 | .checkBox{ 87 | color: #7f7f7f; 88 | display: flex; 89 | } 90 | 91 | .checkBox input{ 92 | height: 20px; 93 | width: 20px; 94 | margin-right: 10px; 95 | } 96 | 97 | form button{ 98 | background: #1d8bcb; 99 | color: #fff; 100 | border: none; 101 | margin: 10px 0; 102 | margin-top: 20px; 103 | padding: 8px 20px; 104 | font-size: 1.1rem; 105 | font-weight: 700; 106 | border-radius: 100px; 107 | &:hover{ 108 | background-color: #432ad1; 109 | } 110 | } 111 | 112 | @media screen and (max-width: 600px) { 113 | .container{ 114 | height: auto; 115 | margin-top: auto; 116 | margin-bottom: auto; 117 | margin-left: 10px; 118 | margin-right: 10px; 119 | } 120 | 121 | form .form-container .input-box{ 122 | width: 100%; 123 | } 124 | 125 | .container form .form-container{ 126 | max-height: 380px; 127 | overflow-y: scroll; 128 | } 129 | 130 | .container form .form-container::-webkit-scrollbar{ 131 | display: none; 132 | } 133 | } -------------------------------------------------------------------------------- /5_Registration_Form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | RESPONSIVE REGISTRATION FORM 7 | 8 | 9 | 10 |
11 |
Register
12 |
13 |
14 |
15 | Full Name 16 | 17 |
18 |
19 | E-mail 20 | 21 |
22 |
23 | Date of Birth 24 | 25 |
26 |
27 | Nationality 28 | 35 |
36 |
37 | Phone Number 38 | 39 |
40 | 41 |
42 | Password 43 | 44 |
45 | 46 | 47 |
48 | Address 49 | 50 |
51 | 52 |
53 | Gender 54 |
55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |
68 |
69 |
70 | 71 |
72 | 73 | I hereby declare that I have read all the terms and conditions 74 |
75 | 76 | 77 |
78 |
79 | 80 | -------------------------------------------------------------------------------- /5_Registration_Form/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: Verdana, Geneva, Tahoma, sans-serif; 6 | } 7 | 8 | body{ 9 | display: flex; 10 | height: 100vh; 11 | justify-content: center; 12 | align-items: center; 13 | padding: 10px; 14 | background: linear-gradient(45deg, #5dbfd3, #7cc48a); 15 | } 16 | 17 | .container{ 18 | max-width: 700px; 19 | width: 100%; 20 | background: #fff; 21 | padding: 25px 30px; 22 | border-radius: 10px; 23 | } 24 | 25 | .container .title{ 26 | font-size: 30px; 27 | font-weight: 500; 28 | position: relative; 29 | margin-bottom: 30px; 30 | } 31 | 32 | .container form .form-container{ 33 | display: flex; 34 | flex-wrap: wrap; 35 | justify-content: space-between; 36 | margin: 20px 0 15px 0; 37 | } 38 | 39 | form .form-container .input-box{ 40 | margin-bottom: 15px; 41 | width: calc(100% / 2 - 20px); 42 | } 43 | form .form-container .full-info{ 44 | width: 100%; 45 | } 46 | 47 | .form-container .input-box .details{ 48 | display: block; 49 | font-weight: 500; 50 | margin-bottom: 5px; 51 | } 52 | 53 | .form-container .input-box input,select{ 54 | color: #5b5b5b; 55 | height: 45px; 56 | width: 100%; 57 | outline: none; 58 | border-radius: 5px; 59 | border: 1px solid #ccc; 60 | padding: 0 15px; 61 | font-size: 16px; 62 | border-bottom-width: 2px; 63 | transition: all 0.3s ease; 64 | } 65 | 66 | form .gender-details .gender-title{ 67 | font-size: 20px; 68 | font-weight: 500; 69 | } 70 | 71 | .gender-box{ 72 | margin: 5px 0; 73 | } 74 | 75 | .category{ 76 | display: flex; 77 | align-items: center; 78 | margin: 5px 0; 79 | } 80 | 81 | .category span{ 82 | margin-right: 20px; 83 | } 84 | 85 | .checkBox{ 86 | color: #7f7f7f; 87 | display: flex; 88 | } 89 | .checkBox input{ 90 | height: 20px; 91 | width: 20px; 92 | margin-right: 10px; 93 | } 94 | 95 | form button{ 96 | background: #1d8bcb; 97 | color: #fff; 98 | border: none; 99 | margin: 10px 0; 100 | padding: 8px 20px; 101 | font-size: 1.1rem; 102 | font-weight: 700; 103 | border-radius: 10px; 104 | width: 100%; 105 | &:hover{ 106 | background-color: #432ad1; 107 | } 108 | } 109 | 110 | 111 | 112 | @media screen and (max-width: 600px) { 113 | .container{ 114 | height: auto; 115 | margin-top: auto; 116 | margin-bottom: auto; 117 | margin-left: 10px; 118 | margin-right: 10px; 119 | } 120 | form .form-container .input-box{ 121 | width: 100%; 122 | } 123 | .container form .form-container{ 124 | max-height: 380px; 125 | overflow-y: scroll; 126 | } 127 | .container form .form-container::-webkit-scrollbar{ 128 | display: none; 129 | } 130 | } 131 | 132 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /6_Typing_Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Typing Animation 7 | 8 | 9 | 10 |
11 | I'm a 12 | Web-Developer 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /6_Typing_Animation/script.js: -------------------------------------------------------------------------------- 1 | const text = document.querySelector(".headText") 2 | 3 | const writeText = () => { 4 | setTimeout(() => { 5 | text.textContent = "Web-Developer"; 6 | text.style.color = "rgb(48, 196, 255)"; 7 | }, 0); 8 | setTimeout(() => { 9 | text.textContent = "Programmer"; 10 | text.style.color = "rgb(255, 72, 0)"; 11 | }, 4000); 12 | setTimeout(() => { 13 | text.textContent = "youtuber"; 14 | text.style.color = "rgb(198, 42, 255)"; 15 | }, 8000); 16 | } 17 | 18 | writeText(); 19 | setInterval(writeText, 12000); -------------------------------------------------------------------------------- /6_Typing_Animation/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); 2 | 3 | *{ 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | font-family: "Noto Sans", sans-serif; 8 | } 9 | 10 | body{ 11 | background-color: rgb(41, 41, 41); 12 | height: 100vh; 13 | width: 100vw; 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | } 18 | 19 | .container{ 20 | width: 550px; 21 | position: absolute; 22 | display: flex; 23 | gap: 20px; 24 | overflow: hidden; 25 | } 26 | 27 | .container span{ 28 | font-size: 3.2rem; 29 | font-weight: 700; 30 | position: relative; 31 | } 32 | 33 | .container span.myText{ 34 | color: white; 35 | } 36 | 37 | .container span.headText{ 38 | color: rgb(48, 196, 255); 39 | } 40 | 41 | .container .headText::after{ 42 | content: ""; 43 | position: absolute; 44 | left: 0; 45 | right: 0; 46 | height: 100%; 47 | width: 100%; 48 | background: rgb(41, 41, 41); 49 | border-left: 6px solid rgb(255, 255, 255); 50 | animation: animate 4s steps(12) infinite; 51 | } 52 | 53 | @keyframes animate{ 54 | 40%, 60%{ 55 | left: 102%; 56 | } 57 | 100%{ 58 | left: 0%; 59 | } 60 | } 61 | 62 | -------------------------------------------------------------------------------- /7_DropDown/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dropdown Menu 7 | 8 | 9 | 10 | 11 |
12 |
13 | Select Item 14 | 15 |
16 |
17 |
18 | 19 | Facebook 20 |
21 |
22 | 23 | Instagram 24 |
25 |
26 | 27 | Telegram 28 |
29 |
30 | 31 | Github 32 |
33 |
34 | 35 | LinkedIn 36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /7_DropDown/script.js: -------------------------------------------------------------------------------- 1 | 2 | const selectBtn = document.querySelector(".dropdown") 3 | const dropBox = document.querySelector(".list") 4 | const arrow = document.querySelector(".arrow") 5 | 6 | const options = document.querySelectorAll(".item") 7 | const selectText = document.querySelector(".select") 8 | 9 | 10 | let isDropBoxVisible = false; 11 | 12 | selectBtn.addEventListener("click", ()=> { 13 | if(!isDropBoxVisible) { 14 | dropBox.style.display = "block"; 15 | arrow.style.transform = "rotate(180deg)" 16 | } 17 | else{ 18 | dropBox.style.display = "none"; 19 | arrow.style.transform = "rotate(0deg)" 20 | 21 | } 22 | isDropBoxVisible = !isDropBoxVisible; 23 | }) 24 | 25 | options.forEach((option)=> { 26 | option.addEventListener("click", () => { 27 | let selectOption = option.querySelector("span").innerText; 28 | selectText.innerText = selectOption; 29 | arrow.style.transform = "rotate(0deg)"; 30 | 31 | dropBox.style.display="none"; 32 | isDropBoxVisible = false; 33 | 34 | // console.log(selectOption) 35 | }) 36 | 37 | }) -------------------------------------------------------------------------------- /7_DropDown/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 6 | } 7 | 8 | body{ 9 | background: linear-gradient(30deg, rgb(93, 196, 255), rgb(154, 95, 255)); 10 | color: white; 11 | height: 100vh; 12 | width: 100vw; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | } 17 | 18 | .container{ 19 | /* background: black; */ 20 | display: flex; 21 | flex-direction: column; 22 | justify-content: flex-start; 23 | align-items: flex-start; 24 | font-size: 1.2rem; 25 | width: 380px; 26 | height: 350px; 27 | cursor: pointer; 28 | } 29 | 30 | .container .dropdown{ 31 | background: rgb(20, 20, 20); 32 | width: 100%; 33 | display: flex; 34 | justify-content: space-between; 35 | align-items: center; 36 | padding: 15px 20px; 37 | margin-bottom: 10px; 38 | border-radius: 10px; 39 | } 40 | 41 | .container .list{ 42 | background: rgb(42, 42, 42); 43 | width: 100%; 44 | display: flex; 45 | flex-direction: column; 46 | padding: 15px 20px; 47 | border-radius: 10px; 48 | display: none; 49 | } 50 | 51 | .list .item{ 52 | display: flex; 53 | gap: 20px; 54 | padding: 10px 20px; 55 | margin: 2px 0; 56 | border-radius: 10px; 57 | &:hover{ 58 | background-color: rgb(0, 0, 0); 59 | } 60 | } 61 | 62 | .list .item i{ 63 | font-size: 1.5rem; 64 | } 65 | 66 | .list .item:nth-child(1) i{ 67 | color: #1877F2; 68 | } 69 | 70 | .list .item:nth-child(2) i{ 71 | color: #d900ff; 72 | } 73 | 74 | .list .item:nth-child(3) i{ 75 | color: #24A1DE; 76 | } 77 | 78 | .list .item:nth-child(4) i{ 79 | color: #ffffff; 80 | } 81 | 82 | .list .item:nth-child(5) i{ 83 | color: #0077B5; 84 | } -------------------------------------------------------------------------------- /8_Card_Slider/card.js: -------------------------------------------------------------------------------- 1 | const cardsData = [ 2 | { 3 | "imgUrl": "./image/a11.avif", 4 | "productName": "Slim Fit Round-Neck Top", 5 | "price": "$71" 6 | }, 7 | { 8 | "imgUrl": "./image/a10.avif", 9 | "productName": "Olive Green Shift Dress", 10 | "price": "$123" 11 | }, 12 | { 13 | "imgUrl": "./image/a8.webp", 14 | "productName": "Puff Sleeves Printed Top", 15 | "price": "$99" 16 | }, 17 | { 18 | "imgUrl": "./image/a1.jpg", 19 | "productName": "Mini A-Line Dress", 20 | "price": "$89" 21 | }, 22 | { 23 | "imgUrl": "./image/a2.jpg", 24 | "productName": "Girl's Solid Crop Top", 25 | "price": "$76" 26 | }, 27 | { 28 | "imgUrl": "./image/a4.jpg", 29 | "productName": "Abstract Printed Collared Top", 30 | "price": "$92" 31 | }, 32 | { 33 | "imgUrl": "./image/a5.jpg", 34 | "productName": "Stylish Fancy Printed Shirt", 35 | "price": "$68" 36 | }, 37 | { 38 | "imgUrl": "./image/a6.jpg", 39 | "productName": "Turtle Neck Sweater Dress", 40 | "price": "$110" 41 | }, 42 | { 43 | "imgUrl": "./image/a9.webp", 44 | "productName": "Straight Mock Neck Top", 45 | "price": "$84" 46 | }, 47 | { 48 | "imgUrl": "./image/a3.jpg", 49 | "productName": "Black High Low Dress", 50 | "price": "$105" 51 | } 52 | ] 53 | 54 | const cardsContainer = document.querySelector(".swiper-wrapper") 55 | const renderCard = () => { 56 | cardsData.map((card)=> { 57 | cardsContainer.innerHTML += 58 | `
59 |
60 | 61 |
62 |
63 |
64 | Fashion 65 | ${card.price} 66 |
67 |

${card.productName}

68 |
69 |
` 70 | }) 71 | } 72 | renderCard(); -------------------------------------------------------------------------------- /8_Card_Slider/image/a1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/8_Card_Slider/image/a1.jpg -------------------------------------------------------------------------------- /8_Card_Slider/image/a10.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/8_Card_Slider/image/a10.avif -------------------------------------------------------------------------------- /8_Card_Slider/image/a11.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/8_Card_Slider/image/a11.avif -------------------------------------------------------------------------------- /8_Card_Slider/image/a2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/8_Card_Slider/image/a2.jpg -------------------------------------------------------------------------------- /8_Card_Slider/image/a3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/8_Card_Slider/image/a3.jpg -------------------------------------------------------------------------------- /8_Card_Slider/image/a4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/8_Card_Slider/image/a4.jpg -------------------------------------------------------------------------------- /8_Card_Slider/image/a5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/8_Card_Slider/image/a5.jpg -------------------------------------------------------------------------------- /8_Card_Slider/image/a6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/8_Card_Slider/image/a6.jpg -------------------------------------------------------------------------------- /8_Card_Slider/image/a8.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/8_Card_Slider/image/a8.webp -------------------------------------------------------------------------------- /8_Card_Slider/image/a9.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/8_Card_Slider/image/a9.webp -------------------------------------------------------------------------------- /8_Card_Slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Card Slider 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 | 28 | 29 |
30 |
31 | 32 |
33 |
34 | 35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /8_Card_Slider/script.js: -------------------------------------------------------------------------------- 1 | var swiper = new Swiper(".mySwiper", { 2 | slidesPerView: 3, 3 | spaceBetween: 30, 4 | pagination: { 5 | el: ".swiper-pagination", 6 | clickable: true, 7 | }, 8 | navigation: { 9 | prevEl: ".swiper-button-prev", 10 | nextEl: ".swiper-button-next", 11 | } 12 | }); -------------------------------------------------------------------------------- /8_Card_Slider/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 6 | } 7 | 8 | body{ 9 | background: #2a2a2a; 10 | position: relative; 11 | height: 100%; 12 | font-size: 14px; 13 | color: #000; 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | } 18 | 19 | .container{ 20 | position: relative; 21 | height: 100vh; 22 | width: 1000px; 23 | display: flex; 24 | align-items: center; 25 | justify-content: center; 26 | } 27 | 28 | .swiper{ 29 | width: 90%; 30 | height: auto; 31 | } 32 | 33 | .swiper-wrapper{ 34 | height: 100%; 35 | } 36 | 37 | .swiper-slide{ 38 | font-size: 18px; 39 | background: #fff; 40 | display: flex; 41 | flex-direction: column; 42 | align-items: center; 43 | justify-content: center; 44 | padding: 10px; 45 | border-radius: 10px; 46 | } 47 | 48 | .swiper-slide .image{ 49 | height: 350px; 50 | width: 100%; 51 | overflow: hidden; 52 | position: relative; 53 | left: 50%; 54 | transform: translate(-50%, 0); 55 | } 56 | 57 | .swiper-slide img{ 58 | display: block; 59 | height: 100%; 60 | width: 100%; 61 | object-fit: cover; 62 | border-radius: 8px; 63 | } 64 | 65 | .data{ 66 | width: 100%; 67 | padding: 0 10px; 68 | } 69 | 70 | .data .brand{ 71 | display: flex; 72 | flex-direction: row; 73 | align-items: center; 74 | justify-content: space-between; 75 | margin-top: 10px; 76 | font-size: 1rem; 77 | } 78 | 79 | .brand .price{ 80 | font-size: 1.2rem; 81 | font-weight: 600; 82 | color: #6711f1; 83 | } 84 | 85 | p.item-name{ 86 | margin-top: 5px; 87 | margin-bottom: 0; 88 | font-weight: 600; 89 | } 90 | 91 | .swiper-button-prev, 92 | .swiper-button-next{ 93 | font-weight: 800; 94 | } 95 | -------------------------------------------------------------------------------- /Animated Background/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Animated Background 7 | 8 | 9 | 10 |
11 |

Animated Background

12 |

Background animation using html and css

13 |
14 | 15 |
16 | 39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /Animated Background/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body{ 7 | background: linear-gradient(10deg, #a566e4, #8641da, #7a77e7, #3a52ec); 8 | color: aliceblue; 9 | background-repeat: no-repeat; 10 | height: 100vh; 11 | width: 100vw; 12 | overflow: hidden; 13 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 14 | } 15 | 16 | .head{ 17 | position: absolute; 18 | top: 50%; 19 | left: 50%; 20 | transform: translate(-50%, -50%); 21 | } 22 | 23 | .head h1{ 24 | font-size: 3.5rem; 25 | display: flex; 26 | justify-content: center; 27 | } 28 | 29 | .head p{ 30 | font-size: 1.5rem; 31 | display: flex; 32 | justify-content: center; 33 | } 34 | 35 | .container{ 36 | height: 100%; 37 | width: 100%; 38 | } 39 | 40 | .shapes{ 41 | height: 100%; 42 | width: 100%; 43 | } 44 | 45 | .container ul{ 46 | list-style: none; 47 | } 48 | 49 | .shapes li{ 50 | height: 20px; 51 | width: 20px; 52 | background-color: #000000; 53 | border-radius: 20%; 54 | position: absolute; 55 | display: block; 56 | bottom: -120px; 57 | z-index: -1; 58 | animation: animate 8s linear infinite; 59 | } 60 | 61 | .shapes li:nth-child(even) { 62 | left: calc(70px*var(--i)); 63 | width: calc(4px*(21 - var(--i))); 64 | height: calc(4px*(21 - var(--i))); 65 | animation-delay: calc(3s*var(--i)); 66 | animation-duration: calc(1.1s*var(--i) + 9s); 67 | } 68 | 69 | .shapes li:nth-child(odd) { 70 | left: calc(75px*var(--i)); 71 | animation-delay: calc(1.2s*var(--i)); 72 | animation-duration: calc(2s*var(--i) + 6s); 73 | } 74 | 75 | .shapes li:nth-child(3n) { 76 | width: calc(5px*var(--i) + 20px); 77 | height: calc(5px*var(--i) + 20px); 78 | animation-delay: calc(1.2s*(21 - var(--i))); 79 | animation-duration: calc(1.6s*(21-var(--i)) + 4s); 80 | } 81 | 82 | .shapes li:not(:nth-child(3n)) { 83 | height: calc(6px*(21 - var(--i))); 84 | width: calc(6px*(21 - var(--i))); 85 | animation-duration: calc(1.2s*var(-i) + 8s); 86 | } 87 | 88 | @keyframes animate{ 89 | 0%{ 90 | transform: translateY(0px) rotate(0deg); 91 | opacity: 1; 92 | } 93 | 100%{ 94 | transform: translateY(-1000px) rotate(360deg); 95 | opacity: 0; 96 | } 97 | } -------------------------------------------------------------------------------- /Clip Image in Text/a16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Clip Image in Text/a16.jpg -------------------------------------------------------------------------------- /Clip Image in Text/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Clip Image in Text 7 | 8 | 9 | 10 |
11 |
12 |

Hello
World

13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /Clip Image in Text/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .container{ 7 | height: 100vh; 8 | width: 100vw; 9 | background: #000000; 10 | overflow: hidden; 11 | } 12 | 13 | .text{ 14 | color: transparent; 15 | height: 100%; 16 | width: 100%; 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | text-align: center; 21 | background: url('a16.jpg'); 22 | background-size: cover; 23 | -webkit-background-clip: text; 24 | } 25 | 26 | .text h2{ 27 | font-size: 15rem; 28 | font-family: cursive; 29 | line-height: 250px; 30 | } -------------------------------------------------------------------------------- /Digital_Clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Digital Clock using CSS and javascript 7 | 8 | 9 | 10 |
11 |
12 | 00 13 | : 14 | 00 15 | : 16 | 00 17 |
18 |
19 | 20 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /Digital_Clock/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | width: 100%; 9 | min-height: 100vh; 10 | background: linear-gradient(40deg, #37daae, #8127d0 50%); 11 | color: #000000; 12 | position: relative; 13 | } 14 | 15 | .container{ 16 | width: 700px; 17 | height: 180px; 18 | position: absolute; 19 | top: 50%; 20 | left: 50%; 21 | transform: translate(-50%, -50%); 22 | background: rgba(255, 255, 255, 0.3); 23 | border-radius: 20px; 24 | overflow: hidden; 25 | 26 | } 27 | 28 | .clock{ 29 | width: 100%; 30 | height: 100%; 31 | display: flex; 32 | align-items: center; 33 | justify-content: center; 34 | } 35 | 36 | .container::before{ 37 | content: ''; 38 | background: rgba(255, 19, 19); 39 | position: absolute; 40 | height: 200px; 41 | width: 200px; 42 | top: 50px; 43 | left: 80px; 44 | border-radius: 75% 39% 58% 52% / 60% 62% 50% 40%; 45 | z-index: -1; 46 | } 47 | 48 | .container::after{ 49 | content: ''; 50 | background: rgba(109, 255, 76); 51 | position: absolute; 52 | height: 200px; 53 | width: 200px; 54 | bottom: 0px; 55 | right: 70px; 56 | border-radius: 53% 47% 39% 61% / 52% 34% 66% 48%; 57 | z-index: -1; 58 | } 59 | 60 | .clock span{ 61 | font-size: 80px; 62 | width: 100px; 63 | display: inline-block; 64 | text-align: center; 65 | position: relative; 66 | } 67 | 68 | .clock span:nth-child(1):after{ 69 | content: 'Hours'; 70 | font-size: 18px; 71 | position: relative; 72 | display: flex; 73 | bottom: 10px; 74 | justify-content: center; 75 | font-family: system-ui; 76 | font-weight: 500; 77 | } 78 | 79 | .clock span:nth-child(3):after{ 80 | content: 'Minutes'; 81 | font-size: 18px; 82 | position: relative; 83 | display: flex; 84 | bottom: 10px; 85 | justify-content: center; 86 | font-family: system-ui; 87 | font-weight: 500; 88 | } 89 | 90 | .clock span:nth-child(5):after{ 91 | content: 'Seconds'; 92 | font-size: 18px; 93 | position: relative; 94 | display: flex; 95 | bottom: 10px; 96 | justify-content: center; 97 | font-family: system-ui; 98 | font-weight: 500; 99 | } 100 | 101 | 102 | -------------------------------------------------------------------------------- /Expanding Card/images/p1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Expanding Card/images/p1.jpeg -------------------------------------------------------------------------------- /Expanding Card/images/p10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Expanding Card/images/p10.jpeg -------------------------------------------------------------------------------- /Expanding Card/images/p11.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Expanding Card/images/p11.jpeg -------------------------------------------------------------------------------- /Expanding Card/images/p13.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Expanding Card/images/p13.jpeg -------------------------------------------------------------------------------- /Expanding Card/images/p14.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Expanding Card/images/p14.jpeg -------------------------------------------------------------------------------- /Expanding Card/images/p15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Expanding Card/images/p15.png -------------------------------------------------------------------------------- /Expanding Card/images/p3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Expanding Card/images/p3.jpeg -------------------------------------------------------------------------------- /Expanding Card/images/p4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Expanding Card/images/p4.jpeg -------------------------------------------------------------------------------- /Expanding Card/images/p5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Expanding Card/images/p5.jpeg -------------------------------------------------------------------------------- /Expanding Card/images/p6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Expanding Card/images/p6.jpeg -------------------------------------------------------------------------------- /Expanding Card/images/p7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Expanding Card/images/p7.jpeg -------------------------------------------------------------------------------- /Expanding Card/images/p8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Expanding Card/images/p8.jpeg -------------------------------------------------------------------------------- /Expanding Card/images/p9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Expanding Card/images/p9.jpeg -------------------------------------------------------------------------------- /Expanding Card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Expandable Hover Cards 9 | 10 | 11 |
12 |
13 | 14 | 15 |
16 |
17 |

Emma Watson

18 | 19 |

Follow

20 |
21 | 22 | 23 | 24 | 25 |
26 | 27 |

Movies

28 |
29 |

Harry Potter

30 |

Beauty and the beast

31 | 32 |
33 | 34 |
35 |
36 | 37 | 38 |
39 |
40 |

De Caprio

41 | 42 |

Profile

43 |
44 | 45 | 46 | 47 | 48 |
49 | 50 |

Movies

51 |
52 |

Titanic

53 |

The Wolf of Wall Street

54 | 55 |
56 | 57 | 58 | 59 |
60 |
61 | 62 | 63 |
64 |
65 |

Selena Gomez

66 | 67 |

Follow

68 |
69 | 70 | 71 | 72 | 73 |
74 | 75 |

Movies

76 |
77 |

Getaway

78 |

Monte Carlo

79 | 80 |
81 | 82 |
83 |
84 | 85 | 86 |
87 |
88 |

Tom Cruise

89 | 90 |

Follow

91 |
92 | 93 | 94 | 95 | 96 |
97 | 98 |

Movies

99 |
100 |

Top Gun

101 |

Misson Impossible

102 | 103 |
104 | 105 |
106 | 107 | 108 |
109 |
110 |

Kristen Stewart

111 | 112 |

Follow

113 |
114 | 115 | 116 | 117 | 118 |
119 | 120 |

Movies

121 |
122 |

Twilight

123 |

Underwater

124 | 125 |
126 | 127 |
128 | 129 | 130 |
131 |
132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | -------------------------------------------------------------------------------- /Expanding Card/style.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | .container{ 9 | width: 100%; 10 | height: 100vh; 11 | background: linear-gradient(30deg, rgb(211, 230, 63), rgb(57, 57, 248)); 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | } 16 | 17 | 18 | .card{ 19 | display: flex; 20 | align-items: center; 21 | justify-content: center; 22 | } 23 | 24 | .image{ 25 | width: 100px; 26 | height: 500px; 27 | margin: 10px; 28 | border-radius: 50px; 29 | background-size: cover; 30 | background-position: center; 31 | position: relative; 32 | display: flex; 33 | justify-content: center; 34 | align-items: end; 35 | overflow: hidden; 36 | transition: 0.5s; 37 | 38 | } 39 | 40 | .image:hover{ 41 | width: 300px; 42 | cursor: pointer; 43 | 44 | } 45 | 46 | .image:nth-child(1) { 47 | background-image: url("images/p13.jpeg"); 48 | } 49 | .image:nth-child(2) { 50 | background-image: url("images/p1.jpeg"); 51 | } 52 | .image:nth-child(3) { 53 | background-image: url("images/p4.jpeg"); 54 | } 55 | .image:nth-child(4) { 56 | background-image: url("images/p6.jpeg"); 57 | } 58 | .image:nth-child(5) { 59 | background-image: url("images/p5.jpeg"); 60 | } 61 | 62 | 63 | /* .image::before */ 64 | .image:hover::before{ 65 | content: ""; 66 | position: absolute; 67 | top: 0; 68 | left: 0; 69 | height: 100%; 70 | width: 100%; 71 | /* background: linear-gradient(0deg, black 50%, transparent 50%); */ 72 | background: linear-gradient(0deg, black 0%, black 10%, transparent ); 73 | border-bottom-left-radius: 50px; 74 | border-bottom-right-radius: 50px; 75 | 76 | 77 | } 78 | 79 | .image .about{ 80 | color: aliceblue; 81 | position: absolute; 82 | align-items: end; 83 | width: 300px; 84 | height: 38%; 85 | padding: 0 35px; 86 | transform: translateX(100%); 87 | opacity: 0; 88 | transition: 0.5s; 89 | 90 | } 91 | 92 | .image:hover .about{ 93 | transform: translateX(0); 94 | /* transition-delay: 0.1s; */ 95 | opacity: 1; 96 | } 97 | 98 | 99 | .about .name{ 100 | font-size: 30px; 101 | line-height: 25px; 102 | color: rgb(230, 249, 108); 103 | margin: 10px 0; 104 | 105 | } 106 | 107 | .about .mo{ 108 | color: rgb(195, 163, 217); 109 | margin-bottom: 4px; 110 | } 111 | 112 | .about .movies{ 113 | display: flex; 114 | flex-direction: column; 115 | 116 | } 117 | 118 | 119 | .about .button{ 120 | font-size: 25px; 121 | } 122 | 123 | .about .button ion-icon{ 124 | padding: 0 5px; 125 | } 126 | 127 | .about .button ion-icon:nth-child(1){ 128 | color: rgb(178, 28, 175); 129 | } 130 | 131 | .about .button ion-icon:nth-child(2){ 132 | color: rgb(7, 44, 146); 133 | } 134 | 135 | .about .button ion-icon:nth-child(3){ 136 | color: rgb(28, 145, 178); 137 | } 138 | 139 | .about .button ion-icon:nth-child(4){ 140 | color: rgb(41, 60, 229); 141 | } 142 | 143 | -------------------------------------------------------------------------------- /Login Form/bg_img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Login Form/bg_img.jpg -------------------------------------------------------------------------------- /Login Form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login Form 8 | 9 | 10 |
11 | 12 |
13 | 14 |
15 |

Login Here

16 |
17 | 18 | 19 | 20 | 21 |
22 | 23 |

Don't have an account Sign Up

24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /Login Form/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | width: 100vw; 9 | height: 100vh; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | } 14 | 15 | .img{ 16 | height: 100%; 17 | width: 100%; 18 | overflow: hidden; 19 | display: flex; 20 | align-items: center; 21 | justify-content: center; 22 | } 23 | 24 | .img img{ 25 | z-index: -1; 26 | width: 1550px; 27 | height: 100%; 28 | } 29 | 30 | .box{ 31 | width: 40%; 32 | height: 60%; 33 | display: flex; 34 | position: absolute; 35 | flex-direction: column; 36 | align-items: center; 37 | border: 1px solid aliceblue; 38 | border-radius: 20px; 39 | color: aliceblue; 40 | box-shadow: 10px 10px 30px #65a9bc, 41 | -10px -10px 30px #5d90b2; 42 | 43 | backdrop-filter: blur(10px); 44 | 45 | 46 | } 47 | 48 | .box h2{ 49 | margin: 60px 0; 50 | font-size: 28px; 51 | 52 | } 53 | 54 | .inputs{ 55 | display: flex; 56 | flex-direction: column; 57 | gap: 20px; 58 | width: 70%; 59 | margin-bottom: 30px; 60 | } 61 | 62 | .inputs input{ 63 | padding: 8px 0; 64 | background: transparent; 65 | border: none; 66 | outline: none; 67 | border-bottom: 2px solid aliceblue; 68 | font-size: 20px; 69 | color: aliceblue; 70 | } 71 | ::placeholder{ 72 | color: rgb(226, 227, 228); 73 | font-size: 18px; 74 | } 75 | 76 | .login_btn{ 77 | width: 100px; 78 | padding: 7px 2px; 79 | font-size: 1.1rem; 80 | font-weight: 700; 81 | border-radius: 10px; 82 | margin-top: 20px; 83 | 84 | } 85 | 86 | .box a{ 87 | color: #4be843; 88 | cursor: pointer; 89 | } 90 | 91 | h4{ 92 | font-size: 18px; 93 | } 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/cast1/stc1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Movie_Cards_Tutorial/cast1/stc1.jpeg -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/cast1/stc2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Movie_Cards_Tutorial/cast1/stc2.jpeg -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/cast1/stc3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Movie_Cards_Tutorial/cast1/stc3.jpeg -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/cast1/stc4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Movie_Cards_Tutorial/cast1/stc4.jpeg -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/cast1/stc5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Movie_Cards_Tutorial/cast1/stc5.jpeg -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/cast2/hrc1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Movie_Cards_Tutorial/cast2/hrc1.jpeg -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/cast2/hrc2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Movie_Cards_Tutorial/cast2/hrc2.jpeg -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/cast2/hrc3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Movie_Cards_Tutorial/cast2/hrc3.jpeg -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/cast2/hrc4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Movie_Cards_Tutorial/cast2/hrc4.jpeg -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/cast2/hrc5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Movie_Cards_Tutorial/cast2/hrc5.jpeg -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/cast3/gotc1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Movie_Cards_Tutorial/cast3/gotc1.jpeg -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/cast3/gotc2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Movie_Cards_Tutorial/cast3/gotc2.jpeg -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/cast3/gotc3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Movie_Cards_Tutorial/cast3/gotc3.jpeg -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/cast3/gotc4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Movie_Cards_Tutorial/cast3/gotc4.jpeg -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/cast3/gotc5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Movie_Cards_Tutorial/cast3/gotc5.jpeg -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/got_image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Movie_Cards_Tutorial/got_image.jpg -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/got_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Movie_Cards_Tutorial/got_logo.png -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/harry_image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Movie_Cards_Tutorial/harry_image.jpg -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/harry_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Movie_Cards_Tutorial/harry_logo.png -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Movie Review Card 9 | 10 | 11 |
12 |
13 | 14 |
15 | 16 |
17 | 18 |

Directed by THE DUFFER BROTHERS

19 |
20 | 21 | 22 | 23 | 24 | 25 | IMDB: 8.7/10 26 | 27 |
28 | 29 |
30 | Fantasy 31 | Thriller 32 |
33 | 34 |
35 | 36 | 37 | 38 |
39 | 40 |
In 1980s Indiana, a group of young friends witness supernatural forces and secret government exploits. As ... 41 |
42 | 43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 | 53 |
54 |
55 | 56 |
57 | 58 |
59 | 60 |

Written by J. K. ROWLING

61 |
62 | 63 | 64 | 65 | 66 | 67 | IMDB: 8.1/10 68 | 69 |
70 | 71 |
72 | Adventure 73 | Fantasy 74 |
75 | 76 |
77 | 78 | 79 | 80 |
81 | 82 |
Harry, Ron and Hermione race against time to destroy the remaining Horcruxes. Meanwhile, the students and teachers unite to defend ... 83 |
84 | 85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 | 95 |
96 |
97 | 98 |
99 | 100 |
101 | 102 |

Directed by MARK MYLOD

103 |
104 | 105 | 106 | 107 | 108 | 109 | IMDB: 9.2/10 110 | 111 |
112 | 113 |
114 | Adventure Fiction 115 | Drama 116 |
117 | 118 |
119 | 120 | 121 | 122 |
123 | 124 |
Nine noble families wage war against each other in order to gain control over the mythical land of Westeros. Meanwhile, ... 125 |
126 | 127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/st_image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Movie_Cards_Tutorial/st_image.jpg -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/st_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Movie_Cards_Tutorial/st_logo.png -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/st_logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Movie_Cards_Tutorial/st_logo2.png -------------------------------------------------------------------------------- /Movie_Cards_Tutorial/style.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | body{ 9 | background-color: black; 10 | height: auto; 11 | width: 100vw; 12 | display: flex; 13 | flex-wrap: wrap; 14 | gap: 5rem; 15 | align-items: center; 16 | justify-content: center; 17 | } 18 | 19 | .card{ 20 | position: relative; 21 | height: 450px; 22 | width: 320px; 23 | overflow: hidden; 24 | margin-top: 50px; 25 | border-radius: 20px; 26 | background-color: bisque; 27 | box-shadow: 10px 10px 8px #cfcfcf, -10px -10px 8px #ffffff; 28 | } 29 | 30 | .card .info{ 31 | position: relative; 32 | overflow: hidden; 33 | } 34 | 35 | .card .info::before{ 36 | content: ''; 37 | position: absolute; 38 | width: 100%; 39 | height: 100%; 40 | background-color: aqua; 41 | bottom: -180px; 42 | 43 | transition: 0.5s; 44 | z-index: 1; 45 | } 46 | 47 | .card:nth-child(1) .info::before { 48 | background: linear-gradient(0deg, rgb(120, 112, 224) 0%, rgb(137, 100, 194) 50%, transparent); 49 | } 50 | .card:nth-child(2) .info::before { 51 | background: linear-gradient(0deg, rgba(45,87,126,1) 0%, rgba(51,159,159,1) 50%, transparent ); 52 | } 53 | .card:nth-child(3) .info::before { 54 | background: linear-gradient(0deg, rgb(159, 157, 157) 0%, rgb(136, 138, 138) 50%, transparent ); 55 | } 56 | 57 | 58 | 59 | 60 | .card:hover .info::before{ 61 | bottom: 0px; 62 | } 63 | 64 | 65 | .card .info img{ 66 | height: 450px; 67 | padding-right: 2px; 68 | width: auto; 69 | transition: 0.5s; 70 | } 71 | 72 | .card:hover .info img{ 73 | transform: translateY(-30px); 74 | filter: blur(5px); 75 | } 76 | 77 | 78 | .card .desc{ 79 | position: absolute; 80 | width: 320px; 81 | bottom: -250px; 82 | z-index: 2; 83 | padding: 20px; 84 | left: 0; 85 | transition: 0.5s; 86 | } 87 | 88 | .card:hover .desc{ 89 | bottom: -5px; 90 | } 91 | 92 | .card .desc .logo{ 93 | position: relative; 94 | bottom: 0px; 95 | width: 70%; 96 | } 97 | 98 | .rating{ 99 | display: flex; 100 | align-items: center; 101 | } 102 | 103 | .rating ion-icon{ 104 | color: rgb(218, 243, 29); 105 | font-size: 1.4em; 106 | padding-right: 2px; 107 | } 108 | 109 | .rating span{ 110 | margin-left: 8px; 111 | font-size: 1em; 112 | font-weight: 550; 113 | } 114 | 115 | .type{ 116 | font-weight: 800; 117 | } 118 | .type span:nth-child(1) { 119 | color: rgb(91, 220, 47); 120 | margin-right: 5px; 121 | } 122 | .type span:nth-child(2) { 123 | color: rgb(67, 239, 234); 124 | } 125 | 126 | .desc button{ 127 | margin-top: 5px; 128 | margin-bottom: 5px; 129 | border-radius: 10px; 130 | padding-left: 5px; 131 | padding-right: 5px; 132 | padding-top: 2px; 133 | padding-bottom: 2px; 134 | background-color: rgb(26, 26, 26); 135 | color: aliceblue; 136 | } 137 | 138 | 139 | .desc .cast{ 140 | position: relative; 141 | display: flex; 142 | align-items: center; 143 | height: 60px; 144 | gap: 0.3em; 145 | 146 | } 147 | 148 | .desc .cast .list{ 149 | display: flex; 150 | align-items: center; 151 | justify-content: center; 152 | height: 50px; 153 | width: 50px; 154 | border-radius: 50%; 155 | overflow: hidden; 156 | border: 3px solid rgb(255, 255, 255); 157 | } 158 | 159 | .cast img{ 160 | width: 50px; 161 | padding-right: 2px; 162 | } -------------------------------------------------------------------------------- /Neon_Btn/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Neon Button 8 | 9 | 10 | 11 |
12 | HOVER ME 13 | HOVER ME 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /Neon_Btn/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | min-height: 100vh; 9 | background: #020a11; 10 | } 11 | 12 | .container{ 13 | display: flex; 14 | flex-direction: column; 15 | gap: 60px; 16 | } 17 | 18 | .neon_btn1{ 19 | position: relative; 20 | display: inline-block; 21 | padding: 15px 25px; 22 | letter-spacing: 2px; 23 | text-decoration: none; 24 | color: #e2924c; 25 | font-size: 24px; 26 | overflow: hidden; 27 | border-radius: 15px; 28 | transition: 0.2s; 29 | } 30 | 31 | .neon_btn1:hover{ 32 | color: #042644; 33 | background: #4de323; 34 | box-shadow: 0 0 10px #4de323, 35 | 0 0 40px #4de323, 36 | 0 0 80px #4de323; 37 | } 38 | 39 | .neon_btn2{ 40 | position: relative; 41 | display: inline-block; 42 | padding: 15px 25px; 43 | letter-spacing: 2px; 44 | text-decoration: none; 45 | color: #5ccbdc; 46 | font-size: 24px; 47 | overflow: hidden; 48 | border: 4px solid #5ccbdc; 49 | border-radius: 15px; 50 | transition: 0.2s; 51 | } 52 | 53 | .neon_btn2:hover{ 54 | box-shadow: 0 0 10px #5ccbdc, 55 | 0 0 20px #5ccbdc, 56 | 0 0 60px #5ccbdc; 57 | text-shadow: 0 0 20px #5ccbdc, 58 | 0 0 40px #5ccbdc; 59 | } 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /Sidebar Menu/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /Sidebar Menu/a1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Sidebar Menu/a1.png -------------------------------------------------------------------------------- /Sidebar Menu/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sidebar Menu 7 | 8 | 9 | 10 | 11 |
12 |
13 | 20 | 21 |
  • 22 | 23 |

    Home

    24 |
    • 25 |
  • 26 | 27 |

    Account

    28 |
    • 29 |
  • 30 | 31 |

    Notification

    32 |
    • 33 |
  • 34 | 35 |

    Messages

    36 |
    • 37 |
  • 38 | 39 |

    Followers

    40 |
    • 41 |
  • 42 | 43 |

    Events

    44 |
    • 45 |
  • 46 | 47 |

    Settings

    48 |
    • 49 | 50 |
  • 51 | 52 |

    Logout

    53 |
    • 54 |
    55 | 56 |
    57 | 58 | 59 |
    60 | 61 |
    62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /Sidebar Menu/script.js: -------------------------------------------------------------------------------- 1 | 2 | const toggler = document.querySelector('.toggler') 3 | const sidebar = document.querySelector('.sidebar') 4 | 5 | const showFull = () => { 6 | toggler.addEventListener('click', ()=> { 7 | toggler.classList.toggle('active') 8 | sidebar.classList.toggle('active') 9 | }) 10 | } 11 | 12 | showFull() -------------------------------------------------------------------------------- /Sidebar Menu/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | 8 | body{ 9 | height: 100vh; 10 | width: 100vw; 11 | background: linear-gradient(30deg, #5D85FA, #AF59FF); 12 | } 13 | 14 | .container{ 15 | height: 100%; 16 | width: 100%; 17 | position: relative; 18 | } 19 | 20 | .sidebar{ 21 | height: 100%; 22 | width: 60px; 23 | background: aliceblue; 24 | display: flex; 25 | flex-direction: column; 26 | justify-content: space-evenly; 27 | overflow: hidden; 28 | transition: all 0.5s ease; 29 | } 30 | 31 | .mainHead{ 32 | margin-left: 15px; 33 | } 34 | 35 | img{ 36 | height: 40px; 37 | width: 40px; 38 | border-radius: 50%; 39 | margin-left: 10px; 40 | } 41 | 42 | .items{ 43 | display: flex; 44 | align-items: center; 45 | font-size: 1.3rem; 46 | color: #000000CC; 47 | margin-left: 0px; 48 | padding: 10px 0px; 49 | } 50 | 51 | .sidebar li{ 52 | margin-left: 10px; 53 | border-top-left-radius: 10px; 54 | border-bottom-left-radius: 10px; 55 | 56 | } 57 | 58 | .items i{ 59 | margin: 0 10px; 60 | } 61 | 62 | .para{ 63 | opacity: 0; 64 | transition: opacity 0.5s ease; 65 | } 66 | 67 | .sidebar li:not(.logout-btn):hover { 68 | background: #000; 69 | color: aliceblue; 70 | } 71 | 72 | .logout-btn{ 73 | margin-top: 50px; 74 | color: #B70202; 75 | } 76 | 77 | .logout-btn:hover{ 78 | background-color: #B70202; 79 | color: aliceblue; 80 | } 81 | 82 | .toggler{ 83 | position: absolute; 84 | top: 0; 85 | left: 60px; 86 | padding: 10px 15px; 87 | font-size: 1.4rem; 88 | transition: all 0.5s ease; 89 | } 90 | 91 | .toggler #toggle-cross { 92 | display: none; 93 | } 94 | 95 | 96 | 97 | .active.toggler #toggle-cross { 98 | display: block; 99 | } 100 | 101 | .active.toggler #toggle-bars { 102 | display: none; 103 | } 104 | 105 | .active.toggler { 106 | left: 170px; 107 | } 108 | 109 | .active.sidebar { 110 | width: 220px; 111 | } 112 | 113 | .active.sidebar .para{ 114 | opacity: 1; 115 | } 116 | 117 | 118 | 119 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /Sliding_Navbar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Sliding Navbar 9 | 10 | 11 | 12 |
    13 | 14 | 15 | 16 | 17 |
    18 | 19 |
    20 | Home 21 | Courses 22 | About 23 | Contact 24 |
    25 | 26 | 29 | 30 |

    Sliding Menu
    Using CSS and Javascript

    31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Sliding_Navbar/index.js: -------------------------------------------------------------------------------- 1 | 2 | const toggle = document.querySelector('.menu_toggle'); 3 | // const menu = document.querySelector('.menu'); 4 | 5 | const show_menu = () => { 6 | toggle.addEventListener('click', ()=> { 7 | toggle.classList.toggle('active'); 8 | // menu.classList.toggle('active'); 9 | }) 10 | } 11 | 12 | show_menu(); -------------------------------------------------------------------------------- /Sliding_Navbar/style.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body{ 8 | min-height: 100vh; 9 | background: linear-gradient(30deg, #f19752 0%, #7ef278 40%, #5553e7 100%); 10 | font-family: sans-serif; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | h1{ 17 | color: black; 18 | z-index: 5; 19 | } 20 | 21 | .logo{ 22 | position: absolute; 23 | top: 20px; 24 | right: 60px; 25 | color: aliceblue; 26 | } 27 | 28 | .logo ion-icon{ 29 | width: 60px; 30 | height: 60px; 31 | } 32 | 33 | .menu_toggle{ 34 | position: absolute; 35 | top: 20px; 36 | left: 20px; 37 | display: flex; 38 | align-items: center; 39 | z-index: 100; 40 | } 41 | 42 | .menu_toggle ion-icon{ 43 | width: 35px; 44 | height: 35px; 45 | color: black; 46 | border: 2px solid black; 47 | border-radius: 5px; 48 | } 49 | 50 | .menu_toggle span ion-icon:nth-child(2) { 51 | display: none; 52 | } 53 | 54 | .active.menu_toggle span ion-icon:nth-child(1) { 55 | display: none; 56 | } 57 | 58 | .active.menu_toggle span ion-icon:nth-child(2) { 59 | display: block; 60 | } 61 | 62 | 63 | .menu{ 64 | z-index: 10; 65 | position: absolute; 66 | left: -100%; 67 | background-color: aliceblue; 68 | clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%); 69 | width: 30%; 70 | height: 100%; 71 | padding-left: 100px; 72 | display: flex; 73 | flex-direction: column; 74 | justify-content: center; 75 | transition: 0.8s; 76 | 77 | } 78 | 79 | .active.menu{ 80 | left: 0; 81 | } 82 | 83 | .menu a{ 84 | color: rgb(245, 252, 69); 85 | background-color: #5553e7; 86 | font-size: 25px; 87 | font-weight: 700; 88 | margin-bottom: 45px; 89 | padding: 5px 40px; 90 | border-radius: 15px; 91 | display: flex; 92 | justify-content: center; 93 | width: 120px; 94 | text-decoration: none; 95 | 96 | } 97 | 98 | .menu a:hover{ 99 | color: aliceblue; 100 | background-color: black; 101 | } 102 | 103 | @media only screen and (max-width: 950px) { 104 | .menu{ 105 | padding-left: 30px; 106 | 107 | } 108 | 109 | .menu a{ 110 | width: 80px; 111 | padding: 4px 30px; 112 | } 113 | 114 | } 115 | 116 | -------------------------------------------------------------------------------- /Video In Text/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Embed video in Text 7 | 8 | 9 | 10 |
    11 | 12 |
    13 | 14 |
    15 |

    HELLO
    WORLD

    16 |
    17 | 18 | 19 | -------------------------------------------------------------------------------- /Video In Text/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .container{ 7 | height: 100vh; 8 | width: 100vw; 9 | position: relative; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | } 14 | 15 | .container video{ 16 | height: 100%; 17 | } 18 | 19 | .textbox{ 20 | position: absolute; 21 | top: 0; 22 | left: 0; 23 | background: #000000; 24 | height: 100vh; 25 | width: 100vw; 26 | color: aliceblue; 27 | font-size: 6rem; 28 | text-align: center; 29 | display: flex; 30 | align-items: center; 31 | justify-content: center; 32 | font-family: cursive; 33 | mix-blend-mode: multiply; 34 | 35 | } -------------------------------------------------------------------------------- /Video In Text/v3.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/Video In Text/v3.mp4 -------------------------------------------------------------------------------- /a1_Image_Slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Image-Slider 8 | 9 | 10 | 11 |
    12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
    21 | 22 |
    23 | 24 | 25 |
    26 |
    27 | 28 | 29 |
    30 |
    31 | 32 | 33 |
    34 |
    35 | 36 | 37 |
    38 |
    39 | 40 | 41 |
    42 |
    43 | 44 | 45 |
    46 |
    47 | 48 | 49 |
    50 | 51 |
    52 | 53 |
    54 | 55 | 56 | -------------------------------------------------------------------------------- /a1_Image_Slider/story_images/a60.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/a1_Image_Slider/story_images/a60.jpg -------------------------------------------------------------------------------- /a1_Image_Slider/story_images/a61.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/a1_Image_Slider/story_images/a61.jpg -------------------------------------------------------------------------------- /a1_Image_Slider/story_images/a62.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/a1_Image_Slider/story_images/a62.jpg -------------------------------------------------------------------------------- /a1_Image_Slider/story_images/a63.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/a1_Image_Slider/story_images/a63.jpg -------------------------------------------------------------------------------- /a1_Image_Slider/story_images/a64.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/a1_Image_Slider/story_images/a64.jpg -------------------------------------------------------------------------------- /a1_Image_Slider/story_images/a65.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/a1_Image_Slider/story_images/a65.jpg -------------------------------------------------------------------------------- /a1_Image_Slider/story_images/a66.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/a1_Image_Slider/story_images/a66.jpg -------------------------------------------------------------------------------- /a1_Image_Slider/story_images/a67.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/a1_Image_Slider/story_images/a67.jpg -------------------------------------------------------------------------------- /a1_Image_Slider/story_images/a68.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/a1_Image_Slider/story_images/a68.jpg -------------------------------------------------------------------------------- /a1_Image_Slider/story_images/a69.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/a1_Image_Slider/story_images/a69.jpg -------------------------------------------------------------------------------- /a1_Image_Slider/story_images/a70.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/a1_Image_Slider/story_images/a70.jpg -------------------------------------------------------------------------------- /a1_Image_Slider/story_images/a71.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/a1_Image_Slider/story_images/a71.jpeg -------------------------------------------------------------------------------- /a1_Image_Slider/story_images/a72.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/a1_Image_Slider/story_images/a72.jpeg -------------------------------------------------------------------------------- /a1_Image_Slider/story_images/a73.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/a1_Image_Slider/story_images/a73.jpeg -------------------------------------------------------------------------------- /a1_Image_Slider/style.css: -------------------------------------------------------------------------------- 1 | 2 | body{ 3 | width: 100%; 4 | height: 100vh; 5 | display: flex; 6 | align-items: center; 7 | overflow: hidden; 8 | background: linear-gradient(30deg, rgb(100, 241, 84), rgb(92, 92, 229), rgb(111, 30, 30)); 9 | } 10 | 11 | .container{ 12 | width: 100%; 13 | height: 90vh; 14 | display: flex; 15 | flex-direction: row; 16 | align-items: center; 17 | overflow: hidden; 18 | } 19 | 20 | .imgContainer{ 21 | width: 100%; 22 | height: 600px; 23 | position: absolute; 24 | left: 0; 25 | display: flex; 26 | justify-content: center; 27 | align-items: center; 28 | transition: 1s; 29 | } 30 | 31 | .slide_div{ 32 | display: flex; 33 | align-items: center; 34 | justify-content: center; 35 | margin: 0 30px 0 30px; 36 | } 37 | 38 | img{ 39 | position: relative; 40 | height: 370px; 41 | width: 240px; 42 | filter: saturate(10%); 43 | transition: 0.7s; 44 | background-color: rgba(0, 0, 0, 0.4); 45 | border-radius: 20px; 46 | } 47 | 48 | .button{ 49 | position: absolute; 50 | width: 240px; 51 | height: 370px; 52 | transition: 0.7s; 53 | background-color: rgba(0, 0, 0, 0.4); 54 | border-radius: 20px; 55 | } 56 | 57 | .button:hover{ 58 | background-color: rgba(0, 0, 0, 0.2); 59 | } 60 | 61 | #slider1:target ~ .imgContainer #img1, 62 | #slider1:target ~ .imgContainer #button1{ 63 | width: 390px; 64 | height: 600px; 65 | background-color: transparent; 66 | filter: saturate(100%); 67 | } 68 | 69 | #slider2:target ~ .imgContainer #img2, 70 | #slider2:target ~ .imgContainer #button2{ 71 | width: 390px; 72 | height: 600px; 73 | background-color: transparent; 74 | filter: saturate(100%); 75 | } 76 | 77 | #slider3:target ~ .imgContainer #img3, 78 | #slider3:target ~ .imgContainer #button3{ 79 | width: 390px; 80 | height: 600px; 81 | background-color: transparent; 82 | filter: saturate(100%); 83 | } 84 | 85 | #slider4:target ~ .imgContainer #img4, 86 | #slider4:target ~ .imgContainer #button4{ 87 | width: 390px; 88 | height: 600px; 89 | background-color: transparent; 90 | filter: saturate(100%); 91 | } 92 | 93 | #slider5:target ~ .imgContainer #img5, 94 | #slider5:target ~ .imgContainer #button5{ 95 | width: 390px; 96 | height: 600px; 97 | background-color: transparent; 98 | filter: saturate(100%); 99 | } 100 | 101 | #slider6:target ~ .imgContainer #img6, 102 | #slider6:target ~ .imgContainer #button6{ 103 | width: 390px; 104 | height: 600px; 105 | background-color: transparent; 106 | filter: saturate(100%); 107 | } 108 | 109 | #slider7:target ~ .imgContainer #img7, 110 | #slider7:target ~ .imgContainer #button7{ 111 | width: 390px; 112 | height: 600px; 113 | background-color: transparent; 114 | filter: saturate(100%); 115 | } 116 | 117 | 118 | #slider1:target ~ .imgContainer{ 119 | left: 60%; 120 | } 121 | #slider2:target ~ .imgContainer{ 122 | left: 40%; 123 | } 124 | #slider3:target ~ .imgContainer{ 125 | left: 20%; 126 | } 127 | #slider4:target ~ .imgContainer{ 128 | left: 0%; 129 | } 130 | #slider5:target ~ .imgContainer{ 131 | left: -20%; 132 | } 133 | #slider6:target ~ .imgContainer{ 134 | left: -40%; 135 | } 136 | #slider7:target ~ .imgContainer{ 137 | left: -60%; 138 | } 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | .img{height: 370px;} -------------------------------------------------------------------------------- /a2_Image_Slider/images/p1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/a2_Image_Slider/images/p1.jpg -------------------------------------------------------------------------------- /a2_Image_Slider/images/p2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/a2_Image_Slider/images/p2.jpg -------------------------------------------------------------------------------- /a2_Image_Slider/images/p3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/a2_Image_Slider/images/p3.jpg -------------------------------------------------------------------------------- /a2_Image_Slider/images/p4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhikumar21/WebDevExplorers/61515d5e3d64844905ccf81a51943385c0926f57/a2_Image_Slider/images/p4.jpg -------------------------------------------------------------------------------- /a2_Image_Slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Image Slider 7 | 8 | 9 | 10 | 11 |
    12 |
    13 | 14 | 15 | 16 | 17 |
    18 | 19 | 20 | 21 | 22 | 23 |
    24 | 25 |
    26 | 27 | 28 |
    29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /a2_Image_Slider/script.js: -------------------------------------------------------------------------------- 1 | 2 | const slides = document.querySelectorAll(".slide") 3 | const radioButton = document.querySelectorAll(".button") 4 | 5 | var counter = 0; 6 | 7 | slides.forEach( 8 | (slide, index) => { 9 | slide.style.left = `${index * 100}%` 10 | } 11 | ) 12 | 13 | const goNext = () => { 14 | counter++ 15 | slideImage() 16 | } 17 | 18 | const goPrev = () => { 19 | counter-- 20 | slideImage() 21 | } 22 | 23 | const slideImage = () => { 24 | slides.forEach( 25 | (slide) => { 26 | counter <= slides.length - 1 ? 27 | slide.style.transform = `translateX(-${counter * 100}%)` 28 | : counter = slides.length - 1 29 | } 30 | ) 31 | 32 | radioButton.forEach((radio, i) => { 33 | radio.checked = i===counter 34 | }) 35 | } 36 | 37 | const changeSlide = (slideNumber) => { 38 | counter = slideNumber 39 | slides.forEach( 40 | (slide) => { 41 | counter <= slides.length -1 ? 42 | slide.style.transform = `translateX(-${counter * 100}%)` 43 | : counter = slides.length -1 44 | } 45 | ) 46 | } 47 | 48 | -------------------------------------------------------------------------------- /a2_Image_Slider/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | background-color: rgb(82, 82, 82); 9 | height: 100vh; 10 | width: 100vw; 11 | position: absolute; 12 | display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | justify-content: center; 16 | } 17 | 18 | section{ 19 | background-color: aliceblue; 20 | height: 550px; 21 | width: 1000px; 22 | position: relative; 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | overflow: hidden; 27 | border-radius: 20px; 28 | border: 4px solid aliceblue; 29 | box-shadow: 5px 5px 20px aliceblue, 30 | -2px -2px 10px aliceblue; 31 | } 32 | 33 | img{ 34 | width: 100%; 35 | height: fit-content; 36 | position: absolute; 37 | transition: 1s; 38 | } 39 | 40 | .nav{ 41 | color: aliceblue; 42 | position: absolute; 43 | display: flex; 44 | justify-content: space-between; 45 | gap: 900px; 46 | font-size: 30px; 47 | } 48 | 49 | .prev:hover, 50 | .next:hover{ 51 | color: rgb(255, 251, 0); 52 | } 53 | 54 | .buttons{ 55 | z-index: 100; 56 | display: flex; 57 | position: absolute; 58 | color: aliceblue; 59 | bottom: 20px; 60 | gap: 15px; 61 | } 62 | 63 | input[type="radio"] { 64 | height: 1.2rem; 65 | width: 1.2rem; 66 | } --------------------------------------------------------------------------------