<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet"> <div class="wrapper"> <div class="top_wrapper"> <nav class="navbar navbar-default navbar-inverse navbar-static-top main" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/" class="logo_wrapper"><img width="100" height="26" src="/images/logo_white@2x.png"></a> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav choose_page"> <li> <a href="http://support.timelyapp.com">Blog</a> </li> <li> <a href="https://timelyapp.com/login">About</a> </li> <li class="signin"> <a href="https://app.timelyapp.com/join">Contact</a> </li> </ul> </div> </div> </nav> </div> <div class="container-fluid pricing"> <div class="row"> <div class="inner_content_wrapper"> <div class="entry_content"> <div class="plans"> <div class="plans_wrapper"> <div class="col-xs-1 col-sm-1"> <div class="gutter"> <div class="top"> <div class="type"></div> </div> </div> </div> <div class="col-xs-8 col-sm-8"> <div class="gutter last_plan"> <div class="top"> <div class="type">OPEN-API VALIDATOR</div> <span><br/></span> <strong>Check your API Designs against industry best-practices and produce homogeneously designed APIs for your project.</strong> <p>Thus you can improve your consumer's API Experience by checking the API Designs.</p> </div> <div class="bottom well"> <form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx"> <div class="row setup-content" id="step-1"> <div class=""> <label for="fileToUpload">Select a File to Upload</label><br /> <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/><br/> </div> <div class=""> <!-- input type="button" onclick="uploadFile()" value="Upload" / --> <a href="javascript:void(0)" onclick="alert('myFunc executed');myFunc();window.location='http://google.com'" class="btn btn-success">Upload</a> </div> </div> </form> </div> </div> </div> <div class="col-xs-3 col-sm-3"> <div class="gutter"> <div class="top"> <div class="type">Twitter Feed Place Holder</div> <strong class="cost">$<span class="cost-value" data-plan="company">21</span><small>per user per month billed annually. $23 billed monthly.</small></strong> </div> <div class="bottom"> <a href="https://app.timelyapp.com/join" class="btn btn-success signup-button" data-plan="company">Start 14-day trial</a> <div class="table-wrapper"> <table class="table"> <thead> <tr><th colspan="2">Features</th></tr> </thead> <tbody> <tr><td><span class="glyphicon glyphicon-ok"></span></td><td class="text-left">Basic time tracking</td></tr> <tr><td><span class="glyphicon glyphicon-ok"></span></td><td class="text-left"><b>Unlimited</b> active projects</td></tr> <tr><td><span class="glyphicon glyphicon-ok"></span></td><td class="text-left"><b>6 months</b> Memory history</td></tr> <tr><td><span class="glyphicon glyphicon-ok"></span></td><td class="text-left"><b>Mark as billed</b> to know what has and hasn't been billed</td></tr> <tr><td><span class="glyphicon glyphicon-ok"></span></td><td class="text-left"><b>Control page</b> to keep control over your whole team at the same time</td></tr> <tr><td><span class="glyphicon glyphicon-ok"></span></td><td class="text-left"><b>Teams</b> to organize users into meaningful groups</td></tr> <tr><td><span class="glyphicon glyphicon-ok"></span></td><td class="text-left"><b>Project tags</b> to control which tags are allowed/required per project</td></tr> <tr><td><span class="glyphicon glyphicon-ok"></span></td><td class="text-left">Priority support</td></tr> </tbody> <tbody class="expanded-features"> <tr><td><span class="glyphicon glyphicon-ok"></span></td><td class="text-left"><a href="http://support.timelyapp.com/reporting/how-do-i-make-a-report" target="_blank">PDF/Excel reports</a></td></tr> <tr><td><span class="glyphicon glyphicon-ok"></span></td><td class="text-left"><a href="https://timelyapp.com/apps-and-integrations" target="_blank">Apps & integrations</a></td></tr> <tr><td><span class="glyphicon glyphicon-ok"></span></td><td class="text-left"><a href="http://support.timelyapp.com/tips-and-tricks/what-are-tags" target="_blank">Tags & Subtags</a></td></tr> <tr><td><span class="glyphicon glyphicon-ok"></span></td><td class="text-left"><a href="http://support.timelyapp.com/tracking-time-with-your-team/limiting-a-users-ability" target="_blank">User access levels</a></td></tr> <tr><td><span class="glyphicon glyphicon-ok"></span></td><td class="text-left"><a href="http://support.timelyapp.com/projects/setting-a-budget" target="_blank">Project budgets</a></td></tr> <tr><td><span class="glyphicon glyphicon-ok"></span></td><td class="text-left"><a href="http://support.timelyapp.com/tracking-time-with-your-team/schedule-resources-in-company-view" target="_blank">Team scheduling</a></td></tr> <tr><td><span class="glyphicon glyphicon-ok"></span></td><td class="text-left"><a href="http://support.timelyapp.com/tracking-time-with-your-team/how-do-i-edit-a-users-hourly-rate" target="_blank">Per-user rates</a></td></tr> <tr><td><span class="glyphicon glyphicon-ok"></span></td><td class="text-left"><a href="http://support.timelyapp.com/projects/how-do-i-create-a-project" target="_blank">Per-project rates</a></td></tr> <tr><td><span class="glyphicon glyphicon-ok"></span></td><td class="text-left"><a href="http://support.timelyapp.com/tracking-time-with-your-team/how-do-i-hide-hourly-rates-for-employees" target="_blank">Hidden hourly rates</a></td></tr> </tbody> </table> <button type="button" class="btn btn-link expand-features">Show more</button> </div> </div> </div></div> <div class="clear"></div> </div> </div> </div> </div> </div> </div> </div><!-- wrapper --> <div class="container main-container"> <div class="row setup-content" > <div class="col-md-1 left-filler" > <p>.</p> </div> <div class="col-md-8" > <div class="container " style="min-height: 150px"> <div class="row setup-content" id="briefDescription"> <div class="col-md-8"> <div class="col-md-8 well text-left"> <h3>OpenAPI Validator</h3> <p>Check your API Designs against industry best-practices and produce homogeneous APIs.</p> <p>Thus you can improve your consumer's API Experience by checking the API Designs. Do you have your own best-practices?</p> </div> </div> </div> </div> <div class="container" style="min-height: 350px"> <form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx"> <div class="row setup-content" id="step-1"> <div class="col-md-8"> <div class="col-md-8 well text-left"> <div class="row"> <label for="fileToUpload">Select a File to Upload</label><br /> <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/><br/> </div> <div class="row"> <input type="button" onclick="uploadFile()" value="Upload" /> </div> </div> </div> </div> </form> </div> </div> </div> <div class="col-md-2 left-filler" > <p>.</p> </div> </div> <div class="container"> <footer> <p> © <a th:href="${homeDetails.self}" th:utext="${homeDetails.selfText}">jcopete.com</a> <span th:text="${homeDetails.year}">2017</span> </p> </footer> </div>

.wrapper { overflow: hidden } body { fffont-family: "Avenir", 'helvetica neue', 'helvetica', 'arial' !important; font-family: 'Titillium Web', sans-serif; background: white; background-size: 108px 108px } body.page .container, body.layout-posts .container, body.layout-default .container { max-width: 960px } .top_Bar { background: #1CC8EF; color: white; text-align: center; font-weight: bold; bottom: 0; width: 100%; text-align: center; z-index: 150; position: fixed } .top_Bar:hover { background: #1abde2 } .top_Bar a { color: white; text-decoration: underline; width: 100%; padding: 10px 0; display: block; text-align: center } .top_Bar a:hover { text-decoration: underline } .top_wrapper_image { position: absolute; width: 100%; height: 100%; opacity: 0.3; margin-top: -58px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover !important } body.layout-frontpage .container { max-width: 1020px } .inner_content_wrapper { max-width: 900px; margin: 0 auto; display: block; padding-top: 10px } .navbar.main .container { max-width: 1240px } .navbar-inverse .navbar-nav > li > a { color: white } .navbar-inverse .navbar-nav > li > a span.caret { margin-top: -3px } .navbar-inverse .navbar-nav > li > a:hover { color: rgba(255, 255, 255, 0.75) } .top_wrapper { padding-bottom: 50px; position: relative; overflow: hidden } .header_icon_intro { text-align: center; padding-top: 10px; position: relative } .header_icon_intro .icon_wrapper { font-size: 50px; color: #ffffff } .header_icon_intro .intro_wrapper { max-width: 600px; padding-bottom: 80px; position: relative; z-index: 20 } .header_icon_intro .intro_wrapper h1 { margin-bottom: 4px; font-size: 35px } .header_icon_intro .intro_wrapper span.h1_label { text-transform: uppercase; font-size: 19px; display: block; margin-bottom: 5px } .header_icon_intro .intro_wrapper p.intro { line-height: 27px; margin-top: 0px; margin-bottom: 20px } @media screen and (min-width: 768px) { li.signin { margin-left: 10px } .signin a { -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; background: #1CC8EF } .signin a:hover { background: #25d1f7; color: white } .choose_page { margin-top: 10px } .choose_page a{ padding: 8px 12px } .navbar.main .navbar-nav a { color: white } .choose_page { text-transform: uppercase; font-size: 12px; float: right } } .type { color: rgb(131, 198, 129); fffont-family: Avenir, "helvetica neue", helvetica, arial; font-family: 'Titillium Web Semi Bold', sans-serif; font-size: 15px; font-weight: bold; height: 21px; } bodys {background-color: white;} .main-container { background-color: green; } .left-filler { background-color: red; min-height: 500px; }