Skip to content

Commit 1accb8e

Browse files
sourcecode369sourcecode369
authored
Create index.html
0 parents  commit 1accb8e

File tree

1 file changed

+169
-0
lines changed

1 file changed

+169
-0
lines changed

‎index.html‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Jane Doe - Web Developer</title>
7+
<style>
8+
/* Basic CSS Reset */
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
}
14+
15+
body {
16+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
17+
line-height: 1.6;
18+
color: #333;
19+
max-width: 1200px;
20+
margin: 0 auto;
21+
padding: 20px;
22+
}
23+
24+
header {
25+
text-align: center;
26+
padding: 40px 0;
27+
background-color: #f8f9fa;
28+
margin-bottom: 30px;
29+
border-radius: 5px;
30+
}
31+
32+
h1 {
33+
color: #2c3e50;
34+
margin-bottom: 10px;
35+
}
36+
37+
h2 {
38+
color: #3498db;
39+
margin: 25px 0 15px 0;
40+
border-bottom: 2px solid #ecf0f1;
41+
padding-bottom: 10px;
42+
}
43+
44+
.profile-img {
45+
width: 150px;
46+
height: 150px;
47+
border-radius: 50%;
48+
object-fit: cover;
49+
margin-bottom: 20px;
50+
border: 5px solid white;
51+
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
52+
}
53+
54+
section {
55+
margin-bottom: 40px;
56+
}
57+
58+
.projects {
59+
display: grid;
60+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
61+
gap: 20px;
62+
}
63+
64+
.project-card {
65+
border: 1px solid #e0e0e0;
66+
border-radius: 5px;
67+
padding: 20px;
68+
transition: transform 0.3s ease;
69+
}
70+
71+
.project-card:hover {
72+
transform: translateY(-5px);
73+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
74+
}
75+
76+
footer {
77+
text-align: center;
78+
padding: 20px;
79+
background-color: #f8f9fa;
80+
margin-top: 30px;
81+
border-radius: 5px;
82+
}
83+
84+
.social-links {
85+
display: flex;
86+
justify-content: center;
87+
gap: 15px;
88+
margin-top: 20px;
89+
}
90+
91+
.social-links a {
92+
color: #3498db;
93+
text-decoration: none;
94+
font-size: 18px;
95+
}
96+
97+
.social-links a:hover {
98+
color: #2980b9;
99+
}
100+
</style>
101+
</head>
102+
<body>
103+
<header>
104+
<img src="https://via.placeholder.com/150" alt="Profile Picture" class="profile-img">
105+
<h1>Jane Doe</h1>
106+
<p>Web Developer & UI/UX Designer</p>
107+
</header>
108+
109+
<section id="about">
110+
<h2>About Me</h2>
111+
<p>Hello! I'm Jane, a passionate web developer with 5 years of experience creating responsive and user-friendly websites. I specialize in front-end development with a focus on accessibility and performance optimization.</p>
112+
<p>When I'm not coding, you can find me hiking, reading sci-fi novels, or experimenting with new recipes in the kitchen.</p>
113+
</section>
114+
115+
<section id="skills">
116+
<h2>Skills</h2>
117+
<ul>
118+
<li>HTML5, CSS3, JavaScript (ES6+)</li>
119+
<li>React.js, Vue.js</li>
120+
<li>Node.js, Express</li>
121+
<li>Responsive Web Design</li>
122+
<li>UI/UX Design Principles</li>
123+
<li>Git & GitHub</li>
124+
</ul>
125+
</section>
126+
127+
<section id="portfolio">
128+
<h2>Projects</h2>
129+
<div class="projects">
130+
<div class="project-card">
131+
<h3>E-commerce Website</h3>
132+
<p>A fully responsive e-commerce platform with product filtering, cart functionality, and secure checkout.</p>
133+
<p><strong>Technologies:</strong> React.js, Node.js, MongoDB</p>
134+
<a href="#">View Project</a>
135+
</div>
136+
137+
<div class="project-card">
138+
<h3>Weather Dashboard</h3>
139+
<p>Real-time weather application that displays current conditions and 5-day forecast for any location.</p>
140+
<p><strong>Technologies:</strong> JavaScript, OpenWeather API, CSS Grid</p>
141+
<a href="#">View Project</a>
142+
</div>
143+
144+
<div class="project-card">
145+
<h3>Task Management App</h3>
146+
<p>Productivity application for organizing tasks with drag-and-drop functionality and priority setting.</p>
147+
<p><strong>Technologies:</strong> Vue.js, Firebase, Vuetify</p>
148+
<a href="#">View Project</a>
149+
</div>
150+
</div>
151+
</section>
152+
153+
<section id="contact">
154+
<h2>Contact</h2>
155+
<p>I'm always open to new opportunities and collaborations. Feel free to reach out!</p>
156+
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
157+
158+
<div class="social-links">
159+
<a href="https://github.com/janedoe" target="_blank">GitHub</a>
160+
<a href="https://linkedin.com/in/janedoe" target="_blank">LinkedIn</a>
161+
<a href="https://twitter.com/janedoe" target="_blank">Twitter</a>
162+
</div>
163+
</section>
164+
165+
<footer>
166+
<p>&copy; 2025 Jane Doe. All rights reserved.</p>
167+
</footer>
168+
</body>
169+
</html>

0 commit comments

Comments
 (0)