-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
206 lines (172 loc) · 10.2 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
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- FAVICON -->
<link rel="icon" type="image/x-icon" href="assets/images/logo.png">
<title>Louie Vincent Obnial | Portfolio Website</title>
<!-- CSS LINKS -->
<link rel="stylesheet" href="assets/css/styles.css"><!-- MAIN CSS -->
<link rel="stylesheet" href="assets/css/navbar.css"><!-- NAVBAR CSS STYLES -->
<link rel="stylesheet" href="assets/css/hero.css"><!-- HERO CSS STYLES -->
<link rel="stylesheet" href="assets/css/about.css"><!-- ABOUT CSS STYLES -->
<link rel="stylesheet" href="assets/css/project.css"><!-- PROJECTS CSS STYLES -->
<link rel="stylesheet" href="assets/css/contact.css"><!-- CONTACT CSS STYLES -->
<link rel="stylesheet" href="assets/css/footer.css"><!-- CONTACT CSS STYLES -->
<!-- FONTAWESOME CDN LINK -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!----------- NAVIGATION BAR / HEADER SECTION --------------->
<header id="main-header">
<div class="navbar">
<!-- LOGO HERE -->
<div class="logo">
<a href="#">
<img src="assets/images/logo.png" alt="Logo">
</a>
</div>
<!-- MENU LINKS -->
<ul class="links">
<li><a href="#hero">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Works</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<!-- BURGER MENU -->
<div class="toggle_btn"><i class="fa-solid fa-bars"></i></div>
</div>
<!-- DROPDOWN MENU (FOR RESPONSIVENESS) -->
<div class="dropdown_menu">
<!-- MENU LINKS -->
<li><a href="#hero">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Works</a></li>
<li><a href="#contact">Contact</a></li>
<!-- SOCIAL MEDIA ICONS -->
<div class="socials">
<a href="https://www.facebook.com/vincent.obnial" target="_blank"><i class="fa-brands fa-facebook" id="facebook"></i></a>
<a href="https://m.me/vincent.obnial" target="_blank"><i class="fa-brands fa-facebook-messenger" id="messenger"></i></a>
<a href="https://www.linkedin.com/in/louie-vincent-obnial-67518428b/" target="_blank"><i class="fa-brands fa-linkedin" id="linkedin"></i></a>
</div>
</div>
</header>
<!----------- HERO SECTION --------------->
<section id="hero">
<div class="container">
<div class="hero_left">
<p class="hero_welcome">Hi! My name is...</p>
<p class="hero_name">Louie Vincent Obnial</p>
<p class="hero_subname">A Graphic Artist & Journalist</p>
<p class="hero_paragraph">
Welcome to my portfolio website! I'm a versatile creative professional, blending the worlds of graphic design and journalism to bring stories to life. With a passion for visual storytelling and a keen eye for design, I've embarked on a journey to create captivating narratives that resonate. Through this platform, I invite you to explore a curated collection of my work, where compelling visuals and impactful writing converge. Join me as I weave together words and images to craft engaging experiences that leave a lasting impression.
</p>
<div class="hero_buttons">
<a href="#contact" id="contact_btn">Contact Me</a>
</div>
</div>
<div class="hero_right">
</div>
</div>
</section>
<!----------- ABOUT SECTION --------------->
<section id="about">
<div class="container">
<h1 class="title">ABOUT ME</h1>
<div class="about_content">
<div class="about_leftDiv">
<img src="assets/images/about.jpg" alt="Louie Vincent Obnial's picture">
</div>
<div class="about_rightDiv">
<h2 class="about_title">Hi! My name is Louie Vincent M. Obnial</h2>
<h2 class="about_subtitle">A Graphic Artist and Journalist.</h2>
<p class="content">
As I embarked on my journey into the realms of graphic designing and journalism, I found myself at the crossroads of creativity and storytelling. With every pixel I meticulously placed on the canvas, I realized that design was my visual voice, a medium through which I could communicate emotions, ideas, and stories that words alone could not capture. Each project became a canvas for my imagination, a platform to explore the fusion of typography, color, and imagery to convey powerful narratives.
</p>
<br />
<p class="content">
But it wasn't long before I understood the symbiotic relationship between design and journalism. As a storyteller, I discovered the power of visuals in amplifying the impact of a narrative. Every article I penned found its true essence when paired with compelling visuals, creating an immersive experience for readers. My journey is an odyssey where pixels and words converge to craft stories that resonate deeply, and it is through my portfolio that I invite you to join me on this voyage of creativity, where design and journalism unite to inspire and inform.
</p>
<div class="button">
<a href="Louie Resume.pdf" class="download-btn" download>Download CV</a>
<a href="#contact" class="read_btn">Contact Me</a>
</div>
</div>
</div>
</div>
</section>
<!----------- PROJECTS SECTION --------------->
<section id="projects">
<div class="container">
<div class="title">PORTFOLIO / WORKS</div>
<div class="projects">
<div class="project">
<img src="assets/images/Design 01(CANVA).png" alt="Birthday Poster">
<div class="project_title">Birthday Poster</div>
</div>
<div class="project">
<img src="assets/images/Design 2(CANVA).png" alt="Social Media Poster">
<div class="project_title">Social Media Poster</div>
</div>
<div class="project">
<img src="assets/images/Design 04(CANVA).png" alt="Family Poster">
<div class="project_title">Family Poster</div>
</div>
<div class="project">
<img src="assets/images/Design 3(CANVA).png" alt="Congratulatory Poster">
<div class="project_title">Congratulatory Poster</div>
</div>
<div class="project">
<img src="assets/images/Design 05(CANVA).png" alt="Graduation Poster">
<div class="project_title">Graduation Poster</div>
</div>
<div class="project">
<img src="assets/images/Design 06(CANVA).png" alt="Certificate Design">
<div class="project_title">Certificate Design</div>
</div>
</div>
</div>
</section>
<!----------- CONTACT SECTION --------------->
<section id="contact">
<div class="contact_heading">CONTACT ME</div>
<div class="container">
<div class="contact_box">
<div class="contact_left"></div>
<div class="contact_right">
<h2 class="contact_title">Get in touch with me!</h2>
<p class="contact_paragraph">Lorem ipsum dolor sit amet, consectetur adipisci elit quis magna. </p>
<div class="contact_socials">
<a href="mailto:obniallouie1342@yahoo.com" target="_blank"><i class="fa-solid fa-envelope" id="contact_facebook"></i></a>
<a href="https://www.facebook.com/vincent.obnial" target="_blank"><i class="fa-brands fa-facebook" id="contact_facebook"></i></a>
<a href="https://m.me/vincent.obnial" target="_blank"><i class="fa-brands fa-facebook-messenger" id="contact_messenger"></i></a>
<a href="https://www.linkedin.com/in/louie-vincent-obnial-67518428b/" target="_blank"><i class="fa-brands fa-linkedin" id="contact_linkedin"></i></a>
</div>
<form action="" method="">
<input type="text" class="field" placeholder="Full Name">
<input type="text" class="field" placeholder="Email Address">
<textarea placeholder="Message" class="field"></textarea>
<button class="btn-send">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<!----------- FOOTER SECTION --------------->
<footer>
<div class="footer_left">
<div class="socials">
<a href="https://www.facebook.com/vincent.obnial" target="_blank"><i class="fa-brands fa-facebook" id="contact_facebook"></i></a>
<a href="https://m.me/vincent.obnial" target="_blank"><i class="fa-brands fa-facebook-messenger" id="contact_messenger"></i></a>
<a href="https://www.linkedin.com/in/louie-vincent-obnial-67518428b/" target="_blank"><i class="fa-brands fa-linkedin" id="contact_linkedin"></i></a>
</div>
</div>
<div class="footer_right">
<p class="copyright">All Rights Reserved © 2023</p>
<p class="developer">Designed & Developed by <a href="https://www.facebook.com/rosciditech.developers" target="_blank">Roscidi-Tech Digital Dev</a></p>
</div>
</footer>
<script type="text/javascript" src="assets/js/index.js"></script>
</body>
</html>