├── screenshot.jpg ├── assets ├── profile-1.png ├── profile-2.png ├── profile-3.png └── profile-4.png ├── script.js ├── README.md ├── index.html └── style.css /screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AsmrProg-YT/Modern-Card/HEAD/screenshot.jpg -------------------------------------------------------------------------------- /assets/profile-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AsmrProg-YT/Modern-Card/HEAD/assets/profile-1.png -------------------------------------------------------------------------------- /assets/profile-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AsmrProg-YT/Modern-Card/HEAD/assets/profile-2.png -------------------------------------------------------------------------------- /assets/profile-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AsmrProg-YT/Modern-Card/HEAD/assets/profile-3.png -------------------------------------------------------------------------------- /assets/profile-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AsmrProg-YT/Modern-Card/HEAD/assets/profile-4.png -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const allLinks = document.querySelectorAll(".tabs a"); 2 | const allTabs = document.querySelectorAll(".tab-content"); 3 | 4 | allLinks.forEach(link => { 5 | link.addEventListener('click', () => { 6 | const linkId = link.id; 7 | 8 | allLinks.forEach(l => l.classList.toggle("active", l === link)); 9 | allTabs.forEach(tab => tab.classList.toggle("active-tab-content", tab.id === linkId)); 10 | }); 11 | }); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Modern Card UI Design 2 | In this tutorial ([Open in Youtube](https://youtu.be/MrVYO1tV7wo)), we dive deep into the art of crafting stunning Card UI designs using the dynamic trio of HTML, CSS, and JavaScript. Whether you're a beginner looking to elevate your web development skills or a seasoned pro seeking new techniques, this video has something for everyone. 3 | 4 | 🔍 What You'll Learn: 5 | - The fundamental structure of Card UI components 6 | - Crafting visually appealing designs with CSS styling 7 | - Implementing interactive features with JavaScript 8 | - Responsive design principles for seamless adaptation across devices 9 | - Best practices for optimizing performance and accessibility 10 | 11 | 💡 Why Card UI Matters: 12 | Card-based layouts have become a cornerstone of modern web design, offering a versatile solution for presenting content in an engaging and organized manner. From social media feeds to e-commerce product listings, mastering the art of Card UI design opens doors to creating dynamic and user-friendly interfaces. 13 | 14 | # Screenshot 15 | Here we have project screenshot : 16 | 17 | ![screenshot1](screenshot.jpg) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Modern Card UI Design | AsmrProg 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 | 19 |

140$

20 |
21 |

Course Price

22 |
23 |
24 | 25 |
26 |
27 |
28 | 29 |

1423

30 |
31 |

Students

32 |
33 |
34 | 35 |
36 |

Reza Mehdikhanlou

37 |

Fullstack Developer/Content Creator

38 |
39 | 40 |
41 | 42 | 43 | 44 | 45 | 46 | 47 |
48 | 49 |
50 | 62 |
63 | 64 |
65 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quae dolorum doloribus ratione qui, 66 | ex at vel. Vero fugit ea quas ipsam accusantium repudiandae possimus quis debitis quasi, qui eum!

67 |
68 |

How I Can Help You?🤔

69 |
70 | JavaScript Tips 71 | Interview Tips 72 | Web Coding Tips 73 |
74 |
75 | 76 |
77 |

78 | Explore the latest in web development technologies and tools 👨‍💻 79 |

80 |
81 | Frontend Essentials: Html & CSS 82 | Mastering JavaScript 83 | Building Dynamic UIs with React.JS 84 | Powering Your Backend With Next.JS 85 |
86 |
87 | 88 |
89 |

90 | Here are some of my students comments 👨‍🎓 91 |

92 |
93 |
94 | 95 |
96 |

John D

97 |

98 | Incredible instructor! Clear explanations and practical examples. 99 |

100 |
101 |
102 |
103 | 104 |
105 |

Alex R

106 |

107 | Transformative learning experience, thanks to the insightful guidance. 108 |

109 |
110 |
111 |
112 | 113 |
114 |

Sarah K

115 |

116 | Engaging content, easy to follow, highly recommended. 117 |

118 |
119 |
120 |
121 |
122 | 123 | 124 | 125 |
126 | 127 | 128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap'); 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Manrope', sans-serif; 8 | } 9 | 10 | *:focus{ 11 | outline: 1px solid #3d5afe; 12 | color: #3d5afe !important; 13 | } 14 | 15 | *::-webkit-scrollbar{ 16 | width: 8px; 17 | height: 8px; 18 | background: #e8eaf6; 19 | border-radius: 160px; 20 | } 21 | 22 | *::-webkit-scrollbar-thumb{ 23 | background: #c5cae9; 24 | border-radius: 160px; 25 | } 26 | 27 | a{ 28 | text-decoration: none; 29 | } 30 | 31 | body{ 32 | background: #eff3f4; 33 | color: #757575; 34 | display: flex; 35 | align-items: center; 36 | justify-content: center; 37 | flex-direction: column; 38 | height: 100vh; 39 | } 40 | 41 | .container{ 42 | background: #fff; 43 | width: 448px; 44 | padding: 16px; 45 | display: flex; 46 | flex-direction: column; 47 | align-items: center; 48 | justify-content: space-between; 49 | gap: 12px; 50 | border-radius: 16px; 51 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 52 | } 53 | 54 | .container header{ 55 | display: flex; 56 | justify-content: space-between; 57 | width: 100%; 58 | gap: 12px; 59 | } 60 | 61 | .container header .info{ 62 | display: flex; 63 | flex-direction: column; 64 | align-items: center; 65 | gap: 5px; 66 | font-size: 12px; 67 | width: 100%; 68 | flex-grow: 1; 69 | } 70 | 71 | .container header .info .count{ 72 | padding: 6px; 73 | font-weight: 600; 74 | width: 100%; 75 | background: #fafafa; 76 | border: 1px solid #eee; 77 | display: flex; 78 | align-items: center; 79 | justify-content: center; 80 | gap: 4px; 81 | border-radius: 8px; 82 | } 83 | 84 | .container header .info .count i{ 85 | font-size: 20px; 86 | font-weight: 500; 87 | } 88 | 89 | .container header .profile{ 90 | width: 400px; 91 | } 92 | 93 | .container header .profile img{ 94 | position: relative; 95 | width: 100%; 96 | aspect-ratio: 1/1; 97 | object-fit: cover; 98 | border-radius: 16px; 99 | margin-top: -50%; 100 | border: 6px solid #fff; 101 | } 102 | 103 | .container .about{ 104 | display: flex; 105 | flex-direction: column; 106 | align-items: center; 107 | gap: 4px; 108 | } 109 | 110 | .container .about h2{ 111 | display: flex; 112 | align-items: center; 113 | gap: 8px; 114 | } 115 | 116 | .container .about h2 i{ 117 | color: #3d5afe; 118 | } 119 | 120 | .container .about p{ 121 | font-size: 16px; 122 | color: #424242; 123 | } 124 | 125 | .container .social-links{ 126 | display: flex; 127 | gap: 16px; 128 | } 129 | 130 | .container .social-links a{ 131 | background: #fafafa; 132 | padding: 8px; 133 | display: flex; 134 | width: 48px; 135 | height: 48px; 136 | align-items: center; 137 | justify-content: center; 138 | border: 1px solid #eee; 139 | color: #616161; 140 | border-radius: 8px; 141 | transition: all 0.3s ease; 142 | } 143 | 144 | .container .social-links a i{ 145 | font-size: 26px; 146 | font-weight: 500; 147 | transition: all 0.3s ease; 148 | } 149 | 150 | .container .social-links a:hover{ 151 | border: 1px solid #7e57c2; 152 | } 153 | 154 | .container .social-links a:hover i{ 155 | color: #7e57c2; 156 | } 157 | 158 | .container .tabs-container{ 159 | overflow-x: auto; 160 | margin-bottom: 4px; 161 | width: 100%; 162 | } 163 | 164 | .container .tabs-container .tabs{ 165 | position: relative; 166 | display: flex; 167 | border: 1px solid #e8eaf6; 168 | border-radius: 8px; 169 | list-style: none; 170 | } 171 | 172 | .container .tabs-container .tabs li{ 173 | z-index: 2; 174 | } 175 | 176 | .container .tabs-container .tabs li a{ 177 | display: flex; 178 | align-items: center; 179 | justify-content: center; 180 | color: #000; 181 | min-width: 112px; 182 | outline: none; 183 | padding: 12px 16px; 184 | white-space: nowrap; 185 | transition: all 0.3s ease; 186 | } 187 | 188 | .container .tabs-container .tabs li a:hover, 189 | .container .tabs-container .tabs li a.active{ 190 | color: #7e57c2; 191 | } 192 | 193 | .container .tabs-container #active-tab{ 194 | position: absolute; 195 | width: 100%; 196 | width: 112px; 197 | height: 100%; 198 | background: #ede7f6; 199 | z-index: 1; 200 | border-radius: 8px; 201 | transition: all 0.5s ease; 202 | } 203 | 204 | .container .tab-content{ 205 | display: none; 206 | overflow-y: auto; 207 | } 208 | 209 | .container .active-tab-content{ 210 | display: flex; 211 | flex-direction: column; 212 | gap: 4px; 213 | height: 192px; 214 | padding: 0 4px; 215 | font-size: 15px; 216 | margin-bottom: 16px; 217 | } 218 | 219 | .container .tabs-container .tabs li:nth-child(1):has(.active)~#active-tab{ 220 | transform: translateX(0); 221 | } 222 | 223 | .container .tabs-container .tabs li:nth-child(2):has(.active)~#active-tab{ 224 | transform: translateX(112px); 225 | } 226 | 227 | .container .tabs-container .tabs li:nth-child(3):has(.active)~#active-tab{ 228 | transform: translateX(224px); 229 | } 230 | 231 | .container .tab-content .vote{ 232 | display: flex; 233 | flex-direction: column; 234 | margin-top: 1px; 235 | gap: 12px; 236 | padding: 8px 0; 237 | } 238 | 239 | .container .tab-content .vote a{ 240 | display: flex; 241 | background: #fafafa; 242 | gap: 8px; 243 | border-radius: 5px; 244 | color: #757575; 245 | padding: 8px; 246 | border: 1px solid #eee; 247 | transition: all 0.3s ease; 248 | } 249 | 250 | .container .tab-content .vote a:hover{ 251 | border: 1px solid #7e57c2; 252 | color: #7e57c2; 253 | } 254 | 255 | .container .tab-content .comments{ 256 | margin-top: 16px; 257 | display: flex; 258 | flex-direction: column; 259 | gap: 16px; 260 | } 261 | 262 | .container .tab-content .comments .comment{ 263 | display: flex; 264 | gap: 16px; 265 | align-items: center; 266 | padding: 8px; 267 | background: #fafafa; 268 | border: 1px solid #eee; 269 | border-radius: 8px; 270 | } 271 | 272 | .container .tab-content .comments .comment h4{ 273 | margin-bottom: 5px; 274 | } 275 | 276 | .container .tab-content .comments .comment p{ 277 | font-size: 13px; 278 | } 279 | 280 | .container .tab-content .comments .comment img{ 281 | width: 48px; 282 | aspect-ratio: 1/1; 283 | object-fit: cover; 284 | border-radius: 50%; 285 | } 286 | 287 | .container button{ 288 | background-color: #3d5afe; 289 | color: #fff; 290 | padding: 10px 16px; 291 | border-radius: 8px; 292 | width: 100%; 293 | border: none; 294 | cursor: pointer; 295 | font-size: 15px; 296 | font-weight: 600; 297 | transition: all 0.3s ease; 298 | } 299 | 300 | .container button:hover{ 301 | background-color: #304ffe; 302 | } --------------------------------------------------------------------------------