-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
272 lines (221 loc) · 12.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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Web development of fast, responsive, custom coded websites for your business.
HTML, CSS, Javascript, jQuery, Bootstrap, Wordpress.">
<title>Web Development | Custom Coded Websites</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/master.css">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<section class="container-fluid">
<figure class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainMenu">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<a href="index.html" class="navbar-brand">Web Development</a>
</figure>
<section class="collapse navbar-collapse" id="mainMenu">
<ul class="nav navbar-nav">
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#" data-toggle="modal" data-target="#contact">Contact</a></li>
</ul>
</section>
</section>
</nav>
<div id="contact" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Contact Information</h4>
</div>
<div class="modal-body">
<p>If you have any questions, or projects you would like to hire me for, please contact me for additional
information via Skype or email:</p><br />
<p>Skype name: demiourgos87</p>
<p>My personal email: <a href="mailto:[email protected]">[email protected]</a></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<header id="home" class="container-fluid text-center">
<section class="jumbotron">
<h1>Good Day</h1>
<p>My name is Bojan, and I am a Web Developer proficient with HTML, CSS, Sass, JavaScript, jQuery, Bootstrap and
WordPress. I have to admit I am not much of a designer soul, but if you have a design ready, I can turn it
into a website quickly, and with great attention to detail. I do not have much professional experience so
far, but looking forward to change that. I am quite an easy going person, everything is agreeable, but when
it comes to getting the job done, I give my 110%. Looking forward to hearing from you!
</p>
<figure class="serviceButton">
<a href="#services" class="serviceScroll">Services</a>
<p class="arrowAnimated"><i class="fa fa-chevron-down" aria-hidden="true"></i></p>
</figure>
</section>
</header>
<section id="services" class="container-fluid text-center">
<figure class="text-center">
<h2>Skills & Services</h2>
<hr />
</figure>
<section class="container">
<article class="row">
<section class="col-md-4">
<figure class="text-center service">
<img class="image-responsive" src="img/HTML5.png" alt="HTML HTML5">
<h3>HTML</h3>
<p>Hyper Text Markup Language is the the foundation behind all web pages. It's used to semantically
describe the structure, and form to all elements that would make up a web page.</p>
</figure>
</section>
<section class="col-md-4">
<figure class="text-center service">
<img class="image-responsive" src="img/CSS3.png" alt="CSS CSS3">
<h3>CSS</h3>
<p>Cascading Style Sheets is a style sheet language used for describing the presentation of a
document written in HTML. As HTML defines structure, CSS defines the look of a web page.</p>
</figure>
</section>
<section class="col-md-4">
<figure class="text-center service">
<img class="image-responsive" src="img/JavaScript.png" alt="JavaScript">
<h3>JavaScript</h3>
<p>JavaScript is a programming language used for, among other things, adding interactivity to a website.
Alongside HTML and CSS, it is one of the three core technologies of World Wide Web content production.</p>
</figure>
</section>
</article>
<article class="row">
<section class="col-md-4">
<figure class="text-center service">
<img class="image-responsive" src="img/SASS.png" alt="SASS">
<h3>Sass</h3>
<p>Sass is a scripting language that extends CSS by providing several mechanisms available in more
traditional programming languages, making it useful for faster development.</p>
</figure>
</section>
<section class="col-md-4">
<figure class="text-center service">
<img class="image-responsive" src="img/bootstrap.png" alt="Bootstrap">
<h3>Bootstrap</h3>
<p>Bootstrap is a front-end web framework for designing websites and web applications. It contains HTML
and CSS-based design templates for many interface components, and optional JavaScript extensions.</p>
</figure>
</section>
<section class="col-md-4">
<figure class="text-center service">
<img class="image-responsive" src="img/wordpress-logo.png" alt="Wordpress">
<h3>Wordpress</h3>
<p>WordPress is the moest popular Content Management System based on php and MySQL. It offers great
extensibility through plugins, it is very user friendly, and can be easilly maintained.</p>
</figure>
</section>
</article>
</section>
</section>
<section id="portfolio" class="container-fluid">
<figure class="text-center">
<h2>Portfolio</h2>
<hr />
</figure>
<figure class="github">
<p>Link to GitHub Profile: <a href="https://github.com/Demiourgos87" target="_blank">GitHub</a></p>
</figure>
<section class="container-fluid">
<article class="row">
<figure class="col-md-4">
<figure>
<span class="overlay"><i class="fa fa-search-plus" aria-hidden="true"></i></span>
<img src="img/lollipop-screen.png" data-link="http://lollipopmedia.ca/" alt="portfolio lollipop">
<p class="title">Lollipopmedia</p>
<p class="intro">A website made using WordPress, I did some front end fixes and optimizations.</p>
<p class="description">A website for a Canadian based design company, I did some front-end fixes to the site, and also some custom front-end development, as well as page SEO structure optimization.</p>
</figure>
</figure>
<figure class="col-md-4">
<figure>
<span class="overlay"><i class="fa fa-search-plus" aria-hidden="true"></i></span>
<img src="img/mobilesmsmarketing-screen.png" data-link="http://mobilesmsmarketing.ca/" alt="portfolio sms">
<p class="title">Mobile SMS Marketing</p>
<p class="intro">A website done using WordPress, I did the front-end for the custom theme.</p>
<p class="description">Simple and elegant website, made for a Canadian SMS Marketing business. I also did the SEO corrections to the site, image optimization, and overall speed oprimization. Used WordPress, HTML5, CSS3, JavaScript and jQuery.</p>
</figure>
</figure>
<figure class="col-md-4">
<figure>
<span class="overlay"><i class="fa fa-search-plus" aria-hidden="true"></i></span>
<img src="img/happylady-screen.png" data-link="http://salon-lepote-happylady.rs/" alt="portfolio happylady">
<p class="title">Beauty Salon HappyLady</p>
<p class="intro">This website was done completely from scratch, no CMS or frameworks used.</p>
<p class="description">All functionality elements like the slider, smooth scrolling, lightbox in the gallery, are custom coded from scratch. Used HTML5, CSS3, Javascript and jQuery.</p>
</figure>
</figure>
<figure class="col-md-4">
<figure>
<span class="overlay"><i class="fa fa-search-plus" aria-hidden="true"></i></span>
<img src="img/commercialnet-screen.png" data-link="http://www.commercialnet.ca/" alt="portfolio commercial">
<p class="title">CommercialNet</p>
<p class="intro">This website was done with Wordpress, a multisite from iHomeFinder.</p>
<p class="description">A website for a real estate agent, it was done using an iHomeFinder theme and hosting, with a lot of custom CSS, JavaScript and jQuery.</p>
</figure>
</figure>
<figure class="col-md-4">
<figure>
<span class="overlay"><i class="fa fa-search-plus" aria-hidden="true"></i></span>
<img src="img/real-estate-screen.png" data-link="http://mobilesmsmarketing.ca/real_estate/" alt="portfolio real-estate">
<p class="title">Prana Real Estate Multisite</p>
<p class="intro">A Wordpress multisite, for real estate agents.</p>
<p class="description">A completely custom theme, developed from scratch using WordPress. It will be a base theme for a number of real estate websites, set up using WP multisite. Extensive use of HTML, CSS, Javascript and jQuery. Note: the website is still under consctuction.</p>
</figure>
</figure>
</article>
</section>
<section class="lbBackground">
<span class="lbPrev"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
<span class="lbNext"><i class="fa fa-chevron-right" aria-hidden="true"></i></span>
<span class="close"><i class="fa fa-times" aria-hidden="true"></i></span>
<article class="lbForeground">
<article class="row">
<figure class="col-md-6 image"><a href=""></a></figure>
<figure class="col-md-6">
<h3 class="title"></h3>
<p class="intro"></p>
<p class="description"></p>
<p>Click the image to view the website.</p>
</figure>
</article>
</article>
</section>
</section>
<figure class="backToTop">
<i class="fa fa-chevron-up" aria-hidden="true"></i>
</figure>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/f8cf5ce9d6.js"></script>
<script src="js/master.min.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-92461200-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>