Golden Sands stats

HTML
<div class="sand-stats-outer"> <div class="sand-stats-left"> <div class="sand-stats-welcome"> welcome<br/> <span class="sand-welcome-span">so and so</span> </div> <div class="sand-stats-info"> <div class="sand-stats-box"> ## posts </div> <div class="sand-stats-box"> ## members </div> <div class="sand-stats-links"> <div class="sand-stats-click"><a href="">link</a></div> <div class="sand-stats-click"><a href="">link</a></div> <div class="sand-stats-click"><a href="">link</a></div> <div class="sand-stats-click"><a href="">link</a></div> <div class="sand-stats-click"><a href="">link</a></div> </div> </div> </div> <div class="sand-stats-center"> <div class="sand-stats-online"> <div class="sand-stats-online-inner"> online now, online now, online now,online now,online now,online now, online now, online now, online now, online now, online now, online now, online now, online now, online now, v online now, online now, online now, online now, online now, online now, online now, online now, online now, online now, online now, online now, online now,online now, online now, online now, online now, online now, v online now, online now, online now, online now, online now, online now, online now, online now, online now, online now, online now, online now, online now, online now, online now, </div> </div> <div class="sand-stats-ontoday"> <div class="sand-stats-ontoday-inner"> here's stuff. </div> </div> </div> <div class="sand-stats-right"> recent posts here </div> </div>
CSS
.sand-stats-outer { display: flex; flex-direction: row; background-color: yellow; } .sand-stats-left { background-color: orange; width: 25%; padding: 10px; } .sand-stats-welcome { background-color: green; text-align: right; padding: 15px; } .sand-welcome-span { border-top: 1px solid blue; } .sand-stats-info { background-color: blue; padding: 5px; border-radius: 15px; margin: 10px 0px 0px 0px; } .sand-stats-box { background-color: silver; margin: 10px 10px 10px 10px; padding: 10px; text-align: center; border-radius: 10px; } .sand-stats-links { display: flex; flex-direction: row; margin: 5px 5px 5px 5px; width: ; column-gap: 15px; justify-content: center; padding: ; background-color: orange; } .sand-stats-click { background-color: purple; border-radius: 10px; width: 35px; height: 35px; text-align: center; line-height: 35px; } .sand-stats-center { background-color: blue; width: 50%; } .sand-stats-online { background-color: red; height: 115px; padding: 5px; margin: 10px 10px 10px 10px; } .sand-stats-online-inner { margin: 5px 5px 5px 5px; padding: 0px 15px 0px 0px; background-color: ; width: ; height: 105px; overflow-y: auto; text-align: justify; } .sand-stats-ontoday { background-color: orange; margin: 10px 10px 10px 10px; height: 90px; padding: 5px; } .sand-stats-ontoday-inner { margin: 5px 5px 5px 5px; padding: 0px 15px 0px 0px; background-color: purple; height: 80px; overflow-y: auto; } .sand-stats-right { background-color: green; width: 25%; padding: 10px; border-radius: 15px; margin: 10px 10px 10px 10px; }
JAVASCRIPT
Expand for more options Login