A Pen by Matt Daniel Brown on CodePen.
A Pen by Matt Daniel Brown on CodePen.
This file contains 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 role="banner" class="ui-section-header"> | |
<div class="ui-layout-container"> | |
<div class="ui-section-header__layout ui-layout-flex"> | |
<!-- LOGO --> | |
<a href="#" role="link" aria-label="#" class="ui-section-header--logo"> | |
<svg viewBox="0 0 18 18" height="18" width="18" role="img" aria-label="#"> | |
<path fill="#353535" d="M0 0h4.5v9a4.5 4.5 0 109 0V6H18v3A9 9 0 110 9V0zm18 4.5V0h-4.5v4.5H18z" /> | |
</svg> | |
</a> | |
<!-- HAMBURGER --> |
This file contains 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
<a href="https://youtu.be/0Wx9QbRQYuI" target="_blank" data-keyframers-credit style="color: #000"></a> | |
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script> | |
<form id="app" data-state="off"> | |
<div class="toggle-wrapper"> | |
<input id="toggle" name="toggle" type="checkbox"> | |
<label for="toggle" class="fancy-toggle"> | |
<div class="bg"></div> | |
<div class="circle"> | |
<svg viewBox="0 0 100 100"> |
This file contains 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 class="btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" width="75" height="75" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#fff"> | |
<mask id="m"> | |
<circle class="masker" cx="7.5" cy="7.5" r="8.5" fill="#fff" /> | |
</mask> | |
<g mask="url(#m)"> | |
<path class="sun" d="M7.5 1.5v-1m0 13.99v-.998m6-5.997h1m-13 0h-1m2-4.996l-1-1m12 0l-1 1m-10 9.993l-1 1m12 0l-1-1m-2-4.997a2.999 2.999 0 01-3 2.998 2.999 2.999 0 113-2.998z" /> | |
</g> | |
<path class="moon" d="M1.66 11.362A6.5 6.5 0 007.693.502a7 7 0 11-6.031 10.86z" /> | |
</svg> |
This file contains 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
<body class="flex items-center justify-center w-screen min-h-screen p-10"> | |
<!-- Resice the preview panel to check the responsiveness --> | |
<!-- Component Start --> | |
<div class="grid xl:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-2 max-w-6xl"> | |
<!-- Tile 1 --> | |
<div class="flex flex-col bg-gray-200 rounded-lg p-4 m-2"> | |
<div class="h-40 bg-gray-400 rounded-lg"></div> | |
<div class="flex flex-col items-start mt-4"> | |
<h4 class="text-xl font-semibold">Heading</h4> |
This file contains 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
<label class="switch"> | |
<input type="checkbox"> | |
<div> | |
<span></span> | |
</div> | |
</label> | |
<label class="switch"> | |
<input type="checkbox" checked> | |
<div> |
Article on CodyHouse: https://codyhouse.co/nuggets/responsive-typography
A Pen by Matt Daniel Brown on CodePen.
NewerOlder