Untitled
unknown
html
a year ago
11 kB
7
Indexable
Never
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css"> </head>
<style>
body,
html {
height: 100%
}
section:nth-child(even) {
background-color: #ddd;
}
.section {
background-size: cover;
background-position: center center;
width: 100%;
min-height: 100%;
padding-top: 75px;
}
#intro {
background-image: url('http://lorempixel.com/1200/600/city');
background-color: aquamarine;
}
</style>
<body>
<nav id="myNav" class="navbar navbar-dark bg-dark fixed-top navbar-expand-sm"> <a class="navbar-brand" href="#">Company</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navBarMain"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navBarMain">
<ul class="navbar-nav">
<li class="nav-item"><a href="#intro" class="nav-link">Welcome</a></li>
<li class="nav-item"><a href="#about" class="nav-link">About</a></li>
<li class="nav-item"><a href="#info" class="nav-link">Info</a></li>
<li class="nav-item"><a href="#products" class="nav-link">Products</a></li>
<li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
</ul>
</div>
</nav>
<section class="jumbotron section">
<div class="center">
<div class="container text-sm-center">
<div class="display-1 ">My Company</div>
<div class="m-4">Hello World welcome to my website whatever</div>
</div>
</div>
</section>
<section id="intro" class="section">
<div class="container bg-white rounded border border-dark">
<div class="display-3">Introduction Content</div>
<div>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa</p>
</div>
</div>
</section>
<section id="about" class="section bg-success text-light">
<div class="container ">
<div class="display-3">About</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa</p>
</div>
</div>
</section>
<section id="info" class="section">
<div class="container">
<div class="display-3">Buttons</div>
<div class="row">
<div class="col">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
</div>
<div class="col"><a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset"> </div>
</div>
<div class="row">
<div class="col"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Primary<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Secondary<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">></span>Success<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">></span>Danger<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">></span>Warning<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-info"</span><span class="nt">></span>Info<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-light"</span><span class="nt">></span>Light<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-dark"</span><span class="nt">></span>Dark<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-link"</span><span class="nt">></span>Link<span class="nt"></button></span></code></pre> </div>
</div>
</div>
</section>
<section id="products" class="section">
<div class="container">
<div class="display-3">Products</div>
<div class="row">
<div class="col-md-4 ">
<div class="card">
<h4 class="card-header">Featured</h4> <img class="card-img-top" src="http://via.placeholder.com/350x150">
<div class="card-body">
<div class="card-title">New Product #1</div>
<p class="card-text">best product ever!!!. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et </p>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="card">
<h4 class="card-header">Featured</h4> <img class="card-img-top" src="http://via.placeholder.com/350x150">
<div class="card-body">
<div class="card-title">New Product #2</div>
<p class="card-text">best product ever!!!. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et </p>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="card">
<h4 class="card-header">Featured</h4> <img class="card-img-top" src="http://via.placeholder.com/350x150">
<div class="card-body">
<div class="card-title">New Product #3</div>
<p class="card-text">best product ever!!!. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et </p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="section">
<div class="container">
<div class="display-3">Contact</div>
<div class="jumbotron">
<div class="h4">Contact Us</div>
<form>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" class="form-control" id="email" placeholder="email"> </div>
<div class="form-group">
<label for="firstname">First Name</label>
<input type="text" class="form-control" id="firstname" placeholder="Your Name"> </div>
<button type="submit" class="btn btn-primary">Submit Information</button>
</form>
</div>
</div>
</section>
<footer class="bg-dark text-light">
<div class="container">
<div class="row">
<div class="col-md-4 text-md-center">
<h3>Need more info</h3>
<p>Get in touch with us 1-888-888-8888</p>
</div>
<div class="col-md-4 text-md-center">
<h3>Join Now</h3>
<div class="btn btn-primary">Go Here</div>
</div>
<div class="col-md-4 text-md-center">
<h3>Copyright</h3>
<p>(c) 2017 Bootstrap 4 course</p>
</div>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$('body').scrollspy({
target: '#myNav'
})
$('#myNav ul li a[href^="#"]').on('click', function (e) {
e.preventDefault();
var t = this.hash;
$('html, body').animate({
scrollTop: $(this.hash).offset().top
}, 1000, function () {
window.location.hash = t;
});
})
</script>
</body>
</html>