Skip to content

Instantly share code, notes, and snippets.

View marcobraghim's full-sized avatar
🎯
Focusing

Marco Geremias marcobraghim

🎯
Focusing
63 followers · 15 following
View GitHub Profile
@marcobraghim
marcobraghim / anchor-nav-animate.js
Created October 18, 2018 17:43
When you have some page anchors and need to nav to then even with fixed navbar offset from the top
// Select all links with hashes
var offsetTopValue = 91
var secondsDuration = 0.7
$('#topnavbar a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
@marcobraghim
marcobraghim / starts-with-any.js
Created October 4, 2018 14:08
Return true while the string starts as search param
/**
* Return true while the string starts as search param
*
* str <==> search
* $ === $this-> (true)
* $t === $this-> (true)
* $th === $this-> (true)
* $thi === $this-> (true)
* $this === $this-> (true)
* $this- === $this-> (true)
@marcobraghim
marcobraghim / page-heading-underline-border.css
Created September 3, 2018 20:42
Page heading underline border
@charset "UTF-8";
h1.page-header { font-size: 1.8em; }
h2.page-header { font-size: 1.6em; }
h3.page-header { font-size: 1.4em; }
h4.page-header { font-size: 1.2em; }
h5.page-header { font-size: 1em; }
.page-header {
display: table;
@marcobraghim
marcobraghim / index.html
Created July 29, 2018 20:30
Pure CSS 404 Error Page
<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x1_5"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
<div class='c'>
<div class='_404'>404</div>
@marcobraghim
marcobraghim / error-page-404.markdown
Created July 29, 2018 20:29
Error Page 404
@marcobraghim
marcobraghim / 404-error-example-1.markdown
Created July 29, 2018 20:28
404 Error Example #1

404 Error Example #1

404 error example page with pure CSS using animations, plain colors and minimal HTML. See more creative examples in the related pens.

Read the full article here

A Pen by Ricardo Prieto on CodePen.

License.

@marcobraghim
marcobraghim / index.html
Created July 29, 2018 20:27
Lost in Space Error Page SVG/CSS Animation
<!-- Icons purchased via Iconfinder under Basic License -->
<body class="permission_denied">
<div id="particles-js"></div>
<div class="denied__wrapper">
<h1>404</h1>
<h3>LOST IN <span>SPACE</span> App-Name? Hmm, looks like that page doesn't exist.</h3>
<svg id="astronaut" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<style>
.st0{fill:none;} .st1{fill:#504E55;} .st2{fill:#F39E72;} .st3{fill:#FFFFFF;} .st4{opacity:0.24;} .st5{fill:#77574E;} .st6{fill:#FBD68D;} .st7{fill:#ECECEC;} .st8{fill:#F4A89C;} .st9{fill:#CFC9E5;} .st10{opacity:0.28;} .st11{opacity:0.25;} .st12{fill:#6F635C;} .st13{fill:#DAE7BE;} .st14{fill:#FFE0A6;} .st15{fill:#5F5E60;} .st16{fill:#CFE1AF;} .st17{fill:#EBE9F5;} .st18{fill:#53515A;} .st19{opacity:0.42;} .st20{fill:#53515B;}
@marcobraghim
marcobraghim / f-de-x-funcoes-matematicas.html
Created April 5, 2017 20:26
f(x) - Funções Matemáticas e plano cartesiano
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// -------------------------------
function range(f, t) {
if (t < f) throw "Para vei";