-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
196 lines (196 loc) · 16.1 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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="with=device-width, initial-scale=1.0">
<title>portfolio ni intoy</title>
<link rel="stylesheet" href="stylesheets/home-intoy.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/6278413ef7.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="logo">
<img class="pro" src="images/profile.jpg">
<h1><span style="white-space: nowrap; color: white;">Jay Dee</span> <span>Suarez</span></h1>
</div>
<div class="navlinks" id="navlinks">
<ul>
<i class="fa-solid fa-xmark" onclick="hideMenu()"></i>
<li><a href="#home">HOME</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#educ">EDUCATION</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
<i class="fa-solid fa-bars" onclick="showMenu()"></i>
</header>
<main>
<section id="home">
<div class="grid">
<div class="intro">
<div class="content">
<h1>Hi, I'm <span>Jay Dee</span></h1>
<p>I am a BSIT student studying at Professional Academy of the Philippines. This portfolio shows my personal information and academic background. Know more about me.</p>
<button>I Love You Too</button>
</div>
</div>
<div><img src="images/gal1.jpg"></div>
<div><img src="images/gal2.jpg"></div>
<div class="multigal">
<div class="row1">
<div><img src="images/gal3.jpg"></div>
<div><img src="images/gal4.jpg"></div>
</div>
<div><img src="images/gal5.jpg"></div>
</div>
</div>
</section>
<section id="about">
<img class="title" src="images/about-me.png">
<div class="abtdes">
<div><img src="images/abtpic.jpg"></div>
<div>
<p style="margin-bottom: 30px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Luctus accumsan tortor posuere ac ut. Blandit libero volutpat sed cras ornare arcu dui. Cursus turpis massa tincidunt dui ut. Augue neque gravida in fermentum. Nisi vitae suscipit tellus mauris a diam maecenas sed. Volutpat commodo sed egestas egestas fringilla phasellus faucibus. Senectus et netus et malesuada fames. Vel turpis nunc eget lorem dolor. Aliquet risus feugiat in ante metus dictum at tempor commodo. Scelerisque purus semper eget duis. Tristique senectus et netus et malesuada. Nulla porttitor massa id neque aliquam vestibulum morbi blandit cursus. Vel facilisis volutpat est velit egestas dui id.</p>
<p>At risus viverra adipiscing at in tellus integer. Faucibus turpis in eu mi bibendum neque egestas congue quisque. Nullam ac tortor vitae purus faucibus ornare suspendisse. Ipsum nunc aliquet bibendum enim facilisis. Et magnis dis parturient montes nascetur ridiculus mus mauris. Integer enim neque volutpat ac tincidunt vitae. Tristique nulla aliquet enim tortor at auctor urna nunc. Mi tempus imperdiet nulla malesuada pellentesque elit eget gravida. Vitae congue mauris rhoncus aenean vel elit scelerisque. Quis blandit turpis cursus in hac habitasse platea dictumst. Tortor pretium viverra suspendisse potenti nullam ac tortor. Sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae. Nunc faucibus a pellentesque sit. In metus vulputate eu scelerisque felis imperdiet proin. Cursus vitae congue mauris rhoncus aenean vel</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id porta nibh venenatis cras sed felis. Pulvinar etiam non quam lacus suspendisse faucibus. Morbi tristique senectus et netus et malesuada fames ac turpis. Facilisis leo vel fringilla est ullamcorper eget nulla facilisi etiam. Cursus mattis molestie a iaculis at erat. Tellus mauris a diam maecenas sed enim ut sem viverra. Erat imperdiet sed euismod nisi porta lorem. Faucibus pulvinar elementum integer enim. Aliquam vestibulum morbi blandit cursus risus at ultrices mi tempus. Quam quisque id diam vel quam elementum pulvinar etiam. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc.</p>
<div class="int">
<div>
<h1>THINGS I LOVE</h1>
<div class="love">
<div><img src="images/love1.png"></div>
<div><img src="images/love2.png"></div>
<div><img src="images/love3.png"></div>
<div><img src="images/love4.png"></div>
<div><img src="images/love5.png"></div>
<div><img src="images/love6.png"></div>
<div><img src="images/love7.png"></div>
<div><img src="images/love8.png"></div>
<div><img src="images/love9.png"></div>
<div><img src="images/love10.png"></div>
<div><img src="images/love11.png"></div>
<div><img src="images/love12.png"></div>
</div>
</div>
<div>
<h1>LOOK WHAT I CAN DO</h1>
<div class="do">
<p>✅HTML</p>
<p>✅CSS</p>
<p>✅Photoshop</p>
<p>✅Programming</p>
<p>✅PC Assembly</p>
<p>✅Ethernet Wiring</p>
<p>✅File Sharing (Server)</p>
<p>✅Remote Desktop (Server)</p>
<p>✅Folder Redirection (Server)</p>
</div>
</div>
</div>
</section>
<section id="educ">
<img class="title" src="images/educ.jpg">
<div class="schl">
<div class="con">
<div class="schlnm">
<img src="images/school1.png">
<h1><span>ABC</span> Learning Center</h1>
</div>
<p>Adipiscing elit ut aliquam purus sit amet. Enim neque volutpat ac tincidunt vitae semper. Nec feugiat in fermentum posuere urna nec tincidunt. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit. Platea dictumst quisque sagittis purus sit amet volutpat consequat. Purus sit amet volutpat consequat mauris nunc. Feugiat pretium nibh ipsum consequat nisl vel pretium. Vitae semper quis lectus nulla at volutpat diam. Fames ac turpis egestas maecenas pharetra. Accumsan lacus vel facilisis volutpat est velit. Sodales neque sodales ut etiam. Senectus et netus et malesuada fames ac turpis. Massa sed elementum tempus egestas sed sed. Feugiat nisl pretium fusce id velit ut tortor pretium viverra.</p>
</div>
<div class="con">
<div class="schlnm">
<img src="images/school2.jpg">
<h1><span>Exceed</span> Learning Center</h1>
</div>
<p>Mi eget mauris pharetra et ultrices neque ornare aenean. Euismod elementum nisi quis eleifend quam adipiscing vitae proin. Ac auctor augue mauris augue. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Morbi quis commodo odio aenean sed. Consequat mauris nunc congue nisi vitae suscipit tellus mauris a. Platea dictumst vestibulum rhoncus est pellentesque elit. Amet consectetur adipiscing elit pellentesque. Risus nec feugiat in fermentum posuere urna nec.</p>
</div>
<div class="con">
<div class="schlnm">
<img src="images/school3.png">
<h1><span>Bethel</span> Christian Living Heritage School</h1>
</div>
<p>Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras. At varius vel pharetra vel. Sagittis eu volutpat odio facilisis mauris sit amet. Euismod nisi porta lorem mollis aliquam ut porttitor leo a. Nibh praesent tristique magna sit amet. Suspendisse faucibus interdum posuere lorem. Sit amet nulla facilisi morbi. Scelerisque felis imperdiet proin fermentum leo. Interdum consectetur libero id faucibus nisl. Cras tincidunt lobortis feugiat vivamus.</p>
</div>
<div class="con">
<div class="schlnm">
<img src="images/school4.jpg">
<h1><span>Naga</span> National High School</h1>
</div>
<p>Amet tellus cras adipiscing enim eu turpis egestas. At auctor urna nunc id cursus metus. Risus commodo viverra maecenas accumsan lacus vel. Id neque aliquam vestibulum morbi blandit cursus risus at ultrices. At consectetur lorem donec massa sapien faucibus et. Id aliquet risus feugiat in ante metus dictum at tempor. Massa tempor nec feugiat nisl pretium fusce id velit ut. Aenean et tortor at risus. Tincidunt nunc pulvinar sapien et ligula ullamcorper. Tristique senectus et netus et malesuada fames ac. Non sodales neque sodales ut etiam. Tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="con">
<div class="schlnm">
<img src="images/school5.jpg">
<h1><span>Professional Academy</span> of the Philippines</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id consectetur purus ut faucibus pulvinar elementum integer. Dui ut ornare lectus sit amet. Tempor orci dapibus ultrices in iaculis nunc sed augue lacus. Cras fermentum odio eu feugiat pretium nibh. In vitae turpis massa sed. Velit euismod in pellentesque massa placerat duis ultricies lacus. Eget nulla facilisi etiam dignissim diam quis enim. Elementum nisi quis eleifend quam adipiscing vitae. Aliquet eget sit amet tellus cras. Cras adipiscing enim eu turpis egestas pretium aenean pharetra magna. Eget egestas purus viverra accumsan in nisl nisi scelerisque eu. Nulla porttitor massa id neque aliquam vestibulum morbi blandit cursus.</p>
</div>
<div class="acach">
<h1>My <span>Academic</span> Achievements</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus mattis rhoncus urna neque viverra justo nec. Condimentum lacinia quis vel eros donec ac. Adipiscing at in tellus integer feugiat scelerisque varius morbi. Diam phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet. Vitae tempus quam pellentesque nec nam aliquam. Viverra suspendisse potenti nullam ac tortor vitae purus. Lobortis elementum nibh tellus molestie nunc. Varius morbi enim nunc faucibus a pellentesque sit amet porttitor. Vitae tortor condimentum lacinia quis vel eros donec ac. Ac auctor augue mauris augue neque gravida. Mattis pellentesque id nibh tortor id aliquet lectus proin nibh. In mollis nunc sed id semper risus. Nibh mauris cursus mattis molestie. Lectus mauris ultrices eros in cursus. Montes nascetur ridiculus mus mauris vitae ultricies leo. Semper eget duis at tellus. Fames ac turpis egestas integer. Id porta nibh venenatis cras sed felis.</p>
</div>
</div>
</section>
<section id="contact">
<img class="title" src="images/contact.jpg">
<div class="congrid">
<div class="col1">
<h1>LET'S <span>TALK</span></h1>
<p>Aliquet bibendum enim facilisis gravida neque convallis a cras semper. Sagittis id consectetur purus ut. Sed elementum tempus egestas sed sed risus pretium quam. Consequat interdum varius sit amet mattis vulputate. Sed viverra tellus in hac.</p>
<button>Social Media</button>
<ul>
<li><a href="#" class="fa fa-facebook"></a><a class="scname" href="#">Jay Dee</a></li>
<li><a href="#" class="fa fa-instagram"></a><a class="scname" href="#">Jay Kyott</a></li>
<li><a href="#" class="fa fa-twitter"></a><a class="scname" href="#">Jay Gwapo</a></li>
<li><a href="#" class="fa fa-skype"></a><a class="scname" href="#">Jay Pogi</a></li>
<li><a href="#" class="fa fa-tumblr"></a><a class="scname" href="#">Jay Jjmon</a></li>
</ul>
<button>Google</button>
<ul>
<li><a href="#" class="fa fa-google"></a><a class="scname" href="#">[email protected]</a></li>
<li><a href="#" class="fa fa-youtube"></a><a class="scname" href="#">JayTube</a></li>
<li><a href="#" class="fa fa-yahoo"></a><a class="scname" href="#">[email protected]</a></li>
</ul>
</div>
<div class="col2">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3926.428427689138!2d123.763995!3d10.22698839999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x33a979835ede1455%3A0x5eae2f6d5fac0d80!2sPSL%20Compound!5e0!3m2!1sen!2sph!4v1681651996542!5m2!1sen!2sph" width="300" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3926.710764582338!2d123.75233617489972!3d10.20412708991195!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x33a97853a1ef0a53%3A0x33c142d07a44658a!2sProfessional%20Academy%20of%20the%20Philippines!5e0!3m2!1sen!2sph!4v1681652152691!5m2!1sen!2sph" width="300" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="col3">
<img src="images/naga.jpg">
</div>
</div>
</section>
</main>
<footer id="footer">
<div class="foot1">
<h1 style="font-size: 36px;">©2023<span>JayDee</span></h1>
<img src="images/logo.png">
<ul>
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-google"></a></li>
<li><a href="#" class="fa fa-instagram"></a></li>
<li><a href="#" class="fa fa-twitter"></a></li>
</ul>
</div>
<div class="foot2">
<h3>GIVE UP ON YOUR DREAMS AND DIE A LONELY DEATH</h3>
<h5>©JAYDEESUAREZ | ALL RIGHTS RESERVED</h5>
</div>
</footer>
<script>
var navlinks = document.getElementById("navlinks");
function showMenu() {
navlinks.style.right = "0";
}
function hideMenu() {
navlinks.style.right = "-300px";
}
</script>
</body>
</html>