运行 ❯
获取您
自己的
网站
×
更改方向
保存代码
更改主题，深色/浅色
转到 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; } .thumbnail { padding: 0 0 15px 0; border: none; border-radius: 0; } .thumbnail img { width: 100%; height: 100%; margin-bottom: 10px; } @media screen and (max-width: 768px) { .col-sm-4 { text-align: center; margin: 25px 0; } } </style> </head> <body> <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> <!-- 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> <h2>What our customers say</h2> <div id="myCarousel" class="carousel slide text-center" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <h4>"This company is the best. I am so happy with the result!"<br><span>Michael Roe, Vice President, Comment Box</span></h4> </div> <div class="item"> <h4>"One word... WOW!!"<br><span>John Doe, Salesman, Rep Inc</span></h4> </div> <div class="item"> <h4>"Could I... BE any more happy with this company?"<br><span>Chandler Bing, Actor, FriendsAlot</span></h4> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </body> </html>
