cnerd

Cards (gradient border)

A Pen by Dan on CodePen.

License.

cnerd

Card Pagination - JS

Resources

• Pure Pajinate JS by Olivier Buisard.
• Demo from CSSScript.com
• Images from Pinterest.

A Pen by Josetxu on CodePen.

cnerd

<nav>
  <ul>
    <li class="active">
      <button>Animation</button>
    </li>
    <li>
      <button>Branding</button>
    </li>
    <li>
      <button>Illustration</button>

cnerd

<h1>Neumorphic buttons</h1>
<div class="buttons">  
  <button class="neumorphic active">
    <i class="fa-light fa-fire"></i>
    <span>Button 1</span>
  </button>
  <button class="neumorphic">
    <i class="fa-light fa-dna"></i>
    <span>Button 2</span>
  </button>

cnerd

<div id="wrapper"><div id="inner"><input type="checkbox" /><svg viewbox="0 0 230 420" height="420px" width="230px"><path d="M 60 70 L 140 70 A 30 30 0 1 1 140 140 L 80 140 A 30 30 0 1 0 80 210 L 140 210 A 30 30 0 1 1 140 280 L 80 280 A 30 30 0 0 0 80 350 L 160 350 "></path><path d="M 60 70 L 140 70 A 30 30 0 1 1 140 140 L 80 140 A 30 30 0 1 0 80 210 L 140 210 A 30 30 0 1 1 140 280 L 80 280 A 30 30 0 0 0 80 350 L 160 350  "></path></svg><div></div></div></div>

cnerd

<div class="page">
    <div class="globe-wrapper">
        <canvas id="globe-3d"></canvas>
        <div class="info"><span></span></div>
    </div>
</div>

<svg id="map">
    <path d="M1383 261.6l1.5 1.8-2.9 0.8-2.4 1.1-5.9 0.8-5.3 1.3-2.4 2.8 1.9 2.7 1.4 3.2-2 2.7 0.8 2.5-0.9 2.3-5.2-0.2 3.1 4.2-3.1 1.7-1.4 3.8 1.1 3.9-1.8 1.8-2.1-0.6-4 0.9-0.2 1.7-4.1 0-2.3 3.7 0.8 5.4-6.6 2.7-3.9-0.6-0.9 1.4-3.4-0.8-5.3 1-9.6-3.3 3.9-5.8-1.1-4.1-4.3-1.1-1.2-4.1-2.7-5.1 1.6-3.5-2.5-1 0.5-4.7 0.6-8 5.9 2.5 3.9-0.9 0.4-2.9 4-0.9 2.6-2-0.2-5.1 4.2-1.3 0.3-2.2 2.9 1.7 1.6 0.2 3 0 4.3 1.4 1.8 0.7 3.4-2 2.1 1.2 0.9-2.9 3.2 0.1 0.6-0.9-0.2-2.6 1.7-2.2 3.3 1.4-0.1 2 1.7 0.3 0.9 5.4 2.7 2.1 1.5-1.4 2.2-0.6 2.5-2.9 3.8 0.5 5.4 0z"
          data-name="Afghanistan"/>

cnerd

<main>
  <ul class='slider'>
    <li class='item' style="background-image: url('https://cdn.mos.cms.futurecdn.net/dP3N4qnEZ4tCTCLq59iysd.jpg')">
      <div class='content'>
        <h2 class='title'>"Lossless Youths"</h2>
        <p class='description'> Lorem ipsum, dolor sit amet consectetur
        adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
        praesentium nisi. Id laboriosam ipsam enim.  </p>
        <button>Read More</button>
      </div>