运行 ❯
获取您
自己的
网站
×
更改方向
保存代码
更改主题，深色/浅色
前往 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 { 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"></span> <h4>POWER</h4> <p>Lorem ipsum dolor sit amet..</p> </div> <div class="col-sm-4"> <span class="glyphicon glyphicon-heart"></span> <h4>LOVE</h4> <p>Lorem ipsum dolor sit amet..</p> </div> <div class="col-sm-4"> <span class="glyphicon glyphicon-lock"></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"></span> <h4>GREEN</h4> <p>Lorem ipsum dolor sit amet..</p> </div> <div class="col-sm-4"> <span class="glyphicon glyphicon-certificate"></span> <h4>CERTIFIED</h4> <p>Lorem ipsum dolor sit amet..</p> </div> <div class="col-sm-4"> <span class="glyphicon glyphicon-wrench"></span> <h4 style="color:#303030;">HARD WORK</h4> <p>Lorem ipsum dolor sit amet..</p> </div> </div> </div> </body> </html>
