-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
211 lines (207 loc) · 11.4 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
207
208
209
210
211
<!DOCTYPE HTML>
<html>
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxx"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-xxxxx');
</script>
<title>YLP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<div id="page-wrapper">
<div id="wrapper">
<section class="panel banner right">
<div class="content color0 span-3-75">
<h1 class="major">Hello, I'm<br /> Yagnesh</h1>
<p>A digital experience designer + aspiring photographer & inspired by the great outdoors.</p>
<br>
</div>
<div class="image filtered span-1-75" data-position="100% 0%">
<img src="images/thestare.jpg" alt="" />
</div>
</section>
<section class="panel spotlight large right" id="first">
<div class="content span-9">
<h2 class="major">About me</h2>
<p>Hi, I'm Yagnesh - a designer currently living in Chennai, India + working as Head of Design at <a href="https://festember.com" target="_blank">Festember</a>. <br> I aim to empower people and simplify their everyday lives by creating beautiful, usable experiences. Prior to getting into any design tool, I like to first think beyond the pixels. Seeking out the problem at hand and understanding the overall story so I'm able to focus on the right aesthetic for the right problem.
<br> <br> Outside of designing, I'm also passionate about landscape and portrait photography because it's an incredible medium that can inspire, connect people to the subject, and convey emotions.I'm currently taking on freelance projects that are both interesting and challenging.If you are looking to avail by services, fill <a href="#form">this form</a> to get started!
<br>I'm always looking to meet new people, so <a href="#contact" >hit me up</a> if you want to chat about a project or to just say hi :D </p>
</div>
<div class="image filtered tinted" data-position="top left">
<img src="images/pic02.jpg" alt="" />
</div>
</section>
<section class="panel color4-alt">
<div class="intro color4">
<h1 class="major">My works </h1>
<p>Here are some of my projects >>> </p>
</div>
<div class="intro color2">
<h2 class="major">36 Days of Type</h2>
<p>36days is a yearly open call inviting designers, illustrators and visual artists to share their view on the letters and numbers from our alphabet.</p>
<ul class="actions">
<li><a href="https://instagram.com/ylp.psd" target="_blank" class="button primary color1">View it</a></li>
</ul>
</div>
<div class="intro color1">
<h2 class="major">Festember '19</h2>
<p>During the summer '19, I was commissioned to design a website and its assets for Festember- South India's biggest student-run cultural festival.Read on for a detailed analysis/breakdown</p>
<ul class="actions">
<li><a href="https://www.behance.net/gallery/85795615/Website-UIUX-Design" target ="_blank" class="button primary color2">View it</a></li>
</ul>
</div>
<div class="intro color3">
<h2 class="major"><font color='black'>Orientation '18</font></h2>
<p ><font color='black'>I was commissioned to design assets for an event which would span over a month. It involved designing a new Logo and other creatives such as an auditorium backdrop, booklet, posters, T shirt and other online social media creatives. </font></p>
<ul class="actions">
<li><a href="https://www.behance.net/gallery/80104565/Event-Branding-Design" class="button primary color1" target="_blank" >View it</a></li>
</ul>
</div>
<div class="intro color6">
<h2 class="major">Branding Design</h2>
<p>A Branding guideline design for a concept brand known as "Infinitie" : a Tie and Bow-Tie Company Targeted at Young and Energetic Individuals.</p>
<ul class="actions">
<li><a href="https://www.behance.net/gallery/80092173/Infinitie-Branding" target="_blank" class="button primary color2">View it</a></li>
</ul>
</div>
</section>
<section class="panel">
<div class="gallery">
<div class="group span-3">
<a href="images/jpg/pride.jpg" class="image filtered span-3" data-position="top"><img src="images/jpg/pride.jpg" alt="" /></a>
<a href="images/jpg/web.jpg" class="image filtered span-1-5" data-position="center"><img src="images/jpg/web.jpg" alt="" /></a>
<a href="images/jpg/wwd.jpg" class="image filtered span-1-5" data-position="bottom"><img src="images/jpg/wwd.jpg" alt="" /></a>
</div>
<a href="images/jpg/amade.jpg" class="image filtered span-1-5" data-position="center"><img src="images/jpg/amade.jpg" alt="" /></a>
<div class="group span-4-5">
<a href="images/jpg/zine.jpg" class="image filtered span-3" data-position="center"><img src="images/jpg/zine.jpg" alt="" /></a>
<a href="images/jpg/ddo.jpg" class="image filtered span-1-5" data-position="center"><img src="images/jpg/ddo.jpg" alt="" /></a>
<a href="images/jpg/inv.jpg" class="image filtered span-1-5" data-position="top"><img src="images/jpg/inv.jpg" alt="" /></a>
<a href="images/jpg/lat.jpg" class="image filtered span-3" data-position="center"><img src="images/jpg/lat.jpg" alt="" /></a>
</div>
</div>
</section>
<section class="panel color1">
<div class="intro joined">
<h2>To see more of my works...</h2>
<p>follow where these links lead you :P </p>
</div>
<div class="inner">
<h4>Design</h4>
<ul class="grid-icons two connected ">
<li><a href="https://www.behance.net/yagneshlp" target="_blank"><span class="icon brands fa-behance"><span class="label">Ipsum</span></span></a></li>
<li><a href="https://www.instagram.com/ylp.psd" target="_blank"><span class="icon brands fa-instagram"><span class="label">Lorem</span></span></a></li>
</ul>
<h4>Photography and Videography</h4>
<ul class="grid-icons two ">
<li><a href="https://www.instagram.com/ylp.lrcat" target="_blank"><span class="icon brands fa-instagram"><span class="label">Lorem</span></span></a></li>
<li><a href="https://www.youtube.com/yagneshlp" target="_blank"><span class="icon brands fa-youtube"><span class="label">Lorem</span></span></a></li>
</ul>
</div>
</section>
<section class="panel color2-alt" id="form">
<div class="inner columns aligned">
<div class="span-3-5">
<h2>For freelance enquiries, please fill this form.</h2>
<p>I'll get back to you :)</p>
<form name="enquiry" method="post" onsubmit="return validateForm()" action="/submit/submit.php">
<div class="fields">
<div class="field third">
<label for="demo-name">I'm </label>
<input type="text" name="name" id="demo-name" value="" placeholder="Name" />
</div>
<div class="field third">
<label for="demo-email">I'd like to be contacted at </label>
<input type="email" name="email" id="demo-email" value="" placeholder="E-mail" />
</div>
<div class="field third">
<label for="demo-category">I'd like to discuss about</label>
<div class="select-wrapper">
<select name="category" id="category">
<option value="-">Choose...</option>
<option value="Graphic Design">Graphic Design</option>
<option value="UI/UX Design">UI/UX Design</option>
<option value="Mograph">Mograph</option>
<option value="Editing">Editing</option>
</select>
</div>
</div>
<div class="field">
<label for="demo-message">A short brief about the project</label>
<textarea name="desc" id="demo-message" placeholder="Describe your requirements, deadline and budget :D" rows="2"></textarea>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" class="primary color2" /></li>
</ul>
</form>
</div>
</div>
</section>
<section class="panel color4-alt" id="contact">
<div class="inner columns divided">
<div class="span-1-5">
<ul class="contact-icons color1">
<li><h2 class ="major">HMU ;)</h2>I'm active on these Social media. Drop by and say a Hi!</li>
<li></li>
<li class="icon brands fa-instagram"><a href="https://instagram.com/yagneshlp" target="_blank">@yagneshlp</a></li>
<li class="icon brands fa-twitter"><a href="https://twitter.com/yagneshlp" target="_blank">@yagneshlp</a></li>
<li class="icon brands fa-facebook-f"><a href="https://fb.com.yagneshlp" target="_blank">Yagnesh L P</a></li>
<li class="icon brands fa-snapchat-ghost"><a href="https://www.snapchat.com/add/yagneshlp" target="_blank">@yagneshlp</a></li>
</ul>
</div>
</div>
</section>
<section class="panel color5">
<div class="intro span-3-25">
<h2 class="major">Designed, Developed and Deployed by yours truly :) </h2>
<p>What started out as "just another redesign", this website eventually turned out into a multidisciplinary project, pushing me to learn a lot of things along the way. </p>
<p>If you are interested to know how this website was made or are looking to make one similar to this, follow my verbose tutorial on Medium. <br>Or if you are just interested to see the code behind this website, visit the GitHub repo ;) </p>
</div>
<div class="inner">
<ul class="grid-icons two connected ">
<li><a href="https://www.behance.net/yagneshlp" target="_blank"><span class="icon brands fa-medium-m"><span class="label">Ipsum</span></span></a></li>
<li><a href="https://www.github.com/yagneshlp" target="_blank"><span class="icon brands fa-github"><span class="label">Lorem</span></span></a></li>
</ul>
</div>
</section>
<section class="panel banner right">
<div class="image filtered span-3-75" data-position="100% 0%">
<img src="images/endpic.jpg" alt="" />
</div>
</section>
<div class="copyright">© Yagnesh L Pazhaniyappan 2020</div>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/main.js"></script>
<script>
function validateForm() {
var x = document.forms["enquiry"]["name"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
var z = document.getElementById("category").value;
if (z == "-"){
alert("Choose a Category");
return false;
}
var y = document.forms["enquiry"]["desc"].value;
if (y == ""){
alert("Description must be filled out");
return false;
}
}
</script>
</body>
</html>