Scribd
Upload
17 views6 pages

DPW

Uploaded by

Reyson fernando Batte chuqui
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
17 views6 pages

DPW

Uploaded by

Reyson fernando Batte chuqui
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

doctype html>
<html lang="es">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->


<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<link rel="stylesheet" href="css/estilos.css">

<title>Hello, world!</title>
</head>
<body>
<header>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-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 ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page"
href="#">inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">nosotros</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
servicios
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">servicio 1</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">servicio 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">servicio 3</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-
disabled="true">contactos</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<section class="carrusel">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-
ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-
bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-
bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-
bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/1920/500" class="d-block w-100"
alt="...">
<div class="carousel-caption d-none d-md-block">
<h2>El titulo de la primera imagen</h2>
<p>la primera descripcion del titulo de la imagen 1.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/500" class="d-block w-100"
alt="...">
<div class="carousel-caption d-none d-md-block">
<h2>El titulo de la primera imagen</h2>
<p>la segunda descripcion del titulo de la imagen 2.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/500" class="d-block w-100"
alt="...">
<div class="carousel-caption d-none d-md-block">
<h2>El titulo de la primera imagen</h2>
<p>la tercera descripcion del titulo de la imagen 3.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-
target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-
target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<section class="nosotros my-5">
<h2 class="text-center my-5">Quienes Somos</h2>
<div class="container">
<div class="row">
<div class="col-6 text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum
praesentium, voluptates provident distinctio dolor nostrum dignissimos minus illum
neque saepe libero ea veritatis numquam perspiciatis vero, voluptatem nam iste
quos?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Quibusdam dolore sed iure ea. Blanditiis sit labore rem nostrum aliquid hic
recusandae eos illo debitis saepe, excepturi veritatis impedit minus nesciunt!</p>
</div>
<div class="col-6">
<img class="img-fluid" src="https://picsum.photos/800/300" alt="">
</div>
</div>
</div>
</section>
<section class="nosotros my-5">
<h2 class="text-center my-5">Nuestros servicios</h2>
<div class="container">
<div class="row">
<div class="col-4">
<div class="card text-center">
<img src="https://picsum.photos/500/300" class="card-img-top"
alt="...">
<div class="card-body">
<h5 class="card-title">Servicio 1</h5>
<p class="card-text">Some quick example text to build on the card
title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Ver Mas</a>
</div>
</div>
</div>
<div class="col-4">
<div class="card text-center">
<img src="https://picsum.photos/500/300" class="card-img-top"
alt="...">
<div class="card-body">
<h5 class="card-title">Servicio 2</h5>
<p class="card-text">Some quick example text to build on the card
title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Ver Mas</a>
</div>
</div>
</div>
<div class="col-4">
<div class="card text-center">
<img src="https://picsum.photos/500/300" class="card-img-top"
alt="...">
<div class="card-body">
<h5 class="card-title">Servicio 3</h5>
<p class="card-text">Some quick example text to build on the card
title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Ver Mas</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="contactenos bg-info py-5">
<h2 class="text-center">Contactanos</h2>
<div class="container">
<div class="row">
<div class="mb-3 col-4">
<label for="exampleInputEmail1" class="form-label">Nombres</label>
<input type="text" class="form-control" id="Nombre" aria-
describedby="Nombre">
<div id="Nombre" class="form-text">Mensaje a mostrar para Nombre.</div>
</div>
<div class="mb-3 col-4">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 col-4">
<label for="asunto" class="form-label">Asuntos</label>
<input type="text" class="form-control" id="Nombre" aria-
describedby="Nombre">
<div id="asunto" class="form-text">Mensaje a mostrar para Nombre.</div>
</div>
<div class="mb-3 col-12">
<label for="Mensaje">Mensaje</label>
<textarea class="form-control" name="Mensaje" id="col-30"
rows="5"></textarea>
</div>

<div class="text-center"><button type="submit" class="btn btn-


primary">Enviar</button></div>
</form>
</div>
</section>
<section>
<iframe width="1303" height="400" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0" id="gmap_canvas"
src="https://maps.google.com/maps?width=520&amp;height=400&amp;hl=en&amp;q=av.Beni
%20Mamore/B/Taruma/diagonal%20posta%20taruma%20riberlta%20+
(BOLIVIA)&amp;t=&amp;z=12&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe>
</section>
<footer>
<div class="container">
<div class="row">
<div class="columna columna-25">
<img src="img/logo-blanco.png" class="logo-footer">
<p></p>
</div>

<div class="columna columna-25">


<h3>
TEMAS RELACIONADOS
</h3>
<ul>
<li><a href="#"> Tema 1</a></li>
<li><a href="#"> Tema 2</a></li>
<li><a href="#"> Tema 3</a></li>
</ul>
</div>

<div class="columna columna-25">


<h3>
DATOS DE CONTACTOS
</h3>
<ul>
<li>[email protected]</li>
<li>+59169368676</li>
<li>Av.palma real 331-posta taruma<br> Riberalta-Beni-Bolivia
</li>
</ul>

</div>

<div class="columna columna-25">

<h3>
REDES SOCIALES
</h3>
<ul>
<li><a href="#"><i></i></a></li>
<li><a href="#"><i></i></a></li>
<li><a href="#"><i></i></a></li>
</ul>
</div>

</div>

</di>
<div class="barra-footer">
&copy; DERECHOS RESERVADOS - 2024
</div>

</footer>

<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: Bootstrap Bundle with Popper -->


<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>

<!-- Option 2: Separate Popper and Bootstrap JS -->


<!--
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>
-->
</body>
</html>

header{
background-color: blueviolet;
}
.nosotros{
text-align: justify;
line-height: 1cm;

You might also like