├── images ├── about.png ├── banner.png ├── img1.1.jpg ├── img1.jpg ├── img10.jpg ├── img2.jpg ├── img3.jpg ├── img4.jpg ├── img5.jpg ├── img6.jpg ├── img7.jpg ├── img8.jpg ├── img9.jpg ├── testi1.jpg ├── testi2.jpg ├── testi3.jpg └── banner2.png ├── main.js ├── style.css └── index.html /images/about.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemyhobby100/Blog-Tutorial/HEAD/images/about.png -------------------------------------------------------------------------------- /images/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemyhobby100/Blog-Tutorial/HEAD/images/banner.png -------------------------------------------------------------------------------- /images/img1.1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemyhobby100/Blog-Tutorial/HEAD/images/img1.1.jpg -------------------------------------------------------------------------------- /images/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemyhobby100/Blog-Tutorial/HEAD/images/img1.jpg -------------------------------------------------------------------------------- /images/img10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemyhobby100/Blog-Tutorial/HEAD/images/img10.jpg -------------------------------------------------------------------------------- /images/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemyhobby100/Blog-Tutorial/HEAD/images/img2.jpg -------------------------------------------------------------------------------- /images/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemyhobby100/Blog-Tutorial/HEAD/images/img3.jpg -------------------------------------------------------------------------------- /images/img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemyhobby100/Blog-Tutorial/HEAD/images/img4.jpg -------------------------------------------------------------------------------- /images/img5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemyhobby100/Blog-Tutorial/HEAD/images/img5.jpg -------------------------------------------------------------------------------- /images/img6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemyhobby100/Blog-Tutorial/HEAD/images/img6.jpg -------------------------------------------------------------------------------- /images/img7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemyhobby100/Blog-Tutorial/HEAD/images/img7.jpg -------------------------------------------------------------------------------- /images/img8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemyhobby100/Blog-Tutorial/HEAD/images/img8.jpg -------------------------------------------------------------------------------- /images/img9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemyhobby100/Blog-Tutorial/HEAD/images/img9.jpg -------------------------------------------------------------------------------- /images/testi1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemyhobby100/Blog-Tutorial/HEAD/images/testi1.jpg -------------------------------------------------------------------------------- /images/testi2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemyhobby100/Blog-Tutorial/HEAD/images/testi2.jpg -------------------------------------------------------------------------------- /images/testi3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemyhobby100/Blog-Tutorial/HEAD/images/testi3.jpg -------------------------------------------------------------------------------- /images/banner2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemyhobby100/Blog-Tutorial/HEAD/images/banner2.png -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | // nav background 2 | let header = document.querySelector("header"); 3 | 4 | window.addEventListener("scroll", () => { 5 | header.classList.toggle("shadow", window.scrollY > 0) 6 | }) 7 | 8 | //Filter 9 | $(document).ready(function () { 10 | $(".filter-item").click(function () { 11 | const value = $(this).attr("data-filter"); 12 | if (value == "all"){ 13 | $(".post-box").show("1000") 14 | } else{ 15 | $(".post-box") 16 | .not("." + value) 17 | .hide(1000); 18 | $(".post-box") 19 | .filter("." + value) 20 | .show("1000") 21 | } 22 | }); 23 | $(".filter-item").click(function () { 24 | $(this).addClass("active-filter").siblings().removeClass("active-filter") 25 | }); 26 | }); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,600;0,700;1,400&display=swap'); 2 | *{ 3 | font-family: 'Poppins', sans-serif; 4 | margin: 0; 5 | padding: 0; 6 | scroll-behavior: smooth; 7 | scroll-padding-top: 2rem; 8 | box-sizing: border-box; 9 | } 10 | 11 | /* root values */ 12 | :root{ 13 | --container-color: #1a1e21; 14 | --second-color: rgba(77, 228, 255); 15 | --text-color: #172317; 16 | --bg-color: #fff; 17 | } 18 | 19 | ::selection{ 20 | color: var(--bg-color); 21 | background: var(--second-color); 22 | } 23 | 24 | a{ 25 | text-decoration: none; 26 | } 27 | 28 | li{ 29 | list-style: none; 30 | } 31 | 32 | img{ 33 | width: 100%; 34 | } 35 | 36 | section{ 37 | padding: 3rem 0 2rem; 38 | } 39 | 40 | .container{ 41 | max-width: 1068px; 42 | margin: auto; 43 | width: 100%; 44 | } 45 | 46 | a{ 47 | color: #fff; 48 | } 49 | 50 | /* Header */ 51 | header{ 52 | position: fixed; 53 | top: 0; 54 | left: 0; 55 | width: 100%; 56 | z-index: 200; 57 | } 58 | 59 | header.shadow{ 60 | background: var(--bg-color); 61 | box-shadow: 0 1px 4px hsl(0 4% 14% / 10%); 62 | transition: .5s; 63 | } 64 | 65 | header.shadow .logo{ 66 | color: var(--text-color); 67 | } 68 | 69 | .nav{ 70 | display: flex; 71 | align-items: center; 72 | justify-content: space-between; 73 | padding: 18px 0; 74 | } 75 | 76 | .logo{ 77 | font-size: 1.5rem; 78 | font-weight: 600; 79 | color: var(--bg-color); 80 | } 81 | 82 | .logo span{ 83 | color: var(--second-color); 84 | } 85 | 86 | .login{ 87 | padding: 8px 14px; 88 | text-transform: uppercase; 89 | font-weight: 500; 90 | border-radius: 4px; 91 | background: var(--second-color); 92 | color: var(--bg-color); 93 | } 94 | 95 | .login:hover{ 96 | background: hsl(199, 98%, 56%); 97 | transition: .5s; 98 | } 99 | 100 | .home{ 101 | width: 100%; 102 | min-height: 440px; 103 | background: url("images/banner2.png"); 104 | display: grid; 105 | justify-content: center; 106 | align-items: center; 107 | } 108 | 109 | .home-text{ 110 | color: var(--bg-color); 111 | text-align: center; 112 | } 113 | 114 | .home-title{ 115 | font-size: 3.5rem; 116 | } 117 | 118 | .home-subtitle{ 119 | font-size: 1rem; 120 | font-weight: 400; 121 | } 122 | 123 | .about{ 124 | position: relative; 125 | width: 100%; 126 | display: flex !important; 127 | justify-content: center; 128 | align-items: center; 129 | } 130 | 131 | .about .contentBx{ 132 | max-width: 50%; 133 | width: 50%; 134 | text-align: left; 135 | padding-right: 40px; 136 | } 137 | 138 | .titleText{ 139 | font-weight: 600; 140 | color: #111; 141 | font-size: 2rem; 142 | margin-bottom: 10px; 143 | } 144 | 145 | .title-text{ 146 | color: #111; 147 | font-size: 1em; 148 | } 149 | 150 | .about .imgBx{ 151 | position: relative; 152 | min-width: 50%; 153 | width: 50%; 154 | min-height: 500px; 155 | } 156 | 157 | .btn2{ 158 | position: relative; 159 | display: inline-block; 160 | margin-top: 30px; 161 | padding: 10px 30px; 162 | background: #fff; 163 | border: .8px solid #111; 164 | color: #333; 165 | text-decoration: none; 166 | transition: 0.5s; 167 | } 168 | 169 | .btn2:hover{ 170 | background-color: var(--second-color); 171 | border: none; 172 | color: #fff; 173 | } 174 | 175 | .post-filter{ 176 | display: flex; 177 | justify-content: center; 178 | align-items: center; 179 | column-gap: 1.5rem; 180 | margin-top: 2rem !important; 181 | } 182 | 183 | .filter-item{ 184 | font-size: 0.9rem; 185 | font-weight: 500; 186 | cursor: pointer; 187 | } 188 | 189 | .active-filter{ 190 | background: var(--second-color); 191 | color: var(--bg-color); 192 | padding: 4px 10px; 193 | border-radius: 4px; 194 | } 195 | 196 | .post{ 197 | display: grid; 198 | grid-template-columns: repeat(auto-fit, minmax(280px, auto)); 199 | justify-content: center; 200 | gap: 1.5rem; 201 | } 202 | 203 | .post-box{ 204 | background: var(--bg-color); 205 | box-shadow: 0 4px 14px hsl(35deg 25% 15% / 10%); 206 | padding: 15px; 207 | border-radius: 0.5rem; 208 | } 209 | 210 | .post-img{ 211 | width: 100%; 212 | height: 200px; 213 | object-fit: cover; 214 | object-position: center; 215 | border-radius: 0.5rem; 216 | } 217 | 218 | .category{ 219 | font-size: 0.9rem; 220 | font-weight: 500; 221 | text-transform: uppercase; 222 | color: var(--second-color); 223 | } 224 | 225 | .post-title{ 226 | font-size: 1.3rem; 227 | font-weight: 600; 228 | color: var(--text-color); 229 | display: -webkit-box; 230 | -webkit-line-clamp: 2; 231 | -webkit-box-orient: vertical; 232 | overflow: hidden; 233 | } 234 | 235 | .post-date{ 236 | display: flex; 237 | font-size: 0.875rem; 238 | text-transform: uppercase; 239 | margin-top: 4px; 240 | font-weight: 400; 241 | } 242 | 243 | .post-description{ 244 | font-size: 0.9rem; 245 | line-height: 1.5rem; 246 | margin: 5px 0 10px; 247 | display: -webkit-box; 248 | -webkit-line-clamp: 2; 249 | -webkit-box-orient: vertical; 250 | overflow: hidden; 251 | } 252 | 253 | .profile{ 254 | display: flex; 255 | align-items: center; 256 | gap: 10px; 257 | } 258 | 259 | .profile-img{ 260 | width: 35px; 261 | height: 35px; 262 | border-radius: 50%; 263 | object-fit: cover; 264 | object-position: center; 265 | border: 2px solid var(--second-color); 266 | } 267 | 268 | .profile-name{ 269 | font-size: .8rem; 270 | font-weight: 500; 271 | } 272 | 273 | footer{ 274 | position: relative; 275 | width: 100%; 276 | height: auto; 277 | padding: 50px 100px; 278 | margin-top: 3rem; 279 | background: #111; 280 | display: flex; 281 | font-family: sans-serif; 282 | justify-content: space-between; 283 | } 284 | 285 | .footer-container{ 286 | display: flex; 287 | justify-content: space-between; 288 | flex-wrap: wrap; 289 | flex-direction: row; 290 | } 291 | 292 | .footer-container .sec{ 293 | margin-right: 30px; 294 | } 295 | 296 | .footer-container .sec.aboutus{ 297 | width: 40%; 298 | } 299 | 300 | .footer-container h2{ 301 | position: relative; 302 | color: #fff; 303 | margin-bottom: 15px; 304 | } 305 | 306 | .footer-container h2::before{ 307 | content: ''; 308 | position: absolute; 309 | bottom: -5px; 310 | left: 0; 311 | width: 50px; 312 | height: 2px; 313 | background: rgb(77, 228, 255); 314 | } 315 | 316 | footer p{ 317 | color: #fff; 318 | } 319 | 320 | .sci{ 321 | margin: 20px; 322 | display: flex; 323 | } 324 | 325 | .sci li{ 326 | list-style: none; 327 | } 328 | 329 | .sci li a{ 330 | display: inline-block; 331 | width: 40px; 332 | height: 40px; 333 | background: #222; 334 | display: flex; 335 | justify-content: center; 336 | align-items: center; 337 | margin-right: 10px; 338 | text-decoration: none; 339 | border-radius: 4px; 340 | transition: .5s; 341 | } 342 | 343 | .sci li a:hover{ 344 | background: rgb(77, 228, 255); 345 | } 346 | 347 | .sci i a .bx{ 348 | color: #fff; 349 | font-size: 20px; 350 | } 351 | 352 | .quicklinks{ 353 | position: relative; 354 | width: 25%; 355 | } 356 | 357 | .quicklinks ul li{ 358 | list-style: none; 359 | } 360 | 361 | .quicklinks ul li a{ 362 | color: #999; 363 | text-decoration: none; 364 | margin-bottom: 10px; 365 | display: inline-block; 366 | transition: .3s; 367 | } 368 | 369 | .quicklinks ul li a:hover{ 370 | color: #fff; 371 | } 372 | 373 | .footer-container .contactBx{ 374 | width: calc(35% - 60px); 375 | margin-right: 0 !important; 376 | } 377 | 378 | .contactBx .info{ 379 | position: relative; 380 | } 381 | 382 | .contactBx .info li{ 383 | display: flex !important; 384 | margin-bottom: 16px; 385 | } 386 | 387 | .contactBx .info li span:nth-child(1){ 388 | color: #fff; 389 | font-size: 20px; 390 | margin-right: 10px; 391 | } 392 | 393 | .contactBx .info li span{ 394 | color: #999; 395 | } 396 | 397 | .contactBx .info li a{ 398 | color: #999; 399 | text-decoration: none; 400 | transition: .5s; 401 | } 402 | 403 | .contactBx .info li a:hover{ 404 | color: #fff; 405 | } 406 | 407 | @media (max-width: 1060px){ 408 | .container{ 409 | margin: 0 auto; 410 | width: 95%; 411 | } 412 | 413 | .home-text{ 414 | width: 100% 415 | } 416 | } 417 | 418 | @media (max-width: 768px){ 419 | .nav{ 420 | padding: 10px 0; 421 | } 422 | 423 | section{ 424 | padding: 2rem 0 !important; 425 | } 426 | 427 | .header-content{ 428 | margin-top: 3rem !important; 429 | } 430 | 431 | .home{ 432 | min-height: 380px; 433 | } 434 | 435 | .home-title{ 436 | font-size: 3rem; 437 | } 438 | 439 | .header-title{ 440 | font-size: 2rem; 441 | } 442 | 443 | .header-img{ 444 | height: 370px; 445 | } 446 | 447 | .about{ 448 | flex-direction: column; 449 | } 450 | 451 | .about .contentBx{ 452 | min-width: 100%; 453 | width: 100%; 454 | text-align: center; 455 | padding-right: 0px; 456 | } 457 | 458 | .about .contentBx, 459 | .about .imgBx{ 460 | min-width: 100%; 461 | width: 100%; 462 | padding-right: 0px; 463 | text-align: center; 464 | } 465 | 466 | .about .imgBx{ 467 | min-height: 250px; 468 | } 469 | 470 | .btn2{ 471 | margin-bottom: 30px; 472 | } 473 | 474 | .post-header{ 475 | height: 435px; 476 | } 477 | 478 | .post-header{ 479 | margin-top: 9rem !important; 480 | } 481 | } 482 | 483 | @media (max-width: 570px){ 484 | .post-header{ 485 | height: 390px; 486 | } 487 | 488 | .header-title{ 489 | width: 100%; 490 | } 491 | 492 | .header-img{ 493 | height: 340px; 494 | } 495 | } 496 | 497 | @media (max-width: 396px){ 498 | .home-title{ 499 | font-size: 2rem; 500 | } 501 | 502 | .home-subtitle{ 503 | font-size: 0.9rem; 504 | } 505 | 506 | .home{ 507 | min-height: 300px; 508 | } 509 | 510 | .post-box{ 511 | padding: 10px; 512 | } 513 | 514 | .header-title{ 515 | font-size: 1.4rem; 516 | } 517 | 518 | .header-img{ 519 | height: 240px; 520 | } 521 | 522 | .post-header{ 523 | height: 335px; 524 | } 525 | 526 | .header-img{ 527 | height: 340px; 528 | } 529 | } 530 | 531 | /* Footer Media Query */ 532 | @media (max-width: 991px){ 533 | footer{ 534 | padding: 40px; 535 | font-size: 20px; 536 | } 537 | 538 | footer .footer-container{ 539 | flex-direction: column; 540 | } 541 | 542 | footer .footer-container .sec{ 543 | margin-right: 0; 544 | margin-bottom: 40px; 545 | } 546 | 547 | footer .footer-container .sec.aboutus{ 548 | width: 100% !important; 549 | } 550 | 551 | footer .footer-container .quicklinks{ 552 | width: 100%; 553 | } 554 | 555 | footer .footer-container .contactBx{ 556 | width: 100%; 557 | } 558 | } 559 | 560 | 561 | 562 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trend Blogger 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 | 17 |
18 |
19 | 20 |
21 |
22 |

Trend Blogger

23 | Your source of great content 24 |
25 |
26 | 27 |
28 |
29 |

Catch up with the trending topics

30 |

31 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum eos consequuntur voluptate dolorum totam provident ducimus cupiditate dolore doloribus repellat. Saepe ad fugit similique quis quam. Odio suscipit incidunt distinctio. 32 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed blanditiis libero pariatur ipsum suscipit voluptates aut, repellendus quos dolor autem, natus laboriosam consectetur maxime cumque, sunt magni optio? Veritatis, ea? 33 |

34 | Read more 35 |
36 |
37 | 38 |
39 |
40 | 41 |
42 | All 43 | Tech 44 | Food 45 | News 46 |
47 | 48 |
49 | 50 |
51 | 52 |

Tech

53 | How to create the best UI with Figma 54 | 12 Feb 2022 55 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur, similique, rerum excepturi harum, vitae facilis corrupti vel modi debitis est perferendis aut quasi ea unde repudiandae iste architecto. Corporis, voluptates.

56 |
57 | 58 | MKHB 59 |
60 |
61 | 62 |
63 | 64 |

Tech

65 | How to create the best UI with Figma 66 | 12 Feb 2022 67 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur, similique, rerum excepturi harum, vitae facilis corrupti vel modi debitis est perferendis aut quasi ea unde repudiandae iste architecto. Corporis, voluptates.

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

Food

77 | How to create the best UI with Figma 78 | 12 Feb 2022 79 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur, similique, rerum excepturi harum, vitae facilis corrupti vel modi debitis est perferendis aut quasi ea unde repudiandae iste architecto. Corporis, voluptates.

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

Tech

89 | How to create the best UI with Figma 90 | 12 Feb 2022 91 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur, similique, rerum excepturi harum, vitae facilis corrupti vel modi debitis est perferendis aut quasi ea unde repudiandae iste architecto. Corporis, voluptates.

92 |
93 | 94 | MKHB 95 |
96 |
97 | 98 |
99 | 100 |

Tech

101 | How to create the best UI with Figma 102 | 12 Feb 2022 103 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur, similique, rerum excepturi harum, vitae facilis corrupti vel modi debitis est perferendis aut quasi ea unde repudiandae iste architecto. Corporis, voluptates.

104 |
105 | 106 | MKHB 107 |
108 |
109 | 110 |
111 | 112 |

News

113 | How to create the best UI with Figma 114 | 12 Feb 2022 115 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur, similique, rerum excepturi harum, vitae facilis corrupti vel modi debitis est perferendis aut quasi ea unde repudiandae iste architecto. Corporis, voluptates.

116 |
117 | 118 | MKHB 119 |
120 |
121 | 122 |
123 | 124 |

Tech

125 | How to create the best UI with Figma 126 | 12 Feb 2022 127 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur, similique, rerum excepturi harum, vitae facilis corrupti vel modi debitis est perferendis aut quasi ea unde repudiandae iste architecto. Corporis, voluptates.

128 |
129 | 130 | MKHB 131 |
132 |
133 | 134 |
135 | 136 |

News

137 | How to create the best UI with Figma 138 | 12 Feb 2022 139 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur, similique, rerum excepturi harum, vitae facilis corrupti vel modi debitis est perferendis aut quasi ea unde repudiandae iste architecto. Corporis, voluptates.

140 |
141 | 142 | MKHB 143 |
144 |
145 | 146 |
147 | 148 |

Food

149 | How to create the best UI with Figma 150 | 12 Feb 2022 151 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur, similique, rerum excepturi harum, vitae facilis corrupti vel modi debitis est perferendis aut quasi ea unde repudiandae iste architecto. Corporis, voluptates.

152 |
153 | 154 | MKHB 155 |
156 |
157 |
158 | 159 | 193 | 194 | 195 | 196 | 197 | --------------------------------------------------------------------------------