"WEBSITE NEW DESIGN 2019"
Bootstrap 4.1.1 Snippet by rayanservices

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <!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.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/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; } .carousel-control.right, .carousel-control.left { background-image: none; color: #f4511e; } .carousel-indicators li { border-color: #f4511e; } .carousel-indicators li.active { background-color: #f4511e; } .item h4 { font-size: 19px; line-height: 1.375em; font-weight: 400; font-style: italic; margin: 70px 0; } .item span { font-style: normal; } .panel { border: 1px solid #f4511e; border-radius:0 !important; transition: box-shadow 0.5s; } .panel:hover { box-shadow: 5px 0px 40px rgba(0,0,0, .2); } .panel-footer .btn:hover { border: 1px solid #f4511e; background-color: #fff !important; color: #f4511e; } .panel-heading { color: #fff !important; background-color: #f4511e !important; padding: 25px; border-bottom: 1px solid transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .panel-footer { background-color: white !important; } .panel-footer h3 { font-size: 32px; } .panel-footer h4 { color: #aaa; font-size: 14px; } .panel-footer .btn { margin: 15px 0; background-color: #f4511e; color: #fff; } .navbar { margin-bottom: 0; background-color: #f4511e; z-index: 9999; border: 0; font-size: 12px !important; line-height: 1.42857143 !important; letter-spacing: 4px; border-radius: 0; } .navbar li a, .navbar .navbar-brand { color: #fff !important; } .navbar-nav li a:hover, .navbar-nav li.active a { color: #f4511e !important; background-color: #fff !important; } .navbar-default .navbar-toggle { border-color: transparent; color: #fff !important; } @media screen and (max-width: 768px) { .col-sm-4 { text-align: center; margin: 25px 0; } } </style> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#myPage">Logo</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-right"> <li><a href="#about">ABOUT</a></li> <li><a href="#services">SERVICES</a></li> <li><a href="#portfolio">PORTFOLIO</a></li> <li><a href="#pricing">PRICING</a></li> <li><a href="#contact">CONTACT</a></li> </ul> </div> </div> </nav> <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> <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> <!-- Container (Pricing Section) --> <div class="container-fluid"> <div class="text-center"> <h2>Pricing</h2> <h4>Choose a payment plan that works for you</h4> </div> <div class="row"> <div class="col-sm-4 col-xs-12"> <div class="panel panel-default text-center"> <div class="panel-heading"> <h1>Basic</h1> </div> <div class="panel-body"> <p><strong>20</strong> Lorem</p> <p><strong>15</strong> Ipsum</p> <p><strong>5</strong> Dolor</p> <p><strong>2</strong> Sit</p> <p><strong>Endless</strong> Amet</p> </div> <div class="panel-footer"> <h3>$19</h3> <h4>per month</h4> <button class="btn btn-lg">Sign Up</button> </div> </div> </div> <div class="col-sm-4 col-xs-12"> <div class="panel panel-default text-center"> <div class="panel-heading"> <h1>Pro</h1> </div> <div class="panel-body"> <p><strong>50</strong> Lorem</p> <p><strong>25</strong> Ipsum</p> <p><strong>10</strong> Dolor</p> <p><strong>5</strong> Sit</p> <p><strong>Endless</strong> Amet</p> </div> <div class="panel-footer"> <h3>$29</h3> <h4>per month</h4> <button class="btn btn-lg">Sign Up</button> </div> </div> </div> <div class="col-sm-4 col-xs-12"> <div class="panel panel-default text-center"> <div class="panel-heading"> <h1>Premium</h1> </div> <div class="panel-body"> <p><strong>100</strong> Lorem</p> <p><strong>50</strong> Ipsum</p> <p><strong>25</strong> Dolor</p> <p><strong>10</strong> Sit</p> <p><strong>Endless</strong> Amet</p> </div> <div class="panel-footer"> <h3>$49</h3> <h4>per month</h4> <button class="btn btn-lg">Sign Up</button> </div> </div> </div> </div> </div> <!-- Container (Contact Section) --> <div class="container-fluid bg-grey"> <h2 class="text-center">CONTACT</h2> <div class="row"> <div class="col-sm-5"> <p>Contact us and we'll get back to you within 24 hours.</p> <p><span class="glyphicon glyphicon-map-marker"></span> Chicago, US</p> <p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p> <p><span class="glyphicon glyphicon-envelope"></span> myemail@something.com</p> </div> <div class="col-sm-7"> <div class="row"> <div class="col-sm-6 form-group"> <input class="form-control" id="name" name="name" placeholder="Name" type="text" required> </div> <div class="col-sm-6 form-group"> <input class="form-control" id="email" name="email" placeholder="Email" type="email" required> </div> </div> <textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br> <div class="row"> <div class="col-sm-12 form-group"> <button class="btn btn-default pull-right" type="submit">Send</button> </div> </div> </div> </div> </div> <!-- Image of location/map --> <img src="map.jpg" class="img-responsive" style="width:50%> </body> </html>

Related: See More


Questions / Comments: