Flexbox playground

Developer
Size
5,418 Kb
Views
28,336

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 Previews

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")
});
Flexbox playground - Script Codes
Flexbox playground - Script Codes
Home Page Home
Developer Gabi
Username enxaneta
Uploaded August 22, 2022
Rating 3
Size 5,418 Kb
Views 28,336
Do you need developer help for Flexbox playground?

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!

Gabi (enxaneta) Script Codes
Name
Broken English
Fat worm
Animated chart
Wave
Holy Cow Mandala
Cube
Rift
Squiggly lines
Circle decay
Sine wave ice cream
Create amazing Facebook ads with AI!

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!