<body class="body is--cursor">
<section class="styleguide">
<div class="container is--medium">
<div class="styleguide__list">
<h1>Heading H1</h1>
<div class="line"></div>
<h2>Heading H2</h2>
<div class="line"></div>
<h3>Heading H3</h3>
<div class="line"></div>
<h4>Heading H4</h4>
<div class="line"></div>
<h5>Heading H5</h5>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, <a href="#">all links in the website</a>, eros dolor interdum nulla, ut commodo diam libero vitae erat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. <br><br><strong>Neque porro quisquam est<br></strong>Qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </p>
<div class="line"></div>
<div class="btn-wrap">
<a href="#" class="btn w-inline-block">
<div class="btn__text">
<p class="btn__text-p">Primary Button</p>
</div>
</a>
<a href="#" class="btn is--secondary w-inline-block">
<div class="btn__text">
<p class="btn__text-p">Secondary Button</p>
</div>
</a>
</div>
</div>
</div>
</section>
<div class="osmo-ui">
<header class="header">
<div class="container is--full">
<nav class="nav-row">
<a href="https://osmo.supply/" aria-label="home" target="_blank" class="nav-logo-row w-inline-block"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 66 20" fill="none" class="nav-logo__wordmark">
<path d="M9.67499 19.3499C4.32499 19.3499 0.899994 15.4249 0.899994 10.0499C0.899994 4.6749 4.32499 0.774902 9.67499 0.774902C15.025 0.774902 18.45 4.6749 18.45 10.0499C18.45 15.4249 15.025 19.3499 9.67499 19.3499ZM3.77499 10.0499C3.77499 13.7249 5.44999 16.9749 9.67499 16.9749C13.9 16.9749 15.575 13.7249 15.575 10.0499C15.575 6.3749 13.9 3.1499 9.67499 3.1499C5.44999 3.1499 3.77499 6.3749 3.77499 10.0499Z" fill="currentColor"></path>
<path d="M25.7115 19.3499C21.8365 19.3499 19.9115 17.3499 19.8365 14.7499H22.3115C22.4115 16.2249 23.3115 17.3749 25.6865 17.3749C27.8365 17.3749 28.4115 16.4249 28.4115 15.4999C28.4115 13.8999 26.7115 13.7249 25.0615 13.3749C22.8365 12.8499 20.2865 12.1999 20.2865 9.5499C20.2865 7.3499 22.0615 5.8749 25.1365 5.8749C28.6365 5.8749 30.3115 7.7499 30.4865 9.9499H28.0115C27.8365 8.9749 27.3115 7.8499 25.1865 7.8499C23.5365 7.8499 22.8365 8.4999 22.8365 9.4499C22.8365 10.7749 24.2615 10.8999 26.0615 11.2999C28.4115 11.8499 30.9615 12.5249 30.9615 15.3749C30.9615 17.8499 29.0615 19.3499 25.7115 19.3499Z" fill="currentColor"></path>
<path d="M40.5435 10.8249C40.5435 9.1249 40.1935 7.9749 38.3186 7.9749C36.4936 7.9749 35.3435 9.2499 35.3435 11.1749V18.9999H32.8935V6.2499H35.3435V7.8499H35.3935C36.0685 6.8749 37.2435 5.8749 39.1685 5.8749C40.9435 5.8749 42.0435 6.6749 42.5435 8.0999H42.5935C43.5185 6.8749 44.8185 5.8749 46.7685 5.8749C49.3435 5.8749 50.6436 7.4249 50.6436 10.1499V18.9999H48.1936V10.8249C48.1936 9.1249 47.8435 7.9749 45.9685 7.9749C44.1435 7.9749 42.9935 9.2499 42.9935 11.1749V18.9999H40.5435V10.8249Z" fill="currentColor"></path>
<path d="M59.0281 19.3749C55.0531 19.3749 52.6531 16.6249 52.6531 12.6249C52.6531 8.6499 55.0531 5.8499 59.0531 5.8499C63.0031 5.8499 65.4031 8.6249 65.4031 12.5999C65.4031 16.5999 63.0031 19.3749 59.0281 19.3749ZM55.2031 12.6249C55.2031 15.2749 56.4031 17.3499 59.0531 17.3499C61.6531 17.3499 62.8531 15.2749 62.8531 12.6249C62.8531 9.9499 61.6531 7.8999 59.0531 7.8999C56.4031 7.8999 55.2031 9.9499 55.2031 12.6249Z" fill="currentColor"></path>
</svg><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 160 160" fill="none" class="nav-logo__icon">
<path d="M94.8284 53.8578C92.3086 56.3776 88 54.593 88 51.0294V0H72V59.9999C72 66.6273 66.6274 71.9999 60 71.9999H0V87.9999H51.0294C54.5931 87.9999 56.3777 92.3085 53.8579 94.8283L18.3431 130.343L29.6569 141.657L65.1717 106.142C67.684 103.63 71.9745 105.396 72 108.939V160L88.0001 160L88 99.9999C88 93.3725 93.3726 87.9999 100 87.9999H160V71.9999H108.939C105.407 71.9745 103.64 67.7091 106.12 65.1938L106.142 65.1716L141.657 29.6568L130.343 18.3432L94.8284 53.8578Z" fill="currentColor"></path>
</svg></a>
<div class="nav-row__right">
<a id="ext-dennis" href="https://osmo.supply/" target="_blank" class="website-link is--alt w-inline-block">
<div class="website-link__arrow"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 18 18" fill="none" class="website-link__arrow-svg">
<path d="M10.1001 13.68L15.1401 8.63997L10.1001 3.59998" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"></path>
<path d="M15.14 8.63989H1.45996" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"></path>
</svg><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 18 18" fill="none" class="website-link__arrow-svg is--duplicate">
<path d="M10.1001 13.68L15.1401 8.63997L10.1001 3.59998" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"></path>
<path d="M15.14 8.63989H1.45996" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"></path>
</svg></div>
<p class="inline-link__p">osmo.supply</p>
</a>
</div>
</nav>
</div>
<div class="osmo-ui__bg is--header"></div>
</header>
<footer class="footer">
<div class="container is--full">
<div class="footer-row">
<div class="cloneable-title">
<p class="cloneable-title__nr">Nr.008</p>
<h1 class="cloneable-title__h1">Osmo Scaling System</h1>
<div class="cloneable-title__gradient"></div>
</div>
<a href="https://webflow.com/made-in-webflow/website/osmo-scaling-system" target="_blank" class="clone-in-webflow w-inline-block">
<p class="clone-in-webflow__p">Clone in Webflow</p><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 16" fill="none" class="webflow-logo-svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 0.421143L16.3418 15.5791H9.14881L12.3537 9.29697H12.2099C9.56588 12.7722 5.62093 15.0599 0 15.5791V9.3839C0 9.3839 3.59586 9.16887 5.70976 6.91862H0V0.421256H6.41714V5.76525L6.56118 5.76465L9.18344 0.421256H14.0365V5.73136L14.1807 5.73113L16.9014 0.421143H24Z" fill="currentColor"></path>
</svg>
</a>
</div>
</div>
<div class="osmo-ui__bg"></div>
</footer>
</div>
</body>
/* ------------------------- Osmo [https://osmo.supply/] ------------------------- */
/* ------------------------- Variables ------------------------------------------- */
:root {
--color-light: var(--color-neutral-200);
--color-dark: var(--color-neutral-800);
--color-primary: #ff4c24;
--color-neutral-100: #ffffff;
--color-neutral-200: #efeeec;
--color-neutral-300: #e3e1de;
--color-neutral-400: #cbc8c5;
--color-neutral-500: #818180;
--color-neutral-600: #2c2c2c;
--color-neutral-700: #1f1f1f;
--color-neutral-800: #131313;
--color-neutral-900: #000000;
--color-white: var(--color-neutral-100);
--color-black: var(--color-neutral-900);
--color-error: var(--color-primary);
--color-success: #0ba954;
--cubic-default: cubic-bezier(0.65, 0.05, 0, 1);
--duration-default: 0.735s;
--animation-default: var(--duration-default) var(--cubic-default);
--gap: 2em;
--section-padding: calc(3.5em + (var(--gap) * 2));
--container-padding: 2em;
--header-height: calc(1.5em + (var(--gap) * 2));
--footer-height: calc(2.785em + (var(--gap) * 2));
}
/* Tablet */
@media screen and (max-width: 991px) {
:root {
--container-padding: 1.5em;
}
}
/* Mobile Landscape */
@media screen and (max-width: 767px) {
:root {
--container-padding: 1em;
--section-padding: calc(var(--gap) * 2);
}
}
/* Mobile Portrait */
@media screen and (max-width: 479px) {
:root {
}
}
/* ------------------------- Scaling System by Osmo [https://osmo.supply/] ------------------------- */
/* Desktop */
:root {
--size-unit: 16; /* body font-size in design - no px */
--size-container-ideal: 1440; /* screen-size in design - no px */
--size-container-min: 992px;
--size-container-max: 1920px;
--size-container: clamp(
var(--size-container-min),
100vw,
var(--size-container-max)
);
--size-font: calc(
var(--size-container) / (var(--size-container-ideal) / var(--size-unit))
);
}
/* Tablet */
@media screen and (max-width: 991px) {
:root {
--size-container-ideal: 834; /* screen-size in design - no px */
--size-container-min: 768px;
--size-container-max: 991px;
}
}
/* Mobile Landscape */
@media screen and (max-width: 767px) {
:root {
--size-container-ideal: 390; /* screen-size in design - no px */
--size-container-min: 480px;
--size-container-max: 767px;
}
}
/* Mobile Portrait */
@media screen and (max-width: 479px) {
:root {
--size-container-ideal: 440; /* screen-size in design - no px */
--size-container-min: 0px;
--size-container-max: 479px;
}
}
/* ------------------------- Hide Scrollbar -------------------------------------------------- */
body ::scrollbar,
body::scrollbar {
display: none;
} /* Chrome, Safari, Opera */
body {
overflow-style: none;
} /* IE & Edge */
html {
scrollbar-width: none;
} /* Firefox */
/* ------------------------- Reset -------------------------------------------------- */
*,
*:after,
*:before {
box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
}
html {
scroll-behavior: initial;
}
html,
body {
font-smoothing: antialiased;
}
svg {
max-width: none;
height: auto;
box-sizing: border-box;
vertical-align: middle;
}
a {
color: inherit;
}
/* Selection */
::selection {
background-color: var(--color-primary);
color: var(--color-dark);
text-shadow: none;
}
::selection {
background-color: var(--color-primary);
color: var(--color-dark);
text-shadow: none;
}
body {
color: #333;
font-family: "PP Neue Montreal", Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: var(--size-font);
line-height: 1;
font-weight: 500;
}
h1 {
margin-top: 0;
margin-bottom: 0;
font-size: 7.5em;
font-weight: 500;
line-height: 1;
}
h2 {
margin-top: 0;
margin-bottom: 0;
font-size: 5em;
font-weight: 500;
line-height: 1.05;
}
h3 {
margin-top: 0;
margin-bottom: 0;
font-size: 2.5em;
font-weight: 500;
line-height: 1.1;
}
h4 {
margin-top: 10px;
margin-bottom: 10px;
font-size: 1.75em;
font-weight: 500;
line-height: 1.15;
}
h5 {
margin-top: 10px;
margin-bottom: 10px;
font-size: 1.25em;
font-weight: 500;
line-height: 1.2;
}
p {
margin-bottom: 0;
margin-top: 0;
font-size: 1em;
font-weight: 400;
line-height: 1.4;
font-weight: 500;
}
a {
color: inherit;
text-decoration: underline;
}
strong {
font-weight: 600;
}
.body {
background-color: var(--color-neutral-300);
color: var(--color-dark);
font-family: PP Neue Montreal, Arial, sans-serif;
font-weight: 500;
line-height: 1;
}
.body.is--dark {
background-color: var(--color-black);
color: var(--color-light);
}
.code-embed-css {
pointer-events: none;
font-size: var(--size-font);
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.code-embed-osmo,
.code-embed-js {
pointer-events: none;
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.osmo-ui {
z-index: 100;
pointer-events: none;
flex-flow: column;
justify-content: space-between;
align-items: stretch;
display: flex;
position: fixed;
inset: 0;
}
.nav-row {
justify-content: space-between;
align-items: center;
width: 100%;
display: flex;
}
.nav-logo-row {
pointer-events: auto;
justify-content: space-between;
align-items: center;
width: 13em;
display: flex;
}
.nav-logo__wordmark {
width: 4em;
}
.nav-logo__icon {
width: 1.5em;
height: 1.5em;
}
.container {
z-index: 1;
max-width: var(--size-container);
padding-left: var(--container-padding);
padding-right: var(--container-padding);
width: 100%;
margin-left: auto;
margin-right: auto;
position: relative;
}
.container.is--full {
max-width: 100%;
}
.container.is--medium {
max-width: calc(var(--size-container) * 0.85);
}
.container.is--small {
max-width: calc(var(--size-container) * 0.7);
}
.nav-row__right {
grid-column-gap: 0.625rem;
grid-row-gap: 0.625rem;
pointer-events: auto;
justify-content: flex-end;
align-items: center;
display: flex;
}
.header {
padding-top: var(--gap);
position: relative;
}
.website-link {
white-space: nowrap;
text-decoration: none;
position: relative;
}
.website-link.is--alt {
grid-column-gap: 0.25em;
grid-row-gap: 0.25em;
justify-content: flex-start;
align-items: center;
height: 1.5em;
display: flex;
}
.inline-link__p {
margin-bottom: 0;
}
.website-link__arrow-svg {
width: 1em;
margin-top: 0.2em;
}
.website-link__arrow-svg.is--duplicate {
position: absolute;
right: 100%;
}
.website-link__arrow {
position: relative;
overflow: hidden;
}
.cloneable {
padding: var(--section-padding) var(--container-padding);
justify-content: center;
align-items: center;
min-height: 100svh;
display: flex;
position: relative;
}
.footer {
padding-bottom: var(--gap);
position: relative;
}
.footer-row {
justify-content: space-between;
align-items: flex-end;
display: flex;
}
.cloneable-title {
grid-column-gap: 0.5em;
grid-row-gap: 0.5em;
pointer-events: auto;
display: flex;
position: relative;
}
.cloneable-title__nr {
opacity: 0.5;
white-space: nowrap;
margin-bottom: 0;
font-size: 1em;
font-weight: 500;
line-height: 1;
}
.cloneable-title__h1 {
white-space: nowrap;
margin-top: 0;
margin-bottom: 0;
font-size: 1em;
font-weight: 500;
line-height: 1;
}
.clone-in-webflow {
grid-column-gap: 0.75em;
grid-row-gap: 0.75em;
background-color: var(--color-light);
pointer-events: auto;
border-radius: 0.25em;
justify-content: space-between;
align-items: center;
width: 21.25em;
height: 2.875em;
margin-bottom: -1em;
margin-right: -1em;
padding-left: 1em;
padding-right: 0.75em;
text-decoration: none;
display: flex;
}
.clone-in-webflow__p {
margin-bottom: 0;
font-size: 1em;
}
.webflow-logo-svg {
flex-shrink: 0;
width: 1.5em;
}
.cloneable-title__gradient {
background-image: linear-gradient(
270deg,
var(--color-neutral-200),
transparent
);
width: 1em;
height: 100%;
display: none;
position: absolute;
top: 0;
right: 0;
}
.osmo-ui__bg {
border-top-style: solid;
border-top-width: 1px;
border-top-color: var(--color-neutral-400);
background-color: var(--color-neutral-300);
height: calc(100% + 1px + (var(--gap) * 0.5));
width: 100%;
display: block;
position: absolute;
bottom: 0;
}
.osmo-ui__bg.is--header {
border-top-style: none;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: var(--color-neutral-400);
height: calc(100% + 1px + var(--gap));
top: 0;
bottom: auto;
}
.osmo-icon-svg {
width: 8em;
}
.styleguide {
padding-bottom: calc(var(--footer-height) + var(--section-padding));
padding-top: calc(var(--header-height) + var(--section-padding));
flex-flow: column;
justify-content: center;
align-items: center;
display: block;
}
.styleguide p {
font-weight: 400;
}
.btn {
background-color: var(--color-primary);
color: var(--color-light);
border-radius: 0.25em;
flex: 0 auto;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
padding: 0.75em 1.5em;
line-height: 1;
text-decoration: none;
display: inline-block;
}
.btn:hover {
text-decoration: none;
}
.btn.is--secondary {
background-color: var(--color-dark);
}
.btn-wrap {
grid-column-gap: 0.5em;
grid-row-gap: 0.5em;
flex-wrap: wrap;
align-items: flex-start;
display: flex;
position: relative;
}
.line {
background-color: #c4c4ca;
width: 100%;
height: 1px;
position: static;
}
.btn__text-p {
margin-bottom: 0;
}
.styleguide__list {
grid-column-gap: 2em;
grid-row-gap: 2em;
flex-flow: column;
width: 100%;
display: flex;
position: relative;
}
@media screen and (max-width: 991px) {
.container.is--medium,
.container.is--small {
max-width: calc(var(--size-container) * 1);
}
.clone-in-webflow {
margin-right: -0.5em;
}
}
@media screen and (max-width: 767px) {
h1 {
font-size: 4em;
}
h2 {
font-size: 3.25em;
}
.osmo-ui {
position: fixed;
}
.nav-logo-row {
grid-column-gap: 2.5em;
grid-row-gap: 2.5em;
width: auto;
}
.nav-row__right {
grid-column-gap: 0rem;
grid-row-gap: 0rem;
}
.cloneable-title {
pointer-events: none;
width: calc(100% - 5.25em);
padding-left: 1em;
position: absolute;
overflow: hidden;
}
.cloneable-title__nr,
.cloneable-title__h1 {
font-size: 0.875em;
}
.clone-in-webflow {
justify-content: flex-end;
width: 100%;
margin-right: 0;
padding-left: 0.75em;
}
.clone-in-webflow__p {
display: none;
}
.cloneable-title__gradient,
.osmo-ui__bg {
display: block;
}
}
@font-face {
font-family: "PP Neue Montreal";
src: url("https://cdn.prod.website-files.com/6756bf75aa4ecba10df0a4e9/6756bf75aa4ecba10df0a546_PPNeueMontreal-Regular.woff2")
format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "PP Neue Montreal";
src: url("https://cdn.prod.website-files.com/6756bf75aa4ecba10df0a4e9/6756bf75aa4ecba10df0a54e_PPNeueMontreal-Medium.woff2")
format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "PP Neue Montreal";
src: url("https://cdn.prod.website-files.com/6756bf75aa4ecba10df0a4e9/6756bf75aa4ecba10df0a543_PPNeueMontreal-SemiBold.woff2")
format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.