运行 ❯
获取您的
自己的
网站
×
更改方向
保存代码
更改主题，深色/浅色
前往 Spaces
<!DOCTYPE html> <html lang="en"> <head> <!-- Theme Made By www.w3schools.com - No Copyright --> <title>Bootstrap Theme Company Page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> .jumbotron { background-color: #f4511e; color: #fff; padding: 100px 25px; } .container-fluid { padding: 60px 50px; } .bg-grey { background-color: #f6f6f6; } .logo-small { color: #f4511e; font-size: 50px; } .logo { color: #f4511e; font-size: 200px; } @media screen and (max-width: 768px) { .col-sm-4 { text-align: center; margin: 25px 0; } } </style> </head> <body> <div class="jumbotron text-center"> <h1>Company</h1> <p>We specialize in blablabla</p> <form class="form-inline"> <div class="input-group"> <input type="email" class="form-control" size="50" placeholder="Email Address" required> <div class="input-group-btn"> <button type="button" class="btn btn-danger">Subscribe</button> </div> </div> </form> </div> <!-- Container (About Section) --> <div class="container-fluid"> <div class="row"> <div class="col-sm-8"> <h2>About Company Page</h2> <h4>Lorem ipsum..</h4> <p>Lorem ipsum..</p> <button class="btn btn-default btn-lg">Get in Touch</button> </div> <div class="col-sm-4"> <span class="glyphicon glyphicon-signal logo"></span> </div> </div> </div> <div class="container-fluid bg-grey"> <div class="row"> <div class="col-sm-4"> <span class="glyphicon glyphicon-globe logo"></span> </div> <div class="col-sm-8"> <h2>Our Values</h2> <h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4> <p><strong>VISION:</strong> Our vision Lorem ipsum..</p> </div> </div> </div> <!-- Container (Services Section) --> <div class="container-fluid text-center"> <h2>SERVICES</h2> <h4>What we offer</h4> <br> <div class="row"> <div class="col-sm-4"> <span class="glyphicon glyphicon-off logo-small"></span> <h4>POWER</h4> <p>Lorem ipsum dolor sit amet..</p> </div> <div class="col-sm-4"> <span class="glyphicon glyphicon-heart logo-small"></span> <h4>LOVE</h4> <p>Lorem ipsum dolor sit amet..</p> </div> <div class="col-sm-4"> <span class="glyphicon glyphicon-lock logo-small"></span> <h4>JOB DONE</h4> <p>Lorem ipsum dolor sit amet..</p> </div> </div> <br><br> <div class="row"> <div class="col-sm-4"> <span class="glyphicon glyphicon-leaf logo-small"></span> <h4>GREEN</h4> <p>Lorem ipsum dolor sit amet..</p> </div> <div class="col-sm-4"> <span class="glyphicon glyphicon-certificate logo-small"></span> <h4>CERTIFIED</h4> <p>Lorem ipsum dolor sit amet..</p> </div> <div class="col-sm-4"> <span class="glyphicon glyphicon-wrench logo-small"></span> <h4 style="color:#303030;">HARD WORK</h4> <p>Lorem ipsum dolor sit amet..</p> </div> </div> </div> <!-- Container (Portfolio Section) --> <div class="container-fluid text-center bg-grey"> <h2>Portfolio</h2><br> <h4>What we have created</h4> <div class="row text-center"> <div class="col-sm-4"> <div class="thumbnail"> <img src="paris.jpg" alt="Paris" width="400" height="300"> <p><strong>Paris</strong></p> <p>Yes, we built Paris</p> </div> </div> <div class="col-sm-4"> <div class="thumbnail"> <img src="newyork.jpg" alt="New York" width="400" height="300"> <p><strong>New York</strong></p> <p>We built New York</p> </div> </div> <div class="col-sm-4"> <div class="thumbnail"> <img src="sanfran.jpg" alt="San Francisco" width="400" height="300"> <p><strong>San Francisco</strong></p> <p>Yes, San Fran is ours</p> </div> </div> </div> </div> </body> </html>
