Alvaro Montoro - DEV Community

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Alvaro Montoro - DEV Community</title> <meta name="last-updated" content="2024-12-04 19:33:59 UTC"> <meta name="user-signed-in" content="false"> <meta name="head-cached-at" content="1733340839"> <meta name="environment" content="production"> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-6206ee9219dabd8e1168cebeb1f34c12ab133f7723e45d4b24dd76b43fee1fbc.css" media="all" id="main-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-4dd5770daa5d9d443ed73a724fb1913af9b093295bf1a72307f0fb322e5df1d9.css" media="all" id="main-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-f94476cf86ce9153627fd53a77e651ec54b82b6be20ddb1bf93e3dd40b81aeab.css" media="all" id="main-crayons-stylesheet" /> <script src="https://assets.dev.to/assets/base-e0fa4f0ebd0f1ec157e6b07c08f9222f8c0cca3d10cfde4cd8c951b43985b10b.js" defer="defer"></script> <script src="https://assets.dev.to/assets/application-147cebefc5c4cddde055e8f5eb0055e811469b08405170e2411fbd7944b5ac04.js" defer="defer"></script> <script src="https://assets.dev.to/assets/baseInitializers-bc498cfd7bb7d2a2da59d68d0b2055cc2dd26fee3669ab88edbb396d37bc3369.js" defer="defer"></script> <script src="https://assets.dev.to/assets/baseTracking-b6bf73e5ee66633e151e7d5b7c6bbccedfa4c59e3615be97b98c4c0f543ddae7.js" defer="defer"></script> <meta name="search-script" content="https://assets.dev.to/assets/Search-cc5e8a352578866203771def747f37c3ec6a0869de0458328e0fcba3d5d2fceb.js"> <link rel="canonical" href="https://dev.to/alvaromontoro" /> <meta name="description" content="CSS aficionado ⊆ Web Developer ⊆ Software Developer ⊆ Person (He/Him)"> <meta name="keywords" content="software development, engineering, rails, javascript, ruby"> <meta property="og:type" content="website" /> <meta property="og:url" content="https://dev.to/alvaromontoro" /> <meta property="og:title" content="Alvaro Montoro — DEV Community Profile" /> <meta property="og:image" content="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3otvb2z646ytpt1hl2rv.jpg" /> <meta property="og:description" content="CSS aficionado ⊆ Web Developer ⊆ Software Developer ⊆ Person (He/Him)" /> <meta property="og:site_name" content="DEV Community" /> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@thepracticaldev"> <meta name="twitter:creator" content="@alvaro_montoro"> <meta name="twitter:title" content="Alvaro Montoro — DEV Community Profile"> <meta name="twitter:description" content="CSS aficionado ⊆ Web Developer ⊆ Software Developer ⊆ Person (He/Him)"> <meta name="twitter:image:src" content="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3otvb2z646ytpt1hl2rv.jpg" /> <link rel="alternate" type="application/rss+xml" title="DEV Community RSS Feed" href="https://dev.to/feed/alvaromontoro" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <link rel="icon" type="image/x-icon" href="https://media2.dev.to/dynamic/image/width=32,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" /> <link rel="apple-touch-icon" href="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://media2.dev.to/dynamic/image/width=152,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="167x167" href="https://media2.dev.to/dynamic/image/width=167,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link href="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" rel="icon" sizes="192x192" /> <link href="https://media2.dev.to/dynamic/image/width=128,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" rel="icon" sizes="128x128" /> <meta name="apple-mobile-web-app-title" content="dev.to"> <meta name="application-name" content="dev.to"> <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)"> <link rel="search" href="https://dev.to/open-search.xml" type="application/opensearchdescription+xml" title="DEV Community" /> <meta property="forem:name" content="DEV Community" /> <meta property="forem:logo" content="https://media2.dev.to/dynamic/image/width=512,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" /> <meta property="forem:domain" content="dev.to" /> </head> <body class="sans-serif-article-body default-header" data-user-status="logged-out" data-community-name="DEV Community" data-subscription-icon="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" data-locale="en" data-honeybadger-key="hbp_nqu4Y66HuEKlD6YRGssZuRQnPOjDm50J8Zkr" data-deployed-at="2024-12-04T18:12:50Z" data-latest-commit-id="5be0fcd5073d00198ab345738b2b3ebe3918f66a" data-ga-tracking="UA-71991109-1" data-cookie-banner-user-context="logged_out_only" data-cookie-banner-platform-context="off" data-algolia-id="PRSOBFP46H" data-algolia-search-key="9aa7d31610cba78851c9b1f63776a9dd" data-algolia-display="true" data-ga4-tracking-id="G-TYEM8Y3JN3"> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-6206ee9219dabd8e1168cebeb1f34c12ab133f7723e45d4b24dd76b43fee1fbc.css" media="all" id="secondary-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-4dd5770daa5d9d443ed73a724fb1913af9b093295bf1a72307f0fb322e5df1d9.css" media="all" id="secondary-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-f94476cf86ce9153627fd53a77e651ec54b82b6be20ddb1bf93e3dd40b81aeab.css" media="all" id="secondary-crayons-stylesheet" /> <div id="body-styles"> <style> :root { --accent-brand-lighter-rgb: 80, 99, 301; --accent-brand-rgb: 59, 73, 223; --accent-brand-darker-rgb: 47, 58, 178; } </style> </div> <div id="audiocontent" data-podcast=""> </div> <div class="navigation-progress" id="navigation-progress"></div> <header id="topbar" class="crayons-header topbar print-hidden"> <span id="route-change-target" tabindex="-1"></span> <a href="#main-content" class="skip-content-link">Skip to content</a> <div class="crayons-header__container"> <span class="inline-block m:hidden "> <button class="c-btn c-btn--icon-alone js-hamburger-trigger mx-2"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ai24p8ptlj7yhbvf9nku7ja3cep18klh" class="crayons-icon"><title id="ai24p8ptlj7yhbvf9nku7ja3cep18klh">Navigation menu</title> <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"></path> </svg> </button> </span> <a href="/" class="site-logo" aria-label="DEV Community Home"> <img class="site-logo__img" src="https://media2.dev.to/dynamic/image/quality=100/https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png" style="aspect-ratio: 10 / 8" alt="DEV Community"> </a> <div class="crayons-header--search js-search-form" id="header-search"> <form accept-charset="UTF-8" method="get" action="/search" role="search"> <div class="crayons-fields crayons-fields--horizontal"> <div class="crayons-field flex-1 relative"> <input id="search-input" class="crayons-header--search-input crayons-textfield js-search-input" type="text" id="nav-search" name="q" placeholder="Search..." autocomplete="off" /> <button type="submit" aria-label="Search" class="c-btn c-btn--icon-alone absolute inset-px right-auto mt-0 py-0"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ajchgffwey3ybcjcwajmoh0b1c667zuk" aria-hidden="true" class="crayons-icon"><title id="ajchgffwey3ybcjcwajmoh0b1c667zuk">Search</title> <path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0111 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 01-1.969 5.617zm-2.006-.742A6.977 6.977 0 0018 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 004.875-1.975l.15-.15z"></path> </svg> </button> <a class="crayons-header--search-brand-indicator" href="https://www.algolia.com/developers/?utm_source=devto&utm_medium=referral" target="_blank" rel="noopener noreferrer"> Powered by <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" width="24" height="24" viewBox="0 0 500 500.34" role="img" aria-labelledby="a5zx31sk80paov7wb9spmjp61h91snbw" aria-hidden="true" class="crayons-icon"><title id="a5zx31sk80paov7wb9spmjp61h91snbw">Search</title> <defs></defs><path class="cls-1" d="M250,0C113.38,0,2,110.16,.03,246.32c-2,138.29,110.19,252.87,248.49,253.67,42.71,.25,83.85-10.2,120.38-30.05,3.56-1.93,4.11-6.83,1.08-9.52l-23.39-20.74c-4.75-4.22-11.52-5.41-17.37-2.92-25.5,10.85-53.21,16.39-81.76,16.04-111.75-1.37-202.04-94.35-200.26-206.1,1.76-110.33,92.06-199.55,202.8-199.55h202.83V407.68l-115.08-102.25c-3.72-3.31-9.43-2.66-12.43,1.31-18.47,24.46-48.56,39.67-81.98,37.36-46.36-3.2-83.92-40.52-87.4-86.86-4.15-55.28,39.65-101.58,94.07-101.58,49.21,0,89.74,37.88,93.97,86.01,.38,4.28,2.31,8.28,5.53,11.13l29.97,26.57c3.4,3.01,8.8,1.17,9.63-3.3,2.16-11.55,2.92-23.6,2.07-35.95-4.83-70.39-61.84-127.01-132.26-131.35-80.73-4.98-148.23,58.18-150.37,137.35-2.09,77.15,61.12,143.66,138.28,145.36,32.21,.71,62.07-9.42,86.2-26.97l150.36,133.29c6.45,5.71,16.62,1.14,16.62-7.48V9.49C500,4.25,495.75,0,490.51,0H250Z"></path> </svg> Algolia </a> </div> </div> </form> </div> <div class="flex items-center h-100 ml-auto"> <a class="c-link c-link--icon-alone c-link--block m:hidden mx-1" id="search-link" aria-label="Search" href="/search"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a34v9hjumizihcvmouhl7f49wr7mka26" class="crayons-icon"><title id="a34v9hjumizihcvmouhl7f49wr7mka26">Search</title> <path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0111 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 01-1.969 5.617zm-2.006-.742A6.977 6.977 0 0018 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 004.875-1.975l.15-.15z"></path> </svg> </a> <div class="flex" id="authentication-top-nav-actions"> <span class="hidden m:block"> <a href="/enter" class="c-link c-link--block mr-2 whitespace-nowrap ml-auto" data-no-instant> Log in </a> </span> <a href="/enter?state=new-user" data-tracking-id="ca_top_nav" data-tracking-source="top_navbar" class="c-cta c-cta--branded whitespace-nowrap mr-2" data-no-instant> Create account </a> </div> </div> </div> </header> <div class="hamburger"> <div class="hamburger__content"> <header class="hamburger__content__header"> <h2 class="fs-l fw-bold flex-1 break-word lh-tight">DEV Community</h2> <button class="c-btn c-btn--icon-alone js-hamburger-trigger shrink-0" aria-label="Close"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a7lrmke11xzv0ievxsb08yhb1lmbht55" aria-hidden="true" class="crayons-icon c-btn__icon"><title id="a7lrmke11xzv0ievxsb08yhb1lmbht55">Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </button> </header> <div class="p-2 js-navigation-links-container" id="authentication-hamburger-actions"> </div> </div> <div class="hamburger__overlay js-hamburger-trigger"></div> </div> <div id="active-broadcast" class="broadcast-wrapper"></div> <div id="page-content" class="wrapper stories stories-index" data-current-page="stories-index"> <div id="page-content-inner" data-internal-nav="false"> <div id="page-route-change" class="screen-reader-only" aria-live="polite" aria-atomic="true"></div> <main id="main-content"> <script type="application/ld+json"> {"@context":"http://schema.org","@type":"Person","mainEntityOfPage":{"@type":"WebPage","@id":"https://dev.to/alvaromontoro"},"url":"https://dev.to/alvaromontoro","sameAs":["https://twitter.com/alvaro_montoro","https://github.com/alvaromontoro","https://alvaromontoro.com"],"image":"https://media2.dev.to/dynamic/image/width=320,height=320,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg","name":"Alvaro Montoro","description":"CSS aficionado ⊆ Web Developer ⊆ Software Developer ⊆ Person\n\n(He/Him)"} </script> <style> :root { --profile-brand-color: #96c2c2; } </style> <div class="brand-bg"> <div class="crayons-layout crayons-layout--limited-l pt-7 m:pt-9"> <header class="profile-header crayons-card mt-2"> <div class="relative profile-header__top"> <span class="crayons-avatar crayons-avatar--3xl"> <img src="https://media2.dev.to/dynamic/image/width=320,height=320,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" width="128" height="128" alt="Alvaro Montoro profile picture" class="crayons-avatar__image"> </span> <div class="profile-header__actions"> <button id="user-follow-butt" class="crayons-btn whitespace-nowrap follow-action-button follow-user" data-info='{"id":161327,"className":"User","name":"Alvaro Montoro"}'>Follow</button> <div class="profile-dropdown ml-2 s:relative hidden" data-username="alvaromontoro"> <button id="user-profile-dropdown" aria-expanded="false" aria-controls="user-profile-dropdownmenu" aria-haspopup="true" class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="apttvey2e5ew2pn57g4kt8249lfahqed" class="crayons-icon dropdown-icon"><title id="apttvey2e5ew2pn57g4kt8249lfahqed">User actions</title><path fill-rule="evenodd" clip-rule="evenodd" d="M7 12a2 2 0 11-4 0 2 2 0 014 0zm7 0a2 2 0 11-4 0 2 2 0 014 0zm5 2a2 2 0 100-4 2 2 0 000 4z"></path></svg> </button> <div id="user-profile-dropdownmenu" class="crayons-dropdown left-2 right-2 s:right-0 s:left-auto top-100 mt-1"> <span class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/alvaromontoro"></span> </div> </div> </div> </div> <div class="profile-header__details" data-url="/users/161327"> <div class="items-center js-username-container mb-2"> <h1 class="crayons-title lh-tight"> Alvaro Montoro <span class="ml-2"></span> </h1> </div> <p class="fs-base profile-header__bio m:fs-l color-base-90 mb-4 mx-auto max-w-100 m:max-w-75">CSS aficionado ⊆ Web Developer ⊆ Software Developer ⊆ Person (He/Him)</p> <div class="profile-header__meta"> <span class="profile-header__meta__item"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ahf3b4jckdx810eqti0cqxyqwtln5cia" class="crayons-icon mr-2 shrink-0"><title id="ahf3b4jckdx810eqti0cqxyqwtln5cia">Location</title> <path d="M18.364 17.364L12 23.728l-6.364-6.364a9 9 0 1112.728 0zM12 13a2 2 0 100-4 2 2 0 000 4z"></path> </svg> <span> Austin, TX </span> </span> <span class="profile-header__meta__item"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="amv9ihwimq7jd38rszoa521em2xxblgw" class="crayons-icon mr-2 shrink-0"><title id="amv9ihwimq7jd38rszoa521em2xxblgw">Joined</title> <path d="M8 6v3.999h3V6h2v3.999h3V6h2v3.999L19 10a3 3 0 012.995 2.824L22 13v1c0 1.014-.377 1.94-.999 2.645L21 21a1 1 0 01-1 1H4a1 1 0 01-1-1v-4.36a4.025 4.025 0 01-.972-2.182l-.022-.253L2 14v-1a3 3 0 012.824-2.995L5 10l1-.001V6h2zm11 6H5a1 1 0 00-.993.883L4 13v.971l.003.147a2 2 0 003.303 1.4c.363-.312.602-.744.674-1.218l.015-.153.005-.176c.036-1.248 1.827-1.293 1.989-.134l.01.134.004.147a2 2 0 003.992.031l.012-.282c.124-1.156 1.862-1.156 1.986 0l.012.282a2 2 0 003.99 0L20 14v-1a1 1 0 00-.883-.993L19 12zM7 1c1.32.871 1.663 2.088 1.449 2.888a1.5 1.5 0 11-2.898-.776C5.85 2.002 7 2.5 7 1zm5 0c1.32.871 1.663 2.088 1.449 2.888a1.5 1.5 0 01-2.898-.776C10.85 2.002 12 2.5 12 1zm5 0c1.32.871 1.663 2.088 1.449 2.888a1.5 1.5 0 01-2.898-.776C15.85 2.002 17 2.5 17 1z"></path> </svg> <span> Joined on <time datetime="2019-04-27T12:06:44Z" class="date">Apr 27, 2019</time> </span> </span> <a href="https://alvaromontoro.com" target="_blank" rel="noopener me " class="profile-header__meta__item"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ancsdfcui1x3qf10j0iqf9ga995bw1ml" class="crayons-icon mr-2 shrink-0"><title id="ancsdfcui1x3qf10j0iqf9ga995bw1ml">Personal website</title><path d="M10.667 8v1.333H7.333v7.334h7.334v-3.334H16v4a.666.666 0 01-.667.667H6.667A.666.666 0 016 17.333V8.667A.667.667 0 016.667 8h4zM18 6v5.333h-1.333V8.275l-5.196 5.196-.942-.942 5.194-5.196h-3.056V6H18z"></path></svg> <span> https://alvaromontoro.com </span> </a> <a href="https://github.com/alvaromontoro" target="_blank" rel="noopener me" class="profile-header__meta__item p-1"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="acznwt8fyc3ct4tfjw8rcfsyr2o7gyvb" class="crayons-icon shrink-0"><title id="acznwt8fyc3ct4tfjw8rcfsyr2o7gyvb">github website</title> <path d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 006.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.288-.6-1.175-1.025-1.413-.35-.187-.85-.65-.013-.662.788-.013 1.35.725 1.538 1.025.9 1.512 2.338 1.087 2.912.825.088-.65.35-1.087.638-1.337-2.225-.25-4.55-1.113-4.55-4.938 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.275.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 012.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0022 12c0-5.525-4.475-10-10-10z"></path> </svg> </a> <a href="https://twitter.com/alvaro_montoro" target="_blank" rel="noopener me" class="profile-header__meta__item p-1"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="am4xp52kofsve8u6pgk8ucoz8kon33yk" class="crayons-icon shrink-0"><title id="am4xp52kofsve8u6pgk8ucoz8kon33yk">twitter website</title> <path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"></path> </svg> </a> </div> </div> <div class="profile-header__bottom fs-base"> <div class="crayons-definition"> <strong class="crayons-definition__title"> <p>Work</p> </strong> <p class="crayons-definition__value"> <p>UI Manager / CSS Aficionado</p> </p> </div> </div> <div class="crayons-card crayons-card--secondary"> <div class="crayons-card__body"> <div class="grid gap-4 grid-cols-6 s:grid-cols-8 m:grid-cols-12 align-center items-center js-profile-badges"> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-1', overlay: true})" title="Top 7" class="js-profile-badge relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F1%2FPNGBadge-011222.png" alt="Top 7" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> <div class="badge-indicator" title="Alvaro Montoro earned this badge 13 times.">13</div> </div> <div id="badge-1" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F1%2FPNGBadge-011222.png" alt="Top 7 badge" title="Top 7" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">Top 7</h4> <p class="description">Awarded for having a post featured in the weekly "must-reads" list. 🙌</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-320', overlay: true})" title="Frontend Challenge Completion Badge" class="js-profile-badge relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F320%2FHeader_Draft-06.png" alt="Frontend Challenge Completion Badge" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> <div class="badge-indicator" title="Alvaro Montoro earned this badge 2 times.">2</div> </div> <div id="badge-320" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F320%2FHeader_Draft-06.png" alt="Frontend Challenge Completion Badge badge" title="Frontend Challenge Completion Badge" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">Frontend Challenge Completion Badge</h4> <p class="description">Awarded for completing at least one prompt in a Frontend Challenge. Thank you for participating! 💖</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-233', overlay: true})" title="Icebreaker" class="js-profile-badge relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F233%2FIce_Breaker_Badge-01__1_.png" alt="Icebreaker" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-233" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F233%2FIce_Breaker_Badge-01__1_.png" alt="Icebreaker badge" title="Icebreaker" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">Icebreaker</h4> <p class="description">This badge rewards those who regularly leave the first comment on other folks' posts, helping to "break the ice" and get discussions going.</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-91', overlay: true})" title="Five Year Club" class="js-profile-badge relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F91%2FVersion2-04.png" alt="Five Year Club" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-91" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F91%2FVersion2-04.png" alt="Five Year Club badge" title="Five Year Club" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">Five Year Club</h4> <p class="description">This badge celebrates the longevity of those who have been a registered member of the DEV Community for at least five years.</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-280', overlay: true})" title="Writing Debut" class="js-profile-badge relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F280%2FWriting_Streak_Badges-05.png" alt="Writing Debut" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-280" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F280%2FWriting_Streak_Badges-05.png" alt="Writing Debut badge" title="Writing Debut" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">Writing Debut</h4> <p class="description">Awarded for writing and sharing your first DEV post! Continue sharing your work to earn the 4 Week Writing Streak Badge.</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-75', overlay: true})" title="Four Year Club" class="js-profile-badge relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F75%2FVersion2-05.png" alt="Four Year Club" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-75" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F75%2FVersion2-05.png" alt="Four Year Club badge" title="Four Year Club" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">Four Year Club</h4> <p class="description">This badge celebrates the longevity of those who have been a registered member of the DEV Community for at least four years.</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-163', overlay: true})" title="8 Week Community Wellness Streak" class="js-profile-badge relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F163%2FCommunity_Wellness_Streak_Badge-04.png" alt="8 Week Community Wellness Streak" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-163" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F163%2FCommunity_Wellness_Streak_Badge-04.png" alt="8 Week Community Wellness Streak badge" title="8 Week Community Wellness Streak" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">8 Week Community Wellness Streak</h4> <p class="description">Consistency pays off! Be an active part of our community by posting at least 2 comments per week for 8 straight weeks. Earn the 16 Week Badge next.</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-212', overlay: true})" title="Trusted Member 2022" class="js-profile-badge relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F212%2FBadges-02.png" alt="Trusted Member 2022" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-212" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F212%2FBadges-02.png" alt="Trusted Member 2022 badge" title="Trusted Member 2022" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">Trusted Member 2022</h4> <p class="description">Awarded for being a trusted member in 2022.</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-162', overlay: true})" title="4 Week Community Wellness Streak" class="js-profile-badge relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F162%2FCommunity_Wellness_Streak_Badge-03.png" alt="4 Week Community Wellness Streak" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-162" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F162%2FCommunity_Wellness_Streak_Badge-03.png" alt="4 Week Community Wellness Streak badge" title="4 Week Community Wellness Streak" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">4 Week Community Wellness Streak</h4> <p class="description">Keep contributing to discussions by posting at least 2 comments per week for 4 straight weeks. Unlock the 8 Week Badge next.</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-161', overlay: true})" title="2 Week Community Wellness Streak" class="js-profile-badge relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F161%2FCommunity_Wellness_Streak_Badge-02.png" alt="2 Week Community Wellness Streak" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-161" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F161%2FCommunity_Wellness_Streak_Badge-02.png" alt="2 Week Community Wellness Streak badge" title="2 Week Community Wellness Streak" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">2 Week Community Wellness Streak</h4> <p class="description">Keep the community conversation going! Post at least 2 comments for 2 straight weeks and unlock the 4 Week Badge.</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-160', overlay: true})" title="1 Week Community Wellness Streak" class="js-profile-badge relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F160%2FCommunity_Wellness_Streak_Badge-01.png" alt="1 Week Community Wellness Streak" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-160" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F160%2FCommunity_Wellness_Streak_Badge-01.png" alt="1 Week Community Wellness Streak badge" title="1 Week Community Wellness Streak" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">1 Week Community Wellness Streak</h4> <p class="description">For actively engaging with the community by posting at least 2 comments in a single week.</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-10', overlay: true})" title="Three Year Club" class="js-profile-badge relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F10%2FVersion2-06.png" alt="Three Year Club" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-10" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F10%2FVersion2-06.png" alt="Three Year Club badge" title="Three Year Club" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">Three Year Club</h4> <p class="description">This badge celebrates the longevity of those who have been a registered member of the DEV Community for at least three years.</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-9', overlay: true})" title="Two Year Club" class="js-profile-badge hidden relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F9%2FVersion2-07.png" alt="Two Year Club" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-9" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F9%2FVersion2-07.png" alt="Two Year Club badge" title="Two Year Club" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">Two Year Club</h4> <p class="description">This badge celebrates the longevity of those who have been a registered member of the DEV Community for at least two years.</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-92', overlay: true})" title="Participant — DigitalOcean App Platform Hackathon on DEV" class="js-profile-badge hidden relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F92%2FImage_from_iOS__3_.png" alt="Participant — DigitalOcean App Platform Hackathon on DEV" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-92" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F92%2FImage_from_iOS__3_.png" alt="Participant — DigitalOcean App Platform Hackathon on DEV badge" title="Participant — DigitalOcean App Platform Hackathon on DEV" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">Participant — DigitalOcean App Platform Hackathon on DEV</h4> <p class="description">Awarded to everyone who participated in the 2020 DigitalOcean App Platform Hackathon on DEV. Congrats, y'all!</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-14', overlay: true})" title="16 Week Writing Streak" class="js-profile-badge hidden relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F14%2FWriting_Streak_Badges-04.png" alt="16 Week Writing Streak" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-14" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F14%2FWriting_Streak_Badges-04.png" alt="16 Week Writing Streak badge" title="16 Week Writing Streak" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">16 Week Writing Streak</h4> <p class="description">You are a writing star! You've written at least one post per week for 16 straight weeks. Congratulations!</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-80', overlay: true})" title="Hacktoberfest 2020" class="js-profile-badge hidden relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F80%2Fhacktoberfest2020-badge_2.png" alt="Hacktoberfest 2020" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-80" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F80%2Fhacktoberfest2020-badge_2.png" alt="Hacktoberfest 2020 badge" title="Hacktoberfest 2020" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">Hacktoberfest 2020</h4> <p class="description">Awarded for successful completion of the 2020 Hacktoberfest challenge.</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-74', overlay: true})" title="Codeland:Distributed 2020" class="js-profile-badge hidden relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F74%2Fcodeland-badge.png" alt="Codeland:Distributed 2020" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-74" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F74%2Fcodeland-badge.png" alt="Codeland:Distributed 2020 badge" title="Codeland:Distributed 2020" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">Codeland:Distributed 2020</h4> <p class="description">Awarded for attending CodeLand:Distributed 2020! </p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-2', overlay: true})" title="One Year Club" class="js-profile-badge hidden relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F2%2FVersion2-08.png" alt="One Year Club" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-2" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F2%2FVersion2-08.png" alt="One Year Club badge" title="One Year Club" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">One Year Club</h4> <p class="description">This badge celebrates the longevity of those who have been a registered member of the DEV Community for at least one year.</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-12', overlay: true})" title="8 Week Writing Streak" class="js-profile-badge hidden relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F12%2FWriting_Streak_Badges-03.png" alt="8 Week Writing Streak" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-12" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F12%2FWriting_Streak_Badges-03.png" alt="8 Week Writing Streak badge" title="8 Week Writing Streak" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">8 Week Writing Streak</h4> <p class="description">The streak continues! You've written at least one post per week for 8 consecutive weeks. Unlock the 16-week badge next!</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-18', overlay: true})" title="CSS" class="js-profile-badge hidden relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F18%2F57795357-be29b880-7713-11e9-9748-b08c782b58d7.png" alt="CSS" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-18" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F18%2F57795357-be29b880-7713-11e9-9748-b08c782b58d7.png" alt="CSS badge" title="CSS" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">CSS</h4> <p class="description">Awarded to the top CSS author each week</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-31', overlay: true})" title="Hacktoberfest 2019" class="js-profile-badge hidden relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F31%2Fhacktoberfeststicker-01_copy.png" alt="Hacktoberfest 2019" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-31" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F31%2Fhacktoberfeststicker-01_copy.png" alt="Hacktoberfest 2019 badge" title="Hacktoberfest 2019" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">Hacktoberfest 2019</h4> <p class="description">Awarded for successful completion of the 2019 Hacktoberfest challenge.</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-8', overlay: true})" title="Fab 5" class="js-profile-badge hidden relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F8%2Ffab-five.png" alt="Fab 5" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-8" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F8%2Ffab-five.png" alt="Fab 5 badge" title="Fab 5" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">Fab 5</h4> <p class="description">Awarded for having at least one comment featured in the weekly "top 5 posts" list.</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-3', overlay: true})" title="Beloved Comment" class="js-profile-badge hidden relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F3%2FDiscussion_BAdges-03.png" alt="Beloved Comment" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-3" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F3%2FDiscussion_BAdges-03.png" alt="Beloved Comment badge" title="Beloved Comment" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">Beloved Comment</h4> <p class="description">Awarded for making a well-loved comment, as voted on with 25 heart (❤️) reactions by the community.</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-11', overlay: true})" title="4 Week Writing Streak" class="js-profile-badge hidden relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F11%2FWriting_Streak_Badges-02.png" alt="4 Week Writing Streak" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-11" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F11%2FWriting_Streak_Badges-02.png" alt="4 Week Writing Streak badge" title="4 Week Writing Streak" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">4 Week Writing Streak</h4> <p class="description">You've posted at least one post per week for 4 consecutive weeks!</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </div> </div> </div> </div> <button type="button" class="crayons-btn crayons-btn--ghost-brand crayons-btn--s w-100 mt-3 js-profile-badges-trigger"> Show all 37 badges </button> </div> </div> <div class="p-3 block m:hidden js-user-info-trigger-wrapper"> <button type="button" class="my-3 crayons-btn crayons-btn--outlined w-100 js-user-info-trigger">More info about @alvaromontoro</button> </div> </header> </div> </div> <div class="crayons-layout crayons-layout--limited-l crayons-layout--2-cols crayons-layout--2-cols--1-2 pt-4 m:pt-0" id="index-container" data-params="{"user_id":161327,"class_name":"Article","sort_by":"published_at","sort_direction":"desc"}" data-which="articles" data-tag="" data-feed="base-feed" data-articles-since="0"> <div class="crayons-layout__sidebar-left crayons-layout__content"> <div class="m:gap-4 hidden m:grid js-user-info"> <div class="crayons-card crayons-card--secondary"> <header class="crayons-card__header"> <h3 class="crayons-subtitle-3 flex items-center">GitHub Repositories</h3> </header> <div> <a href="https://github.com/alvaromontoro/almond.css" target="_blank" rel="noopener" class="crayons-link crayons-link--contentful"> <p class="fw-bold flex items-center"> almond.css </p> <p class="fs-s color-base-80 mb-1">Collection of CSS styles to make simple websites look nicer</p> <p class="fs-s color-base-60 flex items-center"> JavaScript <span class="opacity-50 inline-block px-1">•</span> 1131 stars </p> </a> <a href="https://github.com/alvaromontoro/gamecontroller.js" target="_blank" rel="noopener" class="crayons-link crayons-link--contentful"> <p class="fw-bold flex items-center"> gamecontroller.js </p> <p class="fs-s color-base-80 mb-1">A JavaScript library that lets you handle, configure, and use gamepads and controllers on a browser, using the Gamepad API</p> <p class="fs-s color-base-60 flex items-center"> JavaScript <span class="opacity-50 inline-block px-1">•</span> 237 stars </p> </a> <a href="https://github.com/alvaromontoro/CSS-Games" target="_blank" rel="noopener" class="crayons-link crayons-link--contentful"> <p class="fw-bold flex items-center"> CSS-Games </p> <p class="fs-s color-base-80 mb-1">Games and Apps developed using CSS and HTML, without a single line of JavaScript</p> <p class="fs-s color-base-60 flex items-center"> CSS <span class="opacity-50 inline-block px-1">•</span> 62 stars </p> </a> <a href="https://github.com/alvaromontoro/CSS-Simpsons" target="_blank" rel="noopener" class="crayons-link crayons-link--contentful"> <p class="fw-bold flex items-center"> CSS-Simpsons </p> <p class="fs-s color-base-80 mb-1">Drawings of The Simpsons characters done using only HTML and CSS</p> <p class="fs-s color-base-60 flex items-center"> CSS <span class="opacity-50 inline-block px-1">•</span> 43 stars </p> </a> <a href="https://github.com/alvaromontoro/gamepad-simulator" target="_blank" rel="noopener" class="crayons-link crayons-link--contentful"> <p class="fw-bold flex items-center"> gamepad-simulator </p> <p class="fs-s color-base-80 mb-1">A JS simulator for the Gamepad API</p> <p class="fs-s color-base-60 flex items-center"> JavaScript <span class="opacity-50 inline-block px-1">•</span> 27 stars </p> </a> </div> </div> <div class="crayons-card crayons-card--secondary"> <header class="crayons-card__header"> <h3 class="crayons-subtitle-3"> <p>Skills/Languages</p> </h3> </header> <div class="crayons-card__body"> <p>JavaScript, HTML, CSS</p> </div> </div> <div class="crayons-card crayons-card--secondary"> <header class="crayons-card__header"> <h3 class="crayons-subtitle-3"> <p>Currently learning</p> </h3> </header> <div class="crayons-card__body"> <p>Web Accessibility.</p> </div> </div> <div class="crayons-card crayons-card--secondary"> <header class="crayons-card__header"> <h3 class="crayons-subtitle-3"> <p>Currently hacking on</p> </h3> </header> <div class="crayons-card__body"> <p>A library to handle game controllers connected to a browser: https://github.com/alvaromontoro/gamecontroller.js</p> </div> </div> <div class="crayons-card crayons-card--secondary"> <header class="crayons-card__header"> <h3 class="crayons-subtitle-3"> <p>Available for</p> </h3> </header> <div class="crayons-card__body"> <p>Coffee (in the Austin area)</p> </div> </div> <div class="crayons-card crayons-card--secondary p-4"> <div class="flex items-center mb-4"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a79d5ei2glyr5uhr2n94345mzf8yp44w" class="crayons-icon mr-3 color-base-50"><title id="a79d5ei2glyr5uhr2n94345mzf8yp44w">Post</title> <path d="M19 22H5a3 3 0 01-3-3V3a1 1 0 011-1h14a1 1 0 011 1v12h4v4a3 3 0 01-3 3zm-1-5v2a1 1 0 002 0v-2h-2zm-2 3V4H4v15a1 1 0 001 1h11zM6 7h8v2H6V7zm0 4h8v2H6v-2zm0 4h5v2H6v-2z"></path> </svg> 317 posts published </div> <div class="flex items-center mb-4"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="akdb1knari1meuy8wkvqh2w5twy6jzbs" class="crayons-icon mr-3 color-base-50"><title id="akdb1knari1meuy8wkvqh2w5twy6jzbs">Comment</title> <path d="M10 3h4a8 8 0 010 16v3.5c-5-2-12-5-12-11.5a8 8 0 018-8zm2 14h2a6 6 0 000-12h-4a6 6 0 00-6 6c0 3.61 2.462 5.966 8 8.48V17z"></path> </svg> 1042 comments written </div> <div class="flex items-center"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a29pqvz3s1y7s5nu0t8g8etzzk425afl" class="crayons-icon mr-3 color-base-50"><title id="a29pqvz3s1y7s5nu0t8g8etzzk425afl">Tag</title> <path d="M7.784 14l.42-4H4V8h4.415l.525-5h2.011l-.525 5h3.989l.525-5h2.011l-.525 5H20v2h-3.784l-.42 4H20v2h-4.415l-.525 5h-2.011l.525-5H9.585l-.525 5H7.049l.525-5H4v-2h3.784zm2.011 0h3.99l.42-4h-3.99l-.42 4z"></path> </svg> 8 tags followed </div> </div> </div> </div> <main class="crayons-layout__content articles-list" id="articles-list"> <div class="substories" id="substories"> <div class="crayons-story " data-feed-content-id="2108601" data-content-user-id="161327"> <a href="/alvaromontoro/alvaro-montoro-presents-fun-with-flags-with-css-5034" aria-labelledby="article-link-2108601" class="crayons-story__hidden-navigation-link">Alvaro Montoro Presents: Fun with Flags… with CSS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2108601" aria-controls="story-author-preview-content-2108601" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-2108601" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/alvaro-montoro-presents-fun-with-flags-with-css-5034" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-22T17:29:09Z">Nov 22</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732296549"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/alvaro-montoro-presents-fun-with-flags-with-css-5034" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxiskxmjhptsb0dnwdo6z.jpg" id="article-link-2108601"> Alvaro Montoro Presents: Fun with Flags… with CSS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/alvaro-montoro-presents-fun-with-flags-with-css-5034" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2108601" aria-label="Add a comment to post - Alvaro Montoro Presents: Fun with Flags… with CSS"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">16<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/alvaro-montoro-presents-fun-with-flags-with-css-5034#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Alvaro Montoro Presents: Fun with Flags… with CSS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ambz2yjamdy6f2lzebmruhn9loo4wlyf" class="crayons-icon"><title id="ambz2yjamdy6f2lzebmruhn9loo4wlyf">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 16 min read </small> </div> </div> </div> </div> </div> <div id="comments-locked-cta" class="crayons-card mt-2 m:mt-0 mb-2 m:p-8 p-4"> <div class="align-center"> <svg xmlns="http://www.w3.org/2000/svg" width="132" height="102" viewBox="0 0 132 102" fill="none" aria-hidden="true"> <g filter="url(#a)"> <rect y="6" width="128" height="92" rx="8" fill="url(#b)"></rect> <rect x=".5" y="6.5" width="127" height="91" rx="7.5" stroke="#171717"></rect> </g> <path d="M.5 14A7.5 7.5 0 0 1 8 6.5h112a7.5 7.5 0 0 1 7.5 7.5v11.5H.5V14Z" fill="url(#c)" stroke="#171717"></path> <path opacity=".2" d="M13 63h27v2H13v-2ZM13 70h21v2H13v-2ZM13 77h28v2H13v-2ZM13 84h24v2H13v-2Z" fill="#171717"></path> <g filter="url(#d)"> <circle cx="64" cy="24" r="24" fill="url(#e)"></circle> <circle cx="64" cy="24" r="23.571" stroke="#171717" stroke-width=".857"></circle> </g> <circle cx="64" cy="16.286" r="5.571" fill="url(#f)" stroke="#171717" stroke-width=".857"></circle> <path d="M75.571 33.03c0 1.32-.535 2.285-1.373 3.008-.854.736-2.033 1.23-3.306 1.552-2.545.645-5.319.569-6.174.525a5.576 5.576 0 0 0-.579 0c-.855.044-3.629.12-6.174-.525-1.273-.322-2.452-.816-3.305-1.552-.84-.723-1.374-1.688-1.374-3.009 0-3.077 1.237-5.424 3.228-7.012 2-1.596 4.792-2.446 7.915-2.446 3.122 0 5.913.85 7.915 2.446 1.99 1.588 3.227 3.936 3.227 7.012Z" fill="url(#g)" stroke="#171717" stroke-width=".857"></path> <path d="M49.5 64a3.5 3.5 0 0 1 3.5-3.5h64a3.5 3.5 0 0 1 3.5 3.5v33.5h-71V64Z" fill="url(#h)" stroke="#171717"></path> <circle cx="59" cy="72" r="3.5" fill="#A7F3D0" stroke="#171717"></circle> <path fill="#171717" d="M66 71h20v2H66z"></path> <path opacity=".2" d="M66 80h30v2H66v-2ZM66 87h44v2H66v-2Z" fill="#171717"></path> <defs> <linearGradient id="b" x1="64" y1="6" x2="64" y2="98" gradientUnits="userSpaceOnUse"> <stop offset=".736" stop-color="#fff"></stop> <stop offset="1" stop-color="#D7D7D7"></stop> </linearGradient> <linearGradient id="c" x1="64" y1="6" x2="64" y2="98" gradientUnits="userSpaceOnUse"> <stop offset=".736" stop-color="#fff"></stop> <stop offset="1" stop-color="#D7D7D7"></stop> </linearGradient> <linearGradient id="e" x1="64" y1="0" x2="64" y2="48" gradientUnits="userSpaceOnUse"> <stop stop-color="#FFE89E"></stop> <stop offset="1" stop-color="#FFC50A"></stop> </linearGradient> <linearGradient id="f" x1="64" y1="10.286" x2="64" y2="23.623" gradientUnits="userSpaceOnUse"> <stop offset=".292" stop-color="#fff"></stop> <stop offset="1" stop-color="#E7E7E7"></stop> </linearGradient> <linearGradient id="g" x1="64.429" y1="23.143" x2="64.429" y2="40.291" gradientUnits="userSpaceOnUse"> <stop offset=".292" stop-color="#fff"></stop> <stop offset="1" stop-color="#E7E7E7"></stop> </linearGradient> <linearGradient id="h" x1="85" y1="52" x2="85" y2="114" gradientUnits="userSpaceOnUse"> <stop offset=".292" stop-color="#fff"></stop> <stop offset="1" stop-color="#E7E7E7"></stop> </linearGradient> <filter id="a" x="0" y="6" width="132" height="96" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood> <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix> <feOffset dx="4" dy="4"></feOffset> <feComposite in2="hardAlpha" operator="out"></feComposite> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"></feColorMatrix> <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_811_2367"></feBlend> <feBlend in="SourceGraphic" in2="effect1_dropShadow_811_2367" result="shape"></feBlend> </filter> <filter id="d" x="40" y="0" width="51.429" height="51.429" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood> <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix> <feOffset dx="3.429" dy="3.429"></feOffset> <feComposite in2="hardAlpha" operator="out"></feComposite> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"></feColorMatrix> <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_811_2367"></feBlend> <feBlend in="SourceGraphic" in2="effect1_dropShadow_811_2367" result="shape"></feBlend> </filter> </defs> </svg> </div> <h3 class="crayons-subtitle-3 mt-5 fs-l align-center"> Want to connect with Alvaro Montoro? </h3> <p class="align-center mt-1 color-base-60 fs-base"> Create an account to connect with Alvaro Montoro. You can also sign in below to proceed if you already have an account. </p> <div class="align-center mt-4"> <a href="/enter?state=new-user" class="crayons-btn crayons-btn--l w-75" data-tracking-id="ca_profile_comment_section_locked" data-tracking-source="comments_locked_cta" data-no-instant> Create Account </a> </div> <div class="align-center mt-4"> <span> Already have an account? <a href="/enter" data-tracking-id="si_profile_comment_section_locked" data-tracking-source="comments_locked_cta"> Sign in </a> </span> </div> </div> <div class="crayons-story " data-feed-content-id="2112321" data-content-user-id="161327"> <a href="/alvaromontoro/drawing-togos-flag-with-css-33nh" aria-labelledby="article-link-2112321" class="crayons-story__hidden-navigation-link">Drawing Togo's Flag with CSS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2112321" aria-controls="story-author-preview-content-2112321" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-2112321" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/drawing-togos-flag-with-css-33nh" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-19T16:27:22Z">Nov 19</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732033642"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/drawing-togos-flag-with-css-33nh" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frb3s4yxmqfcl9ams3dkx.png" id="article-link-2112321"> Drawing Togo's Flag with CSS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/drawing-togos-flag-with-css-33nh" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2112321" aria-label="Add a comment to post - Drawing Togo's Flag with CSS"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">6<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/drawing-togos-flag-with-css-33nh#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Drawing Togo's Flag with CSS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="akb0qzce37606qdqxwrsp700l6icnuu" class="crayons-icon"><title id="akb0qzce37606qdqxwrsp700l6icnuu">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 2<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2075657" data-content-user-id="161327"> <a href="/alvaromontoro/10-cool-codepen-demos-october-2024-1li0" aria-labelledby="article-link-2075657" class="crayons-story__hidden-navigation-link">10 Cool CodePen Demos (October 2024)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2075657" aria-controls="story-author-preview-content-2075657" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-2075657" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/10-cool-codepen-demos-october-2024-1li0" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-04T03:25:45Z">Nov 4</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1730690745"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/10-cool-codepen-demos-october-2024-1li0" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfw3mg1mfnyng0ca29pp.png" id="article-link-2075657"> 10 Cool CodePen Demos (October 2024) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/10-cool-codepen-demos-october-2024-1li0" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2075657" aria-label="Add a comment to post - 10 Cool CodePen Demos (October 2024)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">7<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/10-cool-codepen-demos-october-2024-1li0#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Cool CodePen Demos (October 2024)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="amw0uyeu0smwa4y85ibhfdantbwb9cdy" class="crayons-icon"><title id="amw0uyeu0smwa4y85ibhfdantbwb9cdy">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2064562" data-content-user-id="161327"> <a href="/alvaromontoro/halloween-css-masks-and-logic-gates-42hh" aria-labelledby="article-link-2064562" class="crayons-story__hidden-navigation-link">Halloween, (CSS) Masks, and Logic Gates</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2064562" aria-controls="story-author-preview-content-2064562" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-2064562" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/halloween-css-masks-and-logic-gates-42hh" class="crayons-story__tertiary fs-xs"><time datetime="2024-10-29T13:10:05Z">Oct 29</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1730207405"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/halloween-css-masks-and-logic-gates-42hh" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6ofn69hgfimhj9xw6a55.png" id="article-link-2064562"> Halloween, (CSS) Masks, and Logic Gates </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/logic"><span class="crayons-tag__prefix">#</span>logic</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/halloween-css-masks-and-logic-gates-42hh" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2064562" aria-label="Add a comment to post - Halloween, (CSS) Masks, and Logic Gates"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">13<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/halloween-css-masks-and-logic-gates-42hh#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Halloween, (CSS) Masks, and Logic Gates"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a8dbrdsu8wq67sl4yqa7atfe5gmu8xj8" class="crayons-icon"><title id="a8dbrdsu8wq67sl4yqa7atfe5gmu8xj8">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 4<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2036657" data-content-user-id="161327"> <a href="/alvaromontoro/css-portrait-28jc" aria-labelledby="article-link-2036657" class="crayons-story__hidden-navigation-link">CSS Portrait</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2036657" aria-controls="story-author-preview-content-2036657" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-2036657" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/css-portrait-28jc" class="crayons-story__tertiary fs-xs"><time datetime="2024-10-13T16:06:01Z">Oct 13</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1728835561"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/css-portrait-28jc" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1csz14cjetkofcgutiac.png" id="article-link-2036657"> CSS Portrait </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/css-portrait-28jc" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2036657" aria-label="Add a comment to post - CSS Portrait"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">2<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/css-portrait-28jc#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - CSS Portrait"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a85lqm8nj8ekb41lldlcx54njmhsf8ll" class="crayons-icon"><title id="a85lqm8nj8ekb41lldlcx54njmhsf8ll">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2029461" data-content-user-id="161327"> <a href="/alvaromontoro/10-cool-codepen-demos-september-2024-1dj8" aria-labelledby="article-link-2029461" class="crayons-story__hidden-navigation-link">10 Cool CodePen Demos (September 2024)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2029461" aria-controls="story-author-preview-content-2029461" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-2029461" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/10-cool-codepen-demos-september-2024-1dj8" class="crayons-story__tertiary fs-xs"><time datetime="2024-10-08T00:21:22Z">Oct 8</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1728346882"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/10-cool-codepen-demos-september-2024-1dj8" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfw3mg1mfnyng0ca29pp.png" id="article-link-2029461"> 10 Cool CodePen Demos (September 2024) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/10-cool-codepen-demos-september-2024-1dj8" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2029461" aria-label="Add a comment to post - 10 Cool CodePen Demos (September 2024)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">2<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/10-cool-codepen-demos-september-2024-1dj8#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Cool CodePen Demos (September 2024)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="apaswna40a0qoyvbq11co22e2cfhj8ol" class="crayons-icon"><title id="apaswna40a0qoyvbq11co22e2cfhj8ol">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2017726" data-content-user-id="161327"> <a href="/alvaromontoro/bad-css-dad-jokes-iii-1ma6" aria-labelledby="article-link-2017726" class="crayons-story__hidden-navigation-link">Bad CSS-Dad Jokes (III)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2017726" aria-controls="story-author-preview-content-2017726" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-2017726" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/bad-css-dad-jokes-iii-1ma6" class="crayons-story__tertiary fs-xs"><time datetime="2024-09-27T20:45:19Z">Sep 27</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1727469919"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/bad-css-dad-jokes-iii-1ma6" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8zcjzdx7zdnx2yke7jed.png" id="article-link-2017726"> Bad CSS-Dad Jokes (III) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(208, 236, 255, 0.10); --tag-prefix: #D0ECFF; --tag-bg-hover: rgba(208, 236, 255, 0.10); --tag-prefix-hover: #D0ECFF; " href="/t/watercooler"><span class="crayons-tag__prefix">#</span>watercooler</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/bad-css-dad-jokes-iii-1ma6" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2017726" aria-label="Add a comment to post - Bad CSS-Dad Jokes (III)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">10<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/bad-css-dad-jokes-iii-1ma6#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Bad CSS-Dad Jokes (III)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="atk5cqpew5uwqa96ls30cx1xzhatx050" class="crayons-icon"><title id="atk5cqpew5uwqa96ls30cx1xzhatx050">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 4<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2011502" data-content-user-id="161327"> <a href="/alvaromontoro/bad-css-dad-jokes-ii-5d53" aria-labelledby="article-link-2011502" class="crayons-story__hidden-navigation-link">Bad CSS-Dad Jokes (II)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2011502" aria-controls="story-author-preview-content-2011502" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-2011502" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/bad-css-dad-jokes-ii-5d53" class="crayons-story__tertiary fs-xs"><time datetime="2024-09-23T15:00:07Z">Sep 23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1727103607"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/bad-css-dad-jokes-ii-5d53" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9m74iyvc3ntkk7w1kjlz.png" id="article-link-2011502"> Bad CSS-Dad Jokes (II) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(208, 236, 255, 0.10); --tag-prefix: #D0ECFF; --tag-bg-hover: rgba(208, 236, 255, 0.10); --tag-prefix-hover: #D0ECFF; " href="/t/watercooler"><span class="crayons-tag__prefix">#</span>watercooler</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/bad-css-dad-jokes-ii-5d53" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2011502" aria-label="Add a comment to post - Bad CSS-Dad Jokes (II)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">4<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/bad-css-dad-jokes-ii-5d53#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Bad CSS-Dad Jokes (II)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="alr078zys7rdlcapjnk3bejpup8cge31" class="crayons-icon"><title id="alr078zys7rdlcapjnk3bejpup8cge31">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2006831" data-content-user-id="161327"> <a href="/alvaromontoro/new-values-and-functions-in-css-1b9o" aria-labelledby="article-link-2006831" class="crayons-story__hidden-navigation-link">11 New Features and Functions Arriving in CSS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2006831" aria-controls="story-author-preview-content-2006831" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-2006831" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/new-values-and-functions-in-css-1b9o" class="crayons-story__tertiary fs-xs"><time datetime="2024-09-19T14:06:53Z">Sep 19</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1726754813"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/new-values-and-functions-in-css-1b9o" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkvthkzo9pmthdyucuf7n.png" id="article-link-2006831"> 11 New Features and Functions Arriving in CSS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(17, 17, 17, 0.10); --tag-prefix: #111111; --tag-bg-hover: rgba(17, 17, 17, 0.10); --tag-prefix-hover: #111111; " href="/t/news"><span class="crayons-tag__prefix">#</span>news</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/new-values-and-functions-in-css-1b9o" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2006831" aria-label="Add a comment to post - 11 New Features and Functions Arriving in CSS"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">119<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/new-values-and-functions-in-css-1b9o#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 11 New Features and Functions Arriving in CSS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ajlbgdklxq1kt05h7wrwyj4bxk4c5vcm" class="crayons-icon"><title id="ajlbgdklxq1kt05h7wrwyj4bxk4c5vcm">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 14<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 8 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1996088" data-content-user-id="161327"> <a href="/alvaromontoro/10-cool-codepen-demos-august-2024-5e5h" aria-labelledby="article-link-1996088" class="crayons-story__hidden-navigation-link">10 Cool CodePen Demos (August 2024)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1996088" aria-controls="story-author-preview-content-1996088" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1996088" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/10-cool-codepen-demos-august-2024-5e5h" class="crayons-story__tertiary fs-xs"><time datetime="2024-09-10T23:51:03Z">Sep 10</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1726012263"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/10-cool-codepen-demos-august-2024-5e5h" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfw3mg1mfnyng0ca29pp.png" id="article-link-1996088"> 10 Cool CodePen Demos (August 2024) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/10-cool-codepen-demos-august-2024-5e5h" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1996088" aria-label="Add a comment to post - 10 Cool CodePen Demos (August 2024)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">5<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/10-cool-codepen-demos-august-2024-5e5h#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Cool CodePen Demos (August 2024)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="abfg6p329xwrx13hhvdb1pfhhlqc82c8" class="crayons-icon"><title id="abfg6p329xwrx13hhvdb1pfhhlqc82c8">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1992557" data-content-user-id="161327"> <a href="/alvaromontoro/web-developers-ai-and-development-fundamentals-512n" aria-labelledby="article-link-1992557" class="crayons-story__hidden-navigation-link">Web Developers, AI, and Development Fundamentals</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1992557" aria-controls="story-author-preview-content-1992557" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1992557" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/web-developers-ai-and-development-fundamentals-512n" class="crayons-story__tertiary fs-xs"><time datetime="2024-09-08T22:15:37Z">Sep 8</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1725833737"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/web-developers-ai-and-development-fundamentals-512n" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Few8akgzxc3g0wfht59jj.png" id="article-link-1992557"> Web Developers, AI, and Development Fundamentals </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(208, 236, 255, 0.10); --tag-prefix: #D0ECFF; --tag-bg-hover: rgba(208, 236, 255, 0.10); --tag-prefix-hover: #D0ECFF; " href="/t/watercooler"><span class="crayons-tag__prefix">#</span>watercooler</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/opinion"><span class="crayons-tag__prefix">#</span>opinion</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/web-developers-ai-and-development-fundamentals-512n" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1992557" aria-label="Add a comment to post - Web Developers, AI, and Development Fundamentals"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">8<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/web-developers-ai-and-development-fundamentals-512n#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Web Developers, AI, and Development Fundamentals"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a1h76gnq1a26yto61zchphxzam3zl4a0" class="crayons-icon"><title id="a1h76gnq1a26yto61zchphxzam3zl4a0">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1992141" data-content-user-id="161327"> <a href="/alvaromontoro/sunrise-in-space-quiet-3nj" aria-labelledby="article-link-1992141" class="crayons-story__hidden-navigation-link">Sunrise in Space (Quiet)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1992141" aria-controls="story-author-preview-content-1992141" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1992141" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/sunrise-in-space-quiet-3nj" class="crayons-story__tertiary fs-xs"><time datetime="2024-09-08T16:28:50Z">Sep 8</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1725812930"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/sunrise-in-space-quiet-3nj" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frlvjgs7rcgszcal0yxwf.png" id="article-link-1992141"> Sunrise in Space (Quiet) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 112, 255, 0.10); --tag-prefix: #FF70FF; --tag-bg-hover: rgba(255, 112, 255, 0.10); --tag-prefix-hover: #FF70FF; " href="/t/frontendchallenge"><span class="crayons-tag__prefix">#</span>frontendchallenge</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(132, 206, 249, 0.10); --tag-prefix: #84CEF9; --tag-bg-hover: rgba(132, 206, 249, 0.10); --tag-prefix-hover: #84CEF9; " href="/t/devchallenge"><span class="crayons-tag__prefix">#</span>devchallenge</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/sunrise-in-space-quiet-3nj" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1992141" aria-label="Add a comment to post - Sunrise in Space (Quiet)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">44<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/sunrise-in-space-quiet-3nj#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Sunrise in Space (Quiet)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="al69qr5fqjjdnq9mbqzpunq5t55jckq" class="crayons-icon"><title id="al69qr5fqjjdnq9mbqzpunq5t55jckq">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 3<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1988416" data-content-user-id="161327"> <a href="/alvaromontoro/bad-css-dad-jokes-1cea" aria-labelledby="article-link-1988416" class="crayons-story__hidden-navigation-link">Bad CSS-Dad jokes</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1988416" aria-controls="story-author-preview-content-1988416" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1988416" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/bad-css-dad-jokes-1cea" class="crayons-story__tertiary fs-xs"><time datetime="2024-09-05T18:47:54Z">Sep 5</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1725562074"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/bad-css-dad-jokes-1cea" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fclop0eljb4sx5uo31a26.png" id="article-link-1988416"> Bad CSS-Dad jokes </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(208, 236, 255, 0.10); --tag-prefix: #D0ECFF; --tag-bg-hover: rgba(208, 236, 255, 0.10); --tag-prefix-hover: #D0ECFF; " href="/t/watercooler"><span class="crayons-tag__prefix">#</span>watercooler</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/bad-css-dad-jokes-1cea" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1988416" aria-label="Add a comment to post - Bad CSS-Dad jokes"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">21<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/bad-css-dad-jokes-1cea#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Bad CSS-Dad jokes"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a527ocuqv8jdtxxlpd3tjdn1d1lqa0fm" class="crayons-icon"><title id="a527ocuqv8jdtxxlpd3tjdn1d1lqa0fm">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 5<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1984604" data-content-user-id="161327"> <a href="/alvaromontoro/a-new-way-to-pay-creators-je4" aria-labelledby="article-link-1984604" class="crayons-story__hidden-navigation-link">A "New Way" to Pay Creators</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1984604" aria-controls="story-author-preview-content-1984604" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1984604" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/a-new-way-to-pay-creators-je4" class="crayons-story__tertiary fs-xs"><time datetime="2024-09-02T20:55:11Z">Sep 2</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1725310511"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/a-new-way-to-pay-creators-je4" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fut69mz21h1cpfh3qf5ts.png" id="article-link-1984604"> A "New Way" to Pay Creators </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/chrome"><span class="crayons-tag__prefix">#</span>chrome</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/extension"><span class="crayons-tag__prefix">#</span>extension</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/a-new-way-to-pay-creators-je4" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1984604" aria-label="Add a comment to post - A "New Way" to Pay Creators"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">10<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/a-new-way-to-pay-creators-je4#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - A "New Way" to Pay Creators"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ag17n4mjwtx7xky4dnii7hut8p6ebaef" class="crayons-icon"><title id="ag17n4mjwtx7xky4dnii7hut8p6ebaef">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 6<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1964537" data-content-user-id="161327"> <a href="/alvaromontoro/read-phone-contacts-with-javascript-1j2" aria-labelledby="article-link-1964537" class="crayons-story__hidden-navigation-link">Read Phone Contacts with JavaScript</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1964537" aria-controls="story-author-preview-content-1964537" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1964537" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/read-phone-contacts-with-javascript-1j2" class="crayons-story__tertiary fs-xs"><time datetime="2024-08-19T09:00:00Z">Aug 19</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1724058000"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/read-phone-contacts-with-javascript-1j2" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F32sl76r2ckmh9fvxg2uo.jpg" id="article-link-1964537"> Read Phone Contacts with JavaScript </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/read-phone-contacts-with-javascript-1j2" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1964537" aria-label="Add a comment to post - Read Phone Contacts with JavaScript"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">12<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/read-phone-contacts-with-javascript-1j2#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Read Phone Contacts with JavaScript"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aqxm7k4q83aerzrmmtnpf5z6wbjgn9k3" class="crayons-icon"><title id="aqxm7k4q83aerzrmmtnpf5z6wbjgn9k3">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 3<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 7 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1950157" data-content-user-id="161327"> <a href="/alvaromontoro/10-cool-codepen-demos-july-2024-594i" aria-labelledby="article-link-1950157" class="crayons-story__hidden-navigation-link">10 Cool CodePen Demos (July 2024)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1950157" aria-controls="story-author-preview-content-1950157" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1950157" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/10-cool-codepen-demos-july-2024-594i" class="crayons-story__tertiary fs-xs"><time datetime="2024-08-06T17:52:43Z">Aug 6</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1722966763"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/10-cool-codepen-demos-july-2024-594i" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfw3mg1mfnyng0ca29pp.png" id="article-link-1950157"> 10 Cool CodePen Demos (July 2024) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/10-cool-codepen-demos-july-2024-594i" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1950157" aria-label="Add a comment to post - 10 Cool CodePen Demos (July 2024)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">10<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/10-cool-codepen-demos-july-2024-594i#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Cool CodePen Demos (July 2024)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ahe48fgp1d6dtp4szcn8g6k2rsfsivck" class="crayons-icon"><title id="ahe48fgp1d6dtp4szcn8g6k2rsfsivck">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1947471" data-content-user-id="161327"> <a href="/alvaromontoro/the-ai-act-is-here-2l0l" aria-labelledby="article-link-1947471" class="crayons-story__hidden-navigation-link">The AI Act is Here</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1947471" aria-controls="story-author-preview-content-1947471" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1947471" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/the-ai-act-is-here-2l0l" class="crayons-story__tertiary fs-xs"><time datetime="2024-08-04T16:04:15Z">Aug 4</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1722787455"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/the-ai-act-is-here-2l0l" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjsp12pp5kvk4u5qkc54k.png" id="article-link-1947471"> The AI Act is Here </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(17, 17, 17, 0.10); --tag-prefix: #111111; --tag-bg-hover: rgba(17, 17, 17, 0.10); --tag-prefix-hover: #111111; " href="/t/news"><span class="crayons-tag__prefix">#</span>news</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(23, 253, 26, 0.10); --tag-prefix: #17fd1a; --tag-bg-hover: rgba(23, 253, 26, 0.10); --tag-prefix-hover: #17fd1a; " href="/t/ai"><span class="crayons-tag__prefix">#</span>ai</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/law"><span class="crayons-tag__prefix">#</span>law</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/the-ai-act-is-here-2l0l" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1947471" aria-label="Add a comment to post - The AI Act is Here"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">14<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/the-ai-act-is-here-2l0l#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - The AI Act is Here"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aomzc906hedsoa6h41680wcw3enkjt33" class="crayons-icon"><title id="aomzc906hedsoa6h41680wcw3enkjt33">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 6 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1917486" data-content-user-id="161327"> <a href="/alvaromontoro/batman-comiccss-hh1" aria-labelledby="article-link-1917486" class="crayons-story__hidden-navigation-link">Batman-Comic.CSS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1917486" aria-controls="story-author-preview-content-1917486" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1917486" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/batman-comiccss-hh1" class="crayons-story__tertiary fs-xs"><time datetime="2024-07-09T14:48:55Z">Jul 9</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1720536535"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/batman-comiccss-hh1" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcbnbydb74eyco2v65fbv.png" id="article-link-1917486"> Batman-Comic.CSS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/batman-comiccss-hh1" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1917486" aria-label="Add a comment to post - Batman-Comic.CSS"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">81<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/batman-comiccss-hh1#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Batman-Comic.CSS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aqe7tvukw4jfzsf88xdontakdunbbskf" class="crayons-icon"><title id="aqe7tvukw4jfzsf88xdontakdunbbskf">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 8<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 5 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1911739" data-content-user-id="161327"> <a href="/alvaromontoro/10-cool-codepen-demos-june-2024-hei" aria-labelledby="article-link-1911739" class="crayons-story__hidden-navigation-link">10 Cool CodePen Demos (June 2024)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1911739" aria-controls="story-author-preview-content-1911739" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1911739" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/10-cool-codepen-demos-june-2024-hei" class="crayons-story__tertiary fs-xs"><time datetime="2024-07-04T15:14:22Z">Jul 4</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1720106062"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/10-cool-codepen-demos-june-2024-hei" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfw3mg1mfnyng0ca29pp.png" id="article-link-1911739"> 10 Cool CodePen Demos (June 2024) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/10-cool-codepen-demos-june-2024-hei" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1911739" aria-label="Add a comment to post - 10 Cool CodePen Demos (June 2024)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">14<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/10-cool-codepen-demos-june-2024-hei#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Cool CodePen Demos (June 2024)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a53d8hds2iowu8b9ssqx4pe4vbst8qbq" class="crayons-icon"><title id="a53d8hds2iowu8b9ssqx4pe4vbst8qbq">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1909867" data-content-user-id="161327"> <a href="/alvaromontoro/css-one-liners-to-improve-almost-every-project-18m" aria-labelledby="article-link-1909867" class="crayons-story__hidden-navigation-link">CSS One-Liners to Improve (Almost) Every Project</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1909867" aria-controls="story-author-preview-content-1909867" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1909867" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/css-one-liners-to-improve-almost-every-project-18m" class="crayons-story__tertiary fs-xs"><time datetime="2024-07-03T09:18:50Z">Jul 3</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1719998330"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/css-one-liners-to-improve-almost-every-project-18m" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvwz130pfkgx462jzw3t7.png" id="article-link-1909867"> CSS One-Liners to Improve (Almost) Every Project </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/listicle"><span class="crayons-tag__prefix">#</span>listicle</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/css-one-liners-to-improve-almost-every-project-18m" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1909867" aria-label="Add a comment to post - CSS One-Liners to Improve (Almost) Every Project"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">586<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/css-one-liners-to-improve-almost-every-project-18m#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - CSS One-Liners to Improve (Almost) Every Project"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aoc035hqvax4ahridzx86yspx1epjon6" class="crayons-icon"><title id="aoc035hqvax4ahridzx86yspx1epjon6">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 47<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 6 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1908723" data-content-user-id="161327"> <a href="/alvaromontoro/css-surprise-manga-lines-5cib" aria-labelledby="article-link-1908723" class="crayons-story__hidden-navigation-link">CSS Surprise Manga Lines</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1908723" aria-controls="story-author-preview-content-1908723" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1908723" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/css-surprise-manga-lines-5cib" class="crayons-story__tertiary fs-xs"><time datetime="2024-07-02T10:14:59Z">Jul 2</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1719915299"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/css-surprise-manga-lines-5cib" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9tfiz66r7j3ua2llwb4s.jpg" id="article-link-1908723"> CSS Surprise Manga Lines </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/css-surprise-manga-lines-5cib" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1908723" aria-label="Add a comment to post - CSS Surprise Manga Lines"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">29<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/css-surprise-manga-lines-5cib#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - CSS Surprise Manga Lines"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ajepjot8cjlltb04mzalvt0hnwgb34ur" class="crayons-icon"><title id="ajepjot8cjlltb04mzalvt0hnwgb34ur">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 4<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1884166" data-content-user-id="161327"> <a href="/alvaromontoro/10-cool-codepen-demos-may-2024-1cpb" aria-labelledby="article-link-1884166" class="crayons-story__hidden-navigation-link">10 Cool CodePen Demos (May 2024)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1884166" aria-controls="story-author-preview-content-1884166" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1884166" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/10-cool-codepen-demos-may-2024-1cpb" class="crayons-story__tertiary fs-xs"><time datetime="2024-06-11T09:00:18Z">Jun 11</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1718096418"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/10-cool-codepen-demos-may-2024-1cpb" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfw3mg1mfnyng0ca29pp.png" id="article-link-1884166"> 10 Cool CodePen Demos (May 2024) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/10-cool-codepen-demos-may-2024-1cpb" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1884166" aria-label="Add a comment to post - 10 Cool CodePen Demos (May 2024)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">18<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/10-cool-codepen-demos-may-2024-1cpb#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Cool CodePen Demos (May 2024)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="att89yrh8oposk8bum55utwv608cm6e6" class="crayons-icon"><title id="att89yrh8oposk8bum55utwv608cm6e6">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 4<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1859512" data-content-user-id="161327"> <a href="/alvaromontoro/animated-navigation-menu-57o7" aria-labelledby="article-link-1859512" class="crayons-story__hidden-navigation-link">Animated Navigation Menu</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1859512" aria-controls="story-author-preview-content-1859512" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1859512" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/animated-navigation-menu-57o7" class="crayons-story__tertiary fs-xs"><time datetime="2024-05-20T16:15:51Z">May 20</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1716221751"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/animated-navigation-menu-57o7" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faypnkqmkgqtoghzk6vlb.png" id="article-link-1859512"> Animated Navigation Menu </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/animated-navigation-menu-57o7" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1859512" aria-label="Add a comment to post - Animated Navigation Menu"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">111<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/animated-navigation-menu-57o7#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Animated Navigation Menu"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="atmt7lxta5p70aafi4kqgnxs4b21xrby" class="crayons-icon"><title id="atmt7lxta5p70aafi4kqgnxs4b21xrby">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 25<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1848262" data-content-user-id="161327"> <a href="/alvaromontoro/10-cool-codepen-demos-april-2024-4a70" aria-labelledby="article-link-1848262" class="crayons-story__hidden-navigation-link">10 Cool CodePen Demos (April 2024)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1848262" aria-controls="story-author-preview-content-1848262" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1848262" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/10-cool-codepen-demos-april-2024-4a70" class="crayons-story__tertiary fs-xs"><time datetime="2024-05-10T04:38:23Z">May 10</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1715315903"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/10-cool-codepen-demos-april-2024-4a70" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfw3mg1mfnyng0ca29pp.png" id="article-link-1848262"> 10 Cool CodePen Demos (April 2024) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/10-cool-codepen-demos-april-2024-4a70" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1848262" aria-label="Add a comment to post - 10 Cool CodePen Demos (April 2024)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">23<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/10-cool-codepen-demos-april-2024-4a70#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Cool CodePen Demos (April 2024)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aje2za57q7ppupi4w6sjlxryuzgrn394" class="crayons-icon"><title id="aje2za57q7ppupi4w6sjlxryuzgrn394">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1848261" data-content-user-id="161327"> <a href="/alvaromontoro/10-cool-codepen-demos-march-2024-3ak8" aria-labelledby="article-link-1848261" class="crayons-story__hidden-navigation-link">10 Cool CodePen Demos (March 2024)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1848261" aria-controls="story-author-preview-content-1848261" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1848261" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/10-cool-codepen-demos-march-2024-3ak8" class="crayons-story__tertiary fs-xs"><time datetime="2024-05-10T04:33:35Z">May 10</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1715315615"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/10-cool-codepen-demos-march-2024-3ak8" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfw3mg1mfnyng0ca29pp.png" id="article-link-1848261"> 10 Cool CodePen Demos (March 2024) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/10-cool-codepen-demos-march-2024-3ak8" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1848261" aria-label="Add a comment to post - 10 Cool CodePen Demos (March 2024)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">27<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/10-cool-codepen-demos-march-2024-3ak8#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Cool CodePen Demos (March 2024)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="at80nveeqrfeixa5ihkogzpbhxtsix5" class="crayons-icon"><title id="at80nveeqrfeixa5ihkogzpbhxtsix5">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1806306" data-content-user-id="161327"> <a href="/alvaromontoro/interactive-3d-watermelon-c10" aria-labelledby="article-link-1806306" class="crayons-story__hidden-navigation-link">Interactive 3D Watermelon</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1806306" aria-controls="story-author-preview-content-1806306" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1806306" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/interactive-3d-watermelon-c10" class="crayons-story__tertiary fs-xs"><time datetime="2024-03-30T15:02:18Z">Mar 30</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1711810938"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/interactive-3d-watermelon-c10" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd60mx2l6n0db15lfba9t.png" id="article-link-1806306"> Interactive 3D Watermelon </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 112, 255, 0.10); --tag-prefix: #FF70FF; --tag-bg-hover: rgba(255, 112, 255, 0.10); --tag-prefix-hover: #FF70FF; " href="/t/frontendchallenge"><span class="crayons-tag__prefix">#</span>frontendchallenge</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(132, 206, 249, 0.10); --tag-prefix: #84CEF9; --tag-bg-hover: rgba(132, 206, 249, 0.10); --tag-prefix-hover: #84CEF9; " href="/t/devchallenge"><span class="crayons-tag__prefix">#</span>devchallenge</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/interactive-3d-watermelon-c10" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1806306" aria-label="Add a comment to post - Interactive 3D Watermelon"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">28<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/interactive-3d-watermelon-c10#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Interactive 3D Watermelon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ariewbeh246k5pebkos9ieffuhiiddjf" class="crayons-icon"><title id="ariewbeh246k5pebkos9ieffuhiiddjf">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 6<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1802685" data-content-user-id="161327"> <a href="/alvaromontoro/the-treachery-of-css-4664" aria-labelledby="article-link-1802685" class="crayons-story__hidden-navigation-link">The Treachery of CSS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1802685" aria-controls="story-author-preview-content-1802685" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1802685" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/the-treachery-of-css-4664" class="crayons-story__tertiary fs-xs"><time datetime="2024-03-27T05:18:00Z">Mar 27</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1711516680"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/the-treachery-of-css-4664" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm3fth8lh7r5756ecbe4b.png" id="article-link-1802685"> The Treachery of CSS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 112, 255, 0.10); --tag-prefix: #FF70FF; --tag-bg-hover: rgba(255, 112, 255, 0.10); --tag-prefix-hover: #FF70FF; " href="/t/frontendchallenge"><span class="crayons-tag__prefix">#</span>frontendchallenge</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(132, 206, 249, 0.10); --tag-prefix: #84CEF9; --tag-bg-hover: rgba(132, 206, 249, 0.10); --tag-prefix-hover: #84CEF9; " href="/t/devchallenge"><span class="crayons-tag__prefix">#</span>devchallenge</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/the-treachery-of-css-4664" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1802685" aria-label="Add a comment to post - The Treachery of CSS"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">19<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/the-treachery-of-css-4664#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - The Treachery of CSS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a2yzv0p7hhah6qgppa58md35zeuh5661" class="crayons-icon"><title id="a2yzv0p7hhah6qgppa58md35zeuh5661">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1778530" data-content-user-id="161327"> <a href="/alvaromontoro/10-cool-codepen-demos-february-2024-1me5" aria-labelledby="article-link-1778530" class="crayons-story__hidden-navigation-link">10 Cool CodePen Demos (February 2024)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1778530" aria-controls="story-author-preview-content-1778530" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1778530" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/10-cool-codepen-demos-february-2024-1me5" class="crayons-story__tertiary fs-xs"><time datetime="2024-03-03T04:43:14Z">Mar 3</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1709440994"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/10-cool-codepen-demos-february-2024-1me5" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfw3mg1mfnyng0ca29pp.png" id="article-link-1778530"> 10 Cool CodePen Demos (February 2024) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/10-cool-codepen-demos-february-2024-1me5" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1778530" aria-label="Add a comment to post - 10 Cool CodePen Demos (February 2024)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">28<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/10-cool-codepen-demos-february-2024-1me5#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Cool CodePen Demos (February 2024)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a6tq4645efgsifmp0yr4lucii1axc41g" class="crayons-icon"><title id="a6tq4645efgsifmp0yr4lucii1axc41g">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 2<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1770774" data-content-user-id="161327"> <a href="/alvaromontoro/toggle-colorful-3i68" aria-labelledby="article-link-1770774" class="crayons-story__hidden-navigation-link">Toggle: Colorful</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1770774" aria-controls="story-author-preview-content-1770774" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1770774" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/toggle-colorful-3i68" class="crayons-story__tertiary fs-xs"><time datetime="2024-02-24T07:53:15Z">Feb 24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1708761195"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/toggle-colorful-3i68" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frrcwdrfgc0adcptivvur.png" id="article-link-1770774"> Toggle: Colorful </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/toggle-colorful-3i68" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1770774" aria-label="Add a comment to post - Toggle: Colorful"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">12<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/toggle-colorful-3i68#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Toggle: Colorful"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aidboaelvn2c37xppn859jn82bi669mu" class="crayons-icon"><title id="aidboaelvn2c37xppn859jn82bi669mu">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 6<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1759114" data-content-user-id="161327"> <a href="/alvaromontoro/mobile-navigation-3d-animation-2355" aria-labelledby="article-link-1759114" class="crayons-story__hidden-navigation-link">Mobile Navigation 3D Animation</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1759114" aria-controls="story-author-preview-content-1759114" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1759114" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/mobile-navigation-3d-animation-2355" class="crayons-story__tertiary fs-xs"><time datetime="2024-02-12T14:17:07Z">Feb 12</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1707747427"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/mobile-navigation-3d-animation-2355" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F86dp04b5dt3acwrgw4wn.png" id="article-link-1759114"> Mobile Navigation 3D Animation </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(173, 32, 163, 0.10); --tag-prefix: #ad20a3; --tag-bg-hover: rgba(173, 32, 163, 0.10); --tag-prefix-hover: #ad20a3; " href="/t/codepen"><span class="crayons-tag__prefix">#</span>codepen</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/mobile-navigation-3d-animation-2355" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1759114" aria-label="Add a comment to post - Mobile Navigation 3D Animation"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">21<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/mobile-navigation-3d-animation-2355#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Mobile Navigation 3D Animation"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="asw9ytpm9hmtkzy8sl775y0us904c02t" class="crayons-icon"><title id="asw9ytpm9hmtkzy8sl775y0us904c02t">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 4<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1755120" data-content-user-id="161327"> <a href="/alvaromontoro/css-cartoons-29bp" aria-labelledby="article-link-1755120" class="crayons-story__hidden-navigation-link">CSS Cartoons</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1755120" aria-controls="story-author-preview-content-1755120" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1755120" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/css-cartoons-29bp" class="crayons-story__tertiary fs-xs"><time datetime="2024-02-08T09:00:00Z">Feb 8</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1707382800"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/css-cartoons-29bp" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsa95c4u6o8475xxwl3kz.png" id="article-link-1755120"> CSS Cartoons </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/css-cartoons-29bp" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1755120" aria-label="Add a comment to post - CSS Cartoons"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">149<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/css-cartoons-29bp#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - CSS Cartoons"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ab5dmjzrmnxxbgv95cjn7zvnd80vaojh" class="crayons-icon"><title id="ab5dmjzrmnxxbgv95cjn7zvnd80vaojh">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 20<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1753373" data-content-user-id="161327"> <a href="/alvaromontoro/flight-slider-in-html-css-3024" aria-labelledby="article-link-1753373" class="crayons-story__hidden-navigation-link">Flight Slider in HTML + CSS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1753373" aria-controls="story-author-preview-content-1753373" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1753373" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/flight-slider-in-html-css-3024" class="crayons-story__tertiary fs-xs"><time datetime="2024-02-06T15:32:46Z">Feb 6</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1707233566"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/flight-slider-in-html-css-3024" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6ntl2uk021jiza6xaqe2.png" id="article-link-1753373"> Flight Slider in HTML + CSS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/flight-slider-in-html-css-3024" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1753373" aria-label="Add a comment to post - Flight Slider in HTML + CSS"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">84<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/flight-slider-in-html-css-3024#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Flight Slider in HTML + CSS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a32bd73uibb366hpp2w0jnoewshwj0dd" class="crayons-icon"><title id="a32bd73uibb366hpp2w0jnoewshwj0dd">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 31<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1750667" data-content-user-id="161327"> <a href="/alvaromontoro/10-cool-codepen-demos-january-2024-1keg" aria-labelledby="article-link-1750667" class="crayons-story__hidden-navigation-link">10 Cool CodePen Demos (January 2024)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1750667" aria-controls="story-author-preview-content-1750667" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1750667" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/10-cool-codepen-demos-january-2024-1keg" class="crayons-story__tertiary fs-xs"><time datetime="2024-02-03T15:53:37Z">Feb 3</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1706975617"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/10-cool-codepen-demos-january-2024-1keg" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfw3mg1mfnyng0ca29pp.png" id="article-link-1750667"> 10 Cool CodePen Demos (January 2024) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/10-cool-codepen-demos-january-2024-1keg" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1750667" aria-label="Add a comment to post - 10 Cool CodePen Demos (January 2024)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">14<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/10-cool-codepen-demos-january-2024-1keg#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Cool CodePen Demos (January 2024)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="asc52jmywuk9zlbo738jk9bqqzdd9jxi" class="crayons-icon"><title id="asc52jmywuk9zlbo738jk9bqqzdd9jxi">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 2<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1731965" data-content-user-id="161327"> <a href="/alvaromontoro/new-html-control-lands-in-safari-5d46" aria-labelledby="article-link-1731965" class="crayons-story__hidden-navigation-link">New HTML Control Lands in Safari</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1731965" aria-controls="story-author-preview-content-1731965" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1731965" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/new-html-control-lands-in-safari-5d46" class="crayons-story__tertiary fs-xs"><time datetime="2024-01-18T14:39:19Z">Jan 18</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1705588759"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/new-html-control-lands-in-safari-5d46" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvq2m3dfo0dbg7a5wqssi.gif" id="article-link-1731965"> New HTML Control Lands in Safari </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/new-html-control-lands-in-safari-5d46" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1731965" aria-label="Add a comment to post - New HTML Control Lands in Safari"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">10<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/new-html-control-lands-in-safari-5d46#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - New HTML Control Lands in Safari"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="as6b2xxt9u99ptfmc3c1nmjjxd4aph66" class="crayons-icon"><title id="as6b2xxt9u99ptfmc3c1nmjjxd4aph66">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 2<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1716410" data-content-user-id="161327"> <a href="/alvaromontoro/10-cool-codepen-demos-december-2023-5105" aria-labelledby="article-link-1716410" class="crayons-story__hidden-navigation-link">10 Cool CodePen Demos (December 2023)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1716410" aria-controls="story-author-preview-content-1716410" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1716410" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/10-cool-codepen-demos-december-2023-5105" class="crayons-story__tertiary fs-xs"><time datetime="2024-01-03T22:00:20Z">Jan 3</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1704319220"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/10-cool-codepen-demos-december-2023-5105" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfw3mg1mfnyng0ca29pp.png" id="article-link-1716410"> 10 Cool CodePen Demos (December 2023) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/10-cool-codepen-demos-december-2023-5105" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1716410" aria-label="Add a comment to post - 10 Cool CodePen Demos (December 2023)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">68<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/10-cool-codepen-demos-december-2023-5105#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Cool CodePen Demos (December 2023)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aeik0v4c2kwxa5glenhlx36miipm1ni1" class="crayons-icon"><title id="aeik0v4c2kwxa5glenhlx36miipm1ni1">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 13<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1689263" data-content-user-id="161327"> <a href="/alvaromontoro/creating-progressive-enhanced-codepen-links-and-embeds-26bb" aria-labelledby="article-link-1689263" class="crayons-story__hidden-navigation-link">Creating Progressive Enhanced CodePen Links and Embeds</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1689263" aria-controls="story-author-preview-content-1689263" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1689263" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/creating-progressive-enhanced-codepen-links-and-embeds-26bb" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-11T15:19:02Z">Dec 11 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1702307942"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/creating-progressive-enhanced-codepen-links-and-embeds-26bb" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbnfgx7yvrcwyk54x5awq.png" id="article-link-1689263"> Creating Progressive Enhanced CodePen Links and Embeds </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/creating-progressive-enhanced-codepen-links-and-embeds-26bb" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1689263" aria-label="Add a comment to post - Creating Progressive Enhanced CodePen Links and Embeds"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">4<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/creating-progressive-enhanced-codepen-links-and-embeds-26bb#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Creating Progressive Enhanced CodePen Links and Embeds"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="arqsh9ft3pfei8mcwublci89gsraxvoe" class="crayons-icon"><title id="arqsh9ft3pfei8mcwublci89gsraxvoe">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 9 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1686209" data-content-user-id="161327"> <a href="/alvaromontoro/10-cool-codepen-demos-november-2023-jj" aria-labelledby="article-link-1686209" class="crayons-story__hidden-navigation-link">10 Cool CodePen Demos (November 2023)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1686209" aria-controls="story-author-preview-content-1686209" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1686209" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/10-cool-codepen-demos-november-2023-jj" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-02T21:25:14Z">Dec 2 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1701552314"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/10-cool-codepen-demos-november-2023-jj" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfw3mg1mfnyng0ca29pp.png" id="article-link-1686209"> 10 Cool CodePen Demos (November 2023) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/10-cool-codepen-demos-november-2023-jj" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1686209" aria-label="Add a comment to post - 10 Cool CodePen Demos (November 2023)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">25<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/10-cool-codepen-demos-november-2023-jj#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Cool CodePen Demos (November 2023)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ammhpfvurgmyyt9xcmdkzynq71gwps7y" class="crayons-icon"><title id="ammhpfvurgmyyt9xcmdkzynq71gwps7y">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1684248" data-content-user-id="161327"> <a href="/alvaromontoro/css-art-drawing-santa-claus-in-css-5049" aria-labelledby="article-link-1684248" class="crayons-story__hidden-navigation-link">CSS Art: Drawing Santa Claus in CSS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1684248" aria-controls="story-author-preview-content-1684248" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1684248" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/css-art-drawing-santa-claus-in-css-5049" class="crayons-story__tertiary fs-xs"><time datetime="2023-11-30T19:29:14Z">Nov 30 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1701372554"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/css-art-drawing-santa-claus-in-css-5049" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvv9ngsj5db65a3768565.png" id="article-link-1684248"> CSS Art: Drawing Santa Claus in CSS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/css-art-drawing-santa-claus-in-css-5049" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1684248" aria-label="Add a comment to post - CSS Art: Drawing Santa Claus in CSS"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">26<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/css-art-drawing-santa-claus-in-css-5049#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - CSS Art: Drawing Santa Claus in CSS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a62bn97bmdxir6fjpo1wkpeay5flh6s7" class="crayons-icon"><title id="a62bn97bmdxir6fjpo1wkpeay5flh6s7">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 5<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 15 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1672167" data-content-user-id="161327"> <a href="/alvaromontoro/10-cool-codepen-demos-october-2023-5a8n" aria-labelledby="article-link-1672167" class="crayons-story__hidden-navigation-link">10 Cool CodePen Demos (October 2023)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1672167" aria-controls="story-author-preview-content-1672167" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1672167" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/10-cool-codepen-demos-october-2023-5a8n" class="crayons-story__tertiary fs-xs"><time datetime="2023-11-20T10:27:59Z">Nov 20 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1700476079"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/10-cool-codepen-demos-october-2023-5a8n" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfw3mg1mfnyng0ca29pp.png" id="article-link-1672167"> 10 Cool CodePen Demos (October 2023) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/10-cool-codepen-demos-october-2023-5a8n" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1672167" aria-label="Add a comment to post - 10 Cool CodePen Demos (October 2023)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">27<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/10-cool-codepen-demos-october-2023-5a8n#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Cool CodePen Demos (October 2023)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="atip8p6mn9807o5exixhv9ti27k1214d" class="crayons-icon"><title id="atip8p6mn9807o5exixhv9ti27k1214d">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 3<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1665486" data-content-user-id="161327"> <a href="/alvaromontoro/10-cool-codepen-demos-divtober-edition-3ko1" aria-labelledby="article-link-1665486" class="crayons-story__hidden-navigation-link">10 Cool CodePen Demos (Divtober Edition)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1665486" aria-controls="story-author-preview-content-1665486" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1665486" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/10-cool-codepen-demos-divtober-edition-3ko1" class="crayons-story__tertiary fs-xs"><time datetime="2023-11-13T17:17:47Z">Nov 13 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1699895867"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/10-cool-codepen-demos-divtober-edition-3ko1" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfw3mg1mfnyng0ca29pp.png" id="article-link-1665486"> 10 Cool CodePen Demos (Divtober Edition) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/10-cool-codepen-demos-divtober-edition-3ko1" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1665486" aria-label="Add a comment to post - 10 Cool CodePen Demos (Divtober Edition)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">10<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/10-cool-codepen-demos-divtober-edition-3ko1#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Cool CodePen Demos (Divtober Edition)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="altqvovcqudn2ibkgrmuiiu92e31gcyc" class="crayons-icon"><title id="altqvovcqudn2ibkgrmuiiu92e31gcyc">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1662001" data-content-user-id="161327"> <a href="/alvaromontoro/creating-an-interactive-image-gallery-with-html-and-css-35pi" aria-labelledby="article-link-1662001" class="crayons-story__hidden-navigation-link">Creating an Interactive Image Gallery with HTML and CSS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1662001" aria-controls="story-author-preview-content-1662001" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1662001" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/creating-an-interactive-image-gallery-with-html-and-css-35pi" class="crayons-story__tertiary fs-xs"><time datetime="2023-11-13T15:53:55Z">Nov 13 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1699890835"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/creating-an-interactive-image-gallery-with-html-and-css-35pi" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsympsjok67b351vsqkwy.png" id="article-link-1662001"> Creating an Interactive Image Gallery with HTML and CSS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/creating-an-interactive-image-gallery-with-html-and-css-35pi" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1662001" aria-label="Add a comment to post - Creating an Interactive Image Gallery with HTML and CSS"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">115<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/creating-an-interactive-image-gallery-with-html-and-css-35pi#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Creating an Interactive Image Gallery with HTML and CSS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aclhvjsklztguvxeylbct6igwahm36ok" class="crayons-icon"><title id="aclhvjsklztguvxeylbct6igwahm36ok">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 18<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 8 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1653004" data-content-user-id="161327"> <a href="/alvaromontoro/one-html-tag-thirty-css-drawings-my-divtober-2023-collection-44ja" aria-labelledby="article-link-1653004" class="crayons-story__hidden-navigation-link">One HTML Tag. Thirty+ CSS Drawings – My Divtober 2023 Collection.</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1653004" aria-controls="story-author-preview-content-1653004" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1653004" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/one-html-tag-thirty-css-drawings-my-divtober-2023-collection-44ja" class="crayons-story__tertiary fs-xs"><time datetime="2023-11-01T15:20:36Z">Nov 1 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1698852036"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/one-html-tag-thirty-css-drawings-my-divtober-2023-collection-44ja" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk758nfzr3e5zwa5s254e.png" id="article-link-1653004"> One HTML Tag. Thirty+ CSS Drawings – My Divtober 2023 Collection. </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/one-html-tag-thirty-css-drawings-my-divtober-2023-collection-44ja" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1653004" aria-label="Add a comment to post - One HTML Tag. Thirty+ CSS Drawings – My Divtober 2023 Collection."> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">18<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/one-html-tag-thirty-css-drawings-my-divtober-2023-collection-44ja#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - One HTML Tag. Thirty+ CSS Drawings – My Divtober 2023 Collection."> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="atey3j7yo4b9xger0r752bslxuzqmcku" class="crayons-icon"><title id="atey3j7yo4b9xger0r752bslxuzqmcku">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 4<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 9 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1644757" data-content-user-id="161327"> <a href="/alvaromontoro/playing-with-the-gamepad-api-gha" aria-labelledby="article-link-1644757" class="crayons-story__hidden-navigation-link">Playing with the Gamepad API</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1644757" aria-controls="story-author-preview-content-1644757" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1644757" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/playing-with-the-gamepad-api-gha" class="crayons-story__tertiary fs-xs"><time datetime="2023-10-24T15:27:01Z">Oct 24 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1698161221"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/playing-with-the-gamepad-api-gha" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1akgbw05if159rsh7kjb.png" id="article-link-1644757"> Playing with the Gamepad API </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/playing-with-the-gamepad-api-gha" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1644757" aria-label="Add a comment to post - Playing with the Gamepad API"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">19<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/playing-with-the-gamepad-api-gha#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Playing with the Gamepad API"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ac7kwe5a57egeze6l0ok6wepof23i2w6" class="crayons-icon"><title id="ac7kwe5a57egeze6l0ok6wepof23i2w6">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 6<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 12 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1636395" data-content-user-id="161327"> <a href="/alvaromontoro/its-all-just-a-little-bit-of-history-repeating-13oc" aria-labelledby="article-link-1636395" class="crayons-story__hidden-navigation-link">It's all just a little bit of history repeating</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1636395" aria-controls="story-author-preview-content-1636395" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1636395" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/its-all-just-a-little-bit-of-history-repeating-13oc" class="crayons-story__tertiary fs-xs"><time datetime="2023-10-16T16:15:15Z">Oct 16 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1697472915"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/its-all-just-a-little-bit-of-history-repeating-13oc" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9a7zsh30wzqwrkiovnpu.png" id="article-link-1636395"> It's all just a little bit of history repeating </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(208, 236, 255, 0.10); --tag-prefix: #D0ECFF; --tag-bg-hover: rgba(208, 236, 255, 0.10); --tag-prefix-hover: #D0ECFF; " href="/t/watercooler"><span class="crayons-tag__prefix">#</span>watercooler</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/opinion"><span class="crayons-tag__prefix">#</span>opinion</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(23, 253, 26, 0.10); --tag-prefix: #17fd1a; --tag-bg-hover: rgba(23, 253, 26, 0.10); --tag-prefix-hover: #17fd1a; " href="/t/ai"><span class="crayons-tag__prefix">#</span>ai</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/its-all-just-a-little-bit-of-history-repeating-13oc" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1636395" aria-label="Add a comment to post - It's all just a little bit of history repeating"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">4<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/its-all-just-a-little-bit-of-history-repeating-13oc#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - It's all just a little bit of history repeating"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ana9h4bp8s844muobvwum663w3bpstk8" class="crayons-icon"><title id="ana9h4bp8s844muobvwum663w3bpstk8">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1628061" data-content-user-id="161327"> <a href="/alvaromontoro/shapes-in-css-2o9d" aria-labelledby="article-link-1628061" class="crayons-story__hidden-navigation-link">Shapes in CSS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1628061" aria-controls="story-author-preview-content-1628061" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1628061" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/shapes-in-css-2o9d" class="crayons-story__tertiary fs-xs"><time datetime="2023-10-09T00:53:06Z">Oct 9 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1696812786"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/shapes-in-css-2o9d" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi9wvjg7bberztgth6192.png" id="article-link-1628061"> Shapes in CSS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/shapes-in-css-2o9d" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1628061" aria-label="Add a comment to post - Shapes in CSS"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">27<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/shapes-in-css-2o9d#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Shapes in CSS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aa430zordct86zjue7z8bua2erswfp58" class="crayons-icon"><title id="aa430zordct86zjue7z8bua2erswfp58">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 3<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 8 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1627934" data-content-user-id="161327"> <a href="/alvaromontoro/10-cool-codepen-demos-september-2023-2pk" aria-labelledby="article-link-1627934" class="crayons-story__hidden-navigation-link">10 Cool CodePen Demos (September 2023)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1627934" aria-controls="story-author-preview-content-1627934" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1627934" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/10-cool-codepen-demos-september-2023-2pk" class="crayons-story__tertiary fs-xs"><time datetime="2023-10-08T19:44:24Z">Oct 8 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1696794264"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/10-cool-codepen-demos-september-2023-2pk" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfw3mg1mfnyng0ca29pp.png" id="article-link-1627934"> 10 Cool CodePen Demos (September 2023) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/10-cool-codepen-demos-september-2023-2pk" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1627934" aria-label="Add a comment to post - 10 Cool CodePen Demos (September 2023)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">22<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/10-cool-codepen-demos-september-2023-2pk#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Cool CodePen Demos (September 2023)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a1cr3yd059odec0odetpy1clqqusbcub" class="crayons-icon"><title id="a1cr3yd059odec0odetpy1clqqusbcub">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 4<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1608374" data-content-user-id="161327"> <a href="/alvaromontoro/html-tip-theme-colors-1597" aria-labelledby="article-link-1608374" class="crayons-story__hidden-navigation-link">HTML Tip: Theme Colors</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1608374" aria-controls="story-author-preview-content-1608374" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1608374" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/html-tip-theme-colors-1597" class="crayons-story__tertiary fs-xs"><time datetime="2023-09-22T14:55:54Z">Sep 22 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1695394554"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/html-tip-theme-colors-1597" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F74x3i3y8o128qtiiykrw.jpg" id="article-link-1608374"> HTML Tip: Theme Colors </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(254, 255, 165, 0.10); --tag-prefix: #FEFFA5; --tag-bg-hover: rgba(254, 255, 165, 0.10); --tag-prefix-hover: #FEFFA5; " href="/t/tutorial"><span class="crayons-tag__prefix">#</span>tutorial</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/video"><span class="crayons-tag__prefix">#</span>video</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/html-tip-theme-colors-1597" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1608374" aria-label="Add a comment to post - HTML Tip: Theme Colors"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">5<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/html-tip-theme-colors-1597#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - HTML Tip: Theme Colors"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ad6jtzax47fnj7nwdtnog0emhyktkupv" class="crayons-icon"><title id="ad6jtzax47fnj7nwdtnog0emhyktkupv">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1603939" data-content-user-id="161327"> <a href="/alvaromontoro/1-minute-css-tip-accent-colors-k6h" aria-labelledby="article-link-1603939" class="crayons-story__hidden-navigation-link">1-Minute CSS Tip: Accent Colors</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1603939" aria-controls="story-author-preview-content-1603939" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1603939" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/1-minute-css-tip-accent-colors-k6h" class="crayons-story__tertiary fs-xs"><time datetime="2023-09-18T15:02:16Z">Sep 18 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1695049336"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/1-minute-css-tip-accent-colors-k6h" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fslt5spxtkl7xgwb9mndd.png" id="article-link-1603939"> 1-Minute CSS Tip: Accent Colors </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(254, 255, 165, 0.10); --tag-prefix: #FEFFA5; --tag-bg-hover: rgba(254, 255, 165, 0.10); --tag-prefix-hover: #FEFFA5; " href="/t/tutorial"><span class="crayons-tag__prefix">#</span>tutorial</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/1-minute-css-tip-accent-colors-k6h" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1603939" aria-label="Add a comment to post - 1-Minute CSS Tip: Accent Colors"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">18<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/1-minute-css-tip-accent-colors-k6h#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 1-Minute CSS Tip: Accent Colors"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a4eojkherz5b0q0hx3lnlbz72bw12a47" class="crayons-icon"><title id="a4eojkherz5b0q0hx3lnlbz72bw12a47">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 3<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1591527" data-content-user-id="161327"> <a href="/alvaromontoro/10-cool-codepen-demos-august-2023-bge" aria-labelledby="article-link-1591527" class="crayons-story__hidden-navigation-link">10 Cool CodePen Demos (August 2023)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1591527" aria-controls="story-author-preview-content-1591527" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1591527" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/10-cool-codepen-demos-august-2023-bge" class="crayons-story__tertiary fs-xs"><time datetime="2023-09-06T16:23:41Z">Sep 6 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1694017421"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/10-cool-codepen-demos-august-2023-bge" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfw3mg1mfnyng0ca29pp.png" id="article-link-1591527"> 10 Cool CodePen Demos (August 2023) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/10-cool-codepen-demos-august-2023-bge" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1591527" aria-label="Add a comment to post - 10 Cool CodePen Demos (August 2023)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">26<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/10-cool-codepen-demos-august-2023-bge#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Cool CodePen Demos (August 2023)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a88ysi4tmlf2c3wel713pysbec6i3sdu" class="crayons-icon"><title id="a88ysi4tmlf2c3wel713pysbec6i3sdu">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 6<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1586866" data-content-user-id="161327"> <a href="/alvaromontoro/small-details-to-improve-your-websites-experience-hio" aria-labelledby="article-link-1586866" class="crayons-story__hidden-navigation-link">Small Details to Improve Your Website's Experience</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1586866" aria-controls="story-author-preview-content-1586866" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1586866" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/small-details-to-improve-your-websites-experience-hio" class="crayons-story__tertiary fs-xs"><time datetime="2023-09-01T15:47:19Z">Sep 1 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1693583239"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/small-details-to-improve-your-websites-experience-hio" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyo4c3c9bvz4d70farjse.png" id="article-link-1586866"> Small Details to Improve Your Website's Experience </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/small-details-to-improve-your-websites-experience-hio" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1586866" aria-label="Add a comment to post - Small Details to Improve Your Website's Experience"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">84<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/small-details-to-improve-your-websites-experience-hio#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Small Details to Improve Your Website's Experience"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="asiopzumgn5y24mpw1m6lp6vt525c7yw" class="crayons-icon"><title id="asiopzumgn5y24mpw1m6lp6vt525c7yw">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 5<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 8 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1557746" data-content-user-id="161327"> <a href="/alvaromontoro/10-cool-codepen-demos-july-2023-590l" aria-labelledby="article-link-1557746" class="crayons-story__hidden-navigation-link">10 Cool CodePen Demos (July 2023)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1557746" aria-controls="story-author-preview-content-1557746" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1557746" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/10-cool-codepen-demos-july-2023-590l" class="crayons-story__tertiary fs-xs"><time datetime="2023-08-03T10:46:14Z">Aug 3 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1691059574"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/10-cool-codepen-demos-july-2023-590l" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfw3mg1mfnyng0ca29pp.png" id="article-link-1557746"> 10 Cool CodePen Demos (July 2023) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/10-cool-codepen-demos-july-2023-590l" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1557746" aria-label="Add a comment to post - 10 Cool CodePen Demos (July 2023)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">35<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/10-cool-codepen-demos-july-2023-590l#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Cool CodePen Demos (July 2023)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a2t77qttgqw9usnldhdomzf9re47teur" class="crayons-icon"><title id="a2t77qttgqw9usnldhdomzf9re47teur">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1540316" data-content-user-id="161327"> <a href="/alvaromontoro/tiny-awards-finalists-6o" aria-labelledby="article-link-1540316" class="crayons-story__hidden-navigation-link">Tiny Awards Finalists</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1540316" aria-controls="story-author-preview-content-1540316" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1540316" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/tiny-awards-finalists-6o" class="crayons-story__tertiary fs-xs"><time datetime="2023-07-17T22:22:51Z">Jul 17 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1689632571"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/tiny-awards-finalists-6o" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F455hhaaqhm77x35p5521.png" id="article-link-1540316"> Tiny Awards Finalists </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(208, 236, 255, 0.10); --tag-prefix: #D0ECFF; --tag-bg-hover: rgba(208, 236, 255, 0.10); --tag-prefix-hover: #D0ECFF; " href="/t/watercooler"><span class="crayons-tag__prefix">#</span>watercooler</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/awards"><span class="crayons-tag__prefix">#</span>awards</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/tiny-awards-finalists-6o" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1540316" aria-label="Add a comment to post - Tiny Awards Finalists"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">15<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/tiny-awards-finalists-6o#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Tiny Awards Finalists"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="atr2cahtwks3bet7s2l6v2exfdk3ieij" class="crayons-icon"><title id="atr2cahtwks3bet7s2l6v2exfdk3ieij">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 6 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1527561" data-content-user-id="161327"> <a href="/alvaromontoro/10-cool-codepen-demos-june-2023-3g58" aria-labelledby="article-link-1527561" class="crayons-story__hidden-navigation-link">10 Cool CodePen Demos (June 2023)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1527561" aria-controls="story-author-preview-content-1527561" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1527561" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/10-cool-codepen-demos-june-2023-3g58" class="crayons-story__tertiary fs-xs"><time datetime="2023-07-05T22:18:27Z">Jul 5 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1688595507"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/10-cool-codepen-demos-june-2023-3g58" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfw3mg1mfnyng0ca29pp.png" id="article-link-1527561"> 10 Cool CodePen Demos (June 2023) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/10-cool-codepen-demos-june-2023-3g58" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1527561" aria-label="Add a comment to post - 10 Cool CodePen Demos (June 2023)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">38<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/10-cool-codepen-demos-june-2023-3g58#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Cool CodePen Demos (June 2023)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ajvgf9p82u01sf1yfopdtrr4b06i0nuz" class="crayons-icon"><title id="ajvgf9p82u01sf1yfopdtrr4b06i0nuz">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 2<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1490711" data-content-user-id="161327"> <a href="/alvaromontoro/10-cool-codepen-demos-may-23-2n79" aria-labelledby="article-link-1490711" class="crayons-story__hidden-navigation-link">10 Cool CodePen Demos (May 23)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1490711" aria-controls="story-author-preview-content-1490711" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1490711" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/10-cool-codepen-demos-may-23-2n79" class="crayons-story__tertiary fs-xs"><time datetime="2023-06-03T15:39:02Z">Jun 3 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1685806742"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/10-cool-codepen-demos-may-23-2n79" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfw3mg1mfnyng0ca29pp.png" id="article-link-1490711"> 10 Cool CodePen Demos (May 23) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(173, 32, 163, 0.10); --tag-prefix: #ad20a3; --tag-bg-hover: rgba(173, 32, 163, 0.10); --tag-prefix-hover: #ad20a3; " href="/t/codepen"><span class="crayons-tag__prefix">#</span>codepen</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/10-cool-codepen-demos-may-23-2n79" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1490711" aria-label="Add a comment to post - 10 Cool CodePen Demos (May 23)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">21<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/10-cool-codepen-demos-may-23-2n79#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Cool CodePen Demos (May 23)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a46dml5xjnx0dsqk7fvvquovrblysopk" class="crayons-icon"><title id="a46dml5xjnx0dsqk7fvvquovrblysopk">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1484265" data-content-user-id="161327"> <a href="/alvaromontoro/what-color-should-the-text-be-a-css-quiz-2kam" aria-labelledby="article-link-1484265" class="crayons-story__hidden-navigation-link">What color should the text be? (A CSS Quiz)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1484265" aria-controls="story-author-preview-content-1484265" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1484265" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/what-color-should-the-text-be-a-css-quiz-2kam" class="crayons-story__tertiary fs-xs"><time datetime="2023-05-29T05:23:20Z">May 29 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1685337800"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/what-color-should-the-text-be-a-css-quiz-2kam" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftnmtzz16bc2r7gxuh6g4.png" id="article-link-1484265"> What color should the text be? (A CSS Quiz) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/what-color-should-the-text-be-a-css-quiz-2kam" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1484265" aria-label="Add a comment to post - What color should the text be? (A CSS Quiz)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">46<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/what-color-should-the-text-be-a-css-quiz-2kam#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - What color should the text be? (A CSS Quiz)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a639pv1dfeqw17rix95yk9uit52fxq0y" class="crayons-icon"><title id="a639pv1dfeqw17rix95yk9uit52fxq0y">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 20<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1469065" data-content-user-id="161327"> <a href="/alvaromontoro/css-art-drawing-a-coffee-stain-3dcp" aria-labelledby="article-link-1469065" class="crayons-story__hidden-navigation-link">CSS Art: Drawing a Coffee Stain</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1469065" aria-controls="story-author-preview-content-1469065" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1469065" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/css-art-drawing-a-coffee-stain-3dcp" class="crayons-story__tertiary fs-xs"><time datetime="2023-05-15T18:34:49Z">May 15 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1684175689"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/css-art-drawing-a-coffee-stain-3dcp" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fphm0hyqs7zwdftftk517.png" id="article-link-1469065"> CSS Art: Drawing a Coffee Stain </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/creative"><span class="crayons-tag__prefix">#</span>creative</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/css-art-drawing-a-coffee-stain-3dcp" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1469065" aria-label="Add a comment to post - CSS Art: Drawing a Coffee Stain"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">28<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/css-art-drawing-a-coffee-stain-3dcp#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - CSS Art: Drawing a Coffee Stain"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="anfmbio2ddxr319qh82nt0x4o5dw78oy" class="crayons-icon"><title id="anfmbio2ddxr319qh82nt0x4o5dw78oy">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 11<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1456783" data-content-user-id="161327"> <a href="/alvaromontoro/10-cool-codepen-demos-april-23-1p0m" aria-labelledby="article-link-1456783" class="crayons-story__hidden-navigation-link">10 Cool CodePen Demos (April 23)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1456783" aria-controls="story-author-preview-content-1456783" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1456783" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/10-cool-codepen-demos-april-23-1p0m" class="crayons-story__tertiary fs-xs"><time datetime="2023-05-04T03:55:42Z">May 4 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1683172542"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/10-cool-codepen-demos-april-23-1p0m" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfw3mg1mfnyng0ca29pp.png" id="article-link-1456783"> 10 Cool CodePen Demos (April 23) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(173, 32, 163, 0.10); --tag-prefix: #ad20a3; --tag-bg-hover: rgba(173, 32, 163, 0.10); --tag-prefix-hover: #ad20a3; " href="/t/codepen"><span class="crayons-tag__prefix">#</span>codepen</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/10-cool-codepen-demos-april-23-1p0m" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1456783" aria-label="Add a comment to post - 10 Cool CodePen Demos (April 23)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">23<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/10-cool-codepen-demos-april-23-1p0m#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Cool CodePen Demos (April 23)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ad21zv50k76at5zmpq50tn0vq9ww5h9z" class="crayons-icon"><title id="ad21zv50k76at5zmpq50tn0vq9ww5h9z">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 3<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1431054" data-content-user-id="161327"> <a href="/alvaromontoro/new-html-element-ngd" aria-labelledby="article-link-1431054" class="crayons-story__hidden-navigation-link">New HTML Element: <search></a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1431054" aria-controls="story-author-preview-content-1431054" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1431054" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/new-html-element-ngd" class="crayons-story__tertiary fs-xs"><time datetime="2023-04-10T15:19:32Z">Apr 10 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1681139972"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/new-html-element-ngd" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp6mza5myysslm6w4xp3t.png" id="article-link-1431054"> New HTML Element: <search> </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(8, 59, 21, 0.10); --tag-prefix: #083b15; --tag-bg-hover: rgba(8, 59, 21, 0.10); --tag-prefix-hover: #083b15; " href="/t/a11y"><span class="crayons-tag__prefix">#</span>a11y</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/new-html-element-ngd" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1431054" aria-label="Add a comment to post - New HTML Element: <search>"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">19<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/new-html-element-ngd#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - New HTML Element: <search>"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a7ir1f5l57jwa7nyrncwo5wqa0f5d00j" class="crayons-icon"><title id="a7ir1f5l57jwa7nyrncwo5wqa0f5d00j">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1429959" data-content-user-id="161327"> <a href="/alvaromontoro/drawing-an-egg-with-css-m17" aria-labelledby="article-link-1429959" class="crayons-story__hidden-navigation-link">Drawing an Egg with CSS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1429959" aria-controls="story-author-preview-content-1429959" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1429959" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/drawing-an-egg-with-css-m17" class="crayons-story__tertiary fs-xs"><time datetime="2023-04-08T04:56:22Z">Apr 8 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1680929782"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/drawing-an-egg-with-css-m17" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1f0af0i7qsywkmm19jnr.png" id="article-link-1429959"> Drawing an Egg with CSS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/drawing-an-egg-with-css-m17" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1429959" aria-label="Add a comment to post - Drawing an Egg with CSS"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">27<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/drawing-an-egg-with-css-m17#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Drawing an Egg with CSS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="akoog8sgein7mrh6m3l29nv0hdfxqs6s" class="crayons-icon"><title id="akoog8sgein7mrh6m3l29nv0hdfxqs6s">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 4<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1426698" data-content-user-id="161327"> <a href="/alvaromontoro/10-cool-codepen-demos-march-23-484p" aria-labelledby="article-link-1426698" class="crayons-story__hidden-navigation-link">10 Cool CodePen Demos (March 23)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alvaromontoro" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"> Alvaro Montoro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1426698" aria-controls="story-author-preview-content-1426698" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="story-author-preview-content-1426698" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alvaro Montoro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":161327,"className":"User","name":"Alvaro Montoro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="161327"></div> </div> </div> </div> </div> <a href="/alvaromontoro/10-cool-codepen-demos-march-23-484p" class="crayons-story__tertiary fs-xs"><time datetime="2023-04-05T02:26:39Z">Apr 5 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1680661599"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alvaromontoro/10-cool-codepen-demos-march-23-484p" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfw3mg1mfnyng0ca29pp.png" id="article-link-1426698"> 10 Cool CodePen Demos (March 23) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(173, 32, 163, 0.10); --tag-prefix: #ad20a3; --tag-bg-hover: rgba(173, 32, 163, 0.10); --tag-prefix-hover: #ad20a3; " href="/t/codepen"><span class="crayons-tag__prefix">#</span>codepen</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alvaromontoro/10-cool-codepen-demos-march-23-484p" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1426698" aria-label="Add a comment to post - 10 Cool CodePen Demos (March 23)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">66<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/alvaromontoro/10-cool-codepen-demos-march-23-484p#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Cool CodePen Demos (March 23)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="arbi1hdfpc1n99u03ssai2fp0lm2cjzx" class="crayons-icon"><title id="arbi1hdfpc1n99u03ssai2fp0lm2cjzx">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 5<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="placeholder-div"></div> </div> <div class="loading-articles" id="loading-articles"> loading... </div> </main> </div> </main> <script src="https://assets.dev.to/assets/storiesList-b9c50cbd898a3a64258a3a49db1c531651b0a4a11937be35ed4651111802b5b5.js" defer="defer"></script> <script src="https://assets.dev.to/assets/followButtons-f2455d1f50a862b83fa006b1953e3a1644598781243cae25d3e75b13c04184fd.js" defer="defer"></script> <script src="https://assets.dev.to/assets/feedPreviewCards-8d16b0b656456a28c0a290f756cf6e21e19833111c4796f48c631bfea8323d51.js" defer="defer"></script> <script src="https://assets.dev.to/assets/hideBookmarkButtons-0cc08aac1c422e6b6f75e5284b5350215abf211b59fb3eb8d8a4ef85e205b607.js" defer="defer"></script> <script src="https://assets.dev.to/assets/profileDropdown-a171e1fd7174339f87bba9babc7a7d545bb24d5769c13609d763aaaeb74a5ba9.js" defer="defer"></script> <script src="https://assets.dev.to/assets/users/profilePage-1393cb4a2fea4e217cb2a2451f02d7a20ee01da60dc85f128f703631908dab09.js" defer="defer"></script> <script src="https://assets.dev.to/assets/localizeArticleDates-70147c5c6bfe350b42e020ebb2a3dd37419d83978982b5a67b6389119bf162ac.js" defer="defer"></script> <script src="https://assets.dev.to/assets/asyncUserStatusCheck-c38c3dcbc3fa64c8ff9e403434eabaf359c4957d3fb713784cc99144da5d5358.js" defer="defer"></script> <div id="runtime-banner-container"></div> </div> </div> <footer id="footer" class="crayons-footer print-hidden"> <div id="footer-container" class="crayons-footer__container"> <div style="" data-display-unit data-id="146443" data-category-click="click" data-category-impression="impression" data-context-type="home" data-special="nothing" data-article-id="393076" data-type-of="in_house"> <p style="font-weight: bold;margin-bottom: 10px"> Thank you to our Diamond Sponsor <a href="https://neon.tech/">Neon</a> for supporting our community. </p> </div> <p class="fs-s crayons-footer__description"> <a class="c-link c-link--branded fw-medium" aria-label="DEV Community Home" href="/">DEV Community</a> — A constructive and inclusive social network for software developers. With you every step of your journey. </p> <ul class="footer__nav-links flex gap-2 justify-center flex-wrap fs-s p-0" style="" /> <li class="footer__nav-link flex items-center"> <a href="/"> Home </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/++"> DEV++ </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/pod"> Podcasts </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/videos"> Videos </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/tags"> Tags </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/help"> DEV Help </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="https://shop.forem.com/"> Forem Shop </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/advertise"> Advertise on DEV </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/challenges"> DEV Challenges </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/showcase"> DEV Showcase </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/about"> About </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/contact"> Contact </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/free-postgres-database-tier"> Free Postgres Database </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/guides"> Guides </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/software-comparisons"> Software comparisons </a> <span class="dot ml-2"></span> </li> </ul> <ul class="footer__nav-links flex gap-2 justify-center flex-wrap fs-s p-0" style="" /> <li class="footer__nav-link flex items-center"> <a href="/code-of-conduct"> Code of Conduct </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/privacy"> Privacy Policy </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/terms"> Terms of use </a> <span class="dot ml-2"></span> </li> </ul> <div class="fs-s"> <p>Built on <a class="c-link c-link--branded" target="_blank" rel="noopener" href="https://www.forem.com">Forem</a> — the <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/opensource">open source</a> software that powers <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to">DEV</a> and other inclusive communities.</p> <p>Made with love and <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/rails">Ruby on Rails</a>. DEV Community <span title="copyright">©</span> 2016 - 2024.</p> </div> </div> </footer> <div id="snack-zone"></div> <div id="global-signup-modal" class="authentication-modal hidden"> <div class="authentication-modal__container"> <figure class="authentication-modal__image-container"> <img class="authentication-modal__image" src="https://media2.dev.to/dynamic/image/width=190,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" alt="DEV Community" loading="lazy" /> </figure> <div class="authentication-modal__content"> <p class="authentication-modal__description"> We're a place where coders share, stay up-to-date and grow their careers. </p> </div> <div class="authentication-modal__actions"> <a href="/enter" class="crayons-btn" aria-label="Log in" data-no-instant> Log in </a> <a href="/enter?state=new-user" class="crayons-btn crayons-btn--ghost-brand js-global-signup-modal__create-account" aria-label="Create new account" data-no-instant> Create account </a> </div> </div> </div> <script src="https://assets.dev.to/assets/signupModalShortcuts-0b25469b985100a01e94cbd7fccaf7f0a4d776e129aac65c766aa32cb28ab29a.js" defer="defer"></script> <div id="cookie-consent"></div> <div id="i18n-translations" data-translations="{"en":{"core":{"add_comment":"Add comment","beta":"beta","comment":"Comment","copy_link":"Copy link","edit_profile":"Edit profile","follow":"Follow","follow_back":"Follow back","following":"Following","like":"Like","loading":"loading...","reaction":"Reaction","report_abuse":"Report abuse","search":"Search","success_settings":"Successfully updated settings.","counted_organization":{"one":"%{count} organization","other":"%{count} organizations"},"counted_user":{"one":"%{count} person","other":"%{count} people"},"not_following":"You're not following anyone","following_everyone":"You're following %{details} (everyone)","you_are_following":"You're following","and":"and"}}}"></div> <div id="reaction-category-resources" class="hidden" aria-hidden="true"> <img data-name="Like" data-slug="like" data-position="1" src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> <img data-name="Unicorn" data-slug="unicorn" data-position="2" src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> <img data-name="Exploding Head" data-slug="exploding_head" data-position="3" src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> <img data-name="Raised Hands" data-slug="raised_hands" data-position="4" src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> <img data-name="Fire" data-slug="fire" data-position="5" src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </div> </body> </html>

CINXE.COM

Alvaro Montoro - DEV Community