Slinjez

In/out of focus text effect

A Pen by Jonny Scholes on CodePen.

License.

Slinjez

Functioning Analog Clock

A fun little CSS and JavaScript clock that tells you the current time.

A Pen by Ian on CodePen.

License.

Slinjez

<div id="app"> 
 <svg class="dial" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="150 0 350 600">
  <defs>
    <clipPath id="clip-path">
      <path fill="none" d="M27.7.3h331.7v332.32H27.7z"/>
    </clipPath>
    <clipPath id="clip-path-2">
      <path fill="none" clip-path="url(#clip-path)" d="M28.4.9h.6l-.6.7V.9z"/>
    </clipPath>
    <clipPath id="clip-path-3">

Slinjez

- var data = [
- 	{
- 		slist: ['329, 100%, 70%', '337, 99%, 58%'], 
- 		icon: '🍓', 
- 		title: 'gingerbread', 
- 		ptext: 'Cake muffin donut chocolate cake jelly sesame wafer tart pie muffin.'
- 	}, 
- 	{
- 		slist: ['48, 99%, 58%', '33, 94%, 55%'], 
- 		icon: '🍋', 

Slinjez

HTML invoice

Forked from Mohammed Yassine Jaya's Pen HTML invoice.

A Pen by Mwangi Thiga on CodePen.

License.

Slinjez

<textarea>This is the first line.
See, how the text fits here, also if there is a linebreak at the end? It works nicely.

Great.
</textarea>

Slinjez

CSS Goey footer

I'm a little late to the blob party, but I'm having fun
Do not use this for real projects with this amount of blobs, use 24 of them or less 😛
_

Made using GistPad https://aka.ms/gistpad
Pen available as a Gist: https://gist.github.com/oauo/ecdf56c499e809ad671c4d85d5c2b90a

A Pen by Zed Dash on CodePen.

Slinjez

class Todo {
  constructor({
    title = "Todo App",
    data = [],
    onAdded = () => {},
    onDeleted = () => {},
    onStatusChanged = () => {}
  } = {}) {
    this.nodes = {};
    this.title = title;

Slinjez

<section class="hero is-fullheight">
  <div class="hero-body">
    <div class="container">
      <div class="columns">
        <div class="column is-3 is-flex">
          <div class="column-child sidebar shadow">
            <div class="sidebar-header has-text-centered">
              <div class="photo"><img src="https://instagram.fdel25-1.fna.fbcdn.net/vp/5dcd7fd07ce899149702f81cd8155c23/5E6F9BC3/t51.2885-19/s150x150/71826152_1360562164120956_721707767340990464_n.jpg?_nc_ht=instagram.fdel25-1.fna.fbcdn.net" /></div>
              <h2 class="header-name">Jatin Rao</h2>
              <h5>Web Developer</h5>

Slinjez

div.main
div.footer
    div.bubbles
        - for (var i = 0; i < 128; i++) //Small numbers looks nice too
            div.bubble(style=`--size:${2+Math.random()*4}rem; --distance:${6+Math.random()*4}rem; --position:${-5+Math.random()*110}%; --time:${2+Math.random()*2}s; --delay:${-1*(2+Math.random()*2)}s;`)
    div.content
        div
            div
                b Eldew
                a(href="#") Secuce