BOOSTRAP

<!
DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Trip trip</title>

<link rel="stylesheet" href="./css/bootstrap.min.css" />

<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.14.0/css/all.min.css"
/>

<link rel="stylesheet" href="./css/main.css" />
</head>
<body>

<header class="header">
<div class="container vh-50 ">

<nav class="row text-white justify-content-between algin-items-
center text-uppercase pt-4">

<a href="#"class="col-auto text-reset">
<img src="./img/logo-white.svg" alt="logo weston" class="img-
logo">weston
</a>

<div class="col-auto">
<a href="#"class="text-reset pr-3">Home</a>
<a href="#" class="text-reset pr-3">Experience</a>
<a href="#" class="text-reset pr-3">Inspiration</a>
<a href="#" class="text-reset pr-3">Features</a>
<a href="#" class="text-reset">Contact</a>
</div>
</nav>

<div class="row h-100 algin-items-center">
<div class="col-6 text-white">

<h1 class="text-capitalize">
<span class="text-warning h5">the greath oudtoor</span> <br> ad
venture
</h1>

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quod recusandae voluptas exercitationem, ullam quo qui consequ
atur porro a libero esse,
nihil accusamus sed harum ducimus dolorem amet id modi enim.
</p>

<a href="#" class="text-reset btn btn-warning">Buy now</a>
</div>
</div>
</div>
<img src="./img/cuts/cut-header.svg" alt="">
</header>

<section class="container">
<div class="row">

<div class="col-12 text-center">
<h2 class="text-warning text-uppercase h6">Experience</h2>
<h3 class="text-capitalize">The thrilling oudtoor</h3>
<p class="text-muted">
Vel ea natus sint neque aut, laborum fuga possimus cumque totam
! Veniam tempore ullam repudiandae,
impedit esse in nesciunt voluptates beatae et.
</p>
</div>


<article class="col-4 card-effect">
<div class="card">
<img src="./img/raiting.png" alt="raiting" class="card-img card-
img-filter">
<div class="card-img-overlay text-white d-flex flex-column justi
fy-content-center text-center">
<h4>Rafting</h4>
<p>
Suscipit minus iste non fugiat veritatis id? Alias, fuga. Vo
luptate pariatur repellendus,
dolorem quibusdam dolorum, obcaecati error mollitia culpa do
lores aliquam dolore!
</p>
<a href="#" class="text-reset">Read more</a>
</div>
</div>
</article>

<div class="card">
<img src="./img/hiking.png" alt="Hiking" class="card-img card-
img-filter">
<h4>Hiking</h4>
<p>
</p>
</div>
</div>
</article>

<div class="card">
<img src="./img/camping.png" alt="Camping" class="card-img card-
img-filter">
<h4>Camping</h4>
<p>
</p>
</div>
</div>
</article>
</div>
</section>

<section class="comments mb-5">
<img src="./img/cuts/cut-header.svg" alt="" class="transform-turn"/>
<div class="container">
<div class="row">
<blockquote class="col-12 text-white text-center" >

<img src="./img/john-doe.jpeg" alt="John Doe" clas
s="commets__img">

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Architecto recusandae ducimus tenetur ea quod ullam!
</p>

<footer class="blockquote-footer text-white">
<cite>John Doe</cite>
</footer>
</blockquote>
</div>
</div>
</section>

<section class="container">
<div class="row">

<div class="col-12 text-center">
<h3 class="text-warning text-uppercase h6"> Lorem, ipsum dolor
.</h3>
<h2 class="text-capitalize"> sparks of Inspiration</h2>
</div>

<ul class="col-6">
<li class="media">
<img src="./img/sparks/proyecto1.svg" alt="Boat"class="media-
object-img">
<div class="media-body">
<h5>Subtitle</h5>
<h4 class="h5">
<a href="#" class="text-reset">Title of object</a>
</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ear
um corporis voluptatem odio!
</p>
</div>
</li>
<li class="media">
<img src="./img/sparks/proyecto4.svg" alt="town"class="media-
object-img">
<h5>Subtitle</h5>
<h4 class="h5">
</h4>
<p>
</p>
</div>
</li>
<li class="media">
<img src="./img/sparks/proyecto5.svg" alt="signal"class="media-
object-img">
<h5>Subtitle</h5>
<h4 class="h5">
</h4>
<p>
</p>
</div>
</li>
</ul>

<ul class="col-6">
<li class="media">
<img src="./img/sparks/proyecto2.svg" alt="Boat"class="media-
object-img">
<h5>Subtitle</h5>
<h4 class="h5">
</h4>
<p>
</p>
</div>
</li>
<li class="media">
<img src="./img/sparks/proyecto3.svg" alt="town"class="media-
object-img">
<h5>Subtitle</h5>
<h4 class="h5">
</h4>
<p>
</p>
</div>
</li>
<li class="media">
<img src="./img/sparks/proyecto6.svg" alt="signal"class="media-
object-img">
<h5>Subtitle</h5>
<h4 class="h5">
</h4>
<p>
</p>
</div>
</li>
</ul>
</div>
</section>

<section class="carousel slide" id="carousel-weston">
<div class="carousel-caption carousel-weston-middle">
<h2 class="text-uppercase"> DON'T LIVE YOUr LIFE UNLIVED</h2>
<P>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit
molestias libero,
reprehenderit ratione excepturi iure repellendus. Accusamus sit qu
aerat commodi.
</P>
<button class="btn btn-light px=4 text-capitalize">Lets go</button>
</div>

<div class="carousel-inner">

<div class="carousel-item active">
<img src="./img/carousel/Carousel-01.jpg" alt="camping" class="d-
block w-100">
</div>

<div class="carousel-item">
<img src="./img/carousel/Carousel-02.jpg" alt="Boat" class="d-
block w-100">
</div>

<div class="carousel-item ">
<img src="./img/carousel/Carousel-03.jpg" alt="town" class="d-
block w-100">
</div>
</div>
<a href="#carousel-weston" class="carousel-control-prev" data-
slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#carousel-weston" class="carousel-control-next" data-
slide="next">
<span class="carousel-control-next-icon"></span>
</a>

</section>

<script src="./js/jquery-3.5.0.min.js"></script>

<script src="./js/popper.min.js"></script>

<script src="./js/bootstrap.min.js"></script>
</body>
</html>

BOOSTRAP

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

BOOSTRAP

Cargado por

Copyright:

Formatos disponibles

<!

También podría gustarte