-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
169 lines (157 loc) · 6.06 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
<!DOCTYPE html> <meta name="robots" content="noindex"> <html> <head>
<link
href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
rel="stylesheet" type="text/css" /> <script
src="https://code.jquery.com/jquery.min.js"></script> <link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet" type="text/css" /> <link
href='https://fonts.googleapis.com/css?family=Coming+Soon'
rel='stylesheet' type='text/css'> <link
href='https://fonts.googleapis.com/css?family=Kaushan+Script'
rel='stylesheet' type='text/css'> <script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>Aleksite Official Page</title> <style id="jsbin-css"> body {
padding-top: 40px; font-family: 'Coming Soon', cursive;
font-size: 15px;
}
header {
background-color: #000;
color: #fff;
}
header, section {
width: 100%;
height: 100%;
min-height: 650px;
}
.div-pad {
padding: 85px 10px 0px 10px;
}
header .myinfo {
padding-top: 120px;
color: #ff2;
}
.navbar-inverse .navbar-brand {
color: #fb0;
font-family: 'Kaushan Script', cursive;
}
.navbar-inverse .navbar-nav > li > a {
color: #ffc;
font-size: 16px;
}
section h1 {
padding-bottom: 15px;
}
section h4 {
text-decoration: underline;
}
.btn-social-media {
margin: 15px 0px 15px 0px;
}
p {
line-height: 30px;
}
.mar-top-25 {
margin-top: 25px;
}
</style> </head> <body data-spy="scroll" data-target="menulist">
<nav id="menulist" class="navbar navbar-inverse navbar-fixed-top"
role="navigation">
<div class="container">
<div class="navbar-header">
<button role="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/" class="navbar-brand"><span class="glyphicon
glyphicon-user"></span> Aleksite</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">About</a></li>
<li><a href="#playground">Playground</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div> </div>
</nav>
<header class="container-fluid">
<div class="container">
<div class="myinfo text-center">
<img class="img-circle"
src="http://gravatar.com/avatar/852b1c66548b9a8180b97f6e56c2a34b?s=150"
alt="">
<h1>Hello, there!</h1>
<p>Thanks for dropping by on my web-hideout. By the way I’m Aleks
a freelance web designer and developer from Leyte, Philippines. I would
like to welcome you on my personal website and my playground on some of
my personal and work projects in web design and programming. Also to
showcase on some of my works in the recent and present projects.</p>
</div>
</div> </header>
<section id="about" class="container div-pad">
<h1>About</h1> <h4>Not my Professional Info</h4> <p>I am a CSS or
xHTML expert with experience using just about every server side e.g. PHP
and mySQL database.</p> <ul>
<li> I love web development.</li> <li>I specialize in producing highly
functional, visually stimulating websites.</li> <li>I have a lot of
experience with all aspects of the development process, concept to
completion.</li> <li>I specialize in presentation level development;
HTML, CSS, and JavaScript / javascript framework like jQuery.</li>
</ul>
I've been working with different clients from start-ups to medium sized
businesses in our place since 2004 up to present. My goal is to provide
effective strategy and quality web design. I design engaging front-ends
and back-ends as well as develop user friendly interfaces while keeping
web standards and usability aspect in mind.
<h4>Personal Bio</h4> <p>I grew up in Leyte and been working, digging
so hard for my family. I am a high school graduate. I didn't take up
college because of our financial problems. I am the second of three in
the family.</p> <p>In my spare time when I am not doing something web
development related I like to stay active doing stuff like: running,
hiking, swimming and playing guitar with my friends.</p> </section>
<section id="playground" class="container div-pad text-center">
<h1>Playground</h1>
<blockquote class="blockquote">
When I stand before God at the end of my life, I would hope that I
would not have a single bit of talent left and could say, I used
everything you gave me.” <footer>Erma Bombeck</footer>
</blockquote>
<p>Please refer the link below for the rest of my works.</p>
<ul class="list-inline">
<li><a class="btn-social-media btn btn-lg btn-default"
href="http://codepen.io/aleksite"><i class="fa fa-codepen"></i>
Codepen</a></li>
<li><a class="btn-social-media btn btn-lg btn-default"
href="http://aleksite.deviantart.com"><i class="fa
fa-external-link"></i> Deviantart</a></li>
</ul> </section>
<section id="contact" class="container div-pad text-center">
<h1>Contact</h1>
<p>Feel free to email the web monkey. Just provide some feedback or
give him a suggestions or comment, or to just say hello!</p>
<p class="mar-top-25"><a class="btn-social-media btn
btn-lg btn-info"
href="mailto:webmonkey@hchs-villaba.cf">webmonkey@hchs-villaba.cf</a></p>
<ul class="list-inline mar-top-25">
<li>
<a href="https://twitter.com/aleksite"
class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span
class="network-name">Twitter</span></a>
</li>
<li>
<a href="https://codepen.io/aleksite" class="btn
btn-default btn-lg"><i class="fa fa-codepen fa-fw"></i> <span
class="network-name">CodePen</span></a>
</li>
<li>
<a
href="https://plus.google.com/+aleksbella/posts" class="btn btn-default
btn-lg"><i class="fa fa-google-plus fa-fw"></i> <span
class="network-name">Google+</span></a>
</li>
</ul> </section>
</section>
</body>
</html>