Pulse7
7/20/2017 - 8:13 PM
Full bootstrap company tutorial
Full bootstrap company tutorial
.jumbotron{
background-color: #F4511E;
color: white;
padding: 100px;
}
.logo-small{
color: #F4511E;
font-size: 50px;
}
.logo{
font-size: 200px;
color: #F4511E;
}
.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;
}
}
.container-fluid{
padding: 60px 50px;
}
.bg-grey{
background-color: #f6f6f6;
}
.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;
}
/* Pricing panels styles */
.panel {
border: 1px solid #f4511e;
border-radius:0;
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: #fff !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 */
.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;
}
/* Footer */
footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
color: #f4511e;
}
footer .glyphicon:hover{
text-shadow: 0px 0px 5px #f4511e
}
/* Fonts */
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
.jumbotron {
font-family: Montserrat, sans-serif;
}
.navbar {
font-family: Montserrat, sans-serif;
}
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;
}
/* Slide animation */
.slideanim {visibility:hidden;}
.slide {
/* The name of the animation */
animation-name: slide;
-webkit-animation-name: slide;
/* The duration of the animation */
animation-duration: 1s;
-webkit-animation-duration: 1s;
/* Make the element visible */
visibility: visible;
}
/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@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%);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Theme Company</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<!-- Navigation -->
<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="#myNavBar" name="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></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>
<!-- Title -->
<div class=" jumbotron text-center">
<h1>Company</h1>
<p>We specialize in marketing</p>
<form class="form-inline" action="index.html" method="post">
<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>
<!-- About Company Page -->
<div id="about" class=" container-fluid">
<div class="row">
<div class="col-sm-8">
<h2>About Company Page</h2>
<h4>Lorem Ipsum...</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel aut vitae eligendi officiis iusto consectetur qui voluptatum porro tempore eos molestiae ducimus velit, delectus consequatur earum reiciendis maxime in aspernatur voluptatibus,
ullam ipsam, rem. Dolor reiciendis dignissimos ex earum animi, porro neque dolore ducimus dolorem, numquam obcaecati aliquam, aut, sit cumque sint ad facilis facere consequatur temporibus nisi nostrum illo. Laboriosam sed dolore eaque
facere molestiae quisquam enim reiciendis laudantium quasi temporibus nihil quas sunt, sequi possimus ut aspernatur voluptatem, autem dicta debitis totam nisi. Libero sit nesciunt cumque adipisci maiores vitae error ab laudantium facilis
illo. Nisi, error sint.</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>
<!-- Our Values -->
<div class=" slideanim 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> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatem officia numquam placeat, eos sunt, non adipisci officiis possimus, alias ullam id magni nostrum laudantium fuga quaerat odit. Cumque reiciendis
autem rerum atque a numquam dolore repellat quos repellendus asperiores voluptatum, quidem magni excepturi fugiat quas neque eaque corporis vero ipsa aut! Hic dolorem repudiandae recusandae animi veritatis doloremque, eius quisquam
optio dolor dolorum, modi quibusdam iusto corrupti tempora earum rerum. Molestias amet quisquam error tempora suscipit iusto animi id perferendis laboriosam magni similique neque voluptate eaque veniam voluptas placeat quasi, cumque
fuga vel odio autem praesentium. Laborum, vero nobis.
</p>
</div>
</div>
</div>
<!-- Services -->
<div id="services" class="slideanim 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, consectetur.</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-certificate logo-small"></span>
<h4>CERTIFIEd</h4>
<p>Lorem ipsum dolor sit amet, consectetur.</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, consectetur.</p>
</div>
</div>
</div>
<!-- Portfolio -->
<div id="portfolio" class="slideanim container-fluid text-center bg-grey">
<h2>Portfolio</h2>
<h4>What we have created</h4>
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="..\Images\fjords.jpg" alt="Fjords">
<p><strong>Fjords</strong></p>
<p>Yes we build these fjords</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img class="img-stretch" src="universeTest.png" alt="Universe">
<p><strong>Universe</strong></p>
<p>Yes we build it</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail ">
<img src="Fall.jpg" alt="d">
<p><strong>Trees</strong></p>
<p>And these trees</p>
</div>
</div>
</div>
</div>
<!-- What they say -->
<h2>What our customers say</h2>
<div id="myCarousel" class="slideanim carousel slide text-center">
<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>
<div class="carousel-inner" role="listbox">
<div class="item active">
<h4>"This company is the best Lorem ipsum dolor sit amet." <br> <span style="font-style:normal">Michael Roe, Vice President, Comment Box</span> </h4>
</div>
<div class="item ">
<h4>"One word... WOW!!" <br> <span style="font-style:normal;">John Doe, Salesman, Rep Inc</span></h4>
</div>
<div class="item ">
<h4>"One word... WOW!!" <br> <span style="font-style:normal;">John Doe, Salesman, Rep Inc</span></h4>
</div>
</div>
<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>
<!-- Pricing Panels -->
<div id="pricing" class="slideanim 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">
<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>$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>Enterprise</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>
</div>
<!-- Contact info -->
<div id="contact" 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> +01 2132312</p>
<p><span class="glyphicon glyphicon-envelope"></span> myemail@something.org </p>
</div>
<div class="slideanim col-sm-7">
<div class="row">
<div class="col-sm-6 form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Name" required value="">
</div>
<div class="col-sm-6 form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="Email" required value="">
</div>
</div>
<textarea class="form-control" id="comments" name="comments" rows="5" placeholder="Comment"></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>
<!-- Google maps -->
<div id="googleMap" style="slideanim height:400px;width:100%;"></div>
<script>
function myMap() {
var myCenter = new google.maps.LatLng(41.878114, -87.629798);
var mapProp = {
center: myCenter,
zoom: 12,
scrollwheel: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: myCenter
});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
<!-- Footer -->
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(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();
console.log(this);
console.log(this.hash);
console.log($(this.hash));
console.log($(this.hash).offset().top);
// 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
}, 333, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
})
</script>
<script type="text/javascript">
$(window).scroll(function() {
$(".slideanim").each(function() {
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
});
</script>
</body>
</html>