home-page/info.html at main · princelebs/home-page · 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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Prince Tech — Portfolio</title>
  <link rel="stylesheet" href="info.css">

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">


</head>
<body>
  <!-- Header -->
  <header class="site-header">
    <div class="container nav">
      <a class="brand" href="#"><span class="logo">PT</span> Prince Tech</a>
      <nav class="menu">
        <a href="#work">Work</a>
        <a href="#about">About</a>
        <a href="#skills">Skills</a>
        <a href="#contact" class="btn btn-primary">Contact</a>
      </nav>
    </div>
  </header>

  <!-- Hero -->
  <section class="hero">
    <div class="container hero-grid">
      <div class="hero-text">
        <p class="eyebrow">Developer • Designer • Creator</p>
        <h1>Hi, I’m <span>Prince</span> — I build clean, fast, modern websites.</h1>
        <p class="sub">Creator of <strong>PRINCE TECH</strong>. I love turning ideas into smooth UI/UX with solid performance.</p>
        <div class="hero-actions">
          <a href="#work" class="btn btn-primary">View Projects</a>
          <a href="#contact" class="btn btn-ghost">Hire Me</a>
        </div>
        <div class="socials">
          <a href="https://github.com/princelebs" target="_blank">GH</a>
          <a href="https://instagram.com/prince__chovatiyaa" target="_blank">IG</a>
          <a href="https://youtube.com/@PRNBEATZ" target="_blank">YT</a>
        </div>
      </div>
      <div class="hero-media">
        <img src="Logo.png" alt="Prince working on a laptop" />
      </div>
    </div>
  </section>


  <section id="work" class="section">
    <div class="container">
      <div class="section-head">
        <h2>Selected Work</h2>
        <p>Handpicked projects focused on performance, accessibility, and clean design.</p>
      </div>

      <div class="grid cards">
        <article class="card">
          <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=1200&auto=format&fit=crop" alt="Project screenshot" />
          <div class="card-body">
            <h3>PRINCE TECH</h3>
            <p>A Tech Enthusiast and a self learner </p>
            <div class="tags">
              <span>HTML</span><span>CSS</span><span>Responsive</span>
            </div>
          </div>
        </article>

        <article class="card">
          <img src="https://images.unsplash.com/photo-1521737711867-e3b97375f902?q=80&w=1200&auto=format&fit=crop" alt="Project screenshot" />
          <div class="card-body">
            <h3>Portfolio (This Site)</h3>
            <p>Minimal, photo-centric portfolio with elegant hover states and dark accents.</p>
            <div class="tags">
              <span>UI/UX</span><span>SEO</span><span>No JS</span>
            </div>
          </div>
        </article>

        <article class="card">
          <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=1200&auto=format&fit=crop" alt="Project screenshot" />
          <div class="card-body">
            <h3>Client Shop Page</h3>
            <p>Black & white product gallery with subtle depth and quick-view overlay.</p>
            <div class="tags">
              <span>Grid</span><span>Hover</span><span>Accessibility</span>
            </div>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- About -->
  <section id="about" class="section alt">
    <div class="container about-grid">
      <div>
        <h2>About Me</h2>
        <p> I’m prince, a front-end dev who enjoys simple aesthetics, fast loads, and crisp typography. I’ve built websites for creators and small brands.</p>
        <p>a self-learner who believes in creating with purpose, my portfolio is a reflection of my journey- mixing creativity with logic. <strong>PRINCE TECH</strong>.</p>
      </div>
      <ul class="facts">
        <li><strong>Location:</strong> India</li>
        <li><strong>Available for:</strong> Freelance & collabs</li>
        <li><strong>Turnaround:</strong> Fast & reliable</li>
      </ul>
    </div>
  </section>

  <!-- Skills -->
  <section id="skills" class="section">
    <div class="container">
      <div class="section-head">
        <h2>Skills</h2>
        <p>Tools and tech I use regularly.</p>
      </div>
      <div class="chips">
        <span>HTML5</span><span>CSS3</span><span>Responsive Design</span><span>Grid/Flexbox</span>
        <span>Lightroom</span><span>Canva</span><span>Figma</span><span>GitHub Pages</span>
      </div>
    </div>
  </section>

  <!-- Contact -->
  <section id="contact" class="section alt">
    <div class="container contact">
      <div>
        <h2>Let’s work together</h2>
        <p>Have an idea? Tell me about your project and timeline.</p>
        <a href="mailto: princepatle0720@gmail.com" class="btn btn-primary">Email Me</a>
      </div>
      <div class="contact-card">
        <h3>Quick Links</h3>
        <a href="https://github.com/princelebs" target="_blank">GitHub</a>
        <a href="https://instagram.com/prince__chovatiya" target="_blank">Instagram</a>
        <a href="https://youtube.com/@PRNBEATZ" target="_blank">YouTube</a>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="site-footer">
    <div class="container">
      <p>© 2025 Prince Tech • Built with HTML & CSS</p>
    </div>
  </footer>
</body>
</html>