tip-me.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>Albert Sunyer — Freelance web & app developer</title>
	<meta name="description" content="Freelance web developer based in Barcelona. I build intuitive, easy to use and beautiful websites and apps that work on any type of device.">
	<meta name="keywords" content="Albert Sunyer, Web developer, Barcelona, designer, responsive, html, css, js, php, mysql, angular, reatc, ionic, app, mobile, full-stack, front-end, back-end, wordpress, yii">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="manifest" href="/site.webmanifest">
	<link rel="apple-touch-icon" href="/icon.png">
	<link rel="icon" type="image/svg+xml" href="/favicon.svg">
	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png">
	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0053fa">
	<meta name="theme-color" content="#F1F6F8">

	<meta name="robots" content="noodp">
	<meta name="referrer" content="unsafe-url">

	<meta itemprop="name" content="Albert Sunyer">
	<meta itemprop="email" content="albert@nye.cat">
	<meta itemprop="telephone" content="+34 667 989 249">
	<meta itemprop="jobTitle" content="Freelance web & app developer">
	<meta itemprop="url" content="https://albertsunyer.dev">
	<meta itemprop="description" content="Freelance web developer based in Barcelona. I build intuitive, easy to use and beautiful websites and apps that work on any type of device.">
	<meta itemprop="image" content="https://albertsunyer.dev/tile.png">

	<meta name="geo.region" content="ES-CT">
	<meta name="geo.placename" content="Barcelona">

	<meta name="twitter:card" content="summary_large_image">
	<meta name="twitter:site" content="@nye">
	<meta name="twitter:title" content="Albert Sunyer — Freelance web & app developer">
	<meta name="twitter:description" content="Freelance web developer based in Barcelona. I build intuitive, easy to use and beautiful websites and apps that work on any type of device.">
	<meta name="twitter:image" content="https://albertsunyer.dev/tile.png">
	<meta name="twitter:creator" content="@nye" />

	<meta property="og:title" content="Albert Sunyer — Freelance web & app developer" />
	<meta property="og:type" content="website" />
	<meta property="og:url" content="https://albertsunyer.dev" />
	<meta property="og:image" content="https://albertsunyer.dev/tile.png" />
	<meta property="og:description" content="Freelance web developer based in Barcelona. I build intuitive, easy to use and beautiful websites and apps that work on any type of device." />
	<meta property="og:site_name" content="nyë" />
	<meta property="og:locale" content="en_US" />
	<meta property="fb:app_id" content="187838711766843" />

	<style>@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/inter/Inter-Regular.woff2?v=3.11") format("woff2"), url("assets/fonts/inter/Inter-Regular.woff?v=3.11") format("woff")}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/inter/Inter-Bold.woff2?v=3.11") format("woff2"), url("assets/fonts/inter/Inter-Bold.woff?v=3.11") format("woff")}@font-face{font-family:'Inter var';font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:'Regular';src:url("assets/fonts/inter/Inter-roman-var.woff2?v=3.11") format("woff2")}</style>
	<style>:root{--primary-color:hsl(220,100%,49%);--secondary-color:hsl(49,95.9%,52.7%);--color:hsl(0,0%,20%);--background-color:hsl(197,33%,96%);--text-shadow:1px 1px 0 #fff;--hover-color:hsl(197,33%,97%);--box-shadow:0 20px 70px -10px rgba(51,51,51,0.3),0 50px 100px 0 rgba(51,51,51,0.2)}@media(prefers-color-scheme: dark){:root{--primary-color:hsl(49,95.9%,52.7%);--secondary-color:hsl(220,100%,49%);--color:rgba(255,255,255,.87);--background-color:hsl(0,0%,15.7%);--text-shadow:none;--hover-color:hsl(0,0%,18.7%);--box-shadow:0 20px 70px -10px #000, 0 50px 100px 0 #000}}*,::after,::before{box-sizing:inherit}html,body{font-kerning:normal;font-feature-settings:kern 1,liga 1,ss01 1,calt 1;letter-spacing:-.014em;width:100%;height:100%;margin:0;font:400 16px 'Inter',Helvetica,Arial,sans-serif}html{box-sizing:border-box;-ms-overflow-style:scrollbar}body{-webkit-font-smoothing:antialiased;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent;color:var(--color);background:var(--background-color)}h1{font-size:29px;font-weight:700;text-shadow:var(--text-shadow);margin:0;line-height:80%}h1 small{display:block;font-size:16px;font-weight:400;text-shadow:none;margin-top:1px}a{color:var(--primary-color);text-decoration:none;transition:color 400ms cubic-bezier(0.7,0,0.3,1)}a:hover{text-decoration:none;color:var(--secondary-color);transition:color 150ms cubic-bezier(0.7,0,0.3,1)}main{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}#tilt{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:300px;height:300px;background:var(--background-color);transform-style:preserve-3d;transform:perspective(1000px);transition:200ms box-shadow cubic-bezier(0.7,0,0.3,1),200ms background cubic-bezier(0.7,0,0.3,1)}#tilt:hover{background:var(--hover-color);box-shadow:var(--box-shadow)}#tilt:hover h1,#tilt:hover p{transform:translateZ(20px)}#tilt img{width:200px;max-width:100%;margin-top:60px}#tilt h1{transition:400ms all cubic-bezier(0.7,0,0.3,1)}#tilt h1 small{margin-top:6px;line-height:1.2}#tilt h1 small + small{margin-top:0;margin-left:52px}#tilt p{margin-top:40px;margin-bottom:0;transition:400ms all cubic-bezier(0.7,0,0.3,1)}.links{list-style:none;margin:0;padding:40px 40px 15px;display:flex;flex-wrap:wrap;justify-content:space-around;width:100%;max-width:700px;position:absolute;bottom:0}.links li{margin-bottom:25px}.links li a{display:flex;align-items:center}.links li svg{margin-right:5px}</style>
</head>
<body>
	<main>
		<p>Tip me ;)</p>
		<form action="https://www.paypal.com/donate" method="post" target="_top">
			<input type="hidden" name="business" value="EZ6SB9GCRMKW8" />
			<input type="hidden" name="item_name" value="Tip me ;)" />
			<input type="hidden" name="currency_code" value="EUR" />
			<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
			<img alt="" border="0" src="https://www.paypal.com/en_ES/i/scr/pixel.gif" width="1" height="1" />
		</form>
	</main>
</body>
</html>