"陈竹"
Bootstrap 3.3.0 Snippet by jiujiubad

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html><head><style type="text/css">.turbolinks-progress-bar { position: fixed; display: block; top: 0; left: 0; height: 3px; background: #0076ff; z-index: 9999; transition: width 300ms ease-out, opacity 150ms 150ms ease-in; transform: translate3d(0, 0, 0); }</style> <link rel="stylesheet" media="all" href="/assets/application-455de098f3c608deda7d1c6710df2fd2afb2b9403d33c20b036a7d6a145fc57d.css" data-turbolinks-track="reload"> <script src="/assets/application-d20596b2e74a64bf85ba549870193fc80bf030ec231a5dfb32f2849494b236cb.js" data-turbolinks-track="reload"></script> <title>JobListing</title><meta name="csrf-param" content="authenticity_token"><meta name="csrf-token" content="JEWCphMizDgGO3iTV4Iyq5GRKzzerhhnOY/f9d8mX6NXQy0gUWr8Rb2NizCUqCEe9ulMOMBt7ZqLFWe6LZ3BDg=="></head> <body> <div id="wrap"> <div id="main" class="container-fluid"> <div class="row"> <nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <a class="navbar-brand" href="/"><i class="fa fa-star-half-o" aria-hidden="true"></i> StartStar - Professional Designer and Coder Job Hunting Agency</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <form id="search-form" action="/jobs" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓"> <input type="text" name="search" id="search" placeholder="job title/location"> <input type="submit" name="commit" value="Search" data-disable-with="Search"> </form> <ul class="nav navbar-nav navbar-right"> <li> </li><li> <a href="/users/sign_up"> <i class="fa fa-user-plus" aria-hidden="true"></i> Sign up </a> </li> <li> <a href="/users/sign_in"> <i class="fa fa-sign-in" aria-hidden="true"></i> Log in </a> </li> </ul> </div> <!-- /.navbar-collapse --> <!-- /.container-fluid --> </nav> </div> <div class="row"> </div> <div class="row"> <div class="row"> <div class="col-12"> <img id="face-image" src="http://www.adhamdannaway.com/wp-content/themes/ad/images/adham-dannaway-designer-coder.jpg" alt="adham dannaway ui designer"> <div id="designer" class="col-lg-3 col-lg-offset-1"> <ul> <li><h1 style=""><b>designer</b></h1></li> </ul> </div> <div id="coder" class="col-lg-3 col-lg-offset-8"> <ul> <li><h1><b><coder></b></h1></li> </ul> </div> </div> </div> <div class="row"> <p class="title"> Are you the one we are waiting for? </p> <div class="col-sm-3 col-sm-offset-1 "> <div class="blue-border"></div> <div class="title-description1"> Coders with sufficient skills and knowledge to write clean, elegant and efficient code. </div> </div> <div class="col-sm-3" style="margin-left:50px;"> <div class="blue-border"></div> <div class="title-description1"> UI/UX Designers with a passion for designing beautiful and functional user experiences. </div> </div> <div class="col-sm-3 " style="margin-left:50px;"> <div class="blue-border"></div> <div class="title-description1"> Passionate people who have awesome ideas to realize and want a creative, fun and rewarding job . </div> </div> </div> <div class="row"> <p class="title">Why us?</p> <div class="blue-border"></div> <div class="title-description2"> <ul> <li> <span class="des2-title">Apply privately</span> <br> Only companies you apply to will see you're looking for a job. Your current boss won't know. </li> <li> <span class="des2-title">See salary up-front</span> <br> See salary and equity before you apply. </li> <li> <span class="des2-title">No Middlemen</span> <br> Speak directly to the startup's founders. No recruiters allowed. </li> <li> <span class="des2-title">Partner startups around the world</span> <br> Thousands of the world's best startups are hiring on Startstar. </li> </ul> </div> </div> <div id="get-started" class="col-sm-2 col-sm-offset-5"> <a class="btn btn-default" href="/jobs">Get Started</a> </div> <div class="row"> <img id="map" src="https://ww3.sinaimg.cn/large/006tNc79gy1fbtxxtz0lej31kw0o1dkj.jpg"> </div> </div> </div> </div> <footer class="footer navbar-static-bottom "> <div class="col-sm-3 "> <p>©2017 <i class="fa fa-star-half-o" aria-hidden="true"></i>StartStar Designed by Chris <a href="https://github.com/chris1203" class="fa fa-github" target="_blank" style="color:#eee"></a> </p> </div> </footer> </body></html>
.container-fluid { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } .row { margin-left: -15px; margin-right: -15px; } .navbar-default { background-color: black; border-color: black; margin-bottom: 0; margin-left: 0px; } @media (min-width: 768px) application-455de09….css:8 .navbar-header { float: left; } .navbar-default .navbar-brand { color: white; padding: 15px 30px; margin-left: 30px; margin-top: 10px; } .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #e7e7e7; } .navbar-default .navbar-nav { width: 300px; margin-top: -10px; font-size: 16px; padding: 0px 15px; } .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .row { margin-left: -15px; margin-right: -15px; } * { padding: 0; margin: 0; } #face-image, #map { width: 100%; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } .row { margin-left: -15px; margin-right: -15px; } .title { font-family: 'Oswald', sans-serif; color: white; font-size: 2em; position: relative; margin: 15px auto; padding: 1em 1em .25em 1em; text-align: center; text-transform: uppercase; } @media (min-width: 768px) application-455de09….css:8 .col-sm-offset-1 { margin-left: 8.33333333%; } .blue-border { width: 70px; height: 15px; margin-right: auto; margin-bottom: 25px; margin-left: auto; border-bottom: 3px solid #0cafeb; } .title-description1, .title-description2 { color: #a6a6a6; font-family: 'Lato', sans-serif; margin-right: auto; margin-left: auto; font-size: 14px; line-height: 26px; } @media (min-width: 768px) application-455de09….css:8 .col-sm-3 { width: 25%; } .blue-border { width: 70px; height: 15px; margin-right: auto; margin-bottom: 25px; margin-left: auto; border-bottom: 3px solid #0cafeb; } .title-description1, .title-description2 { color: #a6a6a6; font-family: 'Lato', sans-serif; margin-right: auto; margin-left: auto; font-size: 14px; line-height: 26px; } @media (min-width: 768px) application-455de09….css:8 .col-sm-3 { width: 25%; } .blue-border { width: 70px; height: 15px; margin-right: auto; margin-bottom: 25px; margin-left: auto; border-bottom: 3px solid #0cafeb; } .title-description1, .title-description2 { color: #a6a6a6; font-family: 'Lato', sans-serif; margin-right: auto; margin-left: auto; font-size: 14px; line-height: 26px; } .row { margin-left: -15px; margin-right: -15px; } .title { font-family: 'Oswald', sans-serif; color: white; font-size: 2em; position: relative; margin: 15px auto; padding: 1em 1em .25em 1em; text-align: center; text-transform: uppercase; } .blue-border { width: 70px; height: 15px; margin-right: auto; margin-bottom: 25px; margin-left: auto; border-bottom: 3px solid #0cafeb; } .title-description2 { width: 400px; } .des2-title { color: #0cafeb; } @media (min-width: 768px) application-455de09….css:8 .col-sm-offset-5 { margin-left: 41.66666667%; } #get-started a.btn { margin-top: 30px; margin-bottom: 30px; margin-left: 25px; font-size: 20px; color: #337ab7; text-decoration: none; } .row { margin-left: -15px; margin-right: -15px; } footer { position: absolute; bottom: 0; width: 100%; height: 70px; padding-top: 20px; padding-left: 40px; background-color: black; color: white; } @media (min-width: 768px) application-455de09….css:8 .col-sm-3 { width: 25%; } .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

Related: See More


Questions / Comments: