├── 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 | 
4 | 
5 | 
6 | [](https://twitter.com/intent/follow?screen_name=codewithsadee_)
7 | [](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 | 
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 |
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 |
185 | Subscribe
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
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 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
336 |
337 |
338 |
339 |
340 |
341 |
342 |
343 |
344 |
345 |
346 |
349 |
350 |
351 |
352 |
353 |
354 | Editor's picked
355 |
356 |
357 |
358 | Featured and highly rated articles
359 |
360 |
361 |
362 |
363 |
364 |
365 |
366 |
367 |
369 |
370 |
371 |
372 |
373 |
374 |
379 |
380 |
381 |
382 |
383 | 3 mins read
384 |
385 |
386 |
387 |
392 |
393 |
394 |
395 |
396 |
398 |
399 |
400 |
Joseph
401 |
402 |
25 Nov 2022
403 |
404 |
405 |
406 |
Read more
407 |
408 |
409 |
410 |
411 |
412 |
413 |
414 |
415 |
416 |
417 |
418 |
419 |
421 |
422 |
423 |
424 |
425 |
426 |
431 |
432 |
433 |
434 |
435 | 6 mins read
436 |
437 |
438 |
439 |
444 |
445 |
446 |
447 |
448 |
450 |
451 |
452 |
Joseph
453 |
454 |
25 Nov 2022
455 |
456 |
457 |
458 |
Read more
459 |
460 |
461 |
462 |
463 |
464 |
465 |
466 |
467 |
468 |
469 |
470 |
471 |
473 |
474 |
475 |
476 |
477 |
478 |
483 |
484 |
485 |
486 |
487 | 6 mins read
488 |
489 |
490 |
491 |
496 |
497 |
498 |
499 |
500 |
502 |
503 |
504 |
Joseph
505 |
506 |
25 Nov 2022
507 |
508 |
509 |
510 |
Read more
511 |
512 |
513 |
514 |
515 |
516 |
517 |
518 |
519 |
520 |
521 |
522 |
523 |
525 |
526 |
527 |
528 |
529 |
530 |
535 |
536 |
537 |
538 |
539 | 6 mins read
540 |
541 |
542 |
543 |
548 |
549 |
550 |
551 |
552 |
554 |
555 |
556 |
Joseph
557 |
558 |
25 Nov 2022
559 |
560 |
561 |
562 |
Read more
563 |
564 |
565 |
566 |
567 |
568 |
569 |
570 |
571 |
572 |
573 |
574 |
575 |
577 |
578 |
579 |
580 |
581 |
582 |
587 |
588 |
589 |
590 |
591 | 6 mins read
592 |
593 |
594 |
595 |
600 |
601 |
602 |
603 |
604 |
606 |
607 |
608 |
Joseph
609 |
610 |
25 Nov 2022
611 |
612 |
613 |
614 |
Read more
615 |
616 |
617 |
618 |
619 |
620 |
621 |
622 |
623 |
624 |
625 |
626 | Show More Posts
627 |
628 |
629 |
630 |
631 |
632 |
633 |
634 |
635 |
636 |
637 |
638 |
639 |
640 |
641 |
644 |
645 |
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 |
788 |
789 |
790 |
791 |
792 |
Working Tips
793 |
794 |
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 |
809 |
810 |
811 |
812 |
813 | 3 mins read
814 |
815 |
816 |
817 |
818 |
819 |
820 |
821 |
822 |
823 |
824 |
825 |
826 |
828 |
829 |
830 |
831 |
832 |
Working Tips
833 |
834 |
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 |
849 |
850 |
851 |
852 |
853 | 3 mins read
854 |
855 |
856 |
857 |
858 |
859 |
860 |
861 |
862 |
863 |
864 |
865 |
866 |
868 |
869 |
870 |
871 |
872 |
Working Tips
873 |
874 |
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 |
889 |
890 |
891 |
892 |
893 | 3 mins read
894 |
895 |
896 |
897 |
898 |
899 |
900 |
901 |
902 |
903 |
904 |
905 |
906 |
908 |
909 |
910 |
911 |
912 |
Working Tips
913 |
914 |
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 |
929 |
930 |
931 |
932 |
933 | 3 mins read
934 |
935 |
936 |
937 |
938 |
939 |
940 |
941 |
942 |
943 |
944 |
945 |
946 |
948 |
949 |
950 |
951 |
952 |
Working Tips
953 |
954 |
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 |
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 |
1019 |
1020 |
1021 |
1022 |
1023 |
1026 |
1027 |
1028 |
15 mins read
1029 |
1030 |
15 April 2022
1031 |
1032 |
1033 |
1034 |
1035 |
1036 |
1037 |
1038 |
1039 |
1040 |
1041 |
1042 |
1044 |
1045 |
1046 |
1047 |
1048 |
1051 |
1052 |
1053 |
15 mins read
1054 |
1055 |
15 April 2022
1056 |
1057 |
1058 |
1059 |
1060 |
1061 |
1062 |
1063 |
1064 |
1065 |
1066 |
1067 |
1069 |
1070 |
1071 |
1072 |
1073 |
1076 |
1077 |
1078 |
15 mins read
1079 |
1080 |
15 April 2022
1081 |
1082 |
1083 |
1084 |
1085 |
1086 |
1087 |
1088 |
1089 |
1090 |
1091 |
1092 |
1094 |
1095 |
1096 |
1097 |
1098 |
1101 |
1102 |
1103 |
15 mins read
1104 |
1105 |
15 April 2022
1106 |
1107 |
1108 |
1109 |
1110 |
1111 |
1112 |
1113 |
1114 |
1115 |
1116 |
1117 |
1119 |
1120 |
1121 |
1122 |
1123 |
1126 |
1127 |
1128 |
15 mins read
1129 |
1130 |
15 April 2022
1131 |
1132 |
1133 |
1134 |
1135 |
1136 |
1137 |
1138 |
1139 |
1140 |
1141 |
1142 |
1143 |
1144 |
1145 | Last Comment
1146 |
1147 |
1148 |
1221 |
1222 |
1223 |
1224 |
1225 |
1226 |
1227 |
1228 |
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 |
--------------------------------------------------------------------------------
Jane Cooper
1165 | 1166 | 1167 |Katen Doe
1188 | 1189 | 1190 |Barbara Cartland
1212 | 1213 | 1214 |