Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="MainBody">
    <div id="DataFrame">        
        <div class="DataObjects"><div class="InfoLabels">Account Level:</div><div class="InfoData" id="LevelData"><?php echo($row['level']); ?></div></div>
        <div class="DataObjects"><div class="InfoLabels">Profile Views:</div><div class="InfoData" id="ProfileData"><?php echo(mysqli_num_rows($views)); ?></div></div>
        <div class="DataObjects"><div class="InfoLabels">Messages:</div><div class="InfoData" id="MessageData">0</div></div>
    </div>
​
​
    <div id="AccountFrame">
        <div id="AccountAvatar">
            <img src="http://upload.wikimedia.org/wikipedia/commons/c/cd/Placeholder_male_superhero_c.png" id="Acc_img"/>
            <input type="button" id="sendPm" value="Send Message" name="sendPm"/>
        </div>
        <div id="AccountInfo">
            <div id="NameObject" class="DetailObjects"><div class="DetailLabel"><?php echo($row['first_name'] ."&nbsp". $row['last_name'] ."&nbsp;". "(".$row['username'].")");?></div></div>
            <div class="DetailObjects"><div class="DetailLabel">Age: </div><div class="DetailInput" id="DetailAge"><?php echo($age); ?></div></div>
            <div class="DetailObjects"><div class="DetailLabel">Country: </div><div class="DetailInput" id="DetailCountry"><?php echo($row['country']); ?></div></div>
            <div class="DetailObjects"><div class="DetailLabel">Registered: </div><div class="DetailInput" id="DetailReg"><?php echo($timeon." Days Ago"); ?></div></div>
            <div class="DetailObjects"><div class="DetailLabel">About Me: </div><div class="DetailInput" id="DetailAbout"><?php echo($row['about']);?></div></div>
        </div>
​
​
    </div>
</div>
</body>
</html>
 
*{
    margin: 0px;
    padding: 0px;
    font-family: 'Ubuntu', sans-serif;  
    }
body{
    background-color: #111111;
    margin: 1%;
}
#MainBody{
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    height: 800px;
}
#AccountFrame{
    width: 100%;
    padding: 15px;
    height: 100%;
    background-color: #eeeeee;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    display: inline-block;
}
#DataFrame{
    font-size: 2.0vh;
    padding: 15px;
    background-color: #eeeeee;
    border-radius-top: 4px;
    width: 100%;
    text-align: right;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}
#DataFrame ,.InfoLabels, .InfoData{
    display: inline-block;
}
​
#AccountAvatar{
    background-color: blue;
    width: 30%;
    float:left;
}
#AccountAvatar img{
    width: 100%;
}
#sendPm{
    width: 100%;
    height: 5.0vh;
    background-color: #0071ff;
    border: 0px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color: #1A1A1A;
    font-size: 2.0vh;
}
#sendPm:hover{
    background-color: #308CFF;
}
​
.DetailLabel{
    display: inline-block;
    width: 9.0vh;
}
.DetailInput{
​
    width: 40%;
    display: inline;
}
​
.DetailObjects{
    width: 100%;
    display: inline-block;
    background-color: red;
    margin-top: 1.0vh;
}
​
#AccountName{
    color: #0071ff;
}
#AccountInfo{
    width: 70%;
    font-size: 1.7vh;
    float:left;
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers