Webleb - UI Elements

HTML CSS JS

<html><head><script src="//www.google.com/jsapi"></script><script>window.parent.maeExportApis_();</script>

<title>Core Ball，Level 4</title>

body {

background-color: #c8c8c8;

overflow: hidden;

padding: 0;

margin: 0;

/*font-family:Helvetica;*/

/*font-family: 'Open Sans', sans-serif, Helvetica;*/

font-family: 'Nunito', sans-serif;

}

.center-box {

text-align: center;

position: absolute;

width: 300px;

height: 400px;

margin: -200px 0 0 -150px;

left: 50%;

top: 50%;

}

.title {

font-size: 50px;

/*font-family: sans-serif;*/

}

.button {

position: absolute;

width: 100px;

height: 100px;

left: 50%;

top: 50%;

margin: -100px 0 0 -50px;

border: 2px solid #666;

color: #666;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

border-radius: 15px;

font-size: 55px;

}

.button .text {

font-size: 16px;

padding: 0 10px;

width: 80px

}

.op {

position: absolute;

width: 200px;

height: 100px;

left: 50%;

top: 70%;

margin: -50px 0 0 -100px;

display: flex;

justify-content: flex-start;

flex-direction: column;

align-items: center;

}

#txtAr svg{

width: 40px;

height: 40px;

}

#txtAr svg path{

fill:#666666;

}

</style>

</head>

<span class="title">CoreBall</span>

<div class="text">level 4</div>

</div>

</a>

<span id="btnReset" style="display:inline-block;color:#666">RESET</span>

</div>

</section>

</div>

</section>

</div>

</body></html>
clcoreball.html
Displaying clcoreball.html.

Preview

Open Advanced Editor

HTML CSS JS

<html><head><script src="//www.google.com/jsapi"></script><script>window.parent.maeExportApis_();</script>

<title>Core Ball，Level 4</title>

body {

background-color: #c8c8c8;

overflow: hidden;

padding: 0;

margin: 0;

/*font-family:Helvetica;*/

/*font-family: 'Open Sans', sans-serif, Helvetica;*/

font-family: 'Nunito', sans-serif;

}

.center-box {

text-align: center;

position: absolute;

width: 300px;

height: 400px;

margin: -200px 0 0 -150px;

left: 50%;

top: 50%;

}

.title {

font-size: 50px;

/*font-family: sans-serif;*/

}

.button {

position: absolute;

width: 100px;

height: 100px;

left: 50%;

top: 50%;

margin: -100px 0 0 -50px;

border: 2px solid #666;

color: #666;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

border-radius: 15px;

font-size: 55px;

}

.button .text {

font-size: 16px;

padding: 0 10px;

width: 80px

}

.op {

position: absolute;

width: 200px;

height: 100px;

left: 50%;

top: 70%;

margin: -50px 0 0 -100px;

display: flex;

justify-content: flex-start;

flex-direction: column;

align-items: center;

}

#txtAr svg{

width: 40px;

height: 40px;

}

#txtAr svg path{

fill:#666666;

}

</style>

</head>

<span class="title">CoreBall</span>

<div class="text">level 4</div>

</div>

</a>

<span id="btnReset" style="display:inline-block;color:#666">RESET</span>

</div>

</section>

</div>

</section>

</div>

</body></html>
clcoreball.html
Displaying clcoreball.html.

Preview

Validating your code, please wait...