A Pen by Jorge Bucaran on CodePen.
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
<!-- Animation credits: https://www.youtube.com/watch?v=8RxtQGoCu30 --> | |
<!-- DixonBaxi — http://dixonbaxi.com/ --> | |
<div class="pl"> | |
<i class="pl__bg js-bg" style="background-image: url('data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABRAAD/4QMvaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzEzOCA3OS4xNTk4MjQsIDIwMTYvMDkvMTQtMDE6MDk6MDEgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE3IE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxQzdBRDIwMzQ5MkMxMUU4OTREOUY0M0U0N0VENzlEQiIgeG1wTU06RG9j |
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
<div id="root"> | |
<section class="py-auto px-auto bg-white sm:py-16 lg:py-12"> | |
<div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8"> | |
<div> | |
<svg class="w-64 h-48 mx-auto" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg87303" viewBox="0 0 1024 768" height="50%" width="1024px" version="1.1"> | |
<metadata id="metadata87309"> | |
<rdf:rdf> | |
<cc:work rdf:about=""> | |
<dc:format>image/svg+xml</dc:format> | |
<dc:type rdf:resource="http:w//purl.org/dc/dcmitype/StillImage"></dc:type> |
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
<div class="app"> | |
<div class="cardList"> | |
<button class="cardList__btn btn btn--left"> | |
<div class="icon"> | |
<svg> | |
<use xlink:href="#arrow-left"></use> | |
</svg> | |
</div> |
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
<div id="root"></div> |
A Pen by Noel Delgado on CodePen.
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
{"text": "puppy A is happy", "metadata": "emotional state of puppy A"} | |
{"text": "puppy B is sad", "metadata": "emotional state of puppy B"} |
A Pen by Valery Alikin on CodePen.
Golden Ratio Layout, 4 Colors and 8 Font Size Visual Hierarchy, Perfect Fifth Typographic Scale, GSAP, GSAP ScrollTrigger, Loading Animation, jQuery, Desktop and Mobile Responsive.
A Pen by Ayush Shukla on CodePen.
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
<div class="job"> | |
<div class="header"> | |
<div class="logo"> | |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> | |
<path xmlns="http://www.w3.org/2000/svg" d="M512 503.5H381.7a48 48 0 01-45.3-32.1L265 268.1l-9-25.5 2.7-124.6L338.2 8.5l23.5 67.1L512 503.5z" fill="#0473ff" data-original="#28b446" /> | |
<path xmlns="http://www.w3.org/2000/svg" fill="#0473ff" data-original="#219b38" d="M361.7 75.6L265 268.1l-9-25.5 2.7-124.6L338.2 8.5z" /> | |
<path xmlns="http://www.w3.org/2000/svg" d="M338.2 8.5l-82.2 234-80.4 228.9a48 48 0 01-45.3 32.1H0l173.8-495h164.4z" fill="#0473ff" data-original="#518ef8" /> | |
</svg> | |
Milao | |
</div> |