Skip to content

Instantly share code, notes, and snippets.

View tiagodcosta's full-sized avatar
🖖
Making things simple

Tiago Costa tiagodcosta

🖖
Making things simple
View GitHub Profile
@tiagodcosta
tiagodcosta / index.html
Created February 16, 2021 15:00
Playing with CSS grid, shapes and animation
<main>
<header class="header">
<img class="clip-me" src="https://i.ibb.co/z8mBm8Q/boston.jpg" alt="boston" border="0">
<img class="clip-me opacity--level-1" src="https://i.ibb.co/z8mBm8Q/boston.jpg" alt="boston" border="0">
<img class="clip-me opacity--level-2" src="https://i.ibb.co/z8mBm8Q/boston.jpg" alt="boston" border="0">
<h1 class="header__title">Next train is coming</h1>
<section class="header__subtitle">
<img class="header__logo" src="https://svgshare.com/i/U3d.svg" alt="MBTA" border="0">
<p>MBTA - <span id="header__year"></span></p>
</section>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
@tiagodcosta
tiagodcosta / reset.css
Created September 1, 2017 23:33
Simple CSS reset
*,*:before,*:after,ul,li,a,button,input,h1,h2,h3,h4,h5,h6,p,img,image,svg,path,g {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: transparent;
border: none;
text-decoration: none;
font-family: inherit;
user-select: none;
}
@tiagodcosta
tiagodcosta / gulpfile.js
Last active August 18, 2017 19:47
Standard configuration for gulp (general use)
var gulp = require('gulp'),
browserSync = require('browser-sync'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
reload = browserSync.reload;
gulp.task('browser-sync', function(){
browserSync({
server: {
@tiagodcosta
tiagodcosta / .gitignore
Last active August 18, 2017 19:43
Complete gitignore
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
@tiagodcosta
tiagodcosta / webpack.config.js
Created May 21, 2017 15:58
Webpack configuration for external CSS and images loader
var webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
output: {
path: "dist/assets/",
filename: "bundle.js",
publicPath: "assets/"
},
devServer: {
@tiagodcosta
tiagodcosta / 0_reuse_code.js
Created May 21, 2017 15:53
Here are some things you can do with Gists in GistBox.
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console