<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zeeshan Haider - Portfolio</title>
<style>
/* General Styles */
body {
margin: 0;
font-family: 'Arial', sans-serif;
background-color: #f0f2f5;
color: #333;
}
/* Hero Section */
.hero {
background-color: #3e8e41;
color: white;
padding: 100px 20px;
text-align: center;
animation: fadeIn 3s ease-in-out;
}
.hero h1 {
font-size: 60px;
margin-bottom: 20px;
animation: slideIn 2s ease-in-out;
}
.hero p {
font-size: 24px;
animation: slideIn 3s ease-in-out;
}
/* About Section */
.about {
padding: 80px 20px;
background-color: #fff;
text-align: center;
animation: fadeInUp 2s ease-out;
}
.about h2 {
font-size: 36px;
margin-bottom: 20px;
color: #3e8e41;
}
.about p {
font-size: 20px;
line-height: 1.6;
color: #555;
max-width: 900px;
margin: 0 auto;
}
/* Services Section */
.services {
padding: 80px 20px;
background-color: #f7f7f7;
text-align: center;
animation: fadeInUp 3s ease-out;
}
.services h2 {
font-size: 40px;
color: #333;
margin-bottom: 40px;
text-transform: uppercase;
}
.services-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.service-card {
background-color: #ff6f61;
color: white;
padding: 40px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease-in-out;
position: relative;
height: 350px;
border: 2px solid #fff;
}
.service-card:hover {
transform: scale(1.1);
background-color: #333;
color: #fff;
border: 2px solid #ff6f61;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.service-card:hover h3 {
color: #ff6f61;
}
.service-card h3 {
font-size: 24px;
margin-bottom: 20px;
}
.service-card p {
font-size: 18px;
margin-bottom: 30px;
}
.service-buttons {
position: absolute;
bottom: 20px;
left: 20px;
display: flex;
gap: 15px;
}
.learn-more,
.purchase {
background-color: #fff;
color: #333;
padding: 12px 25px;
border-radius: 5px;
border: 2px solid #333;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s, color 0.3s;
}
.learn-more:hover,
.purchase:hover {
background-color: #333;
color: #fff;
}
/* Hobbies Section */
.hobbies {
padding: 80px 20px;
background-color: #ffeb3b;
text-align: center;
animation: fadeInUp 4s ease-out;
}
.hobbies h2 {
font-size: 40px;
color: #333;
margin-bottom: 40px;
}
.hobby-icons {
display: flex;
justify-content: center;
gap: 40px;
font-size: 40px;
}
.hobby {
text-align: center;
}
.hobby p {
margin-top: 10px;
font-size: 18px;
color: #333;
}
/* Awards Section */
.awards {
padding: 80px 20px;
background-color: #4caf50;
color: white;
text-align: center;
animation: fadeInUp 5s ease-out;
}
.award-list {
display: flex;
justify-content: center;
gap: 40px;
}
.award {
text-align: center;
}
.award p {
margin-top: 10px;
font-size: 18px;
}
/* Contact Section */
.contact {
padding: 100px 20px;
background-color: #3e8e41;
color: white;
text-align: center;
animation: fadeInUp 6s ease-out;
}
.contact h2 {
font-size: 40px;
margin-bottom: 30px;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 15px;
max-width: 600px;
margin: 0 auto;
}
.contact-form input,
.contact-form textarea {
padding: 15px;
border: none;
border-radius: 5px;
font-size: 16px;
}
.contact-form button {
padding: 15px;
background-color: #ff6f61;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.contact-form button:hover {
background-color: #333;
color: #fff;
}
/* Keyframes for Animations */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes slideIn {
0% {
transform: translateX(-50px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/babel.min.js"></script>
<script type="text/babel">
const { useState } = React;
function App() {
const [showDetails, setShowDetails] = useState(false);
const [activeService, setActiveService] = useState(null);
const services = [
{ name: 'Web Development', description: 'Building modern, responsive websites.', color: '#ff6f61' },
{ name: 'SEO Optimization', description: 'Improving your website’s ranking through SEO strategies.', color: '#4caf50' },
{ name: 'Content Writing', description: 'High-quality content to engage your audience and boost SEO.', color: '#2196f3' },
{ name: 'Keyword Research', description: 'In-depth keyword research to target your audience effectively.', color: '#ffeb3b' },
{ name: 'WordPress Development', description: 'Developing dynamic WordPress websites with custom features.', color: '#f44336' },
{ name: 'Full-Stack Development', description: 'Complete front-end and back-end development for your project.', color: '#673ab7' },
{ name: 'Consultation', description: 'Consultation services to help you succeed in your online business.', color: '#009688' },
];
const handleCardHover = (index) => {
setActiveService(index);
};
return (
<div className="App">
{/* Hero Section */}
<section className="hero">
<h1>Welcome to Zeeshan Haider's Portfolio</h1>
<p>From Gilgit Baltistan, a passionate web developer, SEO expert, and content creator.</p>
</section>
{/* About Me Section */}
<section className="about">
<h2>About Me</h2>
<p>
I’m Zeeshan Haider from Gilgit Baltistan, known for my beauty. I did my matriculation in my village and then got a scholarship to study in Lahore, where I completed my intermediate studies.
<br />
I love playing football, cricket, and snooker. I am also keen to participate in debates and speech competitions.
</p>
</section>
{/* Services Section */}
<section className="services">
<h2>Services I Offer</h2>
<div className="services-cards">
{services.map((service, index) => (
<div
key={index}
className="service-card"
style={{ backgroundColor: service.color }}
onMouseEnter={() => handleCardHover(index)}
onMouseLeave={() => setActiveService(null)}
>
<h3>{service.name}</h3>
<p>{service.description}</p>
{activeService === index && (
<div className="service-buttons">
<button className="learn-more">Learn More</button>
<button className="purchase">Purchase</button>
</div>
)}
</div>
))}
</div>
</section>
{/* Hobbies Section */}
<section className="hobbies">
<h2>My Hobbies</h2>
<div className="hobby-icons">
<div className="hobby">
<span role="img" aria-label="Football">⚽</span>
<p>Football</p>
</div>
<div className="hobby">
<span role="img" aria-label="Cricket">🏏</span>
<p>Cricket</p>
</div>
<div className="hobby">
<span role="img" aria-label="Snooker">🎱</span>
<p>Snooker</p>
</div>
</div>
</section>
{/* Awards & Honors Section */}
<section className="awards">
<h2>Awards & Honors</h2>
<div className="award-list">
<div className="award">
<span role="img" aria-label="Award">🏆</span>
<p>Best Web Developer Award</p>
</div>
<div className="award">
<span role="img" aria-label="Award">🏆</span>
<p>SEO Expert of the Year</p>
</div>
</div>
</section>
{/* Contact Section */}
<section className="contact">
<h2>Contact Me</h2>
<form className="contact-form">
<input type="text" placeholder="Your Name" />
<input type="email" placeholder="Your Email" />
<textarea placeholder="Your Message"></textarea>
<button type="submit">Send Message</button>
</form>
</section>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
Leave a Reply