API tools faq
paste
sqk

Untitled

sqk
Apr 11th, 2018
49
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.64 KB | None | 0 0
raw download clone embed print report
  1. <html><head>
  2. <meta charset="UTF-8">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.  
  5. <meta name="ROBOTS" content="INDEX, FOLLOW">
  6. <title>Robin Noguier - Designer</title>
  7.  
  8. <meta name="description" content="2015 Portfolio of Robin Noguier, french designer">
  9. <meta name="keywords" content="portfolio, portfolio designer, robin noguier, robin, french designer">
  10. <meta name="author" content="Robin Noguier">
  11. <meta name="viewport" id="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  12.  
  13. <link rel="shortcut icon" type="image/x-icon" href="images/png/favicon.ico">
  14.  
  15. <meta property="og:title" content="Robin Noguier - Designer">
  16. <meta property="og:url" content="http://robin-noguier.com">
  17. <meta property="og:type" content="website">
  18. <meta property="og:image" content="http://robin-noguier.com/images/jpeg/ogg/ogg-facebook.jpg">
  19. <meta property="og:description" content="2015 Portfolio of Robin Noguier, french designer">
  20. <meta property="og:site_name" content="Robin Noguier - Designer">
  21.  
  22. <meta name="twitter:card" content="summary_large_image">
  23. <meta name="twitter:creator" content="@Robin_Noguier">
  24. <meta name="twitter:url" content="http://robin-noguier.com">
  25. <meta name="twitter:title" content="Robin Noguier - Designer">
  26. <meta name="twitter:description" content="2015 Portfolio of Robin Noguier, french designer">
  27. <meta name="twitter:image" content="http://robin-noguier.com/images/jpeg/ogg/ogg-twitter.jpg">
  28.  
  29. <link rel="stylesheet" href="styles/styles.css">
  30. </head>
  31.  
  32. <body class="">
  33. <div class="loader hidden" style="">
  34. <div class="loading-ctn centered" style="height: 1px; width: 0px;">
  35. <h2 style="opacity: 0; transform: matrix(1, 0, 0, 1, 0, 0);">
  36. <strong>Robin</strong> Noguier
  37. <span class="mask right-mask" style="width: 100%;"><strong>Robin</strong> Noguier</span>
  38. </h2>
  39. <span class="loading" style="opacity: 0; transform: matrix(1, 0, 0, 1, 0, 0);">Loading...</span>
  40.  
  41. <svg class="ctn-border" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="163.5 91.4 501 221"><path fill="none" stroke="#1A1A1A" stroke-miterlimit="10" d="M164 91.9h500v220H164z" style="display: none;"></path></svg>
  42.  
  43. <svg class="loading-border" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="163.5 91.4 501 221"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="163.5" y1="201.89" x2="664.5" y2="201.89"><stop offset="0" stop-color="#4CD964"></stop><stop offset="1" stop-color="#4BFFC6"></stop></linearGradient><path fill="none" stroke="url(#a)" stroke-miterlimit="10" d="M164 91.9h500v220H164z" style="stroke-dashoffset: 0px; display: none;"></path></svg>
  44.  
  45. <div class="box-borders" style="opacity: 1;">
  46. <span class="top"></span>
  47. <span class="left"></span>
  48. <span class="right"></span>
  49. <span class="bottom"></span>
  50. </div>
  51. </div>
  52. </div>
  53. <div class="mobile">
  54. <div class="mobile-ctn centered">
  55. <div class="title">
  56. <h3><strong>Robin</strong> Noguier</h3>
  57. <p>Product designer</p>
  58. </div>
  59. <div class="ctn-part">
  60. <h4>About me</h4>
  61. <p>Hello I’m Robin, french interactive designer working at <a href="http://ueno.co/" target="_blank">Ueno</a>. Formerly part of <a href="http://www.ultranoir.com/fr/" target="_blank"> Ultranoir </a>. I like to create prototypes, resolve design problems, create smart user interface and imagine useful interaction.</p>
  62. <p class="bold">Feel free to contact me : <a href="mailto:robin.aitelalim@gmail.com">robin.aitelalim@gmail.com</a> </p>
  63. </div>
  64. <div class="ctn-part">
  65. <h4>Huge thank you</h4>
  66. <p class="no-margin">This portfolio was developed by my friend and favorite developer <a href="http://doriancamilleri.fr" target="_blank">Dorian Camilleri</a> and I’m really grateful to him.</p>
  67. </div>
  68. <div class="send-mail">
  69. <a href="mailto:robin.aitelalim@gmail.com" class="js-email">
  70. <svg xmlns="http://www.w3.org/2000/svg" viewBox="-247 387.9 100 66" enable-background="new -247 387.9 100 66"><path fill="#fff" d="M-235.1 395.4v48.9h74.1v-48.9h-74.1zm71.1 4.8l-22.2 18.9L-164 440v1.3h-3l-21.5-20.3-9.6 8.1-9.6-8.1-21.5 20.3h-3V440l22.2-20.9-22.2-18.9v-1.8h2.4l31.6 26.9 31.6-26.9h2.4v1.8z"></path></svg>
  71. <span>Let's get in touch !</span>
  72. </a>
  73. </div>
  74. <ul class="social">
  75. <li>
  76. <a class="db" href="https://dribbble.com/Robin_Noguier" target="_blank">
  77. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" enable-background="new 0 0 22 22"><path fill="#fff" d="M11 22C4.9 22 0 17.1 0 11S4.9 0 11 0s11 4.9 11 11-4.9 11-11 11zm9.3-9.5c-.3-.1-2.9-.9-5.9-.4 1.2 3.4 1.7 6.1 1.8 6.7 2.2-1.4 3.7-3.7 4.1-6.3zm-5.6 7.2c-.1-.8-.7-3.7-2-7.1h-.1c-5.3 1.8-7.2 5.5-7.4 5.9 1.6 1.2 3.6 2 5.8 2 1.3-.1 2.5-.4 3.7-.8zM4 17.3c.2-.4 2.8-4.6 7.6-6.2l.4-.1c-.2-.5-.5-1.1-.8-1.6-4.7 1.4-9.2 1.3-9.7 1.3v.3c.1 2.4 1 4.6 2.5 6.3zM1.8 9.1c.4 0 4.3 0 8.7-1.1C8.9 5.2 7.3 2.9 7 2.5 4.4 3.8 2.4 6.2 1.8 9.1zm7-7.2c.3.3 2 2.7 3.5 5.5 3.3-1.3 4.8-3.2 4.9-3.4-1.7-1.5-3.8-2.4-6.2-2.4-.8 0-1.5.1-2.2.3zm9.5 3.2c-.2.3-1.8 2.3-5.2 3.7.2.4.4.9.6 1.4l.2.5c3.1-.4 6.2.2 6.5.3 0-2.3-.8-4.3-2.1-5.9z"></path></svg>
  78. </a>
  79. </li>
  80. <li>
  81. <a class="tw" href="https://twitter.com/Robin_Noguier" target="_blank">
  82. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 20.3" enable-background="new 0 0 25 20.3"><path fill="#fff" d="M25 2.4c-.9.4-1.9.7-2.9.8 1.1-.6 1.9-1.6 2.3-2.8-1 .6-2.1 1-3.3 1.2-.9-1-2.3-1.6-3.7-1.6-2.8 0-5.1 2.3-5.1 5.1 0 .4 0 .8.1 1.2C8.1 6.1 4.3 4 1.7.9c-.4.8-.7 1.7-.7 2.6 0 1.8 1 3.4 2.3 4.3-.8 0-1.6-.3-2.3-.7v.1c0 2.5 1.8 4.6 4.1 5-.4.1-.9.2-1.4.2-.3 0-.7 0-1-.1.7 2 2.5 3.5 4.8 3.6-1.8 1.4-4 2.2-6.4 2.2-.4 0-.8 0-1.2-.1 2.3 1.5 5 2.3 7.9 2.3 9.4 0 14.6-7.8 14.6-14.6V5c1-.7 1.9-1.6 2.6-2.6z"></path></svg>
  83. </a>
  84. </li>
  85. <li>
  86. <a class="ln" href="https://www.linkedin.com/profile/view?id=299141925" target="_blank">
  87. <svg xmlns="http://www.w3.org/2000/svg" viewBox="131.2 132.5 136.3 135" enable-background="new 131.2 132.5 136.3 135"><g fill="#fff"><path d="M147.5 165c5 0 8.8-1.3 11.2-5 3.8-3.8 5-7.5 5-11.2 0-8.8-7.5-16.2-16.2-16.2s-16.2 7.5-16.2 16.2c-.1 8.7 7.5 16.2 16.2 16.2zM161.2 173.7H135c-2.5 0-3.8 2.5-3.8 3.8v86.2c0 2.5 2.5 3.8 3.8 3.8h26.2c2.5 0 3.8-2.5 3.8-3.8v-86.2c0-1.3-1.2-3.8-3.8-3.8zM231.2 171.2c-7.5 0-15 2.5-21.3 6.2l-1.2 1.2c0-3.8-1.2-5-5-5H180c-2.5 0-6.2 1.2-6.2 3.8v86.2c0 2.5 3.8 3.8 6.2 3.8h25c2.5 0 3.8-2.5 3.8-3.8v-47.5c0-12.5 5-18.8 15-18.8 8.8 0 10 3.7 10 12.5v52.5c0 2.5 2.5 3.8 5 3.8h25c2.5 0 3.8-2.5 3.8-3.8v-58.8c1.2-19.7-12.6-32.3-36.4-32.3z"></path></g></svg>
  88. </a>
  89. </li>
  90. <li>
  91. <a class="bh" href="https://www.behance.net/robin_noguier" target="_blank">
  92. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 17" enable-background="new 0 0 28 17"><path fill="#fff" d="M11.3 7.6c.8-.4 1.4-.8 1.8-1.4.4-.6.6-1.3.6-2.1s-.1-1.4-.4-2c-.3-.5-.6-1-1.1-1.3-.5-.3-1.1-.5-1.7-.7C9.7.1 8.9 0 8.1 0H0v16.7h8.4c.8 0 1.5-.1 2.3-.3.7-.2 1.4-.5 2-.9.6-.4 1-.9 1.4-1.5.3-.6.5-1.3.5-2.2 0-1-.3-1.9-.8-2.7-.7-.7-1.5-1.2-2.5-1.5zM3.8 2.8h3.5c.3 0 .7 0 1 .1l.9.3c.2.1.4.3.6.6.1.2.2.6.2 1 0 .7-.3 1.2-.7 1.5-.4.3-1 .5-1.7.5H3.8v-4zm6.6 9.9c-.2.3-.4.5-.6.7-.3.2-.6.3-.9.4-.3.1-.7.1-1.1.1h-4V9.2h4.1c.8 0 1.5.2 2 .5.5.4.7 1 .7 1.8 0 .6 0 .9-.2 1.2zM23.8 14c-.5.3-1.1.5-1.8.5-1 0-1.7-.2-2.2-.7-.5-.5-.8-1.4-.8-2.3h9c.1-.9 0-1.8-.2-2.7-.2-.9-.6-1.6-1.1-2.3-.5-.7-1.2-1.2-1.9-1.6-.8-.4-1.7-.6-2.8-.6-1 0-1.8.2-2.6.5s-1.5.8-2 1.3c-.6.6-1 1.2-1.3 2-.3.8-.5 1.6-.5 2.5 0 .9.1 1.8.4 2.6.3.8.7 1.4 1.3 2 .6.6 1.2 1 2 1.3.8.3 1.7.5 2.7.5 1.4 0 2.6-.3 3.6-.9 1-.6 1.7-1.7 2.2-3.1h-3c-.2.3-.5.7-1 1zm-4.7-5.4c.1-.3.2-.6.5-.9.2-.3.5-.5.9-.7.4-.2.8-.3 1.4-.3.8 0 1.5.2 1.9.7.4.4.7 1.1.8 1.9H19c0-.2.1-.4.1-.7zm6.2-7.5h-7v1.6h7V1.1z"></path></svg>
  93. </a>
  94. </li>
  95.  
  96. <li>
  97. <a class="mail js-email" href="mailto:robin.aitelalim@gmail.com">
  98. <svg xmlns="http://www.w3.org/2000/svg" viewBox="-247 387.9 100 66" enable-background="new -247 387.9 100 66"><path fill="#fff" d="M-235.1 395.4v48.9h74.1v-48.9h-74.1zm71.1 4.8l-22.2 18.9L-164 440v1.3h-3l-21.5-20.3-9.6 8.1-9.6-8.1-21.5 20.3h-3V440l22.2-20.9-22.2-18.9v-1.8h2.4l31.6 26.9 31.6-26.9h2.4v1.8z"></path></svg>
  99. </a>
  100. </li>
  101. </ul>
  102. </div>
  103. </div>
  104. <div class="main js-load-container">
  105. <header style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">
  106. <a href="#" class="logo">
  107. <svg class="r-logo" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="8.5 4.7 16.6 20.1"><path fill="#FFF" d="M11.3 17.9v6.9H8.5V4.7h7.9c4.5 0 7.7 2.5 7.7 6.6 0 3.1-1.9 5.3-4.8 6.2l5.8 7.4h-3.5L16.1 18h-4.8zm5-2.6c2.9 0 5-1.5 5-4s-2.2-4-5-4h-5v7.9h5z"></path></svg>
  108. <svg class="an-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.3 11" enable-background="new 0 0 48.3 11"><path fill="#4bea91" clip-rule="evenodd" d="M.004 10.13L9.338.794l.85.85-9.335 9.333zm18.688.043L9.358.84l.85-.85 9.332 9.335zm.003-.063L28.03.774l.848.85-9.334 9.332zm9.33-9.268l.85-.848 9.323 9.344-.85.848zm9.33 9.26l10.11-10.11.85.847-10.11 10.11z"></path></svg>
  109. </a>
  110. <a href="#" class="btn-infos js-open-sidebar">Information</a>
  111. </header>
  112.  
  113. <div class="page home no-scroll">
  114. <div class="overlay hidden"></div>
  115. <div class="nav" style="transform: matrix(1, 0, 0, 1, 10, 0);">
  116. <ul>
  117. <li data-slide="home" class="current">
  118. <span class="card home">
  119. <span class="bar"></span>
  120. </span>
  121. <h3>New <strong>Design</strong> Life</h3>
  122. <span class="gif gif-home"></span>
  123. </li>
  124. <li data-slide="allocine-redesign">
  125. <span class="card allocine">
  126. <span class="bar"></span>
  127. </span>
  128. <h3><strong>Allocine</strong> Redesign</h3>
  129. <span class="gif gif-allocine"></span>
  130. </li>
  131. <li data-slide="what-the-fete">
  132. <span class="card what-the-fete">
  133. <span class="bar"></span>
  134. </span>
  135. <h3><strong>What</strong> the Fête</h3>
  136. <span class="gif gif-what-the-fete"></span>
  137. </li>
  138. <li data-slide="draft-camp">
  139. <span class="card draft-camp">
  140. <span class="bar"></span>
  141. </span>
  142. <h3><strong>Draft</strong> Camp</h3>
  143. <span class="gif gif-draft-camp"></span>
  144. </li>
  145. <li data-slide="data-france">
  146. <span class="card data-france">
  147. <span class="bar"></span>
  148. </span>
  149. <h3><strong>Data</strong>France</h3>
  150. <span class="gif gif-data-france"></span>
  151. </li>
  152. </ul>
  153. </div>
  154. <div id="three-ctn" class="slide slide-home js-current-slide" data-case-study="home">
  155. <div id="three"><canvas width="1913" height="884" style="display: block;"></canvas></div>
  156. <div class="home-ctn">
  157. <div class="bloc-title">
  158. <span class="svg-title" style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">
  159. <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1108.5 143.6" enable-background="new 0 0 1108.5 143.6" xml:space="preserve">
  160.  
  161. <linearGradient id="design" x1="0" x2="0" y1="0" y2="1">
  162. <stop stop-color="#4bfec2" offset="20%"></stop>
  163. <stop stop-color="#4cda67" offset="80%"></stop>
  164. </linearGradient>
  165.  
  166. <text transform="matrix(1 0 0 1 0 109.8503)">
  167. <tspan class="side-text" x="0" y="0" fill="#fff" font-family="'718light'" fill-opacity="0" font-size="130" style="opacity: 1; fill-opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">NEW </tspan>
  168. <tspan x="335" y="0" fill="url(#design)" font-family="'718_thinbold'" font-size="130">DESIGN </tspan>
  169. <tspan class="side-text" x="845" y="0" fill="#fff" font-family="'718light'" font-size="130" style="opacity: 1; fill-opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">LIFE</tspan>
  170. </text>
  171. </svg>
  172. </span>
  173. <h1 style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">2014-15 Portfolio of french designer Robin Noguier</h1>
  174. </div>
  175. <div class="push js-scroll-home" style="">
  176. <p style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">Scroll or use your keyboard to navigate</p>
  177. <span class="icon icon-arrow-push-black" style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"></span>
  178. </div>
  179. </div>
  180. </div>
  181. <div class="slide slide-push js-scroll-home js-next-project bg-allocine" data-case-study="allocine-redesign">
  182. <div class="push js-scroll-home">
  183. <span class="txt"><strong>What</strong> the fête</span>
  184. <span class="icon icon-arrow-push"></span>
  185. </div>
  186. <div class="project-container centered">
  187. <h3>
  188. <span class="title-mask"><strong>Allociné</strong> redesign</span>
  189. </h3>
  190. <span class="line"></span>
  191. <p class="allocine-yellow">UX/UI Redesign</p>
  192. <a href="#/allocine-redesign" class="yellow txt-dark js-open-cs">
  193. View case study
  194. <span class="hover-progress"></span>
  195. </a>
  196. <div class="loading js-loading hidden">
  197. <div class="borders">
  198. <span class="top"></span>
  199. <span class="left"></span>
  200. <span class="right"></span>
  201. <span class="bottom"></span>
  202. </div>
  203. <span class="load-progress bg-yellow hidden"></span>
  204. <span class="percent-ctn centered percent-allocine white">
  205. <span class="percent">
  206. <span class="percent-nb allocine-yellow">0</span>
  207. <span class="mask">
  208. <span class="mask-percent">0</span>
  209. </span>
  210. </span>%
  211. </span>
  212. </div>
  213. </div>
  214. </div>
  215. <div class="slide slide-push js-scroll-home hidden bg-wtf" data-case-study="what-the-fete">
  216. <div class="push js-scroll-home">
  217. <span class="txt"><strong>Draft</strong> Camp</span>
  218. <span class="icon icon-arrow-push"></span>
  219. </div>
  220. <div class="project-container centered">
  221. <h3>
  222. <span class="title-mask"><strong>What</strong> the fête</span>
  223. </h3>
  224. <span class="line medium"></span>
  225. <p class="wtf-purple">Conception &amp; UI/UX Design</p>
  226. <a href="#/what-the-fete" class="purple js-open-cs">
  227. View case study
  228. <span class="hover-progress bg-wtf"></span>
  229. </a>
  230. <div class="loading js-loading hidden">
  231. <div class="borders">
  232. <span class="top"></span>
  233. <span class="left"></span>
  234. <span class="right"></span>
  235. <span class="bottom"></span>
  236. </div>
  237. <span class="load-progress bg-purple hidden"></span>
  238. <span class="percent-ctn centered percent-wtf white">
  239. <span class="percent">
  240. <span class="percent-nb wtf-purple">0</span>
  241. <span class="mask">
  242. <span class="mask-percent">0</span>
  243. </span>
  244. </span>%
  245. </span>
  246. </div>
  247. </div>
  248. </div>
  249. <div class="slide slide-push js-scroll-home hidden bg-dc" data-case-study="draft-camp">
  250. <div class="push js-scroll-home">
  251. <span class="txt"><strong>Data</strong> France</span>
  252. <span class="icon icon-arrow-push"></span>
  253. </div>
  254. <div class="project-container centered">
  255. <h3>
  256. <span class="title-mask"><strong>Draft</strong> Camp</span>
  257. </h3>
  258. <span class="line small"></span>
  259. <p class="draft-camp-red">Conception &amp; UI/UX Design</p>
  260. <a href="#/draft-camp" class="red js-open-cs">
  261. View case study
  262. <span class="hover-progress bg-draft-camp"></span>
  263. </a>
  264. <div class="loading js-loading hidden">
  265. <div class="borders">
  266. <span class="top"></span>
  267. <span class="left"></span>
  268. <span class="right"></span>
  269. <span class="bottom"></span>
  270. </div>
  271. <span class="load-progress bg-red hidden"></span>
  272. <span class="percent-ctn centered percent-draftcamp white">
  273. <span class="percent">
  274. <span class="percent-nb draft-camp-red">0</span>
  275. <span class="mask">
  276. <span class="mask-percent">0</span>
  277. </span>
  278. </span>%
  279. </span>
  280. </div>
  281. </div>
  282. </div>
  283. <div class="slide slide-push js-scroll-home hidden bg-df" data-case-study="data-france">
  284. <div class="project-container centered">
  285. <h3>
  286. <span class="title-mask"><strong>Data</strong>France</span>
  287. </h3>
  288. <span class="line small"></span>
  289. <p class="df-blue">UI Design</p>
  290. <a href="#/data-france" class="blue-df js-open-cs">
  291. View case study
  292. <span class="hover-progress bg-df"></span>
  293. </a>
  294. <div class="loading js-loading hidden">
  295. <div class="borders">
  296. <span class="top"></span>
  297. <span class="left"></span>
  298. <span class="right"></span>
  299. <span class="bottom"></span>
  300. </div>
  301. <span class="load-progress bg-df hidden"></span>
  302. <span class="percent-ctn centered percent-df white">
  303. <span class="percent">
  304. <span class="percent-nb blue-df">0</span>
  305. <span class="mask">
  306. <span class="mask-percent">0</span>
  307. </span>
  308. </span>%
  309. </span>
  310. </div>
  311. </div>
  312. </div>
  313. </div>
  314. </div>
  315.  
  316. <div class="infos hidden">
  317. <div class="bloc-infos bloc-left">
  318. <div class="infos-ctn">
  319. <div class="title">
  320. <h3><strong>Robin</strong> Noguier</h3>
  321. <p>Product designer</p>
  322. </div>
  323. <div class="ctn-part">
  324. <h4>About me</h4>
  325. <p>Hello I’m a 23-year-old, Paris-based, french Freelance UI/UX designer. Formerly part of <a href="http://www.ultranoir.com/fr/" target="_blank"> Ultranoir </a> and the great <a href="http://ueno.co/" target="_blank">UENO </a> team. Currently studying at <a href="http://hetic.net" target="_blank">HETIC</a>. I like to resolve design problems, create smart user interface and imagine useful interaction.</p>
  326. <p class="bold">Feel free to contact me for freelance project.</p>
  327. </div>
  328. <div class="ctn-part">
  329. <h4>Huge thank you</h4>
  330. <p class="no-margin">This portfolio was developed by my friend and favorite developer <a href="http://dcamilleri.com" target="_blank">Dorian Camilleri</a> and I’m really grateful to him.</p>
  331. </div>
  332.  
  333. <div class="ctn-part">
  334. <ul class="social">
  335. <li>
  336. <a class="db" href="https://dribbble.com/Robin_Noguier" target="_blank">
  337. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" enable-background="new 0 0 22 22"><path fill="#242424" d="M11 22C4.9 22 0 17.1 0 11S4.9 0 11 0s11 4.9 11 11-4.9 11-11 11zm9.3-9.5c-.3-.1-2.9-.9-5.9-.4 1.2 3.4 1.7 6.1 1.8 6.7 2.2-1.4 3.7-3.7 4.1-6.3zm-5.6 7.2c-.1-.8-.7-3.7-2-7.1h-.1c-5.3 1.8-7.2 5.5-7.4 5.9 1.6 1.2 3.6 2 5.8 2 1.3-.1 2.5-.4 3.7-.8zM4 17.3c.2-.4 2.8-4.6 7.6-6.2l.4-.1c-.2-.5-.5-1.1-.8-1.6-4.7 1.4-9.2 1.3-9.7 1.3v.3c.1 2.4 1 4.6 2.5 6.3zM1.8 9.1c.4 0 4.3 0 8.7-1.1C8.9 5.2 7.3 2.9 7 2.5 4.4 3.8 2.4 6.2 1.8 9.1zm7-7.2c.3.3 2 2.7 3.5 5.5 3.3-1.3 4.8-3.2 4.9-3.4-1.7-1.5-3.8-2.4-6.2-2.4-.8 0-1.5.1-2.2.3zm9.5 3.2c-.2.3-1.8 2.3-5.2 3.7.2.4.4.9.6 1.4l.2.5c3.1-.4 6.2.2 6.5.3 0-2.3-.8-4.3-2.1-5.9z"></path></svg>
  338. <span class="mask">
  339. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" enable-background="new 0 0 22 22"><path fill="#ea4c89" d="M11 22C4.9 22 0 17.1 0 11S4.9 0 11 0s11 4.9 11 11-4.9 11-11 11zm9.3-9.5c-.3-.1-2.9-.9-5.9-.4 1.2 3.4 1.7 6.1 1.8 6.7 2.2-1.4 3.7-3.7 4.1-6.3zm-5.6 7.2c-.1-.8-.7-3.7-2-7.1h-.1c-5.3 1.8-7.2 5.5-7.4 5.9 1.6 1.2 3.6 2 5.8 2 1.3-.1 2.5-.4 3.7-.8zM4 17.3c.2-.4 2.8-4.6 7.6-6.2l.4-.1c-.2-.5-.5-1.1-.8-1.6-4.7 1.4-9.2 1.3-9.7 1.3v.3c.1 2.4 1 4.6 2.5 6.3zM1.8 9.1c.4 0 4.3 0 8.7-1.1C8.9 5.2 7.3 2.9 7 2.5 4.4 3.8 2.4 6.2 1.8 9.1zm7-7.2c.3.3 2 2.7 3.5 5.5 3.3-1.3 4.8-3.2 4.9-3.4-1.7-1.5-3.8-2.4-6.2-2.4-.8 0-1.5.1-2.2.3zm9.5 3.2c-.2.3-1.8 2.3-5.2 3.7.2.4.4.9.6 1.4l.2.5c3.1-.4 6.2.2 6.5.3 0-2.3-.8-4.3-2.1-5.9z"></path></svg>
  340. </span>
  341. <span class="tooltip">Robin_Noguier</span>
  342. </a>
  343. </li>
  344. <li>
  345. <a class="tw" href="https://twitter.com/Robin_Noguier" target="_blank">
  346. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 20.3" enable-background="new 0 0 25 20.3"><path fill="#242424" d="M25 2.4c-.9.4-1.9.7-2.9.8 1.1-.6 1.9-1.6 2.3-2.8-1 .6-2.1 1-3.3 1.2-.9-1-2.3-1.6-3.7-1.6-2.8 0-5.1 2.3-5.1 5.1 0 .4 0 .8.1 1.2C8.1 6.1 4.3 4 1.7.9c-.4.8-.7 1.7-.7 2.6 0 1.8 1 3.4 2.3 4.3-.8 0-1.6-.3-2.3-.7v.1c0 2.5 1.8 4.6 4.1 5-.4.1-.9.2-1.4.2-.3 0-.7 0-1-.1.7 2 2.5 3.5 4.8 3.6-1.8 1.4-4 2.2-6.4 2.2-.4 0-.8 0-1.2-.1 2.3 1.5 5 2.3 7.9 2.3 9.4 0 14.6-7.8 14.6-14.6V5c1-.7 1.9-1.6 2.6-2.6z"></path></svg>
  347. <span class="mask">
  348. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 20.3" enable-background="new 0 0 25 20.3"><path fill="#00aced" d="M25 2.4c-.9.4-1.9.7-2.9.8 1.1-.6 1.9-1.6 2.3-2.8-1 .6-2.1 1-3.3 1.2-.9-1-2.3-1.6-3.7-1.6-2.8 0-5.1 2.3-5.1 5.1 0 .4 0 .8.1 1.2C8.1 6.1 4.3 4 1.7.9c-.4.8-.7 1.7-.7 2.6 0 1.8 1 3.4 2.3 4.3-.8 0-1.6-.3-2.3-.7v.1c0 2.5 1.8 4.6 4.1 5-.4.1-.9.2-1.4.2-.3 0-.7 0-1-.1.7 2 2.5 3.5 4.8 3.6-1.8 1.4-4 2.2-6.4 2.2-.4 0-.8 0-1.2-.1 2.3 1.5 5 2.3 7.9 2.3 9.4 0 14.6-7.8 14.6-14.6V5c1-.7 1.9-1.6 2.6-2.6z"></path></svg>
  349. </span>
  350. <span class="tooltip">@Robin_Noguier</span>
  351. </a>
  352. </li>
  353. <li>
  354. <a class="ln" href="https://www.linkedin.com/profile/view?id=299141925" target="_blank">
  355. <svg xmlns="http://www.w3.org/2000/svg" viewBox="131.2 132.5 136.3 135" enable-background="new 131.2 132.5 136.3 135"><g fill="#242424"><path d="M147.5 165c5 0 8.8-1.3 11.2-5 3.8-3.8 5-7.5 5-11.2 0-8.8-7.5-16.2-16.2-16.2s-16.2 7.5-16.2 16.2c-.1 8.7 7.5 16.2 16.2 16.2zM161.2 173.7H135c-2.5 0-3.8 2.5-3.8 3.8v86.2c0 2.5 2.5 3.8 3.8 3.8h26.2c2.5 0 3.8-2.5 3.8-3.8v-86.2c0-1.3-1.2-3.8-3.8-3.8zM231.2 171.2c-7.5 0-15 2.5-21.3 6.2l-1.2 1.2c0-3.8-1.2-5-5-5H180c-2.5 0-6.2 1.2-6.2 3.8v86.2c0 2.5 3.8 3.8 6.2 3.8h25c2.5 0 3.8-2.5 3.8-3.8v-47.5c0-12.5 5-18.8 15-18.8 8.8 0 10 3.7 10 12.5v52.5c0 2.5 2.5 3.8 5 3.8h25c2.5 0 3.8-2.5 3.8-3.8v-58.8c1.2-19.7-12.6-32.3-36.4-32.3z"></path></g></svg>
  356. <span class="mask">
  357. <svg xmlns="http://www.w3.org/2000/svg" viewBox="131.2 132.5 136.3 135" enable-background="new 131.2 132.5 136.3 135"><g fill="#007bb6"><path d="M147.5 165c5 0 8.8-1.3 11.2-5 3.8-3.8 5-7.5 5-11.2 0-8.8-7.5-16.2-16.2-16.2s-16.2 7.5-16.2 16.2c-.1 8.7 7.5 16.2 16.2 16.2zM161.2 173.7H135c-2.5 0-3.8 2.5-3.8 3.8v86.2c0 2.5 2.5 3.8 3.8 3.8h26.2c2.5 0 3.8-2.5 3.8-3.8v-86.2c0-1.3-1.2-3.8-3.8-3.8zM231.2 171.2c-7.5 0-15 2.5-21.3 6.2l-1.2 1.2c0-3.8-1.2-5-5-5H180c-2.5 0-6.2 1.2-6.2 3.8v86.2c0 2.5 3.8 3.8 6.2 3.8h25c2.5 0 3.8-2.5 3.8-3.8v-47.5c0-12.5 5-18.8 15-18.8 8.8 0 10 3.7 10 12.5v52.5c0 2.5 2.5 3.8 5 3.8h25c2.5 0 3.8-2.5 3.8-3.8v-58.8c1.2-19.7-12.6-32.3-36.4-32.3z"></path></g></svg>
  358. </span>
  359. <span class="tooltip">Robin</span>
  360. </a>
  361. </li>
  362. <li>
  363. <a class="bh" href="https://www.behance.net/robin_noguier" target="_blank">
  364. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 17" enable-background="new 0 0 28 17"><path fill="#242424" d="M11.3 7.6c.8-.4 1.4-.8 1.8-1.4.4-.6.6-1.3.6-2.1s-.1-1.4-.4-2c-.3-.5-.6-1-1.1-1.3-.5-.3-1.1-.5-1.7-.7C9.7.1 8.9 0 8.1 0H0v16.7h8.4c.8 0 1.5-.1 2.3-.3.7-.2 1.4-.5 2-.9.6-.4 1-.9 1.4-1.5.3-.6.5-1.3.5-2.2 0-1-.3-1.9-.8-2.7-.7-.7-1.5-1.2-2.5-1.5zM3.8 2.8h3.5c.3 0 .7 0 1 .1l.9.3c.2.1.4.3.6.6.1.2.2.6.2 1 0 .7-.3 1.2-.7 1.5-.4.3-1 .5-1.7.5H3.8v-4zm6.6 9.9c-.2.3-.4.5-.6.7-.3.2-.6.3-.9.4-.3.1-.7.1-1.1.1h-4V9.2h4.1c.8 0 1.5.2 2 .5.5.4.7 1 .7 1.8 0 .6 0 .9-.2 1.2zM23.8 14c-.5.3-1.1.5-1.8.5-1 0-1.7-.2-2.2-.7-.5-.5-.8-1.4-.8-2.3h9c.1-.9 0-1.8-.2-2.7-.2-.9-.6-1.6-1.1-2.3-.5-.7-1.2-1.2-1.9-1.6-.8-.4-1.7-.6-2.8-.6-1 0-1.8.2-2.6.5s-1.5.8-2 1.3c-.6.6-1 1.2-1.3 2-.3.8-.5 1.6-.5 2.5 0 .9.1 1.8.4 2.6.3.8.7 1.4 1.3 2 .6.6 1.2 1 2 1.3.8.3 1.7.5 2.7.5 1.4 0 2.6-.3 3.6-.9 1-.6 1.7-1.7 2.2-3.1h-3c-.2.3-.5.7-1 1zm-4.7-5.4c.1-.3.2-.6.5-.9.2-.3.5-.5.9-.7.4-.2.8-.3 1.4-.3.8 0 1.5.2 1.9.7.4.4.7 1.1.8 1.9H19c0-.2.1-.4.1-.7zm6.2-7.5h-7v1.6h7V1.1z"></path></svg>
  365. <span class="mask">
  366. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 17" enable-background="new 0 0 28 17"><path fill="#1769ff" d="M11.3 7.6c.8-.4 1.4-.8 1.8-1.4.4-.6.6-1.3.6-2.1s-.1-1.4-.4-2c-.3-.5-.6-1-1.1-1.3-.5-.3-1.1-.5-1.7-.7C9.7.1 8.9 0 8.1 0H0v16.7h8.4c.8 0 1.5-.1 2.3-.3.7-.2 1.4-.5 2-.9.6-.4 1-.9 1.4-1.5.3-.6.5-1.3.5-2.2 0-1-.3-1.9-.8-2.7-.7-.7-1.5-1.2-2.5-1.5zM3.8 2.8h3.5c.3 0 .7 0 1 .1l.9.3c.2.1.4.3.6.6.1.2.2.6.2 1 0 .7-.3 1.2-.7 1.5-.4.3-1 .5-1.7.5H3.8v-4zm6.6 9.9c-.2.3-.4.5-.6.7-.3.2-.6.3-.9.4-.3.1-.7.1-1.1.1h-4V9.2h4.1c.8 0 1.5.2 2 .5.5.4.7 1 .7 1.8 0 .6 0 .9-.2 1.2zM23.8 14c-.5.3-1.1.5-1.8.5-1 0-1.7-.2-2.2-.7-.5-.5-.8-1.4-.8-2.3h9c.1-.9 0-1.8-.2-2.7-.2-.9-.6-1.6-1.1-2.3-.5-.7-1.2-1.2-1.9-1.6-.8-.4-1.7-.6-2.8-.6-1 0-1.8.2-2.6.5s-1.5.8-2 1.3c-.6.6-1 1.2-1.3 2-.3.8-.5 1.6-.5 2.5 0 .9.1 1.8.4 2.6.3.8.7 1.4 1.3 2 .6.6 1.2 1 2 1.3.8.3 1.7.5 2.7.5 1.4 0 2.6-.3 3.6-.9 1-.6 1.7-1.7 2.2-3.1h-3c-.2.3-.5.7-1 1zm-4.7-5.4c.1-.3.2-.6.5-.9.2-.3.5-.5.9-.7.4-.2.8-.3 1.4-.3.8 0 1.5.2 1.9.7.4.4.7 1.1.8 1.9H19c0-.2.1-.4.1-.7zm6.2-7.5h-7v1.6h7V1.1z"></path></svg>
  367. </span>
  368. <span class="tooltip">Robin_Noguier</span>
  369. </a>
  370. </li>
  371. </ul>
  372. </div>
  373. </div>
  374. </div>
  375. <div class="bloc-infos bloc-right">
  376. <div class="close js-close-infos">
  377. <span class="icon icon-close-white centered"></span>
  378. </div>
  379. <div class="infos-ctn bloc-form">
  380. <div class="title">
  381. <h3><strong>I would like</strong> to hear from you</h3>
  382. <p>Internship proposal, freelance inquiry or even a coffee</p>
  383. </div>
  384. <form action="php/send-mail.php" autocomplete="off">
  385. <input type="text" placeholder="Name" name="name" required="">
  386. <input type="email" placeholder="Email" name="email" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required="">
  387. <textarea name="message" placeholder="Write something in there..." maxlength="500" required=""></textarea>
  388. <input type="submit" class="hidden" value="Send message">
  389. <a href="#" class="submit js-form-submit">
  390. <span>Send message</span>
  391. </a>
  392.  
  393. <div class="error">
  394. <span>Oops:</span>
  395. <p>Something went wrong</p>
  396. </div>
  397. </form>
  398. </div>
  399. <div class="infos-ctn thank-you">
  400. <div class="title">
  401. <h3>Thank you</h3>
  402. <p>Thanks for shooting me an email. We’ll be in touch soon !</p>
  403. </div>
  404. </div>
  405. </div>
  406. </div>
  407.  
  408. <script async="" src="//www.google-analytics.com/analytics.js"></script><script>
  409. (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  410. (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  411. m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  412. })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  413.  
  414. ga('create', 'UA-49987550-1', 'auto');
  415. ga('send', 'pageview');
  416. </script>
  417.  
  418. <script src="scripts/vendors.min.js"></script>
  419. <script src="scripts/scripts.min.js"></script>
  420.  
  421.  
  422. </body></html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!