portfolio/index.html at main · abdulkarimPortfolio/portfolio · 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Abdul Karim Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
    <h2 class="logo">Abdul Karim</h2>

    <ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
    </ul>
</nav>
    <section class="hero"id="home">

    <div class="hero-text">

        <h1>Hello, I'm Abdul Karim </h1>

        <h3>Frontend Web Developer</h3>

        <p>
            I am learning HTML and CSS and building modern websites.
        </p>

        <a href="#" class="btn">
            Hire Me
        </a>

    </div>

    <div class="hero-image">

        <img src="Quality Pic.jpeg">

    </div>

</section>
<section class="about" id="about">

    <div class="about-image">
        <img src="Quality Pic.jpeg" alt="About Image">
    </div>

    <div class="about-text">

        <h2>About Me</h2>

        <p>
            My name is Abdul Karim . I am learning frontend web development.
            I enjoy creating modern and responsive websites using HTML and CSS.
        </p>

        <p>
            My goal is to become a professional web developer and work on international projects.
        </p>

    </div>

</section>
<section class="skills" id="skills">

    <h2>My Skills</h2>

    <div class="skills-container">

        <div class="skill-card">
            <h3>HTML</h3>
            <p>Structure of websites</p>
        </div>

        <div class="skill-card">
            <h3>CSS</h3>
            <p>Styling and layouts</p>
        </div>

        <div class="skill-card">
            <h3>Responsive Design</h3>
            <p>Mobile friendly websites</p>
        </div>

    </div>

</section>
<section class="projects" id="projects">

    <h2>My Projects</h2>

    <div class="projects-container">

        <div class="project-card">

            <img src="Quality Pic.jpeg" alt="Project Image">

            <h3>Portfolio Website</h3>

            <p>
                A modern personal portfolio website using HTML and CSS.
            </p>

            <a href="#">View Project</a>

        </div>

        <div class="project-card">

            <img src="Quality Pic.jpeg" alt="Project Image">

            <h3>Landing Page</h3>

            <p>
                Responsive landing page design for businesses.
            </p>

            <a href="#">View Project</a>

        </div>

        <div class="project-card">

            <img src="Quality Pic.jpeg" alt="Project Image">

            <h3>Blog Website</h3>

            <p>
                Clean blog website structure using HTML and CSS.
            </p>

            <a href="#">View Project</a>

        </div>

    </div>

</section>
<section class="contact" id="contact">

    <h2>Contact Me</h2>

    <p>Email: abdulkarim.cs939@gmail.com</p>

    <p>Phone: +92 03308730820</p>

    <a href="#">Send Message</a>

</section>
<footer>

    <p>
        © 2026 Abdul Karim | All Rights Reserved
    </p>

</footer>
</body>
</html>