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 name="description" content="Running to win copy">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Running2WinCopy</title>
    <link href="https://fonts.googleapis.com/css?family=Lexend+Deca|Roboto:400,500,700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="header">
      <div class="topbar">
        <div class="logo">
            <div class="big-character green">
                R
            </div>
            <div class="divider">
                
            </div>
            <div class="logo-holder">
              <div class="title grey">
                    Running<span class="green">2Lose</span>
              </div>
              <div class="description grey">
                Where Runners Die
              </div>
            </div>
        </div>
        <div class="member-info">
            <div class="member-holder">
              <div class="name dark-green">
                    Welcome <span class="bold">TadhgJ</span>
              </div>
              <div class="account-info">
                Basic ass Account Member
              </div>
            </div>
            <div class="buttons">
              <div class="profile-button">
                Profile
              </div>
              <div class="logout-button">
                Logout
              </div>
            </div>
        </div>
        <div class="home-page-button">
            
        </div>
        <div class="menu">
            MENU
        </div>
      </div>
    </div>
    <div class="content">
        <div class="page">
            page content
        </div>
    </div>
    <div class="footer">
        <div class="footer-content">
            <div class="footer-container">
            <div class="footer-logo">
                <div class="big-character grey">
                    R
                </div>
                <div class="divider">
                    
                </div>
                <div class="logo-holder">
                  <div class="title grey">
                        Running<span class="">2Lose</span>
                  </div>
                  <div class="description grey">
                    Where Runners Die
                  </div>
                </div>
            </div>
            <div class="links">
                <a class="link">
                    About
                </a>
                <a class="link">
                    Privacy Policy
                </a>
                <a class="link">
                    Services
                </a>
                <a class="link">
                    Terms of Use
                </a>
                <a class="link">
                    Mobile App
                </a>
                <a class="link">
                    Facebook
                </a>
                <a class="link">
                    Twitter
                </a>
            </div>
            </div>
          <div class="copyright">
            ©2019 Athletic Performance Tools, LLC. All Rights Reserved. Modified by TigerTJJ
          </div>
        </div>
    </div>
</body>
</html>
 
body {
    margin:0px;
    background:white;
}
body * {
    /*border:1px solid;*/
}
.content {
    max-width:950px;
}
.header {
    display:flex;
    justify-content:center;
    border-bottom:1px solid #eee;
}
.topbar {
    width:100vw;
    display:flex;
    align-items:center;
    padding:0px;
    max-width:950px;
}
.logo, .footer-logo {
    display:flex;
    align-items:center;
    font-family:Lexend Deca;
    cursor:pointer;
    padding:0px 15px;
    margin:20px 20px;
}
.logo {
    margin-right:auto;
}
.logo-holder {
    font-size:16px;
}
.big-character {
    font-size:68px;
}
.green {
    background: -webkit-linear-gradient(#FEC830, #EF682F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.grey {
    background: -webkit-linear-gradient(#A5A7AA, #8A8C8F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dark-green {
    color:#F06535;
}
.bold {
    border-bottom:1px solid #43A047;
    font-weight:700;
    cursor:pointer;
}
.divider {
    height:50px;
    width:2px;
    background:-webkit-linear-gradient(#ccc, #999);
    margin:0px 15px;
}
.logo-holder {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.title {
    font-size:24px;
    color:#999;
}
.description {
    color:#999;
}
.member-info {
    display:flex;
    align-items:center;
    text-align:center;
    border:1px solid #eee;
    margin:20px 0px;
    border-radius:8px;
}
.member-holder {
    font-family:Roboto;
    font-size:14px;
    font-weight:500;
    margin:8px;
}
.name {
    font-size:16px;
}
.account-info {
    font-size:12px;
    font-weight:500;
    padding-top:10px;
}
.buttons {
    margin-right:2px;
}
.logout-button, .profile-button {
    border:1px solid #ccc;
    border-radius:6px;
    font-size:16px;
    margin:4px;
    padding:6px 12px;
    text-align:center;
    font-family:Roboto;
    color:#444;
    cursor:pointer;
}
.logout-button:hover, .profile-button:hover {
    background:#eee;
}
.menu {
    border:1px solid #ccc;
    font-family:Lexend Deca;
    border-radius:8px;
    padding:13px 28px;
    margin:10px;
    height:21px;
    cursor:pointer;
}
​
​
.page {
    height:1000px;
}
​
​
.footer {
    background:#efefef;
    display:flex;
    justify-content:center;
}
.footer-content {
    width:950px;
}
.footer-container {
    display:flex;
}
.links {
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    justify-content:center;
    height:100px;
    margin:20px;
}
.link {
    font-family:Roboto;
    font-weight:400;
    font-size:15px;
    margin:3.6px 7px;
    padding:3px 8px;
    color:#444;
    cursor:pointer;
}
.link:hover {
    color:black;
}
.copyright {
    font-family:Roboto;
    font-size:14px;
    color:#999;
    margin:40px;
    margin-top:10px;
}
 
​
Output

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

Dismiss x
public
Bin info
TigerTJJpro
0viewers