├── img └── favicon.png ├── .github └── workflows │ └── azure-static-web-apps-ambitious-rock-09e1c9b0f.yml ├── CONTRIBUTING.md ├── app.js ├── README.md ├── index.html └── style.css /img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imhardikdesai/news-website/HEAD/img/favicon.png -------------------------------------------------------------------------------- /.github/workflows/azure-static-web-apps-ambitious-rock-09e1c9b0f.yml: -------------------------------------------------------------------------------- 1 | name: Azure Static Web Apps CI/CD 2 | 3 | on: 4 | push: 5 | branches: 6 | - New-Public-Insorts-Api 7 | pull_request: 8 | types: [opened, synchronize, reopened, closed] 9 | branches: 10 | - New-Public-Insorts-Api 11 | 12 | jobs: 13 | build_and_deploy_job: 14 | if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') 15 | runs-on: ubuntu-latest 16 | name: Build and Deploy Job 17 | steps: 18 | - uses: actions/checkout@v2 19 | with: 20 | submodules: true 21 | - name: Build And Deploy 22 | id: builddeploy 23 | uses: Azure/static-web-apps-deploy@v1 24 | with: 25 | azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_AMBITIOUS_ROCK_09E1C9B0F }} 26 | repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments) 27 | action: "upload" 28 | ###### Repository/Build Configurations - These values can be configured to match your app requirements. ###### 29 | # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig 30 | app_location: "/" # App source code path 31 | api_location: "" # Api source code path - optional 32 | output_location: "" # Built app content directory - optional 33 | ###### End of Repository/Build Configurations ###### 34 | 35 | close_pull_request_job: 36 | if: github.event_name == 'pull_request' && github.event.action == 'closed' 37 | runs-on: ubuntu-latest 38 | name: Close Pull Request Job 39 | steps: 40 | - name: Close Pull Request 41 | id: closepullrequest 42 | uses: Azure/static-web-apps-deploy@v1 43 | with: 44 | azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_AMBITIOUS_ROCK_09E1C9B0F }} 45 | action: "close" 46 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to News Website 2 | 3 | Welcome to News Website! We appreciate your interest in contributing to our project. Whether you want to report a bug, suggest an improvement, or contribute code, please take a moment to read the following guidelines. 4 | 5 | ## Table of Contents 6 | 7 | - [Code of Conduct](#code-of-conduct) 8 | - [Reporting Bugs](#reporting-bugs) 9 | - [Contributing Code](#contributing-code) 10 | - [Commit Guidelines](#commit-guidelines) 11 | - [Pull Requests](#pull-requests) 12 | 13 | ## Code of Conduct 14 | 15 | Before getting started, please review our [Code of Conduct](CODE_OF_CONDUCT.md). We expect all contributors to adhere to this code to ensure a welcoming and respectful environment. 16 | 17 | ## Reporting Bugs 18 | 19 | If you encounter a bug or issue with News Website, please [create a new issue](link-to-issue-tracker) on our issue tracker. Be sure to include: 20 | 21 | - A clear and descriptive title. 22 | - Detailed steps to reproduce the bug. 23 | - Information about your environment (e.g., operating system, browser, or version of the project). 24 | 25 | ## Contributing Code 26 | 27 | We welcome code contributions from the community. To get started: 28 | 29 | 1. Fork the repository to your GitHub account. 30 | 2. Clone your fork to your local machine. 31 | 3. Create a new branch for your changes: `git checkout -b your-feature-name`. 32 | 4. Make your changes and test them thoroughly. 33 | 5. Commit your changes. 34 | 6. Push your changes to your fork: `git push origin your-feature-name`. 35 | 7. Create a pull request against the `main` branch of the main repository. 36 | 37 | ## Getting Started 38 | 39 | If you're new to News Website, you can explore all features and give us feedback at hardikdesaitech@gmail.com 40 | 41 | ## Commit Guidelines 42 | 43 | To keep our commit history clean and well-organized. Please adhere to these guidelines when making commits. 44 | 45 | ## Pull Requests 46 | 47 | When creating a pull request, make sure it includes: 48 | 49 | - A clear and concise title. 50 | - A description of the changes you've made and the problem it solves. 51 | - Any relevant issue references. 52 | 53 | Our maintainers will review your pull request, provide feedback, and merge it once it's ready. 54 | 55 | Thank you for your contributions! 56 | 57 | News Website Team 58 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | const darkModeToggle = document.getElementById("darkModeToggle"); 2 | const body = document.body; 3 | document.getElementById( 4 | "footerText" 5 | ).innerHTML = `Copyright ©${new Date().getFullYear()}   Hardik Desai`; 6 | // Function to toggle dark mode based on user preference 7 | function toggleDarkMode() { 8 | if (darkModeToggle.checked) { 9 | body.classList.add("dark-mode"); 10 | } else { 11 | body.classList.remove("dark-mode"); 12 | } 13 | } 14 | 15 | // Event listener for dark mode toggle button 16 | darkModeToggle.addEventListener("change", toggleDarkMode); 17 | 18 | // Function to check and set initial dark mode state based on user preferences 19 | function setInitialDarkMode() { 20 | const prefersDarkMode = window.matchMedia( 21 | "(prefers-color-scheme: dark)" 22 | ).matches; 23 | 24 | if (prefersDarkMode) { 25 | body.classList.add("dark-mode"); 26 | darkModeToggle.checked = true; 27 | } 28 | } 29 | 30 | // Call the function to set initial dark mode state 31 | //setInitialDarkMode(); 32 | 33 | let newsBox = document.getElementById("newsBox"); 34 | let spinner = document.getElementById("spinner"); 35 | let newsCategory = [ 36 | "national", 37 | "business", 38 | "sports", 39 | "world", 40 | "politics", 41 | "technology", 42 | "startup", 43 | "entertainment", 44 | "miscellaneous", 45 | "hatke", 46 | "science", 47 | "automobile", 48 | ]; 49 | 50 | // Create XMLHttpRequest Object 51 | const xhr = new XMLHttpRequest(); 52 | 53 | function sendCategory(index) { 54 | getNews(newsCategory[index]); 55 | } 56 | getNews("all"); 57 | 58 | function getNews(newsCategoryName) { 59 | xhr.open("GET", `https://saurav.tech/NewsAPI/everything/cnn.json`, true); 60 | 61 | xhr.getResponseHeader("Content-type", "application/json"); 62 | 63 | xhr.onload = function () { 64 | if (this.status === 200) { 65 | let json = JSON.parse(this.responseText); 66 | let data = json.articles; 67 | 68 | let newsHTML = ""; 69 | 70 | for (key in data) { 71 | let news = `
72 |
73 | Image 75 |
76 |
77 |
${new Date( 78 | data[key].publishedAt 79 | ).toDateString()}
80 |
${data[key].title}
81 |
Author: ${ 82 | data[key].author 83 | }
84 |

${data[key].content}

85 | Read more.. 88 |
89 | 90 |
`; 91 | newsHTML += news; 92 | } 93 | 94 | spinner.style.visibility = "hidden"; 95 | newsBox.style.visibility = "visible"; 96 | 97 | newsBox.innerHTML = newsHTML; 98 | } else { 99 | console.log("Some Error Occurred"); 100 | } 101 | }; 102 | 103 | xhr.send(); 104 | } 105 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | ✨ News Website ✨ 3 |

4 | 5 |
6 | 7 | ![Badge](https://img.shields.io/badge/HTML-blue) ![Badge](https://img.shields.io/badge/CSS-orange) ![Badge](https://img.shields.io/badge/-JS%20-blue) 8 | ![Badge](https://img.shields.io/badge/Version-1.0-green) 9 | 10 |
11 |
12 | This is Static news website which fetch live and trending news from API. I have used azure static web app in this project to host. 13 | 14 |
15 |

16 | Live Project : https://news-website-web.vercel.app 17 |

18 |
19 | 20 | ## Tech Stack : 21 | 22 | - **Frontend:** HTML,CSS,JavaScript 23 | - **Version Control:** Git and GitHub 24 | - **Hosting:** Github 25 | - **Code Editor and tools**: VS Code 26 | 27 |
28 | 29 | ## Table of Contents 30 | 31 | - Overview 32 | - Folder Structure 33 | - UI of Website 34 | - Contribution Guideline 35 | 36 |
37 | 38 | 39 | ## Overview 🔨 40 | 41 | A News website which gives latest news about India. This website Build using Plain Venila Javascript. Also it use Fatch API. 42 | 43 | 44 | ## Folder Structure 📒 45 | 
 46 |         |   |───Img
 47 |         │   └───Favicon
 48 |         ├───Components
 49 |         │   ├───Navbar
 50 |         │   └───Header of Website
 51 |         ├───News Box
 52 |         │   ├───Image of News
 53 |         │   ├───News Title
 54 |         │   ├───News Discription
 55 |         │   ├───Read More
 56 |         │   └───Date & Time
 57 |         ├───Footer
 58 |
59 |
60 | 61 | ## Some of image of my project while doing project: 62 | 63 | Create Static web app 64 | ![Screenshot (280)](https://user-images.githubusercontent.com/87645745/178142571-42533c3f-94e9-417c-9d50-10af088d9dfe.png) 65 | |![Screenshot (280)](https://user-images.githubusercontent.com/87645745/178142572-54ffee0d-7245-4f80-88de-1053586b704c.png) | 66 | |- 67 | | Deploy project 68 | | ![Screenshot (282)](https://user-images.githubusercontent.com/87645745/178142576-1a76a2d6-b0f8-450d-98e7-561356526847.png) 69 | | Resource of the project 70 | | ![Screenshot (278)](https://user-images.githubusercontent.com/87645745/178142579-846a62ac-6fbc-41c8-94cd-2f1e5d7f67ed.png) 71 | 72 |
73 | ## UI of the Website 74 | 75 | |![Screenshot (280)](https://user-images.githubusercontent.com/87645745/177340164-6b3894e6-01b0-4bec-9472-c56f557f7089.png) | 76 | |- 77 | | Loading Page 78 | | ![Screenshot (282)](https://user-images.githubusercontent.com/87645745/177339951-a70101f3-c830-4661-827b-76624c4dec3f.png) 79 | | Home Page 80 | | ![Screenshot (278)](https://user-images.githubusercontent.com/87645745/177340746-f666e6a6-becd-49f9-b262-beaed5c3ba43.png) 81 | | Responsive 82 | 83 |
84 | ## API Reference 85 | 86 | #### Get all items 87 | 88 | ```http 89 | GET /api/https://inshorts.deta.dev/news?category=national 90 | ``` 91 | 92 | | Parameter | Type | Description | 93 | | :-------- | :------- | :------------------------- | 94 | | `api_key` | `string` | **Required**. No Authorization | 95 | 96 | 97 | 98 | 99 |
100 | 101 | ## Setup Steps 102 | 103 | - Go to directory 104 | ``` 105 | $ cd news-website 106 | ``` 107 |
108 | 109 | ## Contribution Guidelines 🏗 110 | 111 | To start contributing, follow the below guidelines: 112 | 113 | **1.** Fork [this](https://imhardikdesai.github.io/news-website/) repository. 114 | 115 | **2.** Clone your forked copy of the project. 116 | 117 | ``` 118 | git clone https://github.com/imhardikdesai/news-website.git 119 | ``` 120 | 121 | **3.** Navigate to the project directory :file_folder: . 122 | 123 | ``` 124 | cd news-website 125 | ``` 126 | 127 | **4.** Add a reference(remote) to the original repository. 128 | 129 | ``` 130 | git remote add upstream news-website.git 131 | ``` 132 | 133 | **5.** Check the remotes for this repository. 134 | 135 | ``` 136 | git remote -v 137 | ``` 138 | 139 | **6.** Create a new branch. 140 | 141 | ``` 142 | git checkout -b 143 | ``` 144 | 145 | **7.** Perfom your desired changes to the code base. 146 | 147 | **8.** Track your changes:heavy_check_mark: . 148 | 149 | ``` 150 | git add . 151 | ``` 152 | 153 | **9.** Commit your changes . 154 | 155 | ``` 156 | git commit -m "Relevant message" 157 | ``` 158 | 159 | **10.** Push the committed changes in your feature branch to your remote repo. 160 | 161 | ``` 162 | git push -u origin 163 | ``` 164 | 165 | **11.** To create a pull request, click on `compare and pull requests`. 166 | 167 | **12.** Add appropriate title and description to your pull request explaining your changes and efforts done. 168 | 169 | **13.** Click on `Create Pull Request`. 170 | 171 | **14** You did it! 🥳 Wait for your submission to be accepted and your PR to be merged. 172 | 173 |
174 | 175 | 176 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | News Website 8 | 9 | 10 | 11 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 100 | 101 |
102 |

103 | Top News by Hardik Desai 104 |

105 | 106 |
107 | 108 |
109 | 110 | 111 |
112 |
113 | Copyright ©2022   Hardik Desai 114 |
115 |
116 | 117 | 118 | 119 | 122 | 125 | 126 | 127 | 128 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap'); 3 | 4 | /* Default (Light) Mode */ 5 | :root { 6 | --background-color: #ffffff; /* Light background color */ 7 | --text-color: #333333; /* Dark text color */ 8 | --card-background: rgba(128, 128, 128, 0.204); /* Card background color */ 9 | } 10 | 11 | /* Dark Mode */ 12 | body.dark-mode { 13 | --background-color: #333333; /* Dark background color */ 14 | --text-color: #ffffff; /* Light text color */ 15 | --card-background: rgba(0, 0, 0, 0.24); /* Dark card background color */ 16 | } 17 | body { 18 | background-color: var(--background-color); 19 | color: var(--text-color); 20 | } 21 | .head { 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | flex-direction: column; 26 | padding: 12px; 27 | margin: 12px auto; 28 | } 29 | /* Dark Mode for Category List */ 30 | body.dark-mode .dropdown-menu { 31 | background-color: #242424; /* Dark background */ 32 | 33 | } 34 | body.dark-mode .dropdown-item{ 35 | color: #ffffff; /* White text */ 36 | } 37 | body.dark-mode .dropdown-item:hover{ 38 | color: #333333; /* text visibility on hover */ 39 | } 40 | 41 | 42 | 43 | .card-body{ 44 | padding: 1rem; 45 | 46 | } 47 | 48 | .card-title{ 49 | color: rgb(248, 65, 14); 50 | letter-spacing: 1px; 51 | font-size: 20px; 52 | font-weight: bold; 53 | font-family: 'Poppins', sans-serif; 54 | text-overflow: ellipsis; 55 | display: -webkit-box; 56 | -webkit-line-clamp: 2; 57 | -webkit-box-orient: vertical; 58 | max-height: 80px; /* 4 lines at 20px per line */ 59 | white-space: normal; 60 | overflow: hidden; 61 | 62 | 63 | 64 | } 65 | .card-text{ 66 | max-height: 100px; /* 4 lines at 20px per line */ 67 | overflow: hidden; 68 | text-overflow: ellipsis; 69 | letter-spacing: 1px; 70 | font-family: 'Poppins', sans-serif; 71 | white-space: normal; 72 | font-size: 13px; 73 | display: -webkit-box; 74 | -webkit-line-clamp: 4; 75 | -webkit-box-orient: vertical; 76 | } 77 | 78 | 79 | .card-author{ 80 | font-weight: bold; 81 | font-family: 'Poppins', sans-serif; 82 | letter-spacing: 1px; 83 | padding-top: 12px; 84 | font-size: 12px; 85 | } 86 | .card-date{ 87 | font-family: 'Poppins', sans-serif; 88 | letter-spacing: 1px; 89 | font-size: 10px; 90 | } 91 | 92 | #newsBox { 93 | display: flex; 94 | justify-content: center; 95 | align-items: center; 96 | gap: 2rem; 97 | flex-wrap: wrap; 98 | 99 | } 100 | 101 | .newsCard { 102 | display: flex; 103 | flex-direction: column; 104 | /* background-color: var(--card-background); */ 105 | height: 450px; 106 | width: 360px; 107 | border-radius: 9px; 108 | overflow: hidden; 109 | box-sizing: border-box; 110 | background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); 111 | backdrop-filter: blur(10px); 112 | -webkit-backdrop-filter: blur(10px); 113 | border-radius: 20px; 114 | border:1px solid rgba(255, 255, 255, 0.18); 115 | box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); 116 | transition: all 0.5s; 117 | } 118 | .newsCard:hover{ 119 | transform: scale(1.01); 120 | } 121 | .thumnail{ 122 | width: 100%; 123 | height: 100%; 124 | } 125 | 126 | .imageWrapper{ 127 | width: 100%; 128 | height: 180px; 129 | object-fit: cover; 130 | } 131 | .imageWrapper>img{ 132 | width: 100%; 133 | height: 100%; 134 | object-fit: cover; 135 | max-width: 100%; 136 | max-height: 100%; 137 | display: block; 138 | } 139 | 140 | #img { 141 | height: 406px; 142 | width: 721px; 143 | } 144 | 145 | .line { 146 | width: 30vw; 147 | border: 1px solid black; 148 | margin: 7px; 149 | background-color: black; 150 | height: 4px; 151 | border-radius: 24px; 152 | } 153 | 154 | footer { 155 | position: fixed; 156 | left: 0; 157 | bottom: 0; 158 | width: 100%; 159 | } 160 | 161 | .mySpin { 162 | margin: 50px auto; 163 | display: block; 164 | height: 10vh; 165 | ; 166 | width: 10vh; 167 | ; 168 | visibility: visible; 169 | } 170 | 171 | .card-header{ 172 | border: none; 173 | } 174 | 175 | /* Media Quries */ 176 | 177 | @media only screen and (min-width:844px) and (max-width:1142px){ 178 | 179 | .newsCard { 180 | display: flex; 181 | flex-direction: column; 182 | background-color: rgba(128, 128, 128, 0.204); 183 | height: 380px; 184 | width: 250px; 185 | border-radius: 9px; 186 | overflow: hidden; 187 | box-sizing: border-box; 188 | } 189 | .card-title{ 190 | color: rgb(248, 65, 14); 191 | letter-spacing: 1px; 192 | font-size: 14px; 193 | font-weight: bold; 194 | font-family: 'Poppins', sans-serif; 195 | text-overflow: ellipsis; 196 | display: -webkit-box; 197 | -webkit-line-clamp: 2; 198 | -webkit-box-orient: vertical; 199 | max-height: 80px; /* 4 lines at 20px per line */ 200 | white-space: normal; 201 | overflow: hidden; 202 | 203 | 204 | } 205 | .card-author{ 206 | font-weight: bold; 207 | font-family: 'Poppins', sans-serif; 208 | letter-spacing: 1px; 209 | padding-top: 12px; 210 | font-size: 8px; 211 | } 212 | .card-text{ 213 | max-height: 100px; /* 4 lines at 20px per line */ 214 | overflow: hidden; 215 | text-overflow: ellipsis; 216 | letter-spacing: 1px; 217 | font-family: 'Poppins', sans-serif; 218 | white-space: normal; 219 | font-size: 11px; 220 | display: -webkit-box; 221 | -webkit-line-clamp: 4; 222 | -webkit-box-orient: vertical; 223 | } 224 | .imageWrapper{ 225 | width: 100%; 226 | height: 150px; 227 | object-fit: cover; 228 | } 229 | .card-body{ 230 | padding: 0.5rem; 231 | } 232 | 233 | } 234 | label { 235 | width:50px; 236 | height:25px; 237 | position: relative; 238 | display: block; 239 | background: #fffdf3; 240 | border-radius: 50px; 241 | box-shadow: inset 0px 5px 15px rgba(0,0,0,0.4), inset 0px -5px 15px rgba(255,255,255,0.4); 242 | cursor: pointer; 243 | } 244 | label:after { 245 | content: ""; 246 | width:23px; 247 | height: 23px; 248 | position: absolute; 249 | top:1px; 250 | left:1px; 251 | background: linear-gradient(180deg,#ffcc89,#d8860b); 252 | border-radius: 50px; 253 | box-shadow: 0px 5px 10px rgba(0,0,0,0.2); 254 | } 255 | input { 256 | width: 0; 257 | height: 0; 258 | visibility: hidden; 259 | } 260 | input:checked + label { 261 | background: #242424; 262 | } 263 | input:checked + label:after { 264 | left: 49px; 265 | transform: translateX(-100%); 266 | background: linear-gradient(180deg, #777, #3a3a3a); 267 | } 268 | label, label:after { 269 | transition: 0.3s 270 | } 271 | label:active:after{ 272 | width: 30px; 273 | } 274 | label svg { 275 | position: absolute; 276 | width: 20px; 277 | top: 4.5px; 278 | left:2px; 279 | z-index: 100; 280 | } 281 | label svg.sun { 282 | opacity: 1; 283 | transition: 0.3s; 284 | } 285 | label svg.moon { 286 | opacity: 0.5; 287 | left:28px; 288 | transition: 0.3s; 289 | } 290 | input:checked + label svg.sun { 291 | opacity: 0.2; 292 | } 293 | input:checked + label svg.moon { 294 | opacity: 1; 295 | } 296 | .form-switch{ 297 | padding-left: 0; 298 | } 299 | .form-check{ 300 | padding-left: 0; 301 | } 302 | @media only screen and (min-width:492px) and (max-width:842px){ 303 | 304 | 305 | .newsCard { 306 | display: flex; 307 | flex-direction: column; 308 | background-color: rgba(128, 128, 128, 0.204); 309 | height: 360px; 310 | width: 230px; 311 | border-radius: 9px; 312 | overflow: hidden; 313 | box-sizing: border-box; 314 | } 315 | .imageWrapper{ 316 | width: 100%; 317 | height: 130px; 318 | object-fit: cover; 319 | } 320 | .card-title{ 321 | color: rgb(248, 65, 14); 322 | letter-spacing: 1px; 323 | font-size: 13px; 324 | font-weight: bold; 325 | font-family: 'Poppins', sans-serif; 326 | text-overflow: ellipsis; 327 | display: -webkit-box; 328 | -webkit-line-clamp: 2; 329 | -webkit-box-orient: vertical; 330 | max-height: 80px; /* 4 lines at 20px per line */ 331 | white-space: normal; 332 | overflow: hidden; 333 | 334 | 335 | } 336 | .card-text{ 337 | max-height: 100px; /* 4 lines at 20px per line */ 338 | overflow: hidden; 339 | text-overflow: ellipsis; 340 | letter-spacing: 1px; 341 | font-family: 'Poppins', sans-serif; 342 | white-space: normal; 343 | font-size: 10px; 344 | display: -webkit-box; 345 | -webkit-line-clamp: 4; 346 | -webkit-box-orient: vertical; 347 | } 348 | .card-author{ 349 | font-weight: bold; 350 | font-family: 'Poppins', sans-serif; 351 | letter-spacing: 1px; 352 | padding-top: 12px; 353 | font-size: 8px; 354 | } 355 | } 356 | @media (prefers-color-scheme: dark) { 357 | body { 358 | background-color: var(--background-color); 359 | color: var(--text-color); 360 | } 361 | /* Add dark mode specific styles here */ 362 | } 363 | @media only screen and (min-width:400px) and (max-width:490px){ 364 | 365 | 366 | .newsCard { 367 | display: flex; 368 | flex-direction: column; 369 | background-color: rgba(128, 128, 128, 0.204); 370 | height: 360px; 371 | width: 80%; 372 | border-radius: 9px; 373 | overflow: hidden; 374 | box-sizing: border-box; 375 | } 376 | .imageWrapper{ 377 | width: 100%; 378 | height: 130px; 379 | object-fit: cover; 380 | } 381 | .card-title{ 382 | color: rgb(248, 65, 14); 383 | letter-spacing: 1px; 384 | font-size: 13px; 385 | font-weight: bold; 386 | font-family: 'Poppins', sans-serif; 387 | text-overflow: ellipsis; 388 | display: -webkit-box; 389 | -webkit-line-clamp: 2; 390 | -webkit-box-orient: vertical; 391 | max-height: 80px; /* 4 lines at 20px per line */ 392 | white-space: normal; 393 | overflow: hidden; 394 | 395 | 396 | } 397 | .card-text{ 398 | max-height: 100px; /* 4 lines at 20px per line */ 399 | overflow: hidden; 400 | text-overflow: ellipsis; 401 | letter-spacing: 1px; 402 | font-family: 'Poppins', sans-serif; 403 | white-space: normal; 404 | font-size: 10px; 405 | display: -webkit-box; 406 | -webkit-line-clamp: 4; 407 | -webkit-box-orient: vertical; 408 | } 409 | .card-author{ 410 | font-weight: bold; 411 | font-family: 'Poppins', sans-serif; 412 | letter-spacing: 1px; 413 | padding-top: 12px; 414 | font-size: 8px; 415 | } 416 | } 417 | --------------------------------------------------------------------------------