mubot-server
Version:
A server for mubot
267 lines (254 loc) • 8.04 kB
HTML
<div class="body">
<section class="top-section">
<div style="display: inline-block">
<div class="stats-container">
<div class="profile-pic-container">
<div class="profile-pic">
<!-- -->
<img class="profile-pic-img" src="/uploads/leathan">
<!-- Profile img -->
</div>
</div>
<div class="stats-content">
<h1 class="username">
Username
</h1>
<h3 class="stats">
Username statistics like balance and reputation.
</h3>
<!-- Linked accounts -->
<div>
<ul class="linked-accounts">
<li class="linked-account">
<a href="" class="linked-account-link">
<img class="linked-account-img" src="http://icons.iconarchive.com/icons/blackvariant/button-ui-requests-9/128/Slack-icon.png">
</a>
</li>
<li class="linked-account">
<a href="" class="linked-account-link">
<img class="linked-account-img" src="/bitmark/logo.png">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--<blockquote class="bubble">This is your profile bio, whatever you write here is viewable by everyone.</blockquote>-->
<div id="instructions" class="paper">This is your profile bio, whatever you write here is viewable by everyone.</div>
</section>
<!-- Start Menu section -->
<nav class="profile-state-nav">
<!-- start container -->
<div>
<!-- start row -->
<div>
<div>
<a href="" class="profile-state-link">
<img src="https://envato.ukiedev.com/ukiecard/style1/assets/img/menu/profile.gif?t=1500407816690" alt="Settings" id="IMG_38" />
<span>Settings</span>
</a>
<a href="" class="profile-state-link">
<img src="https://envato.ukiedev.com/ukiecard/style1/assets/img/menu/resume.gif?t=1500408799335" alt="Markings" id="IMG_42" />
<span>Marking History</span>
</a>
<a href="" class="profile-state-link">
<img src="https://envato.ukiedev.com/ukiecard/style1/assets/img/menu/portfolio.png" alt="Transgers" id="IMG_46" />
<span>Transfers</span>
</a>
<a href="" class="profile-state-link">
<img src="https://envato.ukiedev.com/ukiecard/style1/assets/img/menu/blog.gif?t=1500407209224" alt="More" id="IMG_50" />
<span>More</span>
</a>
</div>
</div>
</div>
</nav>
<footer class="footer">
<div class="footer-container">
<div class="footer-content">
<div class="footer-link-container">
<a href="#" class="bottom-link"> <span class="bottom-img"><i class="spacer""></i></span> Custom link 1</a>
</div>
<div class="footer-link-container">
<a href="#" class="bottom-link"> <span class="bottom-img"><i class="spacer"></i></span> Custom link 2</a>
</div>
<div class="footer-link-container"">
<a href="#" class="bottom-link"> <span class="bottom-img"><i class="spacer"></i></span> Custom link 3</a>
</div>
</div>
</div>
</footer>
</div>
<style>
/* Profile bubble */
.body {
box-shadow: rgb(0, 0, 0) 0px 0px 50px 0px;
box-sizing: border-box;
border: 1px solid rgb(198, 198, 198);
margin: 50px 79.5px;
background-color: #ffffff;}
.top-section {
width: 100%;
display: inline-block;
border-bottom: 1px solid rgb(237, 237, 237);
padding: 48px 0px;
}
.stats-container {
display: inline-block;
box-sizing: border-box;
width: 1200px;
margin: 0px -15px;
}
.profile-pic-container {
display: inline-block;
box-sizing: border-box;
float: left;
text-align: right;
width: 40%;
padding: 0px 15px;
}
.profile-pic {
box-sizing: border-box;
display: inline-block;
text-size-adjust: 100%;
height: 232px;
width: 232px;
border: 1px solid #ffb8c9;
border-radius: 50% 50% 50% 50%;
overflow: hidden;
}
.profile-pic-img {
height: 100%;
width: 100%:
}
.stats-content {
float: left;
}
.username {
box-sizing: border-box;
text-transform: uppercase;
perspective-origin: 335px 36px;
font: normal normal 600 normal 66px / 72px Raleway, Helvetica, Arial, sans-serif;
margin: 48px 0px 0px;
color: pink
}
.stats {
box-sizing: border-box;
height: 34px;
text-size-adjust: 100%;
width: 670px;
perspective-origin: 335px 17px;
transform-origin: 335px 17px;
font: normal normal 300 normal 26px / 34px Raleway, Helvetica, Arial, sans-serif;
margin: 0px;
color: grey
}
.linked-account-img {
height: 48px;
width: 48px;
}
.linked-accounts {
box-sizing: border-box;
text-size-adjust: 100%;
perspective-origin: 335px 21.5px;
transform-origin: 335px 21.5px;
animation: fadeIn 1s ease 0s 1 normal both running;
font: normal normal 300 normal 16px / 24px Raleway, Helvetica, Arial, sans-serif;
padding: 0px;
}
.linked-account {
display: inline-block;
}
.profile-state-nav {
padding: 48px 0px;
text-align: center;
margin: 0px 14px;
}
.profile-state-link {
display: inline-block;
text-decoration: none solid rgb(51, 122, 183);
text-size-adjust: 100%;
width: 170px;
margin: 0px 20px;
}
body { height: 100%; background-color: #b7babc }
.footer {
width: 100%;
display: inline-block;
box-sizing: border-box;
text-size-adjust: 100%;
border-top: 1px solid rgb(198, 198, 198);
padding: 17px 0px;
}
.footer-link-container {
box-sizing: border-box;
float: left;
margin: 0px 19px;
margin-right: 90px;
padding: 0px 15px;
}
.bottom-link {
color: rgb(243, 120, 178);
text-decoration: none solid rgb(0, 0, 0);
text-size-adjust: 100%;
column-rule-color: rgb(0, 0, 0);
caret-color: rgb(0, 0, 0);
border: 0px none rgb(0, 0, 0);
font: normal normal 300 normal 16px / 36px Raleway, Helvetica, Arial, sans-serif;
outline: rgb(0, 0, 0) none 0px;
transition: all 0.5s ease-in-out 0s;
}
.bottom-img {
box-sizing: border-box;
color: rgb(214, 214, 214);
display: inline-block;
height: 36px;
width: 36px;
border: 1px solid rgb(214, 214, 214);
border-radius: 50% 50% 50% 50%;
margin: 0px 7px 7px 0px;
transition: all 0.5s ease-in-out 0s;
}
.spacer {
display: inline-block;
height: 16px;
width: 12.5781px;
}
#instructions {font: 16px 'AmericanTypewriter', Cambria, Georgia; color: #282625; margin: 0 auto; width: 600px;}
.paper {
padding: 37px 55px 27px;
position: relative;
box-shadow: 3px 3px 5px 1px #ffb8c9;
background: white;
background: -webkit-linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px;
background: -moz-linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px;
background: linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px;
-webkit-background-size: 100% 30px;
-moz-background-size: 100% 30px;
-ms-background-size: 100% 30px;
background-size: 100% 30px;
border-radius: 5px 0px 5px 0px;
}
.paper::before {content:""; z-index:-1; margin:0 1px; width:706px; height:10px; position:absolute; bottom:-3px; left:0; background:white; border:1px solid #B5B5B5;}
.paper::after {content:''; position:absolute; width:0px; top:0; left:39px; bottom:0; border-left:1px solid #F8D3D3;}
/* For dynamic (future use...)
body{margin:30px 0;}
#instructions {font: 16px 'AmericanTypewriter', Cambria, Georgia; color: #282625; margin: 0 auto; width: 600px; line-height: 30px;}
.paper {
padding: 37px 55px 27px;
position: relative;
border: 1px solid #B5B5B5;
background: white;
background: -webkit-linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px;
background: -moz-linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px;
background: linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px;
-webkit-background-size: 100% 30px;
-moz-background-size: 100% 30px;
-ms-background-size: 100% 30px;
background-size: 100% 30px;
}
.paper::before {content:""; z-index:-1; margin:0 1px; width:706px; height:10px; position:absolute; bottom:-3px; left:0; background:white; border:1px solid #B5B5B5;}
.paper::after {content:''; position:absolute; width:0px; top:0; left:39px; bottom:0; border-left:1px solid #F8D3D3;}
*/
</style>