├── .github
    └── workflows
    │   └── static.yml
├── README.md
├── Screenshot 2025-03-22 215842.png
├── assets
    ├── function.js
    └── style.css
└── index.html


/.github/workflows/static.yml:
--------------------------------------------------------------------------------
 1 | # Simple workflow for deploying static content to GitHub Pages
 2 | name: Deploy static content to Pages
 3 | 
 4 | on:
 5 |   # Runs on pushes targeting the default branch
 6 |   push:
 7 |     branches: ["master"]
 8 | 
 9 |   # Allows you to run this workflow manually from the Actions tab
10 |   workflow_dispatch:
11 | 
12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13 | permissions:
14 |   contents: read
15 |   pages: write
16 |   id-token: write
17 | 
18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
20 | concurrency:
21 |   group: "pages"
22 |   cancel-in-progress: false
23 | 
24 | jobs:
25 |   # Single deploy job since we're just deploying
26 |   deploy:
27 |     environment:
28 |       name: github-pages
29 |       url: ${{ steps.deployment.outputs.page_url }}
30 |     runs-on: ubuntu-latest
31 |     steps:
32 |       - name: Checkout
33 |         uses: actions/checkout@v4
34 |       - name: Setup Pages
35 |         uses: actions/configure-pages@v5
36 |       - name: Upload artifact
37 |         uses: actions/upload-pages-artifact@v3
38 |         with:
39 |           # Upload entire repository
40 |           path: '.'
41 |       - name: Deploy to GitHub Pages
42 |         id: deployment
43 |         uses: actions/deploy-pages@v4
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | visit online project:
2 | https://taj2003.github.io/HTML-CSS-JS/ 
3 |  
4 | <img src="Screenshot 2025-03-22 215842.png" alt="image"> 
5 | 


--------------------------------------------------------------------------------
/Screenshot 2025-03-22 215842.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MohseenTajik/HTML-CSS-JS/0f577b101a15121327fdb4dbc05950c9b0f9bf1f/Screenshot 2025-03-22 215842.png


--------------------------------------------------------------------------------
/assets/function.js:
--------------------------------------------------------------------------------
 1 | // script.js
 2 | document.addEventListener("DOMContentLoaded", function () {
 3 |     const buttons = document.querySelectorAll(".btn");
 4 |     const lists = document.querySelectorAll(".list");
 5 | 
 6 |     buttons.forEach(button => {
 7 |         button.addEventListener("click", function () {
 8 |             alert("More information is coming!");
 9 |         });
10 |     });
11 |     lists.forEach(list => {
12 |         list.addEventListener("click", function () {
13 |             alert("More information is coming!");
14 |         });
15 |     });
16 | });


--------------------------------------------------------------------------------
/assets/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     font-family: Arial, sans-serif;
  3 |     margin: 0;
  4 |     padding: 0;
  5 |     box-sizing: border-box;
  6 |     background-color: #f4f4f4;
  7 | }
  8 | /* Header */
  9 | header {
 10 |     background-color: #333;
 11 |     color: white;
 12 |     padding: 15px 20px;
 13 |     display: flex;
 14 |     justify-content: space-between;
 15 |     align-items: center;
 16 | }
 17 | 
 18 | header .logo {
 19 |     font-size: 24px;
 20 |     font-weight: bold;
 21 | }
 22 | 
 23 | header nav ul {
 24 |     list-style: none;
 25 |     margin: 0;
 26 |     padding: 0;
 27 |     display: flex;
 28 | }
 29 | 
 30 | header nav ul li {
 31 |     margin-left: 20px;
 32 | }
 33 | 
 34 | header nav ul li a {
 35 |     color: white;
 36 |     text-decoration: none;
 37 |     font-size: 18px;
 38 |     transition: color 0.3s;
 39 | }
 40 | 
 41 | header nav ul li a:hover {
 42 |     color: #ff9800;
 43 | }
 44 | 
 45 | /* Card Section */
 46 | .cards-container {
 47 |     display: flex;
 48 |     justify-content: center;
 49 |     flex-wrap: wrap;
 50 |     gap: 20px;
 51 |     padding: 40px 10px;
 52 | }
 53 | 
 54 | .card {
 55 |     background-color: white;
 56 |     border-radius: 10px;
 57 |     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 58 |     padding: 20px;
 59 |     width: 300px;
 60 |     text-align: center;
 61 |     transition: transform 0.3s, box-shadow 0.3s;
 62 | }
 63 | 
 64 | .card:hover {
 65 |     transform: translateY(-10px);
 66 |     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
 67 | }
 68 | 
 69 | .card h2 {
 70 |     font-size: 22px;
 71 |     margin-bottom: 10px;
 72 | }
 73 | 
 74 | .card p {
 75 |     font-size: 16px;
 76 |     margin-bottom: 20px;
 77 | }
 78 | 
 79 | .card .btn {
 80 |     padding: 10px 15px;
 81 |     background-color: #333;
 82 |     color: white;
 83 |     border: none;
 84 |     border-radius: 5px;
 85 |     cursor: pointer;
 86 |     font-size: 16px;
 87 |     transition: background-color 0.3s;
 88 | }
 89 | 
 90 | .card .btn:hover {
 91 |     background-color: #ff9800;
 92 | }
 93 | 
 94 | footer {
 95 |     background-color: #333;
 96 |     color: white;
 97 |     text-align: center;
 98 |     padding: 15px;
 99 |     margin-top: 20px;
100 | }
101 | 
102 | @media (max-width: 768px) {
103 |     header {
104 |         flex-direction: column;
105 |         text-align: center;
106 |     }
107 | 
108 |     header nav ul {
109 |         padding-top: 10px;
110 |         flex-direction: column;
111 |     }
112 | 
113 |     header nav ul li {
114 |         margin: 5px 0;
115 |     }
116 | 
117 |     .cards-container {
118 |         flex-direction: column;
119 |         align-items: center;
120 |     }
121 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <html lang="fa">
  2 | 
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>mini project</title>
  7 |     <link rel="stylesheet" href="assets/style.css">
  8 | </head>
  9 | 
 10 | <body>
 11 | 
 12 |     <!-- Header -->
 13 |     <header>
 14 |         <div class="logo">» Logo</div>
 15 |         <nav>
 16 |             <ul>
 17 |                 <li class="list"><a href="#">Home</a></li>
 18 |                 <li class="list"><a href="#">About us</a></li>
 19 |                 <li class="list"><a href="#">Services</a></li>
 20 |                 <li class="list"><a href="#">Contact us</a></li>
 21 |             </ul>
 22 |         </nav>
 23 |     </header>
 24 | 
 25 |     <!-- Card Section -->
 26 |     <section class="cards-container">
 27 | 
 28 |         <div class="card">
 29 |             <h2>card 1</h2>
 30 |             <p>1 card description</p>
 31 |             <button class="btn">more ...</button>
 32 |         </div>
 33 | 
 34 |         <div class="card">
 35 |             <h2>card 2</h2>
 36 |             <p>2 card description</p>
 37 |             <button class="btn">more ...</button>
 38 |         </div>
 39 | 
 40 |         <div class="card">
 41 |             <h2>card 3</h2>
 42 |             <p>3 card description</p>
 43 |             <button class="btn">more ...</button>
 44 |         </div>
 45 | 
 46 |         <div class="card">
 47 |             <h2>card 4</h2>
 48 |             <p>4 card description</p>
 49 |             <button class="btn">more ...</button>
 50 |         </div>
 51 | 
 52 |         <div class="card">
 53 |             <h2>card 5</h2>
 54 |             <p>5 card description</p>
 55 |             <button class="btn">more ...</button>
 56 |         </div>
 57 | 
 58 | 
 59 |         <div class="card">
 60 |             <h2>card 6</h2>
 61 |             <p>6 card description</p>
 62 |             <button class="btn">more ...</button>
 63 |         </div>
 64 | 
 65 | 
 66 | 
 67 |         <div class="card">
 68 |             <h2>card 7</h2>
 69 |             <p>7 card description</p>
 70 |             <button class="btn">more ...</button>
 71 |         </div>
 72 | 
 73 | 
 74 |         <div class="card">
 75 |             <h2>card 8</h2>
 76 |             <p>8 card description</p>
 77 |             <button class="btn">more ...</button>
 78 |         </div>
 79 | 
 80 |         <div class="card">
 81 |             <h2>card 9</h2>
 82 |             <p>9 card description</p>
 83 |             <button class="btn">more ...</button>
 84 |         </div>
 85 | 
 86 | 
 87 |         <div class="card">
 88 |             <h2>card 10</h2>
 89 |             <p>10 card description</p>
 90 |             <button class="btn">more ...</button>
 91 |         </div>
 92 | 
 93 |         <div class="card">
 94 |             <h2>card 11</h2>
 95 |             <p>11 card description</p>
 96 |             <button class="btn">more ...</button>
 97 |         </div>
 98 | 
 99 |         <div class="card">
100 |             <h2>card 12</h2>
101 |             <p>12 card description</p>
102 |             <button class="btn">more ...</button>
103 |         </div>
104 | 
105 |         <div class="card">
106 |             <h2>card 13</h2>
107 |             <p>13 card description</p>
108 |             <button class="btn">more ...</button>
109 |         </div>
110 | 
111 |         <div class="card">
112 |             <h2>card 14</h2>
113 |             <p>14 card description</p>
114 |             <button class="btn">more ...</button>
115 |         </div>
116 | 
117 | 
118 |         <div class="card">
119 |             <h2>card 15</h2>
120 |             <p>15 card description</p>
121 |             <button class="btn">more ...</button>
122 |         </div>
123 | 
124 |         <div class="card">
125 |             <h2>card 16</h2>
126 |             <p>16 card description</p>
127 |             <button class="btn">more ...</button>
128 |         </div>
129 | 
130 | 
131 |         <div class="card">
132 |             <h2>card 17</h2>
133 |             <p>17 card description</p>
134 |             <button class="btn">more ...</button>
135 |         </div>
136 | 
137 | 
138 |         <div class="card">
139 |             <h2>card 18</h2>
140 |             <p>18 card description</p>
141 |             <button class="btn">more ...</button>
142 |         </div>
143 | 
144 | 
145 |         <div class="card">
146 |             <h2>card 19</h2>
147 |             <p>19 card description</p>
148 |             <button class="btn">more ...</button>
149 |         </div>
150 | 
151 | 
152 |         <div class="card">
153 |             <h2>card 20</h2>
154 |             <p>20 card description</p>
155 |             <button class="btn">more ...</button>
156 |         </div>
157 | 
158 | 
159 |     </section>
160 | 
161 |     <!-- Footer -->
162 |     <footer>
163 |         <p>All rights reserved &copy; 2025</p>
164 |     </footer>
165 |     <script src="assets/function.js"></script>
166 | </body>
167 | 
168 | </html>


--------------------------------------------------------------------------------