HTML, CSS and JavaScript playground - Liveweave

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

<div class="container py-3 p-0" style="max-width:300px;font-size:9pt;letter-spacing:.2px;">

<div class="card rounded-0 p-2" style="background:#fff;color:#000;border:1px solid #000;">
			<div class="row no-gutters">
			    
				<div class="col-auto">
				    
					
					<div style="background:url(
					
					IMG_URL
					
					) no-repeat center;background-size:cover;min-height:100px;width:100px;" class="h-100"></div>
					
				</div>
				
				<div class="col pl-2">
					    
					<div class="flex-column h-100">
					    
					     
        				<div style="line-height:1;">
        					<p class="text-uppercase" style="font-weight:500;color:#5bbe36;">user(name)</p>
        					<span style="color:#b2df74;">00 . pro/nouns . etc</span>
        				</div>
        				<div class="my-1"></div>
        				
        				
        				<p class="text-justify my-auto" style="max-height:100px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#5bbe36 #b2df74;"> 
        					bio goes here! this will scroll
        					<br>
        					lorem ipsum dolor sit amet, consectetur adipiscing elit. duis sollicitudin elit sed tellus blandit viverra sed eget odio.
        				</p>
        				
        				<div class="my-1"></div>
        				
        				
        				
        				<div class="justify-content-around">
        					<a href="URL" style="color:#b2df74;"><i class="fab fa-twitter fa-fw"></i></a>
        					<a href="URL" style="color:#b2df74;"><i class="fab fa-instagram fa-fw"></i></a>
        					<a href="URL" style="color:#b2df74;"><i class="fab fa-trello fa-fw"></i></a>
        					<a href="URL" style="color:#b2df74;"><i class="fab fa-discord fa-fw tooltipster" title="discord username"></i></a>
        				</div>   
        				    
        			</div>
					
				</div>
				
			</div>
		</div>
	
</div>

<!--

code by soupboy420 (don't credit me)

use ctrl+f / replace all to quickly edit colors

main accent : #5bbe36
secondary accent : #b2df74
text : #000
background : #fff
border : #000

-->

<div class="container py-3 p-0" style="max-width:300px;font-size:9pt;letter-spacing:.2px;">

<div class="card rounded-0 p-2" style="background:#fff;color:#000;border:1px solid #000;">
			<div class="row no-gutters">
			    
				<div class="col-auto">
				    
					
					<div style="background:url(
					
					IMG_URL
					
					) no-repeat center;background-size:cover;min-height:100px;width:100px;" class="h-100"></div>
					
				</div>
				
				<div class="col pl-2">
					    
					<div class="flex-column h-100">
					    
					     
        				<div style="line-height:1;">
        					<p class="text-uppercase" style="font-weight:500;color:#5bbe36;">user(name)</p>
        					<span style="color:#b2df74;">00 . pro/nouns . etc</span>
        				</div>
        				<div class="my-1"></div>
        				
        				
        				<p class="text-justify my-auto" style="max-height:100px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#5bbe36 #b2df74;"> 
        					bio goes here! this will scroll
        					<br>
        					lorem ipsum dolor sit amet, consectetur adipiscing elit. duis sollicitudin elit sed tellus blandit viverra sed eget odio.
        				</p>
        				
        				<div class="my-1"></div>
        				
        				
        				
        				<div class="justify-content-around">
        					<a href="URL" style="color:#b2df74;"><i class="fab fa-twitter fa-fw"></i></a>
        					<a href="URL" style="color:#b2df74;"><i class="fab fa-instagram fa-fw"></i></a>
        					<a href="URL" style="color:#b2df74;"><i class="fab fa-trello fa-fw"></i></a>
        					<a href="URL" style="color:#b2df74;"><i class="fab fa-discord fa-fw tooltipster" title="discord username"></i></a>
        				</div>   
        				    
        			</div>
					
				</div>
				
			</div>
		</div>
	
</div>