mirror of
https://github.com/bansal-io/pattern.css.git
synced 2025-01-17 04:28:16 +01:00
814 lines
47 KiB
HTML
814 lines
47 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="https://unpkg.com/shorthandcss@1.1.1/dist/shorthand.min.css">
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet">
|
|
<link href="dist/pattern.css" rel="stylesheet">
|
|
<title>Background Patterns in CSS</title>
|
|
<meta name="description" content="CSS only library to fill your empty background with beautiful patterns.">
|
|
<style>
|
|
code{
|
|
font-family: monospace;
|
|
color: red;
|
|
}
|
|
aside{
|
|
width:250px;
|
|
}
|
|
.content{
|
|
left:280px;
|
|
}
|
|
@media screen and (max-width: 567px){
|
|
.content{
|
|
left:0;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body class="h-100pc roboto bg-slategray-darkest">
|
|
<a href="#sidebar" id="sidebar-toggle"
|
|
class="fixed left-0 bottom-0 m-3 w-l2 h-l2 z-2000 flex justify-center items-center bg-black white br-0 after-menu no-underline after-scale-up-2 sm-hidden"></a>
|
|
<main class="block relative w-100vw h-100pc z-0">
|
|
<aside id="sidebar-container" class="fixed-left z-100 ml--100pc sm-ml-0 bg-slategray-darkest ease-500">
|
|
<nav id="nav" class="p-5 fixed h-100vh sm-w-30pc md-w-20pc overflow-scroll">
|
|
<div class="fs-s2 flex flex-column">
|
|
<a href="#introduction"
|
|
class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Introduction</a>
|
|
<a href="#installation"
|
|
class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Installation</a>
|
|
<a href="#usage" class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Usage</a>
|
|
<a href="#browser-support" class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Browser support</a>
|
|
</div>
|
|
<div class="fs-s2 fw-600 ls-5 green-light opacity-80 mt-5">EXAMPLES</div>
|
|
<div class="fs-s2 flex flex-column">
|
|
<a href="#hero" class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Hero
|
|
Background</a>
|
|
<a href="#separator" class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Separator</a>
|
|
<a href="#font" class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Font</a>
|
|
<a href="#image" class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Image</a>
|
|
</div>
|
|
<div class="fs-s2 fw-600 ls-5 green-light opacity-80 mt-5">PATTERNS</div>
|
|
<div class="fs-s2 flex flex-column">
|
|
<a href="#checks" class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Checks</a>
|
|
<a href="#grid" class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Grid</a>
|
|
<a href="#dots" class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Dots</a>
|
|
<a href="#cross-dots" class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Cross
|
|
Dots</a>
|
|
<a href="#diagonal-lines"
|
|
class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Diagonal Lines</a>
|
|
<a href="#vertical-lines"
|
|
class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Vertical Lines</a>
|
|
<a href="#horizontal-lines"
|
|
class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Horizontal Lines</a>
|
|
<a href="#diagonal-stripes"
|
|
class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Diagonal Stripes</a>
|
|
<a href="#vertical-stripes"
|
|
class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Vertical Stripes</a>
|
|
<a href="#horizontal-stripes"
|
|
class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Horizontal Stripes</a>
|
|
<a href="#triangles"
|
|
class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Triangles</a>
|
|
<a href="#zigzag" class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Zigzag</a>
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
<section class="content absolute top-0 bottom-0 right-0">
|
|
<section id="introduction"
|
|
class="block w-100pc h-100vh pattern-vertical-lines-lg gray-lighter flex justify-center items-center bg-white br-16">
|
|
<div class="text-center">
|
|
<h1 class="bg-green-light green-darkest pattern-diagonal-lines-sm text-pattern fs-l5 md-fs-xl3 fw-800">
|
|
pattern.css
|
|
</h1>
|
|
<p class="green-darker">CSS only library to fill your empty background with beautiful patterns. </p>
|
|
<div class="mt-5">
|
|
<a href="https://github.com/bansal-io/pattern.css/master/dist/pattern.min.css" target="_blank"
|
|
class="slategray-darker fs-s2">Download (< 1kb gzip) </a>
|
|
</div>
|
|
<div class="mt-10">
|
|
<a href="#installation"
|
|
class="button-lg bg-green-light green-darkest br-0 no-underline ls-wide fs-s2 uppercase focus-green hover-opacity-100 hover-shift-t-4 ease-300">
|
|
Get Start
|
|
</a>
|
|
<a href="https://github.com/bansal-io/pattern.css"
|
|
class="button-lg bg-slategray-darkest green-lighter br-0 no-underline ls-wide fs-s2 uppercase focus-green hover-opacity-100 hover-shift-t-4 ease-300">
|
|
View on Github
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="p-5 md-p-l5">
|
|
<div class="flex flex-wrap">
|
|
<div class="w-25pc h-1by1 pattern-checks-md teal-light bg-teal-dark"></div>
|
|
<div class="w-25pc h-1by1 pattern-grid-md red bg-white"></div>
|
|
<div class="w-25pc h-1by1 pattern-dots-md yellow bg-indigo"></div>
|
|
<div class="w-25pc h-1by1 pattern-cross-dots-md white bg-black"></div>
|
|
<div class="w-25pc h-1by1 pattern-diagonal-lines-sm red bg-black"></div>
|
|
<div class="w-25pc h-1by1 pattern-horizontal-lines-sm yellow bg-wine"></div>
|
|
<div class="w-25pc h-1by1 pattern-vertical-lines-md indigo-dark bg-blue-light"></div>
|
|
<div class="w-25pc h-1by1 pattern-diagonal-stripes-sm white bg-blue"></div>
|
|
<div class="w-25pc h-1by1 pattern-horizontal-stripes-sm white bg-indigo"></div>
|
|
<div class="w-25pc h-1by1 pattern-vertical-stripes-sm purple-darkest bg-red-light"></div>
|
|
<div class="w-25pc h-1by1 pattern-triangles-lg yellow bg-indigo"></div>
|
|
<div class="w-25pc h-1by1 pattern-zigzag-sm yellow bg-red"></div>
|
|
</div>
|
|
</section>
|
|
<section id="installation" class="p-10">
|
|
<div class="text-center">
|
|
<h1 class="green-lighter fs-l3 fw-800 lh-1 my-10">Installation</h1>
|
|
<div class=" bg-slategray-lightest p-5 br-8 fs-s2">
|
|
<p class="mt-5 slategray-dark">1. pattern.css is available via <a class="green-dark"
|
|
href="https://npmjs.com/">npm</a></p>
|
|
<div class="br-6 bg-slategray-darker p-5 mt-5">
|
|
<pre class="w-100pc overflow-scroll green-light">npm install pattern.css</pre>
|
|
</div>
|
|
<p class="mt-8 slategray-dark">2. Or you can use cdn <a class="green-dark"
|
|
href="https://unpkg.com/shorthandcss">unpkg</a></p>
|
|
<div class="br-6 bg-slategray-darker p-5 mt-5">
|
|
<pre
|
|
class="w-100pc overflow-scroll green-light"><link href="https://unpkg.com/pattern.css" rel="stylesheet"></pre>
|
|
</div>
|
|
<p class="mt-8 slategray-dark">3. Or <a class="green-dark"
|
|
href="https://unpkg.com/shorthandcss">Download</a> and include in head</p>
|
|
<div class="br-6 bg-slategray-darker p-5 mt-5">
|
|
<pre
|
|
class="w-100pc overflow-scroll green-light"><link href="dist/pattern.min.css" rel="stylesheet"></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="usage" class="p-10">
|
|
<div>
|
|
<h1 class="green-lighter fs-l3 fw-800 lh-1 my-10 text-center">Usage</h1>
|
|
<div class=" bg-slategray-lightest p-8 br-8 fs-s1 text-left">
|
|
<div class="bg-indigo yellow px-5 py-3 br-3 border-l bw-6 bc-yellow">
|
|
Examples in documentation are built using <a href="https://shorthandcss.com" class="white">shorthand framework</a> but this library works with most of the frameworks including bootstrap.
|
|
</div>
|
|
<p class="mt-5 slategray-dark">There are many possible designs that can be built with css to use as patterns but I have made only few styles that are commonly seen in many award winning website.
|
|
<br />
|
|
<br />
|
|
Any background pattern works with two or more colors. I made with library with considering two color patterns only.
|
|
|
|
</p>
|
|
<h2 class="mt-8">Colors</h2>
|
|
<p class="mt-5 slategray-dark">
|
|
pattern.css is built with two colors only <code>transparent</code> and <code>currentColor</code>.
|
|
<br/>
|
|
<br/>
|
|
currentColor is the current active text color inside a element. To change the color just change the text color property.
|
|
<br>
|
|
<br>
|
|
To change the another color just change the background color, and background color will be visible through transparent color
|
|
</p>
|
|
<h3 class="mt-8 mb-5">Example</h3>
|
|
<small>With <a href="https://shorthandcss.com">shorthand framework</a></small>
|
|
<div class="br-6 bg-slategray-darker p-5 mb-5">
|
|
<pre class="w-100pc overflow-scroll green-light"><div class="pattern-checks-sm bg-blue white">...</div></pre>
|
|
</div>
|
|
<small class="mb-5">With <a href="https://shorthandcss.com">bootstrap framework</a></small>
|
|
<div class="br-6 bg-slategray-darker p-5 mb-5">
|
|
<pre class="w-100pc overflow-scroll green-light"><div class="pattern-checks-sm bg-primary text-white">...</div></pre>
|
|
</div>
|
|
<h2 class="mt-8 mb-5">Size</h2>
|
|
<p class="mt-5 slategray-dark">Each pattern is available in 4 sizes <code>sm</code>, <code>md</code>, <code>lg</code>, and <code>xl</code></p>
|
|
<div class="flex flex-column">
|
|
<div class="p-5 my-3 pattern-diagonal-stripes-sm red bg-orange text-center"> <span class="lh-5 black bg-white-40 px-3 py-2 br-3 mono">.pattern-diagonal-stripes-sm</span></div>
|
|
<div class="p-5 my-3 pattern-diagonal-stripes-md red bg-orange text-center"> <span class="lh-5 black bg-white-40 px-3 py-2 br-3 mono">.pattern-diagonal-stripes-md</span></div>
|
|
<div class="p-5 my-3 pattern-diagonal-stripes-lg red bg-orange text-center"> <span class="lh-5 black bg-white-40 px-3 py-2 br-3 mono">.pattern-diagonal-stripes-lg</span></div>
|
|
<div class="p-5 my-3 pattern-diagonal-stripes-xl red bg-orange text-center"> <span class="lh-5 black bg-white-40 px-3 py-2 br-3 mono">.pattern-diagonal-stripes-xl</span></div>
|
|
</div>
|
|
<h2 class="mt-8 mb-5">Class</h2>
|
|
|
|
<div class="table-container table-head cell-border overflow-scroll">
|
|
<table>
|
|
<thead class="slategray-darker fw-400">
|
|
<tr>
|
|
<td>small</td>
|
|
<td>medium</td>
|
|
<td>large</td>
|
|
<td>extra large</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="fs-s3 opacity-60">
|
|
<tr>
|
|
<td><code>pattern-checks-sm</code></td>
|
|
<td><code>pattern-checks-md</code></td>
|
|
<td><code>pattern-checks-lg</code></td>
|
|
<td><code>pattern-checks-xl</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>pattern-grid-sm</code></td>
|
|
<td><code>pattern-grid-md</code></td>
|
|
<td><code>pattern-grid-lg</code></td>
|
|
<td><code>pattern-grid-xl</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>pattern-dots-sm</code></td>
|
|
<td><code>pattern-dots-md</code></td>
|
|
<td><code>pattern-dots-lg</code></td>
|
|
<td><code>pattern-dots-xl</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>pattern-cross-dots-sm</code></td>
|
|
<td><code>pattern-cross-dots-md</code></td>
|
|
<td><code>pattern-cross-dots-lg</code></td>
|
|
<td><code>pattern-cross-dots-xl</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>pattern-diagonal-lines-sm</code></td>
|
|
<td><code>pattern-diagonal-lines-md</code></td>
|
|
<td><code>pattern-diagonal-lines-lg</code></td>
|
|
<td><code>pattern-diagonal-lines-xl</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>pattern-horizontal-lines-sm</code></td>
|
|
<td><code>pattern-horizontal-lines-md</code></td>
|
|
<td><code>pattern-horizontal-lines-lg</code></td>
|
|
<td><code>pattern-horizontal-lines-xl</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>pattern-vertical-lines-sm</code></td>
|
|
<td><code>pattern-vertical-lines-md</code></td>
|
|
<td><code>pattern-vertical-lines-lg</code></td>
|
|
<td><code>pattern-vertical-lines-xl</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>pattern-diagonal-stripes-sm</code></td>
|
|
<td><code>pattern-diagonal-stripes-md</code></td>
|
|
<td><code>pattern-diagonal-stripes-lg</code></td>
|
|
<td><code>pattern-diagonal-stripes-xl</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>pattern-horizontal-stripes-sm</code></td>
|
|
<td><code>pattern-horizontal-stripes-md</code></td>
|
|
<td><code>pattern-horizontal-stripes-lg</code></td>
|
|
<td><code>pattern-horizontal-stripes-xl</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>pattern-vertical-stripes-sm</code></td>
|
|
<td><code>pattern-vertical-stripes-md</code></td>
|
|
<td><code>pattern-vertical-stripes-lg</code></td>
|
|
<td><code>pattern-vertical-stripes-xl</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>pattern-triangles-sm</code></td>
|
|
<td><code>pattern-triangles-md</code></td>
|
|
<td><code>pattern-triangles-lg</code></td>
|
|
<td><code>pattern-triangles-xl</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>pattern-zigzag-sm</code></td>
|
|
<td><code>pattern-zigzag-md</code></td>
|
|
<td><code>pattern-zigzag-lg</code></td>
|
|
<td><code>pattern-zigzag-xl</code></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<h2 class="white fs-l1 fw-800 lh-1 mb-5 mt-10 text-center">Browser Support</h2>
|
|
<section id="browser-support" class="br-8 bg-white m-10 p-5 slategray-darker lh-5">
|
|
pattern.css library depend on four css properties <code>linear-gradient</code>, <code>radial-gradient</code>,
|
|
<code>repeating-linear-gradient</code> and <code>repeating-radial-gradient</code>
|
|
<br> which are supported by most browsers.
|
|
You can check <a href="https://caniuse.com/#search=linear-gradient">caniuse.com</a>
|
|
</section>
|
|
<section>
|
|
<h1 class="green-lighter fs-l3 fw-800 lh-1 my-10 text-center">Examples</h1>
|
|
<h2 class="white fs-l1 fw-800 lh-1 my-5 text-center">Hero</h2>
|
|
<section id="hero" class="h-100vh pattern-vertical-lines-md yellow-light bg-yellow flex justify-center items-center bg-fixed">
|
|
<div>
|
|
<h1 class="fs-l5 text-center lh-2 black">Make Your Website <br><span class="border-b bc-blue bw-4"> More</span> Beautiful</h1>
|
|
<p class="text-center black opacity-50 fw-600 my-10">by using these simple pattern</p>
|
|
<div class="text-center">
|
|
<div class="">
|
|
<a href="#introduction" class="button-lg no-underline br-0 bg-black white fs-s3 ls-wider uppercase hover-opacity-100 focus-white hover-scale-up-1 ease-500" >
|
|
<span>Learn More</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<h2 class="white fs-l1 fw-800 lh-1 mt-5 text-center">Separator</h2>
|
|
|
|
<section id="separator" class="flex flex-column">
|
|
<div class="pattern-dots-sm slategray h-5 my-5">
|
|
</div>
|
|
<div class="pattern-checks-sm slategray h-5 my-5">
|
|
</div>
|
|
<div class="pattern-diagonal-stripes-sm slategray h-5 my-5">
|
|
</div>
|
|
<div class="w-90pc mx-auto p-5">
|
|
<div class="bg-slategray-lightest p-5 br-8">
|
|
<p class="mt-5 slategray-dark">Use pattern class and set separator height. Example; pattern <code>.pattern-dots-sm</code>, height <code>.h-5</code> and color <code>.slategray</code></p>
|
|
<div class="br-6 bg-slategray-darker p-5 mt-5">
|
|
<pre class="w-100pc overflow-scroll green-light"><div class="pattern-dots-sm slategray h-5"></div></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<h2 class="white fs-l1 fw-800 lh-1 mb-5 mt-10 text-center">Text pattern</h2>
|
|
|
|
<section id="font" class="flex flex-column pattern-dots-sm gray-darker br-16 py-l5">
|
|
<div class="w-90pc p-5 flex items-center justify-center">
|
|
<h3 class="pattern-grid-sm bg-mint white text-pattern fw-800 fs-xl3 md-fs-xl4 lh-1 text-center">
|
|
PLAY
|
|
</h3>
|
|
</div>
|
|
<div class="w-90pc mx-auto p-5">
|
|
<div class="bg-slategray-lightest p-5 br-8">
|
|
<h3 class="fw-400 fs-s1">Fill text with pattern </h3>
|
|
<p class="mt-5 slategray-dark">Use <code>.text-pattern</code> class with background
|
|
patterns to set text color as pattern</p>
|
|
<div class="br-6 bg-slategray-darker p-5 mt-5">
|
|
<pre class="w-100pc overflow-scroll green-light"><h3 class="pattern-checks-sm bg-mint white text-pattern">PLAY</h3></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="flex flex-column gray-darker br-16 py-l5">
|
|
|
|
<div class="w-90pc p-5 flex items-center justify-start">
|
|
<div class="pattern-dots-md red px-l5 py-5 max-w-20pc overflow-visible ml-5 md-ml-l5">
|
|
<h1 class="white fw-800 fs-l5 md-fs-xl3 lh-1">NEXT BEST TEXT </h1>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="w-90pc mx-auto p-5">
|
|
<div class=" bg-slategray-lightest p-5 br-8 mt-10">
|
|
<h3 class="fw-400 fs-s1">Text container pattern </h3>
|
|
<div class="br-6 bg-slategray-darker p-5 mt-5">
|
|
<pre class="w-100pc overflow-scroll green-light"><div class="pattern-dots-md red text-pattern max-w-20pc overflow-visible">
|
|
<h1 class="white">NEXT BEST TEXT</h1>
|
|
</div></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<h2 class="white fs-l1 fw-800 lh-1 mb-5 mt-10 text-center">Image Container</h2>
|
|
|
|
<section id="image" class="flex flex-column gray-darker br-16 py-l5">
|
|
<div class="w-90pc flex justify-center">
|
|
<div class="pattern-dots-md gray-light m-10">
|
|
<img class="w-100pc" style="transform:translate(30px, -30px);"
|
|
src="https://images.unsplash.com/photo-1488707872600-5507977fe355?auto=format&fit=crop&w=500&q=80"
|
|
alt="">
|
|
</div>
|
|
</div>
|
|
<div class="w-90pc mx-auto p-5">
|
|
<div class=" bg-slategray-lightest p-5 br-8 mt-10">
|
|
<h3 class="fw-400 fs-s1">Use with image</h3>
|
|
<div class="br-6 bg-slategray-darker p-5 mt-5">
|
|
<pre class="w-100pc overflow-scroll green-light"><div class="pattern-dots-md gray-light">
|
|
<img style="transform:translate(10px, -10px);" src="..."/>
|
|
</div>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="flex flex-column gray-darker br-16 py-l5">
|
|
<div class="w-75pc mx-auto flex justify-center m-5">
|
|
<div class="pattern-diagonal-lines-sm gray">
|
|
<img class="w-100pc" style="transform:translate(20px, -20px);"
|
|
src="https://images.unsplash.com/photo-1488707872600-5507977fe355?auto=format&fit=crop&w=500&q=80"
|
|
alt="">
|
|
</div>
|
|
</div>
|
|
<div class="w-90pc mx-auto mt-10">
|
|
<div class=" bg-slategray-lightest p-5 br-8">
|
|
<h3 class="fw-400 fs-s1">Another pattern with image</h3>
|
|
<div class="br-6 bg-slategray-darker p-5 mt-5">
|
|
<pre class="w-100pc overflow-scroll green-light"><div class="pattern-diagonal-lines-sm gray-lighter">
|
|
<img style="transform:translate(30px, 30px);" src="..."/>
|
|
</div>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="text-center mt-10 mb-5">
|
|
<h1 class="green-lighter fs-l3 fw-800 lh-1 my-10 text-center">Patterns</h1>
|
|
</div>
|
|
<div class="pattern-checks-md p-2 my-5 slategray-darker">
|
|
<h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">checks</h2>
|
|
</div>
|
|
<section id="checks" class="flex flex-wrap">
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-white black pattern-checks-sm">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-checks-sm
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-yellow-lighter-90 yellow-dark pattern-checks-md">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-checks-md
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 green-lighter pattern-checks-lg">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-checks-lg
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 slategray-darker pattern-checks-xl">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-checks-xl
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="pattern-diagonal-stripes-md p-2 my-5 slategray-darker">
|
|
<h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">grid</h2>
|
|
</div>
|
|
<section id="grid" class="flex flex-wrap">
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-white black pattern-grid-sm">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-grid-sm
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-pink-lighter red pattern-grid-md">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-grid-md
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 slategray-darker pattern-grid-lg">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-grid-lg
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-green-lighter slategray-darker pattern-grid-xl">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-grid-xl
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="pattern-diagonal-stripes-md p-2 my-5 slategray-darker">
|
|
<h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">dots</h2>
|
|
</div>
|
|
<section id="dots" class="flex flex-wrap">
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-white gray-light pattern-dots-sm">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-dots-sm
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-yellow-lighter red pattern-dots-md">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-dots-md
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 red pattern-dots-lg">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-dots-lg
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-white gray-light pattern-dots-xl">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-dots-xl
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="pattern-diagonal-stripes-md p-2 my-5 slategray-darker">
|
|
<h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">cross-dots</h2>
|
|
</div>
|
|
<section id="cross-dots" class="flex flex-wrap">
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-white gray-light pattern-cross-dots-sm">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-cross-dots-sm
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-yellow-lighter yellow-dark pattern-cross-dots-md">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-cross-dots-md
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-mint-lighter mint pattern-cross-dots-lg">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-cross-dots-lg
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-white gray-light pattern-cross-dots-xl">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-cross-dots-xl
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="pattern-diagonal-stripes-md p-2 my-5 slategray-darker">
|
|
<h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">diagonal-lines</h2>
|
|
</div>
|
|
<section id="diagonal-lines" class="flex flex-wrap">
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-white gray-light pattern-diagonal-lines-sm">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-diagonal-lines-sm
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-white yellow-dark pattern-diagonal-lines-md">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-diagonal-lines-md
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-black yellow-dark pattern-diagonal-lines-lg">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-diagonal-lines-lg
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-white gray-light pattern-diagonal-lines-xl">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-diagonal-lines-xl
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="pattern-diagonal-stripes-md p-2 my-5 slategray-darker">
|
|
<h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">vertical-lines</h2>
|
|
</div>
|
|
<section id="vertical-lines" class="flex flex-wrap">
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-white gray-light pattern-vertical-lines-sm">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-vertical-lines-sm
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-black yellow-dark pattern-vertical-lines-md">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-vertical-lines-md
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-red-90 black pattern-vertical-lines-lg">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-vertical-lines-lg
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-white gray-light pattern-vertical-lines-xl">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-vertical-lines-xl
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="pattern-diagonal-stripes-md p-2 my-5 slategray-darker">
|
|
<h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">horizontal-lines</h2>
|
|
</div>
|
|
<section id="horizontal-lines" class="flex flex-wrap">
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-white gray-light pattern-horizontal-lines-sm">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-horizontal-lines-sm
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-yellow-70 yellow-darkest pattern-horizontal-lines-md">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-horizontal-lines-md
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-orange white pattern-horizontal-lines-lg">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-horizontal-lines-lg
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-white gray-light pattern-horizontal-lines-xl">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-horizontal-lines-xl
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="pattern-diagonal-stripes-md p-2 my-5 slategray-darker">
|
|
<h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">diagonal-stripes</h2>
|
|
</div>
|
|
<section id="diagonal-stripes" class="flex flex-wrap">
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-white gray-lightest pattern-diagonal-stripes-sm">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-diagonal-stripes-sm
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-yellow-80 yellow-dark pattern-diagonal-stripes-md">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-diagonal-stripes-md
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-white pink-lightest pattern-diagonal-stripes-lg">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-diagonal-stripes-lg
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-yellow teal-dark pattern-diagonal-stripes-xl">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-diagonal-stripes-xl
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="pattern-diagonal-stripes-md p-2 my-5 slategray-darker">
|
|
<h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">vertical-stripes</h2>
|
|
</div>
|
|
<section id="vertical-stripes" class="flex flex-wrap">
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-white gray-lightest pattern-vertical-stripes-sm">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-vertical-stripes-sm
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-yellow-lightest yellow pattern-vertical-stripes-md">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-vertical-stripes-md
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-white indigo-lightest pattern-vertical-stripes-lg">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-vertical-stripes-lg
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 blue pattern-vertical-stripes-xl">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-vertical-stripes-xl
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="pattern-diagonal-stripes-md p-2 my-5 slategray-darker">
|
|
<h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">horizontal-stripes</h2>
|
|
</div>
|
|
<section id="horizontal-stripes" class="flex flex-wrap">
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-white gray-lightest pattern-horizontal-stripes-sm">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-horizontal-stripes-sm
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-white yellow pattern-horizontal-stripes-md">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-horizontal-stripes-md
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-indigo-lightest white pattern-horizontal-stripes-lg">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-horizontal-stripes-lg
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-yellow teal-dark pattern-horizontal-stripes-xl">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-horizontal-stripes-xl
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="pattern-diagonal-stripes-md p-2 my-5 slategray-darker">
|
|
<h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">triangles</h2>
|
|
</div>
|
|
|
|
<section id="triangles" class="flex flex-wrap">
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-white gray-lightest pattern-triangles-sm">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-triangles-sm
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-yellow-80 yellow-dark pattern-triangles-md">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-triangles-md
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-pink-lighter pink pattern-triangles-lg">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-triangles-lg
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-yellow teal-dark pattern-triangles-xl">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-triangles-xl
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="pattern-diagonal-stripes-md p-2 my-5 slategray-darker">
|
|
<h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">zigzag</h2>
|
|
</div>
|
|
<section id="zigzag" class="flex flex-wrap">
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-white gray-lightest pattern-zigzag-sm">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-zigzag-sm
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-yellow-80 yellow-dark pattern-zigzag-md">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-zigzag-md
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-yellow-70 yellow-dark pattern-zigzag-lg">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-zigzag-lg
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-100pc md-w-50pc p-5">
|
|
<div class="relative h-1by2 bg-white gray-lightest pattern-zigzag-xl">
|
|
<div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-zigzag-xl
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</section>
|
|
</section>
|
|
</main>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15/dist/smooth-scroll.polyfills.min.js"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function(){
|
|
var scroll = new SmoothScroll('a[href*="#"]');
|
|
});
|
|
// Sidebar toggle
|
|
$('#sidebar-toggle').on('click', function () {
|
|
$('#sidebar-container').toggleClass('ml--100pc');
|
|
return false;
|
|
});
|
|
|
|
$(document).on('click', function (e) {
|
|
if ($(e.target).closest('#sidebar-container').length == 0) {
|
|
$('#sidebar-container').addClass('ml--100pc');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body> |