Commit 14da5e1
authored
Create utilizing HTML
# Personal Profile Page for Muhamad Sazwan bin Ismail
I'll create a clean, professional HTML page that showcases your name and username with a modern design.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Muhamad Sazwan bin Ismail | sazwanismail</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: #333;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
max-width: 1000px;
width: 100%;
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
header {
background: linear-gradient(to right, #2575fc, #6a11cb);
color: white;
padding: 40px;
text-align: center;
}
.profile-img {
width: 150px;
height: 150px;
border-radius: 50%;
border: 5px solid rgba(255, 255, 255, 0.3);
margin: 0 auto 20px;
background: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.profile-img i {
font-size: 70px;
color: #6a11cb;
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.username {
font-size: 1.5rem;
opacity: 0.9;
margin-bottom: 20px;
}
.content {
padding: 40px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.card {
background: #f9f9f9;
border-radius: 15px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
h2 {
color: #2575fc;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #eee;
}
.details p {
margin-bottom: 15px;
display: flex;
align-items: center;
}
.details i {
margin-right: 10px;
color: #6a11cb;
width: 24px;
text-align: center;
}
.skills {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.skill {
background: #eef4ff;
padding: 8px 15px;
border-radius: 20px;
font-size: 0.9rem;
}
.projects {
grid-column: span 2;
}
.project-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.project {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}
.project:hover {
transform: translateY(-5px);
}
.project-img {
height: 160px;
background: #eef4ff;
display: flex;
justify-content: center;
align-items: center;
}
.project-img i {
font-size: 40px;
color: #6a11cb;
}
.project-info {
padding: 15px;
}
footer {
background: #f5f5f5;
text-align: center;
padding: 20px;
color: #777;
}
@media (max-width: 768px) {
.content {
grid-template-columns: 1fr;
}
.projects {
grid-column: span 1;
}
h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="profile-img">
<i class="fas fa-user"></i>
</div>
<h1>Muhamad Sazwan bin Ismail</h1>
<div class="username">@Sazwanismail</div>
</header>
<div class="content">
<div class="card about">
<h2>About Me</h2>
<p>Hello! I'm Muhamad Sazwan bin Ismail, a passionate professional dedicated to creating innovative solutions and delivering exceptional results. I enjoy taking on challenges and continuously expanding my skillset.</p>
<p>With a strong foundation in technology and design, I strive to create meaningful experiences that make a difference.</p>
</div>
<div class="card details">
<h2>Details</h2>
<p><i class="fas fa-user"></i> <strong>Name:</strong> Muhamad Sazwan bin Ismail</p>
<p><i class="fas fa-at"></i> <strong>Username:</strong> sazwanismail</p>
<p><i class="fas fa-map-marker-alt"></i> <strong>Location:</strong> Malaysia</p>
<p><i class="fas fa-envelope"></i> <strong>Email:</strong> [email protected]</p>
</div>
<div class="card skills-card">
<h2>Skills</h2>
<div class="skills">
<span class="skill">HTML</span>
<span class="skill">CSS</span>
<span class="skill">JavaScript</span>
<span class="skill">UI/UX Design</span>
<span class="skill">Web Development</span>
<span class="skill">Problem Solving</span>
<span class="skill">Project Management</span>
</div>
</div>
<div class="card projects">
<h2>Projects</h2>
<div class="project-list">
<div class="project">
<div class="project-img">
<i class="fas fa-laptop-code"></i>
</div>
<div class="project-info">
<h3>Portfolio Website</h3>
<p>A responsive personal portfolio website showcasing my work and skills.</p>
</div>
</div>
<div class="project">
<div class="project-img">
<i class="fas fa-mobile-alt"></i>
</div>
<div class="project-info">
<h3>Mobile App UI</h3>
<p>User interface design for a fitness tracking mobile application.</p>
</div>
</div>
<div class="project">
<div class="project-img">
<i class="fas fa-shopping-cart"></i>
</div>
<div class="project-info">
<h3>E-commerce Platform</h3>
<p>Full-stack development of an online store with payment integration.</p>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>© 2023 Muhamad Sazwan bin Ismail. All rights reserved.</p>
</footer>
</div>
</body>
</html>
```
This HTML page includes:
1. A clean, modern design with a gradient header
2. A profile section with your full name and username prominently displayed
3. An "About Me" section with placeholder text that you can customize
4. A details section with your information
5. A skills section showing various technical abilities
6. A projects section with sample project cards
7. Responsive design that works on both desktop and mobile devices
8. Professional color scheme with purple/blue gradients
You can open this HTML file directly in any web browser to see your personal profile page. You can also customize the content, colors, and sections to better match your personal preferences and actual skills.1 parent 1b11a88 commit 14da5e1
1 file changed
+591
-0
lines changed
0 commit comments