Golden Sands Userlinks

HTML
<div class="custom-userlinks-outer"> <div class="guest"> <div class="userlink-img"> <img style="width: 50px; height: 50px;" src="https://i.postimg.cc/gkbyh4LQ/coopg05.gif"/> </div> <div class="userlink-name"> welcome,<br/> <span>guest!</span> </div> <div class="userlink-button"> <a href="">register</a> </div> <div class="userlink-button"> <a href="">login</a> </div> </div> <div class="guest"> <div class="userlink-img"> <img style="width: 50px; height: 50px;" src="https://i.postimg.cc/gkbyh4LQ/coopg05.gif"/> </div> <div class="userlink-name"> welcome,<br/> <span> <a href="index.php?showuser=<!-- |id| -->"><!-- |prefix| --><!-- |name| --><!-- |suffix| --></a></span> </div> <div class="userlink-usebutton"> <a href="index.php?act=Msg&CODE=01">messages(<!-- |new_msg| -->)</a> </div> <div class="userlink-usebutton"> <a href="index.php?act=UserCP&CODE=alerts"> alerts <span class="alert<!-- |new_alerts| -->"> (<!-- |new_alerts| -->)</span> </a> </div> <div class="userlink-usebutton"> <a href="index.php?act=UserCP&CODE=26">tracked topics</a> </div> <div class="userlink-usebutton"> <a href="index.php?act=UserCP">ucp</a> </div> <div class="userlink-usebutton"> <span id='sub_bar_2' style="display:none;"><% SUBACCOUNTS %></span><span id='subacct_link_2'><a href='javascript:void(0);' onclick="document.getElementById('subacct_link_2').innerHTML=document.getElementById('sub_bar_2').innerHTML;">Switch Account</a></span> </div> </div> </div>
CSS
.guest { display: flex; flex-direction: row; column-gap: 30px; align-items: ; } .userlink-img { width: 50px; height: 50px; border-radius: 10px; border: 5px solid red; } .userlink-img img { border-radius: 5px; } .userlink-name { background-color: yellow; padding: 10px; text-align: right; height: 30px; } .userlink-name span{ color: red; font-weight: bold; } .userlink-button { background-color: red; padding: 10px; border-radius: 10px; width: 100px; height: 30px; line-height: 30px; text-align: center; } .userlink-usebutton { width: 35px; height: 35px; background-color: red; border-radius: 10px; margin-top: 10px; }
JAVASCRIPT
Expand for more options Login