HTML, CSS and JavaScript playground

Initializing

Liveweave Web expand_more
build Tools expand_more
library_add Library expand_more
- AAlgolia JS
- Animate CSS
- Apex Charts JS
- BBulma CSS
- Bootstrap
- CChart JS
- Chartist
- Create JS
- DD3
- Dojo
- FFoundation
- Fullpage JS
- GGranim JS
- Google Charts
- HHalfmoon
- JjQuery
- MMaterialize
- Moment JS
- Masonry JS
- Milligram CSS
- PPure CSS
- Primer CSS
- Popper JS
- Pattern CSS
- Picnic CSS
- RReact JS
- Raphael JS
- Raisin CSS
- SSemantic UI
- Skeleton CSS
- Spectre CSS
- Tachyons CSS
- TTailwind
- Three JS
- UUI Kit
- Vis JS
- WWater CSS
download Download expand_more
- developer_mode Download as HTML
- folder_zip Download as .ZIP
account_circle Login
settings Settings expand_more
smart_display Run

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>

</body>
</html>

/*******************************************************************************/                                                   
                                                                                                                                    
/* layout of input-text-fields */                                                                                                   
                                                                                                                                    
input {                                                                                                                             
    width: 100%;                                                                                                                    
    resize: vertical;                                                                                                               
    text-align: center;                                                                                                             
    font-family: Arial, Helvetica, sans-serif;                                                                                      
    border: none;                                                                                                                   
    background-color: transparent;                                                                                                  
    color: black;                                                                                                                   
    outline: none;                                                                                                                  
    font-weight: bold;                                                                                                              
    transition: ease-in-out, width .35s ease-in-out;                                                                                
}                                                                                                                                   
                                                                                                                                    
input:hover, input:focus {                                                                                                          
    border: 1px solid #0AFE47;                                                                                                      
    background-color: #baffc9;                                                                                                      
    border-radius: 3px;                                                                                                             
}                                                                                                                                   
                                                                                                                                    
#status {                                                                                                                           
    border: 1px solid #74BAAa;                                                                                                      
    background-color: #E7F3F1;                                                                                                      
    border-radius: 3px;                                                                                                             
    width: 21cm;                                                                                                                    
    padding: 10px;                                                                                                                  
}                                                                                                                                   
                                                                                                                                    
/*******************************************************************************/                                                   
                                                                                                                                    
.label-row {                                                                                                                        
    height: 3.0cm;                                                                                                                  
    width: 18.8cm;                                                                                                                  
    display: flex;                                                                                                                  
    flex-direction: row;                                                                                                            
    flex-grow: 0;                                                                                                                   
    flex-wrap: nowrap;                                                                                                              
}                                                                                                                                   
                                                                                                                                    
.label {                                                                                                                            
    border: 1px dashed black;                                                                                                       
    width: 9.4cm;                                                                                                                   
    display: flex;                                                                                                                  
    flex-direction: row;                                                                                                            
    flex-wrap: nowrap;                                                                                                              
}                                                                                                                                   
                                                                                                                                    
.col-left {                                                                                                                         
    width: 4.4cm;                                                                                                                   
}                                                                                                                                   
.col-middle {                                                                                                                       
    width: 1.0cm;                                                                                                                   
    border-left: 1px dotted black;                                                                                                  
    border-right: 1px dotted black;                                                                                                 
}                                                                                                                                   
.col-right {                                                                                                                        
    width: 4.0cm;                                                                                                                   
}

/*******************************************************************************/                                                   
                                                                                                                                    
/* different usage of input-text-fields */                                                                                          
                                                                                                                                    
/* ----- column-left ----- */                                                                                                       
.hsig-wrapper {                                                                                                                     
    flex-direction: column;                                                                                                         
    justify-content: space-evenly;                                                                                                  
}                                                                                                                                   
                                                                                                                                    
.hl {                                                                                                                               
    font-size: 10px;                                                                                                                
    flex: 0 1 auto;                                                                                                                 
}                                                                                                                                   
                                                                                                                                    
.sk {                                                                                                                               
    font-size: 18px;                                                                                                                
    flex: 0 1 auto;                                                                                                                 
}                                                                                                                                   
                                                                                                                                    
.format {                                                                                                                           
    font-size: 18px;                                                                                                                
    flex: 0 1 auto;                                                                                                                 
}                                                                                                                                   
                                                                                                                                    
.hsig {                                                                                                                             
    font-size: 18px;                                                                                                                
    flex: 0 1 auto;                                                                                                                 
}                                                                                                                                   
                                                                                                                                    
.sig_add {                                                                                                                          
    font-size: 10px;                                                                                                                
    flex: 0 1 auto;                                                                                                                 
}                                                                                                                                   
                                                                                                                                    
/* ----- column-middle ----- */                                                                                                     
.loc-wrapper {                                                                                                                      
    background-color: transparent;                                                                                                  
    width: 100%;                                                                                                                    
    height: 100%;                                                                                                                   
    display: flex;                                                                                                                  
    text-align: center;                                                                                                             
    justify-content: center;                                                                                                        
    align-items: center;                                                                                                            
}                                                                                                                                   
                                                                                                                                    
.loc {                                                                                                                              
    font-size: 20px;                                                                                                                
    width: 2.9cm;                                                                                                                   
    height: 0.9cm;                                                                                                                  
    /* rotate text by -90Â° and translate it into col-middle */                                                                      
    -moz-transform:rotate(-90deg);                                                                                                  
    -webkit-transform: rotate(-90deg);                                                                                              
    -o-transform: rotate(-90deg);                                                                                                   
    -ms-transform: rotate(-90deg);                                                                                                  
}

/* ----- column-right ----- */                                                                                                      
.as-wrapper {                                                                                                                       
    width: 100%;                                                                                                                    
    height: 100%;                                                                                                                   
    display: flex;                                                                                                                  
    text-align: center;                                                                                                             
    justify-content: center;                                                                                                        
    flex-direction: row;                                                                                                            
    align-items: center;                                                                                                            
    /*flex-wrap: nowrap;*/                                                                                                          
    /*justify-content: space-evenly;*/                                                                                              
}                                                                                                                                   
                                                                                                                                    
.as_detail {                                                                                                                        
    font-size: 18px;                                                                                                                
    width: 100%;                                                                                                                    
    align-self: center;                                                                                                             
                                                                                                                                    
    flex: 0 1 auto;                                                                                                                 
    width: 0.8cm;                                                                                                                   
    /*height: 30%;*/                                                                                                                
    /* rotate text by -90Â° and translate it into col-right */                                                                       
    -moz-transform:rotate(-90deg);                                                                                                  
    -webkit-transform: rotate(-90deg);                                                                                              
    -o-transform: rotate(-90deg);                                                                                                   
    -ms-transform: rotate(-90deg);                                                                                                  
}