ProDeveloper/index.html at main · MohamadHussham/ProDeveloper · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>ProDeveloper</title>
  <meta name="description" content="Front-end developer — HTML, CSS, JavaScript. Portfolio of projects." />
  <link rel="icon" href="assets/T.png" />
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>


  <header class="site-header">
    <div class="container">
      <img class="logo" src="assets/favicon.png" alt="ProDeveloper Logo">
      <nav class="nav">
        <a href="#projects">Projects</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
      </nav>
    </div>
  </header>


  <main>
    <section class="hero">
      <div class="container">
        <h1>Hi — I build clean, fast websites.</h1>
        <p>HTML · CSS · JavaScript — Freelance-ready projects for small businesses.</p>
        <a class="btn" href="#projects">See my work</a>
      </div>
    </section>


    <section id="projects" class="projects container">
      <h2>Selected Projects</h2>
      <div class="grid">
        <!-- Project card example -->
        <article class="card">
          <a href="https://capitalfitnesssaida.netlify.app" >
            <img src="assets/project1.png" alt="Project 1 screenshot">
          <div class="card-body">
            <h3>Business Landing Page</h3>
            <p>Responsive landing page for a local Gym — HTML/CSS, responsive, Contact us Buttons</p>
            </a>
          </div>
        </article>


        <article class="card">
          <a href="https://malek-mo3ajanat.vercel.app/">
          <img src="assets/project2.png" alt="Project 2 screenshot">
          <div class="card-body">
            <h3>Interactive App</h3>
            <p>JS-heavy app: Restaurant Online Menu-Interactive.</p>
            </a>
          </div>
        </article>


        <article class="card">
          <a href="https://landingpageprodeveloper.netlify.app/">
          <img src="assets/project3.png" alt="Project 3 screenshot">
          <div class="card-body">
            <h3>Business Template Kit</h3>
            <p>Landing + services + contact templates for fast delivery to clients.</p>
            </a>
          </div>
        </article>

      </div>
    </section>

    <section id="about" class="container about">
      <h2>About Me</h2>
      <p>I’m an intermediate front-end developer focused on clean UI and performance. I build fast landing pages, small business sites, and interactive widgets.</p>
      <ul class="skills">
        <li>HTML & CSS (Flexbox, Grid)</li>
        <li>JavaScript (DOM, Fetch, localStorage)</li>
        <li>Responsive & Accessible UI</li>
      </ul>
    </section>

    <section id="contact" class="container contact">
      <h2>Email Us</h2>
      <form id="contactForm">
        <label for="name">Name</label>
        <input id="name" name="name" required>
        <label for="email">Email</label>
        <input id="email" name="email" type="email" required>
        <label for="message">Message</label>
        <textarea id="message" name="message" rows="4" required></textarea>
        <button type="submit" class="btn">Send message</button>
        <p id="formStatus" aria-live="polite"></p>
      </form>
    </section>

    <!-- CONTACT -->
<section id="contact" class="section  reveal dark">
  <h2>Contacts Us</h2>
  <div class="contact-buttons">
    <!-- WhatsApp Button -->
    <a href="https://wa.me/96181959464" class="social-btn whatsapp" target="_blank" aria-label="Chat with us on WhatsApp">
        <i class="fab fa-whatsapp"></i> WhatsApp
    </a>

    <!-- Instagram Button -->
    <a href="https://www.instagram.com/prodeveloper.web?igsh=MWRwbGhmNDBmYzE0OQ%3D%3D&utm_source=qr" class="social-btn instagram" target="_blank" aria-label="Follow us on Instagram">
        <i class="fab fa-instagram"></i> Instagram
    </a>

    <!-- Email Button -->
    <a href="mailto:[email protected]" class="social-btn email" aria-label="Send us an email">
        <i class="fas fa-envelope"></i> Email
    </a>


</div>
</section>
  </main>

  <footer class="site-footer">
    <div class="container">© 2026 Mohamad Hamdan</div>
  </footer>

  <script src="script.js"></script>
</body>
</html>