├── assets ├── css │ ├── catalog.css │ └── style.css ├── images │ ├── author.png │ ├── blog-1.png │ ├── blog-2.png │ ├── blog-3.png │ ├── blog-4.png │ ├── blog-5.png │ ├── blog-6.png │ ├── blog-7.png │ ├── blog-8.png │ ├── blog-9.png │ ├── edited.png │ ├── hero.png │ ├── blog-10.png │ ├── favicon.ico │ ├── pattern.png │ ├── logo-dark.svg │ └── logo-light.svg └── js │ └── script.js ├── catalog.html └── index.html /assets/css/catalog.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/author.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VIPSHAKH/DevCatalog/HEAD/assets/images/author.png -------------------------------------------------------------------------------- /assets/images/blog-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VIPSHAKH/DevCatalog/HEAD/assets/images/blog-1.png -------------------------------------------------------------------------------- /assets/images/blog-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VIPSHAKH/DevCatalog/HEAD/assets/images/blog-2.png -------------------------------------------------------------------------------- /assets/images/blog-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VIPSHAKH/DevCatalog/HEAD/assets/images/blog-3.png -------------------------------------------------------------------------------- /assets/images/blog-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VIPSHAKH/DevCatalog/HEAD/assets/images/blog-4.png -------------------------------------------------------------------------------- /assets/images/blog-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VIPSHAKH/DevCatalog/HEAD/assets/images/blog-5.png -------------------------------------------------------------------------------- /assets/images/blog-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VIPSHAKH/DevCatalog/HEAD/assets/images/blog-6.png -------------------------------------------------------------------------------- /assets/images/blog-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VIPSHAKH/DevCatalog/HEAD/assets/images/blog-7.png -------------------------------------------------------------------------------- /assets/images/blog-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VIPSHAKH/DevCatalog/HEAD/assets/images/blog-8.png -------------------------------------------------------------------------------- /assets/images/blog-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VIPSHAKH/DevCatalog/HEAD/assets/images/blog-9.png -------------------------------------------------------------------------------- /assets/images/edited.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VIPSHAKH/DevCatalog/HEAD/assets/images/edited.png -------------------------------------------------------------------------------- /assets/images/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VIPSHAKH/DevCatalog/HEAD/assets/images/hero.png -------------------------------------------------------------------------------- /assets/images/blog-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VIPSHAKH/DevCatalog/HEAD/assets/images/blog-10.png -------------------------------------------------------------------------------- /assets/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VIPSHAKH/DevCatalog/HEAD/assets/images/favicon.ico -------------------------------------------------------------------------------- /assets/images/pattern.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VIPSHAKH/DevCatalog/HEAD/assets/images/pattern.png -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // navbar variables 4 | const nav = document.querySelector('.mobile-nav'); 5 | const navMenuBtn = document.querySelector('.nav-menu-btn'); 6 | const navCloseBtn = document.querySelector('.nav-close-btn'); 7 | 8 | 9 | // navToggle function 10 | const navToggleFunc = function () { nav.classList.toggle('active'); } 11 | 12 | navMenuBtn.addEventListener('click', navToggleFunc); 13 | navCloseBtn.addEventListener('click', navToggleFunc); 14 | 15 | 16 | 17 | // theme toggle variables 18 | const themeBtn = document.querySelectorAll('.theme-btn'); 19 | 20 | 21 | for (let i = 0; i < themeBtn.length; i++) { 22 | 23 | themeBtn[i].addEventListener('click', function () { 24 | 25 | // toggle `light-theme` & `dark-theme` class from `body` 26 | // when clicked `theme-btn` 27 | document.body.classList.toggle('dark-theme'); 28 | document.body.classList.toggle('light-theme'); 29 | 30 | 31 | for (let i = 0; i < themeBtn.length; i++) { 32 | 33 | // When the `theme-btn` is clicked, 34 | // it toggles classes between `light` & `dark` for all `theme-btn`. 35 | themeBtn[i].classList.toggle('dark'); 36 | themeBtn[i].classList.toggle('light'); 37 | 38 | } 39 | 40 | }) 41 | 42 | } 43 | 44 | const data = [ 45 | { title: "Manu.uz", category: "portfolio", url: "https://manu.uz", img: "https://manu.uz/images/person1.jpg", description: "Texnologiyalardan zavqlanuvchi dasturchi." }, 46 | { title: "ShopMax", category: "ecommerce", url: "https://shopmax.uz", img: "https://via.placeholder.com/250", description: "Onlayn savdo platformasi." }, 47 | { title: "TechBlog", category: "blog", url: "https://techblog.uz", img: "https://via.placeholder.com/250", description: "Texnologiyalarga oid maqolalar." } 48 | ]; 49 | 50 | const catalogItems = document.getElementById("catalogItems"); 51 | const searchBar = document.getElementById("searchBar"); 52 | const categoryFilter = document.getElementById("categoryFilter"); 53 | 54 | function renderItems(filterText = "", filterCategory = "all") { 55 | catalogItems.innerHTML = ""; 56 | data.filter(item => 57 | (filterCategory === "all" || item.category === filterCategory) && 58 | item.title.toLowerCase().includes(filterText.toLowerCase()) 59 | ).forEach(item => { 60 | const card = document.createElement("div"); 61 | card.className = "blog-card"; 62 | card.innerHTML = ` 63 |
64 | ${item.title} 65 |
66 |
67 | 68 |

${item.title}

69 |

${item.description}

70 | 71 |
72 | `; 73 | catalogItems.appendChild(card); 74 | }); 75 | } 76 | 77 | searchBar.addEventListener("input", () => renderItems(searchBar.value, categoryFilter.value)); 78 | categoryFilter.addEventListener("change", () => renderItems(searchBar.value, categoryFilter.value)); 79 | 80 | renderItems(); 81 | -------------------------------------------------------------------------------- /assets/images/logo-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/logo-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /catalog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CodeRoad - can it everyone. 8 | 9 | 12 | 17 | 18 | 21 | 22 | 23 | 26 | 27 | 28 | 32 | 33 | 34 |
35 |
36 |
37 | 110 |
111 |
112 | 113 |
114 | 115 |
116 |
117 |

Explore Our Catalog

118 |

Find the best websites by category or search for your favorite.

119 | 120 |
121 | 122 | 128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 | 138 |
139 |
140 |
141 |
142 |
143 | 188 |
189 |
190 | 191 | 199 | 200 | 201 | 202 | 206 | 210 | 211 | 212 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CodeRoad - can it everyone. 8 | 9 | 12 | 17 | 18 | 21 | 22 | 23 | 26 | 27 | 28 | 32 | 33 | 34 | 35 | 38 | 39 |
40 |
41 | 131 |
132 |
133 | 134 |
135 | 138 | 139 |
140 |
141 |
142 |

143 | We are Code Road.
Catalog websites 144 |

145 | 146 |

147 | from uzbek developers. 148 |

149 | 150 |
151 | Add website 152 | Catalog 153 |
154 |
155 | 156 |
157 |
158 |
159 | code-road 164 | 166 |
167 |
168 |
169 |
170 | 171 |
172 |
173 | 176 | 177 |
178 |

Oxirgi qo'shilgan saytlar

179 | 180 |
181 |
182 |
183 | Building microservices with Dropwizard, MongoDB & Docker 189 |
190 | 191 |
192 | 193 | 194 |

195 | 196 | Manu.uz 197 | 198 |

199 | 200 |

201 | Texnogoliyalardan zavqlanuvchi dasturchi 202 |

203 | 204 | 205 | 206 |
207 |
208 | 209 |
210 |
211 | Building microservices with Dropwizard, MongoDB & Docker 217 |
218 | 219 |
220 | 221 | 222 |

223 | 224 | Manu.uz 225 | 226 |

227 | 228 |

229 | Texnogoliyalardan zavqlanuvchi dasturchi 230 |

231 | 232 | 233 | 234 |
235 |
236 |
237 |
238 | Building microservices with Dropwizard, MongoDB & Docker 244 |
245 | 246 |
247 | 248 | 249 |

250 | 251 | Manu.uz 252 | 253 |

254 | 255 |

256 | Texnogoliyalardan zavqlanuvchi dasturchi 257 |

258 | 259 | 260 | 261 |
262 |
263 |
264 |
265 | Building microservices with Dropwizard, MongoDB & Docker 271 |
272 | 273 |
274 | 275 | 276 |

277 | 278 | Manu.uz 279 | 280 |

281 | 282 |

283 | Texnogoliyalardan zavqlanuvchi dasturchi 284 |

285 | 286 | 287 | 288 |
289 |
290 |
291 |
292 | Building microservices with Dropwizard, MongoDB & Docker 298 |
299 | 300 |
301 | 302 | 303 |

304 | 305 | Manu.uz 306 | 307 |

308 | 309 |

310 | Texnogoliyalardan zavqlanuvchi dasturchi 311 |

312 | 313 | 314 | 315 |
316 |
317 | 318 | 319 |
320 | 321 | 324 | 325 |
326 |
327 |

Topics

328 | 329 | 330 |
331 | 332 |
333 | 334 |

Database

335 | 336 | 337 | 338 |
339 | 340 |
341 | 342 |

Accessibility

343 | 344 | 345 | 346 |
347 | 348 |
349 | 350 |

Web Performance

351 | 352 |
353 | 354 |
355 |

Tags

356 | 357 |
358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 |
367 |
368 | 369 |
370 |

Let's Talk

371 | 372 |
373 |

374 | Do you want to learn more about how I can help your company 375 | overcome problems? Let us have a conversation. 376 |

377 | 378 | 397 |
398 |
399 | 400 | 423 |
424 |
425 |
426 |
427 | 428 | 431 | 432 | 495 | 496 | 499 | 500 | 501 | 504 | 508 | 512 | 513 | 514 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | /*-----------------------------------*\ 2 | #style.css 3 | \*-----------------------------------*/ 4 | 5 | /** 6 | * copyright 2022 @codewithsadee 7 | */ 8 | 9 | 10 | 11 | 12 | 13 | /*-----------------------------------*\ 14 | #CUSTOM PROPERTY 15 | \*-----------------------------------*/ 16 | 17 | .light-theme { 18 | 19 | /** 20 | * light theme colors 21 | */ 22 | 23 | --background-primary: hsl(0, 0%, 100%); 24 | --background-secondary: hsl(0, 0%, 97%); 25 | 26 | --action-primary: hsl(214, 32%, 91%); 27 | --action-secondary: hsl(210, 38%, 95%); 28 | 29 | --foreground-primary: hsl(218, 23%, 23%); 30 | --foreground-secondary: hsl(216, 15%, 52%); 31 | --foreground-tertiary: hsl(214, 20%, 69%); 32 | 33 | --accent: hsl(229, 76%, 66%); 34 | 35 | } 36 | 37 | .dark-theme { 38 | 39 | /** 40 | * dark theme colors 41 | */ 42 | 43 | --background-primary: hsl(218, 23%, 23%); 44 | --background-secondary: hsl(220, 26%, 14%); 45 | 46 | --action-primary: hsl(216, 15%, 52%); 47 | --action-secondary: hsl(218, 23%, 23%); 48 | 49 | --foreground-primary: hsl(210, 38%, 95%); 50 | --foreground-secondary: hsl(211, 25%, 84%); 51 | --foreground-tertiary: hsl(214, 20%, 69%); 52 | 53 | --accent: hsl(229, 76%, 66%); 54 | 55 | } 56 | 57 | :root { 58 | 59 | /** 60 | * color 61 | */ 62 | 63 | --white: hsl(0, 0%, 100%); 64 | 65 | /** 66 | * typography 67 | */ 68 | 69 | --fs-base: 0.85rem; 70 | --fs-1: 1.875rem; 71 | --fs-2: 1.5rem; 72 | --fs-3: 1.25rem; 73 | --fs-4: 0.875rem; 74 | --fs-5: 0.75rem; 75 | 76 | /** 77 | * spacing 78 | */ 79 | 80 | --py: 5rem; 81 | 82 | } 83 | 84 | 85 | 86 | 87 | 88 | /*-----------------------------------*\ 89 | #RESET 90 | \*-----------------------------------*/ 91 | 92 | *, *::before, *::after { 93 | margin: 0; 94 | padding: 0; 95 | box-sizing: border-box; 96 | } 97 | 98 | a { text-decoration: none; } 99 | 100 | li { list-style: none; } 101 | 102 | img, button { display: block; } 103 | 104 | a, span { display: inline-block; } 105 | 106 | button { 107 | font: inherit; 108 | border: none; 109 | background: none; 110 | cursor: pointer; 111 | } 112 | 113 | html { 114 | font-family: "Inter", sans-serif; 115 | font-size: var(--fs-base); /* base font-size (0.85rem = 13.6px) */ 116 | line-height: 1.8; 117 | } 118 | 119 | :focus { outline-offset: 4px; } 120 | 121 | 122 | /** 123 | * scrollbar style 124 | */ 125 | 126 | ::-webkit-scrollbar { width: 16px; } 127 | 128 | 129 | ::-webkit-scrollbar-thumb { 130 | background: var(--accent); 131 | border-radius: 20px; 132 | border: 4px solid; 133 | } 134 | 135 | .light-theme::-webkit-scrollbar-thumb { border-color: hsl(0, 0%, 90%); } 136 | 137 | .dark-theme::-webkit-scrollbar-thumb { border-color: hsl(219, 27%, 20%); } 138 | 139 | .light-theme::-webkit-scrollbar-track { background: hsl(0, 0%, 90%); } 140 | 141 | .dark-theme::-webkit-scrollbar-track { background: hsl(219, 27%, 20%); } 142 | 143 | 144 | 145 | 146 | 147 | /*-----------------------------------*\ 148 | #BASE STYLE 149 | \*-----------------------------------*/ 150 | 151 | .h1, 152 | .h2, 153 | .h3, 154 | .h4 { 155 | display: block; 156 | color: var(--foreground-primary); 157 | } 158 | 159 | .h1 { 160 | font-size: var(--fs-1); 161 | font-weight: 900; 162 | } 163 | 164 | .h2 { 165 | font-size: var(--fs-2); 166 | font-weight: 700; 167 | } 168 | 169 | .h3 { 170 | font-size: var(--fs-3); 171 | font-weight: 700; 172 | } 173 | 174 | .h4 { 175 | font-size: var(--fs-4); 176 | font-weight: 700; 177 | } 178 | 179 | .text-sm { font-size: var(--fs-4); } 180 | 181 | .text-tiny { font-size: var(--fs-5); } 182 | 183 | 184 | 185 | 186 | 187 | /*-----------------------------------*\ 188 | #REUSED STYLE 189 | \*-----------------------------------*/ 190 | 191 | .container { 192 | margin-inline: auto; 193 | margin: auto; /* fallback for margin-inline */ 194 | padding: 0 15px; 195 | } 196 | 197 | .btn { 198 | min-width: 10rem; 199 | border-radius: 100px; 200 | } 201 | 202 | .btn-primary { 203 | background: var(--accent); 204 | color: var(--white); 205 | padding: 0.6875rem 1.1875rem; 206 | } 207 | 208 | .btn-primary:hover { 209 | background: var(--foreground-secondary); 210 | color: var(--action-primary); 211 | } 212 | 213 | .btn-secondary { 214 | background: var(--action-secondary); 215 | color: var(--foreground-secondary); 216 | padding: 0.5rem 1rem; 217 | border: 3px solid var(--foreground-tertiary); 218 | } 219 | 220 | .btn-secondary:hover { border-color: var(--accent); } 221 | 222 | 223 | 224 | 225 | 226 | /*-----------------------------------*\ 227 | #Extra style for dark theme 228 | \*-----------------------------------*/ 229 | 230 | .dark-theme .btn-primary:hover { color: var(--background-primary); } 231 | 232 | .dark-theme .blog-topic { 233 | background: var(--action-primary); 234 | color: var(--foreground-secondary); 235 | } 236 | 237 | .dark-theme .blog-topic:hover { 238 | background: var(--foreground-primary); 239 | color: var(--action-primary); 240 | } 241 | 242 | .dark-theme .load-more:hover { color: var(--white); } 243 | 244 | .dark-theme .aside .h2 { color: var(--foreground-primary); } 245 | 246 | 247 | 248 | 249 | /*-----------------------------------*\ 250 | #HEADER 251 | \*-----------------------------------*/ 252 | 253 | header { background: var(--background-primary); } 254 | 255 | header .flex-wrapper { display: none; } 256 | 257 | .navbar { 258 | display: flex; 259 | justify-content: space-between; 260 | align-items: center; 261 | gap: 15px; 262 | padding: 15px 0; 263 | } 264 | 265 | .logo-light, 266 | .logo-dark { display: none; } 267 | 268 | .light-theme .logo-light, 269 | .dark-theme .logo-dark { display: block; } 270 | 271 | header .btn-group { 272 | display: flex; 273 | align-items: center; 274 | gap: 15px; 275 | } 276 | 277 | .theme-btn-mobile, 278 | .nav-menu-btn, 279 | .nav-close-btn { 280 | background: var(--action-secondary); 281 | color: var(--foreground-tertiary); 282 | width: 40px; 283 | height: 40px; 284 | display: flex; 285 | justify-content: center; 286 | align-items: center; 287 | border-radius: 50%; 288 | font-size: 25px; 289 | } 290 | 291 | :is(.theme-btn-mobile, 292 | .nav-menu-btn, 293 | .nav-close-btn):hover { 294 | background: var(--accent); 295 | color: var(--white); 296 | } 297 | 298 | .theme-btn-mobile ion-icon { display: none; } 299 | 300 | .theme-btn-mobile.light .sun, 301 | .theme-btn-mobile.dark .moon { display: block; } 302 | 303 | .mobile-nav { 304 | position: fixed; 305 | inset: 0; 306 | background: var(--background-primary); 307 | padding: 70px 20px; 308 | overflow: auto; 309 | overscroll-behavior: contain; 310 | transform: translateX(100%); 311 | visibility: hidden; 312 | transition: 0.5s cubic-bezier(1, 0, 0.30, 0.70); 313 | z-index: 10; 314 | } 315 | 316 | .mobile-nav.active { 317 | transform: translateX(0); 318 | visibility: visible; 319 | } 320 | 321 | .nav-close-btn { 322 | position: absolute; 323 | top: 20px; 324 | right: 20px; 325 | } 326 | 327 | .mobile-nav .wrapper { 328 | padding-bottom: 1.25rem; 329 | margin-bottom: 1.25rem; 330 | border-bottom: 1px solid var(--action-primary); 331 | } 332 | 333 | .mobile-nav .nav-title { margin-bottom: 1rem; } 334 | 335 | .mobile-nav .nav-item { margin-bottom: 0.5rem; } 336 | 337 | .mobile-nav .nav-link { 338 | font-size: var(--fs-3); 339 | color: var(--foreground-secondary); 340 | } 341 | 342 | .mobile-nav .nav-link:hover { color: var(--accent); } 343 | 344 | 345 | 346 | 347 | 348 | /*-----------------------------------*\ 349 | #HERO SECTION 350 | \*-----------------------------------*/ 351 | 352 | .hero { 353 | background: var(--background-primary); 354 | padding-top: 2rem; 355 | padding-bottom: var(--py); 356 | text-align: center; 357 | } 358 | 359 | .hero .h1 { 360 | margin-bottom: 1rem; 361 | line-height: 1.6; 362 | } 363 | 364 | .hero b { 365 | color: var(--accent); 366 | font-weight: inherit; 367 | } 368 | 369 | .hero .h3 { 370 | color: var(--foreground-secondary); 371 | margin-bottom: 2rem; 372 | } 373 | 374 | .hero .btn-group { 375 | display: flex; 376 | justify-content: center; 377 | flex-wrap: wrap; 378 | gap: 15px; 379 | text-align: center; 380 | } 381 | 382 | .hero .right { display: none; } 383 | 384 | 385 | 386 | 387 | 388 | /*-----------------------------------*\ 389 | #BLOG SECTION 390 | \*-----------------------------------*/ 391 | 392 | .main { 393 | background: var(--background-secondary); 394 | padding: var(--py) 0; 395 | } 396 | 397 | .blog .h2 { 398 | line-height: 1.3; 399 | margin-bottom: 3rem; 400 | text-align: center; 401 | } 402 | 403 | .blog-card-group { margin-bottom: 3rem; } 404 | 405 | .blog-card { 406 | background: var(--background-primary); 407 | padding: 10px; 408 | margin-bottom: 1rem; 409 | border-radius: 10px; 410 | box-shadow: 0 10px 10px hsla(0, 0%, 0%, 0.05); 411 | transition: 0.25s ease; 412 | } 413 | 414 | .blog-card:hover { 415 | transform: translateY(-2px); 416 | box-shadow: 0 10px 10px hsla(0, 0%, 0%, 0.1); 417 | } 418 | 419 | .blog-card-banner { 420 | display: block; /* Make the container visible */ 421 | width: 250px; /* Adjust width for cropping */ 422 | height: 250px; /* Adjust height for cropping */ 423 | overflow: hidden; /* Ensure the overflow is hidden */ 424 | position: relative; 425 | } 426 | 427 | .blog-card { 428 | position:relative; /* Required for absolute positioning inside it */ 429 | } 430 | 431 | .btn.go-website { 432 | background-color: hsl(219, 27%, 20%);; 433 | color: #fff; 434 | border: none; 435 | padding: 5px 10px; 436 | border-radius: 15px; 437 | cursor: pointer; 438 | font-size: 16px; 439 | position: absolute; 440 | bottom: 19px; /* Distance from the bottom */ 441 | right: 50px; /* Distance from the right */ 442 | transition: background-color 0.3s ease; 443 | } 444 | 445 | .btn.go-website:hover { 446 | background-color: #0056b3; 447 | } 448 | 449 | .blog-content-wrapper { padding: 10px 5px; } 450 | 451 | .blog-topic { 452 | background: var(--action-secondary); 453 | color: var(--foreground-secondary); 454 | font-weight: 600; 455 | padding: 0.25rem 1rem; 456 | border-radius: 5px; 457 | margin-bottom: 1rem; 458 | } 459 | 460 | .blog-topic:hover { 461 | background: var(--foreground-secondary); 462 | color: var(--action-secondary); 463 | } 464 | 465 | .blog-card .h3 { 466 | line-height: 1.4; 467 | margin-bottom: 1rem; 468 | } 469 | 470 | .blog-card .h3:hover { 471 | text-decoration: underline; 472 | text-decoration-thickness: 2px; 473 | } 474 | 475 | .blog-text, 476 | .profile-wrapper { display: none; } 477 | 478 | .blog .wrapper { 479 | display: flex; 480 | justify-content: space-between; 481 | align-items: center; 482 | flex-wrap: wrap; 483 | gap: 15px; 484 | } 485 | 486 | .blog .h4 { color: var(--foreground-secondary); } 487 | 488 | .blog .h4:hover { color: var(--accent); } 489 | 490 | .blog .text-sm { 491 | display: flex; 492 | align-items: center; 493 | gap: 5px; 494 | color: var(--foreground-tertiary); 495 | } 496 | 497 | .blog .separator { 498 | background: var(--foreground-tertiary); 499 | margin-inline: 3px; 500 | margin: 0 3px; /* fallback for margin-inline */ 501 | width: 3px; 502 | height: 3px; 503 | border-radius: 3px; 504 | } 505 | 506 | .blog ion-icon { --ionicon-stroke-width: 50px; } 507 | 508 | .load-more { 509 | margin-inline: auto; 510 | margin: auto; /* fallback for margin-inline */ 511 | background: var(--foreground-secondary); 512 | color: var(--background-secondary); 513 | padding: 0.6875rem 1.1875rem; 514 | } 515 | 516 | .load-more:hover { background: var(--accent); } 517 | 518 | 519 | 520 | 521 | 522 | /*-----------------------------------*\ 523 | #ASIDE 524 | \*-----------------------------------*/ 525 | 526 | .aside { display: none; } 527 | 528 | 529 | 530 | 531 | 532 | /*-----------------------------------*\ 533 | #FOOTER 534 | \*-----------------------------------*/ 535 | 536 | footer { background: var(--background-primary); } 537 | 538 | footer .container { 539 | padding: var(--py) 15px; 540 | display: grid; 541 | grid-template-columns: 1fr; 542 | gap: 30px; 543 | } 544 | 545 | footer .wrapper { text-align: center; } 546 | 547 | .footer-logo { margin-bottom: 10px; } 548 | 549 | .footer-text { 550 | color: var(--foreground-secondary); 551 | max-width: 300px; 552 | margin-inline: auto; 553 | margin: auto; /* fallback for margin-inline */ 554 | } 555 | 556 | .footer-title { 557 | color: var(--foreground-primary); 558 | font-weight: 700; 559 | margin-bottom: 0.4rem; 560 | } 561 | 562 | .footer-link { color: var(--foreground-secondary); } 563 | 564 | .footer-link:hover { color: var(--accent); } 565 | 566 | .copyright { 567 | color: var(--foreground-secondary); 568 | font-size: var(--fs-4); 569 | text-align: center; 570 | padding: 1rem; 571 | border-top: 1px solid var(--action-primary); 572 | } 573 | 574 | .copyright a { 575 | color: var(--accent); 576 | font-weight: 500; 577 | } 578 | 579 | .copyright a:hover { text-decoration: underline; } 580 | 581 | 582 | 583 | 584 | 585 | /*-----------------------------------*\ 586 | #MEDIA QUERIES 587 | \*-----------------------------------*/ 588 | 589 | /** 590 | * responsive for larger than 550px screen 591 | */ 592 | 593 | @media (min-width: 550px) { 594 | 595 | :root { 596 | 597 | /** 598 | * typography 599 | */ 600 | 601 | --fs-base: 0.90rem; 602 | 603 | } 604 | 605 | 606 | /** 607 | * BLOG 608 | */ 609 | 610 | .blog-card { 611 | display: grid; 612 | grid-template-columns: 3fr 4fr; 613 | gap: 20px; 614 | } 615 | 616 | .blog-card-banner { 617 | display: block; 618 | overflow: hidden; 619 | border-radius: 5px; 620 | } 621 | 622 | .blog-banner-img { 623 | width: 100%; 624 | height: 100%; 625 | object-fit: cover; 626 | } 627 | 628 | } 629 | 630 | 631 | 632 | 633 | 634 | /** 635 | * responsive for larger than 650px screen 636 | */ 637 | 638 | @media (min-width: 650px) { 639 | 640 | :root { 641 | 642 | /** 643 | * typography 644 | */ 645 | 646 | --fs-1: 2.25rem; 647 | 648 | } 649 | 650 | 651 | 652 | /** 653 | * REUSED STYLE 654 | */ 655 | 656 | .container { padding: 0 30px; } 657 | 658 | 659 | 660 | /** 661 | * HEADER 662 | */ 663 | 664 | .navbar { padding: 30px 0; } 665 | 666 | 667 | 668 | /** 669 | * BLOG 670 | */ 671 | 672 | .blog .h2 { 673 | position: relative; 674 | text-align: left; 675 | padding-left: 2rem; 676 | } 677 | 678 | .blog .h2::before { 679 | content: ''; 680 | position: absolute; 681 | top: 0; 682 | left: 0; 683 | background: var(--action-primary); 684 | width: 5px; 685 | height: 100%; 686 | border-radius: 5px; 687 | } 688 | 689 | .blog-text, 690 | .profile-wrapper { display: block; } 691 | 692 | .blog-text { 693 | color: var(--foreground-secondary); 694 | font-size: var(--fs-4); 695 | display: -webkit-box; 696 | line-clamp: 3; 697 | -webkit-line-clamp: 3; 698 | -webkit-box-orient: vertical; 699 | overflow: hidden; 700 | margin-bottom: 1rem; 701 | } 702 | 703 | .blog .wrapper-flex { 704 | display: flex; 705 | justify-content: start; 706 | align-items: center; 707 | gap: 10px; 708 | } 709 | 710 | .profile-wrapper { 711 | width: 56px; 712 | height: 56px; 713 | background: var(--action-primary); 714 | padding: 3px; 715 | border-radius: 50%; 716 | } 717 | 718 | .profile-wrapper img { border-radius: 50%; } 719 | 720 | .blog .wrapper { 721 | flex-direction: column; 722 | align-items: start; 723 | gap: 0; 724 | } 725 | 726 | 727 | 728 | /** 729 | * FOOTER 730 | */ 731 | 732 | footer .container { 733 | padding: var(--py) 30px; 734 | grid-template-columns: 2fr 1fr 1fr; 735 | } 736 | 737 | footer .wrapper { text-align: left; } 738 | 739 | .footer-text { margin: 0; } 740 | 741 | } 742 | 743 | 744 | 745 | 746 | 747 | /** 748 | * responsive for larger than 768px screen 749 | */ 750 | 751 | @media (min-width: 768px) { 752 | 753 | /** 754 | * REUSED STYLE 755 | */ 756 | 757 | .container { max-width: 800px; } 758 | 759 | } 760 | 761 | 762 | 763 | 764 | 765 | /** 766 | * responsive for larger than 1024px screen 767 | */ 768 | 769 | @media (min-width: 1024px) { 770 | 771 | :root { 772 | 773 | /** 774 | * typography 775 | */ 776 | 777 | --fs-base: 1rem; 778 | --fs-1: 3rem; 779 | 780 | } 781 | 782 | 783 | 784 | /** 785 | * REUSED STYLE 786 | */ 787 | 788 | .container { max-width: 1150px; } 789 | 790 | 791 | 792 | /** 793 | * HEADER 794 | */ 795 | 796 | header .btn-group { display: none; } 797 | 798 | header .flex-wrapper { 799 | display: flex; 800 | gap: 30px; 801 | } 802 | 803 | .desktop-nav { 804 | display: flex; 805 | align-items: center; 806 | gap: 30px; 807 | } 808 | 809 | .desktop-nav .nav-link { 810 | color: var(--foreground-secondary); 811 | font-weight: 700; 812 | } 813 | 814 | .desktop-nav .nav-link:hover { color: var(--accent); } 815 | 816 | .theme-btn-desktop { 817 | position: relative; 818 | background: var(--background-secondary); 819 | color: var(--white); 820 | width: 52px; 821 | height: 26px; 822 | display: flex; 823 | justify-content: center; 824 | align-items: center; 825 | gap: 10px; 826 | border-radius: 100px; 827 | } 828 | 829 | .theme-btn-desktop.light { 830 | background: linear-gradient(45deg, hsl(7, 100%, 71%), hsl(46, 100%, 65%)); 831 | } 832 | 833 | .theme-btn-desktop.dark { 834 | background: linear-gradient(45deg, hsl(225, 100%, 60%), hsl(296, 80%, 40%)); 835 | } 836 | 837 | .theme-btn-desktop::before { 838 | content: ''; 839 | position: absolute; 840 | background: var(--white); 841 | width: 21px; 842 | height: 21px; 843 | border-radius: 30px; 844 | top: 50%; 845 | left: 3px; 846 | transform: translateY(-50%); 847 | box-shadow: 0 2px 10px -2px hsla(0, 0%, 0%, 0.05); 848 | z-index: 2; 849 | } 850 | 851 | .theme-btn-desktop.dark::before { left: calc(100% - 24px); } 852 | 853 | 854 | 855 | /** 856 | * HERO 857 | */ 858 | 859 | .hero { text-align: left; } 860 | 861 | .hero .container { 862 | display: grid; 863 | grid-template-columns: 1fr 1fr; 864 | align-items: center; 865 | gap: 50px; 866 | } 867 | 868 | .hero .btn-group { 869 | justify-content: start; 870 | gap: 30px; 871 | } 872 | 873 | .hero .right { 874 | position: relative; 875 | display: flex; 876 | justify-content: center; 877 | align-items: center; 878 | } 879 | 880 | .hero .pattern-bg { 881 | position: absolute; 882 | top: 50%; 883 | transform: translateY(-50%); 884 | width: 100%; 885 | height: 200px; 886 | background: url(../images/pattern.png); 887 | background-size: contain; 888 | opacity: 0.2; 889 | } 890 | 891 | .hero .img-box { 892 | position: relative; 893 | z-index: 2; 894 | } 895 | 896 | .hero-img { 897 | width: 100%; 898 | height: 100%; 899 | object-fit: contain; 900 | border-radius: 0 0 280px 230px; 901 | transform: translate(10px, -10px); 902 | } 903 | 904 | .hero .shape { 905 | position: absolute; 906 | top: 50%; 907 | left: 50%; 908 | border-radius: 50%; 909 | transform: translate(-50%, -42%) rotate(-20deg); 910 | } 911 | 912 | .hero .shape-1 { 913 | background: var(--accent); 914 | width: 90%; 915 | height: 90%; 916 | z-index: -1; 917 | } 918 | 919 | .hero .shape-2 { 920 | width: 92%; 921 | height: 92%; 922 | box-shadow: inset 0 -30px 0 var(--action-primary); 923 | z-index: 2; 924 | } 925 | 926 | 927 | 928 | /** 929 | * MAIN 930 | */ 931 | 932 | .main .container { 933 | display: grid; 934 | grid-template-columns: 5fr 2fr; 935 | gap: 60px; 936 | } 937 | 938 | 939 | 940 | /** 941 | * ASIDE 942 | */ 943 | 944 | .aside { 945 | display: block; 946 | align-self: stretch; 947 | } 948 | 949 | .aside .h2 { 950 | color: var(--foreground-secondary); 951 | margin-bottom: 3rem; 952 | text-align: center; 953 | line-height: 1.3; 954 | } 955 | 956 | .aside .wrapper { 957 | background: var(--background-primary); 958 | border-radius: 10px; 959 | padding: 40px; 960 | box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.05); 961 | } 962 | 963 | .topics { margin-bottom: 3rem; } 964 | 965 | .topic-btn { 966 | display: flex; 967 | align-items: stretch; 968 | background: var(--background-primary); 969 | border-radius: 10px; 970 | box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.05); 971 | overflow: hidden; 972 | } 973 | 974 | .topic-btn:not(:last-child) { margin-bottom: 1rem; } 975 | 976 | .topic-btn .icon-box { 977 | font-size: 22px; 978 | width: 70px; 979 | display: flex; 980 | justify-content: center; 981 | align-items: center; 982 | background: var(--action-primary); 983 | color: var(--foreground-secondary); 984 | } 985 | 986 | .topic-btn:hover .icon-box { 987 | background: var(--accent); 988 | color: var(--white); 989 | } 990 | 991 | .topic-btn ion-icon { --ionicon-stroke-width: 40px; } 992 | 993 | .topic-btn p { 994 | padding: 15px; 995 | color: var(--foreground-secondary); 996 | font-weight: 700; 997 | } 998 | 999 | .tags { margin-bottom: 3rem; } 1000 | 1001 | .tags .wrapper { 1002 | display: flex; 1003 | flex-wrap: wrap; 1004 | gap: 0.2rem; 1005 | } 1006 | 1007 | .tags .hashtag { 1008 | background: var(--action-primary); 1009 | color: var(--foreground-secondary); 1010 | padding: 5px 10px; 1011 | font-size: var(--fs-5); 1012 | font-weight: 700; 1013 | border-radius: 5px; 1014 | } 1015 | 1016 | .tags .hashtag:hover { 1017 | background: var(--foreground-secondary); 1018 | color: var(--action-primary); 1019 | } 1020 | 1021 | .contact { margin-bottom: 3rem; } 1022 | 1023 | .contact p { 1024 | color: var(--foreground-secondary); 1025 | margin-bottom: 1rem; 1026 | } 1027 | 1028 | .social-link { 1029 | display: flex; 1030 | justify-content: center; 1031 | align-items: center; 1032 | gap: 10px; 1033 | } 1034 | 1035 | .social-link .icon-box { 1036 | width: 45px; 1037 | height: 45px; 1038 | background: var(--action-secondary); 1039 | border-radius: 50%; 1040 | display: flex; 1041 | justify-content: center; 1042 | align-items: center; 1043 | font-size: 22px; 1044 | } 1045 | 1046 | .social-link .discord { color: hsl(235, 86%, 65%); } 1047 | 1048 | .social-link .twitter { color: hsl(203, 89%, 53%); } 1049 | 1050 | .social-link .facebook { color: hsl(220, 46%, 48%); } 1051 | 1052 | .social-link .icon-box:hover { 1053 | background: var(--accent); 1054 | color: var(--white); 1055 | } 1056 | 1057 | .newsletter { 1058 | position: sticky; 1059 | top: 3rem; 1060 | margin-bottom: 98px; 1061 | } 1062 | 1063 | .newsletter p { 1064 | color: var(--foreground-secondary); 1065 | margin-bottom: 1rem; 1066 | } 1067 | 1068 | .newsletter input { 1069 | border: none; 1070 | background: var(--action-primary); 1071 | display: block; 1072 | width: 100%; 1073 | padding: 0.5rem 1rem; 1074 | font: inherit; 1075 | color: var(--foreground-secondary); 1076 | border-radius: 5px; 1077 | margin-bottom: 1rem; 1078 | } 1079 | 1080 | .newsletter input::placeholder { color: inherit; } 1081 | 1082 | .newsletter input:focus { 1083 | outline: 2px solid; 1084 | outline-offset: 0; 1085 | } 1086 | 1087 | .newsletter .btn-primary { 1088 | margin-inline: auto; 1089 | margin: auto; /* fallback for margin-inline */ 1090 | } 1091 | 1092 | 1093 | 1094 | /** 1095 | * FOOTER 1096 | */ 1097 | 1098 | .footer-title { font-size: 1.125rem; } 1099 | 1100 | .footer-link { margin-bottom: 0.3rem; } 1101 | 1102 | } 1103 | 1104 | .main-layout { 1105 | display: grid; 1106 | grid-template-columns: 5fr 1fr; /* Content va Sidebar nisbati */ 1107 | gap: 20px; 1108 | border-radius: 10px; 1109 | } 1110 | 1111 | 1112 | .sidebar { 1113 | background: var(--background-secondary); 1114 | padding: 20px; 1115 | border-radius: 10px; 1116 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 1117 | } 1118 | 1119 | .sidebar .topics, .sidebar .tags { 1120 | margin-bottom: 20px; 1121 | } 1122 | 1123 | .sidebar h2 { 1124 | margin-bottom: 15px; 1125 | color: var(--foreground-primary); 1126 | } 1127 | --------------------------------------------------------------------------------