A Pen by Mads Stoumann on CodePen.
eriknorris
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Elements extended - filtering & sorting </h1> | |
| <h2>Filter</h2> | |
| <div id="filters" class="button-group"> <button class="button is-checked" data-filter="*">show all</button> | |
| <button class="button" data-filter=".Alkali, .Alkaline">alkali and alkaline-earth</button> | |
| <button class="button" data-filter=".Transition">transition</button> | |
| <button class="button" data-filter=".Basic ">basic metals</button> | |
| <button class="button" data-filter=".Semi">semi metals</button> | |
| <button class="button" data-filter=":not(.Metal,.Basic,.Semi,.Alkaline,.Alkali)">non-metals</button> | |
| <button class="button" data-filter=".Halogen">halogens</button> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- svg is defined here because of a Safari bug with <use> --> | |
| <svg> | |
| <defs> | |
| <g id="p"> | |
| <path opacity=".2" d="M0 2h252s-3.3 40.7-2.7 128.3C249 216 252 272 252 272s-88-2-124.3-2C91.3 270 0 272 0 272V0z"/><path fill="#f4f3f1" d="M0 0h248v270H0z"/><path fill="#4f5150" d="M8 10h233v203H8z"/> | |
| </g> | |
| <g id="polaroid"> | |
| <use xlink:href="#p" transform="rotate(15)" x="175" y="50"/> | |
| <use xlink:href="#p" transform="rotate(-5)" x="5" y="25"/> | |
| </g> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <article> | |
| <header> | |
| <h1>Summer <span>at the</span> Beach</h1> | |
| </header> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, aliquam error! Nisi repellat corrupti totam dolores facere magni incidunt ad explicabo, ut unde eos quaerat neque perferendis beatae eaque animi!</p> | |
| <figure> | |
| <div> | |
| <img class="develop-photo" src="https://images.unsplash.com/photo-1501426026826-31c667bdf23d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTA5OTE2ODF8&ixlib=rb-4.0.3&q=80&w=400" alt="A pink flamingo floater toy floating on ocean water. " title="Photo by Vicko Mozara for Unsplash"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Scroll Animation Challenge</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <header> | |
| <ul> | |
| <li> | |
| <img src="https://assets.codepen.io/1149983/whitehousedark.jpeg" alt="The White House" /> | |
| </li> | |
| <li> | |
| <img src="https://assets.codepen.io/1149983/presidents.png" alt="Headshots of presidents" /> | |
| </li> | |
| </ul> |
eriknorris
/ css-image-gallery-side-scroll.markdown
Created
July 5, 2024 22:05
CSS Image gallery side scroll
A Pen by Christian Thorvik on CodePen.
eriknorris
/ horizontal-scroll-a-la-willy-brauner.markdown
Created
July 5, 2024 22:04
Horizontal Scroll à la Willy Brauner
Stumbled across Willy's beautiful site on the same week that the challenge was to make something with horizontal scrolling. So, I set out to rebuild it with liberal use of GSAP.js
Inspiration: https://willybrauner.com/
A Pen by Tom Miller on CodePen.
A Pen by Diana Moretti on CodePen.
As we all know animation in websites is popular these days as it makes sites look effective, we have prepared an list-hover animation with HTML, CSS, Jquery, and gsap to make the site look lovely. Feel free to use the code.
Made by Piyush Kamble from Yudiz
A Pen by Yudiz Solutions Limited on CodePen.
NewerOlder