Skip to content

Instantly share code, notes, and snippets.

View harunpehlivan's full-sized avatar
🏠

HARUN PEHLİVAN harunpehlivan

🏠
50 followers · 514 following
View GitHub Profile
@harunpehlivan
harunpehlivan / binary-clock.markdown
Created June 2, 2021 20:15
Binary Clock

Binary Clock

Inspired by Fabrice Weinberg's "CSS Digital Clock", completely reconfigured and converted to binary.

More dependent JS and simplistic CSS.

*Edited to run as an object, much more to customize in the JS

A Pen by HARUN PEHLİVAN on CodePen.

@harunpehlivan
harunpehlivan / digital-clock.markdown
Created June 2, 2021 20:07
Digital Clock
@harunpehlivan
harunpehlivan / card-ui.markdown
Created June 2, 2021 20:02
Card UI
@harunpehlivan
harunpehlivan / clock-with-html-css-and-javascript.markdown
Created June 2, 2021 17:55
Clock with Html, Css and javascript
@harunpehlivan
harunpehlivan / image-slider-with-multiple-controls-and-mobile-swipe-control-javascript.markdown
Created June 2, 2021 17:54
Image slider with multiple controls and mobile swipe control (Javascript)
@harunpehlivan
harunpehlivan / glassmorphism-creative-cloud-app-redesign.markdown
Created June 2, 2021 16:33
Glassmorphism Creative Cloud App Redesign
@harunpehlivan
harunpehlivan / diagonal-layouts-in-2020.markdown
Created May 30, 2021 18:28
Diagonal Layouts in 2020

Diagonal Layouts in 2020

Layouts with diagonal sections are quite popular for several years now. It is not the new hot stuff, and you will probably not find it in the articles titled "Design trends for 2020". But I think it is here to stay. It is one tool designers can use to bring some dynamic to all the rectangular boxes with boring 90-degree angles.

Because of this, it is essential for frontend designers to know how to implement these designs with CSS.

Find a step-by-step tutorial here: https://9elements.com/blog/pure-css-diagonal-layouts/

A Pen by HARUN PEHLİVAN on CodePen.

@harunpehlivan
harunpehlivan / dancing-circles.markdown
Created May 30, 2021 18:13
Dancing Circles
@harunpehlivan
harunpehlivan / index.html
Created May 30, 2021 17:51
Soundcloud Audio Visualizer
<div id="app">
<nav class="navbar fixed-top navbar-light bg-light dense">
<div class="form-inline">
<a class="btn-icon mr-3" href="http://harunpehlivan.fm.tc/" target="_blank">
<i class="fab fa-soundcloud fa-lg"></i>
</a>
<button @click="onTogglePlay" type="button" class="btn-icon mr-2">
@harunpehlivan
harunpehlivan / css-hexadecimal-background-color.markdown
Created May 30, 2021 17:12
CSS: Hexadecimal Background Color

CSS: Hexadecimal Background Color

Three input groups generating 4096 different background colors without using JavaScript. Limited to three-char hex codes as six would result in 16,777,216 declaration blocks.

Was definitely inspired by Lauren's pen

Moar CSS stuff in my No JS Collection

A Pen by HARUN PEHLİVAN on CodePen.