PageSourceSearch

https://juniomarques.com/

html juniomarques.com collected 2026-09-24 13:58:33 UTC 31,832 bytes, 705 lines download raw bytes

1<!DOCTYPE html>
2<html lang="es">
3<head>
4	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
6	<meta name='description' content='Portfolio de Junio Marques | Front End Developer en Barcelona' />
7	<meta name='keywords' content='Junio Marques, Frontend, Front end developer, diseño y desarrollo web, HTML5, CSS3, javascript, Angular, jQuery, Frontend, Photoshop, illustrator, xhtml, css, html, W3C, UI, UX, Javascript, Diseño responsive, Responsive, Responsive design ' />
8	<meta name="author" content="Junio Marques">
9
10	<meta property="og:image" content="http://juniomarques.com/img/about-section.jpg">
11
12	<meta property="og:title" content="Frontend Developer Barcelona | Junio Marques">
13	<meta property="og:url" content="http://juniomarques.com">
14	<meta property="og:description" content="Portfolio de Junio Marques. Front End Developer en Barcelona">
15	<meta name="rating" content="general">
16	<meta name="robots" content="all">
17	<meta name="twitter:card" content="summary_large_image">
18	<meta name="twitter:site" content="@juniomarques_">
19	<meta name="twitter:creator" content="@juniomarques_">
20	<meta name="twitter:title" content="Diseño y Desarrollador Web Frontend en Barcelona">
21	<meta name="twitter:description" content="Portfolio de Junio Marques. Front End Developer en Barcelona">
22	<meta name="twitter:image:src" content="http://juniomarques.com/img/about-section">
23	<link rel="author" href="https://plus.google.com/+Juniomarquesbh" />
24	<link rel="canonical" href="http://juniomarques.com" />
25	<link rel="image_src" href="http://juniomarques.com/img/about-section.jpg" />
26
27	<title>Frontend Developer en Barcelona | Junio Marques</title>
28
29	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.2/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
30	<link rel="stylesheet"  href="css/styles/styles.css?vol=2.5.5" media="all" />
31	<link rel="stylesheet"  href="css/styles/stylesResponsive.css?vol=1.9.9" media="all" />
32	<link href='https://fonts.googleapis.com/css?family=Lobster+Two|Days+One|Didact+Gothic|Dancing+Script:400,700|family=Orbitron:400,900,700,500' rel='stylesheet' type='text/css'>
33	<link rel="apple-touch-icon-precomposed" href="/custom_icon.png"/>
34	<link rel="apple-touch-startup-image" href="some.png" />
35	<link rel="icon" type="image/png" href="img/favicon.png">
36	<!-- Declaration manifest -->
37	<link rel="manifest" href="/manifest.json">
38	<meta name="apple-mobile-web-app-capable" content="yes">
39	<meta name="apple-mobile-web-app-status-bar-style" content="black">
40	<meta name="apple-mobile-web-app-title" content="Weather PWA">
41	<link rel="apple-touch-icon" href="img/icons/icon-desktop-152x152.png">
42	<meta name="msapplication-TileImage" content="img/icons/icon-desktop-144x144.png">
43	<meta name="msapplication-TileColor" content="#2a2a27">
44
45	<style>
46      #map {
47		height: 600px;
48      }
49    </style>
50
51</head>
52<body>
53<!-- Google Tag Manager -->
vendor: 62 bytes, lines 53-54
53
54<noscript><iframe src="//www.googletagmanager.com/ns.html?id=
54GTM-5JHFTS
vendor: 89 bytes, lines 54-55
54"
55				  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
56<script>
vendor: 327 bytes, lines 56-60
56(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
57		new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
58		j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
59		'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
60})(window,document,'script','dataLayer','
60GTM-5JHFTS
vendor: 3 bytes, line 60
60');
60</script>
60
61
62<!--Menu navegación top-->
63<div id="bxMenu">
64	
65<div id="menu">
66		<a class="ribbon" id="bestCss" href="http://www.bestcss.in/user/detail/JunioMarques-1631" target="_blank">BestCSS Web Gallery</a>
67		<a class="ribbon" href="https://github.com/JunioMarquesMartins" target="_black"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
68		<a class="ribbon" id="csslight" href="http://www.csslight.com/website/16781/juniomarques" title="CSS Light" target="_blank">CSS Light Web Gallery</a>
69		<!-- 	<a href="http://webguruawards.com/user/details/frontendDEv-709" style="background: url(http://webguruawards.com/awards/Nominee/img_nominee_right.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0);width:75px;height:117px;position:fixed;top:120px;right:0;z-index:99999;" target="_blank"></a> -->
70		<a class="ribbonguru" href="http://webguruawards.com/user/details/frontendDEv-709" style="background: url(http://webguruawards.com/awards/Nominee/img_webguruawards_nominee_gray.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0);width:75px;height:111px;position:fixed;top:200px;right:5px;z-index:99999;" target="_blank"></a>
71		<div class="wrapper clearfix">
72			<div id="responsive_menu">
73				<img src="img/menu.svg" alt="menu">
74			</div>
75			<div id="jm">
76				<div class="jmBefore"></div>
77				<a href="http://juniomarques.com/#home">
78					<img src="img/logo1.png" alt="logo" />
79				</a>
80			</div>
81			<nav id="nav">
82				<ul class="test">
83					<li class="toogle">
84						<a href="http://juniomarques.com/#trabajos">Portfolio</a>
85						<div class="tr"></div>
86					</li>
87					<li class="toogle">
88						<a href="http://juniomarques.com/#aptitudes">Aptitudes</a>
89						<div class="tr"></div>
90					</li>
91					<li class="toogle">
92						<a href="http://juniomarques.com/#quien_soy">Sobre Mí</a>
93						<div class="tr"></div>
94					</li>
95					<li class="toogle">
96						<a href="http://juniomarques.com/#contacto">Contacto</a>
97						<div class="tr"></div>
98					</li>
99					<li><a href="http://juniomarques.com/frases">Frases</a>
100						<div class="tr"></div>
101					</li>
102					<li class="after"><a href="http://juniomarques.com/area-51.php">Área51</a>
103						<div class="tr"></div>
104					</li>
105				</ul>
106			</nav>
107		</div>
108</div>
109<!--menu sidebar-->
110<div id="bxMenuAside">
111	<!--menu sidebar-->
112<div id="menuSidebar">
113	<a class="icon_home" href="http://juniomarques.com/#home" title="Home">
114	</a>
115	<a class="icon_portfolio" href="http://juniomarques.com/#trabajos" title="Trabajos">
116	</a>
117	<a class="icon_aptitudes" href="http://juniomarques.com/#aptitudes" title="Aptitudes">
118	</a>
119	<a class="icon_about" href="http://juniomarques.com/#quien_soy" title="Sobre mí">
120	</a>
121	<a class="icon_send" href="http://juniomarques.com/#contacto" title="Contacto">
122	</a>
123	<a class="icon_blog" href="http://juniomarques.com/area-51.php" title="Area 51">
124	</a>
125</div></div>
126<!--header-->
127<div id="home" role="banner">
128
129	<div class="bgHeader layer" data-depth="0.00">
130		<div class="wrapper clearfix">
131			<div id="service">
132				<h1>
133					<span class="t1">Junio Marques</span> <br>
134					<span class="t2">Frontend Developer</span> <br>
135					<p class="t3"><img class="heart" src="img/heart.png" alt="mí pasión">web - responsive design - js </p>
136				</h1>
137			</div>
138			<a href="#contacto" id="ceta" title="Contacto">contacto</a>
139			<div id="miSkill">
140				<p id="textSkill">
141				</p>
142			</div>
143		</div>
144	</div>
145</div>
146
147<section id="bannerAptitudes">
148	<img class="banner-desktop" src="img/banner-home-header.jpg" alt="banner-home">
149	<img class="banner-mobile" src="img/banner-header-mobile.jpg" alt="banner-home-mobile">
150</section>
151
152<div id="section_servicios">
153	<div class="forma7 mobileHidden"></div>
154	<div id="boxServicios">
155		<div class="carousel">
156			<div id="item01" class="item itemBg01">
157				<h2 class="titleDescServ">Web Flexible y Responsive</h2>
158			</div>
159			<div id="item02" class="item itemBg02">
160				<h2 class="titleDescServ">Tu Web hecha a Medida</h2>
161			</div>
162			<div id="item03" class="item itemBg03">
163				<h2 class="titleDescServ">Las mejores tecnologías</h2>
164			</div>
165		</div>
166
167		<div class="detalle_servicio">
168			<div class="moveServ">
169				<div class="textSlider textSlider01">
170					<h3 class="titulo_servicio">Responsive Design</h3>
171					<p class="descripcion_servicio">Hoy en día la mayoria de los usuarios <strong>se conectan en la red por teléfono o tablet.</strong></p>
172					<p class="descripcion_servicio">El responsive design ya es una realidad y además puede <strong>aumentar hasta un 30% las converciones de tu negocio.</strong></p>
173					<p>Soy especializado en esta técnica y hago un <strong>trabajo personalizado píxel a píxel.</strong></p>
174				</div>
175				<div class="textSlider textSlider02">
176					<h3 class="titulo_servicio">Web a medida</h3>
177					<p class="descripcion_servicio">Una web hecha a medida, transmite personalid y sobretodo <strong>destaca tu marca sobre las demás.</strong></p><p class="descripcion_servicio">Otra ventaja es poder trabajar con detalle la experiencia del úsuario una de las cosas más importantes hoy en día.</p>
178					<p class="descripcion_servicio">Tener una buena experiencia de úsuario es como tener <strong>un buen vendedor en tu tienda.</strong></p>
179				</div>
180				<div class="textSlider textSlider03">
181					<h3 class="titulo_servicio">Último en Tecnología</h3>
182					<p class="descripcion_servicio">Lo fascinante de internet es que siempre están saliendo <strong>nuevas tecnologías,</strong> lo que es nuevo hoy en poco tiempo puede ya no estar.</p> <p class="descripcion_servicio">
182Por esto me apasiona este mundo y siempre busco <strong>trabajar con el último en tecnología</strong> para así poder satisfacer las necesidades del mercado.</p>
183				</div>
184			</div>
185			<div class="nav_carousel">
186				<a class="btnCarrousel toggle_move" href="javascript:void(0);" data-move="carousel" data-anim="moveServ">
187					<img src="img/right.png" alt="icono derecha">
188				</a>
189			</div>
190		</div>
191	</div>
192</div>
193
194<!--portfolio-->
195<section id="trabajos">
196	<h2 class="portfolio">Portfolio</h2>
197	<div class="grid">
198		<div class="grid-item">
199			<a href="https://chrome.google.com/webstore/detail/netflix-hidden-categories/cgbijfcjpahaacfiipaikmdijhagkfif?hl=es" target="_black">
200				<img src="img/netflix-video-web.gif" alt="chrome-extensions" />
201				<div class="descripcion">
202					<div class="bxDescription">
203						<h3>Extensión Chrome <br> para ver categorías ocultas de Netflix</h3>
204						<p>Proyecto personal - simple extensión para chrome con la cual puedes acceder a + de 200 categorías de Netflix</p>
205						<h3>Tecnologías utilizadas</h3>
206						<p>html5, css3, javascript</p>
207						<p>
208							Instale gratis mi extensión desde chrome web store >>>
209						</p>
210					</div>
211				</div>
212			</a>
213		</div>
214		<div class="grid-item">
215			<a href="https://juniomarquesmartins.github.io/marvel-angular6/dist/marvel-angular6/#/comics" target="_black">
216				<img src="img/marvel.gif" alt="marvel-app" />
217				<div class="descripcion">
218					<div class="bxDescription">
219						<h3>Marvel Angular 6</h3>
220						<p>Proyecto personal en fase de desarrollo (en los tiempos libres como hobby). Aplicación web que consume datos de la API publica de marvel.</p>
221						<h3>Tecnologías utilizadas</h3>
222						<p>Html5, Css3, Angular6, typescript, RestFul, github</p>
223					</div>
224				</div>
225			</a>
226		</div>
227		<div class="grid-item">
228			<a href="javascript:void(0)">
229				<img src="img/bet4talent1.jpg" alt="bet-4-talent" />
230				<div class="descripcion">
231					<div class="bxDescription">
232						<h3>bet4talent.com</h3>
233						<p>diseño maquetación y programación web frontend desde cero de toda la interfaz web de be4talent</p>
234						<h3>Tecnologías utilizadas</h3>
235						<p>Html5, Css3, AngularJs 1.6.1, npm, gulp, less, git, github, photoshop, illustrator</p>
236					</div>
237				</div>
238			</a>
239		</div>
240	</div>
241</section>
242
243<section id="mentions">
244	<div class="menciones clearfix">
245		<div class="bxTextMedios">
246			<h2 class="title_menciones">Menciones</h2>
247			<p class="text_menciones">
248				"Durante mi trayectoria como <strong>web designer y frontend developer</strong> he tenido la suerte de ser mencionado en algunas plataformas especializadas en analizar las cualidades de <strong>estética, presentación, codificación, creatividade  y diseño de un website.</strong>"
249			</p>
250		</div>
251
252		<div class="bxMedios">
253			<div class="bximg_medios">
254				<a 	class="icon_medio"
255					  href="http://www.csswinner.com/details/frontend-developer/11851"
256					  title="csswinner"
257					  target="_black">
258					<img src="img/csswinner.jpg" alt="logotipo-gallery-csswinner">
259				</a>
260				<a 	class="icon_medio"
261					  href="http://www.csslight.com/website/16781/juniomarques"
262					  title="csslight"
263					  target="_black">
264					<img src="img/csslight.jpg" alt="logotipo-gallery-csslight">
265				</a>
266				<a 	class="icon_medio"
267					  href="http://www.bestcss.in/user/detail/JunioMarques-1631"
268					  title="bestcss"
269					  target="_black">
270					<img src="img/img-bestcss.jpg" alt="gallery-bestcss">
271				</a>
272				<a 	class="icon_medio"
273					  href="http://webguruawards.com/user/details/frontendDEv-709"
274					  title="web guru"
275					  target="_black">
276					<img src="img/img-guru.jpg" alt="gallery-webguru">
277				</a>
278				<a 	class="icon_medio ray"
279					  href="https://www.raytemplates.com/listing/junio-marques/"
280					  title="ray templates"
281					  target="_black">
282					<img src="img/img-ray.jpg" alt="gallery-raytemplates">
283				</a>
284				<a  class="icon_medio luxury"
285					href="http://www.cssluxury.com/2015/07/junio-marques-front-end-developer/"
286					title="css luxury"
287					target="_black">
288					<img src="img/cssluxury.jpg" alt="logotipo-gallery-cssluxury">
289				</a>
290			</div>
291		</div>
292	</div>
293</section>
294
295<!--Aptitudes-->
296<section id="aptitudes">
297
298	<div id="wrapper_top">
299		<h2 class="animaleft">Aptitudes</h2>
300		<div class="box_skill">
301			<div class="skillRotate">
302				<div class="skill"><span>html5</span></div>
303				<div class="skill"><span>css3</span></div>
304				<div class="skill"><span>javascript</span></div>
305				<div class="skill"><span>sass</span></div>
306				<div class="skill"><span>less</span></div>
307				<div class="skill"><span>jquery</span></div>
308				<div class="skill"><span>responsive design</span></div>
309				<div class="skill"><span>photoshop</span></div>
310				<div class="skill"><span>seo/html</span></div>
311				<div class="skill"><span>git</span></div>
312				<div class="skill"><span>wordpress</span></div>
313				<div class="skill"><span>design patterns</span></div>
314				<div class="skill"><span>angularJS</span></div>
315			</div>
316		</div>
317	</div>
318</section>
319<!--Sección sobre mí-->
320<section id="quien_soy">
321	<div id="main_contents_left" class="animatefx">
322		<article id="sobre_mi">
323			<img class="image-md" width="100%" src="img/about-section.jpg" alt="sobre-mi">
324			<img class="image-sm" width="100%" src="img/about-section-sm.jpg" alt="sobre-mi">
325		</article>
326	</div>
327	<div class="wrapper clearfix">
328		<div id="main_contents_right" class="animatefx clearfix">
329			<div class="contentMedia clearfix">
330				<div id="musica">
331					<h3>Mi play list favorita.</h3>
332					<p>"Tengo un gusto musical muy variado que cambia según el día, la hora, el local y la razón pero esta es mi play list más escuchada."
333						<span class="my_music_fav"></span>
334					</p>
335					<div class="mainPlayList">
336						<div class="ListaInfo">
337							<div class="title"></div>
338							<div class="artist"></div>
339							<div class="cd"></div>
340							<div class="controls">
341								<div class="play">
342									<img src="img/play.png" alt="icono play">
343								</div>
344								<div class="pause">
345									<img src="img/pause.png" alt="icono pause">
346								</div>
347							</div>
348							<div class="volume">
349								<img src="img/icon_volumen.png" alt="volumen playlist">
350							</div>
351						</div>
352						<div class="playlist">
353							<div class="audio">
354								<div class="boxAudio" audioData="charlie.mp3" cd="charlie.jpg" artist="Charlie Brown Jr">Zóio de lula</div>
355							</div>
356							<div class="audio">
357								<div class="boxAudio" audioData="guns.mp3" cd="guns.jpg" artist="Guns n Roses">Sweet Child O' Mine</div>
358							</div>
359							<div class="audio">
360								<div class="boxAudio" audioData="kings.mp3" cd="kings.jpg" artist="Kings of Leon">Sex on fire</div>
361							</div>
362							<div class="audio">
363								<div class="boxAudio" audioData="live.mp3" cd="live.jpg" artist="Live">Dolphin's Cry</div>
364							</div>
365							<div class="audio">
366								<div class="boxAudio" audioData="metalica.mp3" cd="metalica.jpg" artist="Metalica">
366Nothing Else Maters</div>
367							</div>
368							<div class="audio">
369								<div class="boxAudio" audioData="nirvana.mp3" cd="nirvana.jpg" artist="Nirvana">Come as You Are</div>
370							</div>
371							<div class="audio">
372								<div class="boxAudio" audioData="oneRepublic.mp3" cd="oneRepublic.jpg" artist="One Republic">Counting Stars</div>
373							</div>
374
375							<div class="audio">
376								<div class="boxAudio" audioData="greenDay.mp3" cd="greenDay.jpg" artist="Green Day">21 Guns</div>
377							</div>
378							<div class="audio">
379								<div class="boxAudio" audioData="pinkFloy.mp3" cd="pinkFloy.jpg" artist="Pink Floyd">Whish You Were Here</div>
380							</div>
381							<div class="audio">
382								<div class="boxAudio" audioData="sia.mp3" cd="sia.jpg" artist="Sia">Chandelier</div>
383							</div>
384						</div>
385					</div>
386				</div>
387				<div id="video">
388					<h3>Mis Videos.</h3>
389					<p>Siempre que viajamos o vivimos momentos especiales normalmente sacamos miles y miles de fotos que se quedan archivadas en el olvido.<br><br>
390						Por eso me gusta editar y subir mis propios videos caseros así estoy a tan solo un click de poder revivir esos grandes momentos.<br><br>
391						Estos son mís videos favoritos
392					</p>			
393					<div class="bx-slider">
394						
395						<div class="control-slider">
396							<span class="btn-control prevControl">
397								<img src="img/prev-icon.png" alt="icon-prev">
398							</span>
399							<span class="btn-control nextControl">
400								<img src="img/prev-icon.png" alt="icon-next">
401							</span>
402						</div>
403
404						<div class="videos-slider">
405
406						<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/o-34dL8iLqM?controls=0" frameborder="0" allow="accelerometer; showinfo=0; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
407							<a style="width: 100%;" class="thumbVideos various fancybox.iframe" href="https://www.youtube.com/embed/o-34dL8iLqM?rel=0&amp;showinfo=0&amp;autoplay=1">
408								<img width="100%" src="img/unforgiven.jpg" alt="unforgiven metallica legendado">
409							</a>
410							<a style="width: 100%;" class="thumbVideos various fancybox.iframe" href="https://www.youtube.com/embed/m4OtK1KqzqI?rel=0&amp;showinfo=0&amp;autoplay=1">
411								<img width="100%" src="img/capadocia.jpg" alt="capadocia">
412							</a>
413							<a style="width: 100%;" class="thumbVideos various fancybox.iframe" href="https://www.youtube.com/embed/Q9PnHHcClzc?rel=0&amp;showinfo=0&amp;autoplay=1">
414								<img width="100%" src="img/formentera.jpg" alt="formentera">
415							</a>
416							<a style="width: 100%;" class="thumbVideos various fancybox.iframe" href="https://www.youtube.com/embed/Zgn4iF6CWTA?rel=0&amp;showinfo=0&amp;autoplay=1">
417								<img width="100%" src="img/mallorca.jpg" alt="mallorca">
418							</a>
419							<a style="width: 100%;" class="thumbVideos various fancybox.iframe" href="https://www.youtube.com/embed/BO0lvJyegho?rel=0&amp;showinfo=0&amp;autoplay=1">
420								<img width="100%" src="img/thai-cover.jpg" alt="thailand">
421							</a>
422							<a style="width: 100%;" class="thumbVideos various fancybox.iframe" href="https://www.youtube.com/embed/eAI_6VjPpBA?rel=0&amp;showinfo=0&amp;autoplay=1">
423								<img width="100%" src="img/sunset-venice.jpg" alt="sunsent-venice">
424							</a>
425							<a style="width: 100%;" class="thumbVideos various fancybox.iframe" href="https://www.youtube.com/embed/jASySxzIys0?rel=0&amp;showinfo=0&amp;autoplay=1">
426								<img width="100%" src="img/prague-speedramp1.jpg" alt="prague">
427							</a>
428						</div>
429					</div>
430				</div>
431			</div>
432			<div id="frases">
433
434				<h3>Frases que inspiran.</h3>
435				<div class="aspas"></div>
436				<div id="contentFrase">
437					<div class="bottomFrase">
438						<p>"Diseñar es una actividad abstracta que implica programar, proyectar, traducir lo invisible en visible, comunicar."<br>
439							<strong>Jorge Frascara.</strong></p>
440					</div>
441					<div class="bottomFrase">
442						<p>"No existe el fracaso, salvo cuando dejamos de esforzarnos."<br>
443							<strong>Jean Paul Marat.</strong></p>
444					</div>
445					<div class="bottomFrase">
446						<p>"La esencia de la educacion esta en la autoeducación"</p>
447					</div>
448					<div class="bottomFrase">
449						<p>"Si no recuerdas la más ligera locura en que el amor te hizo caer, no has amado."<br>
450							<strong>William Shakespeare.</strong></p>
451					</div>
452					<div class="bottomFrase">
453						<p>"Ser el hombre más rico en el cementerio no me importa... Ir a la cama por la noche diciendo que hemos hecho algo maravilloso...<br> ESO es lo que me importa."<br>
454							<strong>Steve Jobs.</strong></p>
455					</div>
456					<div class="bottomFrase">
457						<p>"No es grande el que nunca falla, sino el que no se da por vencido."</p>
458					</div>
459					<div class="bottomFrase">
460						<p>"Empieza haciendo lo necesario, después lo posible, y de repente te encontrarás haciendo lo imposible."<br>
461							<strong>San Francisco de Asís.</strong></p>
462					</div>
463					<div class="bottomFrase">
464						<p>
464"El ignorante afirma, el sabio duda y reflexiona."<br>
465							<strong>Aristóteles.</strong></p>
466					</div>
467					<div class="bottomFrase">
468						<p>"Tanto si crees que puedes, como si crees que no puedes, estas en lo cierto"<br>
469							<strong>Henry Ford.</strong></p>
470					</div>
471					<div class="bottomFrase">
472						<p>"La inteligencia busca, pero quien encuentra es el corazón."<br>
473							<strong>George Sand.</strong></p>
474					</div>
475					<div id="iconSlider"></div>
476				</div>
477			</div>
478		</div>
479	</div>
480</section>
481<!-- Lugares -->
482<section>
483	<div class="map-container">
484		<h2 class="map-title">
485		Por donde me muevo
486		<img src="img/icon-like-red.png" alt="icon-like">
487		</h2>
488		<div id="box-map">
489			<div id="map"></div>
490		</div>
491	</div>
492</section>
493<!--Contacto -->
494<section id="contacto">
495	<div class="wrapper clearfix">
496		<h2 class="animaleft" style="text-align:center;">Contacto</h2>
497		<div class="boxform clearfix">
498			<!-- <div id="telefono"> -->
499            <div style="margin-bottom: 1rem; text-align: center">
500				<img src="img/qrcode.png" alt="cod QR" />
501			</div>
502		</div>
503		<div id="social" style="text-align:center;">
504			<span class="textSocial">Estoy en: </span>
505			<a class="social-icons" href="https://twitter.com/juniomarques_" title="twitter" target="_black">
506				<img src="img/ico-twitter.png" alt="twitter">					
507			</a>
508			<a class="social-icons" href="http://www.linkedin.com/in/juniomarques" title="linkedin" target="_black">
509				<img src="img/ico-linkedin.png" alt="linkedin">
510			</a>
511			<a class="social-icons" href="https://github.com/JunioMarquesMartins" title="github" target="_black">
512				<img src="img/ico-github.png" alt="github">
513			</a>
514			<a class="social-icons" href="https://www.instagram.com/juniomarques_/?hl=es" target="_black">
515				<img src="img/ico-instagram.png" alt="instagram">
516			</a>
517			<a class="social-icons" href="https://www.youtube.com/user/brasucabelo" target="_black">
518				<img src="img/ico-youtube.png" alt="youtube">
519			</a>
520		</div>
521	</div>
522</section>
523<!--footer-->
524<div id="bxFooter">
525	<footer>�	<div class="wrapper clearfix">�		<div>�			<div id="center_footer">�				<p>Frontend | developer.</p>�				<a href="http://juniomarques.com/#particles-js">&#169; 2013 - juniomarques.com</a>�			</div>�			<!--twitter shared button-->�			<div class="boxTwitter">�				<span class="textSocial">Compartir </span>�				<a href="https://twitter.com/intent/tweet?hashtags=frontend%2Cjavascript%2Chtml5&original_referer=http%3A%2F%2Fjuniomarques.com%2F&text=Junio%20Marques%20%7C%20FrontEnd%20Developer&tw_p=tweetbutton&url=http%3A%2F%2Fjuniomarques.com&via=jmwebdesigner" class="twitter-share-button">Tweet</a>�				<a class="up" href="http://juniomarques.com/#home"></a>�			</div>�		</div>�	</div>�	<div class="linksMedios wrapper">�		<a 	class="icon_medio"�			  href="http://www.csswinner.com/details/frontend-developer/11851"�			  title="csswinner"�			  target="_black">�			<img src="img/csswinner.jpg" alt="logotipo-gallery-csswinner">�		</a>�		<a 	class="icon_medio"�			  href="http://www.csslight.com/website/16781/juniomarques"�			  title="csslight"�			  target="_black">�			<img src="img/csslight.jpg" alt="logotipo-gallery-csslight">�		</a>�		<a 	class="icon_medio"�			  href="http://www.bestcss.in/user/detail/JunioMarques-1631"�			  title="bestcss"�			  target="_black">�			<img src="img/img-bestcss.jpg" alt="gallery-bestcss">�		</a>�		<a 	class="icon_medio"�			  href="http://webguruawards.com/user/details/frontendDEv-709"�			  title="web guru"�			  target="_black">�			<img src="img/img-guru.jpg" alt="gallery-webguru">�		</a>�		<a 	class="icon_medio ray"�			  href="https://www.raytemplates.com/listing/junio-marques"�			  title="ray templates"�			  target="_black">�			<img src="img/img-ray.jpg" alt="gallery-raytemplates">�		</a>�		<a  class="icon_medio luxury"�			href="http://www.cssluxury.com/2015/07/junio-marques-front-end-developer"�			title="css luxury"�			target="_black">�			<img src="img/cssluxury.jpg" alt="logotipo-gallery-cssluxury">�		</a>�	</div>�</footer></div>
526<!--librerias js-->
527<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
vendor: 1 bytes, line 527
527
528<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
vendor: 1 bytes, line 528
528
529<script src="js/plugins.js?vol=0.0.0"></script>
vendor: 1 bytes, line 529
529
530<script src="js/mainScript.js?vol=0.0.1"></script>
vendor: 1 bytes, line 530
530
531<script>
532	!function(d,s,id){
533		var js,
534			fjs=d.getElementsByTagName(s)[0],
535			p=/^http:/.test(d.location)?'http':'https';
536
537		if(!d.getElementById(id)){
538			js=d.createElement(s);
539			js.id=id;
540			js.src=p+"://platform.twitter.com/widgets.js";
541			fjs.parentNode.insertBefore(js,fjs);
542		}
543	}(document,"script","twitter-wjs");
544</script>
544
545
546<script>
547	if ('serviceWorker' in navigator) {
548		navigator.serviceWorker.register('service-worker.js');
549	}
550
551	// link to a image file
552	var iconUrl = 'https://www.seeklogo.net/wp-content/uploads/2014/10/Google-Chrome-logo-vector-download.png';
553
554	// create the <img> html element
555	// on first load it will request the image
556	// second time it will load it from cache directly thanks to the service worker
557	var imgElement = document.createElement('img');
558	imgElement.src = iconUrl;
559</script>
559
560
561<script>
562
563    function initMap() {
564
565		var map = new google.maps.Map(document.getElementById('map'), {
566          zoom: 2,
567		  mapTypeControl:false,
568		  center: { lat: 27.8192, lng: -7.354359 },
569		  styles: [
570            {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
571            {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
572            {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
573            {
574              featureType: 'administrative.locality',
575              elementType: 'labels.text.fill',
576              stylers: [{color: '#d59563'}]
577            },
578            {
579              featureType: 'poi',
580              elementType: 'labels.text.fill',
581              stylers: [{color: '#d59563'}]
582            },
583            {
584              featureType: 'poi.park',
585              elementType: 'geometry',
586              stylers: [{color: '#263c3f'}]
587            },
588            {
589              featureType: 'poi.park',
590              elementType: 'labels.text.fill',
591              stylers: [{color: '#6b9a76'}]
592            },
593            {
594              featureType: 'road',
595              elementType: 'geometry',
596              stylers: [{color: '#38414e'}]
597            },
598            {
599              featureType: 'road',
600              elementType: 'geometry.stroke',
601              stylers: [{color: '#212a37'}]
602            },
603            {
604              featureType: 'road',
605              elementType: 'labels.text.fill',
606              stylers: [{color: '#9ca5b3'}]
607            },
608            {
609              featureType: 'road.highway',
610              elementType: 'geometry',
611              stylers: [{color: '#746855'}]
612            },
613            {
614              featureType: 'road.highway',
615              elementType: 'geometry.stroke',
616              stylers: [{color: '#1f2835'}]
617            },
618            {
619              featureType: 'road.highway',
620              elementType: 'labels.text.fill',
621              stylers: [{color: '#f3d19c'}]
622            },
623            {
624              featureType: 'transit',
625              elementType: 'geometry',
626              stylers: [{color: '#2f3948'}]
627            },
628            {
629              featureType: 'transit.station',
630              elementType: 'labels.text.fill',
631              stylers: [{color: '#d59563'}]
632            },
633            {
634              featureType: 'water',
635              elementType: 'geometry',
636              stylers: [{color: '#17263c'}]
637            },
638            {
639              featureType: 'water',
640              elementType: 'labels.text.fill',
641              stylers: [{color: '#515c6d'}]
642            },
643            {
644              featureType: 'water',
645              elementType: 'labels.text.stroke',
646              stylers: [{color: '#17263c'}]
647            }
648          ]
649        });
650        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
651
652
653		markers = locations.map(function(location, i) {
654          return new google.maps.Marker({
655            position: location,
656            label: labels[i % labels.length]
657          });
658        });
659
660		// Add a marker clusterer to manage the markers.
661        var markerCluster = new MarkerClusterer(map, markers,
662		{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});	
663    };
664	
665	var locations = [
666		{ lat: 41.392322, lng: 2.1525424 }, // Barcelona
667		{ lat: 37.3753501, lng: -6.0250982 }, // Sevilla
668		{ lat: 39.6131615, lng: 2.6314678 }, // Mallorca
669		{ lat: 38.9742592, lng: 1.277304 }, //  Ibiza
670		{ lat: 38.7060872, lng: 1.4123536 }, // Formentera
671		{ lat: 38.7595923, lng: 1.4335382 }, // Ses Illetes
672		{ lat: 38.693143, lng: 1.3890217 }, // Cala Saona
673		{ lat: 37.0177845, lng: -7.9749515 }, // Faro
674		{ lat: 38.7436057, lng: -9.2302432 }, // Lisboa
675		{ lat: 37.0323819, lng: -8.9810123 }, // Sagres
676		{ lat: 37.1152749, lng: -8.718023 }, // Lagos
677		{ lat: 50.0595854, lng: 14.3255415 }, // Praga
678		{ lat: 64.2865885, lng: 8.7789805 }, // Noruega
679		{ lat: 59.8937806, lng: 10.6450357 }, // Noruega - Oslo
680		{ lat: -19.9026615, lng: -44.1041359 }, // Belo horizonte
681		{ lat: -19.8467957, lng: -43.9708183 }, // Belo horizonte - Pampulha
682		{ lat: -23.6821604, lng: -46.8754899 }, // Sao paulo
683		{ lat: -22.9138851, lng: -43.726173 }, // Rio de janeiro
684		{ lat: -25.4950501, lng: -49.4298835 }, // Curitiba
685		{ lat: -16.6427903, lng: -49.4025599 }, // Goiania
686		{ lat: 13.0003152, lng: 96.9931471 }, // Tailandia
687		{ lat: 13.7245601, lng: 100.4930247 }, // Tailandia - Bangkok
688		{ lat: 8.0116314, lng: 98.8346827 }, // Tailandia - Railay 
689		{ lat: 7.737619, lng: 98.7068756 }, // Tailandia - phi phi 
690		{ lat: 6.4877047, lng: 99.2886962 }, // Tailandia - Koh lipe 
691		{ lat: 39.0014869, lng: 30.6877799 }, // Turquia
692		{ lat: 41.0049823, lng: 28.7319965 }, // Turquia - Estambul
693		{ lat: 38.3715677, lng: 33.9459017 }, // Turquia - Capadocia
694	]
695
696	
697	  
698    </script>
698
699	
699<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
700    </script>
700
701    
701<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-v8zh0-J315byZJizGbvZVuk9n9Y8bt0&callback=initMap"
702    async defer></script>
702
703
704</body>
705</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.