Flexbox playground
How do I make an flexbox playground?
What is a flexbox playground? How do you make a flexbox playground? This script and codes were developed by Gabi on 22 August 2022, Monday.
Flexbox playground - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox playground</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="principal">
<h2>Properties for the flex container</h2>
<div class="control">
<h4><a href="http://w3.unpocodetodo.info/css3/flex-direction.php">flex-direction</a> <small>( property of the flex container )</small></h4><!--flex-direction: row | row-reverse | column | column-reverse;-->
<div class="radio">
<input name="flex-direction" type="radio" class="flex-direction" id="R11" value="row" checked><label for="R11">row:</label>
<input name="flex-direction" type="radio" class="flex-direction" id="R12" value="row-reverse"><label for="R12">row-reverse:</label>
<input name="flex-direction" type="radio" class="flex-direction" id="R13" value="column"><label for="R13">column:</label>
<input name="flex-direction" type="radio" class="flex-direction" id="R14" value="column-reverse"><label for="R14">column-reverse:</label>
</div></div>
<div class="flex-container" id="direction">
<div class="item" data-color="2a80b9"><p>1</p></div>
<div class="item" data-color="8f44ad"><p>2</p></div>
<div class="item" data-color="16a086"><p>3</p></div>
<div class="item" data-color="f1c40f"><p>4</p></div>
<div class="item" data-color="e77e23"><p>5</p></div>
</div>
<div class="control">
<h4><a href="http://w3.unpocodetodo.info/css3/flex-wrap.php">flex-wrap</a> <small>( property of the flex container )</small></h4><!--nowrap | wrap | wrap-reverse;-->
<div class="radio">
<input name="flex-wrap" type="radio" class="flex-wrap" id="R21" value="nowrap" checked><label for="R21">nowrap:</label>
<input name="flex-wrap" type="radio" class="flex-wrap" id="R22" value="wrap"><label for="R22">wrap:</label>
<input name="flex-wrap" type="radio" class="flex-wrap" id="R23" value="wrap-reverse"><label for="R23">wrap-reverse:</label>
</div></div>
<div class="flex-container" id="wrap">
<div class="item" data-color="2a80b9"><p>1</p></div>
<div class="item" data-color="8f44ad"><p>2</p></div>
<div class="item" data-color="16a086"><p>3</p></div>
<div class="item" data-color="f1c40f"><p>4</p></div>
<div class="item" data-color="e77e23"><p>5</p></div>
</div>
<div class="control">
<h4><a href="http://w3.unpocodetodo.info/css3/flex-align-items.php">align-items</a> <small>( property of the flex container )</small></h4><!-- flex-start | flex-end | center | baseline | stretch;-->
<div class="radio">
<input name="flex-align-items" type="radio" class="flex-align-items" id="R31" value="align-items-start" ><label for="R31">flex-start:</label>
<input name="flex-align-items" type="radio" class="flex-align-items" id="R32" value="align-items-end"><label for="R32">flex-end:</label>
<input name="flex-align-items" type="radio" class="flex-align-items" id="R33" value="align-items-center"><label for="R33">center:</label>
<input name="flex-align-items" type="radio" class="flex-align-items" id="R34" value="align-items-baseline"><label for="R34">baseline:</label>
<input name="flex-align-items" type="radio" class="flex-align-items" id="R35" value="align-items-stretch" checked><label for="R35">stretch:</label>
</div></div>
<div class="flex-container" id="align">
<div class="item" data-color="2a80b9"><p>1</p></div>
<div class="item" data-color="8f44ad"><p>2</p></div>
<div class="item" data-color="16a086"><p style="font-size:50px;">3</p></div>
<div class="item" data-color="f1c40f"><p>4</p></div>
<div class="item" data-color="e77e23"><p>5</p></div>
</div>
<div class="control">
<h4><a href="http://w3.unpocodetodo.info/css3/flex-justify-content.php">justify-content</a> <small>( property of the flex container )</small></h4> <!--justify-content: flex-start | flex-end | center | space-between | space-around; -->
<div class="radio">
<input name="justify-content" type="radio" class="justify-content" id="R41" value="justify-start" checked ><label for="R41">flex-start:</label>
<input name="justify-content" type="radio" class="justify-content" id="R42" value="justify-end" ><label for="R42">flex-end:</label>
<input name="justify-content" type="radio" class="justify-content" id="R43" value="justify-space-between" ><label for="R43">space-between:</label>
<input name="justify-content" type="radio" class="justify-content" id="R44" value="justify-center" ><label for="R44">center:</label>
<input name="justify-content" type="radio" class="justify-content" id="R45" value="justify-space-around" ><label for="R45">space-around:</label>
</div></div>
<div class="flex-container" id="justify">
<div class="item" data-color="2a80b9"><p>1</p></div>
<div class="item" data-color="8f44ad"><p>2</p></div>
<div class="item" data-color="16a086"><p>3</p></div>
<div class="item" data-color="f1c40f"><p>4</p></div>
<div class="item" data-color="e77e23"><p>5</p></div>
</div>
<!--<p>En <strong>Google Chrome</strong> y <strong>Opera</strong>: problemas al cambiar dinamicamente entre <code>justify-content:space-between</code> y <code>justify-content:space-around</code> </p>-->
<div class="control">
<h4><a href="http://w3.unpocodetodo.info/css3/flex-align-content.php">align-content</a> <small>( property of the flex container )</small></h4> <!--justify-content: flex-start | flex-end | center | space-between | space-around; -->
<div class="radio">
<input name="align-content" type="radio" class="align-content" id="R51" value="align-content-start" ><label for="R51">flex-start:</label>
<input name="align-content" type="radio" class="align-content" id="R52" value="align-content-end" ><label for="R52">flex-end:</label>
<input name="align-content" type="radio" class="align-content" id="R53" value="align-content-center" ><label for="R53">center:</label>
<input name="align-content" type="radio" class="align-content" id="R54" value="align-content-space-between" ><label for="R54">space-between:</label>
<input name="align-content" type="radio" class="align-content" id="R55" value="align-content-space-around" ><label for="R55">space-around:</label>
<input name="align-content" type="radio" class="align-content" id="R56" value="align-content-stretch" checked><label for="R56">stretch:</label>
</div></div>
<div class="flex-container" id="alignContent">
<div class="item" data-color="1bbc9d"><p>1</p></div>
<div class="item" data-color="2fcc71"><p>2</p></div>
<div class="item" data-color="3598dc"><p>3</p></div>
<div class="item" data-color="9c59b8"><p>4</p></div>
<div class="item" data-color="34495e"><p>5</p></div>
<div class="item" data-color="16a086"><p>6</p></div>
<div class="item" data-color="27ae61"><p>7</p></div>
<div class="item" data-color="2a80b9"><p>8</p></div>
<div class="item" data-color="8f44ad"><p>9</p></div>
<div class="item" data-color="2d3e50"><p>10</p></div>
<div class="item" data-color="f1c40f"><p>11</p></div>
<div class="item" data-color="e77e23"><p>12</p></div>
<div class="item" data-color="e84c3d"><p>13</p></div>
<div class="item" data-color="ecf0f1"><p>14</p></div>
<div class="item" data-color="96a6a6"><p>15</p></div>
<div class="item" data-color="f49c14"><p>16</p></div>
<div class="item" data-color="d55401"><p>17</p></div>
<div class="item" data-color="c1392b"><p>18</p></div>
<div class="item" data-color="bec3c7"><p>19</p></div>
<div class="item" data-color="808b8d"><p>20</p></div>
</div>
</div>
<!-- propiedades de los items -->
<div class="principal">
<h2>Properties for the flex items </h2>
<div class="control">
<h4><a href="http://w3.unpocodetodo.info/css3/flex-align-self.php">align-self</a> <small>( property for flex items )</small></h4> <!--auto | flex-start | flex-end | center | baseline | stretch -->
<div class="radio">
<input name="align-self" type="radio" class="align-self" id="R61" value="align-self-auto" checked ><label for="R61">auto:</label>
<input name="align-self" type="radio" class="align-self" id="R62" value="align-self-start" ><label for="R62">flex-start:</label>
<input name="align-self" type="radio" class="align-self" id="R63" value="align-self-end" ><label for="R63">flex-end:</label>
<input name="align-self" type="radio" class="align-self" id="R64" value="align-self-center" ><label for="R64">center:</label>
<input name="align-self" type="radio" class="align-self" id="R65" value="align-self-baseline" ><label for="R65">baseline:</label>
<input name="align-self" type="radio" class="align-self" id="R66" value="align-self-stretch"><label for="R66">stretch:</label>
</div>
</div>
<div class="flex-container align-items-center" id="FCI1">
<div class="item" data-color="f49c14"><p>1</p></div>
<div class="item" data-color="d55401"><p>2</p></div>
<div class="item" data-color="c1392b" id="alignSelf"><p style="font-size:50px;">3</p></div>
<div class="item" data-color="bec3c7"><p>4</p></div>
<div class="item" data-color="808b8d"><p>5</p></div>
</div>
<div class="control">
<h4><a href="http://w3.unpocodetodo.info/css3/flex-abreviado.php#flexGrow">flex-grow</a> <small>( property for flex items )</small></h4> <!--auto | flex-start | flex-end | center | baseline | stretch -->
<div class="radio">
<span class="nbsp"><label for="R71">elemento 1: </label><input type="number" class="flex-grow" id="R71" min="0" ></span>
<span class="nbsp"><label for="R72">elemento 2: </label><input type="number" class="flex-grow" id="R72" min="0" ></span>
<span class="nbsp"><label for="R73">elemento 3: </label><input type="number" class="flex-grow" id="R73" min="0" ></span>
<span class="nbsp"><label for="R74">elemento 4: </label><input type="number" class="flex-grow" id="R74" min="0" ></span>
<span class="nbsp"><label for="R75">elemento 5: </label><input type="number" class="flex-grow" id="R75" min="0" ></span>
</div>
</div>
<div class="flex-container align-items-center" id="FCI2">
<div class="item" id="itemR71" data-color="f49c14"><p>1</p></div>
<div class="item" id="itemR72" data-color="d55401"><p>2</p></div>
<div class="item" id="itemR73" data-color="c1392b"><p>3</p></div>
<div class="item" id="itemR74" data-color="bec3c7"><p>4</p></div>
<div class="item" id="itemR75" data-color="808b8d"><p>5</p></div>
</div>
<div class="control">
<h4><a href="http://w3.unpocodetodo.info/css3/flex-abreviado.php#flexShrink">flex-shrink</a> <small>( property for flex items )</small></h4> <!--auto | flex-start | flex-end | center | baseline | stretch -->
<div class="radio">
<span class="nbsp"><label for="R81">elemento 1: </label><input type="number" class="flex-shrink" id="R81" min="0" ></span>
<span class="nbsp"><label for="R82">elemento 2: </label><input type="number" class="flex-shrink" id="R82" min="0" ></span>
<span class="nbsp"><label for="R83">elemento 3: </label><input type="number" class="flex-shrink" id="R83" min="0" ></span>
<span class="nbsp"><label for="R84">elemento 4: </label><input type="number" class="flex-shrink" id="R84" min="0" ></span>
<span class="nbsp"><label for="R85">elemento 5: </label><input type="number" class="flex-shrink" id="R85" min="0" ></span>
</div>
</div>
<div class="flex-container align-items-center" id="FCI3">
<div class="item" id="itemR81" data-color="f49c14"><p>1</p></div>
<div class="item" id="itemR82" data-color="d55401"><p>2</p></div>
<div class="item" id="itemR83" data-color="c1392b"><p>3</p></div>
<div class="item" id="itemR84" data-color="bec3c7"><p>4</p></div>
<div class="item" id="itemR85" data-color="808b8d"><p>5</p></div>
</div>
<div class="control">
<h4><a href="http://w3.unpocodetodo.info/css3/flex-abreviado.php">flex</a> <small>( property for flex items )</small></h4> <!--auto | flex-start | flex-end | center | baseline | stretch -->
<p>.item { flex: flex-grow [flex-shrink] [flex-basis]; } </p>
<table id="flexBasis">
<tr><td>elemento 1</td><td>elemento 2</td></tr>
<tr><td><input type="number" class="flex-basis" id="B1" min="0" value="50" ><label for="B1">flex-basis %</label></td><td><input type="number" class="flex-basis" id="B2" min="0" value="50" ><label for="B2">flex-basis %</label></td></tr>
<tr><td><input type="number" class="flex-basis-grow" id="G1" min="0" value="0" ><label for="G1">flex-grow</label></td><td><input type="number" class="flex-basis-grow" id="G2" min="0" value="0" ><label for="G2">flex-grow</label></td></tr>
<tr><td><input type="number" class="flex-basis-shrink" id="S1" min="0" value="0" ><label for="S1">flex-shrink</label></td><td><input type="number" class="flex-basis-shrink" id="S2" min="0" value="0" ><label for="S2">flex-shrink</label></td></tr>
</table>
</div>
<div class="flex-container align-items-center" id="FCI4">
<div class="item" id="item1" data-color="f49c14"><p>1</p></div>
<div class="item" id="item2" data-color="d55401"><p>2</p></div>
</div>
<div class="control">
<h4><a href="http://w3.unpocodetodo.info/css3/flex-order.php">order</a> <small>( property for flex items )</small></h4> <!--auto | flex-start | flex-end | center | baseline | stretch -->
<div class="radio">
<span class="nbsp"><label for="R91">elemento 1: </label><input type="number" class="flex-order" id="R91" min="0" ></span>
<span class="nbsp"><label for="R92">elemento 2: </label><input type="number" class="flex-order" id="R92" min="0" ></span>
<span class="nbsp"><label for="R93">elemento 3: </label><input type="number" class="flex-order" id="R93" min="0" ></span>
<span class="nbsp"><label for="R94">elemento 4: </label><input type="number" class="flex-order" id="R94" min="0" ></span>
<span class="nbsp"><label for="R95">elemento 5: </label><input type="number" class="flex-order" id="R95" min="0" ></span>
</div>
</div>
<div class="flex-container align-items-center" id="FCI5">
<div class="item" id="orderR91" data-color="f49c14"><p>1</p></div>
<div class="item" id="orderR92" data-color="d55401"><p>2</p></div>
<div class="item" id="orderR93" data-color="c1392b"><p>3</p></div>
<div class="item" id="orderR94" data-color="bec3c7"><p>4</p></div>
<div class="item" id="orderR95" data-color="808b8d"><p>5</p></div>
</div>
</div> <script src="js/index.js"></script>
</body>
</html>
Flexbox playground - Script Codes CSS Codes
/*flex-direction: row | row-reverse | column | column-reverse;*/
.flex-container.row { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;
}
.flex-container.row-reverse { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse;
}
.flex-container.column { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
}
.flex-container.column-reverse { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column-reverse;
}
/*flex-wrap: nowrap | wrap | wrap-reverse;*/
.flex-container.nowrap { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap;
}
.flex-container.wrap { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.flex-container.wrap-reverse { -webkit-flex-wrap: wrap-reverse; -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse;
}
/*align-items: flex-start | flex-end | center | baseline | stretch;*/
.flex-container.align-items-start { -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start;
}
.flex-container.align-items-end { -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end;
}
.flex-container.align-items-center { -webkit-align-items: center; -ms-flex-align: center; align-items: center;
}
.flex-container.align-items-baseline { webkit-align-items: baseline; -ms-flex-align: baseline; align-items: baseline;
}
.flex-container.align-items-stretch { webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch;
}
/*justify-content: flex-start | flex-end | center | space-between | space-around;*/
.flex-container.justify-start { -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start;
}
.flex-container.justify-end { -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end;
}
.flex-container.justify-center { -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
}
.flex-container.justify-space-between { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;
}
.flex-container.justify-space-around { -webkit-justify-content: space-around; -ms-flex-pack: justify; justify-content: space-around;
}
/*align-content: flex-start | flex-end | center | space-between | space-around | stretch;*/
.flex-container.align-content-start { -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start;
}
.flex-container.align-content-end { -webkit-align-content: flex-end; -ms-flex-line-pack: end; align-content: flex-end;
}
.flex-container.align-content-center { -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center;
}
.flex-container.align-content-space-between { -webkit-align-content: space-between; -ms-flex-line-pack: justify; align-content: space-between;
}
.flex-container.align-content-space-around { -webkit-align-content: space-around; -ms-flex-line-pack: justify; /*distribute;*/ align-content: space-around;
}
.flex-container.align-content-stretch { -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch;
}
/*align-self: auto | flex-start | flex-end | center | baseline | stretch;*/
.item.align-self-auto { -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}
.item.align-self-start { -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start;
}
.item.align-self-end { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end;
}
.item.align-self-center { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center;
}
.item.align-self-baseline { -webkit-align-self: baseline; -ms-flex-item-align: baseline; align-self: baseline;
}
.item.align-self-stretch { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch;
}
.item.flex-grow1 { flex-grow: 1;
}
.item.flex-grow2 { flex-grow: 2;
}
.item.flex-grow3 { flex-grow: 3;
}
.item.flex-grow4 { flex-grow: 4;
}
html,body{ width:100%; min-height:100%; margin:0; padding:0; color:#ddd; font-size:14px; font-family:Verdana, Geneva, sans-serif;background-color:#333;}
*{ box-sizing : border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.principal{ width:calc(50% - 40px); min-width:525px; margin:0 20px 20px 20px; float:left;}
.radio{ margin-bottom:20px;}
label{ line-height:200%;}
input[type=radio] { color:white; }
input[type=radio]:checked + label { color:orange; }
input[type=number]{ width:40px; margin-right:.5em;}
h1{ font-size:200%;margin:20px;}
h2{ font-size:180%;margin:0px;}
h4 a{ font-variant:small-caps; font-size:120%; color:#ddd; text-decoration:none;}
h4 small{font-variant: normal; font-size:80%; font-weight:normal; color:#57bcdb;}
table{ width:100%; margin-bottom:1em;}
table td{ width:50%; padding:3px;}
.principal:last-of-type h4 small{ color:#ff8080;}
.flex-container { border: 1px solid #555; display : -webkit-flex; display : -ms-flexbox; display : flex; padding:20px; width:100%; }
.item{ margin:0; display : inherit; padding:10px; width:100px; height:100px; -webkit-align-items: center; -ms-flex-align:center; align-items: center; }
.item p{width:100%; text-align:center; color:#fff;}
#direction .item{flex-wrap:wrap;}
/*#wrap .item{ height:auto;}*/
#wrap{ width:400px;}
#align .item{height:auto; height:auto;flex-wrap:wrap;}
#align{ height:300px;}
#justify{ margin:20px 0; padding:20px 0;}
#alignContent{flex-wrap:wrap; height:600px;}
#alignContent .item{ height:auto;}
#FCI1{ height:300px;}
#FCI1 .item{ height:auto;}
#FCI3 .item{ width:25%;}
#FCI4 .item{ width:50%;}
#FCI5 .item{ width:20%;}
.nbsp{white-space: nowrap;}
@media only screen and (max-width:1100px){.principal{ width:calc(100% - 40px);}}
@media only screen and (max-width:580px) {
.item{ width:50px;height:50px;}
.principal{ width:calc(100% - 40px); min-width:initial;}
.flex-container{width:100%; min-width:initial;}
#wrap{ width:200px;}
}
Flexbox playground - Script Codes JS Codes
function changeFlex(e, t) { for (var n = document.querySelectorAll("." + e), l = document.querySelector("#" + t), r = 0; r < n.length; r++) n[r].addEventListener("change", function() { var e = this.value; l.setAttribute("class", "flex-container " + e) }, !1)
}
function changeItemFlex(e, t) { for (var n = document.querySelectorAll("." + e), l = document.querySelector("#" + t), r = 0; r < n.length; r++) n[r].addEventListener("change", function() { var e = this.value; l.setAttribute("class", "item " + e) }, !1)
}
function changeFlexBasis(e, t) { var n = isNaN(e.value) ? 0 : e.value; console.log("B: " + n), document.querySelector("#" + t).style.WebkitFlexBasis = n + "%", document.querySelector("#" + t).style.flexBasis = n + "%"
}
function changeFlexGrow(e, t) { var n = isNaN(e.value) ? 0 : e.value; console.log("G: " + n), document.querySelector("#" + t).style.WebkitFlexGrow = n, document.querySelector("#" + t).style.flexGrow = n
}
function changeFlexShrink(e, t) { var n = isNaN(e.value) ? 0 : e.value; console.log("S: " + n), document.querySelector("#" + t).style.WebkitFlexShrink = n, document.querySelector("#" + t).style.flexShrink = n
}
function changeFlexOrder(e, t) { var n = isNaN(e.value) ? 0 : e.value; console.log("O: " + n), document.querySelector("#" + t).style.WebkitOrder = n, document.querySelector("#" + t).style.order = n
}
function changeAll(e, t, n, l) { changeFlexBasis(e, l), changeFlexGrow(t, l), changeFlexShrink(n, l)
}
for (var items = document.querySelectorAll(".item"), i = 0; i < items.length; i++) if (items[i].hasAttribute("data-color")) { var color = items[i].getAttribute("data-color"); items[i].style.backgroundColor = "#" + color }
for (var flexO = document.querySelectorAll(".flex-order"), o = 0; o < flexO.length; o++) flexO[o].addEventListener("change", function() { changeFlexOrder(this, "order" + this.id)
}, !1);
changeFlex("flex-direction", "direction"), changeFlex("flex-wrap", "wrap"), changeFlex("flex-align-items", "align"), changeFlex("justify-content", "justify"), changeFlex("align-content", "alignContent"), changeItemFlex("align-self", "alignSelf");
for (var flexGrow = document.querySelectorAll(".flex-grow"), i = 0; i < flexGrow.length; i++) flexGrow[i].addEventListener("change", function() { var e = "item" + this.id; changeFlexGrow(this, e)
});
for (var flexShrink = document.querySelectorAll(".flex-shrink"), j = 0; j < flexShrink.length; j++) flexShrink[j].addEventListener("change", function() { var e = "item" + this.id; changeFlexShrink(this, e)
});
var B1 = document.querySelector("#B1"), G1 = document.querySelector("#G1"), S1 = document.querySelector("#S1"), B2 = document.querySelector("#B2"), G2 = document.querySelector("#G2"), S2 = document.querySelector("#S2");
B1.addEventListener("change", function() { changeAll(B1, G1, S1, "item1")
}), G1.addEventListener("change", function() { changeAll(B1, G1, S1, "item1")
}), S1.addEventListener("change", function() { changeAll(B1, G1, S1, "item1")
}), B2.addEventListener("change", function() { changeAll(B2, G2, S2, "item2")
}), G2.addEventListener("change", function() { changeAll(B2, G2, S2, "item2")
}), S2.addEventListener("change", function() { changeAll(B2, G2, S2, "item2")
});
Developer | Gabi |
Username | enxaneta |
Uploaded | August 22, 2022 |
Rating | 3 |
Size | 5,418 Kb |
Views | 28,336 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
GRID table of contents | 2,377 Kb |
Holy Cow Mandala | 2,764 Kb |
Circle-Circle Intersection | 3,391 Kb |
Intersecting Lines | 3,407 Kb |
Sakura | 3,605 Kb |
Pastel dots net | 2,415 Kb |
Circle decay | 2,638 Kb |
Squiggly lines | 4,753 Kb |
Flexbox playground | 5,418 Kb |
Broken English | 4,877 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Brian The CSS Bee | Jonitrythall | 3,922 Kb |
Header | Er40 | 1,542 Kb |
Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
Tumblr API | Juanv911 | 2,436 Kb |
Vertically rotating text with CSS | Nopr | 2,141 Kb |
Playing with FlexBox | _Billy_Brown | 3,162 Kb |
Blog Concept 2 | JGallardo | 2,994 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
A Pen by Jim Savage | Madebyjam | 2,418 Kb |
A Pen by Final Boss tommyb9 | FBtommyb9 | 55,354 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!