-
Notifications
You must be signed in to change notification settings - Fork 30
/
Copy pathBasic_Portfolio.html
49 lines (49 loc) · 3 KB
/
Basic_Portfolio.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio 2 </title>
</head>
<body style="background-color: #f4f4f4; font-family: Arial, Helvetica, sans-serif; line-height: 1.6;">
<center>
<header style="background-color: #333; color:#fff; padding: 20px; margin-bottom: 20px;">
<h1 style="font-size: 36px;">John Doe</h1>
<p style="font-size: 18px;">Welcome to my portfolio website!</p>
</header>
</center>
<img style="margin:auto; display: block; border-radius: 50%; border: 5px solid#ddd; width:200px; height: 200px;" src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" height="200px" width="200px" />
<section style="background-color: #fff; width: 80%;margin:auto; padding: 20px; border:1px solid #ddd">
<h2 style="font-size:28px; margin-top:0px;">About Me</h2>
<p>Hi! I'm John, a web developer with a passion for creating beautiful and functional websites. I have a strong interest in front-end technologies and love solving design challenges.</p>
</section>
<section style="background-color: #e0f7fa; width:80%; margin: auto; padding: 20px;" >
<h2>My Projects</h2>
<div >
<div style="background-color: #fff; width: 45%; padding: 20px; border: 1px solid#ddd; margin: auto; margin-top: 10px;">
<h3>Project 1</h3>
<p>This project is a website that I built using HTML and CSS. It demonstrates responsive design principles and accessibility.</p>
</div>
<div style="background-color: #fff; width: 45%; padding: 20px; border: 1px solid#ddd; margin: auto; margin-top: 10px;">
<h3>Project 2</h3>
<p>This project is an e-commerce website where users can browse products and place orders online.</p>
</div>
<div style="background-color: #fff; width: 45%; padding: 20px; border: 1px solid#ddd; margin: auto; margin-top: 10px;">
<h3>Project 3</h3>
<p>A simple blog platform where users can post articles, leave comments, and interact with each other.</p>
</div>
<div style="background-color: #fff; width: 45%; padding: 20px; border: 1px solid#ddd; margin: auto; margin-top: 10px;">
<h3>Project 4</h3>
<p>This project is a portfolio website for a photographer, featuring a gallery and portfolio sections.</p>
</div>
</div>
</section>
<section style="background-color: #fce4ec; width: 80%; margin: auto; padding: 20px; text-align: center;" >
<h2 style="font-size: 28px; margin-top: 0;">Contact Me</h2>
<p>If you'd like to work with me, feel free to reach out via email at [email protected].</p>
</section>
<footer>
<p>© 2024 John Doe. All Rights Reserved.</p>
</footer>
</body>
</html>