<!-- Forked from: https://codepen.io/peteyio/pen/YzWBbRx -->
<div class="container">
<div class="card card0">
<div class="border">
<h2>Al Pacino</h2>
<div class="icons">
<a href="https://codepen.io/leonelsilva" class="fa fa-codepen" aria-hidden="true"></a>
<a href="https://www.instagram.com/leonelatwork/" class="fa fa-instagram" aria-hidden="true"></a>
<a href="https://dribbble.com/leonelsilva" class="fa fa-dribbble" aria-hidden="true"></a>
<a href="https://x.com/leonelsilva" class="fa fa-twitter" aria-hidden="true"></a>
<a href="https://github.com/leonelsilva" class="fa fa-github" aria-hidden="true"></a>
<a href="https://www.linkedin.com/in/leonelatwork/" class="fa fa-linkedin" aria-hidden="true"></a>
</div>
</div>
</div>
<div class="card card1">
<div class="border">
<h2>Ben Stiller</h2>
<div class="icons">
<a href="https://codepen.io/leonelsilva" class="fa fa-codepen" aria-hidden="true"></a>
<a href="https://www.instagram.com/leonelatwork/" class="fa fa-instagram" aria-hidden="true"></a>
<a href="https://dribbble.com/leonelsilva" class="fa fa-dribbble" aria-hidden="true"></a>
<a href="https://x.com/leonelsilva" class="fa fa-twitter" aria-hidden="true"></a>
<a href="https://github.com/leonelsilva" class="fa fa-github" aria-hidden="true"></a>
<a href="https://www.linkedin.com/in/leonelatwork/" class="fa fa-linkedin" aria-hidden="true"></a>
</div>
</div>
</div>
<div class="card card2">
<div class="border">
<h2>Patrick Stewart</h2>
<div class="icons">
<a href="https://codepen.io/leonelsilva" class="fa fa-codepen" aria-hidden="true"></a>
<a href="https://www.instagram.com/leonelatwork/" class="fa fa-instagram" aria-hidden="true"></a>
<a href="https://dribbble.com/leonelsilva" class="fa fa-dribbble" aria-hidden="true"></a>
<a href="https://x.com/leonelsilva" class="fa fa-twitter" aria-hidden="true"></a>
<a href="https://github.com/leonelsilva" class="fa fa-github" aria-hidden="true"></a>
<a href="https://www.linkedin.com/in/leonelatwork/" class="fa fa-linkedin" aria-hidden="true"></a>
</div>
</div>
</div>
</div>
<!-- My social media links (Dismiss this) -->
<!-- ______ _____ _ ______
/ / / / | ___|__ ___ | |_ ___ _ __ / / / /
/ / / / | |_ / _ \ / _ \| __/ _ \ '__| / / / /
/ / / / | _| (_) | (_) | || __/ | / / / /
/_/_/_/ |_| \___/ \___/ \__\___|_| /_/_/_/ -->
<footer>
<div class="website"><a href="https://leonelsilva.com">LeonelSilva.com</a></div>
<!-- start Social -->
<div class="social">
<a href="https://linkedin.com/in/leonelatwork/" target="_blank" class="socialicon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" stroke="#313131" fill="#313131" stroke-width="1">
<path d="M6.03183 17.0875H6.53183V16.5875V7.53978V7.03978H6.03183H3.01591H2.51591V7.53978V16.5875V17.0875H3.01591H6.03183ZM16.5875 17.0875H17.0875V16.5875V11.3097C17.0875 10.1557 16.9383 9.00935 16.3508 8.1447C15.7347 7.23808 14.7085 6.73819 13.1946 6.73819C12.3886 6.73819 11.6283 7.00563 11.0557 7.43839V7.03978H10.5557H7.53978H7.03978V7.53978V16.5875V17.0875H7.53978H10.5557H11.0557V16.5875V12.0637C11.0557 11.486 11.1306 10.9764 11.3045 10.6285C11.3879 10.4616 11.4864 10.3477 11.5965 10.2743C11.7034 10.203 11.8496 10.1509 12.0637 10.1509C12.2778 10.1509 12.4239 10.203 12.5309 10.2743C12.6409 10.3477 12.7394 10.4616 12.8228 10.6285C12.9968 10.9764 13.0716 11.486 13.0716 12.0637V16.5875V17.0875H13.5716H16.5875ZM1.43256 0.5H18.1709C18.666 0.5 19.1034 0.896309 19.1034 1.43256V18.1709C19.1034 18.7241 18.7241 19.1034 18.1709 19.1034H1.43256C0.954723 19.1034 0.5 18.6487 0.5 18.1709V1.43256C0.5 0.879325 0.879325 0.5 1.43256 0.5ZM2.21432 4.52387C2.21432 5.78019 3.26756 6.83342 4.52387 6.83342C5.78019 6.83342 6.83342 5.78019 6.83342 4.52387C6.83342 3.26756 5.78019 2.21432 4.52387 2.21432C3.26756 2.21432 2.21432 3.26756 2.21432 4.52387Z" />
</svg>
</a>
<a href="https://codepen.io/leonelsilva" target="_blank" class="socialicon">
<svg width="21" height="21" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg">
<path d="M1 13.6291L10.4719 19.9437L19.9437 13.6291L10.4719 7.31457L1 13.6291Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="#313131" fill="none" />
<path d="M1 7.31457L10.4719 13.6291L19.9437 7.31457L10.4719 1L1 7.31457Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#313131" />
<path d="M1 7.31457V13.6291" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="#313131" />
<path d="M19.9438 7.31457V13.6291" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="#313131" />
<path d="M10.4722 1V7.31457" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="#313131" />
<path d="M10.4722 13.6291V19.9437" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="#313131" />
</svg>
</a>
<a href="https://github.com/leonelsilva" target="_blank" class="socialicon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="#313131" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<path d="m 10,0.05211339 c -5.5121122,0 -9.97628158,4.56398731 -9.97628158,10.19934861 0,4.513435 2.85581918,8.325331 6.82117458,9.67608 0.4988141,0.08957 0.6853272,-0.216404 0.6853272,-0.484248 0,-0.242124 -0.012145,-1.044768 -0.012145,-1.89974 C 5.0118596,18.015386 4.3638349,16.919177 4.1643093,16.346239 4.0515339,16.052675 3.5657323,15.147151 3.140656,14.905027 2.7919198,14.713457 2.2931057,14.241626 3.1285109,14.229209 c 0.7859576,-0.01241 1.3472319,0.739674 1.5346126,1.045655 0.8978653,1.543206 2.3318475,1.108625 2.9052669,0.840781 0.08675,-0.662514 0.3487361,-1.108625 0.6358796,-1.364052 -2.2199398,-0.25454 -4.5387748,-1.134345 -4.5387748,-5.0358179 0,-1.1086247 0.3860387,-2.0265663 1.0219183,-2.7405208 -0.099763,-0.2554271 -0.4484989,-1.3010823 0.099763,-2.7032708 0,0 0.8354053,-0.2678438 2.7439115,1.0456551 0.7981023,-0.229707 1.6456519,-0.3441172 2.49407,-0.3441172 0.847551,0 1.695969,0.115297 2.494071,0.3441172 1.908507,-1.3259155 2.743044,-1.0456551 2.743044,-1.0456551 0.54913,1.4021885 0.199525,2.4478437 0.09977,2.7032708 0.635879,0.7139545 1.022785,1.6185925 1.022785,2.7405208 0,3.9138899 -2.331848,4.7803919 -4.551788,5.0358179 0.361749,0.319285 0.673183,0.931245 0.673183,1.887323 0,1.364052 -0.01215,2.460261 -0.01215,2.804378 0,0.267844 0.18738,0.587128 0.685327,0.485135 3.941932,-1.351636 6.796884,-5.176836 6.796884,-9.676967 C 19.976284,4.6161007 15.512115,0.05211339 10,0.05211339 Z" id="path1" style="stroke-width:0.877148" />
</svg>
</a>
<a href="https://mastodon.social/@leonelsilva" target="_blank" class="socialicon">
<svg width="18" height="19" viewBox="0 0 19 20" stroke="none" fill="#313131" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-inside-1_326_291">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0275 0.25215C16.2037 0.573799 18.0395 2.23371 18.3229 4.34002C18.4463 5.59281 18.3852 7.47515 18.3555 8.39015C18.3481 8.61786 18.3426 8.78566 18.3425 8.86893C18.3425 8.99189 18.3246 10.1145 18.3175 10.233C18.1268 13.2428 16.2501 14.4314 14.2779 14.81C14.2567 14.8164 14.2326 14.8211 14.2079 14.8259C14.2016 14.8271 14.1952 14.8284 14.1888 14.8296C12.9386 15.0738 11.5992 15.1388 10.3284 15.1745C10.0245 15.1825 9.7215 15.1825 9.41765 15.1825C8.15413 15.1828 6.89505 15.0333 5.66682 14.737C5.6603 14.7353 5.65348 14.7352 5.64691 14.7366C5.64034 14.738 5.63421 14.741 5.629 14.7453C5.62378 14.7495 5.61965 14.7549 5.61693 14.7611C5.61422 14.7672 5.61298 14.7739 5.61334 14.7806C5.64806 15.1805 5.73494 15.5741 5.87178 15.9514C6.04196 16.388 6.63637 17.4367 8.8464 17.4367C10.1306 17.4391 11.4106 17.2895 12.6596 16.9912C12.666 16.9897 12.6726 16.9897 12.6789 16.9911C12.6853 16.9925 12.6912 16.9953 12.6964 16.9994C12.7015 17.0034 12.7057 17.0085 12.7086 17.0143C12.7115 17.0202 12.713 17.0266 12.7131 17.0331V18.5103C12.7129 18.5173 12.7111 18.5241 12.7078 18.5303C12.7046 18.5365 12.7 18.5418 12.6944 18.546C12.3039 18.829 11.7787 18.9954 11.3188 19.1411C11.2981 19.1477 11.2774 19.1542 11.257 19.1607C11.0478 19.2267 10.836 19.2846 10.6216 19.3345C8.67202 19.7785 6.63734 19.6711 4.74536 19.0244C2.97821 18.4043 1.17453 16.8843 0.728959 15.0577C0.491009 14.0688 0.323351 13.0642 0.227244 12.0515C0.126261 10.9442 0.0925192 9.83491 0.0587302 8.72411C0.0460031 8.30571 0.0332694 7.8871 0.0169333 7.46828C-0.0249506 6.40089 -0.000889663 5.23726 0.22457 4.18766C0.693314 2.05641 2.62532 0.564887 4.7409 0.25215C4.78438 0.245714 4.83241 0.237266 4.88866 0.227372C5.30735 0.153725 6.1813 0 9.02287 0H9.04693C12.2693 0 13.6604 0.1978 14.0275 0.25215ZM15.1986 11.9393V6.70649C15.1992 5.63672 14.9268 4.78728 14.3814 4.15826C13.8165 3.5301 13.0777 3.20758 12.1616 3.20758C11.102 3.20758 10.3 3.61563 9.7653 4.43089L9.24844 5.29694L8.73247 4.43089C8.19778 3.61563 7.39576 3.20758 6.3344 3.20758C5.41741 3.20758 4.67866 3.5301 4.11544 4.15826C3.56947 4.78789 3.29647 5.63729 3.29647 6.70649V11.9393H5.36928V6.86064C5.36928 5.79143 5.81931 5.24616 6.72026 5.24616C7.71656 5.24616 8.21651 5.89123 8.21651 7.16536V9.94525H10.2777V7.16536C10.2777 5.89123 10.7768 5.24616 11.7731 5.24616C12.6794 5.24616 13.1249 5.79143 13.1249 6.86064V11.9393H15.1986Z" stroke="none" />
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0275 0.25215C16.2037 0.573799 18.0395 2.23371 18.3229 4.34002C18.4463 5.59281 18.3852 7.47515 18.3555 8.39015C18.3481 8.61786 18.3426 8.78566 18.3425 8.86893C18.3425 8.99189 18.3246 10.1145 18.3175 10.233C18.1268 13.2428 16.2501 14.4314 14.2779 14.81C14.2567 14.8164 14.2326 14.8211 14.2079 14.8259C14.2016 14.8271 14.1952 14.8284 14.1888 14.8296C12.9386 15.0738 11.5992 15.1388 10.3284 15.1745C10.0245 15.1825 9.7215 15.1825 9.41765 15.1825C8.15413 15.1828 6.89505 15.0333 5.66682 14.737C5.6603 14.7353 5.65348 14.7352 5.64691 14.7366C5.64034 14.738 5.63421 14.741 5.629 14.7453C5.62378 14.7495 5.61965 14.7549 5.61693 14.7611C5.61422 14.7672 5.61298 14.7739 5.61334 14.7806C5.64806 15.1805 5.73494 15.5741 5.87178 15.9514C6.04196 16.388 6.63637 17.4367 8.8464 17.4367C10.1306 17.4391 11.4106 17.2895 12.6596 16.9912C12.666 16.9897 12.6726 16.9897 12.6789 16.9911C12.6853 16.9925 12.6912 16.9953 12.6964 16.9994C12.7015 17.0034 12.7057 17.0085 12.7086 17.0143C12.7115 17.0202 12.713 17.0266 12.7131 17.0331V18.5103C12.7129 18.5173 12.7111 18.5241 12.7078 18.5303C12.7046 18.5365 12.7 18.5418 12.6944 18.546C12.3039 18.829 11.7787 18.9954 11.3188 19.1411C11.2981 19.1477 11.2774 19.1542 11.257 19.1607C11.0478 19.2267 10.836 19.2846 10.6216 19.3345C8.67202 19.7785 6.63734 19.6711 4.74536 19.0244C2.97821 18.4043 1.17453 16.8843 0.728959 15.0577C0.491009 14.0688 0.323351 13.0642 0.227244 12.0515C0.126261 10.9442 0.0925192 9.83491 0.0587302 8.72411C0.0460031 8.30571 0.0332694 7.8871 0.0169333 7.46828C-0.0249506 6.40089 -0.000889663 5.23726 0.22457 4.18766C0.693314 2.05641 2.62532 0.564887 4.7409 0.25215C4.78438 0.245714 4.83241 0.237266 4.88866 0.227372C5.30735 0.153725 6.1813 0 9.02287 0H9.04693C12.2693 0 13.6604 0.1978 14.0275 0.25215ZM15.1986 11.9393V6.70649C15.1992 5.63672 14.9268 4.78728 14.3814 4.15826C13.8165 3.5301 13.0777 3.20758 12.1616 3.20758C11.102 3.20758 10.3 3.61563 9.7653 4.43089L9.24844 5.29694L8.73247 4.43089C8.19778 3.61563 7.39576 3.20758 6.3344 3.20758C5.41741 3.20758 4.67866 3.5301 4.11544 4.15826C3.56947 4.78789 3.29647 5.63729 3.29647 6.70649V11.9393H5.36928V6.86064C5.36928 5.79143 5.81931 5.24616 6.72026 5.24616C7.71656 5.24616 8.21651 5.89123 8.21651 7.16536V9.94525H10.2777V7.16536C10.2777 5.89123 10.7768 5.24616 11.7731 5.24616C12.6794 5.24616 13.1249 5.79143 13.1249 6.86064V11.9393H15.1986Z" />
<path d="M18.3229 4.34002L19.318 4.24196L19.3163 4.22429L19.3139 4.20669L18.3229 4.34002ZM14.0275 0.25215L13.8811 1.24137L13.8813 1.2414L14.0275 0.25215ZM18.3555 8.39015L17.356 8.35769L17.356 8.3577L18.3555 8.39015ZM18.3425 8.86893L17.3425 8.86685V8.86893H18.3425ZM18.3175 10.233L19.3155 10.2963L19.3157 10.293L18.3175 10.233ZM14.2779 14.81L14.0894 13.828L14.0393 13.8376L13.9904 13.8523L14.2779 14.81ZM14.2079 14.8259L14.0172 13.8443L14.0171 13.8443L14.2079 14.8259ZM14.1888 14.8296L14.3805 15.8111L14.3851 15.8102L14.1888 14.8296ZM10.3284 15.1745L10.3548 16.1741L10.3564 16.1741L10.3284 15.1745ZM9.41765 15.1825L9.41765 14.1825L9.41739 14.1825L9.41765 15.1825ZM5.66682 14.737L5.41585 15.705L5.42407 15.7071L5.43231 15.7091L5.66682 14.737ZM5.64691 14.7366L5.85762 15.7142L5.86195 15.7132L5.64691 14.7366ZM5.61693 14.7611L4.70273 14.3558L4.70204 14.3574L5.61693 14.7611ZM5.61334 14.7806L4.6148 14.8346L4.61568 14.8509L4.61709 14.8671L5.61334 14.7806ZM5.87178 15.9514L4.93168 16.2923L4.93574 16.3035L4.94006 16.3146L5.87178 15.9514ZM8.8464 17.4367L8.84824 16.4367H8.8464V17.4367ZM12.6596 16.9912L12.4368 16.0163L12.4273 16.0185L12.6596 16.9912ZM12.6789 16.9911L12.4603 17.9669L12.4615 17.9672L12.6789 16.9911ZM12.7086 17.0143L13.6048 16.5708L13.6039 16.569L12.7086 17.0143ZM12.7131 17.0331H13.7131V17.0238L13.7129 17.0145L12.7131 17.0331ZM12.7131 18.5103L13.7125 18.545L13.7131 18.5276V18.5103H12.7131ZM12.7078 18.5303L11.8231 18.0642L11.8222 18.0658L12.7078 18.5303ZM12.6944 18.546L13.2813 19.3557L13.2902 19.3491L12.6944 18.546ZM11.3188 19.1411L11.0168 18.1878L11.0167 18.1878L11.3188 19.1411ZM11.257 19.1607L11.5578 20.1144L11.5596 20.1138L11.257 19.1607ZM10.6216 19.3345L10.8436 20.3095L10.8481 20.3085L10.6216 19.3345ZM4.74536 19.0244L4.41423 19.968L4.42192 19.9707L4.74536 19.0244ZM0.728959 15.0577L-0.2433 15.2917L-0.242552 15.2947L0.728959 15.0577ZM0.227244 12.0515L-0.768631 12.1424L-0.768283 12.146L0.227244 12.0515ZM0.0587302 8.72411L-0.940808 8.75451L0.0587302 8.72411ZM0.0169333 7.46828L1.01617 7.42931L1.01616 7.42907L0.0169333 7.46828ZM0.22457 4.18766L-0.752099 3.97285L-0.753128 3.97764L0.22457 4.18766ZM4.7409 0.25215L4.88714 1.2414L4.88733 1.24137L4.7409 0.25215ZM4.88866 0.227372L4.71542 -0.757508L4.71542 -0.757508L4.88866 0.227372ZM15.1986 6.70649L14.1986 6.70593V6.70649H15.1986ZM15.1986 11.9393V12.9393H16.1986V11.9393H15.1986ZM14.3814 4.15826L15.137 3.50316L15.131 3.49629L15.1249 3.48953L14.3814 4.15826ZM9.7653 4.43089L8.9291 3.88247L8.91747 3.9002L8.90661 3.91841L9.7653 4.43089ZM9.24844 5.29694L8.38934 5.80876L9.24769 7.2495L10.1071 5.80942L9.24844 5.29694ZM8.73247 4.43089L9.59157 3.91907L9.58052 3.90053L9.56867 3.88247L8.73247 4.43089ZM4.11544 4.15826L3.3709 3.49068L3.36536 3.49686L3.35992 3.50313L4.11544 4.15826ZM3.29647 11.9393H2.29647V12.9393H3.29647V11.9393ZM5.36928 11.9393V12.9393H6.36928V11.9393H5.36928ZM8.21651 9.94525H7.21651V10.9453H8.21651V9.94525ZM10.2777 9.94525V10.9453H11.2777V9.94525H10.2777ZM13.1249 11.9393H12.1249V12.9393H13.1249V11.9393ZM19.3139 4.20669C18.9627 1.59624 16.7252 -0.359988 14.1738 -0.737102L13.8813 1.2414C15.6822 1.50759 17.1162 2.87118 17.3318 4.47336L19.3139 4.20669ZM19.355 8.4226C19.384 7.52886 19.4493 5.57378 19.318 4.24196L17.3277 4.43809C17.4433 5.61184 17.3864 7.42144 17.356 8.35769L19.355 8.4226ZM19.3425 8.87102C19.3426 8.80732 19.3472 8.66081 19.355 8.4226L17.356 8.3577C17.349 8.57491 17.3427 8.764 17.3425 8.86685L19.3425 8.87102ZM19.3157 10.293C19.3248 10.1411 19.3425 8.99118 19.3425 8.86893H17.3425C17.3425 8.91959 17.3382 9.22017 17.3328 9.53546C17.3302 9.69018 17.3273 9.84385 17.3247 9.96562C17.3233 10.0266 17.3221 10.0784 17.321 10.1178C17.3198 10.1636 17.3191 10.1774 17.3193 10.1731L19.3157 10.293ZM14.4665 15.7921C15.576 15.5791 16.7411 15.1234 17.6637 14.2244C18.6035 13.3085 19.2066 12.0148 19.3155 10.2963L17.3195 10.1698C17.2377 11.461 16.8071 12.2665 16.2678 12.792C15.7113 13.3344 14.952 13.6623 14.0894 13.828L14.4665 15.7921ZM14.3986 15.8076C14.4111 15.8051 14.4872 15.7913 14.5655 15.7678L13.9904 13.8523C14.0025 13.8487 14.0121 13.8461 14.0185 13.8445C14.025 13.8429 14.0294 13.8419 14.031 13.8416C14.0326 13.8412 14.0327 13.8412 14.0301 13.8417C14.0272 13.8423 14.0238 13.843 14.0172 13.8443L14.3986 15.8076ZM14.3851 15.8102C14.3882 15.8096 14.3918 15.8089 14.3987 15.8075L14.0171 13.8443C14.0113 13.8454 14.0021 13.8472 13.9926 13.8491L14.3851 15.8102ZM10.3564 16.1741C11.6314 16.1383 13.0426 16.0724 14.3805 15.8111L13.9972 13.8482C12.8345 14.0752 11.5669 14.1393 10.3004 14.1749L10.3564 16.1741ZM9.41765 16.1825C9.71933 16.1825 10.0355 16.1825 10.3548 16.1741L10.302 14.1748C10.0135 14.1824 9.72368 14.1825 9.41765 14.1825V16.1825ZM5.43231 15.7091C6.73743 16.0239 8.07532 16.1828 9.41791 16.1825L9.41739 14.1825C8.23294 14.1828 7.05266 14.0426 5.90132 13.7649L5.43231 15.7091ZM5.86195 15.7132C5.71223 15.7462 5.55938 15.7422 5.41585 15.705L5.91778 13.769C5.76122 13.7284 5.59474 13.7241 5.43187 13.76L5.86195 15.7132ZM6.26077 15.5204C6.14668 15.6134 6.00927 15.6815 5.85762 15.7142L5.4362 13.7591C5.2714 13.7946 5.12175 13.8686 4.99722 13.9701L6.26077 15.5204ZM6.53113 15.1663C6.47039 15.3033 6.37803 15.4249 6.26077 15.5204L4.99722 13.9701C4.86953 14.0742 4.7689 14.2065 4.70273 14.3558L6.53113 15.1663ZM6.61189 14.7267C6.62006 14.8779 6.5922 15.0279 6.53183 15.1648L4.70204 14.3574C4.63623 14.5065 4.6059 14.67 4.6148 14.8346L6.61189 14.7267ZM6.81187 15.6105C6.70477 15.3152 6.63676 15.0071 6.6096 14.6942L4.61709 14.8671C4.65935 15.3539 4.76512 15.833 4.93168 16.2923L6.81187 15.6105ZM8.8464 16.4367C7.90296 16.4367 7.41613 16.215 7.17306 16.0424C6.93031 15.87 6.84028 15.6826 6.80349 15.5882L4.94006 16.3146C5.07346 16.6568 5.36573 17.212 6.01523 17.6732C6.66442 18.1341 7.57981 18.4367 8.8464 18.4367V16.4367ZM12.4273 16.0185C11.255 16.2986 10.0536 16.4389 8.84824 16.4367L8.84457 18.4367C10.2076 18.4392 11.5662 18.2805 12.8919 17.9638L12.4273 16.0185ZM12.8976 16.0153C12.7439 15.9809 12.5864 15.9821 12.4368 16.0163L12.8825 17.966C12.7455 17.9974 12.6013 17.9985 12.4603 17.9669L12.8976 16.0153ZM13.3126 16.2118C13.1889 16.115 13.0463 16.0484 12.8963 16.015L12.4615 17.9672C12.3242 17.9366 12.1936 17.8757 12.0802 17.787L13.3126 16.2118ZM13.6039 16.569C13.5352 16.4309 13.4361 16.3085 13.3126 16.2118L12.0802 17.787C11.9668 17.6983 11.8761 17.5861 11.8132 17.4597L13.6039 16.569ZM13.7129 17.0145C13.7101 16.8624 13.674 16.7107 13.6048 16.5708L11.8123 17.4578C11.7489 17.3296 11.7159 17.1907 11.7133 17.0517L13.7129 17.0145ZM13.7131 18.5103V17.0331H11.7131V18.5103H13.7131ZM13.5925 18.9964C13.666 18.8569 13.7071 18.7026 13.7125 18.545L11.7137 18.4757C11.7187 18.332 11.7561 18.1913 11.8231 18.0642L13.5925 18.9964ZM13.2902 19.3491C13.4168 19.2552 13.5204 19.134 13.5934 18.9948L11.8222 18.0658C11.8888 17.9389 11.9832 17.8285 12.0985 17.7429L13.2902 19.3491ZM11.6209 20.0944C12.0429 19.9607 12.7352 19.7514 13.2812 19.3557L12.1075 17.7363C11.8725 17.9066 11.5145 18.0301 11.0168 18.1878L11.6209 20.0944ZM11.5596 20.1138C11.5797 20.1075 11.6001 20.101 11.6209 20.0944L11.0167 18.1878C10.996 18.1944 10.9751 18.201 10.9543 18.2076L11.5596 20.1138ZM10.8481 20.3085C11.0874 20.2528 11.324 20.1882 11.5578 20.1144L10.9562 18.2071C10.7717 18.2652 10.5846 18.3164 10.395 18.3605L10.8481 20.3085ZM4.42192 19.9707C6.48954 20.6774 8.7131 20.7947 10.8436 20.3095L10.3995 18.3595C8.63095 18.7622 6.78514 18.6648 5.0688 18.0782L4.42192 19.9707ZM-0.242552 15.2947C0.309384 17.5573 2.44835 19.2781 4.41424 19.968L5.07649 18.0808C3.50808 17.5305 2.03968 16.2113 1.70047 14.8207L-0.242552 15.2947ZM-0.768283 12.146C-0.667717 13.2056 -0.492282 14.2568 -0.243296 15.2917L1.70121 14.8238C1.4743 13.8807 1.31442 12.9227 1.22277 11.9571L-0.768283 12.146ZM-0.940808 8.75451C-0.907171 9.86029 -0.872813 10.9998 -0.768624 12.1424L1.22311 11.9607C1.12534 10.8885 1.09221 9.80952 1.05827 8.6937L-0.940808 8.75451ZM-0.982307 7.50726C-0.966166 7.92108 -0.953556 8.33541 -0.940808 8.75451L1.05827 8.6937C1.04556 8.27602 1.0327 7.85312 1.01617 7.42931L-0.982307 7.50726ZM-0.753128 3.97764C-1.00449 5.14782 -1.02542 6.40842 -0.982298 7.50749L1.01616 7.42907C0.975523 6.39336 1.00271 5.32669 1.20227 4.39767L-0.753128 3.97764ZM4.59466 -0.737099C2.15292 -0.376147 -0.177099 1.35854 -0.752087 3.97286L1.20123 4.40246C1.56373 2.75428 3.09772 1.50592 4.88714 1.2414L4.59466 -0.737099ZM4.71542 -0.757508C4.65538 -0.746947 4.62179 -0.741115 4.59446 -0.73707L4.88733 1.24137C4.94697 1.23254 5.00944 1.22148 5.06189 1.21225L4.71542 -0.757508ZM9.02287 -1C6.13904 -1 5.20502 -0.843628 4.71542 -0.757508L5.06189 1.21225C5.40968 1.15108 6.22356 1 9.02287 1V-1ZM9.04693 -1H9.02287V1H9.04693V-1ZM14.174 -0.73707C13.7545 -0.799169 12.3143 -1 9.04693 -1V1C12.2244 1 13.5663 1.19477 13.8811 1.24137L14.174 -0.73707ZM14.1986 6.70649V11.9393H16.1986V6.70649H14.1986ZM13.6259 4.81335C13.9728 5.21348 14.1991 5.80666 14.1986 6.70593L16.1986 6.70706C16.1993 5.46677 15.8808 4.36109 15.137 3.50316L13.6259 4.81335ZM12.1616 4.20758C12.813 4.20758 13.2749 4.42334 13.6379 4.82698L15.1249 3.48953C14.358 2.63686 13.3424 2.20758 12.1616 2.20758V4.20758ZM10.6015 4.97932C10.9323 4.47498 11.4027 4.20758 12.1616 4.20758V2.20758C10.8014 2.20758 9.66772 2.75628 8.9291 3.88247L10.6015 4.97932ZM10.1071 5.80942L10.624 4.94337L8.90661 3.91841L8.38974 4.78446L10.1071 5.80942ZM7.87338 4.94271L8.38934 5.80876L10.1075 4.78512L9.59157 3.91907L7.87338 4.94271ZM6.3344 4.20758C7.09546 4.20758 7.56568 4.47526 7.89627 4.97932L9.56867 3.88247C8.82988 2.75601 7.69606 2.20758 6.3344 2.20758V4.20758ZM4.85998 4.82583C5.22062 4.42361 5.68164 4.20758 6.3344 4.20758V2.20758C5.15318 2.20758 4.1367 2.63659 3.3709 3.49068L4.85998 4.82583ZM4.29647 6.70649C4.29647 5.80816 4.52307 5.21458 4.87096 4.81338L3.35992 3.50313C2.61587 4.36119 2.29647 5.46642 2.29647 6.70649H4.29647ZM4.29647 11.9393V6.70649H2.29647V11.9393H4.29647ZM5.36928 10.9393H3.29647V12.9393H5.36928V10.9393ZM4.36928 6.86064V11.9393H6.36928V6.86064H4.36928ZM6.72026 4.24616C6.0604 4.24616 5.40362 4.45473 4.9389 5.01201C4.50274 5.53505 4.36928 6.20958 4.36928 6.86064H6.36928C6.36928 6.44249 6.46083 6.30978 6.47492 6.29288C6.47803 6.28915 6.48127 6.28425 6.50176 6.27602C6.52814 6.26543 6.59398 6.24616 6.72026 6.24616V4.24616ZM9.21651 7.16536C9.21651 6.42443 9.07568 5.6848 8.63109 5.11368C8.14998 4.49566 7.45111 4.24616 6.72026 4.24616V6.24616C6.98571 6.24616 7.03497 6.31919 7.05291 6.34224C7.10736 6.41219 7.21651 6.63216 7.21651 7.16536H9.21651ZM9.21651 9.94525V7.16536H7.21651V9.94525H9.21651ZM10.2777 8.94525H8.21651V10.9453H10.2777V8.94525ZM9.27771 7.16536V9.94525H11.2777V7.16536H9.27771ZM11.7731 4.24616C11.0421 4.24616 10.3433 4.49572 9.86241 5.11403C9.41818 5.6852 9.27771 6.42478 9.27771 7.16536H11.2777C11.2777 6.63182 11.3868 6.41179 11.4411 6.34189C11.4588 6.31913 11.5077 6.24616 11.7731 6.24616V4.24616ZM14.1249 6.86064C14.1249 6.21172 13.9935 5.53663 13.5575 5.01275C13.0923 4.45379 12.434 4.24616 11.7731 4.24616V6.24616C11.9014 6.24616 11.9681 6.26564 11.9946 6.27628C12.0151 6.28448 12.0177 6.2891 12.0202 6.29214C12.0336 6.3082 12.1249 6.44035 12.1249 6.86064H14.1249ZM14.1249 11.9393V6.86064H12.1249V11.9393H14.1249ZM15.1986 10.9393H13.1249V12.9393H15.1986V10.9393Z" mask="url(#path-1-inside-1_326_291)" />
</svg>
</a>
<a href="https://x.com/leonelsilva" target="_blank" class="socialicon">
<svg width="19" height="19" fill="#313131" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg">
<path d="M16.3011 1H19.2803L12.7717 8.20102L20.4286 18H14.4333L9.7376 12.057L4.36463 18H1.38365L8.34528 10.2977L1 1H7.14747L11.392 6.43215L16.3011 1ZM15.2555 16.2738H16.9063L6.25048 2.63548H4.479L15.2555 16.2738Z" stroke-width="0.0507812" />
</svg>
</a>
<a href="https://figma.com/@leonelatwork" target="_blank" class="socialicon">
<svg width="17" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M12.854 12.2246C12.854 13.0203 13.1701 13.7833 13.7327 14.3459C14.2953 14.9085 15.0584 15.2246 15.854 15.2246C16.6497 15.2246 17.4127 14.9085 17.9753 14.3459C18.5379 13.7833 18.854 13.0203 18.854 12.2246C18.854 11.429 18.5379 10.6659 17.9753 10.1033C17.4127 9.54068 16.6497 9.22461 15.854 9.22461C15.0584 9.22461 14.2953 9.54068 13.7327 10.1033C13.1701 10.6659 12.854 11.429 12.854 12.2246Z" stroke="#313131" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" />
<path d="M6.854 6.22461C6.854 5.42896 7.17007 4.6659 7.73268 4.10329C8.29529 3.54068 9.05835 3.22461 9.854 3.22461H15.854C16.6497 3.22461 17.4127 3.54068 17.9753 4.10329C18.5379 4.6659 18.854 5.42896 18.854 6.22461C18.854 7.02026 18.5379 7.78332 17.9753 8.34593C17.4127 8.90854 16.6497 9.22461 15.854 9.22461H9.854C9.05835 9.22461 8.29529 8.90854 7.73268 8.34593C7.17007 7.78332 6.854 7.02026 6.854 6.22461Z" stroke="#313131" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" />
<path d="M9.85401 9.22461C9.05836 9.22461 8.29529 9.54068 7.73268 10.1033C7.17008 10.6659 6.85401 11.429 6.85401 12.2246C6.85401 13.0203 7.17008 13.7833 7.73268 14.3459C8.29529 14.9085 9.05836 15.2246 9.85401 15.2246M9.85401 15.2246H12.854M9.85401 15.2246C9.26066 15.2246 8.68064 15.4006 8.18729 15.7302C7.69395 16.0598 7.30943 16.5284 7.08237 17.0766C6.8553 17.6247 6.79589 18.2279 6.91165 18.8099C7.02741 19.3918 7.31313 19.9264 7.73268 20.3459C8.15224 20.7655 8.68679 21.0512 9.26873 21.167C9.85068 21.2827 10.4539 21.2233 11.0021 20.9962C11.5502 20.7692 12.0188 20.3847 12.3484 19.8913C12.6781 19.398 12.854 18.818 12.854 18.2246V3.22461" stroke="#313131" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" />
</svg>
</a>
<a href="https://bsky.app/profile/leonelsilva.bsky.social" target="_blank" class="socialicon">
<svg viewBox="0 0 64 57" width="16" height="20" fill="#313131">
<path d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"></path>
</svg>
</a>
<a href="https://behance.net/leonelatwork" target="_blank" class="socialicon">
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="#313131" class="bi bi-behance" viewBox="0 0 16 16">
<path d="M4.654 3c.461 0 .887.035 1.278.14.39.07.711.216.996.391s.497.426.641.747c.14.32.216.711.216 1.137 0 .496-.106.922-.356 1.242-.215.32-.566.606-.997.817.606.176 1.067.496 1.348.922s.461.957.461 1.563c0 .496-.105.922-.285 1.278a2.3 2.3 0 0 1-.782.887c-.32.215-.711.39-1.137.496a5.3 5.3 0 0 1-1.278.176L0 12.803V3zm-.285 3.978c.39 0 .71-.105.957-.285.246-.18.355-.497.355-.887 0-.216-.035-.426-.105-.567a1 1 0 0 0-.32-.355 1.8 1.8 0 0 0-.461-.176c-.176-.035-.356-.035-.567-.035H2.17v2.31c0-.005 2.2-.005 2.2-.005zm.105 4.193c.215 0 .426-.035.606-.07.176-.035.356-.106.496-.216s.25-.215.356-.39c.07-.176.14-.391.14-.641 0-.496-.14-.852-.426-1.102-.285-.215-.676-.32-1.137-.32H2.17v2.734h2.305zm6.858-.035q.428.427 1.278.426c.39 0 .746-.106 1.032-.286q.426-.32.53-.64h1.74c-.286.851-.712 1.457-1.278 1.848-.566.355-1.243.566-2.06.566a4.1 4.1 0 0 1-1.527-.285 2.8 2.8 0 0 1-1.137-.782 2.85 2.85 0 0 1-.712-1.172c-.175-.461-.25-.957-.25-1.528 0-.531.07-1.032.25-1.493.18-.46.426-.852.747-1.207.32-.32.711-.606 1.137-.782a4 4 0 0 1 1.493-.285c.606 0 1.137.105 1.598.355.46.25.817.532 1.102.958.285.39.496.851.641 1.348.07.496.105.996.07 1.563h-5.15c0 .58.21 1.11.496 1.396m2.24-3.732c-.25-.25-.642-.391-1.103-.391-.32 0-.566.07-.781.176s-.356.25-.496.39a.96.96 0 0 0-.25.497c-.036.175-.07.32-.07.46h3.196c-.07-.526-.25-.882-.497-1.132zm-3.127-3.728h3.978v.957h-3.978z" />
</svg>
</a>
<a href="https://dribbble.com/leonelsilva" target="_blank" class="socialicon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#313131" class="bi bi-dribbble" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 0C3.584 0 0 3.584 0 8s3.584 8 8 8c4.408 0 8-3.584 8-8s-3.592-8-8-8m5.284 3.688a6.8 6.8 0 0 1 1.545 4.251c-.226-.043-2.482-.503-4.755-.217-.052-.112-.096-.234-.148-.355-.139-.33-.295-.668-.451-.99 2.516-1.023 3.662-2.498 3.81-2.69zM8 1.18c1.735 0 3.323.65 4.53 1.718-.122.174-1.155 1.553-3.584 2.464-1.12-2.056-2.36-3.74-2.551-4A7 7 0 0 1 8 1.18m-2.907.642A43 43 0 0 1 7.627 5.77c-3.193.85-6.013.833-6.317.833a6.87 6.87 0 0 1 3.783-4.78zM1.163 8.01V7.8c.295.01 3.61.053 7.02-.971.199.381.381.772.555 1.162l-.27.078c-3.522 1.137-5.396 4.243-5.553 4.504a6.82 6.82 0 0 1-1.752-4.564zM8 14.837a6.8 6.8 0 0 1-4.19-1.44c.12-.252 1.509-2.924 5.361-4.269.018-.009.026-.009.044-.017a28.3 28.3 0 0 1 1.457 5.18A6.7 6.7 0 0 1 8 14.837m3.81-1.171c-.07-.417-.435-2.412-1.328-4.868 2.143-.338 4.017.217 4.251.295a6.77 6.77 0 0 1-2.924 4.573z" />
</svg>
</a>
<a href="https://theangryuser.com/" target="_blank" class="socialicon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#313131" class="bi bi-rss" viewBox="0 0 16 16">
<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" />
<path d="M5.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-3-8.5a1 1 0 0 1 1-1c5.523 0 10 4.477 10 10a1 1 0 1 1-2 0 8 8 0 0 0-8-8 1 1 0 0 1-1-1m0 4a1 1 0 0 1 1-1 6 6 0 0 1 6 6 1 1 0 1 1-2 0 4 4 0 0 0-4-4 1 1 0 0 1-1-1" />
</svg>
</a>
</div>
<!-- end Social -->
</footer>.container {
height: 100vh;
width: 100vw;
display: flex;
justify-content: space-around;
align-items: center;
}
.border {
height: 28vw;
width: 18vw;
background: transparent;
border-radius: 10px;
transition: border 1s;
position: relative;
}
.border:hover {
border: 1px solid white;
}
h2 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.5vw;
color: white;
margin: 1.3vw 1vw;
opacity: 0;
transition: opacity 1s;
}
.card {
height: 30vw;
width: 20vw;
background: grey;
border-radius: 10px;
transition: background 0.8s;
overflow: hidden;
background: black;
box-shadow: 0 70px 63px -60px #000000;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.card:hover h2,
.card:hover .fa {
opacity: 1;
}
.card0 {
background: url("https://i.pinimg.com/736x/8f/a0/51/8fa051251f5ac2d0b756027089fbffde--terry-o-neill-al-pacino.jpg")
center center no-repeat;
background-size: 120%;
}
.card0:hover {
background: url("https://i.pinimg.com/736x/8f/a0/51/8fa051251f5ac2d0b756027089fbffde--terry-o-neill-al-pacino.jpg")
left center no-repeat;
background-size: 200%;
}
.card1 {
background: url("https://i.pinimg.com/originals/28/d2/e6/28d2e684e7859a0dd17fbd0cea00f8a9.jpg")
center center no-repeat;
background-size: 120%;
}
.card1:hover {
background: url("https://i.pinimg.com/originals/28/d2/e6/28d2e684e7859a0dd17fbd0cea00f8a9.jpg")
left center no-repeat;
background-size: 200%;
}
.card2 {
background: url("https://i.pinimg.com/originals/ee/85/08/ee850842e68cfcf6e3943c048f45c6d1.jpg")
center center no-repeat;
background-size: 120%;
}
.card2:hover {
background: url("https://i.pinimg.com/originals/ee/85/08/ee850842e68cfcf6e3943c048f45c6d1.jpg")
left center no-repeat;
background-size: 200%;
}
.icons {
position: absolute;
fill: #fff;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
bottom: 1vw;
left: 1vw;
}
.fa {
opacity: 0;
transition: opacity 1s;
color: white;
text-decoration: none;
font-size: 1.5vw;
border-radius: 25%;
padding: 0.5vw;
margin: 0.1vw 0;
transform: scale(1);
transition: transform 0.4s cubic-bezier(0.34, 5, 0.64, 1);
}
.fa:hover {
background: red;
color: black;
transform: scale(1.5);
}
/* My social media links (Dismiss this) */
/* ______ _____ _ ______
/ / / / | ___|__ ___ | |_ ___ _ __ / / / /
/ / / / | |_ / _ \ / _ \| __/ _ \ '__| / / / /
/ / / / | _| (_) | (_) | || __/ | / / / /
/_/_/_/ |_| \___/ \___/ \__\___|_| /_/_/_/ */
/*Footer*/
footer {
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 0.1rem 0.4rem 0 rgba(0, 0, 0, 1);
border-top: solid 1px #fff;
position: fixed;
bottom: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
backdrop-filter: blur(10px);
z-index: 1000;
}
/* Social Icons */
.social {
bottom: 1em;
display: flex;
padding: 0.3rem 0.6rem 0.3rem 0.3rem;
}
.socialicon {
margin: 0 10px;
color: #313131;
font-size: 1.8rem;
transform: scale(1.5);
transition: transform 150ms ease;
transform: scale(0.8);
}
.socialicon:hover {
transform: scale(2);
}
/* Website Branding */
.website {
font-family: "Jost", Helvetica, Arial, sans-serif, system-ui;
font-size: 1.5em;
font-weight: 700;
letter-spacing: -0.1rem;
color: #313131;
padding: 0 0 0 20px;
}
.website a {
text-decoration: none;
transition: transform 150ms ease;
color: #313131;
}
.website a:hover {
transform: scale(1.3);
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.