Skip to content

Instantly share code, notes, and snippets.

View brickbones's full-sized avatar

Jose Fremaint brickbones

43 followers · 14 following
View GitHub Profile
@brickbones
brickbones / tabs.html
Created August 6, 2020 18:26
Tabs with only HTML and CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<title>Tabs</title>
</head>
<body>
<div class="mytabs">
@brickbones
brickbones / video-background.html
Last active December 2, 2023 01:18
<div class="section">
<h1>Welcome To Paradise</h1>
<div class="video-container">
<div class="color-overlay"></div>
<video autoplay loop muted>
<source src="video.mp4" type="video/mp4">
</video>
</div>
@brickbones
brickbones / anime.html
Created February 23, 2020 19:59
HTML and JS code for anime.js tutorial
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>
@brickbones
brickbones / regex-phonenumber.js
Created November 5, 2019 19:57
Regex Phone Number
const rgx = /^(\(\d{3}\)|\d{3})-?\d{3}-?\d{4}$/g
const phoneNumber = document.querySelector('.phone-number')
const phoneNumberInput = phoneNumber.querySelector('input')
const getNumbers = (event) => {
console.log(event)
if(rgx.test(event.target.value)){
phoneNumberInput.classList.add('accepted')
} else {
@brickbones
brickbones / pokeapi-script.js
Created September 3, 2019 18:06
Getting data from Pokeapi.co
const apiData = {
url: 'https://pokeapi.co/api/v2/',
type: 'pokemon',
id: '25',
}
const {url, type, id} = apiData
const apiUrl = `${url}${type}/${id}`
@brickbones
brickbones / particleSettings.json
Created August 30, 2019 19:57
Particle Settings JSON
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
@brickbones
brickbones / svg-dividers.html
Created August 10, 2019 18:54
You can use this svgs to divide different sections on your website.
<svg
class="curve"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="100%"
height="100"
viewBox="0 0 100 100"
preserveAspectRatio="none"
>
<path d="M0 100 C 20 0 50 0 100 100 Z"></path>
@brickbones
brickbones / particlejs-config.json
Created July 14, 2019 17:49
{
"particles": {
"number": {
"value": 100,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
@brickbones
brickbones / zdog.html
Created July 14, 2019 16:31
Getting started with Zdog
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>zzz dog</title>
</head>
@brickbones
brickbones / wordpress-page-temaplate.php
Created April 20, 2019 18:07
WordPress page template with API (javascript and php)
<?php /* Template Name: Awesome Page */
get_header();
?>
<div class="latest-posts"></div>
<script>