Ver Mensaje Individual
  #4 (permalink)  
Antiguo 27/02/2018, 08:08
sergiodueso
 
Fecha de Ingreso: enero-2011
Ubicación: Zaragoza
Mensajes: 98
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: Problema con divs

Os pongo el código

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-grid.min.css"/>
<script src="js/smooth-scroll.min.js"></script>
<script>
smoothScroll.init({
selector: '[data-scroll]', // Selector for links (must be a class, ID, data attribute, or element tag)
selectorHeader: null, // Selector for fixed headers (must be a valid CSS selector) [optional]
speed: 1500, // Integer. How fast to complete the scroll in milliseconds
easing: 'easeInOutCubic', // Easing pattern to use
offset: 0, // Integer. How far to offset the scrolling anchor location in pixels
callback: function ( anchor, toggle ) {} // Function to run after scrolling
});
</script>
<script>
$(document).ready(function(){
$(".nav-link").click(function () {
$('.navbar-toggler').click();
});
});

</script>
<title>Turibamba</title>

<style>
html, body{
height: 100vh;
}

.slider-inicio{
background:url("imagenes/fondo1.jpg");
height: 100vh;
background-size: cover;
background-position: center;
}
.fondo-galeria1{
background:url("imagenes/back5.jpg");
height: 100vh;
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<!-- Menú -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
<a data-scroll class="navbar-brand" href="#inicio">
<img src="imagenes/logo.png" width="30px" height="30px" class="d-inline-block align-top" alt="Turibamba Ocio"/>Turibamba</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto text-center">
<li class="nav-item active">
<a data-scroll class="nav-link" href="#inicio">Inicio</span></a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#cumpleaños">Cumpleaños</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#animaciones">Animaciones</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#despedidas">Despedidas</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#nosotras">Nosotras y el parque</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#galeria">Galería</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#tarifas">Tarifas</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#contacto">Contacto</a>
</li>
</ul>
</div>
</nav>
<!-- Fin menú -->
<!-- Inicio -->
<div class="container-fluid slider-inicio d-flex justify-content-center align-items-center" id="inicio">
<div class="row flex-column">
<div class="col-12 d-flex justify-content-center align-items-center pb-5"><img class="img-fluid" src="imagenes/turibamba.png"/></div>
<h4 class="font-weight-bold d-flex justify-content-center pt-5">C/ Batalla de Arápiles, 24 (La Almozara)</h4>
</div>
</div>
<!-- Fin del Inicio-->

<!-- Inicio de cumpleaños -->
<div class="container-fluid" style="padding-top: 80px; height: 100vh; overflow: auto;" id="cumpleaños">
<div class="container">
<div class="row flex-column">
<div class="col-12 d-flex justify-content-center pb-3">
<h1>Cumpleaños</h1>
</div>
</div>
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="imagenes/Slide-1.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<a class="btn btn-primary" href="#" role="button">Link</a>
</div>
</div>
<div class="card">
<img class="card-img-top" src="imagenes/Slide-2.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<a class="btn btn-primary" href="#" role="button">Link</a>
</div>
</div>
<div class="card">
<img class="card-img-top" src="imagenes/Slide-3.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<a class="btn btn-primary" href="#" role="button">Link</a>
</div>
</div>
</div>
</div>
</div>
<!-- Fin de cumpleaños -->

<!-- Inicio Jumbotron Animaciones-->
<div class="container-fluid" style="padding-top: 80px; height: 100vh; overflow: auto;" id="animaciones">
<div class="row flex-column">
<div class="col-12 d-flex justify-content-center pb-3">
<h1>Animaciones</h1>
</div>
</div>
<div class="jumbotron rounded-0">
<div class="container">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<div class="d-flex justify-content-between align-items-center">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</div>
</div>
</div>
<!-- Fin Jumbotron animaciones -->

<!-- Inicio Jumbotron despedidas-->
<div class="container-fluid" style="padding-top: 80px; height: 100vh; overflow: auto;" id="despedidas">
<div class="row flex-column">
<div class="col-12 d-flex justify-content-center pb-3">
<h1>Despedidas</h1>
</div>
</div>
<div class="jumbotron mt-5 rounded-0">
<div class="container">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<div class="d-flex justify-content-between align-items-center">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</div>
</div>
</div>
<!-- Fin Jumbotron despedidas-->

<!-- Inicio de la galería-->
<div class="container-fluid fondo-galeria1" style="padding-top: 80px; height: 100vh; overflow: auto;" id="galeria">
<div class="row flex-column">
<div class="col-12 d-flex justify-content-center pb-3">
<h1>Galería</h1>
</div>
</div>
<div class="container">
<div id="carouselExampleIndicators" class="carousel slide pt-1" 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">
<div class="carousel-item active">
<img class="d-block w-100 h-100" src="imagenes/Slide-1.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Primera foto</h5>
<p>Esta es la primera foto del carrusel</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100 h-100" src="imagenes/Slide-2.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Segunda foto</h5>
<p>Esta es la segunda foto del carrusel</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100 h-100" src="imagenes/Slide-3.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Tercera foto</h5>
<p>Esta es la tercera foto del carrusel</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>
</div>
</div>
<!-- Fin de la galería -->
Os pongo un trozo porque no me deja más. Espero os valga. Gracias.