-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
122 lines (117 loc) · 5.24 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="style.css">
<link rel="stylesheet" media="(min-width: 250px) and (max-width: 500px)" href="./screens/250sc.css">
<link rel="stylesheet" media="(min-width: 501px) and (max-width: 700px)" href="./screens/501sc.css">
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 1000px)" href="./screens/701sc.css">
<link rel="stylesheet" media="(min-width: 1001px) and (max-width: 1500px)" href="./screens/1001sc.css">
<title>Portfolio</title>
</head>
<body>
<div class="container">
<div class="logo">
<p>Raspberry</p>
</div>
<div class="box">
<div class="menu">
<div id="option1" class="option" onclick="toggleSection('projects')">projects</div>
<div id="option2" class="option" onclick="toggleSection('work')">work</div>
<div id="option3" class="option" onclick="toggleSection('about')">about</div>
<div id="option4" class="option" onclick="toggleSection('social')">social</div>
<div id="option5" class="option" onclick="toggleSection('others')">others</div>
</div>
<div class="content">
<div id="landing" class="landing">
<pre>Remember to choose options,
you always have more.
Choose one from above ❤.</pre>
</div>
<div id="projects" class="preview">
<div class="box">
<a href="#">ProjectA</a>
<a href="#">ProjectB</a>
<a href="#">ProjectC</a>
<a href="#">ProjectD</a>
</div>
</div>
<div id="work" class="preview">
<div class="doneBefore">
<div id="header" class="column">
<p>title</p>
<p>period</p>
<p>visit</p>
</div>
<div class="column">
<p>red</p>
<p>2024</p>
<p>see</p>
</div>
<div class="column">
<p>blue</p>
<p>2023</p>
<p>visit</p>
</div>
<div class="column">
<p>green</p>
<p>2022</p>
<p>ist</p>
</div>
<div class="column">
<p>yellow</p>
<p>2021</p>
<p>aside</p>
</div>
</div>
</div>
<div id="about" class="preview">
<div class="box">
<div class="hook">
<div class="card">
<div class="photo">
<img src="https://artprojectsforkids.org/wp-content/uploads/2020/07/Big-Eyes-Post-768x1006.jpg" alt="photo">
</div>
<div class="info">
<h1>Name<br>Sur</h1>
<p>about Lorem ipsum dolor, sit amet consectetur desapa adipisicing elit. Laboriosam eligendi fila Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</div>
<div class="line">
<div class="left">0</div>
<div class="right">0</div>
</div>
<div class="edu">
education
</div>
</div>
</div>
<div id="social" class="preview">
<div class="box">
<div class="linkedin case" onclick="window.open('https://www.linkedin.com', '_blank')">
<img src="images/linkedin.png" alt="logo">
<p>LinkedIn</p>
</div>
<div class="github case" onclick="window.open('https://www.github.com', '_blank')">
<img src="images/github.png" alt="logo">
<p>GitHub</p>
</div>
<div class="twitter case" onclick="window.open('https://www.x.com', '_blank')">
<img src="images/twitter.png" alt="logo">
<p>Twitter</p>
</div>
</div>
</div>
<div id="others" class="preview">
<div class="box">
<p>Place for Other content.</p>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>