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&showinfo=0&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&showinfo=0&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&showinfo=0&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&showinfo=0&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&showinfo=0&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&showinfo=0&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&showinfo=0&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">© 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.