SandyBox

This is a little project to show combined HTML, CSS and JavaScript projects.

Here is the list os examples (Portuguese)!

| Link | Descrição | |-----------------------------------------------------------------------|--------------------------------------------| | https://diogocezar.github.io/sandybox/#/html-example-1 | Títulos em HTML5 | | https://diogocezar.github.io/sandybox/#/html-example-2 | Parágrafos em HTML5 | | https://diogocezar.github.io/sandybox/#/html-example-3 | Links em HTML5 | | https://diogocezar.github.io/sandybox/#/html-example-4 | Imagens em HTML5 | | https://diogocezar.github.io/sandybox/#/html-example-5 | Tabelas em HTML5 | | https://diogocezar.github.io/sandybox/#/html-example-6 | Listas Ordenadas em HTML5 | | https://diogocezar.github.io/sandybox/#/html-example-7 | Lista Não Ordenadas em HTML5 | | https://diogocezar.github.io/sandybox/#/html-example-8 | Formulários - Parte 1 em HTML5 | | https://diogocezar.github.io/sandybox/#/html-example-9 | Formulários - Parte 2 em HTML5 | | https://diogocezar.github.io/sandybox/#/html-example-10 | Estruturas de Blocos em HTML5 | | https://diogocezar.github.io/sandybox/#/html-example-11 | MetaTags em HTML5 | | https://diogocezar.github.io/sandybox/#/html-example-12 | DataSets em HTML5 | | https://diogocezar.github.io/sandybox/#/css-example-1 | Exemplos de estilos em CSS | | https://diogocezar.github.io/sandybox/#/css-example-2 | Exemplo de Background Color | | https://diogocezar.github.io/sandybox/#/css-example-3 | Tipos de Cores | | https://diogocezar.github.io/sandybox/#/css-example-4 | Exemplos de Tamanhos | | https://diogocezar.github.io/sandybox/#/css-example-5 | Exemplos de Margens | | https://diogocezar.github.io/sandybox/#/css-example-6 | Exemplos de Paddings | | https://diogocezar.github.io/sandybox/#/css-example-7 | Exemplos Altura e Largura | | https://diogocezar.github.io/sandybox/#/css-example-8 | Exemplos de Imagens em Background | | https://diogocezar.github.io/sandybox/#/css-example-9 | Exemplos de Line Height | | https://diogocezar.github.io/sandybox/#/css-example-10 | Exemplos de Text Transform | | https://diogocezar.github.io/sandybox/#/css-example-11 | Exemplos de Text Decoration | | https://diogocezar.github.io/sandybox/#/css-example-12 | Exemplos de FontStyle | | https://diogocezar.github.io/sandybox/#/css-example-13 | Exemplo de Hover | | https://diogocezar.github.io/sandybox/#/css-example-14 | Exemplo de Gradiente | | https://diogocezar.github.io/sandybox/#/css-example-15 | Exemplo de Transform | | https://diogocezar.github.io/sandybox/#/css-example-16 | Exemplo Transition | | https://diogocezar.github.io/sandybox/#/css-example-17 | Exemplo de Animation | | https://diogocezar.github.io/sandybox/#/css-example-18 | Exemplo de Font-Face | | https://diogocezar.github.io/sandybox/#/css-example-19 | Exemplo de Media-Querie | | https://diogocezar.github.io/sandybox/#/css-example-20 | Exemplo de Calc e Childs | | https://diogocezar.github.io/sandybox/#/css-example-21 | Exemplo Float | | https://diogocezar.github.io/sandybox/#/css-example-22 | Exemplo Relative | | https://diogocezar.github.io/sandybox/#/css-example-23 | Exemplo Absolute | | https://diogocezar.github.io/sandybox/#/css-example-24 | Exemplo Fixed | | https://diogocezar.github.io/sandybox/#/css-example-25 | Exemplo de Display Block em CSS | | https://diogocezar.github.io/sandybox/#/css-example-26 | Exemplo de Display Inline em CSS | | https://diogocezar.github.io/sandybox/#/css-example-27 | Exemplo de Display Inline-Block em CSS | | https://diogocezar.github.io/sandybox/#/css-example-28 | Exemplos de After e Before | | https://diogocezar.github.io/sandybox/#/flex-example-align-content | Exemplo de Align Content | | https://diogocezar.github.io/sandybox/#/flex-example-align-items | Exemplo de Align Items | | https://diogocezar.github.io/sandybox/#/flex-example-align-self | Exemplo de Align Self | | https://diogocezar.github.io/sandybox/#/flex-example-basis | Exemplo de Basis | | https://diogocezar.github.io/sandybox/#/flex-example-direction | Exemplo de Direction | | https://diogocezar.github.io/sandybox/#/flex-example-display | Exemplo de Display | | https://diogocezar.github.io/sandybox/#/flex-example-grow | Exemplo de Grow | | https://diogocezar.github.io/sandybox/#/flex-example-justify-content | Exemplo de Justify Content | | https://diogocezar.github.io/sandybox/#/flex-example-order | Exemplo de Order | | https://diogocezar.github.io/sandybox/#/flex-example-shrink | Exemplo de Shrink | | https://diogocezar.github.io/sandybox/#/flex-example-wrap | Exemplo de Wrap | | https://diogocezar.github.io/sandybox/#/grid-example-auto-columns | Exemplo de Auto Columns | | https://diogocezar.github.io/sandybox/#/grid-example-auto-rows | Exemplo de Auto Rows | | https://diogocezar.github.io/sandybox/#/grid-example-column | Exemplo de Column | | https://diogocezar.github.io/sandybox/#/grid-example-display | Exemplo de Display | | https://diogocezar.github.io/sandybox/#/grid-example-gap | Exemplo de Gap | | https://diogocezar.github.io/sandybox/#/grid-example-row | Exemplo de Row | | https://diogocezar.github.io/sandybox/#/grid-example-template-areas | Exemplo de Template Areas | | https://diogocezar.github.io/sandybox/#/grid-example-template-columns | Exemplo de Template Columns | | https://diogocezar.github.io/sandybox/#/grid-example-template-rows | Exemplo de Template Rows | | https://diogocezar.github.io/sandybox/#/js-example-1 | Exemplos de Função | | https://diogocezar.github.io/sandybox/#/js-example-2 | Exemplos de Função em Variável | | https://diogocezar.github.io/sandybox/#/js-example-3 | Exemplos de Função como CallBack | | https://diogocezar.github.io/sandybox/#/js-example-4 | Exemplos de Variáveis e Arrow Functions | | https://diogocezar.github.io/sandybox/#/js-example-5 | Exemplos de Manipulação de Arrays | | https://diogocezar.github.io/sandybox/#/js-example-6 | Exemplos de Comparações entre Variáveis | | https://diogocezar.github.io/sandybox/#/js-example-7 | Exemplo de Objeto Literal | | https://diogocezar.github.io/sandybox/#/js-example-8 | Exemplo de Objeto Construtor | | https://diogocezar.github.io/sandybox/#/js-example-9 | Exemplo de Array de Objetos | | https://diogocezar.github.io/sandybox/#/js-example-10 | Exemplos de Interações com o HTML | | https://diogocezar.github.io/sandybox/#/js-example-11 | Exemplo Validação Formulário | | https://diogocezar.github.io/sandybox/#/js-example-12 | Exemplo Orientação a Objeto | | https://diogocezar.github.io/sandybox/#/js-example-13 | Exemplo de Promise | | https://diogocezar.github.io/sandybox/#/bootstrap-example-1 | Guia Bootstrap | | https://diogocezar.github.io/sandybox/#/svg-example-1 | Exemplos Básicos SVG | | https://diogocezar.github.io/sandybox/#/svg-example-2 | Exemplo Hover SVG |

Based on: https://willianjusten.com.br/criando-um-codepen-simples-em-poucas-linhas/

Diogo Cezar diogo@diogocezar.com