|
|
Line 1: |
Line 1: |
| {{Edinburgh_UG}} | | {{Edinburgh_UG}} |
− |
| |
− |
| |
− | <html lang="en">
| |
− |
| |
− | <style type="text/css">
| |
− |
| |
− | .carousel-item {
| |
− | height: 100vh;
| |
− | min-height: 300px;
| |
− | background: no-repeat center center scroll;
| |
− | -webkit-background-size: cover;
| |
− | -moz-background-size: cover;
| |
− | -o-background-size: cover;
| |
− | background-size: cover;
| |
− | }
| |
− |
| |
− | </style>
| |
− |
| |
− | <script>
| |
− | var gulp = require('gulp');
| |
− | var browserSync = require('browser-sync').create();
| |
− | var pkg = require('./package.json');
| |
− |
| |
− | // Copy third party libraries from /node_modules into /vendor
| |
− | gulp.task('vendor', function() {
| |
− |
| |
− | // Bootstrap
| |
− | gulp.src([
| |
− | './node_modules/bootstrap/dist/**/*',
| |
− | '!./node_modules/bootstrap/dist/css/bootstrap-grid*',
| |
− | '!./node_modules/bootstrap/dist/css/bootstrap-reboot*'
| |
− | ])
| |
− | .pipe(gulp.dest('./vendor/bootstrap'))
| |
− |
| |
− | // jQuery
| |
− | gulp.src([
| |
− | './node_modules/jquery/dist/*',
| |
− | '!./node_modules/jquery/dist/core.js'
| |
− | ])
| |
− | .pipe(gulp.dest('./vendor/jquery'))
| |
− |
| |
− | })
| |
− |
| |
− | // Default task
| |
− | gulp.task('default', ['vendor']);
| |
− |
| |
− | // Configure the browserSync task
| |
− | gulp.task('browserSync', function() {
| |
− | browserSync.init({
| |
− | server: {
| |
− | baseDir: "./"
| |
− | }
| |
− | });
| |
− | });
| |
− |
| |
− | // Dev task
| |
− | gulp.task('dev', ['browserSync'], function() {
| |
− | gulp.watch('./css/*.css', browserSync.reload);
| |
− | gulp.watch('./*.html', browserSync.reload);
| |
− | });
| |
− | <\script>
| |
− |
| |
− | <head>
| |
− |
| |
− | <meta charset="utf-8">
| |
− | <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
| |
− | <meta name="description" content="">
| |
− | <meta name="author" content="">
| |
− |
| |
− | <title>Full Slider - Start Bootstrap Template</title>
| |
− |
| |
− | <!-- Bootstrap core CSS -->
| |
− | <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
| |
− |
| |
− | <!-- Custom styles for this template -->
| |
− | <link href="css/full-slider.css" rel="stylesheet">
| |
− |
| |
− | </head>
| |
− |
| |
− | <body>
| |
− |
| |
− | <!-- Navigation -->
| |
− | <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
| |
− | <div class="container">
| |
− | <a class="navbar-brand" href="#">Start Bootstrap</a>
| |
− | <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
| |
− | <span class="navbar-toggler-icon"></span>
| |
− | </button>
| |
− | <div class="collapse navbar-collapse" id="navbarResponsive">
| |
− | <ul class="navbar-nav ml-auto">
| |
− | <li class="nav-item active">
| |
− | <a class="nav-link" href="#">Home
| |
− | <span class="sr-only">(current)</span>
| |
− | </a>
| |
− | </li>
| |
− | <li class="nav-item">
| |
− | <a class="nav-link" href="#">About</a>
| |
− | </li>
| |
− | <li class="nav-item">
| |
− | <a class="nav-link" href="#">Services</a>
| |
− | </li>
| |
− | <li class="nav-item">
| |
− | <a class="nav-link" href="#">Contact</a>
| |
− | </li>
| |
− | </ul>
| |
− | </div>
| |
− | </div>
| |
− | </nav>
| |
− |
| |
− | <header>
| |
− | <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
| |
− | <ol class="carousel-indicators">
| |
− | <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
| |
− | <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
| |
− | <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
| |
− | </ol>
| |
− | <div class="carousel-inner" role="listbox">
| |
− | <!-- Slide One - Set the background image for this slide in the line below -->
| |
− | <div class="carousel-item active" style="background-image: url('http://placehold.it/1900x1080')">
| |
− | <div class="carousel-caption d-none d-md-block">
| |
− | <h3>First Slide</h3>
| |
− | <p>This is a description for the first slide.</p>
| |
− | </div>
| |
− | </div>
| |
− | <!-- Slide Two - Set the background image for this slide in the line below -->
| |
− | <div class="carousel-item" style="background-image: url('http://placehold.it/1900x1080')">
| |
− | <div class="carousel-caption d-none d-md-block">
| |
− | <h3>Second Slide</h3>
| |
− | <p>This is a description for the second slide.</p>
| |
− | </div>
| |
− | </div>
| |
− | <!-- Slide Three - Set the background image for this slide in the line below -->
| |
− | <div class="carousel-item" style="background-image: url('http://placehold.it/1900x1080')">
| |
− | <div class="carousel-caption d-none d-md-block">
| |
− | <h3>Third Slide</h3>
| |
− | <p>This is a description for the third slide.</p>
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
− | <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
| |
− | <span class="carousel-control-prev-icon" aria-hidden="true"></span>
| |
− | <span class="sr-only">Previous</span>
| |
− | </a>
| |
− | <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
| |
− | <span class="carousel-control-next-icon" aria-hidden="true"></span>
| |
− | <span class="sr-only">Next</span>
| |
− | </a>
| |
− | </div>
| |
− | </header>
| |
− |
| |
− | <!-- Page Content -->
| |
− | <section class="py-5">
| |
− | <div class="container">
| |
− | <h1>Full Slider by Start Bootstrap</h1>
| |
− | <p>The background images for the slider are set directly in the HTML using inline CSS. The rest of the styles for this template are contained within the
| |
− | <code>full-slider.css</code>
| |
− | file.</p>
| |
− | </div>
| |
− | </section>
| |
− |
| |
− | <!-- Footer -->
| |
− | <footer class="py-5 bg-dark">
| |
− | <div class="container">
| |
− | <p class="m-0 text-center text-white">Copyright © Your Website 2018</p>
| |
− | </div>
| |
− | <!-- /.container -->
| |
− | </footer>
| |
− |
| |
− | <!-- Bootstrap core JavaScript -->
| |
− | <script src="vendor/jquery/jquery.min.js"></script>
| |
− | <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
| |
− |
| |
− | </body>
| |
− |
| |
− | </html>
| |