-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
127 lines (123 loc) · 6.09 KB
/
index.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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Portfolio</title>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script>
// smooth scrolling function
function scrollToSection(sectionId) {
const section = document.getElementById(sectionId);
section.scrollIntoView({behavior: 'smooth'});
}
</script>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#timeline">Timeline</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="photos.html">Pixel Arts</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pretium, enim ut faucibus imperdiet,
turpis urna sagittis sapien, a lacinia elit libero a elit. Quisque tempor interdum nisi eget facilisis.
Nullam in nulla id lacus cursus varius vitae non velit. In semper massa ut tincidunt bibendum.
Vestibulum ac nisi vel nulla dignissim egestas quis at ipsum.</p>
<p>Nulla facilisi. Maecenas fringilla elementum lacinia. Aliquam venenatis, risus eget blandit tincidunt,
velit dolor accumsan tortor, sit amet interdum dui tellus a tellus. Fusce maximus libero vel dui
accumsan, id hendrerit metus malesuada. Etiam eget magna faucibus, feugiat massa at, vestibulum ex.
Nullam convallis, velit a lacinia tincidunt, nibh quam blandit augue, vel facilisis massa sapien ac
urna. Sed vehicula erat ac mauris vestibulum, quis ullamcorper libero faucibus. Nulla facilisi. Nam
auctor, odio at mollis pharetra, justo velit ultrices nisi, vitae laoreet nibh eros vel nibh.</p>
</section>
<section id="timeline">
<h2>Timeline</h2>
<ul>
<li class="timeline-item">
<div class="timeline-icon"></div>
<div class="timeline-content">
<h3>Education</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pretium, enim ut faucibus
imperdiet, turpis urna sagittis sapien, a lacinia elit libero a elit. Quisque tempor
interdum nisi eget facilisis. Nullam in nulla id lacus cursus varius vitae non velit. In
semper massa ut tincidunt bibendum.</p>
</div>
</li>
<li class="timeline-item">
<div class="timeline-icon"></div>
<div class="timeline-content">
<h3>Experience</h3>
<p>Nulla facilisi. Maecenas fringilla elementum lacinia. Aliquam venenatis, risus eget blandit
tincidunt, velit dolor accumsan tortor, sit amet interdum dui tellus a tellus. Fusce maximus
libero vel dui accumsan, id hendrerit metus malesuada. Etiam eget magna faucibus, feugiat
massa at, vestibulum ex. Nullam convallis, velit a lacin ia tincidunt, nibh quam blandit
augue, vel facilisis massa sapien ac urna. Sed vehicula erat ac mauris vestibulum, quis
ullamcorper libero faucibus. Nulla facilisi. Nam auctor, odio at mollis pharetra, justo
velit ultrices nisi, vitae laoreet nibh eros vel nibh.</p>
</div>
</li>
<li class="timeline-item">
<div class="timeline-icon"></div>
<div class="timeline-content">
<h3>Skills</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Python</li>
</ul>
</div>
</li>
</ul>
</section>
<section id="projects">
<h2>Projects</h2>
<ul class="project-list">
<li>
<h3>Project 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pretium, enim ut faucibus
imperdiet, turpis urna sagittis sapien, a lacinia elit libero a elit.</p>
<a href="#">View project</a>
</li>
<li>
<h3>Project 2</h3>
<p>Nulla facilisi. Maecenas fringilla elementum lacinia. Aliquam venenatis, risus eget blandit
tincidunt, velit dolor accumsan tortor, sit amet interdum dui tellus a tellus.</p>
<a href="#">View project</a>
</li>
<li>
<h3>Project 3</h3>
<p>Fusce maximus libero vel dui accumsan, id hendrerit metus malesuada. Etiam eget magna faucibus,
feugiat massa at, vestibulum ex. Nullam convallis, velit a lacinia tincidunt, nibh quam blandit
augue, vel facilisis massa sapien ac urna.</p>
<a href="#">View project</a>
</li>
</ul>
</section>
<section id="contact">
<h2>Contact</h2>
<form>
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<input type="submit" value="Send">
</form>
</section>
</main>
<footer>
<p>© 2023 by Your Name</p>
</footer>
</body>
</html>