Last active
October 2, 2017 01:37
-
-
Save filipegorges/6c2969fb7e899ef2fab7e0d439562170 to your computer and use it in GitHub Desktop.
Stylesheet/JS from W3 Bootstrap 3 Tutorial example (https://www.w3schools.com/bootstrap/bootstrap_theme_me.asp)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function(){ | |
| // Add smooth scrolling to all links in navbar + footer link | |
| $(".navbar a, footer a[href='#myPage']").on('click', function(event) { | |
| // Make sure this.hash has a value before overriding default behavior | |
| if (this.hash !== "") { | |
| // Prevent default anchor click behavior | |
| event.preventDefault(); | |
| // Store hash | |
| var hash = this.hash; | |
| // Using jQuery's animate() method to add smooth page scroll | |
| // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area | |
| $('html, body').animate({ | |
| scrollTop: $(hash).offset().top | |
| }, 900, function(){ | |
| // Add hash (#) to URL when done scrolling (default click behavior) | |
| window.location.hash = hash; | |
| }); | |
| } // End if | |
| }); | |
| $(window).scroll(function() { | |
| $(".slideanim").each(function(){ | |
| var pos = $(this).offset().top; | |
| var winTop = $(window).scrollTop(); | |
| if (pos < winTop + 600) { | |
| $(this).addClass("slide"); | |
| } | |
| }); | |
| }); | |
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Bootstrap Theme Company</title> | |
| <!-- Bootstrap --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> | |
| <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> | |
| <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> | |
| <!--[if lt IE 9]> | |
| <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script> | |
| <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> | |
| <![endif]--> | |
| <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | |
| <!-- Include all compiled plugins (below), or include individual files as needed --> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | |
| <link rel="stylesheet" href="./stylesheet.css"> | |
| <script src="./animations.js" charset="utf-8"></script> | |
| </head> | |
| <body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60"> | |
| <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> | |
| <div id="about" class="container-fluid"> | |
| <div class="container-fluid"> | |
| <div class="row"> | |
| <div class="col-sm-8"> | |
| <h2>About Company Page</h2> | |
| <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h4> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> | |
| <button type="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 slideanim"></span> | |
| </div> | |
| <div class="col-sm-8"> | |
| <h2>Our Values</h2> | |
| <h4><strong>MISSION:</strong> Our mission Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h4> | |
| <p><strong>VISION:</strong> Our vision Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="services" class="container-fluid"> | |
| <div class="container-fluid text-center"> | |
| <h2>SERVICES</h2> | |
| <h4>What we offer</h4> | |
| <div class="row slideanim"> | |
| <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> | |
| <div class="row slideanim"> | |
| <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>HARD WORK</h4> | |
| <p>Lorem ipsum dolor sit amet..</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="portfolio" class="container-fluid"> | |
| <div class="container-fluid text-center bg-grey"> | |
| <h2>Portfolio</h2> | |
| <h4>What we have created</h4> | |
| <div class="row slideanim"> | |
| <div class="col-sm-4"> | |
| <div class="thumbnail"> | |
| <img src="paris.jpg" alt="Paris"> | |
| <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"> | |
| <p><strong>New York</strong></p> | |
| <p>We built New York</p> | |
| </div> | |
| </div> | |
| <div class="col-sm-4"> | |
| <div class="thumbnail"> | |
| <img src="sanfrancisco.jpg" alt="San Francisco"> | |
| <p><strong>San Francisco</strong></p> | |
| <p>Yes, San Francisco is ours</p> | |
| </div> | |
| </div> | |
| </div> | |
| <h2>What our customers say</h2> | |
| <div id="carousel-generic" class="carousel slide" data-ride="carousel"> | |
| <!-- Indicators --> | |
| <ol class="carousel-indicators"> | |
| <li data-target="#carousel-generic" data-slide-to="0" class="active"></li> | |
| <li data-target="#carousel-generic" data-slide-to="1"></li> | |
| <li data-target="#carousel-generic" data-slide-to="2"></li> | |
| </ol> | |
| <!-- Wrapper for slides --> | |
| <div class="carousel-inner"> | |
| <div class="item active"> | |
| <h4>"This company is the best. I am so happy with the result!"<br>Michael Roe, Vice President, Comment Box</h4> | |
| </div> | |
| <div class="item"> | |
| <h4>"One word... WOW!!"<br>John Doe, Salesman, Rep Inc</h4> | |
| </div> | |
| <div class="item"> | |
| <h4>"Could I... BE any more happy with this company?"<br>Chandler Bing, Actor, FriendsAlot</h4> | |
| </div> | |
| </div> | |
| <!-- Controls --> | |
| <a class="left carousel-control" href="#carousel-generic" data-slide="prev"> | |
| <span class="glyphicon glyphicon-chevron-left"></span> | |
| </a> | |
| <a class="right carousel-control" href="#carousel-generic" data-slide="next"> | |
| <span class="glyphicon glyphicon-chevron-right"></span> | |
| </a> | |
| </div> | |
| </div> | |
| <div id="pricing" class="container-fluid"> | |
| <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 slideanim"> | |
| <div class="col-sm-4"> | |
| <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 type="button" class="btn btn-lg"> | |
| Sign Up | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-sm-4"> | |
| <div class="panel panel-default text-center"> | |
| <div class="panel-heading"> | |
| <h1>Pro</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>$29</h3> | |
| <h4>per month</h4> | |
| <button type="button" class="btn btn-lg"> | |
| Sign Up | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-sm-4"> | |
| <div class="panel panel-default text-center"> | |
| <div class="panel-heading"> | |
| <h1>Premium</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>$49</h3> | |
| <h4>per month</h4> | |
| <button type="button" class="btn btn-lg"> | |
| Sign Up | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="contact" class="container-fluid"> | |
| <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 slideanim"> | |
| <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> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <button class="btn btn-default pull-right" type="submit">Send</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> | |
| <div class="container"> | |
| <div class="navbar-header"> | |
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </button> | |
| <a class="navbar-brand" href="#">Logo</a> | |
| </div> | |
| <!-- Collect the nav links, forms, and other content for toggling --> | |
| <div class="collapse navbar-collapse" id="navbar"> | |
| <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><!-- /.navbar-collapse --> | |
| </div><!-- /.container-fluid --> | |
| </nav> | |
| <footer class="container-fluid text-center"> | |
| <a href="#myPage" title="To Top"> | |
| <span class="glyphicon glyphicon-chevron-up"></span> | |
| </a> | |
| <p>Bootstrap Theme Made By <a href="https://www.w3schools.com" title="Visit w3schools">www.w3schools.com</a></p> | |
| </footer> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font: 400 15px Lato, sans-serif; | |
| line-height: 1.8; | |
| color: #818181; | |
| } | |
| h2 { | |
| font-size: 24px; | |
| text-transform: uppercase; | |
| color: #303030; | |
| font-weight: 600; | |
| margin-bottom: 30px; | |
| } | |
| h4 { | |
| font-size: 19px; | |
| line-height: 1.375em; | |
| color: #303030; | |
| font-weight: 400; | |
| margin-bottom: 30px; | |
| } | |
| .jumbotron { | |
| background-color: #f4511e; | |
| color: #fff; | |
| padding: 100px 25px; | |
| font-family: Montserrat, sans-serif; | |
| } | |
| .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; | |
| font-family: Montserrat, sans-serif; | |
| } | |
| .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; | |
| } | |
| footer .glyphicon { | |
| font-size: 20px; | |
| margin-bottom: 20px; | |
| color: #f4511e; | |
| } | |
| .slideanim {visibility:hidden;} | |
| .slide { | |
| animation-name: slide; | |
| -webkit-animation-name: slide; | |
| animation-duration: 1s; | |
| -webkit-animation-duration: 1s; | |
| visibility: visible; | |
| } | |
| @keyframes slide { | |
| 0% { | |
| opacity: 0; | |
| transform: translateY(70%); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translateY(0%); | |
| } | |
| } | |
| @-webkit-keyframes slide { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateY(70%); | |
| } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateY(0%); | |
| } | |
| } | |
| @media screen and (max-width: 768px) { | |
| .col-sm-4 { | |
| text-align: center; | |
| margin: 25px 0; | |
| } | |
| .btn-lg { | |
| width: 100%; | |
| margin-bottom: 35px; | |
| } | |
| } | |
| @media screen and (max-width: 480px) { | |
| .logo { | |
| font-size: 150px; | |
| } | |
| } |
Author
filipegorges
commented
Oct 2, 2017
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment