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 ...

Flag text as spam

Do you really want to report this text for spam?

Cancel Report for Spam

Delete Text

Do you really want to delete this text? This can't be reversed and should only be used for content that classifies as Spam, Cheating or insulting. If in doubt, just send me an email :)

Cancel Delete Text