├── LICENSE ├── README.md ├── assets ├── css │ └── style.css ├── images │ ├── Thumbs.db │ ├── author-1.png │ ├── author-2.png │ ├── author-3.png │ ├── author-4.png │ ├── author-5.png │ ├── author-6.png │ ├── author-7.png │ ├── author-8.png │ ├── favicon.svg │ ├── featured-1.png │ ├── featured-2.png │ ├── featured-3.png │ ├── featured-4.png │ ├── featured-5.png │ ├── hero-banner.png │ ├── insta-post-1.png │ ├── insta-post-2.png │ ├── insta-post-3.png │ ├── insta-post-4.png │ ├── insta-post-5.png │ ├── insta-post-6.png │ ├── insta-post-7.png │ ├── insta-post-8.png │ ├── insta-post-9.png │ ├── logo.svg │ ├── pattern-1.svg │ ├── pattern-2.svg │ ├── pattern-3.svg │ ├── pattern-4.svg │ ├── popular-post-1.jpg │ ├── popular-post-2.jpg │ ├── popular-post-3.jpg │ ├── popular-post-4.jpg │ ├── recent-post-1.jpg │ ├── recent-post-2.jpg │ ├── recent-post-3.jpg │ ├── recent-post-4.jpg │ ├── recent-post-5.jpg │ ├── shadow-1.svg │ ├── shadow-2.svg │ ├── shadow-3.svg │ ├── tag1.png │ ├── tag10.png │ ├── tag11.png │ ├── tag12.png │ ├── tag2.png │ ├── tag3.png │ ├── tag4.png │ ├── tag5.png │ ├── tag6.png │ ├── tag7.png │ ├── tag8.png │ ├── tag9.png │ ├── topic-1.png │ ├── topic-2.png │ ├── topic-3.png │ ├── topic-4.png │ └── topic-5.png └── js │ └── script.js ├── favicon.svg ├── index.html ├── index.txt ├── readme-images └── desktop.png └── style-guide.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Sadee 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | ![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/wren) 4 | ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/wren?style=social) 5 | ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/wren?style=social) 6 | [![Twitter Follow](https://img.shields.io/twitter/follow/codewithsadee_?style=social)](https://twitter.com/intent/follow?screen_name=codewithsadee_) 7 | [![YouTube Video Views](https://img.shields.io/youtube/views/Pup-yi4oMfU?style=social)](https://youtu.be/Pup-yi4oMfU) 8 | 9 |
10 |
11 | 12 |

Wren - Personal Blog Website

13 | 14 | Wren is a fully responsive personal blog website,
Responsive for all devices, build using HTML, CSS, and JavaScript. 15 | 16 | ➥ Live Demo 17 | 18 |
19 | 20 |
21 | 22 | ### Demo Screeshots 23 | 24 | ![Wren Desktop Demo](./readme-images/desktop.png "Desktop Demo") 25 | 26 | ### Prerequisites 27 | 28 | Before you begin, ensure you have met the following requirements: 29 | 30 | * [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system. 31 | 32 | ### Run Locally 33 | 34 | To run **Wren** locally, run this command on your git bash: 35 | 36 | Linux and macOS: 37 | 38 | ```bash 39 | sudo git clone https://github.com/codewithsadee/wren.git 40 | ``` 41 | 42 | Windows: 43 | 44 | ```bash 45 | git clone https://github.com/codewithsadee/wren.git 46 | ``` 47 | 48 | ### Contact 49 | 50 | If you want to contact with me you can reach me at [Twitter](https://www.twitter.com/codewithsadee). 51 | 52 | ### License 53 | 54 | [MIT](https://choosealicense.com/licenses/mit/) 55 | -------------------------------------------------------------------------------- /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 | :root { 18 | 19 | /** 20 | * COLORS 21 | */ 22 | 23 | /** Background colors */ 24 | --bg-wild-blue-yonder: hsla(216, 33%, 68%, 1); 25 | --bg-carolina-blue: hsla(199, 89%, 49%, 1); 26 | --bg-prussian-blue: hsla(216, 33%, 20%, 1); 27 | --bg-oxford-blue: hsla(222, 44%, 13%, 1); 28 | --bg-oxford-blue-2: hsla(222, 47%, 11%, 1); 29 | 30 | /** Text colors */ 31 | --text-white: hsla(0, 0%, 100%, 1); 32 | --text-alice-blue: hsla(216, 100%, 95%, 1); 33 | --text-columbia-blue: hsla(199, 69%, 84%, 1); 34 | --text-wild-blue-yonder: hsla(216, 33%, 68%, 1); 35 | --text-carolina-blue: hsla(199, 89%, 49%, 1); 36 | --text-shadow-blue: hsla(217, 24%, 59%, 1); 37 | --text-slate-gray: hsla(217, 17%, 48%, 1); 38 | 39 | /** Gradient colors */ 40 | --gradient-1: linear-gradient(90deg, #0ea5ea, #0bd1d1 51%); 41 | --gradient-2: linear-gradient(90deg, #0ea5ea, #0bd1d1 51%, #0ea5ea); 42 | --gradient-3: linear-gradient(0deg, #000d1a, transparent); 43 | 44 | /** Border colors */ 45 | --border-wild-blue-yonder: hsla(216, 33%, 68%, 1); 46 | --border-prussian-blue: hsla(216, 33%, 20%, 1); 47 | --border-white: hsl(0, 0%, 100%); 48 | --border-white-alpha-15: hsla(0, 0%, 100%, 0.15); 49 | 50 | /** Default colors */ 51 | --white: hsl(0, 0%, 100%, 1); 52 | --black: hsl(0, 0%, 0%, 1); 53 | 54 | /** 55 | * TYPOGRAPHY 56 | */ 57 | 58 | /** Font family */ 59 | --fontFamily-noto_sans: 'Noto Sans', sans-serif; 60 | 61 | /** Font size */ 62 | --fontSize-1: 2.9rem; 63 | --fontSize-2: 2.0rem; 64 | --fontSize-3: 1.8rem; 65 | --fontSize-4: 1.6rem; 66 | --fontSize-5: 1.5rem; 67 | --fontSize-6: 1.4rem; 68 | --fontSize-7: 1.2rem; 69 | --fontSize-8: 1.3rem; 70 | 71 | /** Font weight */ 72 | --weight-medium: 500; 73 | --weight-semiBold: 600; 74 | --weight-bold: 700; 75 | --weight-extraBold: 800; 76 | 77 | /** Line height */ 78 | --lineHeight-1: 1.3; 79 | --lineHeight-2: 1.5; 80 | --lineHeight-4: 1.5; 81 | 82 | /** 83 | * BOX SHADOW 84 | */ 85 | 86 | --shadow-1: 0 8px 20px 0 hsla(0, 0%, 0%, 0.05); 87 | --shadow-2: 0px 3px 20px hsla(180, 90%, 43%, 0.2); 88 | 89 | /** 90 | * BORDER RADIUS 91 | */ 92 | 93 | --radius-6: 6px; 94 | --radius-8: 8px; 95 | --radius-16: 16px; 96 | --radius-48: 48px; 97 | --radius-circle: 50%; 98 | --radius-pill: 200px; 99 | 100 | /** 101 | * SPACING 102 | */ 103 | 104 | --section-padding: 70px; 105 | 106 | /** 107 | * TRANSITION 108 | */ 109 | 110 | --transition-1: 0.25s ease; 111 | --transition-2: 0.5s ease; 112 | --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28); 113 | --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97); 114 | 115 | } 116 | 117 | 118 | 119 | 120 | 121 | /*-----------------------------------*\ 122 | #RESET 123 | \*-----------------------------------*/ 124 | 125 | *, 126 | *::before, 127 | *::after { 128 | margin: 0; 129 | padding: 0; 130 | box-sizing: border-box; 131 | } 132 | 133 | li { list-style: none; } 134 | 135 | a, 136 | img, 137 | span, 138 | input, 139 | button, 140 | ion-icon { display: block; } 141 | 142 | a { 143 | color: inherit; 144 | text-decoration: none; 145 | } 146 | 147 | img { height: auto; } 148 | 149 | input, 150 | button { 151 | background: none; 152 | border: none; 153 | font: inherit; 154 | color: inherit; 155 | } 156 | 157 | input { 158 | width: 100%; 159 | outline: none; 160 | } 161 | 162 | button { cursor: pointer; } 163 | 164 | ion-icon { pointer-events: none; } 165 | 166 | address { font-style: normal; } 167 | 168 | html { 169 | font-size: 10px; 170 | scroll-behavior: smooth; 171 | } 172 | 173 | body { 174 | background-color: var(--bg-oxford-blue-2); 175 | color: var(--text-shadow-blue); 176 | font-family: var(--fontFamily-noto_sans); 177 | font-size: 1.6rem; 178 | line-height: var(--lineHeight-4); 179 | overflow-y: overlay; 180 | } 181 | 182 | body.nav-active { overflow: hidden; } 183 | 184 | ::-webkit-scrollbar { width: 5px; } 185 | 186 | ::-webkit-scrollbar-track { background-color: transparent; } 187 | 188 | ::-webkit-scrollbar-thumb { 189 | background-color: var(--bg-carolina-blue); 190 | border-radius: var(--radius-pill); 191 | } 192 | 193 | 194 | 195 | 196 | 197 | /*-----------------------------------*\ 198 | #REUSED STYLE 199 | \*-----------------------------------*/ 200 | 201 | .container { padding-inline: 16px; } 202 | 203 | .hover-1, 204 | .hover-2 { transition: var(--transition-1); } 205 | 206 | .hover-1:is(:hover, :focus-visible) { 207 | color: var(--text-wild-blue-yonder); 208 | transform: translateX(3px); 209 | } 210 | 211 | .hover-2:is(:hover, :focus-visible) { color: var(--text-carolina-blue); } 212 | 213 | .profile-card { 214 | display: flex; 215 | align-items: center; 216 | gap: 10px; 217 | } 218 | 219 | .profile-card .profile-banner { border-radius: var(--radius-circle); } 220 | 221 | .headline { 222 | color: var(--text-columbia-blue); 223 | line-height: var(--lineHeight-1); 224 | } 225 | 226 | .headline-1 { 227 | font-size: var(--fontSize-1); 228 | color: var(--text-alice-blue); 229 | font-weight: var(--weight-extraBold); 230 | } 231 | 232 | .headline-2 { font-size: var(--fontSize-2); } 233 | 234 | .headline-3 { 235 | font-size: var(--fontSize-2); 236 | line-height: var(--lineHeight-2); 237 | } 238 | 239 | .section-title { margin-block-end: 10px; } 240 | 241 | .headline .span { 242 | background-image: var(--gradient-1); 243 | display: inline-block; 244 | -webkit-text-fill-color: transparent; 245 | -webkit-background-clip: text; 246 | } 247 | 248 | .btn { 249 | background-image: var(--gradient-2); 250 | background-size: 200%; 251 | background-position: left; 252 | color: var(--white); 253 | font-size: var(--fontSize-6); 254 | font-weight: var(--weight-bold); 255 | max-width: max-content; 256 | display: flex; 257 | align-items: center; 258 | gap: 3px; 259 | transition: var(--transition-1); 260 | } 261 | 262 | .btn:is(:hover, :focus-visible) { background-position: right; } 263 | 264 | .btn-primary { 265 | padding: 8px 16px; 266 | border-radius: var(--radius-6); 267 | } 268 | 269 | .btn-secondary { 270 | padding: 18px 30px; 271 | border-radius: var(--radius-pill); 272 | } 273 | 274 | .w-100 { width: 100%; } 275 | 276 | .card { 277 | background-color: var(--bg-oxford-blue); 278 | border: 1px solid var(--border-prussian-blue); 279 | } 280 | 281 | .img-holder { 282 | aspect-ratio: var(--width) / var(--height); 283 | background-color: var(--bg-prussian-blue); 284 | overflow: hidden; 285 | } 286 | 287 | .img-cover { 288 | width: 100%; 289 | height: 100%; 290 | object-fit: cover; 291 | } 292 | 293 | .section { padding-block: var(--section-padding); } 294 | 295 | .section-text { 296 | font-size: var(--fontSize-3); 297 | margin-block-end: 70px; 298 | } 299 | 300 | .grid-list { 301 | display: grid; 302 | gap: 30px; 303 | } 304 | 305 | .card-wrapper { 306 | display: flex; 307 | justify-content: space-between; 308 | gap: 20px; 309 | align-items: center; 310 | font-size: var(--fontSize-6); 311 | margin-block: 20px; 312 | } 313 | 314 | .card-wrapper :is(.card-tag, .wrapper) { 315 | display: flex; 316 | gap: 3px; 317 | align-items: center; 318 | } 319 | 320 | 321 | 322 | 323 | 324 | /*-----------------------------------*\ 325 | #HEADER 326 | \*-----------------------------------*/ 327 | 328 | .header .btn { display: none; } 329 | 330 | .header { 331 | position: fixed; 332 | top: 0; 333 | left: 0; 334 | width: 100%; 335 | padding-block: 24px; 336 | background-color: var(--bg-oxford-blue-2); 337 | z-index: 4; 338 | } 339 | 340 | .header.active { 341 | padding-block: 8px; 342 | box-shadow: var(--shadow-1); 343 | border-block-end: 1px solid var(--bg-prussian-blue); 344 | animation: slideIn 0.5s ease forwards; 345 | } 346 | 347 | @keyframes slideIn { 348 | 0% { transform: translateY(-100%); } 349 | 100% { transform: translateY(0); } 350 | } 351 | 352 | .header .container { 353 | display: flex; 354 | justify-content: space-between; 355 | align-items: center; 356 | gap: 10px; 357 | } 358 | 359 | .nav-open-btn, 360 | .nav-close-btn { 361 | color: var(--text-wild-blue-yonder); 362 | font-size: 3.5rem; 363 | } 364 | 365 | .navbar { 366 | position: absolute; 367 | top: 0; 368 | right: -340px; 369 | max-width: 340px; 370 | width: 100%; 371 | height: 100vh; 372 | background-color: var(--bg-oxford-blue-2); 373 | padding: 30px; 374 | z-index: 2; 375 | overflow-y: auto; 376 | visibility: hidden; 377 | transition: 0.25s var(--cubic-in); 378 | } 379 | 380 | .navbar.active { 381 | transform: translateX(-340px); 382 | visibility: visible; 383 | transition: 0.5s var(--cubic-out); 384 | } 385 | 386 | .navbar-top { 387 | display: flex; 388 | justify-content: space-between; 389 | align-items: center; 390 | padding-block-end: 15px; 391 | margin-block-end: 15px; 392 | border-block-end: 1px solid var(--border-prussian-blue); 393 | } 394 | 395 | .navbar-list { border-block-end: 1px solid var(--border-white-alpha-15); } 396 | 397 | .navbar-link { 398 | color: var(--text-alice-blue); 399 | font-weight: var(--weight-medium); 400 | padding-block: 10px; 401 | } 402 | 403 | .navbar-bottom { 404 | padding-block: 30px 20px; 405 | margin-block: 20px 25px; 406 | border-block: 1px solid var(--border-prussian-blue); 407 | } 408 | 409 | .navbar .profile-card { margin-block-end: 15px; } 410 | 411 | .navbar .profile-card .card-title { 412 | color: var(--text-columbia-blue); 413 | font-size: var(--fontSize-6); 414 | font-weight: var(--weight-semiBold); 415 | } 416 | 417 | .navbar .profile-card .card-subtitle { font-size: var(--fontSize-7); } 418 | 419 | .navbar .link-list { 420 | columns: 2; 421 | -webkit-columns: 2; 422 | } 423 | 424 | .navbar-bottom-link { 425 | color: var(--text-alice-blue); 426 | font-size: var(--fontSize-6); 427 | padding-block: 6px; 428 | } 429 | 430 | .copyright-text { 431 | color: var(--text-alice-blue); 432 | font-size: var(--fontSize-8); 433 | } 434 | 435 | 436 | 437 | 438 | 439 | /*-----------------------------------*\ 440 | #HERO 441 | \*-----------------------------------*/ 442 | 443 | .hero-bg { display: none; } 444 | 445 | .hero { padding-block-start: calc(var(--section-padding) + 160px); } 446 | 447 | .hero .container { 448 | display: grid; 449 | gap: 50px; 450 | } 451 | 452 | .hero-subtitle { 453 | font-size: var(--fontSize-6); 454 | font-weight: var(--weight-bold); 455 | } 456 | 457 | .hero .section-title { margin-block: 20px; } 458 | 459 | .hero .hero-text { margin-block-end: 40px; } 460 | 461 | .hero .input-wrapper:hover { box-shadow: var(--shadow-2); } 462 | 463 | .hero .input-wrapper { 464 | position: relative; 465 | padding: 10px; 466 | padding-inline-start: 20px; 467 | background-color: var(--bg-prussian-blue); 468 | border-radius: var(--radius-6); 469 | border: 1px solid var(--bg-carolina-blue); 470 | display: flex; 471 | justify-items: flex-end; 472 | transition: var(--transition-1); 473 | } 474 | 475 | .hero .input-field { padding-inline-end: 5px; } 476 | 477 | .hero-banner { position: relative; } 478 | 479 | .hero-banner .w-100 { 480 | max-width: max-content; 481 | margin-inline: auto; 482 | } 483 | 484 | .hero .shape { 485 | position: absolute; 486 | z-index: -1; 487 | 488 | animation: heroDecoAnim 3s linear infinite alternate; 489 | } 490 | 491 | @keyframes heroDecoAnim { 492 | 0% { transform: translateY(40px) rotate(0); } 493 | 100% { transform: translateY(0) rotate(0.4turn); } 494 | } 495 | 496 | .hero .shape-1 { 497 | top: 50px; 498 | right: 40px; 499 | } 500 | 501 | .hero .shape-2 { 502 | bottom: 20px; 503 | left: 24px; 504 | } 505 | 506 | 507 | 508 | 509 | 510 | /*-----------------------------------*\ 511 | #TOPICS 512 | \*-----------------------------------*/ 513 | 514 | .topic-card { 515 | padding: 24px; 516 | border-radius: var(--radius-8); 517 | } 518 | 519 | .topic-card .card-content { margin-block-end: 15px; } 520 | 521 | .topic-card .card-text { 522 | color: var(--text-wild-blue-yonder); 523 | font-size: var(--fontSize-6); 524 | margin-block: 15px 20px; 525 | } 526 | 527 | .btn-group { 528 | display: flex; 529 | align-items: center; 530 | gap: 10px; 531 | } 532 | 533 | .btn-icon { 534 | width: 32px; 535 | height: 32px; 536 | display: grid; 537 | place-items: center; 538 | background: var(--bg-prussian-blue); 539 | border-radius: var(--radius-circle); 540 | color: var(--white); 541 | } 542 | 543 | .btn-icon:is(:hover, :focus-visible) { background: var(--gradient-1); } 544 | 545 | .slider { 546 | --slider-items: 1; 547 | overflow: hidden; 548 | } 549 | 550 | .slider-list { 551 | position: relative; 552 | display: flex; 553 | align-items: center; 554 | gap: 20px; 555 | transition: transform var(--transition-2); 556 | } 557 | 558 | .slider-item { min-width: 100%; } 559 | 560 | .slider-card { position: relative; } 561 | 562 | .slider-card::before { 563 | content: ""; 564 | position: absolute; 565 | bottom: 0; 566 | left: 0; 567 | width: 100%; 568 | height: 50%; 569 | background-image: var(--gradient-3); 570 | border-radius: var(--radius-8); 571 | } 572 | 573 | .slider-list .slider-banner { border-radius: var(--radius-8); } 574 | 575 | .slider-content { 576 | position: absolute; 577 | bottom: 15px; 578 | left: 15px; 579 | } 580 | 581 | .slider-title { 582 | color: var(--text-columbia-blue); 583 | font-weight: var(--weight-bold); 584 | margin-block-end: 5px; 585 | transition: var(--transition-1); 586 | } 587 | 588 | .slider-card:is(:hover, :focus-visible) .slider-title { color: var(--text-carolina-blue); } 589 | 590 | .slider-subtitle { font-size: var(--fontSize-7); } 591 | 592 | 593 | 594 | 595 | 596 | /*-----------------------------------*\ 597 | #FEATURED 598 | \*-----------------------------------*/ 599 | 600 | .feature-bg { display: none; } 601 | 602 | .feature-list { 603 | display: flex; 604 | flex-wrap: wrap; 605 | gap: 30px; 606 | } 607 | 608 | .feature-card { 609 | padding: 20px; 610 | border-radius: var(--radius-16); 611 | transition: var(--transition-1); 612 | } 613 | 614 | .feature-card:is(:hover, :focus-within) { transform: translateY(-5px); } 615 | 616 | .feature-card .card-banner { border-radius: var(--radius-16); } 617 | 618 | .feature-card .card-wrapper { margin-block-start: 24px; } 619 | 620 | .feature .profile-card :is(.card-title, .card-subtitle) { color: var(--text-slate-gray); } 621 | 622 | .feature .profile-card .card-title { font-weight: var(--weight-bold); } 623 | 624 | .feature .profile-card .card-subtitle, 625 | .feature .card-wrapper .card-btn { font-size: var(--fontSize-6); } 626 | 627 | .feature-card .card-wrapper:last-child { 628 | font-size: var(--fontSize-4); 629 | margin-block-end: 0; 630 | } 631 | 632 | .feature .card-wrapper .card-btn { 633 | position: relative; 634 | color: var(--text-wild-blue-yonder); 635 | z-index: 1; 636 | } 637 | 638 | .feature .card-wrapper .card-btn::before { 639 | content: ""; 640 | position: absolute; 641 | top: -13px; 642 | left: -20px; 643 | width: 48px; 644 | height: 48px; 645 | background-color: var(--bg-oxford-blue-2); 646 | border-radius: var(--radius-circle); 647 | z-index: -1; 648 | } 649 | 650 | .feature .btn { 651 | margin-inline: auto; 652 | margin-block-start: 30px; 653 | } 654 | 655 | 656 | 657 | 658 | 659 | /*-----------------------------------*\ 660 | #POPULAR TAGS 661 | \*-----------------------------------*/ 662 | 663 | .tags .grid-list { grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); } 664 | 665 | .tag-btn { 666 | width: 100%; 667 | display: flex; 668 | align-items: center; 669 | gap: 8px; 670 | padding: 18px; 671 | border-radius: var(--radius-16); 672 | } 673 | 674 | .tag-btn:is(:hover, :focus-visible) { 675 | box-shadow: var(--shadow-2); 676 | background-image: linear-gradient(var(--bg-oxford-blue), var(--bg-oxford-blue)), var(--gradient-1); 677 | background-clip: padding-box, border-box; 678 | border-color: transparent; 679 | transform: translateY(-2px); 680 | transition: var(--transition-1); 681 | } 682 | 683 | .tag-btn img { 684 | width: 100%; 685 | max-width: 32px; 686 | } 687 | 688 | 689 | 690 | 691 | 692 | /*-----------------------------------*\ 693 | #RECENT POST 694 | \*-----------------------------------*/ 695 | 696 | .recent-post .container { 697 | display: grid; 698 | gap: 50px; 699 | } 700 | 701 | .recent-post-card { 702 | display: grid; 703 | gap: 30px; 704 | } 705 | 706 | .recent-post-card .card-banner { 707 | border-radius: var(--radius-16); 708 | transition: var(--transition-1); 709 | } 710 | 711 | .recent-post-card:is(:hover, :focus-within) .card-banner { 712 | transform: translateY(-2px); 713 | } 714 | 715 | .recent-post-card .card-text { 716 | color: var(--text-wild-blue-yonder); 717 | font-size: var(--fontSize-6); 718 | line-height: var(--lineHeight-1); 719 | } 720 | 721 | .recent-post-card .card-badge { 722 | background-color: var(--bg-prussian-blue); 723 | max-width: max-content; 724 | color: var(--text-white); 725 | font-size: var(--fontSize-8); 726 | font-weight: var(--weight-bold); 727 | padding: 4px 15px; 728 | border-radius: var(--radius-pill); 729 | transition: var(--transition-1); 730 | } 731 | 732 | .recent-post-card .card-badge:is(:hover, :focus-visible), 733 | .pagination-btn:is(:hover, :focus-visible) { 734 | transform: translateY(-2px); 735 | background-color: var(--bg-carolina-blue); 736 | } 737 | 738 | .recent-post-card .card-title { margin-block: 15px 20px; } 739 | 740 | .recent-post-card .card-tag { 741 | gap: 15px; 742 | color: var(--text-slate-gray); 743 | } 744 | 745 | .recent-post-card .card-wrapper ion-icon { 746 | font-size: 1.8rem; 747 | --ionicon-stroke-width: 40px; 748 | } 749 | 750 | .pagination-btn { 751 | background-color: var(--bg-prussian-blue); 752 | color: var(--text-white); 753 | font-weight: var(--weight-bold); 754 | line-height: 1; 755 | width: 35px; 756 | height: 35px; 757 | display: grid; 758 | place-items: center; 759 | border-radius: var(--radius-circle); 760 | transition: var(--transition-1); 761 | } 762 | 763 | .pagination { 764 | display: flex; 765 | justify-content: flex-start; 766 | align-items: center; 767 | gap: 5px; 768 | margin-block-start: 60px; 769 | } 770 | 771 | .aside-card { 772 | padding: 25px; 773 | border-radius: var(--radius-16); 774 | } 775 | 776 | .aside-title { margin-block-end: 40px; } 777 | 778 | .aside-title .span { position: relative; } 779 | 780 | .aside-title .span::after { 781 | content: ""; 782 | display: block; 783 | width: 96px; 784 | height: 3px; 785 | background-color: var(--bg-carolina-blue); 786 | margin-block-start: 10px; 787 | } 788 | 789 | .popular-card { 790 | display: flex; 791 | align-items: flex-start; 792 | gap: 10px; 793 | margin-block-start: 20px; 794 | } 795 | 796 | .popular-card .card-banner { 797 | width: 54px; 798 | flex-shrink: 0; 799 | border-radius: var(--radius-circle); 800 | } 801 | 802 | .popular-list > li:not(:last-child) .card-content { 803 | border-block-end: 1px solid var(--border-prussian-blue); 804 | } 805 | 806 | .popular-card .warpper { 807 | display: flex; 808 | flex-wrap: wrap; 809 | align-items: center; 810 | column-gap: 10px; 811 | font-size: var(--fontSize-6); 812 | color: var(--text-slate-gray); 813 | margin-block: 12px 20px; 814 | } 815 | 816 | .comment-list > li:not(:last-child) .comment-card { 817 | padding-block-end: 22px; 818 | border-block-end: 1px solid var(--border-prussian-blue); 819 | margin-block-end: 22px; 820 | } 821 | 822 | .comment-card .card-text { 823 | color: var(--text-wild-blue-yonder); 824 | font-size: var(--fontSize-6); 825 | line-height: var(--lineHeight-1); 826 | margin-block-end: 20px; 827 | } 828 | 829 | .comment-card .profile-card { 830 | color: var(--text-slate-gray); 831 | font-size: var(--fontSize-6); 832 | } 833 | 834 | .comment-card .card-date { font-size: var(--fontSize-7); } 835 | 836 | .insta-card .card-text { 837 | color: var(--text-slate-gray); 838 | font-weight: var(--weight-bold); 839 | margin-block: 5px 30px; 840 | } 841 | 842 | .insta-list { 843 | display: grid; 844 | grid-template-columns: repeat(3, 1fr); 845 | gap: 24px; 846 | } 847 | 848 | .insta-post { border-radius: var(--radius-8); } 849 | 850 | 851 | 852 | 853 | 854 | /*-----------------------------------*\ 855 | #FOOTER 856 | \*-----------------------------------*/ 857 | 858 | .footer { 859 | padding-inline: 20px; 860 | border-radius: var(--radius-48); 861 | color: var(--text-wild-blue-yonder); 862 | margin-block-end: 24px; 863 | } 864 | 865 | .footer-top { 866 | display: grid; 867 | gap: 20px; 868 | } 869 | 870 | .footer-brand .footer-text { font-size: var(--fontSize-6); } 871 | 872 | .footer-text:not(.address) { margin-block: 20px; } 873 | 874 | .footer-brand .footer-list-title { margin-block-end: 2px; } 875 | 876 | .footer-list-title { 877 | color: var(--text-columbia-blue); 878 | font-size: var(--fontSize-3); 879 | margin-block-end: 30px; 880 | } 881 | 882 | .footer-list ul { columns: 2; } 883 | 884 | .footer-link { margin-block-end: 12px; } 885 | 886 | .footer .input-wrapper { 887 | position: relative; 888 | margin-block-end: 24px; 889 | } 890 | 891 | .footer .input-field { 892 | padding: 12px; 893 | padding-inline-start: 20px; 894 | border-block-end: 1px solid var(--text-wild-blue-yonder); 895 | font-size: var(--fontSize-6); 896 | } 897 | 898 | .footer .input-field::-webkit-input-placeholder { 899 | color: inherit; 900 | opacity: 0.5; 901 | } 902 | 903 | .footer .input-wrapper ion-icon { 904 | position: absolute; 905 | top: 50%; 906 | left: 0; 907 | transform: translateY(-50%); 908 | --ionicon-stroke-width: 40px; 909 | } 910 | 911 | .footer-bottom { 912 | border-block-start: 1px solid var(--border-prussian-blue); 913 | padding-block: 50px; 914 | } 915 | 916 | .copyright { 917 | text-align: center; 918 | margin-block-end: 15px; 919 | } 920 | 921 | .copyright-link { 922 | display: inline-block; 923 | color: var(--text-carolina-blue); 924 | font-style: italic; 925 | } 926 | 927 | .social-list { 928 | display: flex; 929 | flex-wrap: wrap; 930 | justify-content: center; 931 | gap: 15px; 932 | } 933 | 934 | .social-link { 935 | display: flex; 936 | align-items: center; 937 | gap: 8px; 938 | transition: var(--transition-1); 939 | } 940 | 941 | .social-link:is(:hover, :focus-visible) { 942 | color: var(--text-carolina-blue); 943 | transform: translateY(-2px); 944 | } 945 | 946 | 947 | 948 | 949 | 950 | /*-----------------------------------*\ 951 | #BACK TO TOP 952 | \*-----------------------------------*/ 953 | 954 | .back-top-btn { 955 | position: fixed; 956 | bottom: 20px; 957 | right: 20px; 958 | width: 50px; 959 | height: 50px; 960 | background-color: var(--bg-prussian-blue); 961 | color: var(--white); 962 | display: grid; 963 | place-items: center; 964 | border-radius: var(--radius-circle); 965 | border: 3px solid var(--bg-carolina-blue); 966 | transition: var(--transition-1); 967 | visibility: hidden; 968 | opacity: 0; 969 | z-index: 4; 970 | } 971 | 972 | .back-top-btn:is(:hover, :focus-visible) { box-shadow: var(--shadow-2); } 973 | 974 | .back-top-btn.active { 975 | visibility: visible; 976 | opacity: 1; 977 | transform: translateY(-10px); 978 | } 979 | 980 | 981 | 982 | 983 | 984 | /*-----------------------------------*\ 985 | #MEDIA QUERIES 986 | \*-----------------------------------*/ 987 | 988 | /** 989 | * responsive for large than 575px screen 990 | */ 991 | 992 | @media (min-width: 575px) { 993 | 994 | /** 995 | * CUSTOM PROPERTY 996 | */ 997 | 998 | :root { 999 | 1000 | /** 1001 | * typography 1002 | */ 1003 | 1004 | /* font size */ 1005 | --fontSize-1: 4.4rem; 1006 | --fontSize-2: 3.5rem; 1007 | 1008 | /** 1009 | * spacing 1010 | */ 1011 | 1012 | --section-padding: 100px; 1013 | 1014 | } 1015 | 1016 | 1017 | 1018 | /** 1019 | * REUSED STYLE 1020 | */ 1021 | 1022 | .container { 1023 | max-width: 540px; 1024 | width: 100%; 1025 | margin-inline: auto; 1026 | } 1027 | 1028 | .headline-3 { --fontSize-2: 2.4rem; } 1029 | 1030 | 1031 | 1032 | /** 1033 | * HEADER 1034 | */ 1035 | 1036 | .header .btn { 1037 | display: block; 1038 | margin-inline-start: auto; 1039 | } 1040 | 1041 | .header.active { padding-block: 20px; } 1042 | 1043 | 1044 | 1045 | /** 1046 | * HERO 1047 | */ 1048 | 1049 | .hero { position: relative; } 1050 | 1051 | .hero .input-wrapper { max-width: 390px; } 1052 | 1053 | .hero-bg { 1054 | display: block; 1055 | position: absolute; 1056 | pointer-events: none; 1057 | } 1058 | 1059 | .hero-bg-1 { 1060 | top: 80px; 1061 | left: 0; 1062 | } 1063 | 1064 | .hero-bg-2 { 1065 | bottom: -200px; 1066 | left: -20px; 1067 | } 1068 | 1069 | .shape-2 { left: 60px; } 1070 | 1071 | 1072 | 1073 | /** 1074 | * TOPICS 1075 | */ 1076 | 1077 | .topics .section-title { font-size: 2rem; } 1078 | 1079 | .slider { --slider-items: 3; } 1080 | 1081 | .slider-item { min-width: calc(33.33% - 13.33px); } 1082 | 1083 | 1084 | 1085 | /** 1086 | * FEATURE 1087 | */ 1088 | 1089 | .feature { position: relative; } 1090 | 1091 | .feature-bg { 1092 | display: block; 1093 | position: absolute; 1094 | top: -100px; 1095 | right: 0; 1096 | pointer-events: none; 1097 | } 1098 | 1099 | 1100 | 1101 | /** 1102 | * RECENT POST 1103 | */ 1104 | 1105 | .recent-post-card { 1106 | grid-template-columns: 0.5fr 1fr; 1107 | gap: 20px; 1108 | } 1109 | 1110 | .pagination-btn { 1111 | width: 42px; 1112 | height: 42px; 1113 | } 1114 | 1115 | 1116 | 1117 | /** 1118 | * ASIDE 1119 | */ 1120 | 1121 | .aside-title { --fontSize-2: 2rem; } 1122 | 1123 | } 1124 | 1125 | 1126 | 1127 | 1128 | 1129 | /** 1130 | * responsive for large than 768px screen 1131 | */ 1132 | 1133 | @media (min-width: 768px) { 1134 | 1135 | /** 1136 | * CUSTOM PROPERTY 1137 | */ 1138 | 1139 | :root { 1140 | 1141 | /** 1142 | * typography 1143 | */ 1144 | 1145 | /* font size */ 1146 | --fontSize-1: 6.4rem; 1147 | --fontSize-2: 4.5rem; 1148 | 1149 | } 1150 | 1151 | 1152 | 1153 | /** 1154 | * REUSED STYLE 1155 | */ 1156 | 1157 | .container { max-width: 720px; } 1158 | 1159 | 1160 | 1161 | /** 1162 | * RECENT POST 1163 | */ 1164 | 1165 | .recent-post-card { grid-template-columns: 0.7fr 1fr; } 1166 | 1167 | } 1168 | 1169 | 1170 | 1171 | 1172 | 1173 | /** 1174 | * responsive for large than 992px screen 1175 | */ 1176 | 1177 | @media (min-width: 992px) { 1178 | 1179 | /** 1180 | * REUSED STYLE 1181 | */ 1182 | 1183 | .container { max-width: 930px; } 1184 | 1185 | 1186 | 1187 | /** 1188 | * HERO 1189 | */ 1190 | 1191 | .hero { padding-block-start: calc(var(--section-padding) + 80px); } 1192 | 1193 | .hero .container { 1194 | grid-template-columns: 1fr 1fr; 1195 | align-items: center; 1196 | } 1197 | 1198 | 1199 | 1200 | /** 1201 | * TOPICS 1202 | */ 1203 | 1204 | .topic-card { 1205 | display: grid; 1206 | grid-template-columns: 0.3fr 1fr; 1207 | align-items: center; 1208 | gap: 20px; 1209 | } 1210 | 1211 | 1212 | 1213 | /** 1214 | * FEATURE 1215 | */ 1216 | 1217 | .feature-list li:nth-child(-n+2) { width: calc(50% - 15px); } 1218 | 1219 | .feature-list li:nth-child(n+3) { width: calc(33.33% - 20px); } 1220 | 1221 | .feature-list li:nth-child(n+3) .headline-3 { --fontSize-2: 2rem; } 1222 | 1223 | 1224 | 1225 | /** 1226 | * TAGS 1227 | */ 1228 | 1229 | .tags .grid-list { grid-template-columns: repeat(4, 1fr); } 1230 | 1231 | 1232 | 1233 | /** 1234 | * RECENT POST 1235 | */ 1236 | 1237 | .recent-post .container { 1238 | grid-template-columns: 1fr 0.6fr; 1239 | align-items: flex-start; 1240 | } 1241 | 1242 | 1243 | 1244 | /** 1245 | * FOOTER 1246 | */ 1247 | 1248 | .footer-top { grid-template-columns: repeat(3, 1fr); } 1249 | 1250 | .footer-bottom { 1251 | display: grid; 1252 | grid-template-columns: 1fr 1fr; 1253 | } 1254 | 1255 | .copyright { margin-block-end: 0; } 1256 | 1257 | } 1258 | 1259 | 1260 | 1261 | 1262 | 1263 | /** 1264 | * responsive for large than 1200px screen 1265 | */ 1266 | 1267 | @media (min-width: 1200px) { 1268 | 1269 | /** 1270 | * REUSED STYLE 1271 | */ 1272 | 1273 | .container { max-width: 1140px; } 1274 | 1275 | body.nav-active { overflow-y: overlay; } 1276 | 1277 | 1278 | 1279 | /** 1280 | * HEADER 1281 | */ 1282 | 1283 | .nav-open-btn, 1284 | .navbar-top, 1285 | .navbar-bottom, 1286 | .copyright-text { display: none; } 1287 | 1288 | .navbar, 1289 | .navbar.active { 1290 | all: unset; 1291 | display: block; 1292 | } 1293 | 1294 | .navbar-list { 1295 | border-block-end: none; 1296 | display: flex; 1297 | gap: 40px; 1298 | margin-inline: auto; 1299 | } 1300 | 1301 | .header .btn { margin-inline-start: 0; } 1302 | 1303 | .navbar-link { 1304 | color: var(--text-wild-blue-yonder); 1305 | font-weight: unset; 1306 | } 1307 | 1308 | .navbar-link:is(:hover, :focus-visible) { 1309 | color: var(--text-carolina-blue); 1310 | transform: translateX(0); 1311 | } 1312 | 1313 | 1314 | 1315 | /** 1316 | * HERO 1317 | */ 1318 | 1319 | .hero .container { max-width: 1050px; } 1320 | 1321 | 1322 | 1323 | /** 1324 | * TAGS 1325 | */ 1326 | 1327 | .tags .grid-list { grid-template-columns: repeat(6, 1fr); } 1328 | 1329 | 1330 | 1331 | /** 1332 | * FOOTER 1333 | */ 1334 | 1335 | .footer-top { 1336 | gap: 40px; 1337 | padding-inline: 120px; 1338 | } 1339 | 1340 | } -------------------------------------------------------------------------------- /assets/images/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/Thumbs.db -------------------------------------------------------------------------------- /assets/images/author-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/author-1.png -------------------------------------------------------------------------------- /assets/images/author-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/author-2.png -------------------------------------------------------------------------------- /assets/images/author-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/author-3.png -------------------------------------------------------------------------------- /assets/images/author-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/author-4.png -------------------------------------------------------------------------------- /assets/images/author-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/author-5.png -------------------------------------------------------------------------------- /assets/images/author-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/author-6.png -------------------------------------------------------------------------------- /assets/images/author-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/author-7.png -------------------------------------------------------------------------------- /assets/images/author-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/author-8.png -------------------------------------------------------------------------------- /assets/images/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /assets/images/featured-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/featured-1.png -------------------------------------------------------------------------------- /assets/images/featured-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/featured-2.png -------------------------------------------------------------------------------- /assets/images/featured-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/featured-3.png -------------------------------------------------------------------------------- /assets/images/featured-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/featured-4.png -------------------------------------------------------------------------------- /assets/images/featured-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/featured-5.png -------------------------------------------------------------------------------- /assets/images/hero-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/hero-banner.png -------------------------------------------------------------------------------- /assets/images/insta-post-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/insta-post-1.png -------------------------------------------------------------------------------- /assets/images/insta-post-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/insta-post-2.png -------------------------------------------------------------------------------- /assets/images/insta-post-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/insta-post-3.png -------------------------------------------------------------------------------- /assets/images/insta-post-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/insta-post-4.png -------------------------------------------------------------------------------- /assets/images/insta-post-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/insta-post-5.png -------------------------------------------------------------------------------- /assets/images/insta-post-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/insta-post-6.png -------------------------------------------------------------------------------- /assets/images/insta-post-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/insta-post-7.png -------------------------------------------------------------------------------- /assets/images/insta-post-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/insta-post-8.png -------------------------------------------------------------------------------- /assets/images/insta-post-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/insta-post-9.png -------------------------------------------------------------------------------- /assets/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/images/pattern-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/images/pattern-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/images/pattern-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/images/pattern-4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/images/popular-post-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/popular-post-1.jpg -------------------------------------------------------------------------------- /assets/images/popular-post-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/popular-post-2.jpg -------------------------------------------------------------------------------- /assets/images/popular-post-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/popular-post-3.jpg -------------------------------------------------------------------------------- /assets/images/popular-post-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/popular-post-4.jpg -------------------------------------------------------------------------------- /assets/images/recent-post-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/recent-post-1.jpg -------------------------------------------------------------------------------- /assets/images/recent-post-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/recent-post-2.jpg -------------------------------------------------------------------------------- /assets/images/recent-post-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/recent-post-3.jpg -------------------------------------------------------------------------------- /assets/images/recent-post-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/recent-post-4.jpg -------------------------------------------------------------------------------- /assets/images/recent-post-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/recent-post-5.jpg -------------------------------------------------------------------------------- /assets/images/shadow-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /assets/images/shadow-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /assets/images/shadow-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /assets/images/tag1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/tag1.png -------------------------------------------------------------------------------- /assets/images/tag10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/tag10.png -------------------------------------------------------------------------------- /assets/images/tag11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/tag11.png -------------------------------------------------------------------------------- /assets/images/tag12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/tag12.png -------------------------------------------------------------------------------- /assets/images/tag2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/tag2.png -------------------------------------------------------------------------------- /assets/images/tag3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/tag3.png -------------------------------------------------------------------------------- /assets/images/tag4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/tag4.png -------------------------------------------------------------------------------- /assets/images/tag5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/tag5.png -------------------------------------------------------------------------------- /assets/images/tag6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/tag6.png -------------------------------------------------------------------------------- /assets/images/tag7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/tag7.png -------------------------------------------------------------------------------- /assets/images/tag8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/tag8.png -------------------------------------------------------------------------------- /assets/images/tag9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/tag9.png -------------------------------------------------------------------------------- /assets/images/topic-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/topic-1.png -------------------------------------------------------------------------------- /assets/images/topic-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/topic-2.png -------------------------------------------------------------------------------- /assets/images/topic-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/topic-3.png -------------------------------------------------------------------------------- /assets/images/topic-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/topic-4.png -------------------------------------------------------------------------------- /assets/images/topic-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/assets/images/topic-5.png -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | 4 | 5 | /** 6 | * Add event listener on multiple elements 7 | */ 8 | 9 | const addEventOnElements = function (elements, eventType, callback) { 10 | for (let i = 0, len = elements.length; i < len; i++) { 11 | elements[i].addEventListener(eventType, callback); 12 | } 13 | } 14 | 15 | 16 | 17 | /** 18 | * MOBILE NAVBAR TOGGLER 19 | */ 20 | 21 | const navbar = document.querySelector("[data-navbar]"); 22 | const navTogglers = document.querySelectorAll("[data-nav-toggler]"); 23 | 24 | const toggleNav = () => { 25 | navbar.classList.toggle("active"); 26 | document.body.classList.toggle("nav-active"); 27 | } 28 | 29 | addEventOnElements(navTogglers, "click", toggleNav); 30 | 31 | 32 | 33 | /** 34 | * HEADER ANIMATION 35 | * When scrolled donw to 100px header will be active 36 | */ 37 | 38 | const header = document.querySelector("[data-header]"); 39 | const backTopBtn = document.querySelector("[data-back-top-btn]"); 40 | 41 | window.addEventListener("scroll", () => { 42 | if (window.scrollY > 100) { 43 | header.classList.add("active"); 44 | backTopBtn.classList.add("active"); 45 | } else { 46 | header.classList.remove("active"); 47 | backTopBtn.classList.remove("active"); 48 | } 49 | }); 50 | 51 | 52 | 53 | /** 54 | * SLIDER 55 | */ 56 | 57 | const slider = document.querySelector("[data-slider]"); 58 | const sliderContainer = document.querySelector("[data-slider-container]"); 59 | const sliderPrevBtn = document.querySelector("[data-slider-prev]"); 60 | const sliderNextBtn = document.querySelector("[data-slider-next]"); 61 | 62 | let totalSliderVisibleItems = Number(getComputedStyle(slider).getPropertyValue("--slider-items")); 63 | let totalSlidableItems = sliderContainer.childElementCount - totalSliderVisibleItems; 64 | 65 | let currentSlidePos = 0; 66 | 67 | const moveSliderItem = function () { 68 | sliderContainer.style.transform = `translateX(-${sliderContainer.children[currentSlidePos].offsetLeft}px)`; 69 | } 70 | 71 | /** 72 | * NEXT SLIDE 73 | */ 74 | 75 | const slideNext = function () { 76 | const slideEnd = currentSlidePos >= totalSlidableItems; 77 | 78 | if (slideEnd) { 79 | currentSlidePos = 0; 80 | } else { 81 | currentSlidePos++; 82 | } 83 | 84 | moveSliderItem(); 85 | } 86 | 87 | sliderNextBtn.addEventListener("click", slideNext); 88 | 89 | /** 90 | * PREVIOUS SLIDE 91 | */ 92 | 93 | const slidePrev = function () { 94 | if (currentSlidePos <= 0) { 95 | currentSlidePos = totalSlidableItems; 96 | } else { 97 | currentSlidePos--; 98 | } 99 | 100 | moveSliderItem(); 101 | } 102 | 103 | sliderPrevBtn.addEventListener("click", slidePrev); 104 | 105 | /** 106 | * RESPONSIVE 107 | */ 108 | window.addEventListener("resize", function () { 109 | totalSliderVisibleItems = Number(getComputedStyle(slider).getPropertyValue("--slider-items")); 110 | totalSlidableItems = sliderContainer.childElementCount - totalSliderVisibleItems; 111 | 112 | moveSliderItem(); 113 | }); -------------------------------------------------------------------------------- /favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 12 | Wren - Perosonal Blog Website 13 | 14 | 15 | 16 | 19 | 20 | 21 | 24 | 25 | 26 | 28 | 29 | 32 | 33 | 34 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 48 | 49 |
50 |
51 | 52 | 55 | 56 | 142 | 143 | Subscribe 144 | 145 | 148 | 149 |
150 |
151 | 152 | 153 | 154 | 155 | 156 |
157 |
158 | 159 | 162 | 163 |
164 |
165 | 166 |
167 | 168 |

Hello Everyone!

169 | 170 |

171 | I’m Wren Clark 172 |

173 | 174 |

175 | I use animation as a third dimension by which to simplify experiences and kuiding thro each and every 176 | interaction. I’m not adding motion just to spruce things up, but doing it in ways that. 177 |

178 | 179 |
180 | 181 | 183 | 184 | 189 | 190 |
191 | 192 |
193 | 194 |
195 | 196 | Wren Clark 197 | 198 | shape 199 | 200 | shape 201 | 202 |
203 | 204 | 205 | 206 | 207 | 208 |
209 |
210 | 211 | 212 | 213 | 214 | 215 | 218 | 219 |
220 |
221 | 222 |
223 | 224 |
225 | 226 |

227 | Hot topics 228 |

229 | 230 |

231 | Don't miss out on the latest news about Travel tips, Hotels review, Food guide... 232 |

233 | 234 |
235 | 238 | 239 | 242 |
243 | 244 |
245 | 246 |
247 | 335 |
336 | 337 |
338 | 339 |
340 |
341 | 342 | 343 | 344 | 345 | 346 | 349 | 350 | 636 | 637 | 638 | 639 | 640 | 641 | 644 | 645 |
646 |
647 | 648 |

649 | Popular Tags 650 |

651 | 652 |

653 | Most searched keywords 654 |

655 | 656 |
    657 | 658 |
  • 659 | 664 |
    • 665 | 666 |
  • 667 | 672 |
    • 673 | 674 |
  • 675 | 680 |
    • 681 | 682 |
  • 683 | 688 |
    • 689 | 690 |
  • 691 | 696 |
    • 697 | 698 |
  • 699 | 704 |
    • 705 | 706 |
  • 707 | 712 |
    • 713 | 714 |
  • 715 | 720 |
    • 721 | 722 |
  • 723 | 728 |
    • 729 | 730 |
  • 731 | 736 |
    • 737 | 738 |
  • 739 | 744 |
    • 745 | 746 |
  • 747 | 752 |
    • 753 | 754 |
755 | 756 |
757 |
758 | 759 | 760 | 761 | 762 | 763 | 766 | 767 |
768 |
769 | 770 |
771 | 772 |

773 | Recent posts 774 |

775 | 776 |

777 | Don't miss the latest trends 778 |

779 | 780 |
    781 | 782 |
  • 783 |
    784 | 785 |
    786 | Helpful Tips for Working from Home as a Freelancer 788 |
    789 | 790 |
    791 | 792 | Working Tips 793 | 794 |

    795 | Helpful Tips for Working from Home as a Freelancer 796 |

    797 | 798 |

    799 | Gosh jaguar ostrich quail one excited dear hello and bound and the and bland moral misheard 800 | roadrunner flapped lynx far that and jeepers giggled far and far 801 |

    802 | 803 |
    804 |
    805 | # Travel 806 | 807 | # Lifestyle 808 |
    809 | 810 |
    811 | 812 | 813 | 3 mins read 814 |
    815 |
    816 | 817 |
    818 | 819 |
    820 |
    • 821 | 822 |
  • 823 |
    824 | 825 |
    826 | Helpful Tips for Working from Home as a Freelancer 828 |
    829 | 830 |
    831 | 832 | Working Tips 833 | 834 |

    835 | Helpful Tips for Working from Home as a Freelancer 836 |

    837 | 838 |

    839 | Gosh jaguar ostrich quail one excited dear hello and bound and the and bland moral misheard 840 | roadrunner flapped lynx far that and jeepers giggled far and far 841 |

    842 | 843 |
    844 |
    845 | # Travel 846 | 847 | # Lifestyle 848 |
    849 | 850 |
    851 | 852 | 853 | 3 mins read 854 |
    855 |
    856 | 857 |
    858 | 859 |
    860 |
    • 861 | 862 |
  • 863 |
    864 | 865 |
    866 | Helpful Tips for Working from Home as a Freelancer 868 |
    869 | 870 |
    871 | 872 | Working Tips 873 | 874 |

    875 | Helpful Tips for Working from Home as a Freelancer 876 |

    877 | 878 |

    879 | Gosh jaguar ostrich quail one excited dear hello and bound and the and bland moral misheard 880 | roadrunner flapped lynx far that and jeepers giggled far and far 881 |

    882 | 883 |
    884 |
    885 | # Travel 886 | 887 | # Lifestyle 888 |
    889 | 890 |
    891 | 892 | 893 | 3 mins read 894 |
    895 |
    896 | 897 |
    898 | 899 |
    900 |
    • 901 | 902 |
  • 903 |
    904 | 905 |
    906 | Helpful Tips for Working from Home as a Freelancer 908 |
    909 | 910 |
    911 | 912 | Working Tips 913 | 914 |

    915 | Helpful Tips for Working from Home as a Freelancer 916 |

    917 | 918 |

    919 | Gosh jaguar ostrich quail one excited dear hello and bound and the and bland moral misheard 920 | roadrunner flapped lynx far that and jeepers giggled far and far 921 |

    922 | 923 |
    924 |
    925 | # Travel 926 | 927 | # Lifestyle 928 |
    929 | 930 |
    931 | 932 | 933 | 3 mins read 934 |
    935 |
    936 | 937 |
    938 | 939 |
    940 |
    • 941 | 942 |
  • 943 |
    944 | 945 |
    946 | Helpful Tips for Working from Home as a Freelancer 948 |
    949 | 950 |
    951 | 952 | Working Tips 953 | 954 |

    955 | Helpful Tips for Working from Home as a Freelancer 956 |

    957 | 958 |

    959 | Gosh jaguar ostrich quail one excited dear hello and bound and the and bland moral misheard 960 | roadrunner flapped lynx far that and jeepers giggled far and far 961 |

    962 | 963 |
    964 |
    965 | # Travel 966 | 967 | # Lifestyle 968 |
    969 | 970 |
    971 | 972 | 973 | 3 mins read 974 |
    975 |
    976 | 977 |
    978 | 979 |
    980 |
    • 981 | 982 |
983 | 984 | 1000 | 1001 |
1002 | 1003 |
1004 | 1005 |
1006 | 1007 |

1008 | Popular Posts 1009 |

1010 | 1011 |
    1012 | 1013 |
  • 1014 |
    1015 | 1016 |
    1017 | Creating is a privilege but it’s also a gift 1019 |
    1020 | 1021 |
    1022 | 1023 |

    1024 | Creating is a privilege but it’s also a gift 1025 |

    1026 | 1027 |
    1028 |

    15 mins read

    1029 | 1030 | 1031 |
    1032 | 1033 |
    1034 | 1035 |
    1036 |
    • 1037 | 1038 |
  • 1039 |
    1040 | 1041 |
    1042 | Being unique is better than being perfect 1044 |
    1045 | 1046 |
    1047 | 1048 |

    1049 | Being unique is better than being perfect 1050 |

    1051 | 1052 |
    1053 |

    15 mins read

    1054 | 1055 | 1056 |
    1057 | 1058 |
    1059 | 1060 |
    1061 |
    • 1062 | 1063 |
  • 1064 |
    1065 | 1066 |
    1067 | Every day, in every city and town across the country 1069 |
    1070 | 1071 |
    1072 | 1073 |

    1074 | Every day, in every city and town across the country 1075 |

    1076 | 1077 |
    1078 |

    15 mins read

    1079 | 1080 | 1081 |
    1082 | 1083 |
    1084 | 1085 |
    1086 |
    • 1087 | 1088 |
  • 1089 |
    1090 | 1091 |
    1092 | Your voice, your mind, your story, your vision 1094 |
    1095 | 1096 |
    1097 | 1098 |

    1099 | Your voice, your mind, your story, your vision 1100 |

    1101 | 1102 |
    1103 |

    15 mins read

    1104 | 1105 | 1106 |
    1107 | 1108 |
    1109 | 1110 |
    1111 |
    • 1112 | 1113 |
  • 1114 |
    1115 | 1116 |
    1117 | Being unique is better than being perfect 1119 |
    1120 | 1121 |
    1122 | 1123 |

    1124 | Being unique is better than being perfect 1125 |

    1126 | 1127 |
    1128 |

    15 mins read

    1129 | 1130 | 1131 |
    1132 | 1133 |
    1134 | 1135 |
    1136 |
    • 1137 | 1138 |
1139 | 1140 |
1141 | 1142 |
1143 | 1144 |

1145 | Last Comment 1146 |

1147 | 1148 |
    1149 | 1150 |
  • 1151 |
    1152 | 1153 |
    1154 | “ Gosh jaguar ostrich quail one excited dear hello and bound and the and bland moral misheard 1155 | roadrunner “ 1156 |
    1157 | 1158 |
    1159 |
    1160 | Jane Cooper 1161 |
    1162 | 1163 |
    1164 |

    Jane Cooper

    1165 | 1166 | 1167 |
    1168 |
    1169 | 1170 |
    1171 |
    • 1172 | 1173 |
  • 1174 |
    1175 | 1176 |
    1177 | “ Gosh jaguar ostrich quail one excited dear hello and bound and the and bland moral misheard 1178 | roadrunner “ 1179 |
    1180 | 1181 |
    1182 |
    1183 | Katen Doe 1184 |
    1185 | 1186 |
    1187 |

    Katen Doe

    1188 | 1189 | 1190 |
    1191 |
    1192 | 1193 |
    1194 |
    • 1195 | 1196 |
  • 1197 |
    1198 | 1199 |
    1200 | “ Gosh jaguar ostrich quail one excited dear hello and bound and the and bland moral misheard 1201 | roadrunner “ 1202 |
    1203 | 1204 |
    1205 |
    1206 | Barbara Cartland 1208 |
    1209 | 1210 |
    1211 |

    Barbara Cartland

    1212 | 1213 | 1214 |
    1215 |
    1216 | 1217 |
    1218 |
    • 1219 | 1220 |
1221 | 1222 |
1223 | 1224 |
1225 | 1226 | 1229 | 1230 |

1231 | Follow us on instagram 1232 |

1233 | 1234 | 1300 | 1301 |
1302 | 1303 |
1304 | 1305 |
1306 |
1307 | 1308 |
1309 |
1310 | 1311 | 1312 | 1313 | 1314 | 1315 | 1318 | 1319 | 1475 | 1476 | 1477 | 1478 | 1479 | 1480 | 1483 | 1484 | 1485 | 1486 | 1487 | 1488 | 1489 | 1490 | 1491 | 1492 | 1495 | 1496 | 1497 | 1500 | 1501 | 1502 | 1503 | 1504 | 1505 | -------------------------------------------------------------------------------- /index.txt: -------------------------------------------------------------------------------- 1 | Wren - Perosonal Blog Website 2 | 3 | This is a blog html template made by codewithsadee 4 | 5 | 6 | 7 | #---------- HEADER ----------# 8 | 9 | alt = Wren logo 10 | 11 | alt = Wren logo 12 | 13 | aria-label = close menu 14 | 15 | 16 | Home 17 | Topics 18 | Featured Post 19 | Recent Post 20 | Contact 21 | 22 | alt = Steven 23 | Hello Steven ! 24 | You have 3 new messages 25 | 26 | Profile 27 | Articles Saved 28 | Add New Post 29 | 30 | My Likes 31 | Account Setting 32 | Sign Out 33 | 34 | Copyright 2022 © Wren - Personal Blog Template. 35 | Developed by codewithsadee 36 | 37 | Subscribe 38 | 39 | aria-label = open menu 40 | 41 | 42 | 43 | 44 | #---------- HERO ----------# 45 | 46 | Hello Everyone! 47 | 48 | I’m Wren Clark 49 | 50 | I use animation as a third dimension by which to simplify experiences and kuiding thro each and every interaction. I’m not adding motion just to spruce things up, but doing it in ways that. 51 | 52 | placeholder = Type your email address 53 | 54 | Subscribe 55 | 56 | 57 | alt = Wren Clark 58 | 59 | alt = shape 60 | 61 | 62 | 63 | #---------- TOPICS ----------# 64 | 65 | Hot topics 66 | 67 | Don't miss out on the latest news about Travel tips, Hotels review, Food guide... 68 | 69 | aria-label = previous 70 | 71 | 72 | aria-label = next 73 | 74 | 75 | Sport 76 | 38 Articles 77 | 78 | Travel 79 | 63 Articles 80 | 81 | Design 82 | 78 Articles 83 | 84 | Movie 85 | 125 Articles 86 | 87 | Lifestyle 88 | 78 Articles 89 | 90 | 91 | 92 | #---------- FEATURED POST ----------# 93 | 94 | Editor's picked 95 | Featured and highly rated articles 96 | 97 | alt = Self-observation is the first step of inner unfolding 98 | 99 | #Travel #Lifestyle 100 | 101 | 102 | 3 mins read 103 | 104 | Self-observation is the first step of inner unfolding 105 | 106 | alt = Joseph 107 | Joseph 108 | 25 Nov 2022 109 | 110 | Read more 111 | 112 | #Design #Movie 113 | 6 mins read 114 | 115 | Show More Posts 116 | 117 | 118 | 119 | 120 | 121 | #---------- POPULAR TAGS ----------# 122 | 123 | Popular Tags 124 | 125 | Most searched keywords 126 | 127 | Travel 128 | 129 | Culture 130 | 131 | Lifestyle 132 | 133 | Fashion 134 | 135 | Food 136 | 137 | Space 138 | 139 | Animal 140 | 141 | Minimal 142 | 143 | Interior 144 | 145 | Plant 146 | 147 | Nature 148 | 149 | Business 150 | 151 | 152 | 153 | #---------- RECENT POST ----------# 154 | 155 | Recent posts 156 | 157 | Don't miss the latest trends 158 | 159 | alt = Helpful Tips for Working from Home as a Freelancer 160 | 161 | Working Tips 162 | 163 | Helpful Tips for Working from Home as a Freelancer 164 | 165 | Gosh jaguar ostrich quail one excited dear hello and bound and the and bland moral misheard roadrunner flapped lynx far that and jeepers giggled far and far 166 | 167 | # Travel 168 | # Lifestyle 169 | 170 | 171 | 3 mins read 172 | 173 | aria-label = previous page 174 | 175 | 176 | 1 177 | 2 178 | 3 179 | 180 | aria-label = more page 181 | ... 182 | 183 | aria-label = next page 184 | 185 | 186 | Popular Posts 187 | 188 | Creating is a privilege but it’s also a gift 189 | 190 | 15 mins read 191 | 192 | 15 April 2022 193 | 194 | Being unique is better than being perfect 195 | 196 | Every day, in every city and town across the country 197 | 198 | Your voice, your mind, your story, your vision 199 | 200 | Last Comment 201 | 202 | “ Gosh jaguar ostrich quail one excited dear hello and bound and the and bland moral misheard roadrunner “ 203 | 204 | Jane Cooper 205 | 15 April 2022 206 | 207 | Katen Doe 208 | 209 | Barbara Cartland 210 | 211 | Wren logo 212 | 213 | Follow us on instagram 214 | 215 | alt = insta post 216 | 217 | 218 | 219 | #---------- FOOTER ----------# 220 | 221 | Wren logo 222 | 223 | When an unknown prnoto sans took a galley and scrambled it to make specimen book not only five When an unknown prnoto sans took a galley and scrambled it to five centurie. 224 | 225 | Address 226 | 227 | 123 Main Street 228 | New York, NY 10001 229 | 230 | Categories 231 | 232 | Action 233 | Business 234 | Adventure 235 | Canada 236 | America 237 | Curiosity 238 | Animal 239 | Dental 240 | Biology 241 | Design 242 | Breakfast 243 | Dessert 244 | 245 | Newsletter 246 | 247 | Sign up to be first to receive the latest stories inspiring us, case studies, and industry news. 248 | 249 | placeholder = Your name 250 | 251 | 252 | placeholder = Emaill address 253 | 254 | 255 | Subscribe 256 | 257 | 258 | © Developed by codewithsadee. 259 | 260 | 261 | Twitter 262 | 263 | 264 | LinkedIn 265 | 266 | 267 | Instagram 268 | 269 | 270 | 271 | #---------- BACK TO TOP ----------# 272 | 273 | aria-label = back to top 274 | 275 | -------------------------------------------------------------------------------- /readme-images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/wren/b3bc8e117c0bb0ef6fbc51860eda24c23423beee/readme-images/desktop.png -------------------------------------------------------------------------------- /style-guide.md: -------------------------------------------------------------------------------- 1 | # Essential Stuff 2 | 3 | ## Html import links 4 | 5 | Google font 6 | 7 | ``` html 8 | 9 | 10 | 12 | ``` 13 | 14 | Ionicon 15 | 16 | ``` html 17 | 18 | 19 | ``` 20 | 21 | --- 22 | 23 | ## Background Colors 24 | 25 | ``` css 26 | --bg-wild-blue-yonder: hsla(216, 33%, 68%, 1); 27 | --bg-carolina-blue: hsla(199, 89%, 49%, 1); 28 | --bg-prussian-blue: hsla(216, 33%, 20%, 1); 29 | --bg-oxford-blue: hsla(222, 44%, 13%, 1); 30 | --bg-oxford-blue-2: hsla(222, 47%, 11%, 1); 31 | ``` 32 | 33 | ## Text color 34 | 35 | ``` css 36 | --text-white: hsla(0, 0%, 100%, 1); 37 | --text-alice-blue: hsla(216, 100%, 95%, 1); 38 | --text-columbia-blue: hsla(199, 69%, 84%, 1); 39 | --text-wild-blue-yonder: hsla(216, 33%, 68%, 1); 40 | --text-carolina-blue: hsla(199, 89%, 49%, 1); 41 | --text-shadow-blue: hsla(217, 24%, 59%, 1); 42 | --text-slate-gray: hsla(217, 17%, 48%, 1); 43 | ``` 44 | 45 | ## Gradient color 46 | 47 | ``` css 48 | --gradient-1: linear-gradient(90deg, #0ea5ea, #0bd1d1 51%); 49 | --gradient-2: linear-gradient(90deg, #0ea5ea, #0bd1d1 51%, #0ea5ea); 50 | --gradient-3: linear-gradient(0deg, #000d1a, transparent); 51 | ``` 52 | 53 | ## Border color 54 | 55 | ``` css 56 | --border-wild-blue-yonder: hsla(216, 33%, 68%, 1); 57 | --border-prussian-blue: hsla(216, 33%, 20%, 1); 58 | --border-white: hsl(0, 0%, 100%); 59 | --border-white-alpha-15: hsla(0, 0%, 100%, 0.15); 60 | ``` 61 | 62 | ## Default color 63 | 64 | ``` css 65 | --white: hsl(0, 0%, 100%, 1); 66 | --black: hsl(0, 0%, 0%, 1); 67 | ``` 68 | 69 | ## Font Family 70 | 71 | ``` css 72 | --fontFamily-noto_sans: 'Noto Sans', sans-serif; 73 | ``` 74 | 75 | ## Font Size 76 | 77 | ``` css 78 | --fontSize-1: 2.9rem; 79 | --fontSize-2: 2.0rem; 80 | --fontSize-3: 1.8rem; 81 | --fontSize-4: 1.6rem; 82 | --fontSize-5: 1.5rem; 83 | --fontSize-6: 1.4rem; 84 | --fontSize-7: 1.2rem; 85 | --fontSize-8: 1.3rem; 86 | ``` 87 | 88 | ## Font Weight 89 | 90 | ``` css 91 | --weight-medium: 500; 92 | --weight-semiBold: 600; 93 | --weight-bold: 700; 94 | --weight-extraBold: 800; 95 | ``` 96 | 97 | ## Line Height 98 | 99 | ``` css 100 | --lineHeight-1: 1.3; 101 | --lineHeight-2: 1.5; 102 | --lineHeight-4: 1.5; 103 | ``` 104 | 105 | ## Box Shadow 106 | 107 | ``` css 108 | --shadow-1: 0 8px 20px 0 hsla(0, 0%, 0%, 0.05); 109 | --shadow-2: 0px 3px 20px hsla(180, 90%, 43%, 0.2); 110 | ``` 111 | 112 | ## Border Radius 113 | 114 | ``` css 115 | --radius-6: 6px; 116 | --radius-8: 8px; 117 | --radius-16: 16px; 118 | --radius-48: 48px; 119 | --radius-circle: 50%; 120 | --radius-pill: 200px; 121 | ``` 122 | 123 | ## Spacing 124 | 125 | ``` css 126 | --section-padding: 70px; 127 | ``` 128 | 129 | ## Transition 130 | 131 | ``` css 132 | --transition-1: 0.25s ease; 133 | --transition-2: 0.5s ease; 134 | --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28); 135 | --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97); 136 | ``` 137 | --------------------------------------------------------------------------------