├── .gitignore ├── .vscode └── settings.json ├── backup ├── app.css └── index-backup.html ├── components.html ├── content ├── content.md ├── knowledge.md ├── sass.md └── tools.md ├── css ├── app.css ├── main.css └── main.css.map ├── gocast-ui ├── .vscode │ └── tasks.json ├── images │ ├── icons │ │ ├── icon-message.svg │ │ ├── icon-noti.svg │ │ ├── icon-search.svg │ │ ├── icon-upload.svg │ │ └── icon-upload.zip │ ├── img-circle.png │ ├── img-host-user.png │ ├── img-man.png │ ├── img-rating.png │ ├── img-vector.png │ └── logo.png ├── index.html ├── index.pug ├── playlist.html ├── playlist.pug ├── sass │ ├── abstracts │ │ ├── _index.scss │ │ ├── _mixins.scss │ │ └── _variables.scss │ ├── app.scss │ ├── base │ │ ├── _general.scss │ │ ├── _reset.scss │ │ └── _typography.scss │ ├── components │ │ ├── _button.scss │ │ └── _toggle.scss │ ├── home.scss │ ├── layout │ │ ├── _index.scss │ │ ├── _navigation.scss │ │ ├── _sidebar.scss │ │ ├── _structure.scss │ │ └── _topbar.scss │ ├── pages │ │ └── home │ │ │ ├── _feed.scss │ │ │ ├── _follow.scss │ │ │ ├── _host.scss │ │ │ ├── _index.scss │ │ │ ├── _listening.scss │ │ │ ├── _top-podcast.scss │ │ │ ├── _topics.scss │ │ │ └── _trending.scss │ ├── playlist.scss │ ├── theme │ │ └── _dark.scss │ └── vendor │ │ └── _priority.scss ├── styles │ ├── app.css │ ├── app.css.map │ ├── home.css │ ├── home.css.map │ ├── playlist.css │ └── playlist.css.map ├── trending.html ├── trending.pug └── views │ ├── icons │ ├── _icon-add-user.pug │ ├── _icon-chart.pug │ ├── _icon-cube.pug │ ├── _icon-cube2.pug │ ├── _icon-discovery.pug │ ├── _icon-heart-fill.pug │ ├── _icon-heart.pug │ ├── _icon-home.pug │ ├── _icon-medal.pug │ ├── _icon-menu.pug │ ├── _icon-microphone.pug │ ├── _icon-more.pug │ ├── _icon-play.pug │ ├── _icon-play2.pug │ ├── _icon-playlist.pug │ ├── _icon-search.pug │ ├── _icon-star.pug │ ├── _icon-subscription.pug │ ├── _icon-user.pug │ ├── _icon-verify.pug │ └── _logo.pug │ ├── layout │ ├── _dashboard.pug │ ├── _navigation.pug │ ├── _sidebar.pug │ └── _topbar.pug │ ├── mixins │ └── _mixins.pug │ └── modules │ └── home │ ├── _feed.pug │ ├── _listening-history.pug │ ├── _popular-host.pug │ ├── _suggest-follow.pug │ ├── _top-podcast.pug │ ├── _topics.pug │ └── _trending.pug ├── images ├── icon-arrow-right.png ├── icon-fb.svg ├── img1.png ├── logo.png └── star.png ├── index.html ├── index.pug ├── sass ├── abstracts │ ├── _mixins.scss │ └── _variables.scss ├── base │ ├── _general.scss │ └── _reset.scss ├── components │ ├── _button.scss │ └── _typography.scss ├── layout │ ├── _footer.scss │ └── _header.scss ├── main.scss └── pages │ ├── _home.scss │ └── home │ ├── _diamond.scss │ ├── _gem.scss │ ├── _popular.scss │ ├── _responsive.scss │ ├── _study.scss │ └── _top-tours.scss ├── trip-guide ├── .gitignore ├── index.html ├── index.pug ├── main.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ └── vite.svg ├── styles │ └── style.scss └── tailwind.config.js └── views ├── home ├── Diamond.pug ├── Gem.pug ├── Popular.pug ├── Study.pug └── TopTours.pug ├── layout ├── footer.pug ├── header.pug └── layout-tour.pug └── mixins └── mixins.pug /.gitignore: -------------------------------------------------------------------------------- 1 | resources.md -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /backup/app.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | body { 7 | font-family: "Inter", sans-serif; 8 | font-weight: 500; 9 | background-color: #f5f5f5; 10 | } 11 | .tour { 12 | width: 370px; 13 | height: auto; 14 | /* height: 420px; */ 15 | /* padding: 500px; */ 16 | /* height: 500px; 17 | width: 450px; */ 18 | /* padding: 40px; */ 19 | background-color: white; 20 | /* border: border-width border-style border-color */ 21 | /* border-width: 5px; */ 22 | /* solid dashed dotted double */ 23 | /* border-style: solid; */ 24 | /* border-color: black; */ 25 | /* shorthand: Viết rút gọn */ 26 | /* border: 5px solid black; */ 27 | } 28 | .tour-content { 29 | /* padding: top right bottom left */ 30 | padding: 20px 20px 14px 20px; 31 | /* padding: top right-left bottom */ 32 | padding: 20px 20px 14px; 33 | /* padding: top-bottom right-left */ 34 | padding: 14px 20px; 35 | /* padding: top-right-bottom-left */ 36 | padding: 20px; 37 | padding-top: 20px; 38 | padding-right: 20px; 39 | padding-bottom: 14px; 40 | padding-left: 20px; 41 | } 42 | .tour-title { 43 | margin-bottom: 10px; 44 | color: #23262f; 45 | font-weight: 500; 46 | padding-bottom: 10px; 47 | font-size: 18px; 48 | /* line-height: 28px; */ 49 | line-height: 1.556; 50 | } 51 | .tour-rating { 52 | margin-bottom: 20px; 53 | } 54 | .tour-duration, 55 | .tour-review-count { 56 | color: #353945; 57 | } 58 | .tour-button { 59 | font-size: 14px; 60 | font-weight: 500; 61 | color: white; 62 | padding: 8px 17px; 63 | background-color: #3b71fe; 64 | text-decoration: none; 65 | border-radius: 8px; 66 | line-height: 17px; 67 | display: inline-block; 68 | } 69 | .text { 70 | min-width: 100px; 71 | max-width: 200px; 72 | display: inline-block; 73 | } 74 | -------------------------------------------------------------------------------- /backup/index-backup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML CSS Master 8 | 9 | 10 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 |
22 | bali 23 | From $40 24 |
25 |
26 |

27 | Thailands Ayutthaya Temples Cruise from Bangkok1 Thailands 28 | Ayutthaya Temples Cruise from Bangkok1 Thailands Ayutthaya Temples 29 | Cruise from Bangkok1 30 |

31 |
32 |
33 |
34 | tour-rating 35 |
36 |
37 | 4.8 (12 reviews) 38 |
39 |
40 | Duration: 9 hours 41 |
42 | Tours Price $61 49 |
50 |
51 |
52 |
53 | bali 58 | From $40 59 |
60 |
61 |

62 | Thailands Ayutthaya Temples Cruise from Bangkok2 63 |

64 |
65 |
66 |
67 | tour-rating 68 |
69 |
70 | 4.8 (12 reviews) 71 |
72 |
73 | Duration: 9 hours 74 |
75 | Tours Price $61 82 |
83 |
84 |
85 |
86 | bali 87 | From $40 88 |
89 |
90 |

91 | Thailands Ayutthaya Temples Cruise from Bangkok3 92 |

93 |
94 |
95 |
96 | tour-rating 97 |
98 |
99 | 4.8 (12 reviews) 100 |
101 |
102 | Duration: 9 hours 103 |
104 | Tours Price $61 111 |
112 |
113 |
114 |
115 | bali 116 | From $40 117 |
118 |
119 |

120 | Thailands Ayutthaya Temples Cruise from Bangkok3 121 |

122 |
123 |
124 |
125 | tour-rating 126 |
127 |
128 | 4.8 (12 reviews) 129 |
130 |
131 | Duration: 9 hours 132 |
133 | Tours Price $61 140 |
141 |
142 |
143 |
144 | bali 145 | From $40 146 |
147 |
148 |

149 | Thailands Ayutthaya Temples Cruise from Bangkok3 150 |

151 |
152 |
153 |
154 | tour-rating 155 |
156 |
157 | 4.8 (12 reviews) 158 |
159 |
160 | Duration: 9 hours 161 |
162 | Tours Price $61 169 |
170 |
171 |
172 |
173 | 174 | 175 | -------------------------------------------------------------------------------- /content/content.md: -------------------------------------------------------------------------------- 1 | # Chương 1: Tổng quan 2 | 3 | - Giới thiệu khóa học: Nhóm hỗ trợ, thiết kế, cách coi video tốt, fonts chữ(SF Mono) 4 | - Cài đặt VSCode Editor 5 | - Thiết lập VSCode cơ bản cho người mới: fonts, letter-spacing, line-height, theme 6 | - Tìm hiểu các tổ hợp phím cơ bản trong VSCode 7 | - Tìm hiểu các thiết lập chính của vscode cho người mới 8 | - Extensions là gì ? 9 | - Cài đặt các extensions cần thiết cho khóa học: Auto Rename Tag, Color Highlight, HTML CSS Support, CSS Peek, Hightlight Matching Tag, HTML to CSS autocompletion, Live Preview, Prettier, Live Server 10 | - Những lưu ý khi đặt tên thư mục cần nắm: html-css-master, khoa-hoc-evondev-master 11 | - Cách đưa thư mục vào VSCode 12 | - Cài đặt Chrome extensions cần thiết 13 | - Chrome Dev Tools cơ bản(F12, Inspect Element) 14 | - Chụp code với MonoSnap, SnippingTool 15 | - Figma là gì ? Tạo tài khoản nhanh Figma 16 | - Import thiết kế vào Figma và sử dụng Figma cơ bản 17 | - Cài đặt NodeJS 14.17.3 và Gitbash 18 | - Terminal là gì ? Sử dụng terminal cơ bản trong vscode 19 | - NPM là gì ? Cài đặt một số global packages 20 | - Vite là gì ? Thiết lập dự án đơn giản với Vite 21 | - Tư duy học tập cơ bản, tư duy đặt câu hỏi, tư duy tra Google cần nắm, tư duy hỏi bài 22 | - Kết quả bạn sẽ hoàn thành sau khóa học này 23 | - Lưu ý cần nắm khác 24 | 25 | # Chương 2: Thực chiến 26 | 27 | - Giới thiệu 28 | - Tạo file, kiến thức đường dẫn cơ bản 29 | - Cấu trúc(structure) HTML cơ bản của 1 trang web 30 | - Thẻ(tag) là gì ? 2 loại thẻ cơ bản cần nắm 31 | - Thuộc tính(attribute) của thẻ để làm gì ? 32 | - Hiểu về gia phả trong HTML 33 | - Hiểu rõ cách hoạt động của CSS cơ bản 34 | - Tư duy gom nhóm giao diện 35 | - Thực hành và phân tích vào thiết kế thực tế 36 | - Cùng học JS cơ bản 37 | - Master Sass 38 | - Master Pug 39 | 40 | # Bổ sung 41 | 42 | - Các công cụ code online cần biết: Codepen, Codesandbox 43 | - Những trang web chia sẻ kiến thức hay phải theo dõi 44 | - UI UX là gì ? Tại sao nên biết 1 chút về UI UX 45 | - Cải thiện mắt thẩm mỹ thế nào ? 46 | - Học tiếng Anh như thế nào là ổn ? 47 | - Màn phụ là gì ? Và tại sao bạn nên có ít nhất 1 màn phụ 48 | - Kênh youtube hay phải theo dõi 49 | - Những trang web về HTML CSS nên biết 50 | -------------------------------------------------------------------------------- /content/knowledge.md: -------------------------------------------------------------------------------- 1 | - Cùng cấp _./_ 2 | - Truy xuất ra ngoài 1 cấp _../_ 3 | - Thuộc tính _attribute_ 4 | - CSS nó sẽ chạy từ trên xuống dưới, nếu có 2 đoạn code cùng thực hiên 1 chức năng thì nó sẽ ưu tiên đoạn code ở dưới 5 | - _div_ là thẻ block, có độ rộng 100% phần tử chứa nó, lưu ý: chưa nói tới vấn đề khi sử dụng với CSS 6 | - _div_ thường được dùng rất nhiều, khi chia layout, gom 1 khối nào đó 7 | - _img_ là thẻ inline, tự đóng, dùng để hiển thị hình ảnh với 2 thuộc tính là `src` và `alt` 8 | - _alt_ viết tắt của `alternate text` nó dùng trong việc SEO, khi hình ảnh bị lỗi hoặc sai đường dẫn thì _alt_ sẽ hiển thị để người dùng biết hình ảnh đó nói về cái gì 9 | - _span_ là thẻ inline, nó thường được dùng cho những đoạn chữ ngắn 10 | - _class_ là thuộc tính dùng để sử dụng các class cho thẻ, sau đó dùng để styles trong CSS 11 | - Việc đặt tên class khá là nan giải, khó, ko nên đặt tên tiếng Việt, nên đặt tiếng Anh ngắn gọn dễ hiểu 12 | - Thẻ tiêu đề: h1, h2, h3, h4, h5, h6 13 | - _h1_: Mỗi trang chỉ có tối đa 1 thẻ h1 mà thôi, thẻ này thường được dùng cho những tiêu đề lớn của trang 14 | - _h2_: Dùng được nhiều, thường được dùng cho những block to 15 | - _h3_: Dùng được nhiều, thường được dùng cho những block nhỏ 16 | - h4,h5,h6: Tương ứng cho những tiêu đề nhỏ hơn 17 | - _a_: Là thẻ inline, chắc chắn là dùng cho liên kết, nó có 3 thuộc tính hay dùng `href`, `target`, và `rel` 18 | - Khi dùng `target` có giá trị là `_blank` thì thẻ a nên thêm thuộc tính `rel="noopener noreferrer"` 19 | - Fonts chữ: 20 | - 1. Sẽ có sẵn ở Google Fonts 21 | - 2. Không có ở Google Fonts mà được mua, tải trên mạng về máy 22 | - _font-weight_: Độ đậm nhạt của chữ, 100 -> 900, normal, bold, bolder, extra bold, light, thin, regular, medium, semibold 23 | - _font-family_: Thiết lập font chữ, truyền vào là font name(tên của font chữ) 24 | - `sans-serif`: Chữ không có chân 25 | - `serif`: Chữ có chân 26 | - _CSS Selectors_: tag, class, id, attribute 27 | - Tags: h1, h2, h3, div, body, span, a 28 | - Class: .name, .tour, .tour-header 29 | - Id: #header, #content 30 | - Attribute: Later `*` 31 | - Special selector: \* chọn toàn bộ selectors 32 | - Cấu trúc 1 đoạn code CSS 33 | cssSelectors, cssSelectors, cssSelectors{ 34 | property: value; 35 | } 36 | h1,.name,#header,input[type='email']{ 37 | font-family: 'Inter' 38 | } 39 | - _User Agent Stylesheet_: CSS mặc định của trình duyệt, mỗi trình duyệt sẽ có CSS mặc định khác nhau 40 | - _CSS reset_: Dùng để reset CSS mặc định của các trình duyệt, và 'bắt buộc' phải có đầu tiên 41 | - _color_: Màu chữ 42 | - _background-color_: Màu nền 43 | - _Mã màu_: hexa(#ffa400), orange, rgb(0,0,0), rgba(0,0,0,0.5) 44 | - _Alpha_(opacity): 0 -> 1 45 | - **box-sizing** 46 | - _content-box_: Độ rộng lúc này của 1 khối sẽ bằng width + padding(left+right) + border(left+right) 47 | - _border-box_: Độ rộng lúc này của 1 khối sẽ bao gồm padding và border, nên áp dụng cho toàn bộ selector(\*) 48 | - _width_: Độ rộng 49 | - _height_: Chiều cao 50 | - _border_: Viền 51 | - _shorthand_: (CSS shorthand) Viết rút gọn 52 | - _padding_: Không thể dùng số âm 53 | - _margin_: Có thể dùng số âm, có giá trị `auto` 54 | - _text-decoration_: Gạch dưới của thẻ a, `none`, `underline`, `overline`,` line-through` 55 | - _border-radius_: Độ bo góc của khối, càng lớn thì càng bo góc, nếu hình vuông mà có bo góc lớn thì sẽ tạo ra hình tròn, còn nếu là hình chữ nhật có bo góc lớn thì sẽ tạo ra hình elip 56 | - border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius 57 | - _line-height_: Khoảng cách giữa các dòng chữ 58 | - Khi những thẻ inline nằm cạnh nhau thì nó sẽ nằm trên 1 hàng, ngược lại những thẻ block thì nó sẽ tạo ra hàng mới 59 | - _display_: block, inline, inline-block, none, flex, grid 60 | - `block` : Biến thành thẻ block 61 | - `inline` : Biến thành thẻ inline, nó sẽ bị hạn chế vài thuộc tính CSS liên quan tới box-sizing như là padding-top, padding-bottom, margin-top, margin-bottom 62 | - `inline-block` : Biến thành thẻ inline-block, 63 | là sự kết hợp giữa inline và block, khi các thẻ có thuộc tính inline-block nó sẽ kế thừa đặc tính của inline tức là nằm cạnh nhau thì sẽ nằm trên 1 hàng, có độ rộng bằng nội dung mà nó chứa, không bị hạn chế CSS 64 | - `none`: Ẩn luôn, ko thấy ko nhấn được 65 | - `flex`: Dùng rất nhiều hiện nay, nếu master được nó thì code layout vô tư :D 66 | - _min-width_: Độ rộng tối thiểu, ví dụ 100px -> >= 100px 67 | - _max-width_: Độ rộng tối đa, ví dụ 100px -> <= 100px 68 | - _flexbox_: Áp dụng thuộc tính display: flex vào phần tử mình muốn dàn layout 69 | - _calc_: Hàm dùng để tính toán, + - \* /, lưu ý là phải có khoảng cách giữa các phép tính 70 | - _column-gap_: Khoảng trống chiều dọc 71 | - _row-gap_: Khoảng trống chiều ngang 72 | - _component_: Mục đích là tái sử dụng và có thể tùy chỉnh 1 chỗ để sử dụng nhiều nơi 73 | - _pug_: https://pugjs.org/api/getting-started.html 74 | - mixins: Giống function trong Javascript mục đích là tái sử dụng code 75 | - Biến: =, #{biến} 76 | - _position_: có 5 giá trị chính: static, relative, absolute, sticky, fixed, khi sử dụng thuộc tính position này thì đi kèm sẽ có các thuộc tính khác như top right bottom left z-index 77 | - _relative_: Khi sử dụng giá trị này thì phải lưu ý xem phần tử con của nó có sử dụng position là `absolute` hay không ? 78 | - _absolute_: Khi sử dụng giá trị này thì phải lưu ý xem phần tử chứa nó gần nhất có sử dụng position là absolute hay relative không ? 79 | - _responsive_: 80 | - _breakpoints_: 320px 480px 768px 1024px 1200 1366 1440 1600 1920 81 | - _min-width_: breakpoints 82 | - _max-width_: breakpoints - 0.02px 83 | - _media queries_ 84 | - _variables_: Biến là gì ? Khai báo như thế nào ? Cách sử dụng ra sao ? Ưu và nhược điểm của nó là gì ? 85 | - _grid_: Dàn layout cực nhanh 86 | - _time_: nó là thẻ inline 87 | - _each in pug_: Dùng để duyệt qua danh sách các phần tử trong mảng để hiển thị 88 | - _object-fit_: Thuộc tính này dùng cho thẻ img hoặc video, mục đích là để hiển thị hình ảnh hoặc video vừa với khung chứa nó hay không? 89 | - _object-position_: Dùng để căn chỉnh vị trí hiển thị của img hoặc video khi dùng với thuộc tính `object-fit` 90 | - _css selectors child_: :nth-child(number), :nth-last-child(number), :first-child, :last-child, những phần tử cùng cấp, .gem-item:first-child, .gem-item:last-child, .gem-item:nth-child(5), :not(selectors), .gem-item:not(:first-child), .gem-item:not(:nth-child(5)) 91 | pug index.pug --pretty --watch 92 | - _width: fit-content_: có độ rộng bằng với nội dung nó chứa 93 | - _margin-inline_: tương ứng margin-left và margin-right 94 | - _padding-inline_: tương ứng padding-left và padding-right 95 | - _margin-block_: tương ứng margin-left và margin-right 96 | - _padding-block_: tương ứng padding-top và padding-bottom 97 | - _caniuse_: là 1 trang web giúp chúng ta kiểm tra những thuộc tính trong css xem nó có được nhiều trình duyệt hỗ trợ hay không ? Từ đó chúng ta có thể chắc chắn sử dụng vào trong dự án 98 | - _semantic tags_: header, footer, main, section, article, nav, aside 99 | - _list-style-type_: thuộc tính này dùng cho thẻ ul(`disc`) và ol(`decimal`) 100 | - _list-style-position_: outside hoặc inside 101 | - _form_: dùng để làm các form(biểu mẫu) nhập thông tin để làm việc gì đó ví dụ như đăng ký tài khoản, đăng nhập, gửi email, điền thông tin cá nhân... 102 | - _input_: có thuộc tính(attribute), và nó là thẻ tự đóng 103 | - `type` có nhiều loại tùy thuộc vào mục đích chúng ta sử dụng: text, email, number, phone, time, date, file, password, checkbox, radio, submit... 104 | - `placeholder` 1 lớp chữ giả mờ để nói cho chúng ta biết input đó làm gì, `name` dùng để truy xuất dữ liệu 105 | - `required` bắt buộc, 106 | - `disabled` không cho phép nhập vào, và khi submit form nó cũng ko lấy được dữ liệu, 107 | - `readonly` chỉ đọc, không sửa được tuy nhiên khi submit form thì vẫn lấy được dữ liệu 108 | - `min` thường dùng cho number, tức là số nhỏ nhất 109 | - `max` tương tự ở dòng trên nhưng là số lớn nhất 110 | - `min-length` tối thiểu kí tự 111 | - `max-length` tối đa kí tự 112 | - button 113 | - `type`: button, submit, reset 114 | - `inputmode`: _search_ _tel_ _number_ _decimal_ _email_ _url_ 115 | - `autocomplete`: tự động điền, _on_ _off_ 116 | - Trạng thái của input có `focus` `valid` `invalid` `out-of-range`... 117 | - Button có `hover`, `focus` `active` `disabled` 118 | - _select_: thường sẽ được tùy biến lại bằng cách dùng ul li 119 | - _textarea_: thường dùng cho nội dung nhập nhiều và có xuống hàng, thư viện soạn thảo hay gặp là `ckeditor` 120 | - _transition_: làm cho chuyển động trở nên mượt mà hơn, transition: property(all, color, background-color) duration(100ms, 200ms, 2s, 3s) easing(linear, ease, ease-in, ease-in-out, ease-out, cubic bezier) 121 | - _flex-shrink_: nếu để giá trị là `0` thì độ rộng hoặc chiều cao của nó cố định tại kích thước mình thiết lập và không bị bóp lại 122 | - _flex-grow_: nếu giá trị là `1` thì cho phép giãn ra 123 | - _flex-basis_: nó sẽ là độ rộng(flex-direction: row) hoặc là chiều cao(flex-direction: column) 124 | - _grid-template-areas_ 125 | - _minmax_ 126 | - _auto-fill_: nó sẽ cố gắng fill đủ số cột 127 | - _auto-fit_: nó tương tự auto-fill nhưng nó sẽ lấp đầy khoảng trống còn dư 128 | - _pseudo_: `:hover` selectors:peseudo -> Search google with keywords: All pseudo class css(W3schools, MDN) 129 | - Advanced Flexbox case study 130 | - _before_ & _after_ 131 | - _currentColor_: lấy giá trị theo thuộc tính color 132 | - _opacity_: độ trong suốt có giá trị từ 0 -> 1, (`0`) -> khi sử dụng opacity thì vẫn hiển thị con trỏ nếu có sử dụng `pointer`, vẫn chiếm diện tích 133 | - _visibility_: về cơ bản nó giống thằng opacity (`hidden`) -> nhưng không hiển thị con trỏ `pointer`, vẫn chiếm diện tích, lưu ý sử dụng ở phần tử cha thay vì pseudo như before hay after 134 | - _cursor_: con trỏ, có nhiều loại, pointer, not-allowed, cross... 135 | - _content_: sử dụng trong pseudo before và after, nội dung có thể có hoặc không tùy vào mục đích 136 | - _z-index_: sắp xếp thứ tự ưu tiên khi dùng với thuộc tính position hoặc flexbox 137 | - _white-space_: `nowrap` -> chữ sẽ luôn nằm trên 1 hàng và không bị rớt xuống 138 | - _pointer-events_: thường dùng khi mà không muốn nhấn vào được 139 | - _column_: chia cột cho nội dung thường là đoạn text dài 140 | - _box-shadow_: tạo bóng đổ cho khối 141 | - _text-indent_: dịch chuyển chữ vào trong hoặc lùi lại, số dương thì di chuyển qua phải, ngược lại số âm thì di chuyển ngược lại 142 | - _overflow_: visible, hidden, auto, scroll 143 | - _scroll-snap_: scroll snap cho phần tử phù hợp giao diện chia cột trên điện thoại mà không cần phải dùng tới Javascript, phần tử cha(scroll-snap-type: x mandatory, scroll-snap-stop: always), phần tử con(scroll-snap-align: start center end) 144 | - _aspect-ratio_: tỉ lệ khung hình 3/4, 1/1, 16/9 145 | - _order_: dùng để sắp xếp vị trí trong việc dùng Flexbox 146 | - _counter_: dùng để đánh số thứ tự, thích hợp khi làm mục lục 147 | - _background_: hình nền, màu nền 148 | - clamp min max 149 | - Container queries 150 | - flexbox case study 151 | - _flex-shrink_ 152 | - _0_: không cho phép co lại ở 1 kích thước nào đó nhất định nếu chúng ta thiết lập `width` hoặc `flex-basis` cho nó 153 | - _1_: cho phép co lại khi container không đủ khoảng trống 154 | - _flex-basis_: 155 | - flex-direction là row thì nó nghĩa là độ rộng, ngược lại nếu column thì nó sẽ là chiều cao 156 | - _flex-grow_: 157 | - _0_: không cho phép giãn ra cho dù container có dư khoảng trống 158 | - _1_: cho phép giãn ra khi container khoảng trống 159 | - khi có thêm `flex-wrap: wrap` vào thì lưu ý khi container không đủ chỗ cho độ rộng của các phần tử cộng lại có gap nữa thì nó sẽ rớt xuống hàng 160 | - đơn vị `rem` và `em` 161 | - Mặc định font-size của trình hầu hết trình duyệt sẽ là 100% = 16px 162 | - Đơn vị `rem` sẽ phụ thuộc vào thuộc tính `font-size` của root(html) mà thôi 163 | - Đơn vị `em` sẽ phụ thuộc vào thuộc tính `font-size` của chính nó hoặc của thằng chứa nó gần nhất 164 | - Khuyến khích dùng `rem` hoặc `px` cho an toàn 165 | - Đơn vị `em` hay dùng khi làm việc với độ rộng như max-width, min-width, thông thường hay thấy dùng trong media queries 166 | - Sử dụng media queries cho em rem và px 167 | - custom checkbox 168 | - pseudo :checked, 169 | - combinator +, 1 phần tử đứng liền kề nhau, chạy từ trên xuống dưới chứ không chạy ngược từ dưới lên được 170 | - combinator ~, đứng cùng cấp là được, ko nhất thiết phải liền kề 171 | - custom toggle 172 | - custom radio 173 | - custom dropdown 174 | **transform** 175 | - _translate_ (interger, %, em, rem, vw, vh) 176 | - `translateX(value)`: số dương sẽ di chuyển qua phải, ngược lại qua trái 177 | - `translateY(value)`: số dương sẽ di chuyển xuống dưới, ngược lại di chuyển lên trên 178 | - `translate(x, y)` 179 | - `translate3d(x, y, z)` 180 | - Nếu sử dụng đơn vị là % thì % đó nghĩa là độ rộng(theo chiều ngang) hoặc chiều cao(chiều dọc) của khối chúng ta đang áp dụng translate 181 | - _scale_ (interger) 182 | - `scaleX` 183 | - `scaleY` 184 | - `scale(x, y)` 185 | - `scaleZ` 186 | - `scale3d(x, y, z)` 187 | - _rotate_ (deg) 188 | - `rotateX` 189 | - `rotateY` 190 | - `rotate` = `rotateZ` 191 | - `rotateZ` 192 | - _skew_ (deg) 193 | - `skewX` 194 | - `skewY` 195 | - `skew` 196 | - clip-path: polygon 197 | - shape-outside 198 | - table 199 | - form: icon, focus, placeholder-shown 200 | - animation 201 | -------------------------------------------------------------------------------- /content/sass.md: -------------------------------------------------------------------------------- 1 | # Sass 2 | 3 | - **sass**: sẽ có 2 đuôi mở rộng của file là `.scss` hoặc .sass( ko dùng dấu {}) 4 | - Cài đặt sass với lệnh `npm install -g sass` 5 | - Lệnh để chạy sass: `sass path-of-sass-file path-of-css-file --watch` 6 | - _nested_: lồng nhau 7 | - .header-item, .header-link, .header-top, .header-bottom 8 | 14 | - _variables_: $primary-color: red; 15 | - color: $primary-color; 16 | - _@import_ 17 | - _pattern 7-1_ 18 | - _mixins_ 19 | - _loop_ 20 | - _if_ 21 | - _else_ 22 | -------------------------------------------------------------------------------- /content/tools.md: -------------------------------------------------------------------------------- 1 | # VScode settings 2 | 3 | - Font size: 13 4 | - Font family: SF Mono 5 | - Line height: 30 6 | - Letter spacing: 0 7 | - Word wrap: on 8 | - Word wrap column: 100 9 | - Format on save: Tích chọn vào 10 | - Default formatter: Prettier 11 | 12 | # VScode commands 13 | 14 | - ctrl/cmd + P: Tìm kiếm file trong dự án 15 | - ctrl/cmd + shift + P: Mở các lệnh trong vscode 16 | - ctrl/cmd + D: Chọn nhiều từ giống nhau 17 | - ctrl/cmd + shift + L: Chọn hết nhiều từ giống nhau 18 | - alt/option + mũi tên lên hoặc xuống: Để di chuyển 1 hoặc nhiều dòng khi bôi đen hoặc không 19 | - shift + alt/option + mũi tên lên hoặc xuống: Sao chép nhanh 20 | 21 | # Chrome extensions 22 | 23 | - VisBug 24 | - Dimensions 25 | - Ejoy English 26 | - Eye Dropper 27 | - Color Slurp 28 | 29 | # Desktop apps 30 | 31 | - Hướng dẫn chụp màn hình với snipping-tools, monosnap 32 | -------------------------------------------------------------------------------- /css/app.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | } 6 | * { 7 | margin: 0; 8 | padding: 0; 9 | font: inherit; 10 | } 11 | img, 12 | picture, 13 | svg, 14 | video { 15 | display: block; 16 | max-width: 100%; 17 | } 18 | body { 19 | min-height: 100vh; 20 | font-family: "DM Sans", sans-serif; 21 | font-size: 16px; 22 | /* font-size: 30px; */ 23 | } 24 | /* html { 25 | font-size: 20px; 26 | } */ 27 | /* card */ 28 | .card-list { 29 | display: flex; 30 | align-items: center; 31 | gap: 20px; 32 | flex-wrap: wrap; 33 | } 34 | .card-item { 35 | /* giãn ra khi container đủ lớn */ 36 | flex-grow: 1; 37 | /* cho phép co lại khi container nhỏ lại */ 38 | flex-shrink: 1; 39 | /* độ rộng là 300px, nhưng nó có thể lớn hơn thêm vì grow đang là 1, hoặc nhỏ hơn 300px vì shrink đang là 1 */ 40 | flex-basis: 300px; 41 | 42 | /* flex: 1; grow 1 shrink 1 basis 0 */ 43 | 44 | aspect-ratio: 1; 45 | } 46 | .card-item img { 47 | width: 100%; 48 | height: 100%; 49 | object-fit: cover; 50 | } 51 | /* header */ 52 | .header { 53 | display: flex; 54 | align-items: center; 55 | gap: 40px; 56 | padding: 20px; 57 | border-bottom: 1px solid #ddd; 58 | } 59 | .logo-image { 60 | width: 20px; 61 | } 62 | .right { 63 | background-color: red; 64 | flex: 1; 65 | display: flex; 66 | align-items: center; 67 | gap: 20px; 68 | } 69 | .auths { 70 | flex-shrink: 0; 71 | } 72 | .search { 73 | flex: 1; 74 | } 75 | .search input { 76 | width: 100%; 77 | } 78 | /* em vs rem */ 79 | .em-unit, 80 | .rem-unit { 81 | width: 200px; 82 | aspect-ratio: 1; 83 | box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 84 | color: white; 85 | display: flex; 86 | justify-content: center; 87 | align-items: center; 88 | padding: 20px; 89 | } 90 | .em-unit { 91 | background-color: #6a5af9; 92 | font-size: 1em; 93 | } 94 | .rem-unit { 95 | background-color: #f62682; 96 | font-size: 1rem; 97 | } 98 | .something { 99 | font-size: 40px; 100 | } 101 | .long-text { 102 | font-family: "DM sans"; 103 | /* 1em = 18px */ 104 | font-size: 18px; 105 | line-height: 1.75; 106 | max-width: 44.44em; 107 | margin: 50px auto; 108 | } 109 | /* 110 | 1. 1em = 1rem = 16px 111 | 2. html: 20px, body: 30px -> 1rem = 20px, 1em = 30px 112 | */ 113 | .boxed-image { 114 | width: 20rem; 115 | aspect-ratio: 1; 116 | } 117 | .boxed-image img { 118 | width: 100%; 119 | height: 100%; 120 | object-fit: cover; 121 | } 122 | /* @media screen and (max-width: 1023.98px) { 123 | html { 124 | font-size: 16px; 125 | } 126 | } */ 127 | /* post */ 128 | .post { 129 | width: 100%; 130 | max-width: 600px; 131 | display: flex; 132 | align-items: center; 133 | font-family: "DM sans", sans-serif; 134 | padding: 15px; 135 | background-color: white; 136 | box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 137 | border-radius: 8px; 138 | margin: 20px auto; 139 | gap: 20px; 140 | } 141 | .post-image { 142 | width: 200px; 143 | flex-shrink: 0; 144 | } 145 | .post-content { 146 | flex: 1; 147 | } 148 | @media screen and (max-width: 63em) { 149 | .post-wrapper { 150 | font-size: 16px; 151 | } 152 | .post { 153 | flex-direction: column; 154 | font-size: 16px; 155 | } 156 | } 157 | /* units */ 158 | html { 159 | font-size: 200%; 160 | } 161 | .units > div { 162 | height: 150px; 163 | width: 100%; 164 | } 165 | .unit-em { 166 | background-color: #20e3b2; 167 | } 168 | .unit-rem { 169 | background-color: #2cccff; 170 | } 171 | .unit-px { 172 | background-color: #ff6651; 173 | } 174 | @media screen and (min-width: 400px) { 175 | .unit-px { 176 | opacity: 0.5; 177 | } 178 | } 179 | @media screen and (min-width: 25em) { 180 | .unit-em { 181 | opacity: 0.5; 182 | } 183 | } 184 | @media screen and (min-width: 25rem) { 185 | .unit-rem { 186 | opacity: 0.5; 187 | } 188 | } 189 | /* custom checkbox */ 190 | body { 191 | padding: 20px; 192 | } 193 | .forms { 194 | display: flex; 195 | align-items: center; 196 | gap: 20px; 197 | } 198 | .radio, 199 | .checkbox { 200 | width: 20px; 201 | height: 20px; 202 | border: 1px solid #e6e8ec; 203 | border-radius: 8px; 204 | color: transparent; 205 | display: flex; 206 | justify-content: center; 207 | align-items: center; 208 | } 209 | .radio { 210 | border-radius: 100rem; 211 | } 212 | .radio-label, 213 | .checkbox-label { 214 | cursor: pointer; 215 | display: inline-block; 216 | } 217 | .radio-input, 218 | .checkbox-input { 219 | display: none; 220 | } 221 | .radio-input:checked ~ .radio, 222 | .checkbox-input:checked ~ .checkbox { 223 | /* active*/ 224 | background-color: #2cccff; 225 | border-color: #2cccff; 226 | color: white; 227 | } 228 | /* toggle */ 229 | .toggle-label { 230 | display: inline-block; 231 | cursor: pointer; 232 | } 233 | .toggle { 234 | width: 48px; 235 | height: 24px; 236 | border-radius: 100rem; 237 | background-color: #e7ecf3; 238 | padding: 4px 5px; 239 | transition: all 0.25s linear; 240 | } 241 | .toggle-spinner { 242 | width: 16px; 243 | height: 16px; 244 | border-radius: 100rem; 245 | background-color: #fff; 246 | transition: all 0.25s linear; 247 | } 248 | .toggle-input { 249 | display: none; 250 | } 251 | .toggle-input:checked + .toggle { 252 | /* active */ 253 | background-color: #6a5af9; 254 | } 255 | .toggle-input:checked + .toggle .toggle-spinner { 256 | /* active */ 257 | transform: translateX(22px); 258 | } 259 | .dropdown { 260 | --radius: 10px; 261 | --fake-spacing: 50px; 262 | display: block; 263 | width: 200px; 264 | margin-top: 50px; 265 | position: relative; 266 | } 267 | .dropdown-select { 268 | display: flex; 269 | justify-content: center; 270 | align-items: center; 271 | padding: 10px 12px; 272 | border-radius: var(--radius); 273 | color: white; 274 | background-color: #353945; 275 | font-size: 16px; 276 | font-weight: 500; 277 | cursor: pointer; 278 | text-align: center; 279 | height: 48px; 280 | } 281 | .dropdown-list { 282 | background-color: white; 283 | /* padding: 10px; */ 284 | /* box-shadow: 0px 30px 120px 0px #1e1e1e1a; */ 285 | border-radius: var(--radius); 286 | box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 287 | list-style: none; 288 | position: absolute; 289 | top: 100%; 290 | left: 0; 291 | right: 0; 292 | opacity: 0; 293 | visibility: hidden; 294 | transition: all 0.2s linear; 295 | z-index: 10; 296 | transform: translate3d(0, var(--fake-spacing), 0); 297 | } 298 | .dropdown-list:before { 299 | content: ""; 300 | height: var(--fake-spacing); 301 | background-color: transparent; 302 | position: absolute; 303 | top: 0; 304 | right: 0; 305 | left: 0; 306 | transform: translate3d(0, -100%, 0); 307 | } 308 | .dropdown:hover .dropdown-list { 309 | opacity: 1; 310 | visibility: visible; 311 | } 312 | .dropdown-item { 313 | font-size: 16px; 314 | font-weight: 400; 315 | padding: 12px 20px; 316 | /* border-radius: 8px; */ 317 | transition: all 0.2s linear; 318 | cursor: pointer; 319 | } 320 | .dropdown-item:hover { 321 | background-color: #f4f5f9; 322 | } 323 | .dropdown-item:first-child { 324 | border-top-left-radius: calc(var(--radius) - 1px); 325 | border-top-right-radius: calc(var(--radius) - 1px); 326 | } 327 | .dropdown-item:last-child { 328 | border-bottom-left-radius: calc(var(--radius) - 1px); 329 | border-bottom-right-radius: calc(var(--radius) - 1px); 330 | } 331 | /* transform */ 332 | .transform-boxed { 333 | width: 100px; 334 | height: 100px; 335 | background-color: #6a5af9; 336 | border-radius: 12px; 337 | transform: translateX(25px) translateY(50px); 338 | transform: translateX(100%); 339 | transform: translate(100%, 0); 340 | transform: translateZ(50px); 341 | transform: translate3d(100%, 100%, 0); 342 | } 343 | .translate-wrapper { 344 | width: 100%; 345 | height: 500px; 346 | background-color: #6a5af9; 347 | position: relative; 348 | } 349 | .translate-child { 350 | width: 100px; 351 | height: 100px; 352 | border-radius: 20px; 353 | background-color: white; 354 | position: absolute; 355 | left: 50%; 356 | top: 50%; 357 | transform: translate3d(-50%, -50%, 0); 358 | } 359 | .scale-boxed { 360 | width: 100px; 361 | height: 100px; 362 | border-radius: 12px; 363 | background-color: #f62682; 364 | margin: 0 auto; 365 | transform: scale3d(1.1, 1.2, 1); 366 | } 367 | .card { 368 | width: 400px; 369 | height: 250px; 370 | background-color: white; 371 | box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 372 | border-radius: 12px; 373 | padding: 10px; 374 | } 375 | .card-image { 376 | width: 100%; 377 | height: 100%; 378 | transform: translate3d(0, 0, 0); 379 | border-radius: 12px; 380 | overflow: hidden; 381 | } 382 | .card:hover .card-img { 383 | transform: scale(1.5); 384 | } 385 | .card-img { 386 | width: 100%; 387 | height: 100%; 388 | object-fit: cover; 389 | border-radius: 4px; 390 | transition: transform 0.25s ease-in; 391 | } 392 | .rotate-boxed { 393 | width: 100px; 394 | height: 100px; 395 | border-radius: 12px; 396 | background-color: #2cccff; 397 | margin: 0 auto; 398 | transform-origin: 0% 50%; 399 | } 400 | .clip-path-triangle { 401 | width: 400px; 402 | height: 400px; 403 | object-fit: cover; 404 | clip-path: polygon(50% 0, 100% 100%, 0 100%); 405 | } 406 | .shape-outside { 407 | max-width: 500px; 408 | margin: 20px auto; 409 | } 410 | .shape-outside img { 411 | --shape: 100% 0, 100% 100%, 0 0; 412 | width: 200px; 413 | height: 200px; 414 | object-fit: cover; 415 | float: left; 416 | clip-path: polygon(var(--shape)); 417 | shape-outside: polygon(var(--shape)); 418 | margin-right: 10px; 419 | } 420 | /* table */ 421 | .table { 422 | margin-top: 50px; 423 | overflow-x: auto; 424 | } 425 | table { 426 | width: 100%; 427 | border-spacing: 20px; 428 | border-collapse: collapse; 429 | white-space: nowrap; 430 | } 431 | table th, 432 | table td { 433 | text-align: left; 434 | vertical-align: middle; 435 | } 436 | table th { 437 | font-family: "DM Sans", sans-serif; 438 | font-style: normal; 439 | font-weight: 500; 440 | font-size: 14px; 441 | line-height: 20px; 442 | color: #a6a7b2; 443 | padding-bottom: 25px; 444 | /* border-bottom: 1px solid #e4e4e4; */ 445 | } 446 | table td { 447 | padding: 25px 0; 448 | /* border-bottom: 1px solid #e4e4e4; */ 449 | } 450 | table thead tr, 451 | table tbody tr:not(:last-child) { 452 | border-bottom: 1px solid #e4e4e4; 453 | } 454 | table .user { 455 | display: flex; 456 | align-items: center; 457 | gap: 10px; 458 | } 459 | table .user-avatar { 460 | width: 38px; 461 | height: 38px; 462 | border-radius: 100rem; 463 | object-fit: cover; 464 | flex-shrink: 0; 465 | } 466 | table .follow { 467 | height: 26px; 468 | color: white; 469 | background-color: #ff754c; 470 | font-size: 14px; 471 | border-radius: 4px; 472 | display: inline-flex; 473 | justify-content: center; 474 | align-items: center; 475 | padding: 0 16px; 476 | } 477 | table .status { 478 | height: 26px; 479 | color: #ffa2c0; 480 | background-color: #fff6f9; 481 | font-size: 14px; 482 | border-radius: 4px; 483 | display: inline-flex; 484 | justify-content: center; 485 | align-items: center; 486 | padding: 0 16px; 487 | } 488 | @media screen and (max-width: 1023.98px) { 489 | .table th, 490 | .table td { 491 | padding-inline: 25px; 492 | } 493 | } 494 | /* input */ 495 | .search { 496 | max-width: 500px; 497 | margin: 25px auto; 498 | position: relative; 499 | } 500 | .search-icon { 501 | position: absolute; 502 | top: 50%; 503 | transform: translateY(-50%); 504 | left: 15px; 505 | } 506 | .search-input { 507 | background-color: #fafafa; 508 | border-radius: 8px; 509 | padding: 15px; 510 | padding-left: 55px; 511 | border: none; 512 | outline: none; 513 | border: 1px solid transparent; 514 | transition: all 0.2s linear; 515 | } 516 | .search-input:focus { 517 | border-color: #2979ff; 518 | background-color: transparent; 519 | } 520 | /* input-styles */ 521 | .input-styles { 522 | position: relative; 523 | max-width: 500px; 524 | display: block; 525 | margin: 25px auto; 526 | } 527 | .input-styles span { 528 | position: absolute; 529 | top: 50%; 530 | transform: translateY(-50%); 531 | left: 15px; 532 | color: #333; 533 | font-size: 14px; 534 | pointer-events: none; 535 | transition: all 0.2s linear; 536 | } 537 | .input-styles input { 538 | width: 100%; 539 | background-color: #fafafa; 540 | border-radius: 8px; 541 | padding: 15px; 542 | border: none; 543 | outline: none; 544 | border: 1px solid transparent; 545 | transition: all 0.2s linear; 546 | } 547 | 548 | .input-styles input:not(:placeholder-shown) + span, 549 | .input-styles input:focus + span { 550 | /* display: none; */ 551 | top: 0; 552 | left: 10px; 553 | background-color: white; 554 | display: inline-block; 555 | padding: 5px; 556 | } 557 | .input-styles input:focus { 558 | border-color: #f62682; 559 | background-color: transparent; 560 | } 561 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: #2979ff; 3 | --black-color: #141416; 4 | --gray2: #353945; 5 | --gray3: #777e90; 6 | --gray4: #b1b5c3; 7 | --gray5: #e6e8ec; 8 | --gray4f: #4f4f4f; 9 | --gray6: #f4f5f6; 10 | --primary-font: "Inter", sans-serif; 11 | --secondary-font: "DM Sans", sans-serif; 12 | --fz-default: 14px; 13 | } 14 | 15 | * { 16 | margin: 0; 17 | padding: 0; 18 | box-sizing: border-box; 19 | } 20 | 21 | img { 22 | display: block; 23 | max-width: 100%; 24 | } 25 | 26 | ul, 27 | ol { 28 | list-style-type: none; 29 | } 30 | 31 | input, 32 | button, 33 | textarea, 34 | select { 35 | outline: none; 36 | font: inherit; 37 | background-color: transparent; 38 | border: none; 39 | } 40 | 41 | button { 42 | cursor: pointer; 43 | } 44 | 45 | body { 46 | font-family: var(--primary-font); 47 | font-weight: 400; 48 | background-color: white; 49 | font-size: var(--fz-default); 50 | color: var(--gray3); 51 | line-height: 1; 52 | } 53 | 54 | .container { 55 | width: 100%; 56 | max-width: 1200px; 57 | margin: 0 auto; 58 | padding: 0 15px; 59 | } 60 | 61 | a { 62 | text-decoration: none; 63 | color: inherit; 64 | } 65 | 66 | .button { 67 | display: flex; 68 | align-items: center; 69 | justify-content: center; 70 | background-color: var(--primary-color); 71 | color: white; 72 | border-radius: 100rem; 73 | cursor: pointer; 74 | outline: none; 75 | text-decoration: none; 76 | font-weight: 500; 77 | width: fit-content; 78 | } 79 | 80 | .heading { 81 | color: var(--black-color); 82 | font-weight: 600; 83 | font-size: 30px; 84 | margin-bottom: 34px; 85 | line-height: 1.5; 86 | } 87 | 88 | .header { 89 | background-color: white; 90 | padding: 16px 0; 91 | box-shadow: 0px 6px 30px rgba(15, 15, 15, 0.06); 92 | margin-bottom: 70px; 93 | } 94 | .header-list { 95 | display: flex; 96 | align-items: center; 97 | justify-content: center; 98 | flex-direction: row; 99 | flex-wrap: nowrap; 100 | gap: 20px; 101 | } 102 | .header-item { 103 | padding: 14px 22px; 104 | border-radius: 10px; 105 | background-color: #f4f5f9; 106 | display: block; 107 | transition: all 0.2s linear; 108 | } 109 | .header-item:hover { 110 | background-color: #2979ff; 111 | color: white; 112 | } 113 | 114 | /* Footer */ 115 | .footer { 116 | padding: 70px 0; 117 | } 118 | 119 | .footer-container { 120 | max-width: 1130px; 121 | } 122 | 123 | .footer-columns { 124 | display: flex; 125 | align-items: flex-start; 126 | justify-content: space-between; 127 | gap: 20px; 128 | } 129 | 130 | .footer-heading { 131 | font-size: 24px; 132 | line-height: 1.5; 133 | color: var(--gray2); 134 | font-weight: 500; 135 | margin-bottom: 20px; 136 | } 137 | 138 | .footer-links { 139 | display: flex; 140 | flex-direction: column; 141 | gap: 14px; 142 | } 143 | 144 | .footer-link { 145 | display: block; 146 | line-height: 1.5; 147 | font-size: 16px; 148 | } 149 | 150 | .footer-logo { 151 | display: inline-block; 152 | margin-bottom: 40px; 153 | } 154 | 155 | .footer-desc { 156 | font-size: 16px; 157 | line-height: 1.5; 158 | color: var(--gray2); 159 | margin-bottom: 30px; 160 | } 161 | 162 | .footer-top { 163 | padding-bottom: 70px; 164 | border-bottom: 1px solid var(--gray5); 165 | } 166 | 167 | .footer-bottom { 168 | margin-top: 40px; 169 | display: flex; 170 | justify-content: space-between; 171 | align-items: center; 172 | color: var(--gray4); 173 | gap: 20px; 174 | } 175 | 176 | .footer-sn-list { 177 | display: flex; 178 | align-items: center; 179 | gap: 14px; 180 | } 181 | 182 | /* Subscribe */ 183 | .subscribe { 184 | display: flex; 185 | align-items: center; 186 | justify-content: space-between; 187 | border-radius: 100rem; 188 | border: 2px solid var(--gray5); 189 | padding: 8px; 190 | } 191 | 192 | .subscribe-email { 193 | font-size: 16px; 194 | line-height: 1.5; 195 | color: var(--black-color); 196 | font-weight: 500; 197 | padding-inline: 18px; 198 | width: 100%; 199 | } 200 | 201 | .subscribe-email::-webkit-input-placeholder { 202 | color: var(--gray4); 203 | } 204 | 205 | .subscribe-email::-moz-input-placeholder { 206 | color: var(--gray4); 207 | } 208 | 209 | .subscribe-button { 210 | width: 33px; 211 | height: 33px; 212 | border-radius: 100rem; 213 | background-color: var(--primary-color); 214 | display: flex; 215 | justify-content: center; 216 | align-items: center; 217 | flex-shrink: 0; 218 | } 219 | 220 | .top-tours { 221 | margin-bottom: 70px; 222 | } 223 | 224 | .tour-list { 225 | display: flex; 226 | flex-direction: row; 227 | align-items: stretch; 228 | flex-wrap: wrap; 229 | gap: 30px; 230 | } 231 | .tour-item { 232 | background-color: white; 233 | border-radius: 10px; 234 | word-break: break-word; 235 | box-shadow: 0px 12px 64px rgba(0, 0, 0, 0.06); 236 | display: flex; 237 | align-items: stretch; 238 | justify-content: flex-start; 239 | flex-direction: column; 240 | flex-wrap: nowrap; 241 | gap: 0; 242 | flex: 1; 243 | } 244 | .tour-image { 245 | border-radius: 10px 10px 0 0; 246 | width: 100%; 247 | height: 239px; 248 | object-fit: cover; 249 | display: block; 250 | } 251 | .tour-content { 252 | padding: 20px 20px 14px 20px; 253 | flex: 1; 254 | display: flex; 255 | align-items: flex-start; 256 | flex-direction: column; 257 | border-radius: 0 0 10px 10px; 258 | } 259 | .tour-title { 260 | --primary-color: #23262f; 261 | margin-bottom: 20px; 262 | color: var(--primary-color); 263 | font-weight: 500; 264 | font-size: 18px; 265 | line-height: 1.556; 266 | } 267 | .tour-rating { 268 | display: flex; 269 | justify-content: space-between; 270 | align-items: center; 271 | margin-top: auto; 272 | margin-bottom: 20px; 273 | } 274 | .tour-review { 275 | display: flex; 276 | align-items: center; 277 | column-gap: 11px; 278 | } 279 | .tour-duration, .tour-review-count { 280 | color: #353945; 281 | } 282 | .tour-button { 283 | font-size: 14px; 284 | font-weight: 500; 285 | color: white; 286 | padding: 8px 17px; 287 | background-color: var(--primary-color); 288 | text-decoration: none; 289 | border-radius: 8px; 290 | line-height: 17px; 291 | display: inline-block; 292 | } 293 | .tour-top { 294 | position: relative; 295 | } 296 | .tour-price { 297 | position: absolute; 298 | top: 24px; 299 | left: 30px; 300 | display: inline-block; 301 | font-size: 12px; 302 | font-weight: 500; 303 | color: #fcfcfd; 304 | background-color: rgba(53, 57, 69, 0.8); 305 | padding: 5px 16px; 306 | line-height: 20px; 307 | border-radius: 4px; 308 | } 309 | @media screen and (max-width: 767.98px) { 310 | .tour-list { 311 | display: grid; 312 | grid-auto-flow: column; 313 | grid-auto-columns: 320px; 314 | overflow-x: auto; 315 | padding: 0 30px 30px; 316 | scroll-snap-type: x mandatory; 317 | scroll-snap-stop: always; 318 | } 319 | .tour-item { 320 | scroll-snap-align: center; 321 | } 322 | } 323 | 324 | /* Popular */ 325 | /* align-items: start end center baseline stretch ; 326 | justify-content: start end center space-around space-between 327 | */ 328 | /* track-line: 1 -1 */ 329 | /* grid-template-columns: value value value ... n-value; */ 330 | /* grid-template-columns: 270px 270px 270px 270px; 331 | grid-template-columns: 25% 25% 25% 25%; */ 332 | /* grid-template-columns: 1fr 1fr 1fr 1fr; 333 | grid-template-columns: repeat(4, 1fr); */ 334 | /* grid-template-columns: 200px repeat(2, 1fr) 300px; */ 335 | /* grid-auto-flow: column; */ 336 | /* grid-auto-columns: 1fr; */ 337 | /* 1fr = fraction unit */ 338 | .popular-list { 339 | display: grid; 340 | grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); 341 | gap: 30px; 342 | margin-bottom: 40px; 343 | } 344 | .popular-item { 345 | border-radius: 14px; 346 | overflow: hidden; 347 | background-color: white; 348 | box-shadow: 0px 12px 64px rgba(0, 0, 0, 0.06); 349 | } 350 | .popular-label { 351 | display: inline-block; 352 | font-weight: 500; 353 | font-size: 12px; 354 | line-height: 15px; 355 | color: var(--gray6); 356 | padding: 4px 18px; 357 | border-radius: 100rem; 358 | background-color: var(--primary-color); 359 | position: absolute; 360 | right: 20px; 361 | bottom: 0; 362 | transform: translateY(50%); 363 | } 364 | .popular-image { 365 | height: 185px; 366 | position: relative; 367 | } 368 | .popular-img { 369 | width: 100%; 370 | height: 100%; 371 | object-fit: cover; 372 | } 373 | .popular-content { 374 | padding: 14px 20px; 375 | } 376 | .popular-time { 377 | color: var(--gray3); 378 | font-weight: 400; 379 | font-size: 9px; 380 | line-height: 11px; 381 | margin-bottom: 8px; 382 | display: block; 383 | } 384 | .popular-title { 385 | color: var(--gray2); 386 | font-weight: 500; 387 | font-size: 18px; 388 | line-height: 28px; 389 | margin-bottom: 9px; 390 | } 391 | .popular-review { 392 | display: flex; 393 | align-items: flex-start; 394 | font-weight: 500; 395 | font-size: 12px; 396 | line-height: 21px; 397 | color: var(--gray4f); 398 | gap: 4px; 399 | font-family: var(--secondary-font); 400 | } 401 | @media screen and (min-width: 1024px) { 402 | .popular-list { 403 | margin-bottom: 70px; 404 | } 405 | } 406 | 407 | /* Gems */ 408 | .gem-list { 409 | display: grid; 410 | grid-template-rows: 300px 300px 150px; 411 | grid-template-columns: repeat(3, 1fr); 412 | gap: 15px; 413 | grid-template-areas: "area1 area1 area2" "area1 area1 area3" "area4 area5 area5"; 414 | /* 415 | area1 area1 area2 416 | area1 area1 area3 417 | area4 area5 area5 418 | */ 419 | } 420 | @media screen and (max-width: 767.98px) { 421 | .gem-list { 422 | grid-template-areas: "area5 area5 area4" "area5 area5 area2" "area3 area1 area1"; 423 | } 424 | } 425 | 426 | .gem-item img { 427 | width: 100%; 428 | height: 100%; 429 | object-fit: cover; 430 | border-radius: 8px; 431 | } 432 | 433 | .gem-item:nth-child(1) { 434 | grid-area: area1; 435 | } 436 | 437 | .gem-item:nth-child(2) { 438 | grid-area: area2; 439 | } 440 | 441 | .gem-item:nth-child(3) { 442 | grid-area: area3; 443 | } 444 | 445 | .gem-item:nth-child(4) { 446 | grid-area: area4; 447 | } 448 | 449 | .gem-item:nth-child(5) { 450 | grid-area: area5; 451 | } 452 | 453 | /* diamond */ 454 | .diamond { 455 | padding: 65px 0; 456 | background-color: #fcfcfc; 457 | } 458 | 459 | .diamond .heading { 460 | text-align: center; 461 | } 462 | 463 | .diamond-list { 464 | max-width: 998px; 465 | margin: 0 auto; 466 | display: grid; 467 | grid-template-columns: 1fr 1fr; 468 | grid-template-rows: 220px 220px; 469 | gap: 30px; 470 | } 471 | 472 | .diamond-item { 473 | background-color: #ffffff; 474 | box-shadow: 0px 30px 110px rgba(0, 0, 0, 0.08); 475 | border-radius: 14px; 476 | padding: 12px; 477 | } 478 | 479 | .diamond-item img { 480 | width: 100%; 481 | height: 100%; 482 | object-fit: cover; 483 | border-radius: inherit; 484 | } 485 | 486 | .diamond-all { 487 | margin: 70px auto 0; 488 | font-size: 24px; 489 | padding: 9px 40px; 490 | line-height: 1.5; 491 | pointer-events: none; 492 | } 493 | 494 | .diamond-image { 495 | position: relative; 496 | width: 100%; 497 | height: 100%; 498 | border-radius: inherit; 499 | } 500 | 501 | .diamond-content { 502 | background: linear-gradient(3.19deg, rgba(0, 0, 0, 0.6) 17.99%, rgba(0, 0, 0, 0) 55.56%); 503 | position: absolute; 504 | top: 0; 505 | right: 0; 506 | bottom: 0; 507 | left: 0; 508 | border-radius: inherit; 509 | padding-left: 30px; 510 | padding-bottom: 14px; 511 | color: white; 512 | display: flex; 513 | align-items: flex-end; 514 | } 515 | 516 | .grid-layout { 517 | display: grid; 518 | grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 519 | grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 520 | gap: 20px; 521 | margin-bottom: 40px; 522 | } 523 | .grid-item { 524 | aspect-ratio: 1/1; 525 | box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 526 | display: flex; 527 | align-items: center; 528 | justify-content: center; 529 | flex-direction: row; 530 | flex-wrap: nowrap; 531 | gap: 0; 532 | } 533 | 534 | .my-name { 535 | text-align: center; 536 | position: relative; 537 | } 538 | .my-name:before { 539 | content: ""; 540 | width: 100%; 541 | height: 1px; 542 | background-color: black; 543 | left: 0; 544 | position: absolute; 545 | top: 50%; 546 | transform: translateY(-50%); 547 | } 548 | .my-name span { 549 | position: relative; 550 | z-index: 2; 551 | background-color: white; 552 | padding: 5px; 553 | } 554 | 555 | .button-rounded { 556 | width: 50px; 557 | height: 50px; 558 | border-radius: 100rem; 559 | display: flex; 560 | justify-content: center; 561 | align-items: center; 562 | color: #6a5af9; 563 | position: relative; 564 | cursor: pointer; 565 | } 566 | .button-rounded:before { 567 | content: ""; 568 | position: absolute; 569 | inset: 0; 570 | border-radius: inherit; 571 | background-color: currentColor; 572 | opacity: 0.1; 573 | } 574 | 575 | .bag-icon { 576 | display: inline-block; 577 | position: relative; 578 | color: red; 579 | } 580 | .bag-icon:before { 581 | content: ""; 582 | position: absolute; 583 | right: 0; 584 | top: 0; 585 | width: 10px; 586 | height: 10px; 587 | background-color: currentColor; 588 | border: 1px solid white; 589 | border-radius: 100rem; 590 | } 591 | 592 | button.pointer { 593 | cursor: not-allowed; 594 | } 595 | button.pointer span { 596 | cursor: pointer; 597 | pointer-events: none; 598 | } 599 | 600 | .column { 601 | column-count: 3; 602 | column-gap: 50px; 603 | column-width: 200px; 604 | column-rule: 5px dotted orange; 605 | } 606 | .column h3 { 607 | column-span: all; 608 | } 609 | 610 | .boxed { 611 | width: 100px; 612 | height: 100px; 613 | background-color: white; 614 | box-shadow: 5px 5px red; 615 | } 616 | 617 | .text-indent { 618 | text-indent: 5px; 619 | } 620 | 621 | .box-overflow { 622 | width: 200px; 623 | height: 200px; 624 | background-color: #6a5af9; 625 | color: black; 626 | overflow: auto; 627 | overflow-x: scroll; 628 | overflow-y: hidden; 629 | } 630 | 631 | .image-ratio { 632 | aspect-ratio: 1.34/1; 633 | } 634 | .image-ratio-wrapper { 635 | max-width: 500px; 636 | } 637 | 638 | .counter { 639 | /* Set "section" to 0 */ 640 | counter-reset: section; 641 | } 642 | .counter h1 { 643 | /* Set "subsection" to 0 */ 644 | counter-reset: subsection; 645 | } 646 | .counter h1::before { 647 | counter-increment: section; 648 | content: "Section " counter(section) ": "; 649 | } 650 | .counter h2::before { 651 | counter-increment: subsection; 652 | content: counter(section) "." counter(subsection) " "; 653 | } 654 | 655 | .item-image { 656 | width: clamp(300px, 50%, 500px); 657 | } 658 | 659 | .title-clamp { 660 | font-weight: bold; 661 | font-size: clamp(25px, 2vw + 16px, 40px); 662 | } 663 | 664 | .card-item-wrapper { 665 | container-type: inline-size; 666 | container-name: card; 667 | max-width: 1000px; 668 | border: 1px solid black; 669 | } 670 | 671 | .card-item { 672 | display: flex; 673 | align-items: center; 674 | background-color: white; 675 | padding: 15px; 676 | border-radius: 12px; 677 | box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 678 | } 679 | .card-item img { 680 | width: 300px; 681 | height: 100%; 682 | object-fit: cover; 683 | border-radius: 8px; 684 | flex-shrink: 0; 685 | } 686 | .card-item-item-content { 687 | flex: 1; 688 | } 689 | @container card (max-width: 730px) { 690 | .card-item { 691 | flex-direction: column; 692 | } 693 | } 694 | 695 | @media screen and (min-width: 768px) { 696 | .footer-column:first-child { 697 | max-width: 268px; 698 | } 699 | } 700 | @media screen and (max-width: 767.98px) { 701 | .gem-list { 702 | grid-template-rows: 100px 100px 70px; 703 | } 704 | .popular-list { 705 | --columns: 1; 706 | } 707 | .heading { 708 | font-size: 18px; 709 | margin-bottom: 30px; 710 | } 711 | .tour-title { 712 | font-size: 16px; 713 | margin-bottom: 12px; 714 | } 715 | .tour-button, 716 | .tour-rating { 717 | font-size: 12px; 718 | } 719 | .tour-content { 720 | padding: 17px 17px 9px; 721 | } 722 | .tour-image { 723 | height: 211px; 724 | } 725 | .diamond { 726 | padding: 30px 0; 727 | } 728 | .diamond-list { 729 | grid-template-columns: 1fr; 730 | grid-template-rows: none; 731 | grid-auto-flow: row; 732 | grid-auto-rows: 148px; 733 | gap: 16px; 734 | } 735 | .diamond-item { 736 | padding: 8px; 737 | } 738 | .diamond-all { 739 | margin-top: 30px; 740 | margin-bottom: 0; 741 | font-size: 16px; 742 | padding: 4px 20px; 743 | } 744 | .footer { 745 | padding: 30px 0; 746 | } 747 | .footer-top { 748 | padding-bottom: 30px; 749 | } 750 | .footer-bottom, 751 | .footer-columns { 752 | flex-direction: column; 753 | } 754 | .footer-columns { 755 | gap: 40px; 756 | } 757 | } 758 | @media screen and (min-width: 768px) and (max-width: 1023.98px) { 759 | .popular-list, 760 | .tour-list { 761 | --columns: 2; 762 | } 763 | } 764 | 765 | /*# sourceMappingURL=main.css.map */ 766 | -------------------------------------------------------------------------------- /css/main.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../sass/abstracts/_variables.scss","../sass/base/_reset.scss","../sass/base/_general.scss","../sass/components/_button.scss","../sass/components/_typography.scss","../sass/layout/_header.scss","../sass/abstracts/_mixins.scss","../sass/layout/_footer.scss","../sass/pages/home/_top-tours.scss","../sass/pages/home/_popular.scss","../sass/pages/home/_gem.scss","../sass/pages/home/_diamond.scss","../sass/pages/home/_study.scss","../sass/pages/home/_responsive.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACdF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA;;;AAEF;EACE;;;ACvBF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AChBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACXF;EACE;EACA;EACA;EACA;EACA;;;ACLF;EACE;EACA;EACA;EACA;;AACA;ECkBA;EACA,aDlBgB;ECmBhB,iBDnBwB;ECoBxB,gBANiB;EAOjB,WANY;EAOZ,KDtBgC;;AAEhC;EACE;EACA;EACA,kBLTI;EKUJ;EACA;;AACA;EACE,kBLfU;EKgBV;;;AEhBN;AACA;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzFF;EACE;;;AAGA;EAIE;EACA;EACA;EACA;EAKA;;AAEF;EACE;EACA;EACA;EACA;EFCF;EACA,aEDgB;EFEhB,iBEFyB;EFGzB,gBEHwC;EFIxC,WANY;EAOZ,KELqC;EAGnC;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EFNF;EACA;EAEA;EEUE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAQF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EAEE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAIE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;;;;ACxHN;AAGA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAEA;AAAA;AAEA;AACA;AACA;AAIA;AAKE;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EH9CA;EACA;EGmDE;EACA;EACA;EACA;EACA;EACA;;AHhDA;EGmDA;IACE;;;;AC5FN;AACA;EACE;EACA;EACA;EACA;EACA,qBACE;AAGF;AAAA;AAAA;AAAA;AAAA;;AJoCA;EI7CF;IAeI,qBACE;;;;AAKN;EACE;EACA;EACA;EACA;;;AAiBA;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AC5CJ;AACA;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACxDA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;ENaF;EACA,aMbgB;ENchB,iBMdwB;ENexB,gBANiB;EAOjB,WANY;EAOZ,KATM;;;AMLR;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EN5DF,OM6DgB;EN5DhB,QM4DgB;EACd;EACA;EACA;;;AAGJ;EACE;;AACA;EACE;EACA;;;AAGJ;EACE;EACA;EACA;EACA;;AACA;EACE;;;AAGJ;ENnFE,OMoFc;ENnFd,QMmFc;EACd;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;AACA;EACE;;;AAGJ;AACE;EACA;;AAEA;AACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAGJ;EAGE;;;AAEF;EASE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAMF;EArBF;IAsBI;;;;AC5KJ;EACE;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;IACA;;EAGF;IACE;IACA;;EAEF;AAAA;IAEE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;IACA;IACA;IACA;IACA;;EAEF;IACE;;EAEF;IACE;IACA;IACA;IACA;;EAEF;IACE;;EAEF;IACE;;EAEF;AAAA;IAEE;;EAEF;IACE;;;AAGJ;EACE;AAAA;IAEE","file":"main.css"} -------------------------------------------------------------------------------- /gocast-ui/.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // See https://go.microsoft.com/fwlink/?LinkId=733558 3 | // for the documentation about the tasks.json format 4 | "version": "2.0.0", 5 | "tasks": [ 6 | { 7 | "label": "Running Sass", 8 | "type": "shell", 9 | "command": "sass ./sass:styles/ --watch" 10 | }, 11 | { 12 | "label": "Running Pug", 13 | "type": "shell", 14 | "command": "pug *.pug --pretty --watch" 15 | } 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /gocast-ui/images/icons/icon-message.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /gocast-ui/images/icons/icon-noti.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /gocast-ui/images/icons/icon-search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /gocast-ui/images/icons/icon-upload.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /gocast-ui/images/icons/icon-upload.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/html-css-master/c8df97a1229a64efebf8f000d12f1ff297bfd4e2/gocast-ui/images/icons/icon-upload.zip -------------------------------------------------------------------------------- /gocast-ui/images/img-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/html-css-master/c8df97a1229a64efebf8f000d12f1ff297bfd4e2/gocast-ui/images/img-circle.png -------------------------------------------------------------------------------- /gocast-ui/images/img-host-user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/html-css-master/c8df97a1229a64efebf8f000d12f1ff297bfd4e2/gocast-ui/images/img-host-user.png -------------------------------------------------------------------------------- /gocast-ui/images/img-man.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/html-css-master/c8df97a1229a64efebf8f000d12f1ff297bfd4e2/gocast-ui/images/img-man.png -------------------------------------------------------------------------------- /gocast-ui/images/img-rating.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/html-css-master/c8df97a1229a64efebf8f000d12f1ff297bfd4e2/gocast-ui/images/img-rating.png -------------------------------------------------------------------------------- /gocast-ui/images/img-vector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/html-css-master/c8df97a1229a64efebf8f000d12f1ff297bfd4e2/gocast-ui/images/img-vector.png -------------------------------------------------------------------------------- /gocast-ui/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/html-css-master/c8df97a1229a64efebf8f000d12f1ff297bfd4e2/gocast-ui/images/logo.png -------------------------------------------------------------------------------- /gocast-ui/index.pug: -------------------------------------------------------------------------------- 1 | extends ./views/layout/_dashboard 2 | append stylesheet 3 | link(rel="stylesheet", href="./styles/home.css") 4 | block title 5 | title GocastUI - HomePage 6 | block main 7 | .home-wrapper 8 | .home-left 9 | include ./views/modules/home/_popular-host 10 | include ./views/modules/home/_trending 11 | include ./views/modules/home/_feed 12 | .home-right 13 | include ./views/modules/home/_top-podcast 14 | include ./views/modules/home/_suggest-follow 15 | include ./views/modules/home/_listening-history 16 | include ./views/modules/home/_topics -------------------------------------------------------------------------------- /gocast-ui/playlist.pug: -------------------------------------------------------------------------------- 1 | extends ./views/layout/_dashboard 2 | append stylesheet 3 | link(rel="stylesheet", href="./styles/playlist.css") 4 | block title 5 | title GocastUI - Playlist 6 | block main 7 | .playlist 8 | each val in [1,2,3,4,5,6] 9 | +playlistItem 10 | -------------------------------------------------------------------------------- /gocast-ui/sass/abstracts/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | -------------------------------------------------------------------------------- /gocast-ui/sass/abstracts/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin bg($value: white) { 2 | background-color: $value; 3 | } 4 | @mixin placeholder($color: white) { 5 | &::-webkit-input-placeholder { 6 | color: $color; 7 | } 8 | &::-moz-input-placeholder { 9 | color: $color; 10 | } 11 | } 12 | 13 | @mixin size($width: 0, $height: $width) { 14 | width: $width; 15 | height: $height; 16 | } 17 | 18 | @mixin cover { 19 | width: 100%; 20 | height: 100%; 21 | object-fit: cover; 22 | } 23 | 24 | @mixin fw($value: "normal") { 25 | @if $value == "medium" { 26 | font-weight: 500; 27 | } @else if $value == "semibold" { 28 | font-weight: 600; 29 | } @else if $value == "bold" { 30 | font-weight: 700; 31 | } 32 | } 33 | 34 | @mixin flexBox($align: center, $justify: center, $gap: 0, $dir: row) { 35 | display: flex; 36 | align-items: $align; 37 | flex-direction: $dir; 38 | @if $justify { 39 | justify-content: $justify; 40 | } 41 | @if $gap { 42 | gap: $gap; 43 | } 44 | } 45 | 46 | @mixin rounded($value: "rounded") { 47 | @if $value == "rounded-lg" { 48 | border-radius: 8px; 49 | } @else if $value == "rounded-xl" { 50 | border-radius: 12px; 51 | } @else if $value == "rounded-full" { 52 | border-radius: 100rem; 53 | } @else if $value == "none" { 54 | border-radius: 0; 55 | } @else { 56 | border-radius: 4px; 57 | } 58 | } 59 | @mixin screenMinWidth($value) { 60 | @media screen and (min-width: $value) { 61 | @content; 62 | } 63 | } 64 | @mixin screenMaxWidth($value) { 65 | @media screen and (max-width: $value) { 66 | @content; 67 | } 68 | } 69 | 70 | @mixin textGradient() { 71 | color: transparent; 72 | background-clip: text; 73 | -webkit-background-clip: text; 74 | } 75 | -------------------------------------------------------------------------------- /gocast-ui/sass/abstracts/_variables.scss: -------------------------------------------------------------------------------- 1 | $font-primary: "IBM Plex Sans", sans-serif; 2 | $bg-color: #ffffff; 3 | $text-gray: #8393aa; 4 | $text-black1: #1c1e22; 5 | $graye9: #ebeff5; 6 | $gray1: #5e6064; 7 | $gray2: #a5a6b1; 8 | $gray37: #373a43; 9 | $gray-natural: #676a6f; 10 | $gray-natural1: #f8f8f8; 11 | $gray-natural2: #eff2f6; 12 | $gray-neutral1: #fcfcfc; 13 | $primary-color: #6e5fd3; 14 | $primary-black: #232333; 15 | $gradient: linear-gradient(92.29deg, #415ef4 0.33%, #7141ef 28.14%); 16 | 17 | :root { 18 | --primary-h: 248; // hue 19 | --primary-s: 57%; // saturation 20 | --primary-l: 60%; // light 21 | --primary-color: #6e5fd3; 22 | } 23 | -------------------------------------------------------------------------------- /gocast-ui/sass/app.scss: -------------------------------------------------------------------------------- 1 | @use "./base/reset"; 2 | @use "./base/typography"; 3 | @use "./base/general"; 4 | @use "./theme/dark"; 5 | @use "./components/button"; 6 | @use "./components/toggle"; 7 | @use "./layout"; 8 | -------------------------------------------------------------------------------- /gocast-ui/sass/base/_general.scss: -------------------------------------------------------------------------------- 1 | @use "../abstracts" as abst; 2 | .heading { 3 | --mb: 0; 4 | font-size: 16px; 5 | line-height: 1.5; 6 | @include abst.fw("semibold"); 7 | margin-bottom: var(--mb); 8 | } 9 | .widget { 10 | margin-bottom: 40px; 11 | &-header { 12 | display: flex; 13 | justify-content: space-between; 14 | align-items: center; 15 | margin-bottom: 20px; 16 | } 17 | &-heading { 18 | font-size: 16px; 19 | font-weight: 600; 20 | } 21 | &-view-all { 22 | font-size: 13px; 23 | color: abst.$gray2; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /gocast-ui/sass/base/_reset.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | } 6 | * { 7 | margin: 0; 8 | padding: 0; 9 | font: inherit; 10 | } 11 | img, 12 | picture, 13 | svg, 14 | video { 15 | display: block; 16 | max-width: 100%; 17 | } 18 | input, 19 | select, 20 | textarea { 21 | background-color: transparent; 22 | outline: none; 23 | } 24 | button { 25 | cursor: pointer; 26 | background-color: transparent; 27 | outline: none; 28 | border: 0; 29 | } 30 | body { 31 | min-height: 100vh; 32 | font-weight: 400; 33 | font-size: 16px; 34 | line-height: 1; 35 | } 36 | a { 37 | text-decoration: none; 38 | } 39 | ul, 40 | ol { 41 | list-style-type: none; 42 | } 43 | -------------------------------------------------------------------------------- /gocast-ui/sass/base/_typography.scss: -------------------------------------------------------------------------------- 1 | @use "../abstracts" as abst; 2 | body { 3 | font-family: abst.$font-primary; 4 | font-size: 15px; 5 | font-weight: 400; 6 | text-rendering: optimizeLegibility; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | h1, 11 | h2, 12 | h3, 13 | h4, 14 | h5, 15 | h6 { 16 | font-weight: 600; 17 | } 18 | -------------------------------------------------------------------------------- /gocast-ui/sass/components/_button.scss: -------------------------------------------------------------------------------- 1 | @use "../abstracts" as abst; 2 | .button { 3 | --gap: 10px; 4 | --fw: 600; 5 | --p: 8px 14px; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | gap: var(--gap); 10 | font-weight: var(--fw); 11 | padding: var(--p); 12 | border-radius: 8px; 13 | font-size: 15px; 14 | &--primary { 15 | color: abst.$gray-neutral1; 16 | background-color: abst.$primary-color; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /gocast-ui/sass/components/_toggle.scss: -------------------------------------------------------------------------------- 1 | @use "../abstracts" as abst; 2 | 3 | .toggle { 4 | &-main { 5 | @include abst.size(30px, 17px); 6 | @include abst.rounded("rounded-full"); 7 | @include abst.bg(abst.$gray2); 8 | padding: 1.5px 2px; 9 | cursor: pointer; 10 | transition: all 0.2s linear; 11 | } 12 | input { 13 | display: none; 14 | &:checked + .toggle-main .toggle-spinner { 15 | transform: translateX(12px); 16 | } 17 | &:checked + .toggle-main { 18 | background-image: abst.$gradient; 19 | } 20 | } 21 | &-spinner { 22 | @include abst.rounded("rounded-full"); 23 | background-color: white; 24 | width: 14px; 25 | aspect-ratio: 1; 26 | transition: all 0.2s linear; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /gocast-ui/sass/home.scss: -------------------------------------------------------------------------------- 1 | @use "./pages/home"; 2 | -------------------------------------------------------------------------------- /gocast-ui/sass/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./structure"; 2 | @forward "./topbar"; 3 | @forward "./sidebar"; 4 | @forward "./navigation"; 5 | -------------------------------------------------------------------------------- /gocast-ui/sass/layout/_navigation.scss: -------------------------------------------------------------------------------- 1 | .navigation { 2 | display: flex; 3 | justify-content: space-between; 4 | align-items: center; 5 | padding: 14px 24px; 6 | background-color: var(--navigation-bg, white); 7 | position: fixed; 8 | bottom: 0; 9 | left: 0; 10 | right: 0; 11 | z-index: 10; 12 | &-item { 13 | width: 44px; 14 | height: 44px; 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | &-upload { 20 | border-radius: 100rem; 21 | background-color: var(--primary-color); 22 | } 23 | @media screen and (min-width: 1280px) { 24 | display: none; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /gocast-ui/sass/layout/_sidebar.scss: -------------------------------------------------------------------------------- 1 | @use "../abstracts" as abst; 2 | .sidebar { 3 | padding: 48px 30px; 4 | @include abst.screenMaxWidth(1279.98px) { 5 | position: fixed; 6 | top: 0; 7 | left: 0; 8 | width: 300px; 9 | bottom: 0; 10 | z-index: 9; 11 | transition: transform 0.25s linear; 12 | transform: translateX(-100%); 13 | } 14 | } 15 | .logo { 16 | display: block; 17 | margin-bottom: 44px; 18 | color: var(--logo-color, #11142d); 19 | } 20 | .menu { 21 | display: flex; 22 | flex-direction: column; 23 | gap: 6px; 24 | --gap: 26px; 25 | &:not(:last-child):after { 26 | content: ""; 27 | display: block; 28 | height: 1px; 29 | margin-block: var(--gap); 30 | } 31 | &-heading { 32 | font-size: 13px; 33 | margin-bottom: 10px; 34 | color: abst.$text-gray; 35 | padding-left: 20px; 36 | } 37 | &-icon { 38 | flex: 0 0 24px; 39 | } 40 | &-link { 41 | display: flex; 42 | align-items: center; 43 | gap: 10px; 44 | font-size: 14px; 45 | line-height: 143%; 46 | font-weight: 500; 47 | padding: 8px 30px 8px 20px; 48 | border-radius: 12px; 49 | [fill^="#E5"] { 50 | fill: var(--icon-path, #e5eaf1); 51 | } 52 | &:hover { 53 | background: linear-gradient(92.29deg, #415ef4 0.33%, #7141ef 28.14%); 54 | color: white; 55 | [fill^="#E5"] { 56 | fill: white; 57 | opacity: 1; 58 | } 59 | [fill^="#A5"] { 60 | mix-blend-mode: normal; 61 | fill: hsl( 62 | var(--primary-h), 63 | calc(var(--primary-s) + 1%), 64 | calc(var(--primary-l) + 16%) 65 | ); 66 | } 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /gocast-ui/sass/layout/_structure.scss: -------------------------------------------------------------------------------- 1 | @use "../abstracts" as *; 2 | .wrapper { 3 | max-width: 1440px; 4 | margin: 0 auto; 5 | display: grid; 6 | grid-template-columns: 256px minmax(0, 1fr); 7 | min-height: 100vh; 8 | } 9 | .main-container { 10 | padding: 37px 56px; 11 | container-type: inline-size; 12 | container-name: mainContainer; 13 | } 14 | .button-discover { 15 | width: 40px; 16 | height: 40px; 17 | border-radius: 100rem; 18 | background-color: var(--primary-color); 19 | position: fixed; 20 | right: 24px; 21 | bottom: 80px; 22 | z-index: 10; 23 | --p: 0; 24 | display: none; 25 | } 26 | @include screenMaxWidth(1279.98px) { 27 | .button-discover { 28 | display: flex; 29 | } 30 | .wrapper { 31 | padding-bottom: 80px; 32 | grid-template-columns: 1fr; 33 | } 34 | .main-container { 35 | padding: 0 24px; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /gocast-ui/sass/layout/_topbar.scss: -------------------------------------------------------------------------------- 1 | @use "../abstracts" as abst; 2 | .topbar { 3 | padding: 24px 56px; 4 | display: flex; 5 | justify-content: space-between; 6 | align-items: center; 7 | &-logo { 8 | flex-shrink: 0; 9 | color: white; 10 | } 11 | &-right { 12 | display: flex; 13 | align-items: center; 14 | gap: 24px; 15 | & > * { 16 | flex-shrink: 0; 17 | } 18 | } 19 | } 20 | .profile { 21 | display: block; 22 | @include abst.size(48px); 23 | img { 24 | border-radius: 100rem; 25 | @include abst.cover(); 26 | } 27 | } 28 | .button-upload { 29 | height: 48px; 30 | --gap: 6px; 31 | --p: 0 16px; 32 | } 33 | .search { 34 | padding: 12px 20px; 35 | @include abst.rounded("rounded-xl"); 36 | @include abst.flexBox(center, null, 12px); 37 | flex: 0 1 360px; 38 | &-input { 39 | @include abst.bg(transparent); 40 | flex: 1; 41 | border: none; 42 | font-weight: 500; 43 | font-size: 15px; 44 | color: abst.$primary-color; 45 | caret-color: abst.$primary-color; 46 | @include abst.placeholder(abst.$gray2); 47 | } 48 | } 49 | 50 | @media screen and (min-width: 1280px) { 51 | .topbar-logo { 52 | display: none; 53 | } 54 | } 55 | @media screen and (max-width: 1279.98px) { 56 | .topbar { 57 | padding: 20px 24px; 58 | } 59 | .topbar-action, 60 | .search, 61 | .button-upload { 62 | display: none; 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /gocast-ui/sass/pages/home/_feed.scss: -------------------------------------------------------------------------------- 1 | @use "../../abstracts" as *; 2 | .feed { 3 | &-header { 4 | display: flex; 5 | justify-content: space-between; 6 | align-items: center; 7 | container-type: inline-size; 8 | container-name: feedHeader; 9 | margin-bottom: 40px; 10 | } 11 | &-tab { 12 | display: flex; 13 | white-space: nowrap; 14 | &-item { 15 | cursor: pointer; 16 | font-weight: 500; 17 | font-size: 14px; 18 | line-height: 1.43; 19 | color: $gray1; 20 | padding: 10px; 21 | border-bottom: 1px solid $gray37; 22 | } 23 | &-item.is-active { 24 | color: $primary-color; 25 | border-bottom-color: currentColor; 26 | font-weight: 600; 27 | } 28 | } 29 | &-toggle { 30 | display: flex; 31 | align-items: center; 32 | gap: 10px; 33 | color: var(--toggle-text, $gray1); 34 | font-size: 14px; 35 | font-weight: 500; 36 | } 37 | @container feedHeader (max-width: 470px) { 38 | &-toggle p { 39 | display: none; 40 | } 41 | } 42 | &-main { 43 | container-type: inline-size; 44 | container-name: feedMain; 45 | } 46 | &-item { 47 | border: 1px solid var(--feed-border, #f0f3f6); 48 | border-radius: 10px; 49 | margin-bottom: 30px; 50 | & > * { 51 | padding: 20px; 52 | } 53 | &-header { 54 | display: flex; 55 | justify-content: space-between; 56 | align-items: center; 57 | } 58 | &-main { 59 | border-top: 1px solid var(--feed-border, #f0f3f6); 60 | border-bottom: 1px solid var(--feed-border, #f0f3f6); 61 | display: flex; 62 | align-items: center; 63 | flex-direction: column; 64 | gap: 20px; 65 | } 66 | &-footer { 67 | display: flex; 68 | justify-content: space-between; 69 | align-items: center; 70 | .button { 71 | font-size: 14px; 72 | } 73 | } 74 | &-podcast { 75 | color: #a6a7b2; 76 | font-weight: 400; 77 | line-height: 1.5; 78 | margin-bottom: 6px; 79 | font-size: 14px; 80 | } 81 | &-heading { 82 | line-height: 1.5; 83 | font-size: 14px; 84 | } 85 | &-desc { 86 | line-height: 1.5; 87 | font-weight: 400; 88 | font-size: 13px; 89 | margin-top: 16px; 90 | } 91 | } 92 | &-image { 93 | flex: 0 0 152px; 94 | overflow: hidden; 95 | aspect-ratio: 1; 96 | width: 100%; 97 | img { 98 | width: 100%; 99 | height: 100%; 100 | object-fit: cover; 101 | border-radius: 10px; 102 | } 103 | } 104 | &-author { 105 | display: flex; 106 | align-items: center; 107 | gap: 16px; 108 | &-verify { 109 | position: absolute; 110 | z-index: 2; 111 | bottom: 0; 112 | right: 0; 113 | } 114 | &-avatar { 115 | width: 48px; 116 | height: 48px; 117 | flex: 0 0 48px; 118 | position: relative; 119 | img { 120 | width: 100%; 121 | height: 100%; 122 | object-fit: cover; 123 | border-radius: 100rem; 124 | } 125 | } 126 | &-rating { 127 | display: flex; 128 | align-items: center; 129 | margin-top: 2px; 130 | margin-bottom: 4px; 131 | gap: 4px; 132 | color: #a6a7b2; 133 | } 134 | } 135 | &-date { 136 | color: #a6a7b2; 137 | font-weight: 400; 138 | } 139 | &-actions { 140 | display: flex; 141 | align-items: center; 142 | gap: 20px; 143 | } 144 | 145 | @container feedMain (min-width: 500px) { 146 | &-item { 147 | &-main { 148 | flex-direction: row; 149 | } 150 | } 151 | &-author { 152 | &-header { 153 | display: flex; 154 | align-items: center; 155 | gap: 4px; 156 | margin-bottom: 4px; 157 | } 158 | &-rating { 159 | gap: 10px; 160 | margin: 0; 161 | } 162 | } 163 | } 164 | } 165 | -------------------------------------------------------------------------------- /gocast-ui/sass/pages/home/_follow.scss: -------------------------------------------------------------------------------- 1 | .follow { 2 | display: flex; 3 | justify-content: space-between; 4 | align-items: center; 5 | &-list { 6 | display: flex; 7 | flex-direction: column; 8 | 9 | gap: 20px; 10 | } 11 | &-user { 12 | display: flex; 13 | align-items: center; 14 | gap: 12px; 15 | &-username { 16 | color: #a6a7b2; 17 | font-size: 13px; 18 | font-weight: 400; 19 | line-height: 1.5; 20 | margin-top: 4px; 21 | } 22 | &-avatar { 23 | flex: 0 0 46px; 24 | aspect-ratio: 1; 25 | border-radius: 8px; 26 | box-shadow: 0 0 0 2px var(--bg-body-color), 0 0 0 3px pink; 27 | img { 28 | width: 100%; 29 | height: 100%; 30 | object-fit: cover; 31 | border-radius: inherit; 32 | } 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /gocast-ui/sass/pages/home/_host.scss: -------------------------------------------------------------------------------- 1 | @use "../../abstracts" as abst; 2 | .host { 3 | padding-bottom: 28px; 4 | &-heading { 5 | --mb: 20px; 6 | } 7 | &-list { 8 | --gap: 12px; 9 | @include abst.flexBox(flex-start, space-between, var(--gap), null); 10 | } 11 | &-item { 12 | --gap: 6px; 13 | --avatar-size: 44px; 14 | @include abst.flexBox(center, null, var(--gap), column); 15 | @include abst.screenMinWidth(768px) { 16 | --gap: 7px; 17 | --avatar-size: 64px; 18 | } 19 | } 20 | &-avatar { 21 | @include abst.size(var(--avatar-size)); 22 | @include abst.rounded("rounded-full"); 23 | @include abst.flexBox(flex-end, center); 24 | overflow: hidden; 25 | position: relative; 26 | background-color: var(--color); 27 | box-shadow: 0 0 0 2px var(--bg-body-color), 0 0 0 3px var(--color); 28 | img { 29 | position: relative; 30 | z-index: 2; 31 | } 32 | } 33 | &-name { 34 | font-size: 14px; 35 | } 36 | @media screen and (max-width: 767.98px) { 37 | padding-bottom: 0; 38 | } 39 | @container mainContainer (max-width: 420px) { 40 | &-heading { 41 | --mb: 12px; 42 | } 43 | &-list { 44 | display: grid; 45 | grid-auto-columns: 55px; 46 | grid-auto-flow: column; 47 | overflow-x: auto; 48 | overflow-y: hidden; 49 | scroll-snap-type: x mandatory; 50 | scroll-snap-stop: always; 51 | padding: 10px 0; 52 | &::-webkit-scrollbar { 53 | display: none; 54 | width: 0; 55 | } 56 | & > * { 57 | scroll-snap-align: start; 58 | } 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /gocast-ui/sass/pages/home/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./host"; 2 | @forward "./trending"; 3 | @forward "./feed"; 4 | @forward "./top-podcast"; 5 | @forward "./follow"; 6 | @forward "./listening"; 7 | @forward "./_topics"; 8 | .home-wrapper { 9 | @container mainContainer (min-width: 790px) { 10 | display: grid; 11 | grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); 12 | gap: 60px; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /gocast-ui/sass/pages/home/_listening.scss: -------------------------------------------------------------------------------- 1 | .listen { 2 | display: flex; 3 | align-items: center; 4 | gap: 10px; 5 | &-list { 6 | display: flex; 7 | flex-direction: column; 8 | gap: 18px; 9 | } 10 | &-meta { 11 | display: flex; 12 | align-items: center; 13 | gap: 16px; 14 | &-item { 15 | display: flex; 16 | align-items: center; 17 | gap: 6px; 18 | color: #a6a7b2; 19 | } 20 | } 21 | &-title { 22 | font-weight: 500; 23 | line-height: 1.5; 24 | margin-bottom: 4px; 25 | margin-top: 4px; 26 | } 27 | &-image { 28 | flex: 0 0 109px; 29 | height: 67px; 30 | width: 100%; 31 | img { 32 | width: 100%; 33 | height: 100%; 34 | object-fit: cover; 35 | border-radius: 10px; 36 | } 37 | } 38 | &-info { 39 | flex: 1; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /gocast-ui/sass/pages/home/_top-podcast.scss: -------------------------------------------------------------------------------- 1 | .top-podcast { 2 | &-images { 3 | gap: 12px; 4 | display: grid; 5 | grid-template-columns: repeat(4, minmax(0, 1fr)); 6 | img { 7 | aspect-ratio: 1; 8 | object-fit: cover; 9 | border-radius: 10px; 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /gocast-ui/sass/pages/home/_topics.scss: -------------------------------------------------------------------------------- 1 | .topic { 2 | position: relative; 3 | border-radius: 10px; 4 | overflow: hidden; 5 | &-list { 6 | display: grid; 7 | grid-template-columns: repeat(2, minmax(0, 1fr)); 8 | grid-gap: 12px 22px; 9 | } 10 | &-image { 11 | width: 100%; 12 | height: 86px; 13 | object-fit: cover; 14 | border-radius: inherit; 15 | } 16 | &-content { 17 | position: absolute; 18 | inset: 0; 19 | border-radius: inherit; 20 | background-color: hsla(0deg, 0%, 0%, 0.7); 21 | color: white; 22 | padding: 10px; 23 | display: flex; 24 | flex-direction: column; 25 | justify-content: flex-end; 26 | } 27 | &-title { 28 | font-size: 14px; 29 | font-weight: 500; 30 | line-height: 1.5; 31 | } 32 | &-podcast { 33 | line-height: 1.5; 34 | font-size: 13px; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /gocast-ui/sass/pages/home/_trending.scss: -------------------------------------------------------------------------------- 1 | @use "../../abstracts" as abst; 2 | .trending { 3 | padding: 55px 0 36px; 4 | container-type: inline-size; 5 | container-name: trending; 6 | &-heading { 7 | --mb: 11px; 8 | } 9 | &-banner { 10 | padding: 20px; 11 | border-radius: 10px; 12 | display: flex; 13 | align-items: flex-start; 14 | position: relative; 15 | } 16 | &-content { 17 | flex: 0 0 310px; 18 | } 19 | &-title { 20 | font-size: 22px; 21 | line-height: 1.45; 22 | margin-bottom: 11px; 23 | span { 24 | @include abst.textGradient(); 25 | background-image: abst.$gradient; 26 | } 27 | } 28 | &-podcast { 29 | font-size: 14px; 30 | color: var(--trending-podcast, #676a6f); 31 | margin-bottom: 4px; 32 | } 33 | &-author { 34 | font-size: 14px; 35 | color: var(--trending-author, abst.$primary-black); 36 | margin-bottom: 20px; 37 | span { 38 | color: abst.$gray-natural; 39 | } 40 | } 41 | &-image { 42 | position: absolute; 43 | right: 0; 44 | max-width: 332px; 45 | bottom: 0; 46 | right: 15px; 47 | } 48 | &-vector, 49 | &-circle { 50 | position: absolute; 51 | } 52 | &-vector { 53 | right: 5%; 54 | top: 5%; 55 | } 56 | &-circle { 57 | right: 45%; 58 | bottom: 0; 59 | } 60 | @include abst.screenMaxWidth(767px) { 61 | padding: 35px 0 25px; 62 | &-circle { 63 | right: 15px; 64 | } 65 | } 66 | @container trending (max-width: 630px) { 67 | &-image { 68 | display: none; 69 | } 70 | &-content { 71 | flex: 1; 72 | } 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /gocast-ui/sass/playlist.scss: -------------------------------------------------------------------------------- 1 | .playlist { 2 | display: grid; 3 | grid-template-columns: 1fr 1fr; 4 | gap: 30px 32px; 5 | // container-type: inline-size; 6 | // container-name: playlist; 7 | @container mainContainer (max-width: 520px) { 8 | grid-template-columns: 1fr; 9 | } 10 | &-item { 11 | border-radius: 10px; 12 | background: var(--playlist-bg, #fff); 13 | box-shadow: var( 14 | --playlist-shadow, 15 | -10px 24px 35px 0px rgba(227, 230, 236, 0.25), 16 | -1px -3px 14px 0px rgba(227, 230, 236, 0.2) 17 | ); 18 | display: flex; 19 | padding: 14px 20px; 20 | align-items: flex-start; 21 | gap: 10px; 22 | @container mainContainer (max-width: 900px) { 23 | flex-direction: column; 24 | gap: 32px; 25 | } 26 | } 27 | &-image { 28 | width: 100%; 29 | flex: 0 0 130px; 30 | height: 130px; 31 | img { 32 | width: 100%; 33 | height: 100%; 34 | object-fit: cover; 35 | object-fit: cover; 36 | border-radius: 10px; 37 | } 38 | } 39 | &-content { 40 | display: flex; 41 | flex-direction: column; 42 | gap: 12px; 43 | flex: 1; 44 | } 45 | &-top { 46 | display: flex; 47 | justify-content: space-between; 48 | align-items: center; 49 | gap: 12px; 50 | } 51 | &-title { 52 | font-size: 16px; 53 | font-weight: 500; 54 | display: -webkit-box; 55 | -webkit-line-clamp: 1; 56 | -webkit-box-orient: vertical; 57 | overflow: hidden; 58 | text-overflow: ellipsis; 59 | word-break: break-word; 60 | color: var(--playlist-title, #1b1d21); 61 | } 62 | &-date, 63 | &-desc { 64 | font-size: 13px; 65 | font-weight: 400; 66 | color: var(--playlist-date, #5f6164); 67 | } 68 | &-date { 69 | flex-shrink: 0; 70 | } 71 | &-desc { 72 | line-height: 1.5; 73 | } 74 | &-bottom { 75 | display: flex; 76 | justify-content: space-between; 77 | align-items: center; 78 | } 79 | &-episodes { 80 | display: flex; 81 | align-items: center; 82 | } 83 | &-episode-image { 84 | width: 44px; 85 | aspect-ratio: 1; 86 | border-radius: 100rem; 87 | object-fit: cover; 88 | border: 2px solid var(--playlist-episode-border, white); 89 | } 90 | &-episode-number { 91 | width: 44px; 92 | aspect-ratio: 1; 93 | border-radius: 100rem; 94 | display: flex; 95 | justify-content: center; 96 | align-items: center; 97 | background: var(--playlist-episode-number, #f0f3f6); 98 | color: var(--playlist-title, #5f6164); 99 | border: 2px solid var(--playlist-episode-border, white); 100 | font-size: 13px; 101 | } 102 | &-likes { 103 | display: flex; 104 | align-items: center; 105 | gap: 4px; 106 | } 107 | &-likes-count { 108 | color: var(--playlist-like, #a6a7b2); 109 | font-size: 13px; 110 | font-weight: 500; 111 | } 112 | &-episode-item { 113 | &:not(:first-child) { 114 | margin-left: -20px; 115 | } 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /gocast-ui/sass/theme/_dark.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg-body-color: white; 3 | --sidebar-line: #e9eef4; 4 | --search-bg: #f0f3f6; 5 | --menu-text: #8494ab; 6 | --global-text: #1b1d21; 7 | --trending-bg: #f8f8f8; 8 | --host-name: #5f6164; 9 | } 10 | body { 11 | color: var(--global-text); 12 | } 13 | body, 14 | .sidebar, 15 | .topbar { 16 | background-color: var(--bg-body-color); 17 | } 18 | .sidebar { 19 | border-right: 1px solid var(--sidebar-line); 20 | } 21 | .menu { 22 | &-link { 23 | color: var(--menu-text); 24 | } 25 | &:not(:last-child):after { 26 | background-color: var(--sidebar-line); 27 | } 28 | } 29 | .search { 30 | background-color: var(--search-bg); 31 | } 32 | .trending { 33 | &-banner { 34 | background-color: var(--trending-bg); 35 | } 36 | } 37 | .host { 38 | &-name { 39 | color: var(--host-name); 40 | } 41 | } 42 | @media (prefers-color-scheme: dark) { 43 | :root { 44 | // method 1 45 | --bg-body-color: #242731; 46 | --sidebar-line: #373a43; 47 | --search-bg: #373a43; 48 | --menu-text: #ababad; 49 | --global-text: white; 50 | --trending-bg: #050f16; 51 | --host-name: #e4e4e4; 52 | // method 2 53 | --trending-podcast: #a6a7b2; 54 | --trending-author: white; 55 | --feed-border: #373a43; 56 | --toggle-text: white; 57 | --logo-color: white; 58 | --icon-path: #676a6f; 59 | --navigation-bg: #242731; 60 | --playlist-bg: #242731; 61 | --playlist-shadow: -10px 24px 35px 0px rgba(8, 8, 9, 0.25), 62 | -1px -3px 14px 0px rgba(15, 20, 39, 0.2); 63 | --playlist-title: white; 64 | --playlist-date: #a6a7b2; 65 | --playlist-episode-border: #242731; 66 | --playlist-episode-number: #373a43; 67 | } 68 | } 69 | html.dark { 70 | // method 1 71 | --bg-body-color: #242731; 72 | --sidebar-line: #373a43; 73 | --search-bg: #373a43; 74 | --menu-text: #ababad; 75 | --global-text: white; 76 | --trending-bg: #050f16; 77 | --host-name: #e4e4e4; 78 | // method 2 79 | --trending-podcast: #a6a7b2; 80 | --trending-author: white; 81 | --feed-border: #373a43; 82 | --toggle-text: white; 83 | --logo-color: white; 84 | --icon-path: #676a6f; 85 | --navigation-bg: #242731; 86 | } 87 | -------------------------------------------------------------------------------- /gocast-ui/sass/vendor/_priority.scss: -------------------------------------------------------------------------------- 1 | // inline - id - class - tags 2 | // 0 1 0 3 | .header { 4 | color: red; 5 | } 6 | // 1 0 0 7 | #header { 8 | color: orange; 9 | } 10 | // 0 0 1 11 | header { 12 | color: blue; 13 | } 14 | // 0 1 1 15 | header[data-name="link"] { 16 | } 17 | // Selector Specificity: id class-attributes tags 18 | // 0 1 0 19 | // 0 1 1 20 | // override 21 | .content-area .posts-loop .entry-thumbnail img { 22 | } 23 | body:not(.single) .posts-loop .entry-thumbnail img { 24 | } 25 | // wordpress 26 | .posts-loop .entry-thumbnail img { 27 | } 28 | body .slick-initialized .slick-slide { 29 | width: 200px !important; 30 | } 31 | .slick-slide { 32 | } 33 | .slick-initialized.slider .slick-slide { 34 | float: none; 35 | } 36 | -------------------------------------------------------------------------------- /gocast-ui/styles/app.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | } 6 | 7 | * { 8 | margin: 0; 9 | padding: 0; 10 | font: inherit; 11 | } 12 | 13 | img, 14 | picture, 15 | svg, 16 | video { 17 | display: block; 18 | max-width: 100%; 19 | } 20 | 21 | input, 22 | select, 23 | textarea { 24 | background-color: transparent; 25 | outline: none; 26 | } 27 | 28 | button { 29 | cursor: pointer; 30 | background-color: transparent; 31 | outline: none; 32 | border: 0; 33 | } 34 | 35 | body { 36 | min-height: 100vh; 37 | font-weight: 400; 38 | font-size: 16px; 39 | line-height: 1; 40 | } 41 | 42 | a { 43 | text-decoration: none; 44 | } 45 | 46 | ul, 47 | ol { 48 | list-style-type: none; 49 | } 50 | 51 | :root { 52 | --primary-h: 248; 53 | --primary-s: 57%; 54 | --primary-l: 60%; 55 | --primary-color: #6e5fd3; 56 | } 57 | 58 | body { 59 | font-family: "IBM Plex Sans", sans-serif; 60 | font-size: 15px; 61 | font-weight: 400; 62 | text-rendering: optimizeLegibility; 63 | -webkit-font-smoothing: antialiased; 64 | -moz-osx-font-smoothing: grayscale; 65 | } 66 | 67 | h1, 68 | h2, 69 | h3, 70 | h4, 71 | h5, 72 | h6 { 73 | font-weight: 600; 74 | } 75 | 76 | .heading { 77 | --mb: 0; 78 | font-size: 16px; 79 | line-height: 1.5; 80 | font-weight: 600; 81 | margin-bottom: var(--mb); 82 | } 83 | 84 | .widget { 85 | margin-bottom: 40px; 86 | } 87 | .widget-header { 88 | display: flex; 89 | justify-content: space-between; 90 | align-items: center; 91 | margin-bottom: 20px; 92 | } 93 | .widget-heading { 94 | font-size: 16px; 95 | font-weight: 600; 96 | } 97 | .widget-view-all { 98 | font-size: 13px; 99 | color: #a5a6b1; 100 | } 101 | 102 | :root { 103 | --bg-body-color: white; 104 | --sidebar-line: #e9eef4; 105 | --search-bg: #f0f3f6; 106 | --menu-text: #8494ab; 107 | --global-text: #1b1d21; 108 | --trending-bg: #f8f8f8; 109 | --host-name: #5f6164; 110 | } 111 | 112 | body { 113 | color: var(--global-text); 114 | } 115 | 116 | body, 117 | .sidebar, 118 | .topbar { 119 | background-color: var(--bg-body-color); 120 | } 121 | 122 | .sidebar { 123 | border-right: 1px solid var(--sidebar-line); 124 | } 125 | 126 | .menu-link { 127 | color: var(--menu-text); 128 | } 129 | .menu:not(:last-child):after { 130 | background-color: var(--sidebar-line); 131 | } 132 | 133 | .search { 134 | background-color: var(--search-bg); 135 | } 136 | 137 | .trending-banner { 138 | background-color: var(--trending-bg); 139 | } 140 | 141 | .host-name { 142 | color: var(--host-name); 143 | } 144 | 145 | @media (prefers-color-scheme: dark) { 146 | :root { 147 | --bg-body-color: #242731; 148 | --sidebar-line: #373a43; 149 | --search-bg: #373a43; 150 | --menu-text: #ababad; 151 | --global-text: white; 152 | --trending-bg: #050f16; 153 | --host-name: #e4e4e4; 154 | --trending-podcast: #a6a7b2; 155 | --trending-author: white; 156 | --feed-border: #373a43; 157 | --toggle-text: white; 158 | --logo-color: white; 159 | --icon-path: #676a6f; 160 | --navigation-bg: #242731; 161 | --playlist-bg: #242731; 162 | --playlist-shadow: -10px 24px 35px 0px rgba(8, 8, 9, 0.25), 163 | -1px -3px 14px 0px rgba(15, 20, 39, 0.2); 164 | --playlist-title: white; 165 | --playlist-date: #a6a7b2; 166 | --playlist-episode-border: #242731; 167 | --playlist-episode-number: #373a43; 168 | } 169 | } 170 | html.dark { 171 | --bg-body-color: #242731; 172 | --sidebar-line: #373a43; 173 | --search-bg: #373a43; 174 | --menu-text: #ababad; 175 | --global-text: white; 176 | --trending-bg: #050f16; 177 | --host-name: #e4e4e4; 178 | --trending-podcast: #a6a7b2; 179 | --trending-author: white; 180 | --feed-border: #373a43; 181 | --toggle-text: white; 182 | --logo-color: white; 183 | --icon-path: #676a6f; 184 | --navigation-bg: #242731; 185 | } 186 | 187 | .button { 188 | --gap: 10px; 189 | --fw: 600; 190 | --p: 8px 14px; 191 | display: flex; 192 | align-items: center; 193 | justify-content: center; 194 | gap: var(--gap); 195 | font-weight: var(--fw); 196 | padding: var(--p); 197 | border-radius: 8px; 198 | font-size: 15px; 199 | } 200 | .button--primary { 201 | color: #fcfcfc; 202 | background-color: #6e5fd3; 203 | } 204 | 205 | .toggle-main { 206 | width: 30px; 207 | height: 17px; 208 | border-radius: 100rem; 209 | background-color: #a5a6b1; 210 | padding: 1.5px 2px; 211 | cursor: pointer; 212 | transition: all 0.2s linear; 213 | } 214 | .toggle input { 215 | display: none; 216 | } 217 | .toggle input:checked + .toggle-main .toggle-spinner { 218 | transform: translateX(12px); 219 | } 220 | .toggle input:checked + .toggle-main { 221 | background-image: linear-gradient(92.29deg, #415ef4 0.33%, #7141ef 28.14%); 222 | } 223 | .toggle-spinner { 224 | border-radius: 100rem; 225 | background-color: white; 226 | width: 14px; 227 | aspect-ratio: 1; 228 | transition: all 0.2s linear; 229 | } 230 | 231 | .wrapper { 232 | max-width: 1440px; 233 | margin: 0 auto; 234 | display: grid; 235 | grid-template-columns: 256px minmax(0, 1fr); 236 | min-height: 100vh; 237 | } 238 | 239 | .main-container { 240 | padding: 37px 56px; 241 | container-type: inline-size; 242 | container-name: mainContainer; 243 | } 244 | 245 | .button-discover { 246 | width: 40px; 247 | height: 40px; 248 | border-radius: 100rem; 249 | background-color: var(--primary-color); 250 | position: fixed; 251 | right: 24px; 252 | bottom: 80px; 253 | z-index: 10; 254 | --p: 0; 255 | display: none; 256 | } 257 | 258 | @media screen and (max-width: 1279.98px) { 259 | .button-discover { 260 | display: flex; 261 | } 262 | .wrapper { 263 | padding-bottom: 80px; 264 | grid-template-columns: 1fr; 265 | } 266 | .main-container { 267 | padding: 0 24px; 268 | } 269 | } 270 | .topbar { 271 | padding: 24px 56px; 272 | display: flex; 273 | justify-content: space-between; 274 | align-items: center; 275 | } 276 | .topbar-logo { 277 | flex-shrink: 0; 278 | color: white; 279 | } 280 | .topbar-right { 281 | display: flex; 282 | align-items: center; 283 | gap: 24px; 284 | } 285 | .topbar-right > * { 286 | flex-shrink: 0; 287 | } 288 | 289 | .profile { 290 | display: block; 291 | width: 48px; 292 | height: 48px; 293 | } 294 | .profile img { 295 | border-radius: 100rem; 296 | width: 100%; 297 | height: 100%; 298 | object-fit: cover; 299 | } 300 | 301 | .button-upload { 302 | height: 48px; 303 | --gap: 6px; 304 | --p: 0 16px; 305 | } 306 | 307 | .search { 308 | padding: 12px 20px; 309 | border-radius: 12px; 310 | display: flex; 311 | align-items: center; 312 | flex-direction: row; 313 | gap: 12px; 314 | flex: 0 1 360px; 315 | } 316 | .search-input { 317 | background-color: transparent; 318 | flex: 1; 319 | border: none; 320 | font-weight: 500; 321 | font-size: 15px; 322 | color: #6e5fd3; 323 | caret-color: #6e5fd3; 324 | } 325 | .search-input::-webkit-input-placeholder { 326 | color: #a5a6b1; 327 | } 328 | .search-input::-moz-input-placeholder { 329 | color: #a5a6b1; 330 | } 331 | 332 | @media screen and (min-width: 1280px) { 333 | .topbar-logo { 334 | display: none; 335 | } 336 | } 337 | @media screen and (max-width: 1279.98px) { 338 | .topbar { 339 | padding: 20px 24px; 340 | } 341 | .topbar-action, 342 | .search, 343 | .button-upload { 344 | display: none; 345 | } 346 | } 347 | .sidebar { 348 | padding: 48px 30px; 349 | } 350 | @media screen and (max-width: 1279.98px) { 351 | .sidebar { 352 | position: fixed; 353 | top: 0; 354 | left: 0; 355 | width: 300px; 356 | bottom: 0; 357 | z-index: 9; 358 | transition: transform 0.25s linear; 359 | transform: translateX(-100%); 360 | } 361 | } 362 | 363 | .logo { 364 | display: block; 365 | margin-bottom: 44px; 366 | color: var(--logo-color, #11142d); 367 | } 368 | 369 | .menu { 370 | display: flex; 371 | flex-direction: column; 372 | gap: 6px; 373 | --gap: 26px; 374 | } 375 | .menu:not(:last-child):after { 376 | content: ""; 377 | display: block; 378 | height: 1px; 379 | margin-block: var(--gap); 380 | } 381 | .menu-heading { 382 | font-size: 13px; 383 | margin-bottom: 10px; 384 | color: #8393aa; 385 | padding-left: 20px; 386 | } 387 | .menu-icon { 388 | flex: 0 0 24px; 389 | } 390 | .menu-link { 391 | display: flex; 392 | align-items: center; 393 | gap: 10px; 394 | font-size: 14px; 395 | line-height: 143%; 396 | font-weight: 500; 397 | padding: 8px 30px 8px 20px; 398 | border-radius: 12px; 399 | } 400 | .menu-link [fill^="#E5"] { 401 | fill: var(--icon-path, #e5eaf1); 402 | } 403 | .menu-link:hover { 404 | background: linear-gradient(92.29deg, #415ef4 0.33%, #7141ef 28.14%); 405 | color: white; 406 | } 407 | .menu-link:hover [fill^="#E5"] { 408 | fill: white; 409 | opacity: 1; 410 | } 411 | .menu-link:hover [fill^="#A5"] { 412 | mix-blend-mode: normal; 413 | fill: hsl(var(--primary-h), calc(var(--primary-s) + 1%), calc(var(--primary-l) + 16%)); 414 | } 415 | 416 | .navigation { 417 | display: flex; 418 | justify-content: space-between; 419 | align-items: center; 420 | padding: 14px 24px; 421 | background-color: var(--navigation-bg, white); 422 | position: fixed; 423 | bottom: 0; 424 | left: 0; 425 | right: 0; 426 | z-index: 10; 427 | } 428 | .navigation-item { 429 | width: 44px; 430 | height: 44px; 431 | display: flex; 432 | justify-content: center; 433 | align-items: center; 434 | } 435 | .navigation-upload { 436 | border-radius: 100rem; 437 | background-color: var(--primary-color); 438 | } 439 | @media screen and (min-width: 1280px) { 440 | .navigation { 441 | display: none; 442 | } 443 | } 444 | 445 | /*# sourceMappingURL=app.css.map */ 446 | -------------------------------------------------------------------------------- /gocast-ui/styles/app.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../sass/base/_reset.scss","../sass/abstracts/_variables.scss","../sass/base/_typography.scss","../sass/base/_general.scss","../sass/abstracts/_mixins.scss","../sass/theme/_dark.scss","../sass/components/_button.scss","../sass/components/_toggle.scss","../sass/layout/_structure.scss","../sass/layout/_topbar.scss","../sass/layout/_sidebar.scss","../sass/layout/_navigation.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAEF;EACE;EACA;EACA;;;AAEF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAEF;AAAA;AAAA;EAGE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;AAAA;EAEE;;;ACxBF;EACE;EACA;EACA;EACA;;;ACnBF;EACE,aDFa;ECGb;EACA;EACA;EACA;EACA;;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;;ACdF;EACE;EACA;EACA;ECuBE;EDrBF;;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA,OFhBI;;;AINR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;AAAA;AAAA;EAGE;;;AAEF;EACE;;;AAGA;EACE;;AAEF;EACE;;;AAGJ;EACE;;;AAGA;EACE;;;AAIF;EACE;;;AAGJ;EACE;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;AAAA;IAEA;IACA;IACA;IACA;;;AAGJ;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACnFF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE,OLHY;EKIZ,kBLHY;;;AMTd;EHUA,OGTqB;EHUrB,QGV2B;EH+CzB;EAlDF,kBHKM;EMCJ;EACA;EACA;;AAEF;EACE;;AACA;EACE;;AAEF;EACE,kBNHK;;AMMT;EH+BE;EG7BA;EACA;EACA;EACA;;;ACxBJ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AJyCA;EItCA;IACE;;EAEF;IACE;IACA;;EAEF;IACE;;;ACjCJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;EACA;;AACA;EACE;;;AAIN;EACE;ELPA,OKQmB;ELPnB,QKOmB;;AACnB;EACE;ELLF;EACA;EACA;;;AKOF;EACE;EACA;EACA;;;AAEF;EACE;ELgBE;EAfF;EACA;EACA,gBAH8D;EAQ5D,KKNkC;EACpC;;AACA;ELpCA,kBKqCmB;EACjB;EACA;EACA;EACA;EACA,OR/BY;EQgCZ,aRhCY;;AGRd;EACE,OHCI;;AGCN;EACE,OHFI;;;AQ2CR;EACE;IACE;;;AAGJ;EACE;IACE;;EAEF;AAAA;AAAA;IAGE;;;AC5DJ;EACE;;AN8DA;EM/DF;IAGI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;;AAGJ;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA,OT/BQ;ESgCR;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;;AC5DR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EAtBF;IAuBI","file":"app.css"} -------------------------------------------------------------------------------- /gocast-ui/styles/home.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-h: 248; 3 | --primary-s: 57%; 4 | --primary-l: 60%; 5 | --primary-color: #6e5fd3; 6 | } 7 | 8 | .host { 9 | padding-bottom: 28px; 10 | } 11 | .host-heading { 12 | --mb: 20px; 13 | } 14 | .host-list { 15 | --gap: 12px; 16 | display: flex; 17 | align-items: flex-start; 18 | justify-content: space-between; 19 | gap: var(--gap); 20 | } 21 | .host-item { 22 | --gap: 6px; 23 | --avatar-size: 44px; 24 | display: flex; 25 | align-items: center; 26 | flex-direction: column; 27 | gap: var(--gap); 28 | } 29 | @media screen and (min-width: 768px) { 30 | .host-item { 31 | --gap: 7px; 32 | --avatar-size: 64px; 33 | } 34 | } 35 | .host-avatar { 36 | width: var(--avatar-size); 37 | height: var(--avatar-size); 38 | border-radius: 100rem; 39 | display: flex; 40 | align-items: flex-end; 41 | flex-direction: row; 42 | justify-content: center; 43 | gap: 0; 44 | overflow: hidden; 45 | position: relative; 46 | background-color: var(--color); 47 | box-shadow: 0 0 0 2px var(--bg-body-color), 0 0 0 3px var(--color); 48 | } 49 | .host-avatar img { 50 | position: relative; 51 | z-index: 2; 52 | } 53 | .host-name { 54 | font-size: 14px; 55 | } 56 | @media screen and (max-width: 767.98px) { 57 | .host { 58 | padding-bottom: 0; 59 | } 60 | } 61 | @container mainContainer (max-width: 420px) { 62 | .host-heading { 63 | --mb: 12px; 64 | } 65 | .host-list { 66 | display: grid; 67 | grid-auto-columns: 55px; 68 | grid-auto-flow: column; 69 | overflow-x: auto; 70 | overflow-y: hidden; 71 | scroll-snap-type: x mandatory; 72 | scroll-snap-stop: always; 73 | padding: 10px 0; 74 | } 75 | .host-list::-webkit-scrollbar { 76 | display: none; 77 | width: 0; 78 | } 79 | .host-list > * { 80 | scroll-snap-align: start; 81 | } 82 | } 83 | 84 | .trending { 85 | padding: 55px 0 36px; 86 | container-type: inline-size; 87 | container-name: trending; 88 | } 89 | .trending-heading { 90 | --mb: 11px; 91 | } 92 | .trending-banner { 93 | padding: 20px; 94 | border-radius: 10px; 95 | display: flex; 96 | align-items: flex-start; 97 | position: relative; 98 | } 99 | .trending-content { 100 | flex: 0 0 310px; 101 | } 102 | .trending-title { 103 | font-size: 22px; 104 | line-height: 1.45; 105 | margin-bottom: 11px; 106 | } 107 | .trending-title span { 108 | color: transparent; 109 | background-clip: text; 110 | -webkit-background-clip: text; 111 | background-image: linear-gradient(92.29deg, #415ef4 0.33%, #7141ef 28.14%); 112 | } 113 | .trending-podcast { 114 | font-size: 14px; 115 | color: var(--trending-podcast, #676a6f); 116 | margin-bottom: 4px; 117 | } 118 | .trending-author { 119 | font-size: 14px; 120 | color: var(--trending-author, #232333); 121 | margin-bottom: 20px; 122 | } 123 | .trending-author span { 124 | color: #676a6f; 125 | } 126 | .trending-image { 127 | position: absolute; 128 | right: 0; 129 | max-width: 332px; 130 | bottom: 0; 131 | right: 15px; 132 | } 133 | .trending-vector, .trending-circle { 134 | position: absolute; 135 | } 136 | .trending-vector { 137 | right: 5%; 138 | top: 5%; 139 | } 140 | .trending-circle { 141 | right: 45%; 142 | bottom: 0; 143 | } 144 | @media screen and (max-width: 767px) { 145 | .trending { 146 | padding: 35px 0 25px; 147 | } 148 | .trending-circle { 149 | right: 15px; 150 | } 151 | } 152 | @container trending (max-width: 630px) { 153 | .trending-image { 154 | display: none; 155 | } 156 | .trending-content { 157 | flex: 1; 158 | } 159 | } 160 | 161 | .feed-header { 162 | display: flex; 163 | justify-content: space-between; 164 | align-items: center; 165 | container-type: inline-size; 166 | container-name: feedHeader; 167 | margin-bottom: 40px; 168 | } 169 | .feed-tab { 170 | display: flex; 171 | white-space: nowrap; 172 | } 173 | .feed-tab-item { 174 | cursor: pointer; 175 | font-weight: 500; 176 | font-size: 14px; 177 | line-height: 1.43; 178 | color: #5e6064; 179 | padding: 10px; 180 | border-bottom: 1px solid #373a43; 181 | } 182 | .feed-tab-item.is-active { 183 | color: #6e5fd3; 184 | border-bottom-color: currentColor; 185 | font-weight: 600; 186 | } 187 | .feed-toggle { 188 | display: flex; 189 | align-items: center; 190 | gap: 10px; 191 | color: var(--toggle-text, #5e6064); 192 | font-size: 14px; 193 | font-weight: 500; 194 | } 195 | @container feedHeader (max-width: 470px) { 196 | .feed-toggle p { 197 | display: none; 198 | } 199 | } 200 | .feed-main { 201 | container-type: inline-size; 202 | container-name: feedMain; 203 | } 204 | .feed-item { 205 | border: 1px solid var(--feed-border, #f0f3f6); 206 | border-radius: 10px; 207 | margin-bottom: 30px; 208 | } 209 | .feed-item > * { 210 | padding: 20px; 211 | } 212 | .feed-item-header { 213 | display: flex; 214 | justify-content: space-between; 215 | align-items: center; 216 | } 217 | .feed-item-main { 218 | border-top: 1px solid var(--feed-border, #f0f3f6); 219 | border-bottom: 1px solid var(--feed-border, #f0f3f6); 220 | display: flex; 221 | align-items: center; 222 | flex-direction: column; 223 | gap: 20px; 224 | } 225 | .feed-item-footer { 226 | display: flex; 227 | justify-content: space-between; 228 | align-items: center; 229 | } 230 | .feed-item-footer .button { 231 | font-size: 14px; 232 | } 233 | .feed-item-podcast { 234 | color: #a6a7b2; 235 | font-weight: 400; 236 | line-height: 1.5; 237 | margin-bottom: 6px; 238 | font-size: 14px; 239 | } 240 | .feed-item-heading { 241 | line-height: 1.5; 242 | font-size: 14px; 243 | } 244 | .feed-item-desc { 245 | line-height: 1.5; 246 | font-weight: 400; 247 | font-size: 13px; 248 | margin-top: 16px; 249 | } 250 | .feed-image { 251 | flex: 0 0 152px; 252 | overflow: hidden; 253 | aspect-ratio: 1; 254 | width: 100%; 255 | } 256 | .feed-image img { 257 | width: 100%; 258 | height: 100%; 259 | object-fit: cover; 260 | border-radius: 10px; 261 | } 262 | .feed-author { 263 | display: flex; 264 | align-items: center; 265 | gap: 16px; 266 | } 267 | .feed-author-verify { 268 | position: absolute; 269 | z-index: 2; 270 | bottom: 0; 271 | right: 0; 272 | } 273 | .feed-author-avatar { 274 | width: 48px; 275 | height: 48px; 276 | flex: 0 0 48px; 277 | position: relative; 278 | } 279 | .feed-author-avatar img { 280 | width: 100%; 281 | height: 100%; 282 | object-fit: cover; 283 | border-radius: 100rem; 284 | } 285 | .feed-author-rating { 286 | display: flex; 287 | align-items: center; 288 | margin-top: 2px; 289 | margin-bottom: 4px; 290 | gap: 4px; 291 | color: #a6a7b2; 292 | } 293 | .feed-date { 294 | color: #a6a7b2; 295 | font-weight: 400; 296 | } 297 | .feed-actions { 298 | display: flex; 299 | align-items: center; 300 | gap: 20px; 301 | } 302 | @container feedMain (min-width: 500px) { 303 | .feed-item-main { 304 | flex-direction: row; 305 | } 306 | .feed-author-header { 307 | display: flex; 308 | align-items: center; 309 | gap: 4px; 310 | margin-bottom: 4px; 311 | } 312 | .feed-author-rating { 313 | gap: 10px; 314 | margin: 0; 315 | } 316 | } 317 | 318 | .top-podcast-images { 319 | gap: 12px; 320 | display: grid; 321 | grid-template-columns: repeat(4, minmax(0, 1fr)); 322 | } 323 | .top-podcast-images img { 324 | aspect-ratio: 1; 325 | object-fit: cover; 326 | border-radius: 10px; 327 | } 328 | 329 | .follow { 330 | display: flex; 331 | justify-content: space-between; 332 | align-items: center; 333 | } 334 | .follow-list { 335 | display: flex; 336 | flex-direction: column; 337 | gap: 20px; 338 | } 339 | .follow-user { 340 | display: flex; 341 | align-items: center; 342 | gap: 12px; 343 | } 344 | .follow-user-username { 345 | color: #a6a7b2; 346 | font-size: 13px; 347 | font-weight: 400; 348 | line-height: 1.5; 349 | margin-top: 4px; 350 | } 351 | .follow-user-avatar { 352 | flex: 0 0 46px; 353 | aspect-ratio: 1; 354 | border-radius: 8px; 355 | box-shadow: 0 0 0 2px var(--bg-body-color), 0 0 0 3px pink; 356 | } 357 | .follow-user-avatar img { 358 | width: 100%; 359 | height: 100%; 360 | object-fit: cover; 361 | border-radius: inherit; 362 | } 363 | 364 | .listen { 365 | display: flex; 366 | align-items: center; 367 | gap: 10px; 368 | } 369 | .listen-list { 370 | display: flex; 371 | flex-direction: column; 372 | gap: 18px; 373 | } 374 | .listen-meta { 375 | display: flex; 376 | align-items: center; 377 | gap: 16px; 378 | } 379 | .listen-meta-item { 380 | display: flex; 381 | align-items: center; 382 | gap: 6px; 383 | color: #a6a7b2; 384 | } 385 | .listen-title { 386 | font-weight: 500; 387 | line-height: 1.5; 388 | margin-bottom: 4px; 389 | margin-top: 4px; 390 | } 391 | .listen-image { 392 | flex: 0 0 109px; 393 | height: 67px; 394 | width: 100%; 395 | } 396 | .listen-image img { 397 | width: 100%; 398 | height: 100%; 399 | object-fit: cover; 400 | border-radius: 10px; 401 | } 402 | .listen-info { 403 | flex: 1; 404 | } 405 | 406 | .topic { 407 | position: relative; 408 | border-radius: 10px; 409 | overflow: hidden; 410 | } 411 | .topic-list { 412 | display: grid; 413 | grid-template-columns: repeat(2, minmax(0, 1fr)); 414 | grid-gap: 12px 22px; 415 | } 416 | .topic-image { 417 | width: 100%; 418 | height: 86px; 419 | object-fit: cover; 420 | border-radius: inherit; 421 | } 422 | .topic-content { 423 | position: absolute; 424 | inset: 0; 425 | border-radius: inherit; 426 | background-color: hsla(0, 0%, 0%, 0.7); 427 | color: white; 428 | padding: 10px; 429 | display: flex; 430 | flex-direction: column; 431 | justify-content: flex-end; 432 | } 433 | .topic-title { 434 | font-size: 14px; 435 | font-weight: 500; 436 | line-height: 1.5; 437 | } 438 | .topic-podcast { 439 | line-height: 1.5; 440 | font-size: 13px; 441 | } 442 | 443 | @container mainContainer (min-width: 790px) { 444 | .home-wrapper { 445 | display: grid; 446 | grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); 447 | gap: 60px; 448 | } 449 | } 450 | 451 | /*# sourceMappingURL=home.css.map */ 452 | -------------------------------------------------------------------------------- /gocast-ui/styles/home.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../sass/abstracts/_variables.scss","../sass/pages/home/_host.scss","../sass/abstracts/_mixins.scss","../sass/pages/home/_trending.scss","../sass/pages/home/_feed.scss","../sass/pages/home/_top-podcast.scss","../sass/pages/home/_follow.scss","../sass/pages/home/_listening.scss","../sass/pages/home/_topics.scss","../sass/pages/home/_index.scss"],"names":[],"mappings":"AAgBA;EACE;EACA;EACA;EACA;;;ACnBF;EACE;;AACA;EACE;;AAEF;EACE;EC2BF;EACA,aD3BwB;EC8BtB,iBD9BkC;ECiClC,KDjCiD;;AAEnD;EACE;EACA;ECsBF;EACA,aDtBwB;ECuBxB,gBDvBkD;EC4BhD,KD5BoC;;AC8CtC;EDjDA;IAKI;IACA;;;AAGJ;ECNA,ODOqB;ECNrB,QDMqB;EC+BnB;EAjBF;EACA,aDbwB;ECcxB,gBAH8D;EAK5D,iBDhBgC;ECmBhC,KARmD;EDVnD;EACA;EACA;EACA;;AACA;EACE;EACA;;AAGJ;EACE;;AAEF;EAlCF;IAmCI;;;AAEF;EACE;IACE;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EACA;IACE;IACA;;EAEF;IACE;;;;AEvDR;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AACA;EDgDF;EACA;EACA;EChDI,kBHVK;;AGaT;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EACE,OH7BS;;AGgCb;EACE;EACA;EACA;EACA;EACA;;AAEF;EAEE;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;ADOF;EC/DF;IA2DI;;EACA;IACE;;;AAGJ;EACE;IACE;;EAEF;IACE;;;;ACpEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA,OJbE;EIcF;EACA;;AAEF;EACE,OJXU;EIYV;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;IACE;;;AAGJ;EACE;EACA;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EAEI;IACE;;EAIF;IACE;IACA;IACA;IACA;;EAEF;IACE;IACA;;;;AC9JN;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;;ACRN;EACE;EACA;EACA;;AACA;EACE;EACA;EAEA;;AAEF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;;AC9BR;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAGJ;EACE;;;ACtCJ;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;;;ACzBF;EADF;IAEI;IACA;IACA","file":"home.css"} -------------------------------------------------------------------------------- /gocast-ui/styles/playlist.css: -------------------------------------------------------------------------------- 1 | .playlist { 2 | display: grid; 3 | grid-template-columns: 1fr 1fr; 4 | gap: 30px 32px; 5 | } 6 | @container mainContainer (max-width: 520px) { 7 | .playlist { 8 | grid-template-columns: 1fr; 9 | } 10 | } 11 | .playlist-item { 12 | border-radius: 10px; 13 | background: var(--playlist-bg, #fff); 14 | box-shadow: var(--playlist-shadow, -10px 24px 35px 0px rgba(227, 230, 236, 0.25), -1px -3px 14px 0px rgba(227, 230, 236, 0.2)); 15 | display: flex; 16 | padding: 14px 20px; 17 | align-items: flex-start; 18 | gap: 10px; 19 | } 20 | @container mainContainer (max-width: 900px) { 21 | .playlist-item { 22 | flex-direction: column; 23 | gap: 32px; 24 | } 25 | } 26 | .playlist-image { 27 | width: 100%; 28 | flex: 0 0 130px; 29 | height: 130px; 30 | } 31 | .playlist-image img { 32 | width: 100%; 33 | height: 100%; 34 | object-fit: cover; 35 | object-fit: cover; 36 | border-radius: 10px; 37 | } 38 | .playlist-content { 39 | display: flex; 40 | flex-direction: column; 41 | gap: 12px; 42 | flex: 1; 43 | } 44 | .playlist-top { 45 | display: flex; 46 | justify-content: space-between; 47 | align-items: center; 48 | gap: 12px; 49 | } 50 | .playlist-title { 51 | font-size: 16px; 52 | font-weight: 500; 53 | display: -webkit-box; 54 | -webkit-line-clamp: 1; 55 | -webkit-box-orient: vertical; 56 | overflow: hidden; 57 | text-overflow: ellipsis; 58 | word-break: break-word; 59 | color: var(--playlist-title, #1b1d21); 60 | } 61 | .playlist-date, .playlist-desc { 62 | font-size: 13px; 63 | font-weight: 400; 64 | color: var(--playlist-date, #5f6164); 65 | } 66 | .playlist-date { 67 | flex-shrink: 0; 68 | } 69 | .playlist-desc { 70 | line-height: 1.5; 71 | } 72 | .playlist-bottom { 73 | display: flex; 74 | justify-content: space-between; 75 | align-items: center; 76 | } 77 | .playlist-episodes { 78 | display: flex; 79 | align-items: center; 80 | } 81 | .playlist-episode-image { 82 | width: 44px; 83 | aspect-ratio: 1; 84 | border-radius: 100rem; 85 | object-fit: cover; 86 | border: 2px solid var(--playlist-episode-border, white); 87 | } 88 | .playlist-episode-number { 89 | width: 44px; 90 | aspect-ratio: 1; 91 | border-radius: 100rem; 92 | display: flex; 93 | justify-content: center; 94 | align-items: center; 95 | background: var(--playlist-episode-number, #f0f3f6); 96 | color: var(--playlist-title, #5f6164); 97 | border: 2px solid var(--playlist-episode-border, white); 98 | font-size: 13px; 99 | } 100 | .playlist-likes { 101 | display: flex; 102 | align-items: center; 103 | gap: 4px; 104 | } 105 | .playlist-likes-count { 106 | color: var(--playlist-like, #a6a7b2); 107 | font-size: 13px; 108 | font-weight: 500; 109 | } 110 | .playlist-episode-item:not(:first-child) { 111 | margin-left: -20px; 112 | } 113 | 114 | /*# sourceMappingURL=playlist.css.map */ 115 | -------------------------------------------------------------------------------- /gocast-ui/styles/playlist.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../sass/playlist.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;AAGA;EANF;IAOI;;;AAEF;EACE;EACA;EACA;EAKA;EACA;EACA;EACA;;AACA;EAZF;IAaI;IACA;;;AAGJ;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGA;EACE","file":"playlist.css"} -------------------------------------------------------------------------------- /gocast-ui/trending.pug: -------------------------------------------------------------------------------- 1 | extends ./views/layout/_dashboard 2 | append stylesheet 3 | link(rel="stylesheet", href="./styles/home.css") 4 | block title 5 | title GocastUI - Trending 6 | block main 7 | p Trending page -------------------------------------------------------------------------------- /gocast-ui/views/icons/_icon-add-user.pug: -------------------------------------------------------------------------------- 1 | svg(width="24", height="24", viewBox="0 0 24 24", fill="none", xmlns="http://www.w3.org/2000/svg") 2 | path(d="M21.101 9.58786H19.8979V8.41162C19.8979 7.90945 19.4952 7.5 18.999 7.5C18.5038 7.5 18.1 7.90945 18.1 8.41162V9.58786H16.899C16.4027 9.58786 16 9.99731 16 10.4995C16 11.0016 16.4027 11.4111 16.899 11.4111H18.1V12.5884C18.1 13.0906 18.5038 13.5 18.999 13.5C19.4952 13.5 19.8979 13.0906 19.8979 12.5884V11.4111H21.101C21.5962 11.4111 22 11.0016 22 10.4995C22 9.99731 21.5962 9.58786 21.101 9.58786Z", fill="#E5EAF1") 3 | path(d="M9.5 15.0155C5.45422 15.0155 2 15.6623 2 18.2466C2 20.8299 5.4332 21.5 9.5 21.5C13.5448 21.5 17 20.8532 17 18.2689C17 15.6846 13.5668 15.0155 9.5 15.0155Z", fill="#A5B4CB") 4 | path(d="M9.49999 12.5542C12.2546 12.5542 14.4626 10.3177 14.4626 7.52761C14.4626 4.73754 12.2546 2.5 9.49999 2.5C6.74541 2.5 4.53735 4.73754 4.53735 7.52761C4.53735 10.3177 6.74541 12.5542 9.49999 12.5542Z", fill="#E5EAF1") -------------------------------------------------------------------------------- /gocast-ui/views/icons/_icon-chart.pug: -------------------------------------------------------------------------------- 1 | svg(width="24", height="24", viewBox="0 0 24 24", fill="none", xmlns="http://www.w3.org/2000/svg") 2 | path(opacity="0.7", d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2Z", fill="#E5EAF1") 3 | path(d="M16.42 7.8099V16.1899C16.42 16.8299 15.9 17.3499 15.26 17.3499C14.61 17.3499 14.09 16.8299 14.09 16.1899V7.8099C14.09 7.1699 14.61 6.6499 15.26 6.6499C15.9 6.6499 16.42 7.1699 16.42 7.8099Z", fill="#A5B4CB") 4 | path(d="M9.90996 12.93V16.19C9.90996 16.83 9.38996 17.35 8.73996 17.35C8.09996 17.35 7.57996 16.83 7.57996 16.19V12.93C7.57996 12.29 8.09996 11.77 8.73996 11.77C9.38996 11.77 9.90996 12.29 9.90996 12.93Z", fill="#A5B4CB") -------------------------------------------------------------------------------- /gocast-ui/views/icons/_icon-cube.pug: -------------------------------------------------------------------------------- 1 | svg(width="24", height="24", viewBox="0 0 24 24", fill="none", xmlns="http://www.w3.org/2000/svg") 2 | path(d="M19.3301 5.68003L13.0601 2.30003C12.4001 1.94003 11.6001 1.94003 10.9401 2.30003L4.67005 5.68003C4.21005 5.93003 3.93005 6.41003 3.93005 6.96003C3.93005 7.50003 4.21005 7.99003 4.67005 8.24003L10.9401 11.62C11.2701 11.8 11.6401 11.89 12.0001 11.89C12.3601 11.89 12.7301 11.8 13.0601 11.62L19.3301 8.24003C19.7901 7.99003 20.0701 7.51003 20.0701 6.96003C20.0701 6.41003 19.7901 5.93003 19.3301 5.68003Z", fill="#A5B4CB") 3 | path(d="M9.91 12.79L4.07 9.87C3.62 9.65 3.1 9.67 2.68 9.93C2.25 10.2 2 10.65 2 11.15V16.66C2 17.61 2.53 18.47 3.38 18.9L9.21 21.82C9.41 21.92 9.63 21.97 9.85 21.97C10.11 21.97 10.37 21.9 10.6 21.76C11.03 21.5 11.28 21.04 11.28 20.54V15.03C11.29 14.07 10.76 13.21 9.91 12.79Z", fill="#E5EAF1") 4 | path(d="M21.32 9.9299C20.89 9.6699 20.37 9.6399 19.93 9.8699L14.1 12.7899C13.25 13.2199 12.72 14.0699 12.72 15.0299V20.5399C12.72 21.0399 12.97 21.4999 13.4 21.7599C13.63 21.8999 13.89 21.9699 14.15 21.9699C14.37 21.9699 14.59 21.9199 14.79 21.8199L20.62 18.8999C21.47 18.4699 22 17.6199 22 16.6599V11.1499C22 10.6499 21.75 10.1999 21.32 9.9299Z", fill="#E5EAF1") -------------------------------------------------------------------------------- /gocast-ui/views/icons/_icon-cube2.pug: -------------------------------------------------------------------------------- 1 | svg(width="24", height="24", viewBox="0 0 24 24", fill="none", xmlns="http://www.w3.org/2000/svg") 2 | path(fill-rule="evenodd", clip-rule="evenodd", d="M18.6904 15.9629L13.0004 18.6069V11.8909L19.0004 9.10391V15.5389C19.0004 15.7129 18.8824 15.8749 18.6904 15.9629ZM5.30339 15.9639C5.11439 15.8759 4.99839 15.7139 5.00039 15.5319V9.10391L11.0004 11.8909V18.6089L5.30339 15.9639ZM11.7074 5.06391C11.7984 5.02091 11.8994 4.99991 12.0004 4.99991C12.1004 4.99991 12.2014 5.02091 12.2924 5.06391L17.6214 7.53791L12.0004 10.1499L6.37839 7.53791L11.7074 5.06391ZM20.6564 7.25891C20.6534 7.25091 20.6544 7.24191 20.6504 7.23391C20.6474 7.22591 20.6394 7.22091 20.6344 7.21291C20.5884 7.13691 20.5324 7.06991 20.4794 6.99991C20.4484 6.96591 20.4234 6.92791 20.3894 6.89891C20.1544 6.62291 19.8774 6.37991 19.5334 6.22091L13.1334 3.24791C13.1324 3.24791 13.1314 3.24791 13.1314 3.24691C12.4124 2.91491 11.5874 2.91591 10.8664 3.24791L4.46939 6.21991C4.12539 6.37891 3.84739 6.62091 3.61239 6.89691C3.57539 6.92791 3.54839 6.96991 3.51539 7.00691C3.46339 7.07391 3.41039 7.13891 3.36639 7.21091C3.36139 7.21991 3.35339 7.22591 3.34939 7.23391C3.34539 7.24291 3.34639 7.25191 3.34239 7.26091C3.13139 7.62291 3.00039 8.02991 3.00039 8.45791V15.5249C2.99239 16.4749 3.56439 17.3589 4.45839 17.7769L10.8574 20.7489C11.2194 20.9179 11.6074 21.0019 11.9964 21.0019C12.3844 21.0019 12.7724 20.9179 13.1334 20.7499L19.5304 17.7779C20.4224 17.3659 20.9994 16.4879 21.0004 15.5399V8.45691C20.9994 8.02891 20.8684 7.62191 20.6564 7.25891Z", fill="white") -------------------------------------------------------------------------------- /gocast-ui/views/icons/_icon-discovery.pug: -------------------------------------------------------------------------------- 1 | svg(width="24", height="24", viewBox="0 0 24 24", fill="none", xmlns="http://www.w3.org/2000/svg") 2 | path(d="M21.9999 12C21.9999 17.523 17.5229 22 11.9999 22C6.47688 22 1.99988 17.523 1.99988 12C1.99988 6.478 6.47688 2 11.9999 2C17.5229 2 21.9999 6.478 21.9999 12Z", fill="#E5EAF1") 3 | path(d="M15.8598 8.70481L14.2398 13.8248C14.1798 14.0348 14.0098 14.2048 13.7998 14.2658L8.69984 15.8648C8.35984 15.9758 8.02984 15.6448 8.13984 15.3048L9.73984 10.1748C9.79984 9.96481 9.96984 9.80481 10.1798 9.73481L15.2998 8.13481C15.6498 8.02481 15.9698 8.35481 15.8598 8.70481Z", fill="#A5B4CB") -------------------------------------------------------------------------------- /gocast-ui/views/icons/_icon-heart-fill.pug: -------------------------------------------------------------------------------- 1 | svg(width="18", height="15", viewBox="0 0 18 15", fill="none", xmlns="http://www.w3.org/2000/svg") 2 | path(fill-rule="evenodd", clip-rule="evenodd", d="M9.00175 14.5C8.78092 14.5 8.56842 14.4125 8.41258 14.255L1.93925 7.77171C0.242581 6.07171 0.242581 3.30587 1.93925 1.60587C2.75925 0.785874 3.85258 0.333374 5.01841 0.333374C6.18425 0.333374 7.27841 0.785874 8.09758 1.60587L9.00175 2.51171L9.90592 1.60671C10.7259 0.785874 11.8192 0.333374 12.9859 0.333374C14.1509 0.333374 15.2451 0.785874 16.0642 1.60587C17.7617 3.30587 17.7617 6.07171 16.0651 7.77171L9.59175 14.2559C9.43508 14.4125 9.22342 14.5 9.00175 14.5Z", fill="#FF754C") -------------------------------------------------------------------------------- /gocast-ui/views/icons/_icon-heart.pug: -------------------------------------------------------------------------------- 1 | svg(width="20", height="20", viewBox="0 0 20 20", fill="none", xmlns="http://www.w3.org/2000/svg") 2 | path(fill-rule="evenodd", clip-rule="evenodd", d="M6.01829 5.00004C5.29829 5.00004 4.62329 5.27837 4.11829 5.78421C3.06996 6.83421 3.06996 8.54337 4.11913 9.59504L10.0016 15.4875L15.885 9.59504C16.9341 8.54337 16.9341 6.83421 15.885 5.78421C14.875 4.77171 13.095 4.77337 12.085 5.78421L10.5916 7.28004C10.2783 7.59421 9.72496 7.59421 9.41163 7.28004L7.91829 5.78337C7.41329 5.27837 6.73913 5.00004 6.01829 5.00004ZM10.0016 17.5C9.78079 17.5 9.56829 17.4125 9.41246 17.255L2.93913 10.7717C1.24246 9.07171 1.24246 6.30587 2.93913 4.60587C3.75913 3.78587 4.85246 3.33337 6.01829 3.33337C7.18413 3.33337 8.27829 3.78587 9.09746 4.60587L10.0016 5.51171L10.9058 4.60671C11.7258 3.78587 12.8191 3.33337 13.9858 3.33337C15.1508 3.33337 16.245 3.78587 17.0641 4.60587C18.7616 6.30587 18.7616 9.07171 17.065 10.7717L10.5916 17.2559C10.435 17.4125 10.2233 17.5 10.0016 17.5Z", fill="#A6A7B2") -------------------------------------------------------------------------------- /gocast-ui/views/icons/_icon-home.pug: -------------------------------------------------------------------------------- 1 | svg(width="24", height="24", viewBox="0 0 24 24", fill="none", xmlns="http://www.w3.org/2000/svg") 2 | path(d="M10.1528 5.55559C10.2037 5.65925 10.2373 5.77027 10.2524 5.8844L10.5308 10.0243L10.669 12.1051C10.6705 12.3191 10.704 12.5317 10.7687 12.7361C10.9356 13.1326 11.3372 13.3846 11.7741 13.3671L18.4313 12.9316C18.7196 12.9269 18.998 13.0347 19.2052 13.2313C19.3779 13.3952 19.4894 13.6096 19.5246 13.8402L19.5364 13.9802C19.2609 17.795 16.4592 20.9767 12.6524 21.7981C8.84555 22.6194 4.94186 20.8844 3.06071 17.535C2.51839 16.5619 2.17965 15.4923 2.06438 14.389C2.01623 14.0624 1.99503 13.7326 2.00098 13.4026C1.99503 9.31279 4.90747 5.77702 8.98433 4.92463C9.47501 4.84822 9.95603 5.10798 10.1528 5.55559Z", fill="#F8F8F8") 3 | path(d="M12.87 2.00082C17.4298 2.11683 21.2623 5.39579 21.9999 9.81229L21.9929 9.84488L21.9728 9.89227L21.9756 10.0224C21.9651 10.1947 21.8986 10.3605 21.7839 10.4945C21.6645 10.634 21.5013 10.729 21.3215 10.7659L21.2119 10.7809L13.5312 11.2786C13.2757 11.3038 13.0213 11.2214 12.8313 11.052C12.673 10.9107 12.5717 10.7201 12.5431 10.5147L12.0276 2.84506C12.0186 2.81913 12.0186 2.79102 12.0276 2.76508C12.0346 2.55367 12.1277 2.35384 12.286 2.21023C12.4443 2.06662 12.6546 1.9912 12.87 2.00082Z", fill="#A79EE5") -------------------------------------------------------------------------------- /gocast-ui/views/icons/_icon-medal.pug: -------------------------------------------------------------------------------- 1 | svg(width="24", height="24", viewBox="0 0 24 24", fill="none", xmlns="http://www.w3.org/2000/svg") 2 | path(d="M9.78703 2.33624C9.69291 2.17936 9.52337 2.08337 9.34042 2.08337H4.3052C3.90036 2.08337 3.65031 2.52503 3.85859 2.87217L9.48359 12.2472C9.57772 12.4041 9.74726 12.5 9.9302 12.5H14.9654C15.3703 12.5 15.6203 12.0584 15.412 11.7112L9.78703 2.33624Z", fill="#C52229") 3 | path(fill-rule="evenodd", clip-rule="evenodd", d="M9.34051 1.5625H4.3053C3.49561 1.5625 2.9955 2.4458 3.41207 3.1401L9.03707 12.5151C9.22533 12.8289 9.5644 13.0208 9.9303 13.0208H14.9655C15.7752 13.0208 16.2753 12.1375 15.8587 11.4432L10.2337 2.06823C10.0455 1.75448 9.70641 1.5625 9.34051 1.5625ZM9.34051 2.08333C9.52346 2.08333 9.693 2.17932 9.78712 2.3362L15.4121 11.7112C15.6204 12.0583 15.3704 12.5 14.9655 12.5H9.9303C9.74735 12.5 9.57781 12.404 9.48368 12.2471L3.85868 2.87213C3.6504 2.52499 3.90045 2.08333 4.3053 2.08333H9.34051Z", fill="#9B0F15") 4 | path(d="M15.2128 2.33624C15.307 2.17936 15.4765 2.08337 15.6595 2.08337H20.6947C21.0995 2.08337 21.3496 2.52503 21.1413 2.87217L15.5163 12.2472C15.4222 12.4041 15.2526 12.5 15.0697 12.5H10.0345C9.62961 12.5 9.37956 12.0584 9.58784 11.7112L15.2128 2.33624Z", fill="#F1333B") 5 | path(fill-rule="evenodd", clip-rule="evenodd", d="M15.6594 1.5625H20.6946C21.5043 1.5625 22.0044 2.4458 21.5878 3.1401L15.9628 12.5151C15.7746 12.8289 15.4355 13.0208 15.0696 13.0208H10.0344C9.22468 13.0208 8.72456 12.1375 9.14114 11.4432L14.7661 2.06823C14.9544 1.75448 15.2935 1.5625 15.6594 1.5625ZM15.6594 2.08333C15.4764 2.08333 15.3069 2.17932 15.2128 2.3362L9.58775 11.7112C9.37946 12.0583 9.62952 12.5 10.0344 12.5H15.0696C15.2525 12.5 15.4221 12.404 15.5162 12.2471L21.1412 2.87213C21.3495 2.52499 21.0994 2.08333 20.6946 2.08333H15.6594Z", fill="#9B0F15") 6 | path(fill-rule="evenodd", clip-rule="evenodd", d="M15.7557 2.379C15.8801 2.45122 15.9224 2.6106 15.8502 2.73497L13.5064 6.77143C13.4342 6.89581 13.2748 6.93809 13.1504 6.86587C13.0261 6.79365 12.9838 6.63428 13.056 6.5099L15.3998 2.47345C15.472 2.34907 15.6313 2.30678 15.7557 2.379Z", fill="#FE666D") 7 | path(fill-rule="evenodd", clip-rule="evenodd", d="M4.29628 2.379C4.1719 2.45122 4.12962 2.6106 4.20184 2.73497L6.54559 6.77143C6.6178 6.89581 6.77718 6.93809 6.90155 6.86587C7.02593 6.79365 7.06822 6.63428 6.996 6.5099L4.65225 2.47345C4.58003 2.34907 4.42065 2.30678 4.29628 2.379Z", fill="#DF3840") 8 | path(d="M9.24467 2.93791C9.24467 3.12218 9.09893 3.27157 8.91915 3.27157C8.73937 3.27157 8.59363 3.12218 8.59363 2.93791C8.59363 2.75363 8.73937 2.60425 8.91915 2.60425C9.09893 2.60425 9.24467 2.75363 9.24467 2.93791Z", fill="#AA161D") 9 | path(d="M8.10146 3.01929C8.10146 3.24851 7.92017 3.43433 7.69654 3.43433C7.47291 3.43433 7.29163 3.24851 7.29163 3.01929C7.29163 2.79007 7.47291 2.60425 7.69654 2.60425C7.92017 2.60425 8.10146 2.79007 8.10146 3.01929Z", fill="#AA161D") 10 | path(d="M9.11452 4.2074C9.11452 4.43662 8.93323 4.62244 8.7096 4.62244C8.48597 4.62244 8.30469 4.43662 8.30469 4.2074C8.30469 3.97818 8.48597 3.79236 8.7096 3.79236C8.93323 3.79236 9.11452 3.97818 9.11452 4.2074Z", fill="#AA161D") 11 | path(d="M10.0403 3.64185C10.0403 3.75646 9.94965 3.84937 9.83783 3.84937C9.72602 3.84937 9.63538 3.75646 9.63538 3.64185C9.63538 3.52724 9.72602 3.43433 9.83783 3.43433C9.94965 3.43433 10.0403 3.52724 10.0403 3.64185Z", fill="#AA161D") 12 | path(d="M7.89893 3.99988C7.89893 4.11449 7.80829 4.2074 7.69648 4.2074C7.58466 4.2074 7.49402 4.11449 7.49402 3.99988C7.49402 3.88527 7.58466 3.79236 7.69648 3.79236C7.80829 3.79236 7.89893 3.88527 7.89893 3.99988Z", fill="#AA161D") 13 | path(d="M6.77076 2.73035C6.77076 2.84496 6.68012 2.93787 6.5683 2.93787C6.45649 2.93787 6.36584 2.84496 6.36584 2.73035C6.36584 2.61574 6.45649 2.52283 6.5683 2.52283C6.68012 2.52283 6.77076 2.61574 6.77076 2.73035Z", fill="#AA161D") 14 | path(d="M9.83778 5.09033C9.83778 5.20494 9.74713 5.29785 9.63532 5.29785C9.5235 5.29785 9.43286 5.20494 9.43286 5.09033C9.43286 4.97572 9.5235 4.88281 9.63532 4.88281C9.74713 4.88281 9.83778 4.97572 9.83778 5.09033Z", fill="#AA161D") 15 | path(d="M8.79615 5.29785C8.79615 5.41246 8.70551 5.50537 8.59369 5.50537C8.48188 5.50537 8.39124 5.41246 8.39124 5.29785C8.39124 5.18324 8.48188 5.09033 8.59369 5.09033C8.70551 5.09033 8.79615 5.18324 8.79615 5.29785Z", fill="#AA161D") 16 | path(d="M10.8151 4.54513C10.8151 4.73165 10.6676 4.88285 10.4856 4.88285C10.3036 4.88285 10.1561 4.73165 10.1561 4.54513C10.1561 4.3586 10.3036 4.2074 10.4856 4.2074C10.6676 4.2074 10.8151 4.3586 10.8151 4.54513Z", fill="#AA161D") 17 | path(d="M11.2446 5.50537C11.2446 5.61998 11.154 5.71289 11.0422 5.71289C10.9304 5.71289 10.8397 5.61998 10.8397 5.50537C10.8397 5.39076 10.9304 5.29785 11.0422 5.29785C11.154 5.29785 11.2446 5.39076 11.2446 5.50537Z", fill="#AA161D") 18 | path(d="M19.5312 15.8855C19.5312 19.7688 16.3833 22.9167 12.5 22.9167C8.61675 22.9167 5.46875 19.7688 5.46875 15.8855C5.46875 12.0022 8.61675 8.85425 12.5 8.85425C16.3833 8.85425 19.5312 12.0022 19.5312 15.8855Z", fill="#FFBB0D") 19 | path(fill-rule="evenodd", clip-rule="evenodd", d="M20.052 15.8855C20.052 20.0564 16.6709 23.4375 12.5 23.4375C8.32906 23.4375 4.94788 20.0564 4.94788 15.8855C4.94788 11.7146 8.32906 8.33337 12.5 8.33337C16.6709 8.33337 20.052 11.7146 20.052 15.8855ZM12.5 22.9167C16.3832 22.9167 19.5312 19.7687 19.5312 15.8855C19.5312 12.0022 16.3832 8.85421 12.5 8.85421C8.61671 8.85421 5.46871 12.0022 5.46871 15.8855C5.46871 19.7687 8.61671 22.9167 12.5 22.9167Z", fill="#E89B05") 20 | path(fill-rule="evenodd", clip-rule="evenodd", d="M5.98954 16.1459C5.84572 16.1459 5.72913 16.0293 5.72913 15.8855C5.72913 12.146 8.76053 9.11462 12.5 9.11462C12.6438 9.11462 12.7604 9.23122 12.7604 9.37504C12.7604 9.51886 12.6438 9.63546 12.5 9.63546C9.04818 9.63546 6.24996 12.4337 6.24996 15.8855C6.24996 16.0293 6.13337 16.1459 5.98954 16.1459Z", fill="#E8AA0A") 21 | path(fill-rule="evenodd", clip-rule="evenodd", d="M19.0103 15.625C19.1542 15.625 19.2708 15.7416 19.2708 15.8854C19.2708 19.6248 16.2393 22.6562 12.4999 22.6562C12.3561 22.6562 12.2395 22.5397 12.2395 22.3958C12.2395 22.252 12.3561 22.1354 12.4999 22.1354C15.9517 22.1354 18.7499 19.3372 18.7499 15.8854C18.7499 15.7416 18.8665 15.625 19.0103 15.625Z", fill="#E8AA0A") 22 | path(d="M17.7083 15.8855C17.7083 18.7619 15.3764 21.0938 12.5 21.0938C9.62348 21.0938 7.29163 18.7619 7.29163 15.8855C7.29163 13.009 9.62348 10.6771 12.5 10.6771C15.3764 10.6771 17.7083 13.009 17.7083 15.8855Z", fill="#FFDD28") 23 | path(fill-rule="evenodd", clip-rule="evenodd", d="M18.2291 15.8854C18.2291 19.0495 15.664 21.6146 12.4999 21.6146C9.33579 21.6146 6.77075 19.0495 6.77075 15.8854C6.77075 12.7213 9.33579 10.1562 12.4999 10.1562C15.664 10.1562 18.2291 12.7213 18.2291 15.8854ZM12.4999 21.0937C15.3764 21.0937 17.7083 18.7619 17.7083 15.8854C17.7083 13.0089 15.3764 10.6771 12.4999 10.6771C9.62344 10.6771 7.29159 13.0089 7.29159 15.8854C7.29159 18.7619 9.62344 21.0937 12.4999 21.0937Z", fill="#E89B05") 24 | path(fill-rule="evenodd", clip-rule="evenodd", d="M12.5 20.3125C14.945 20.3125 16.927 18.3305 16.927 15.8855C16.927 15.7416 17.0436 15.625 17.1875 15.625C17.3313 15.625 17.4479 15.7416 17.4479 15.8855C17.4479 18.6181 15.2326 20.8334 12.5 20.8334C12.3561 20.8334 12.2395 20.7168 12.2395 20.573C12.2395 20.4291 12.3561 20.3125 12.5 20.3125Z", fill="#ECC704") 25 | path(fill-rule="evenodd", clip-rule="evenodd", d="M12.4999 11.4583C10.0549 11.4583 8.07284 13.4404 8.07284 15.8854C8.07284 16.0292 7.95624 16.1458 7.81242 16.1458C7.66859 16.1458 7.552 16.0292 7.552 15.8854C7.552 13.1528 9.76726 10.9375 12.4999 10.9375C12.6437 10.9375 12.7603 11.0541 12.7603 11.1979C12.7603 11.3417 12.6437 11.4583 12.4999 11.4583Z", fill="#FFEF9C") 26 | path(d="M9.6355 15.2085L11.4259 14.8439L11.963 13.9325L12.5001 13.021L13.5743 14.8439L15.3647 15.2085L13.9324 16.6668L14.2904 18.4897L12.5001 17.5783L10.7097 18.4897L11.0678 16.6668L9.6355 15.2085Z", fill="#FFEF9C") 27 | path(fill-rule="evenodd", clip-rule="evenodd", d="M11.4258 14.8439L12.5001 13.021L13.5743 14.8439L15.3646 15.2085L13.9323 16.6668L14.2904 18.4897L12.5001 17.5782L10.7097 18.4897L11.0678 16.6668L9.63547 15.2085L11.4258 14.8439ZM10.5038 16.8358L9.26388 15.5734C9.13011 15.4372 9.08158 15.2387 9.1374 15.0562C9.19323 14.8736 9.34447 14.7362 9.53154 14.6981L11.0948 14.3798L12.0513 12.7565C12.145 12.5976 12.3156 12.5001 12.5001 12.5001C12.6845 12.5001 12.8551 12.5976 12.9488 12.7565L13.9053 14.3798L15.4686 14.6981C15.6556 14.7362 15.8069 14.8736 15.8627 15.0562C15.9185 15.2387 15.87 15.4372 15.7362 15.5734L14.4963 16.8358L14.8015 18.3893C14.8399 18.5849 14.7634 18.7852 14.6043 18.9053C14.4453 19.0254 14.2317 19.0443 14.0541 18.9539L12.5001 18.1627L10.946 18.9539C10.7684 19.0443 10.5548 19.0254 10.3958 18.9053C10.2367 18.7852 10.1602 18.5849 10.1986 18.3893L10.5038 16.8358Z", fill="#E89B05") -------------------------------------------------------------------------------- /gocast-ui/views/icons/_icon-menu.pug: -------------------------------------------------------------------------------- 1 | svg(width="24", height="24", viewBox="0 0 24 24", fill="none", xmlns="http://www.w3.org/2000/svg") 2 | path(fill-rule="evenodd", clip-rule="evenodd", d="M3.94831 6H20.0513C20.5733 6 21.0003 6.427 21.0003 6.949V7.051C21.0003 7.573 20.5733 8 20.0513 8H3.94831C3.42631 8 3.00031 7.573 3.00031 7.051V6.949C3.00031 6.427 3.42631 6 3.94831 6ZM20.0513 11H3.94831C3.42631 11 3.00031 11.427 3.00031 11.949V12.051C3.00031 12.573 3.42631 13 3.94831 13H20.0513C20.5733 13 21.0003 12.573 21.0003 12.051V11.949C21.0003 11.427 20.5733 11 20.0513 11ZM20.0513 16H3.94831C3.42631 16 3.00031 16.427 3.00031 16.949V17.051C3.00031 17.573 3.42631 18 3.94831 18H20.0513C20.5733 18 21.0003 17.573 21.0003 17.051V16.949C21.0003 16.427 20.5733 16 20.0513 16Z", fill="#A5B4CB") -------------------------------------------------------------------------------- /gocast-ui/views/icons/_icon-microphone.pug: -------------------------------------------------------------------------------- 1 | svg(width="24", height="24", viewBox="0 0 24 24", fill="none", xmlns="http://www.w3.org/2000/svg") 2 | path(d="M19.1201 9.12011C18.7301 9.12011 18.4201 9.43011 18.4201 9.82011V11.4001C18.4201 14.9401 15.5401 17.8201 12.0001 17.8201C8.46005 17.8201 5.58005 14.9401 5.58005 11.4001V9.81011C5.58005 9.42011 5.27005 9.11011 4.88005 9.11011C4.49005 9.11011 4.18005 9.42011 4.18005 9.81011V11.3901C4.18005 15.4601 7.31005 18.8101 11.3001 19.1701V21.3001C11.3001 21.6901 11.6101 22.0001 12.0001 22.0001C12.3901 22.0001 12.7001 21.6901 12.7001 21.3001V19.1701C16.6801 18.8201 19.8201 15.4601 19.8201 11.3901V9.81011C19.8101 9.43011 19.5001 9.12011 19.1201 9.12011Z", fill="#E5EAF1") 3 | path(d="M12 2C9.55996 2 7.57996 3.98 7.57996 6.42V11.54C7.57996 13.98 9.55996 15.96 12 15.96C14.44 15.96 16.42 13.98 16.42 11.54V6.42C16.42 3.98 14.44 2 12 2ZM13.31 8.95C13.24 9.21 13.01 9.38 12.75 9.38C12.7 9.38 12.65 9.37 12.6 9.36C12.21 9.25 11.8 9.25 11.41 9.36C11.09 9.45 10.78 9.26 10.7 8.95C10.61 8.64 10.8 8.32 11.11 8.24C11.7 8.08 12.32 8.08 12.91 8.24C13.21 8.32 13.39 8.64 13.31 8.95ZM13.84 7.01C13.75 7.25 13.53 7.39 13.29 7.39C13.22 7.39 13.16 7.38 13.09 7.36C12.39 7.1 11.61 7.1 10.91 7.36C10.61 7.47 10.27 7.31 10.16 7.01C10.05 6.71 10.21 6.37 10.51 6.27C11.47 5.92 12.53 5.92 13.49 6.27C13.79 6.38 13.95 6.71 13.84 7.01Z", fill="#A5B4CB") -------------------------------------------------------------------------------- /gocast-ui/views/icons/_icon-more.pug: -------------------------------------------------------------------------------- 1 | svg(width="24", height="24", viewBox="0 0 24 24", fill="none", xmlns="http://www.w3.org/2000/svg") 2 | path(d="M12 17C10.9 17 10 17.9 10 19C10 20.1 10.9 21 12 21C13.1 21 14 20.1 14 19C14 17.9 13.1 17 12 17Z", fill="#A6A7B2") 3 | path(d="M12 3C10.9 3 10 3.9 10 5C10 6.1 10.9 7 12 7C13.1 7 14 6.1 14 5C14 3.9 13.1 3 12 3Z", fill="#A6A7B2") 4 | path(d="M12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z", fill="#A6A7B2") -------------------------------------------------------------------------------- /gocast-ui/views/icons/_icon-play.pug: -------------------------------------------------------------------------------- 1 | svg(width="24", height="24", viewBox="0 0 24 24", fill="none", xmlns="http://www.w3.org/2000/svg") 2 | path(d="M22 12.0048C22 17.5137 17.5116 22 12 22C6.48842 22 2 17.5137 2 12.0048C2 6.48625 6.48842 2 12 2C17.5116 2 22 6.48625 22 12.0048Z", fill="#E5EAF1") 3 | path(d="M16 12.0049C16 12.2576 15.9205 12.5113 15.7614 12.7145C15.7315 12.7543 15.5923 12.9186 15.483 13.0255L15.4233 13.0838C14.5881 13.9694 12.5099 15.3011 11.456 15.7278C11.456 15.7375 10.8295 15.9913 10.5312 16H10.4915C10.0341 16 9.60653 15.7482 9.38778 15.34C9.26847 15.1154 9.15909 14.4642 9.14915 14.4554C9.05966 13.8712 9 12.9769 9 11.9951C9 10.9657 9.05966 10.0316 9.16903 9.45808C9.16903 9.44836 9.27841 8.92345 9.34801 8.74848C9.45739 8.49672 9.65625 8.2819 9.90483 8.14581C10.1037 8.04957 10.3125 8 10.5312 8C10.7599 8.01069 11.1875 8.15553 11.3565 8.22357C12.4702 8.65128 14.598 10.051 15.4134 10.9064C15.5526 11.0425 15.7017 11.2087 15.7415 11.2467C15.9105 11.4605 16 11.723 16 12.0049Z", fill="#A5B4CB") 4 | defs 5 | linearGradient#paint0_linear_773_9726(x1="9", y1="8.68571", x2="11.0218", y2="8.75635", gradientUnits="userSpaceOnUse") 6 | stop(stop-color="#415EF4") 7 | stop(offset="1", stop-color="#7141EF") -------------------------------------------------------------------------------- /gocast-ui/views/icons/_icon-play2.pug: -------------------------------------------------------------------------------- 1 | svg(width="16", height="17", viewBox="0 0 16 17", fill="none", xmlns="http://www.w3.org/2000/svg") 2 | path(d="M14.6667 8.50326C14.6667 12.1759 11.6744 15.1667 8 15.1667C4.32561 15.1667 1.33333 12.1759 1.33333 8.50326C1.33333 4.82421 4.32561 1.83337 8 1.83337C11.6744 1.83337 14.6667 4.82421 14.6667 8.50326", fill="currentColor") 3 | path(d="M10.6667 8.50328C10.6667 8.67177 10.6136 8.84091 10.5076 8.97635C10.4877 9.00292 10.3949 9.11243 10.322 9.18372L10.2822 9.2226C9.72538 9.81296 8.33996 10.7008 7.63731 10.9853C7.63731 10.9917 7.2197 11.1609 7.02083 11.1667H6.99432C6.68939 11.1667 6.40436 10.9989 6.25852 10.7267C6.17898 10.577 6.10606 10.1428 6.09943 10.137C6.03977 9.74751 6 9.15132 6 8.4968C6 7.81053 6.03977 7.18777 6.11269 6.80543C6.11269 6.79895 6.18561 6.44901 6.23201 6.33236C6.30492 6.16452 6.4375 6.0213 6.60322 5.93058C6.7358 5.86642 6.875 5.83337 7.02083 5.83337C7.1733 5.8405 7.45833 5.93706 7.57102 5.98242C8.31345 6.26756 9.73201 7.20073 10.2756 7.771C10.3684 7.86173 10.4678 7.97254 10.4943 7.99781C10.607 8.14038 10.6667 8.31535 10.6667 8.50328", fill="white") -------------------------------------------------------------------------------- /gocast-ui/views/icons/_icon-playlist.pug: -------------------------------------------------------------------------------- 1 | svg(width="20", height="20", viewBox="0 0 20 20", fill="none", xmlns="http://www.w3.org/2000/svg") 2 | path(d="M15.625 15L15.625 5C15.625 4.65833 15.9083 4.375 16.25 4.375C16.5917 4.375 16.875 4.65833 16.875 5L16.875 15C16.875 15.3417 16.5917 15.625 16.25 15.625C15.9083 15.625 15.625 15.3417 15.625 15Z", fill="#A6A7B2") 3 | path(d="M17.7084 12.5L17.7084 7.5C17.7084 7.15833 17.9917 6.875 18.3334 6.875C18.675 6.875 18.9584 7.15833 18.9584 7.5L18.9584 12.5C18.9584 12.8417 18.675 13.125 18.3334 13.125C17.9917 13.125 17.7084 12.8417 17.7084 12.5Z", fill="#A6A7B2") 4 | path(d="M13.4166 5.5L13.4166 14.5C13.4166 15.6634 12.3287 16.75 10.8333 16.75L4.99996 16.75C3.50456 16.75 2.41663 15.6634 2.41663 14.5L2.41663 5.5C2.41663 4.33659 3.50456 3.25 4.99996 3.25L10.8333 3.25C12.3287 3.25 13.4166 4.33659 13.4166 5.5Z", stroke="#A6A7B2", stroke-width="1.5") 5 | path(d="M9.8397 9.42308L8.5397 9.42308L8.5397 8.07692C8.5397 7.76154 8.27816 7.5 7.96278 7.5C7.6474 7.5 7.38586 7.76154 7.38586 8.07692L7.38586 9.42308L5.99355 9.42308C5.67816 9.42308 5.41663 9.68462 5.41663 10C5.41663 10.3154 5.67816 10.5769 5.99355 10.5769L7.38586 10.5769L7.38586 11.9231C7.38586 12.2385 7.6474 12.5 7.96278 12.5C8.27816 12.5 8.5397 12.2385 8.5397 11.9231L8.5397 10.5769L9.8397 10.5769C10.1551 10.5769 10.4166 10.3154 10.4166 10C10.4166 9.68462 10.1551 9.42308 9.8397 9.42308Z", fill="#A6A7B2") -------------------------------------------------------------------------------- /gocast-ui/views/icons/_icon-search.pug: -------------------------------------------------------------------------------- 1 | svg(width="24", height="24", viewBox="0 0 24 24", fill="none", xmlns="http://www.w3.org/2000/svg") 2 | path(fill-rule="evenodd", clip-rule="evenodd", d="M5.49819 17.8504C2.16727 14.4532 2.16727 8.94516 5.49819 5.54793C8.8291 2.15069 14.2296 2.15069 17.5605 5.54793C20.605 8.65304 20.8668 13.5215 18.3459 16.9299L21.7105 20.3615C22.5882 21.2567 21.2721 22.5994 20.3942 21.7052L20.3942 21.7052L17.0693 18.3141C13.7182 21.2399 8.66994 21.0853 5.49819 17.8504ZM16.2436 6.89103C13.64 4.23554 9.41864 4.23554 6.815 6.89103C4.21136 9.54651 4.21136 13.8519 6.815 16.5074C9.41864 19.1629 13.64 19.1629 16.2436 16.5074C18.8473 13.8519 18.8473 9.54651 16.2436 6.89103Z", fill="#A5B4CB") -------------------------------------------------------------------------------- /gocast-ui/views/icons/_icon-star.pug: -------------------------------------------------------------------------------- 1 | svg(width="20", height="20", viewBox="0 0 20 20", fill="none", xmlns="http://www.w3.org/2000/svg") 2 | path(d="M14.7282 3.46937L14.668 6.66624C14.6594 7.10487 14.9432 7.6869 15.3044 7.94839L17.437 9.53416C18.8044 10.5464 18.5808 11.7863 16.9469 12.2924L14.1692 13.1444C13.7049 13.2878 13.2147 13.7855 13.0943 14.2494L12.4321 16.7293C11.9075 18.6862 10.6004 18.8802 9.51686 17.1595L8.00334 14.7555C7.72815 14.3168 7.07459 13.9879 6.55862 14.0132L3.68641 14.1566C1.63112 14.2578 1.04635 13.0938 2.38787 11.5586L4.09056 9.61851C4.40874 9.25581 4.55493 8.58101 4.40874 8.12552L3.54023 5.40098C3.03286 3.79832 3.9444 2.91265 5.56971 3.43563L8.10658 4.25383C8.53655 4.38879 9.1815 4.296 9.54268 4.03451L12.1914 2.16192C13.6189 1.14972 14.7626 1.74019 14.7282 3.46937Z", stroke="#A6A7B2", stroke-width="1.5", stroke-linecap="round", stroke-linejoin="round") -------------------------------------------------------------------------------- /gocast-ui/views/icons/_icon-subscription.pug: -------------------------------------------------------------------------------- 1 | svg(width="24", height="24", viewBox="0 0 24 24", fill="none", xmlns="http://www.w3.org/2000/svg") 2 | path(d="M19 7V8.13C18.68 8.04 18.35 8 18 8H6C5.65 8 5.32 8.04 5 8.13V7C5 5.9 5.9 5 7 5H17C18.1 5 19 5.9 19 7Z", fill="#A5B4CB") 3 | path(d="M16 3.51001V5H8V3.51001C8 2.68001 8.68001 2 9.51001 2H14.49C15.32 2 16 2.68001 16 3.51001Z", fill="#E5EAF1") 4 | path(d="M22 12V18C22 20.2 20.2 22 18 22H6C3.8 22 2 20.2 2 18V12C2 10.15 3.28 8.58 5 8.13C5.32 8.04 5.65 8 6 8H18C18.35 8 18.68 8.04 19 8.13C20.72 8.58 22 10.15 22 12Z", fill="#E5EAF1") 5 | path(d="M9 14.6167V13.1367C9 11.2267 10.35 10.4567 12 11.4067L13.28 12.1467L14.56 12.8867C16.21 13.8367 16.21 15.3967 14.56 16.3467L13.28 17.0867L12 17.8267C10.35 18.7767 9 17.9967 9 16.0967V14.6167Z", fill="#A5B4CB") -------------------------------------------------------------------------------- /gocast-ui/views/icons/_icon-user.pug: -------------------------------------------------------------------------------- 1 | svg(width="24", height="24", viewBox="0 0 24 24", fill="none", xmlns="http://www.w3.org/2000/svg") 2 | path(d="M11.9491 14.5399C8.49909 14.5399 5.58813 15.1037 5.58813 17.2794C5.58813 19.4561 8.51789 20 11.9491 20C15.3991 20 18.31 19.4362 18.31 17.2605C18.31 15.0839 15.3803 14.5399 11.9491 14.5399Z", fill="#A5B4CB") 3 | path(d="M11.949 12.467C14.2851 12.467 16.1583 10.5831 16.1583 8.23351C16.1583 5.88306 14.2851 4 11.949 4C9.61293 4 7.73975 5.88306 7.73975 8.23351C7.73975 10.5831 9.61293 12.467 11.949 12.467Z", fill="#E5EAF1") 4 | path(d="M21.0879 9.21923C21.6923 6.84176 19.9203 4.70654 17.6639 4.70654C17.4186 4.70654 17.184 4.73356 16.9548 4.77949C16.9243 4.78669 16.8903 4.802 16.8724 4.82902C16.8518 4.86324 16.867 4.90917 16.8894 4.93889C17.5672 5.89528 17.9567 7.0597 17.9567 8.30967C17.9567 9.50741 17.5995 10.6241 16.9727 11.5508C16.9082 11.6462 16.9655 11.775 17.0792 11.7948C17.2368 11.8227 17.398 11.8371 17.5627 11.8416C19.2058 11.8849 20.6805 10.8213 21.0879 9.21923Z", fill="#E5EAF1") 5 | path(d="M22.8093 14.817C22.5084 14.1722 21.7823 13.73 20.6782 13.513C20.1571 13.3851 18.7468 13.205 17.4351 13.2293C17.4154 13.232 17.4046 13.2455 17.4028 13.2545C17.4002 13.2671 17.4055 13.2887 17.4315 13.3022C18.0377 13.6039 20.381 14.916 20.0864 17.6834C20.0738 17.8032 20.1696 17.9068 20.2887 17.8888C20.8654 17.8059 22.349 17.4853 22.8093 16.4866C23.0636 15.9589 23.0636 15.3456 22.8093 14.817Z", fill="#A5B4CB") 6 | path(d="M7.04483 4.77973C6.8165 4.7329 6.58101 4.70679 6.33567 4.70679C4.07926 4.70679 2.30726 6.84201 2.91255 9.21947C3.31906 10.8216 4.79379 11.8851 6.43685 11.8419C6.60161 11.8374 6.76368 11.8221 6.92037 11.7951C7.03409 11.7753 7.09139 11.6465 7.02692 11.551C6.40014 10.6234 6.04288 9.50765 6.04288 8.30991C6.04288 7.05904 6.43327 5.89462 7.11109 4.93913C7.13258 4.90941 7.1487 4.86348 7.12721 4.82926C7.1093 4.80135 7.07617 4.78694 7.04483 4.77973Z", fill="#E5EAF1") 7 | path(d="M3.32156 13.5127C2.21752 13.7297 1.49225 14.1719 1.19139 14.8167C0.936203 15.3453 0.936203 15.9586 1.19139 16.4872C1.65163 17.4851 3.13531 17.8066 3.71195 17.8885C3.83104 17.9065 3.92595 17.8038 3.91342 17.6832C3.61883 14.9167 5.9621 13.6046 6.56918 13.3029C6.59425 13.2885 6.59962 13.2677 6.59694 13.2542C6.59515 13.2452 6.5853 13.2317 6.5656 13.2299C5.25294 13.2047 3.84358 13.3848 3.32156 13.5127Z", fill="#A5B4CB") -------------------------------------------------------------------------------- /gocast-ui/views/icons/_icon-verify.pug: -------------------------------------------------------------------------------- 1 | svg(width="18", height="18", viewBox="0 0 18 18", fill="none", xmlns="http://www.w3.org/2000/svg") 2 | path(d="M16.17 8.05492L15.15 6.86992C14.955 6.64492 14.7975 6.22492 14.7975 5.92492V4.64992C14.7975 3.85492 14.145 3.20242 13.35 3.20242H12.075C11.7825 3.20242 11.355 3.04492 11.13 2.84992L9.94503 1.82992C9.42753 1.38742 8.58003 1.38742 8.05503 1.82992L6.87753 2.85742C6.65253 3.04492 6.22503 3.20242 5.93253 3.20242H4.63503C3.84003 3.20242 3.18753 3.85492 3.18753 4.64992V5.93242C3.18753 6.22492 3.03003 6.64492 2.84253 6.86992L1.83003 8.06242C1.39503 8.57992 1.39503 9.41992 1.83003 9.93742L2.84253 11.1299C3.03003 11.3549 3.18753 11.7749 3.18753 12.0674V13.3499C3.18753 14.1449 3.84003 14.7974 4.63503 14.7974H5.93253C6.22503 14.7974 6.65253 14.9549 6.87753 15.1499L8.06253 16.1699C8.58003 16.6124 9.42753 16.6124 9.95253 16.1699L11.1375 15.1499C11.3625 14.9549 11.7825 14.7974 12.0825 14.7974H13.3575C14.1525 14.7974 14.805 14.1449 14.805 13.3499V12.0749C14.805 11.7824 14.9625 11.3549 15.1575 11.1299L16.1775 9.94492C16.6125 9.42742 16.6125 8.57242 16.17 8.05492ZM12.12 7.58242L8.49753 11.2049C8.39253 11.3099 8.25003 11.3699 8.10003 11.3699C7.95003 11.3699 7.80753 11.3099 7.70253 11.2049L5.88753 9.38992C5.67003 9.17242 5.67003 8.81242 5.88753 8.59492C6.10503 8.37742 6.46503 8.37742 6.68253 8.59492L8.10003 10.0124L11.325 6.78742C11.5425 6.56992 11.9025 6.56992 12.12 6.78742C12.3375 7.00492 12.3375 7.36492 12.12 7.58242Z", fill="#7B6DD7") -------------------------------------------------------------------------------- /gocast-ui/views/icons/_logo.pug: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /gocast-ui/views/layout/_dashboard.pug: -------------------------------------------------------------------------------- 1 | include ../mixins/_mixins 2 | doctype html 3 | html(lang="en") 4 | head 5 | meta(charset="UTF-8") 6 | meta(http-equiv="X-UA-Compatible", content="IE=edge") 7 | meta(name="viewport", content="width=device-width, initial-scale=1.0") 8 | block title 9 | title GoCast UI 10 | link(rel="preconnect" href="https://fonts.googleapis.com") 11 | link(rel="preconnect" href="https://fonts.gstatic.com" crossorigin) 12 | link(href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet") 13 | block stylesheet 14 | link(rel="stylesheet", href="./styles/app.css") 15 | body 16 | .wrapper 17 | include ./_sidebar 18 | main.main 19 | include ./_topbar 20 | .main-container 21 | block main 22 | include ./_navigation 23 | button.button.button-discover 24 | include ../icons/_icon-cube2 -------------------------------------------------------------------------------- /gocast-ui/views/layout/_navigation.pug: -------------------------------------------------------------------------------- 1 | .navigation 2 | .navigation-item 3 | include ../icons/_icon-menu 4 | .navigation-item 5 | include ../icons/_icon-search 6 | button.navigation-upload.navigation-item 7 | img(src="./images/icons/icon-upload.svg", alt="upload") 8 | .navigation-item 9 | img(src="./images/icons/icon-message.svg", alt="message") 10 | .navigation-item 11 | img(src="./images/icons/icon-noti.svg", alt="noti") -------------------------------------------------------------------------------- /gocast-ui/views/layout/_sidebar.pug: -------------------------------------------------------------------------------- 1 | - 2 | var menu1 = [ 3 | {text: "Home", icon: "icon-home", href: "/"}, 4 | {text: "Trending", icon: "icon-chart", href: "/trending.html"}, 5 | {text: "Explore Topics", icon: "icon-cube"}, 6 | {text: "Playlist", icon: "icon-play", href: "/playlist.html"}, 7 | {text: "Subscriptions", icon: "icon-subscription"} 8 | ]; 9 | var menu2 = [ 10 | {text: "Dashboard", icon: "icon-discovery"}, 11 | {text: "Episodes", icon: "icon-microphone"}, 12 | {text: "Team", icon: "icon-user"}, 13 | {text: "Subscribers", icon: "icon-add-user"} 14 | ]; 15 | var menu3 = [ 16 | {text: "Leaderboard", icon: "icon-medal"}, 17 | ]; 18 | 19 | aside.sidebar 20 | a.logo(href="/") 21 | include ../icons/_logo 22 | ul.menu 23 | each item in menu1 24 | +menuItem(item.text, item.icon, item.href) 25 | ul.menu 26 | h3.menu-heading Podcasters 27 | each item in menu2 28 | +menuItem(item.text, item.icon, item.href) 29 | ul.menu 30 | h3.menu-heading Community 31 | each item in menu3 32 | +menuItem(item.text, item.icon, item.href) -------------------------------------------------------------------------------- /gocast-ui/views/layout/_topbar.pug: -------------------------------------------------------------------------------- 1 | .topbar 2 | a.topbar-logo(href="/") 3 | include ../icons/_logo 4 | .search 5 | img(src="./images/icons/icon-search.svg", alt="search").search-icon 6 | input.search-input(type="text" placeholder="Search 2+ million podcasts and listeners") 7 | .topbar-right 8 | button.button.button--primary.button-upload 9 | img(src="./images/icons/icon-upload.svg", alt="upload") 10 | span Upload 11 | a(href="#").topbar-action 12 | img(src="./images/icons/icon-message.svg", alt="message") 13 | a(href="#").topbar-action 14 | img(src="./images/icons/icon-noti.svg", alt="noti") 15 | a(href="#").profile 16 | img(src="https://images.unsplash.com/photo-1616588589676-62b3bd4ff6d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2064&q=80", alt="") -------------------------------------------------------------------------------- /gocast-ui/views/mixins/_mixins.pug: -------------------------------------------------------------------------------- 1 | mixin menuItem(text, icon = '', href = "#") 2 | li.menu-item 3 | a.menu-link(href= href) 4 | span.menu-icon 5 | if icon 6 | case icon 7 | when 'icon-home' 8 | include ../icons/_icon-home 9 | when 'icon-chart' 10 | include ../icons/_icon-chart 11 | when 'icon-cube' 12 | include ../icons/_icon-cube 13 | when 'icon-play' 14 | include ../icons/_icon-play 15 | when 'icon-discovery' 16 | include ../icons/_icon-discovery 17 | when 'icon-microphone' 18 | include ../icons/_icon-microphone 19 | when 'icon-user' 20 | include ../icons/_icon-user 21 | when 'icon-add-user' 22 | include ../icons/_icon-add-user 23 | when 'icon-subscription' 24 | include ../icons/_icon-subscription 25 | when 'icon-medal' 26 | include ../icons/_icon-medal 27 | span.menu-text= text 28 | 29 | mixin toggle() 30 | label.toggle 31 | input(type="checkbox", name="") 32 | .toggle-main 33 | .toggle-spinner 34 | 35 | mixin button(icon = false, title = "Play Episode") 36 | button.button.button--primary 37 | if icon 38 | include ../icons/_icon-play 39 | span= title 40 | 41 | mixin feedItem 42 | .feed-item 43 | .feed-item-header 44 | .feed-author 45 | .feed-author-avatar 46 | img(src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1452&q=80", alt="") 47 | span.feed-author-verify 48 | include ../icons/_icon-verify 49 | .feed-author-content 50 | .feed-author-header 51 | h4.feed-author-name James Killened 52 | .feed-author-rating 53 | span rated an episude 54 | img(srcset="./images/img-rating.png 2x", alt="") 55 | .feed-date Jun 25th 56 | span 57 | include ../icons/_icon-more 58 | .feed-item-main 59 | .feed-image 60 | img(src="https://images.unsplash.com/photo-1616588589676-62b3bd4ff6d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2064&q=80", alt="") 61 | .feed-item-content 62 | p.feed-item-podcast Perspective Podcast (Ep. 1) 63 | h3.feed-item-heading Philosophy vs Religion vs Science: Yahia Amin and Sadman Sadik 64 | p.feed-item-desc Play Philosophy vs Religion vs Science: Perspective Podcast (Ep. 1) | Yahia Amin and Sadman Sadik by PERSPECTIVE with Yahia Amin on desktop and mobile. Play over 265 million tracks for... 65 | .feed-item-footer 66 | .feed-actions 67 | button 68 | include ../icons/_icon-heart 69 | button 70 | include ../icons/_icon-star 71 | button 72 | include ../icons/_icon-playlist 73 | +button(true) 74 | 75 | mixin widgetHeader( title = "", url = "#" ) 76 | .widget-header 77 | h3.widget-heading= title 78 | a.widget-view-all(href= url) View all 79 | 80 | mixin followItem 81 | .follow 82 | .follow-user 83 | .follow-user-avatar 84 | img(src="https://images.unsplash.com/photo-1564564321837-a57b7070ac4f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1476&q=80", alt="") 85 | .follow-user-info 86 | h4.follow-user-name Yahia Amin 87 | p.follow-user-username @yahiamdamin 88 | .follow-action 89 | +button(false, "Follow") 90 | 91 | mixin listenItem 92 | .listen 93 | .listen-image 94 | img(src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1452&q=80", alt="") 95 | .listen-info 96 | h4.listen-title Don't Always Win | LifeSpring 97 | .listen-meta 98 | .listen-meta-item 99 | include ../icons/_icon-play2 100 | span 156 101 | .listen-meta-item 102 | include ../icons/_icon-play2 103 | span 156 104 | 105 | mixin topicItem 106 | .topic 107 | img.topic-image(src="https://images.unsplash.com/photo-1510784722466-f2aa9c52fff6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80") 108 | .topic-content 109 | h4.topic-title 👫 Society & Culture 110 | .topic-podcast 761k podcast 111 | mixin playlistItem 112 | .playlist-item 113 | .playlist-image 114 | img(src="https://images.unsplash.com/photo-1490598000245-075175152d25?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3270&q=80") 115 | .playlist-content 116 | .playlist-top 117 | h3.playlist-title Business Development Business Development 118 | span.playlist-date Created on 1 day ago 119 | .playlist-desc UIHUT is a design and coding resources platform for designers, developers, and entrepreneurs. 120 | .playlist-bottom 121 | .playlist-episodes 122 | each val in [1,2,3,4] 123 | img.playlist-episode-image.playlist-episode-item(src="https://images.unsplash.com/Ys-DBJeX0nE.JPG?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3270&q=80") 124 | .playlist-episode-number.playlist-episode-item 41+ 125 | .playlist-likes 126 | include ../icons/_icon-heart-fill 127 | span.playlist-likes-count 1.5k -------------------------------------------------------------------------------- /gocast-ui/views/modules/home/_feed.pug: -------------------------------------------------------------------------------- 1 | .feed 2 | .feed-header 3 | .feed-tab 4 | each tab, index in ["My Feed","Popular Feed", "Recent"] 5 | .feed-tab-item(class=`${index === 0 ? 'is-active' : ''}`)= tab 6 | .feed-toggle 7 | +toggle 8 | p New Releases & Guests Only 9 | .feed-main 10 | each val in [1,2,3] 11 | +feedItem -------------------------------------------------------------------------------- /gocast-ui/views/modules/home/_listening-history.pug: -------------------------------------------------------------------------------- 1 | .widget 2 | +widgetHeader("Listening history") 3 | .listen-list 4 | +listenItem 5 | +listenItem 6 | +listenItem -------------------------------------------------------------------------------- /gocast-ui/views/modules/home/_popular-host.pug: -------------------------------------------------------------------------------- 1 | .host 2 | h2.heading.host-heading Popular Hosts 3 | ul.host-list 4 | - var n = 7; 5 | //- each user in [{name: "Thomas",color: "hsla(14, 100%, 82%, 1)"},{name: "Darrell",color: "hsla(39, 100%, 75%, 1)"}] 6 | while n > 0 7 | li.host-item 8 | .host-avatar(style="--color: hsla(14, 100%, 82%, 1)") 9 | img(srcSet="./images/img-host-user.png 2x", alt="thomas") 10 | span.host-name Thomas 11 | - n-- -------------------------------------------------------------------------------- /gocast-ui/views/modules/home/_suggest-follow.pug: -------------------------------------------------------------------------------- 1 | .widget.widget-follow 2 | +widgetHeader("Suggested Follows") 3 | .follow-list 4 | each val in [1,2,3] 5 | +followItem -------------------------------------------------------------------------------- /gocast-ui/views/modules/home/_top-podcast.pug: -------------------------------------------------------------------------------- 1 | .widget.widget-podcast 2 | +widgetHeader("Top 8 Podcast") 3 | .top-podcast-images 4 | each val in [1,2,3,4,5,6,7,8] 5 | img(src="https://images.unsplash.com/photo-1510784722466-f2aa9c52fff6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80", alt="") -------------------------------------------------------------------------------- /gocast-ui/views/modules/home/_topics.pug: -------------------------------------------------------------------------------- 1 | .widget 2 | +widgetHeader("Topics") 3 | .topic-list 4 | +topicItem 5 | +topicItem 6 | +topicItem 7 | +topicItem -------------------------------------------------------------------------------- /gocast-ui/views/modules/home/_trending.pug: -------------------------------------------------------------------------------- 1 | .trending 2 | h2.heading.trending-heading Trending 3 | .trending-banner 4 | .trending-content 5 | h3.trending-title 6 | span UX Design 7 | | Process: Mental Modeling Framework. 8 | p.trending-podcast Podcast Episode - 1 9 | p.trending-author 10 | | Thomas L. Fletcher 11 | span.trending-author-position ( UI Designer at UIHUT ) 12 | button.button.button--primary 13 | include ../../icons/_icon-play 14 | span Play now 15 | img.trending-circle(srcset="./images/img-circle.png 2x", alt="") 16 | img.trending-vector(srcset="./images/img-vector.png 2x", alt="") 17 | .trending-image 18 | img(src="./images/img-man.png", alt="") -------------------------------------------------------------------------------- /images/icon-arrow-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/html-css-master/c8df97a1229a64efebf8f000d12f1ff297bfd4e2/images/icon-arrow-right.png -------------------------------------------------------------------------------- /images/icon-fb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /images/img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/html-css-master/c8df97a1229a64efebf8f000d12f1ff297bfd4e2/images/img1.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/html-css-master/c8df97a1229a64efebf8f000d12f1ff297bfd4e2/images/logo.png -------------------------------------------------------------------------------- /images/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/html-css-master/c8df97a1229a64efebf8f000d12f1ff297bfd4e2/images/star.png -------------------------------------------------------------------------------- /index.pug: -------------------------------------------------------------------------------- 1 | extends ./views/layout/layout-tour.pug 2 | block vars 3 | - var title = 'Homepage'; 4 | append head 5 | link(rel="stylesheet" href="./css/main.css") 6 | 7 | block main 8 | main 9 | include ./views/home/TopTours 10 | include ./views/home/Popular 11 | include ./views/home/Gem 12 | include ./views/home/Diamond 13 | include ./views/home/Study 14 | 15 | -------------------------------------------------------------------------------- /sass/abstracts/_mixins.scss: -------------------------------------------------------------------------------- 1 | // @mixin mixin-name($parameter, ....){property: $parameter} 2 | @mixin size($width, $height: $width) { 3 | width: $width; 4 | height: $height; 5 | } 6 | @mixin circle() { 7 | border-radius: 100rem; 8 | } 9 | @mixin square($size, $radius: 0) { 10 | width: $size; 11 | height: $size; 12 | 13 | @if $radius != 0 { 14 | border-radius: $radius; 15 | } 16 | } 17 | @mixin flex( 18 | $align-items: flex-start, 19 | $justify-content: flex-start, 20 | $gap: 0, 21 | $flex-direction: row, 22 | $flex-wrap: nowrap 23 | ) { 24 | display: flex; 25 | align-items: $align-items; 26 | justify-content: $justify-content; 27 | flex-direction: $flex-direction; 28 | flex-wrap: $flex-wrap; 29 | gap: $gap; 30 | } 31 | @mixin flexOptimized($options) { 32 | display: flex; 33 | align-items: map-get($options, ai); 34 | justify-content: map-get($options, jc); 35 | flex-direction: map-get($options, fd); 36 | flex-wrap: map-get($options, fw); 37 | gap: map-get($options, gap); 38 | } 39 | @mixin minWidth($breakpoint: 0) { 40 | @if $breakpoint != 0 { 41 | @media screen and (min-width: $breakpoint) { 42 | @content; 43 | } 44 | } 45 | } 46 | @mixin maxWidth($breakpoint: 0) { 47 | @media screen and (max-width: $breakpoint) { 48 | @content; 49 | } 50 | } 51 | @mixin minMax($min: 0, $max: 0) { 52 | @media screen and (min-width: $min) and (max-width: $max) { 53 | @content; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /sass/abstracts/_variables.scss: -------------------------------------------------------------------------------- 1 | $primary-color: #2979ff; 2 | $black-color: #141416; 3 | $gray7: #f4f5f9; 4 | :root { 5 | --primary-color: #2979ff; 6 | --black-color: #141416; 7 | --gray2: #353945; 8 | --gray3: #777e90; 9 | --gray4: #b1b5c3; 10 | --gray5: #e6e8ec; 11 | --gray4f: #4f4f4f; 12 | --gray6: #f4f5f6; 13 | --primary-font: "Inter", sans-serif; 14 | --secondary-font: "DM Sans", sans-serif; 15 | --fz-default: 14px; 16 | } 17 | -------------------------------------------------------------------------------- /sass/base/_general.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: var(--primary-font); 3 | font-weight: 400; 4 | background-color: white; 5 | font-size: var(--fz-default); 6 | color: var(--gray3); 7 | line-height: 1; 8 | } 9 | .container { 10 | width: 100%; 11 | max-width: 1200px; 12 | margin: 0 auto; 13 | padding: 0 15px; 14 | } 15 | a { 16 | text-decoration: none; 17 | color: inherit; 18 | } 19 | -------------------------------------------------------------------------------- /sass/base/_reset.scss: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | img { 7 | display: block; 8 | max-width: 100%; 9 | } 10 | ul, 11 | ol { 12 | list-style-type: none; 13 | } 14 | input, 15 | button, 16 | textarea, 17 | select { 18 | outline: none; 19 | font: inherit; 20 | background-color: transparent; 21 | border: none; 22 | } 23 | button { 24 | cursor: pointer; 25 | } 26 | -------------------------------------------------------------------------------- /sass/components/_button.scss: -------------------------------------------------------------------------------- 1 | .button { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | background-color: var(--primary-color); 6 | color: white; 7 | border-radius: 100rem; 8 | cursor: pointer; 9 | outline: none; 10 | text-decoration: none; 11 | font-weight: 500; 12 | width: fit-content; 13 | } 14 | -------------------------------------------------------------------------------- /sass/components/_typography.scss: -------------------------------------------------------------------------------- 1 | .heading { 2 | color: var(--black-color); 3 | font-weight: 600; 4 | font-size: 30px; 5 | margin-bottom: 34px; 6 | line-height: 1.5; 7 | } 8 | -------------------------------------------------------------------------------- /sass/layout/_footer.scss: -------------------------------------------------------------------------------- 1 | /* Footer */ 2 | .footer { 3 | padding: 70px 0; 4 | } 5 | .footer-container { 6 | max-width: 1130px; 7 | } 8 | .footer-columns { 9 | display: flex; 10 | align-items: flex-start; 11 | justify-content: space-between; 12 | gap: 20px; 13 | } 14 | 15 | .footer-heading { 16 | font-size: 24px; 17 | line-height: 1.5; 18 | color: var(--gray2); 19 | font-weight: 500; 20 | margin-bottom: 20px; 21 | } 22 | .footer-links { 23 | display: flex; 24 | flex-direction: column; 25 | gap: 14px; 26 | } 27 | .footer-link { 28 | display: block; 29 | line-height: 1.5; 30 | font-size: 16px; 31 | } 32 | .footer-logo { 33 | display: inline-block; 34 | margin-bottom: 40px; 35 | } 36 | .footer-desc { 37 | font-size: 16px; 38 | line-height: 1.5; 39 | color: var(--gray2); 40 | margin-bottom: 30px; 41 | } 42 | .footer-top { 43 | padding-bottom: 70px; 44 | border-bottom: 1px solid var(--gray5); 45 | } 46 | .footer-bottom { 47 | margin-top: 40px; 48 | display: flex; 49 | justify-content: space-between; 50 | align-items: center; 51 | color: var(--gray4); 52 | gap: 20px; 53 | } 54 | .footer-sn-list { 55 | display: flex; 56 | align-items: center; 57 | gap: 14px; 58 | } 59 | /* Subscribe */ 60 | .subscribe { 61 | display: flex; 62 | align-items: center; 63 | justify-content: space-between; 64 | border-radius: 100rem; 65 | border: 2px solid var(--gray5); 66 | padding: 8px; 67 | } 68 | .subscribe-email { 69 | font-size: 16px; 70 | line-height: 1.5; 71 | color: var(--black-color); 72 | font-weight: 500; 73 | padding-inline: 18px; 74 | width: 100%; 75 | } 76 | .subscribe-email::-webkit-input-placeholder { 77 | color: var(--gray4); 78 | } 79 | .subscribe-email::-moz-input-placeholder { 80 | color: var(--gray4); 81 | } 82 | .subscribe-button { 83 | width: 33px; 84 | height: 33px; 85 | border-radius: 100rem; 86 | background-color: var(--primary-color); 87 | display: flex; 88 | justify-content: center; 89 | align-items: center; 90 | flex-shrink: 0; 91 | } 92 | -------------------------------------------------------------------------------- /sass/layout/_header.scss: -------------------------------------------------------------------------------- 1 | .header { 2 | background-color: white; 3 | padding: 16px 0; 4 | box-shadow: 0px 6px 30px rgba(15, 15, 15, 0.06); 5 | margin-bottom: 70px; 6 | &-list { 7 | @include flex(center, center, 20px); 8 | } 9 | &-item { 10 | padding: 14px 22px; 11 | border-radius: 10px; 12 | background-color: $gray7; 13 | display: block; 14 | transition: all 0.2s linear; 15 | &:hover { 16 | background-color: $primary-color; 17 | color: white; 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /sass/main.scss: -------------------------------------------------------------------------------- 1 | @import "./abstracts/variables"; 2 | @import "./abstracts/mixins"; 3 | 4 | @import "./base/reset"; 5 | @import "./base/general"; 6 | 7 | @import "./components/button"; 8 | @import "./components/typography"; 9 | 10 | @import "layout/header"; 11 | @import "layout/footer"; 12 | 13 | @import "./pages/home"; 14 | -------------------------------------------------------------------------------- /sass/pages/_home.scss: -------------------------------------------------------------------------------- 1 | @import "./home/top-tours"; 2 | @import "./home/popular"; 3 | @import "./home/gem"; 4 | @import "./home/diamond"; 5 | @import "./home/study"; 6 | @import "./home/responsive"; 7 | -------------------------------------------------------------------------------- /sass/pages/home/_diamond.scss: -------------------------------------------------------------------------------- 1 | /* diamond */ 2 | .diamond { 3 | padding: 65px 0; 4 | background-color: #fcfcfc; 5 | } 6 | .diamond .heading { 7 | text-align: center; 8 | } 9 | .diamond-list { 10 | max-width: 998px; 11 | margin: 0 auto; 12 | display: grid; 13 | grid-template-columns: 1fr 1fr; 14 | grid-template-rows: 220px 220px; 15 | gap: 30px; 16 | } 17 | .diamond-item { 18 | background-color: #ffffff; 19 | box-shadow: 0px 30px 110px rgba(0, 0, 0, 0.08); 20 | border-radius: 14px; 21 | padding: 12px; 22 | } 23 | .diamond-item img { 24 | width: 100%; 25 | height: 100%; 26 | object-fit: cover; 27 | border-radius: inherit; 28 | } 29 | .diamond-all { 30 | margin: 70px auto 0; 31 | font-size: 24px; 32 | padding: 9px 40px; 33 | line-height: 1.5; 34 | pointer-events: none; 35 | } 36 | .diamond-image { 37 | position: relative; 38 | width: 100%; 39 | height: 100%; 40 | border-radius: inherit; 41 | } 42 | .diamond-content { 43 | background: linear-gradient( 44 | 3.19deg, 45 | rgba(0, 0, 0, 0.6) 17.99%, 46 | rgba(0, 0, 0, 0) 55.56% 47 | ); 48 | position: absolute; 49 | top: 0; 50 | right: 0; 51 | bottom: 0; 52 | left: 0; 53 | border-radius: inherit; 54 | padding-left: 30px; 55 | padding-bottom: 14px; 56 | color: white; 57 | display: flex; 58 | align-items: flex-end; 59 | } 60 | -------------------------------------------------------------------------------- /sass/pages/home/_gem.scss: -------------------------------------------------------------------------------- 1 | /* Gems */ 2 | .gem-list { 3 | display: grid; 4 | grid-template-rows: 300px 300px 150px; 5 | grid-template-columns: repeat(3, 1fr); 6 | gap: 15px; 7 | grid-template-areas: 8 | "area1 area1 area2" 9 | "area1 area1 area3" 10 | "area4 area5 area5"; 11 | /* 12 | area1 area1 area2 13 | area1 area1 area3 14 | area4 area5 area5 15 | */ 16 | @include maxWidth(767.98px) { 17 | grid-template-areas: 18 | "area5 area5 area4" 19 | "area5 area5 area2" 20 | "area3 area1 area1"; 21 | } 22 | } 23 | .gem-item img { 24 | width: 100%; 25 | height: 100%; 26 | object-fit: cover; 27 | border-radius: 8px; 28 | } 29 | // .gem-item:first-child { 30 | // grid-column: 1 / 3; 31 | // grid-row: 1 / 3; 32 | // } 33 | // .gem-item:nth-child(3) { 34 | // grid-column: 1 / 2; 35 | // } 36 | // .gem-item:nth-last-child(2) { 37 | // grid-column: 3 / -1; 38 | // grid-row: 2 / 3; 39 | // } 40 | // .gem-item:last-child { 41 | // grid-column: 2 / -1; 42 | // } 43 | @for $i from 1 through 5 { 44 | .gem-item:nth-child(#{$i}) { 45 | grid-area: area + "" + #{$i}; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /sass/pages/home/_popular.scss: -------------------------------------------------------------------------------- 1 | /* Popular */ 2 | // .popular-list { 3 | // display: grid; 4 | /* align-items: start end center baseline stretch ; 5 | justify-content: start end center space-around space-between 6 | */ 7 | /* track-line: 1 -1 */ 8 | /* grid-template-columns: value value value ... n-value; */ 9 | /* grid-template-columns: 270px 270px 270px 270px; 10 | grid-template-columns: 25% 25% 25% 25%; */ 11 | /* grid-template-columns: 1fr 1fr 1fr 1fr; 12 | grid-template-columns: repeat(4, 1fr); */ 13 | /* grid-template-columns: 200px repeat(2, 1fr) 300px; */ 14 | /* grid-auto-flow: column; */ 15 | /* grid-auto-columns: 1fr; */ 16 | // --columns: 4; 17 | // grid-template-columns: repeat(var(--columns), 1fr); 18 | // gap: 30px; 19 | /* 1fr = fraction unit */ 20 | // margin-bottom: 70px; 21 | // } 22 | 23 | .popular { 24 | &-list { 25 | display: grid; 26 | grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); 27 | gap: 30px; 28 | margin-bottom: 40px; 29 | } 30 | 31 | &-item { 32 | border-radius: 14px; 33 | overflow: hidden; 34 | background-color: white; 35 | box-shadow: 0px 12px 64px rgba(0, 0, 0, 0.06); 36 | } 37 | &-label { 38 | display: inline-block; 39 | font-weight: 500; 40 | font-size: 12px; 41 | line-height: 15px; 42 | color: var(--gray6); 43 | padding: 4px 18px; 44 | border-radius: 100rem; 45 | background-color: var(--primary-color); 46 | position: absolute; 47 | right: 20px; 48 | bottom: 0; 49 | transform: translateY(50%); 50 | } 51 | &-image { 52 | height: 185px; 53 | position: relative; 54 | } 55 | &-img { 56 | width: 100%; 57 | height: 100%; 58 | object-fit: cover; 59 | } 60 | &-content { 61 | padding: 14px 20px; 62 | } 63 | &-time { 64 | color: var(--gray3); 65 | font-weight: 400; 66 | font-size: 9px; 67 | line-height: 11px; 68 | margin-bottom: 8px; 69 | display: block; 70 | } 71 | &-title { 72 | color: var(--gray2); 73 | font-weight: 500; 74 | font-size: 18px; 75 | line-height: 28px; 76 | margin-bottom: 9px; 77 | } 78 | &-review { 79 | @include flexOptimized( 80 | ( 81 | ai: flex-start, 82 | ) 83 | ); 84 | font-weight: 500; 85 | font-size: 12px; 86 | line-height: 21px; 87 | color: var(--gray4f); 88 | gap: 4px; 89 | font-family: var(--secondary-font); 90 | } 91 | @include minWidth(1024px) { 92 | &-list { 93 | margin-bottom: 70px; 94 | } 95 | } 96 | } 97 | // .layout { 98 | // &-auto { 99 | // margin-top: 50px; 100 | // display: grid; 101 | // grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 102 | // gap: 20px; 103 | // } 104 | // &-auto-2 { 105 | // margin-top: 50px; 106 | // display: grid; 107 | // grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 108 | // gap: 20px; 109 | // } 110 | // &-auto-item { 111 | // padding: 10px; 112 | // color: white; 113 | // background-color: #f62682; 114 | // } 115 | // } 116 | -------------------------------------------------------------------------------- /sass/pages/home/_responsive.scss: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: 768px) { 2 | .footer-column:first-child { 3 | max-width: 268px; 4 | } 5 | } 6 | 7 | @media screen and (max-width: 767.98px) { 8 | .gem-list { 9 | grid-template-rows: 100px 100px 70px; 10 | } 11 | .popular-list { 12 | --columns: 1; 13 | } 14 | .heading { 15 | font-size: 18px; 16 | margin-bottom: 30px; 17 | } 18 | 19 | .tour-title { 20 | font-size: 16px; 21 | margin-bottom: 12px; 22 | } 23 | .tour-button, 24 | .tour-rating { 25 | font-size: 12px; 26 | } 27 | .tour-content { 28 | padding: 17px 17px 9px; 29 | } 30 | .tour-image { 31 | height: 211px; 32 | } 33 | .diamond { 34 | padding: 30px 0; 35 | } 36 | .diamond-list { 37 | grid-template-columns: 1fr; 38 | grid-template-rows: none; 39 | grid-auto-flow: row; 40 | grid-auto-rows: 148px; 41 | gap: 16px; 42 | } 43 | .diamond-item { 44 | padding: 8px; 45 | } 46 | .diamond-all { 47 | margin-top: 30px; 48 | margin-bottom: 0; 49 | font-size: 16px; 50 | padding: 4px 20px; 51 | } 52 | .footer { 53 | padding: 30px 0; 54 | } 55 | .footer-top { 56 | padding-bottom: 30px; 57 | } 58 | .footer-bottom, 59 | .footer-columns { 60 | flex-direction: column; 61 | } 62 | .footer-columns { 63 | gap: 40px; 64 | } 65 | } 66 | @media screen and (min-width: 768px) and (max-width: 1023.98px) { 67 | .popular-list, 68 | .tour-list { 69 | --columns: 2; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /sass/pages/home/_study.scss: -------------------------------------------------------------------------------- 1 | .grid { 2 | &-layout { 3 | display: grid; 4 | grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 5 | grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 6 | gap: 20px; 7 | margin-bottom: 40px; 8 | } 9 | &-item { 10 | aspect-ratio: 1/1; 11 | box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 12 | @include flex(center, center); 13 | } 14 | } 15 | .my-name { 16 | text-align: center; 17 | position: relative; 18 | &:before { 19 | content: ""; 20 | width: 100%; 21 | height: 1px; 22 | background-color: black; 23 | left: 0; 24 | position: absolute; 25 | top: 50%; 26 | transform: translateY(-50%); 27 | } 28 | span { 29 | position: relative; 30 | z-index: 2; 31 | background-color: white; 32 | padding: 5px; 33 | } 34 | } 35 | .button-rounded { 36 | width: 50px; 37 | height: 50px; 38 | border-radius: 100rem; 39 | display: flex; 40 | justify-content: center; 41 | align-items: center; 42 | color: #6a5af9; 43 | // background-color: rgba(255, 192, 203, 0.3); 44 | position: relative; 45 | cursor: pointer; 46 | &:before { 47 | content: ""; 48 | position: absolute; 49 | inset: 0; 50 | border-radius: inherit; 51 | background-color: currentColor; 52 | opacity: 0.1; 53 | } 54 | } 55 | .bag-icon { 56 | display: inline-block; 57 | position: relative; 58 | color: red; 59 | &:before { 60 | content: ""; 61 | position: absolute; 62 | right: 0; 63 | top: 0; 64 | @include size(10px); 65 | background-color: currentColor; 66 | border: 1px solid white; 67 | border-radius: 100rem; 68 | } 69 | } 70 | button.pointer { 71 | cursor: not-allowed; 72 | span { 73 | cursor: pointer; 74 | pointer-events: none; 75 | } 76 | } 77 | .column { 78 | column-count: 3; 79 | column-gap: 50px; 80 | column-width: 200px; 81 | column-rule: 5px dotted orange; 82 | h3 { 83 | column-span: all; 84 | } 85 | } 86 | .boxed { 87 | @include size(100px); 88 | background-color: white; 89 | box-shadow: 5px 5px red; 90 | } 91 | .text-indent { 92 | text-indent: 5px; 93 | } 94 | .box-overflow { 95 | width: 200px; 96 | height: 200px; 97 | background-color: #6a5af9; 98 | color: black; 99 | overflow: auto; 100 | overflow-x: scroll; 101 | overflow-y: hidden; 102 | } 103 | .image-ratio { 104 | aspect-ratio: 1.34/1; 105 | &-wrapper { 106 | max-width: 500px; 107 | } 108 | } 109 | .counter { 110 | /* Set "section" to 0 */ 111 | counter-reset: section; 112 | 113 | h1 { 114 | /* Set "subsection" to 0 */ 115 | counter-reset: subsection; 116 | } 117 | 118 | h1::before { 119 | counter-increment: section; 120 | content: "Section " counter(section) ": "; 121 | } 122 | 123 | h2::before { 124 | counter-increment: subsection; 125 | content: counter(section) "." counter(subsection) " "; 126 | } 127 | } 128 | .item-image { 129 | // width: min(100%, 400px); 130 | // width: max(50%, 300px); 131 | width: clamp(300px, 50%, 500px); 132 | } 133 | .title-clamp { 134 | // font-size: 40px; 135 | // font-weight: bold; 136 | // @include maxWidth(1023px) { 137 | // font-size: 30px; 138 | // } 139 | // @include maxWidth(767px) { 140 | // font-size: 25px; 141 | // } 142 | font-weight: bold; 143 | font-size: clamp(25px, 2vw + 16px, 40px); 144 | } 145 | .card-item-wrapper { 146 | container-type: inline-size; 147 | container-name: card; 148 | max-width: 1000px; 149 | border: 1px solid black; 150 | } 151 | .card-item { 152 | display: flex; 153 | align-items: center; 154 | background-color: white; 155 | padding: 15px; 156 | border-radius: 12px; 157 | box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 158 | img { 159 | width: 300px; 160 | height: 100%; 161 | object-fit: cover; 162 | border-radius: 8px; 163 | flex-shrink: 0; 164 | } 165 | &-item-content { 166 | flex: 1; 167 | } 168 | // @media screen and (max-width: 1023px) { 169 | // width: 300px; 170 | // height: 200px; 171 | // } 172 | @container card (max-width: 730px) { 173 | flex-direction: column; 174 | } 175 | } 176 | -------------------------------------------------------------------------------- /sass/pages/home/_top-tours.scss: -------------------------------------------------------------------------------- 1 | .top-tours { 2 | margin-bottom: 70px; 3 | } 4 | .tour { 5 | &-list { 6 | // --columns: 3; 7 | // --gap: 30px; 8 | // --spacing: calc(((var(--columns) - 1) * var(--gap)) / var(--columns)); 9 | display: flex; 10 | flex-direction: row; 11 | align-items: stretch; 12 | flex-wrap: wrap; 13 | // column-gap: var(--gap); 14 | // row-gap: var(--gap); 15 | // gap: var(--gap); 16 | // cách 2 17 | gap: 30px; 18 | } 19 | &-item { 20 | background-color: white; 21 | border-radius: 10px; 22 | word-break: break-word; 23 | box-shadow: 0px 12px 64px rgba(0, 0, 0, 0.06); 24 | @include flex(stretch, flex-start, 0, column); 25 | // width: calc((100% / var(--columns)) - var(--spacing)); 26 | // cách 2 27 | flex: 1; 28 | } 29 | &-image { 30 | border-radius: 10px 10px 0 0; 31 | width: 100%; 32 | height: 239px; 33 | object-fit: cover; 34 | display: block; 35 | } 36 | &-content { 37 | padding: 20px 20px 14px 20px; 38 | flex: 1; 39 | @include flexOptimized( 40 | ( 41 | ai: flex-start, 42 | fd: column, 43 | ) 44 | ); 45 | border-radius: 0 0 10px 10px; 46 | } 47 | 48 | &-title { 49 | --primary-color: #23262f; 50 | margin-bottom: 20px; 51 | color: var(--primary-color); 52 | font-weight: 500; 53 | font-size: 18px; 54 | line-height: 1.556; 55 | // display: -webkit-box; 56 | // -webkit-line-clamp: 2; 57 | // -webkit-box-orient: vertical; 58 | // overflow: hidden; 59 | // text-overflow: ellipsis; 60 | // word-break: break-word; 61 | } 62 | &-rating { 63 | display: flex; 64 | justify-content: space-between; 65 | align-items: center; 66 | margin-top: auto; 67 | margin-bottom: 20px; 68 | } 69 | &-review { 70 | display: flex; 71 | align-items: center; 72 | column-gap: 11px; 73 | } 74 | 75 | &-duration, 76 | &-review-count { 77 | color: #353945; 78 | } 79 | &-button { 80 | font-size: 14px; 81 | font-weight: 500; 82 | color: white; 83 | padding: 8px 17px; 84 | background-color: var(--primary-color); 85 | text-decoration: none; 86 | border-radius: 8px; 87 | line-height: 17px; 88 | display: inline-block; 89 | } 90 | 91 | &-top { 92 | position: relative; 93 | } 94 | &-price { 95 | position: absolute; 96 | top: 24px; 97 | left: 30px; 98 | display: inline-block; 99 | font-size: 12px; 100 | font-weight: 500; 101 | color: #fcfcfd; 102 | background-color: rgb(53, 57, 69, 0.8); 103 | padding: 5px 16px; 104 | line-height: 20px; 105 | border-radius: 4px; 106 | } 107 | @media screen and (max-width: 767.98px) { 108 | // &-list { 109 | // flex-direction: column; 110 | // } 111 | &-list { 112 | display: grid; 113 | grid-auto-flow: column; 114 | grid-auto-columns: 320px; 115 | overflow-x: auto; 116 | padding: 0 30px 30px; 117 | scroll-snap-type: x mandatory; 118 | scroll-snap-stop: always; 119 | } 120 | &-item { 121 | scroll-snap-align: center; 122 | } 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /trip-guide/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /trip-guide/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | TripGuide 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /trip-guide/index.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang="en") 3 | head 4 | meta(charset="UTF-8") 5 | meta(name="viewport", content="width=device-width, initial-scale=1.0") 6 | title TripGuide 7 | link(rel="preconnect", href="https://fonts.googleapis.com") 8 | link(rel="preconnect", href="https://fonts.gstatic.com", crossorigin) 9 | link(href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Poppins:wght@400;500;700&display=swap", rel="stylesheet") 10 | script(type="module", src="/main.js", async) 11 | body -------------------------------------------------------------------------------- /trip-guide/main.js: -------------------------------------------------------------------------------- 1 | import "./styles/style.scss"; 2 | -------------------------------------------------------------------------------- /trip-guide/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "trip-guide", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "autoprefixer": "^10.4.14", 13 | "postcss": "^8.4.26", 14 | "tailwindcss": "^3.3.3", 15 | "vite": "^4.4.0" 16 | }, 17 | "dependencies": { 18 | "sass": "^1.63.6" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /trip-guide/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /trip-guide/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /trip-guide/styles/style.scss: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /trip-guide/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ["./index.html", "./*.{js,ts,jsx,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /views/home/Diamond.pug: -------------------------------------------------------------------------------- 1 | section.diamond 2 | .container 3 | h2.heading Hidden gems in Bangkok 4 | .diamond-list 5 | each val in ["https://images.unsplash.com/photo-1530521954074-e64f6810b32d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80", "https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80", "https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1421&q=80", "https://images.unsplash.com/photo-1488085061387-422e29b40080?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1931&q=80"] 6 | .diamond-item 7 | .diamond-image 8 | img(src= val, alt="") 9 | .diamond-content 10 | h3.diamond-title Bangkok 11 | a.button.diamond-all(href="#") Explore All -------------------------------------------------------------------------------- /views/home/Gem.pug: -------------------------------------------------------------------------------- 1 | section.gem 2 | .container 3 | h2.heading Hidden gems in Bangkok 4 | .gem-list 5 | each val in ["https://images.unsplash.com/photo-1530521954074-e64f6810b32d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80", "https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80", "https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1421&q=80", "https://images.unsplash.com/photo-1488085061387-422e29b40080?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1931&q=80", "https://images.unsplash.com/photo-1503220317375-aaad61436b1b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"] 6 | .gem-item 7 | img(src= val, alt="") -------------------------------------------------------------------------------- /views/home/Popular.pug: -------------------------------------------------------------------------------- 1 | section.popular 2 | .container 3 | h2.heading Popular things to do in Bangkok 4 | .popular-list 5 | each val in [1,2,3,4] 6 | +popularItem() 7 | //- +popularItem() 8 | //- +popularItem() 9 | //- +popularItem() 10 | //- //- .layout-auto 11 | //- each val in [1,2,3,4,5,6,7] 12 | //- .layout-auto-item= val 13 | //- .layout-auto-2 14 | //- each val in [1,2,3,4,5,6,7] 15 | //- .layout-auto-item= val -------------------------------------------------------------------------------- /views/home/Study.pug: -------------------------------------------------------------------------------- 1 | section.grid 2 | .container 3 | .grid-layout 4 | each val in [1,2,3,4,5,6,7] 5 | .grid-item= val 6 | .my-name 7 | span Evondev 8 | button.button-rounded icon 9 | .bag-icon 10 | svg(width="24", height="24", viewBox="0 0 24 24", fill="none", xmlns="http://www.w3.org/2000/svg") 11 | path(d="M4.53715 10.4713C4.80212 8.48412 6.49726 7 8.50207 7H15.4979C17.5027 7 19.1979 8.48412 19.4628 10.4713L20.3962 17.4713C20.7159 19.8693 18.8504 22 16.4313 22H7.56873C5.14958 22 3.2841 19.8693 3.60382 17.4713L4.53715 10.4713Z", stroke="#7B88A8", stroke-width="1.5") 12 | path(d="M16 9V6C16 3.79086 14.2091 2 12 2V2C9.79086 2 8 3.79086 8 6L8 9", stroke="#7B88A8", stroke-width="1.5", stroke-linecap="round") 13 | button.pointer 14 | span Demo 15 | span Icon 16 | div.column 17 | h3.title this is tile 18 | | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic ad reprehenderit, unde quas modi rerum iure cumque esse in quasi obcaecati cum architecto consequuntur dolorum dolore qui maiores, veritatis impedit! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic ad reprehenderit, unde quas modi rerum iure cumque esse in quasi obcaecati cum architecto consequuntur dolorum dolore qui maiores, veritatis impedit! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic ad reprehenderit, unde quas modi rerum iure cumque esse in quasi obcaecati cum architecto consequuntur dolorum dolore qui maiores, veritatis impedit! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic ad reprehenderit, unde quas modi rerum iure cumque esse in quasi obcaecati cum architecto consequuntur dolorum dolore qui maiores, veritatis impedit! 19 | .boxed 20 | .text-indent evondev 21 | .box-overflow Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio doloribus minima dolorem accusantium soluta sunt quia assumenda esse, magni iure modi sapiente adipisci voluptatem eligendi aut iste laboriosam beatae eius!Odio quaerat dicta est, voluptatem quas esse magni quasi aliquid at tempore ratione, praesentium inventore sint repellat assumenda blanditiis, vel doloribus itaque quo voluptates explicabo quae cum incidunt. Recusandae, iure.Obcaecati fugit repellendus non, doloribus sapiente aspernatur temporibus laborum tempore similique quam tempora omnis rerum animi necessitatibus officia aliquid modi eligendi id dolor illo hic earum reiciendis et. Laudantium, cumque!Libero numquam beatae, accusamus voluptatibus dolor ducimus. Sint est cum dicta error temporibus explicabo vero asperiores mollitia officiis exercitationem assumenda, autem, odit sunt suscipit ea fugiat deleniti, quidem ipsa optio!Similique reprehenderit veritatis laborum provident dolores sint non, ex modi amet nesciunt est molestias nulla nostrum, rerum officiis esse dolor culpa? Provident consectetur doloremque nobis itaque recusandae quibusdam eius iure?Modi et reprehenderit labore, nemo, autem veniam facilis ratione officiis non error molestiae. Voluptas ipsum velit pariatur ad nisi dolorum eaque? Incidunt ex dignissimos doloremque. Ea recusandae ad blanditiis repellat.Cum non minus nihil illo amet aperiam, iste inventore perspiciatis vel soluta id, libero, in laborum! Dignissimos officia, facilis eum quia odio molestias placeat ab! Ab soluta deserunt nobis incidunt.Animi assumenda dolorem dolores, quod officia expedita dolorum odit voluptatibus nisi error temporibus quaerat eveniet reiciendis laboriosam, necessitatibus doloribus voluptate quisquam omnis. Blanditiis, eos quas. Maiores possimus earum deserunt impedit?Dicta labore impedit sint harum aut obcaecati molestias perspiciatis reiciendis, animi rerum illo assumenda aliquam commodi ullam aliquid quod similique a excepturi dolorem qui quasi nobis laborum vitae. Alias, ab?Molestias quaerat at accusantium autem beatae doloribus velit odio provident eaque possimus, aliquid sequi nulla sed dignissimos quidem iusto atque, error recusandae rerum quod alias ea officia, ad quasi. Odio? 22 | .image-ratio-wrapper 23 | img(src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1452&q=80").image-ratio 24 | .counter 25 | h1 HTML and CSS 26 | h2 HTML Tutorial 27 | h2 CSS Tutorial 28 | h2 Bootstrap Tutorial 29 | hr 30 | h1 JavaScript 31 | h2 JavaScript Tutorial 32 | h2 jQuery Tutorial 33 | h2 JSON Tutorial 34 | hr 35 | h1 Server Side 36 | h2 SQL Tutorial 37 | h2 PHP Tutorial 38 | .item-image 39 | img(src="https://images.unsplash.com/photo-1616588589676-62b3bd4ff6d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2064&q=80") 40 | .title-clamp My name is Evondev 41 | .card-item-wrapper 42 | .card-item 43 | img(src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1452&q=80") 44 | .card-item-content Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur quis molestias illum cupiditate! Facere molestiae accusantium asperiores debitis officia quae sunt esse, iure praesentium odio ipsa nisi eveniet assumenda soluta. 45 | -------------------------------------------------------------------------------- /views/home/TopTours.pug: -------------------------------------------------------------------------------- 1 | section.top-tours 2 | .container 3 | h2.heading Top Bangkok Tours 4 | .tour-list 5 | +tourItem("https://images.unsplash.com/photo-1523906834658-6e24ef2386f9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=683&q=80", "From $40", "Thailands Ayutthaya Temples Cruise from Bangkok Thailands Ayutthaya Temples Cruise from Bangkok", 4.8, 20, "9 hours", 55) 6 | +tourItem("https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80", "From $60","FLoating Markets Day Trip from Bangkok", 4.5, 30, "15 hours", 88) 7 | +tourItem("https://images.unsplash.com/photo-1530789253388-582c481c54b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80", "From $60","FLoating Markets Day Trip from Bangkok", 4.5, 30, "15 hours", 88) -------------------------------------------------------------------------------- /views/layout/footer.pug: -------------------------------------------------------------------------------- 1 | footer.footer 2 | .container.footer-container 3 | .footer-top 4 | .footer-columns 5 | .footer-column 6 | a.footer-logo(href="/") 7 | img(srcSet="./images/logo.png 2x" alt="Airtrav") 8 | p.footer-desc Similarly, a loan taken out to buy a car may be secured by the car. The duration of the loan. 9 | form.subscribe(action="" autocomplete) 10 | input(type="email" placeholder="Enter your email").subscribe-email 11 | button.subscribe-button(type="submit") 12 | img(srcSet="./images/icon-arrow-right.png 2x", alt="icon-arrow-right") 13 | .footer-column 14 | h4.footer-heading Services 15 | ul.footer-links 16 | each val in ["Trip Planner","Tour Planning","Tour Guide","Tour Package","Tour advice"] 17 | li.footer-item 18 | a.footer-link(href="#")= val 19 | .footer-column 20 | h4.footer-heading Services 21 | ul.footer-links 22 | each val in ["Trip Planner","Tour Planning","Tour Guide","Tour Package","Tour advice"] 23 | li.footer-item 24 | a.footer-link(href="#")= val 25 | .footer-column 26 | h4.footer-heading Services 27 | ul.footer-links 28 | each val in ["Trip Planner","Tour Planning","Tour Guide","Tour Package","Tour advice"] 29 | li.footer-item 30 | a.footer-link(href="#")= val 31 | .footer-bottom 32 | p.footer-copyright Copyright© 2023 UIHUT LLC. All rights reserved 33 | .footer-sn-list 34 | each s in [1,2,3,4] 35 | .footer-sn-item 36 | a.footer-sn-link(href="#") 37 | img(src="./images/icon-fb.svg") -------------------------------------------------------------------------------- /views/layout/header.pug: -------------------------------------------------------------------------------- 1 | header.header 2 | .container 3 | .header-list 4 | each link in ["Things to do", "Travel Guide", "Tours"] 5 | a.header-item(href="#")= link -------------------------------------------------------------------------------- /views/layout/layout-tour.pug: -------------------------------------------------------------------------------- 1 | include ../mixins/mixins 2 | block vars 3 | - var title = 'HTML CSS MASTER'; 4 | doctype html 5 | html(lang="en") 6 | head 7 | block head 8 | meta(charset="UTF-8") 9 | meta(http-equiv="X-UA-Compatible", content="IE=edge") 10 | meta(name="viewport", content="width=device-width, initial-scale=1.0") 11 | title= title 12 | link(rel="preconnect" href="https://fonts.googleapis.com") 13 | link(rel="preconnect" href="https://fonts.gstatic.com" crossorigin) 14 | link(href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet") 15 | link(href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&display=swap" rel="stylesheet") 16 | body 17 | include ./header 18 | block main 19 | include ./footer -------------------------------------------------------------------------------- /views/mixins/mixins.pug: -------------------------------------------------------------------------------- 1 | mixin tourItem(image, price, title, review, reviewCount, duration, tourPrice) 2 | .tour-item 3 | .tour-top 4 | img.tour-image(src= image, alt='bali') 5 | span.tour-price= price 6 | .tour-content 7 | h3.tour-title= title 8 | .tour-rating 9 | .tour-review 10 | .tour-star 11 | img(src='./images/star.png', alt='tour-rating') 12 | .tour-review-count 13 | span= review 14 | | (#{reviewCount} reviews) 15 | span.tour-duration Duration: #{duration} 16 | a.tour-button(href='https://evondev.com', target='_blank', rel='noopener noreferrer') Tours Price $#{tourPrice} 17 | 18 | mixin popularItem() 19 | .popular-item 20 | .popular-image 21 | img.popular-img(src="https://images.unsplash.com/photo-1568849676085-51415703900f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80", alt="") 22 | span.popular-label Must see 23 | .popular-content 24 | span.popular-time Sep 28 10:00 AM - 1:00 PM 25 | h3.popular-title The Grand Palace 26 | .popular-review 27 | img(src="./images/star.png", alt="star") 28 | span 4.8 (12 reviews) --------------------------------------------------------------------------------