<div class="container">
<a href="https://www.juangarcia.design" target="_blank" rel="noopener noreferrer">
My personal website
<span class="visually-hidden">This link opens in a new tab</span>
<img alt="New Window Icon. This icon indicates that the link will open in a new tab" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDI5IDI5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjsiPgogICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwtMiwtMS45NzUpIj4KICAgICAgICA8Zz4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjUuOCwzMEwyLjgsMzBDMi4zLDMwIDIsMjkuNyAyLDI5LjNMMiw2LjNDMiw1LjkgMi4zLDUuNSAyLjgsNS41TDE2LDUuNUMxNi40LDUuNSAxNi43LDUuOCAxNi43LDYuM0MxNi43LDYuOCAxNi40LDcgMTYsN0wzLjUsN0wzLjUsMjguNUwyNSwyOC41TDI1LDE2QzI1LDE1LjYgMjUuMywxNS4yIDI1LjgsMTUuMkMyNi4zLDE1LjIgMjYuNiwxNS41IDI2LjYsMTZMMjYuNiwyOS4zQzI2LjUsMjkuNyAyNi4yLDMwIDI1LjgsMzBaIiBzdHlsZT0iZmlsbDpyZ2IoMzUsMzEsMzIpO2ZpbGwtcnVsZTpub256ZXJvOyIvPgogICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTExLjksMjAuOUMxMS43LDIwLjkgMTEuNSwyMC44IDExLjQsMjAuN0MxMS4xLDIwLjQgMTEuMSwxOS45IDExLjQsMTkuNkwyOC43LDIuMkMyOSwxLjkgMjkuNSwxLjkgMjkuOCwyLjJDMzAuMSwyLjUgMzAuMSwzIDI5LjgsMy4zTDEyLjQsMjAuNkMxMi4zLDIwLjggMTIuMSwyMC45IDExLjksMjAuOVoiIHN0eWxlPSJmaWxsOnJnYigzNSwzMSwzMik7ZmlsbC1ydWxlOm5vbnplcm87Ii8+CiAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjkuMSwxMS43QzI5LDExLjcgMjksMTEuNyAyOS4xLDExLjdDMjguNywxMS43IDI4LjMsMTEuMyAyOC4zLDEwLjlMMjguNSwzLjRMMjEsMy43QzIwLjYsMy43IDIwLjIsMy40IDIwLjIsM0MyMC4yLDIuNiAyMC41LDIuMiAyMC45LDIuMkwyOS4yLDJDMjkuNCwyIDI5LjYsMi4xIDI5LjcsMi4yQzI5LjgsMi4zIDMwLDIuNiAzMCwyLjhMMjkuOCwxMUMyOS44LDExLjQgMjkuNSwxMS43IDI5LjEsMTEuN1oiIHN0eWxlPSJmaWxsOnJnYigzNSwzMSwzMik7ZmlsbC1ydWxlOm5vbnplcm87Ii8+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=" />
</a>
</div>
/* Container Styling. Unrelated to the new tab link functionality */
body {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.container a {
text-decoration: none;
font-weight: 300;
color: #222;
position: relative;
display: grid;
grid-template-columns: 150px 16px;
grid-gap: .25rem;
}
.container a img {
max-width: 16px;
position: relative;
top: 1px;
}
/* Visually hide the text by default. ⚠️ WARNING! Don't use display:none, otherwise screen readers won't pick it up. */
a span.visually-hidden {
height: 1px;
left: -999px;
overflow: hidden;
position: absolute;
top: auto;
width: 1px;
/* Styles for the popover */
background: #AAA;
padding: .2rem;
border-radius: .25rem;
font-size: .75rem;
}
/* Show the indicator when the icon is hovered, focused, or active */
a:hover span.visually-hidden, a:focus span.visually-hidden, a:active span.visually-hidden {
height: inherit;
width: 100%;
left: inherit;
top: .25rem;
box-sizing: border-box;
grid-row: 2;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.