eng
competition

Text Practice Mode

Basic CSS code from (https://gist.github.com/heydeny/4951370)

created Jul 17th 2021, 11:29 by Sexuality


1


Rating

932 words
0 completed
00:00
html {
height: 100%;
}
 
*, ::after, ::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
 
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
 
body {
font-family: "Lato", Calibri, Arial, sans-serif;
background-color: #f0f0f0;
font-size: 16px;
color: #333;
-webkit-font-smoothing: antialiased;
overflow-y: scroll;
overflow-x: hidden;
}
 
.clr {
    clear: both;
    padding: 0;
    height: 0;
    margin: 0;
}
 
.container {
width: 100%;
position: relative;
}
 
/*header*/
.container > header {
margin: 10px;
padding: 20px 10px 10px 10px;
position: relative;
display: block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
text-align: center;
}
 
.container > header h1 {
font-size: 30px;
line-height: 38px;
margin: 0;
position: relative;
font-weight: 300;
color: #666;
text-shadow:  1px 1px rgba(255,255,255,0.6);
}
 
.container > header h2 {
font-size: 14px;
font-weight: 300;
margin: 0;
padding: 15px  5px 0;
color: #666;
font-family: Cambria, Georgia, serif;
font-style: italic;
text-shadow:  1px 1px rgba(255,255,255,0.6);
}
 
/*section*/
.main {
width: 90%;
margin:  auto;
position: relative;
}
 
.example-wrapper {
width: 100%;
max-width: 1000px;
padding:  30px 40px 30px;
margin: 20px auto;
}
 
.example-wrapper h3 {
background: #555;
color: #fff;
text-shadow:  -1px 1px rgba(0,0,0,0.7);
border-radius: 20px 20px  0;
padding: 13px 20px;
font-size: 22px;
}
 
.example-wrapper {
    width: 100%;
    max-width: 1000px;
    padding:  30px 40px 30px;
    margin: 20px auto;
}
 
.example-wrapper h3 {
    background: #555;
    color: #fff;
    text-shadow:  -1px 1px rgba(0,0,0,0.7);
    border-radius: 20px 20px  0;
    padding: 13px 20px;
    font-size: 22px;
}
 
.demo-wrapper {
    padding: 35px 20px;
    background: #f8f8f8;
    background: rgba(255,255,255,0.3);
    border: 1px solid rgba(0,0,0,0.1);
    border-top-color: rgba(255,255,255,0.4);
    border-bottom-color: rgba(255,255,255,0.4);
}
 
.demo-wrapper:after {
    content: "";
    display: table;
    clear: both;
}
 
.code-wrapper {
    padding: 30px 40px 10px;
    display: block;
    background: #f0f0f0;
    background: rgba(0,0,0,0.06);
    border-radius:   20px 20px;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: inset  2px 10px rgba(0,0,0,0.1);
}
 
.code-wrapper code {
    white-space: pre-wrap;
    font-family: Monaco, Consolas, "Lucida Console", monospace;
    color: #444;
    font-weight: 700;
    text-shadow:  1px  rgba(255,255,255,0.8);
    font-size: 14px;
    line-height: 22px;
}
 
.block-level {
    width: 120px;
    height: 120px;
    margin: 20px;
    position: relative;
    float: left;
    color: #fff;
    padding: 20px;
    text-shadow:  -1px 1px rgba(0,0,0,0.5);
}
 
.drop-shadow {
    background: #9479fa;
}
 
.drop-shadow.top {
    box-shadow:  -4px 2px -2px rgba(0,0,0,0.4)
}
 
.drop-shadow.right {
    box-shadow: 4px  2px -2px rgba(0,0,0,0.4)
}
 
.drop-shadow.bottom {
    box-shadow:  4px 2px -2px rgba(0,0,0,0.4)
}
 
.drop-shadow.left {
    box-shadow: -4px  2px -2px rgba(0,0,0,0.4)
}
 
div[class*="emphasize-"] {
    background: #69D2E7;
}
 
.emphasize-dark {
    box-shadow:   5px 2px rgba(0,0,0,.35)
}
 
.emphasize-light {
    box-shadow:    10px rgba(255,255,255,.25)
}
 
.emphasize-inset {
    box-shadow: inset   7px 4px rgba(255,255,255,.5)
}
 
.emphasize-border {
    box-shadow: inset    7px rgba(255,255,255,.5)
}
 
div[class*="embossed"] {
    background: #8ec12d;
    color: #333;
    text-shadow:  1px 1px rgba(255,255,255,0.9);
}
 
.embossed-light {
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: inset  1px  rgba(255,255,255,0.7);
}
 
.embossed-heavy {
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow:  
    inset  2px 3px rgba(255,255,255,0.3),  
    inset  -2px 3px rgba(0,0,0,0.3),0 1px 1px rgba(255,255,255,0.9);
}
 
div[class*="gradient"]{
    background-color: #DEB8A0;
    box-shadow:    1px #a27b62;
}
 
.gradient-light-linear {
    background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
}
 
.gradient-dark-linear {
    background-image: -webkit-linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
    background-image: -moz-linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
    background-image: -o-linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
    background-image: -ms-linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
    background-image: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
}
 
.gradient-light-radial {
    background-image: -webkit-radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
    background-image: -moz-radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
    background-image: -o-radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
    background-image: -ms-radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
    background-image: radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
}
 
.gradient-dark-radial {
    background-image: -webkit-radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
    background-image: -moz-radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
    background-image: -o-radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
    background-image: -ms-radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
    background-image: radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
}
 
div[class*="rounded"] {
    background: #fca1cc;
}
 
.light-rounded {
    border-radius: 3px;
}
 
.heavy-rounded {
    border-radius: 8px;
}
 
.full-rounded {
    border-radius: 50%;
}
 
.barrel-rounded {
    border-radius: 20px/60px;
}
 
.inline-link-1 {
    display: inline-block;
    margin:  0.2em;
    padding: 3px;
    background: #97CAF2;
    border-radius: 2px;
 
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;  
 
    /* Font styles */
    text-decoration: none;
    font-weight: bold;
    color: white;
}
 
.inline-link-1:hover {
    background: #53A7EA
}
 
.inline-link-1:active {
    background: #C4E1F8
}
 
.inline-link-1:visited {
    background: #F2BF97
}
 
.inline-link-2 {
    display: inline-block;
    border-bottom: 2px dashed rgba(0,0,0,0.9);
    /* Font styles */
    text-decoration: none;
    color: #777;
}
 
.inline-link-2:hover {
    border-bottom-style: dotted;
}
 
.inline-link-2:active {
    border-bottom-style: solid;
}
 
.inline-link-2:visited {
    border-bottom: 2px solid #97CAF2;
}
 
.inline-link-3 {
    display: inline-block;
    position: relative;
    padding-left: 6px;
    /* Font styles */
    text-decoration: none;
    color: #6AB3EC;
    text-shadow:  1px 1px rgba(255,255,255,0.9);
}
 
.inline-link-3:hover {
    color: #3C9CE7;
}
 
.inline-link-3:before {
    content: "\25BA";
    font-size: 80%;
    display: inline-block;
    padding-right: 3px;
    pointer-events: none;
}
 
.inline-link-3:hover:before {
    color: #F2BF97;
}
 
.metro {
    display: inline-block;
    padding: 10px;
    margin: 10px;
    background: #08C;
    /* Font styles */
    color: white;
    font-weight: bold;
    text-decoration: none;
}
 
.metro:hover {
    background: #0AF
}
 
.metro.three-d {
    position: relative;
    box-shadow:  
        1px 1px #53A7EA,  
        2px 2px #53A7EA,  
        3px 3px #53A7EA;
 
    -webkit-transition: all 0.1s ease-in;
    -moz-transition: all 0.1s ease-in;
    -o-transition: all 0.1s ease-in;
    -ms-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
}
 
.metro.three-d:active {
    box-shadow: none;
    top: 3px;
    left: 3px;
}
 
.bordered-link {
    display: inline-block;
    padding: 8px;
    border: 3px solid #FCB326;
    border-radius: 6px;
    box-shadow:  
         2px 1px rgba(0, 0, 0, 0.2),  
        inset  2px 1px rgba(0, 0, 0, 0.2);
    /* Font styles */
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
    color: #222;
}
 
.bordered-link:hover {
    border-color: #FDD68B
}
 
.bordered-link:active {
    border-color: #FEE8BD
}
 
.modern {
    display: inline-block;
    margin: 10px;
    padding: 8px 15px;
    background: #B8ED01;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 4px;
 
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
 
    box-shadow:  
        inset  1px  rgba(255,255,255,0.5),  
         2px 2px rgba(0,0,0,0.3),  
          4px 1px rgba(0,0,0,0.2);  
 
    /* Font styles */
    text-decoration: none;
    text-shadow:  1px rgba(255,255,255,0.7);
}

saving score / loading statistics ...