├── README.md
├── LICENSE
├── .github
    └── workflows
    │   └── static.yml
├── script.js
├── style.css
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | # my-first-website
2 | Test your hacking skills 
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 Jahid Hasan
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/.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: ["main"]
 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 | 


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | // Modal login logic
 2 | const loginBtn = document.getElementById('login-btn');
 3 | const loginModal = document.getElementById('login-modal');
 4 | const closeBtn = document.querySelector('.close-btn');
 5 | const loginForm = document.getElementById('login-form');
 6 | const bookingForm = document.getElementById('booking-form');
 7 | 
 8 | loginBtn.addEventListener('click', () => {
 9 |     loginModal.style.display = 'flex';
10 | });
11 | 
12 | closeBtn.addEventListener('click', () => {
13 |     loginModal.style.display = 'none';
14 | });
15 | 
16 | loginForm.addEventListener('submit', (e) => {
17 |     e.preventDefault();
18 |     const username = document.getElementById('username').value;
19 |     const password = document.getElementById('password').value;
20 | 
21 |     if (username === 'jahidads' && password === 'jahidhasan2.0ff') {
22 |         alert('Login successful');
23 |         loginModal.style.display = 'none';
24 |         localStorage.setItem('loggedIn', 'true');
25 |         loginBtn.textContent = 'Logout';
26 |         loginBtn.removeEventListener('click', logout);
27 |         loginBtn.addEventListener('click', logout);
28 |     } else {
29 |         alert('Incorrect username or password');
30 |     }
31 | });
32 | 
33 | function logout() {
34 |     localStorage.removeItem('loggedIn');
35 |     loginBtn.textContent = 'Login';
36 |     loginBtn.removeEventListener('click', logout);
37 |     loginBtn.addEventListener('click', () => {
38 |         loginModal.style.display = 'flex';
39 |     });
40 | }
41 | 
42 | // Booking form submission
43 | bookingForm.addEventListener('submit', (e) => {
44 |     e.preventDefault();
45 |     alert('Your consultation has been booked!');
46 | });
47 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | /* General Styles */
  2 | body {
  3 |     font-family: Arial, sans-serif;
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     background-color: #121212;
  7 |     color: white;
  8 | }
  9 | 
 10 | /* Header */
 11 | header {
 12 |     background-color: #222;
 13 |     padding: 20px;
 14 | }
 15 | 
 16 | header nav {
 17 |     display: flex;
 18 |     justify-content: space-between;
 19 |     align-items: center;
 20 | }
 21 | 
 22 | header nav .logo a {
 23 |     color: #00c1b7;
 24 |     font-size: 1.5em;
 25 |     text-decoration: none;
 26 | }
 27 | 
 28 | header nav ul {
 29 |     list-style: none;
 30 |     display: flex;
 31 |     gap: 15px;
 32 | }
 33 | 
 34 | header nav ul li a {
 35 |     color: white;
 36 |     text-decoration: none;
 37 |     padding: 5px 10px;
 38 | }
 39 | 
 40 | header nav ul li a:hover {
 41 |     background-color: #00c1b7;
 42 |     border-radius: 5px;
 43 | }
 44 | 
 45 | /* Hero Section */
 46 | .hero {
 47 |     background-image: url('hero-image.jpg');
 48 |     background-size: cover;
 49 |     height: 400px;
 50 |     display: flex;
 51 |     justify-content: center;
 52 |     align-items: center;
 53 |     text-align: center;
 54 | }
 55 | 
 56 | .hero-content h1 {
 57 |     font-size: 3em;
 58 |     color: white;
 59 | }
 60 | 
 61 | .hero-content p {
 62 |     font-size: 1.2em;
 63 |     color: white;
 64 | }
 65 | 
 66 | button {
 67 |     background-color: #00c1b7;
 68 |     border: none;
 69 |     padding: 10px 20px;
 70 |     font-size: 1em;
 71 |     color: white;
 72 |     cursor: pointer;
 73 | }
 74 | 
 75 | button:hover {
 76 |     background-color: #008b89;
 77 | }
 78 | 
 79 | /* About Section */
 80 | .about, .tools, .testimonials, .booking {
 81 |     padding: 50px 20px;
 82 |     text-align: center;
 83 | }
 84 | 
 85 | .about h2, .tools h2, .testimonials h2, .booking h2 {
 86 |     font-size: 2em;
 87 |     color: #00c1b7;
 88 | }
 89 | 
 90 | /* Modal for Login */
 91 | .modal {
 92 |     display: none;
 93 |     position: fixed;
 94 |     top: 0;
 95 |     left: 0;
 96 |     width: 100%;
 97 |     height: 100%;
 98 |     background-color: rgba(0, 0, 0, 0.8);
 99 |     justify-content: center;
100 |     align-items: center;
101 | }
102 | 
103 | .modal-content {
104 |     background-color: #333;
105 |     padding: 30px;
106 |     border-radius: 10px;
107 |     width: 300px;
108 |     text-align: center;
109 | }
110 | 
111 | .close-btn {
112 |     color: white;
113 |     font-size: 1.5em;
114 |     cursor: pointer;
115 |     position: absolute;
116 |     top: 10px;
117 |     right: 10px;
118 | }
119 | 
120 | /* Footer */
121 | footer {
122 |     background-color: #222;
123 |     padding: 10px;
124 |     text-align: center;
125 | }
126 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 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>Cyber Security & Ethical Hacking</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <nav>
12 |             <div class="logo">
13 |                 <a href="#">CyberSecPro</a>
14 |             </div>
15 |             <ul>
16 |                 <li><a href="#">Home</a></li>
17 |                 <li><a href="#">About Us</a></li>
18 |                 <li><a href="#">Tools & Services</a></li>
19 |                 <li><a href="#">Customer Testimonials</a></li>
20 |                 <li><a href="#">Booking</a></li>
21 |                 <li><a href="#" id="login-btn">Login</a></li>
22 |             </ul>
23 |         </nav>
24 |     </header>
25 | 
26 |     <section class="hero">
27 |         <div class="hero-content">
28 |             <h1>Unlock the Power of Cyber Security</h1>
29 |             <p>Master Ethical Hacking with our expert tools and services</p>
30 |             <button onclick="window.location.href='https://www.youtube.com/c/jahidads'">Visit My YouTube Channel</button>
31 |         </div>
32 |     </section>
33 | 
34 |     <section class="about">
35 |         <h2>About Us</h2>
36 |         <p>We are a community of cyber security professionals offering the best in ethical hacking knowledge, tools, and services to students and professionals looking to boost their skills.</p>
37 |     </section>
38 | 
39 |     <section class="tools">
40 |         <h2>Our Tools & Services</h2>
41 |         <ul>
42 |             <li>Penetration Testing Tools</li>
43 |             <li>Vulnerability Assessment</li>
44 |             <li>Security Audits</li>
45 |             <li>Live Hacking Tutorials</li>
46 |             <li>Consultation Services</li>
47 |         </ul>
48 |     </section>
49 | 
50 |     <section class="testimonials">
51 |         <h2>Customer Testimonials</h2>
52 |         <div class="testimonial">
53 |             <p>"The tools and training provided by CyberSecPro are top-notch! They made learning ethical hacking so much easier." - Alex, Cybersecurity Student</p>
54 |         </div>
55 |         <div class="testimonial">
56 |             <p>"Excellent consultation services. I secured a job thanks to the hands-on skills I learned here." - Sam, Cybersecurity Professional</p>
57 |         </div>
58 |     </section>
59 | 
60 |     <section class="booking">
61 |         <h2>Book a Consultation</h2>
62 |         <form id="booking-form">
63 |             <label for="name">Full Name:</label>
64 |             <input type="text" id="name" name="name" required>
65 | 
66 |             <label for="email">Email Address:</label>
67 |             <input type="email" id="email" name="email" required>
68 | 
69 |             <label for="date">Preferred Date:</label>
70 |             <input type="date" id="date" name="date" required>
71 | 
72 |             <button type="submit">Book Now</button>
73 |         </form>
74 |     </section>
75 | 
76 |     <div id="login-modal" class="modal">
77 |         <div class="modal-content">
78 |             <span class="close-btn">&times;</span>
79 |             <h2>Login</h2>
80 |             <form id="login-form">
81 |                 <label for="username">Username:</label>
82 |                 <input type="text" id="username" name="username" required>
83 | 
84 |                 <label for="password">Password:</label>
85 |                 <input type="password" id="password" name="password" required>
86 | 
87 |                 <button type="submit">Login</button>
88 |             </form>
89 |         </div>
90 |     </div>
91 | 
92 |     <footer>
93 |         <p>&copy; 2025 jahidads | All Rights Reserved</p>
94 |     </footer>
95 | 
96 |     <script src="script.js"></script>
97 | </body>
98 | </html>
99 | 


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