Skip to content

Instantly share code, notes, and snippets.

@IgnacioGaldames

IgnacioGaldames/landing.html

Created April 17, 2020 15:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save IgnacioGaldames/39f2f36601feb52c1281bebc1709b283 to your computer and use it in GitHub Desktop.
Save IgnacioGaldames/39f2f36601feb52c1281bebc1709b283 to your computer and use it in GitHub Desktop.
Download ZIP
landing menu with anchor links
Raw
landing.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce2.0</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.typekit.net/nme0rgr.css">
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"
integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
<style>
body {
font-family: acumin-pro, sans-serif;
}
.my-circle {
border: solid 2px black !important;
width: 30px;
height: 30px;
}
.my-circle:hover {
background-color: var(--pink) !important;
}
.line {
height: 2px;
background-color: black;
width: 100%;
position: absolute;
top: .9rem;
left: 0;
z-index: -9;
}
#metodologia .container .row .col-4:first-child .line {
width: 50%;
left: 50%;
}
#metodologia .container .row .col-4:last-child .line {
width: 50%;
}
header,
section {
border-bottom: solid 1px lightgray;
}
.border {
border-width: 2px !important;
}
html {
scroll-behavior: smooth;
}
</style>
</head>
<body>
<header class="header container-fluid bg-light sticky-top">
<nav class="navbar navbar-expand-lg navbar-light bg-light text-uppercase">
<a class="navbar-brand" href="index.html/#hero">
<img src="https://place-hold.it/100x90" width="60" height="60" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu"
aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav mr-auto">
<li class="nav-item pr-md-4 active">
<a class="nav-link" href="#lorem">lorem<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item pr-md-4">
<a class="nav-link" href="#ipsum">ipsum</a>
</li>
<li class="nav-item pr-md-4">
<a class="nav-link" href="#dolor">Dolor</a>
</li>
<li class="nav-item pr-md-4">
<a class="nav-link" href="#sit">sit</a>
</li>
<li class="nav-item pr-md-4">
<a class="nav-link" href="#amet">Amet</a>
</li>
<li class="nav-item pr-md-4">
<a class="nav-link" href="#consectetur">consectetur</a>
</li>
<li class="nav-item pr-md-4">
<a class="nav-link" href="#adipisicing ">adipisicing </a>
</li>
</ul>
</div>
</nav>
</header>
<section class="container-fluid py-4" id="hero">
<div class="row">
<div class="col-md-4 text-center mb-4">
<img src="https://place-hold.it/240x180" alt="">
</div>
<div class="col-md-4 d-flex align-items-center justify-content-center mb-4 text-center">
<h2 class="h3">
<strong>Lorem ipsum dolor sit amet consectetur adipisicing elit. </strong>
</h2>
</div>
<div class="col-md-4 d-flex align-items-end justify-content-around mb-4">
<a href="" class="btn btn-outline-primary">
ingresa
</a>
<a href="" class="btn btn-primary">
regístrate
</a>
</div>
</div>
</section>
<section class="container-fluid py-4" id="lorem">
<div class="row">
<div class="col-md-3 mb-3">
<p class="h5 text-capitalize">lorem</p>
</div>
<div class="col-md-9">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure voluptates harum officiis numquam atque. Quibusdam nisi deleniti tempore pariatur neque quasi consectetur maxime qui velit, modi corporis dignissimos reprehenderit optio!</p>
</div>
</div>
</section>
<section class="container-fluid py-4" id="ipsum">
<div class="row">
<div class="col-md-3 mb-3">
<p class="h5 text-capitalize">Ipsum</p>
</div>
<div class="col-md-9">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, a, nisi suscipit ut, illo aliquam nam ab voluptas blanditiis aspernatur labore voluptatem. Explicabo earum aliquid beatae voluptatum distinctio reprehenderit aut.</p>
</div>
<div class="col-md-6 mx-auto">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ"
allowfullscreen></iframe>
</div>
</div>
</div>
</section>
<section class="container-fluid py-4" id="dolor">
<div class="row">
<div class="col-md-3 mb-3">
<p class="h5 text-capitalize">Dolor</p>
</div>
<div class="col-md-9">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis libero dolorem possimus fugiat impedit, ipsam laborum, consequuntur consequatur repudiandae minima inventore voluptas a cumque animi cum iusto eaque ad provident.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-3 mx-auto text-center">
<img src="https://place-hold.it/75x65" class="img-fluid mb-3" alt="">
<p>Lorem ipsum dolor sit amet </p>
</div>
<div class="col-3 mx-auto text-center">
<img src="https://place-hold.it/75x65" class="img-fluid mb-3" alt="">
<p>consectetur adipisicing elit. </p>
</div>
<div class="col-3 mx-auto text-center">
<img src="https://place-hold.it/75x65" class="img-fluid mb-3" alt="">
<p>Numquam sunt impedit exercitationem </p>
</div>
<div class="col-3 mx-auto text-center">
<img src="https://place-hold.it/75x65" class="img-fluid mb-3" alt="">
<p>eveniet ullam minus consequuntur? </p>
</div>
<div class="col-3 mx-auto text-center">
<img src="https://place-hold.it/75x65" class="img-fluid mb-3" alt="">
<p>Quibusdam consequuntur id quaerat ab modi</p>
</div>
<div class="col-3 mx-auto text-center">
<img src="https://place-hold.it/75x65" class="img-fluid mb-3" alt="">
<p>, distinctio ea praesentium dolor ut. </p>
</div>
<div class="col-3 mx-auto text-center">
<img src="https://place-hold.it/75x65" class="img-fluid mb-3" alt="">
<p>Laudantium, quam iure.</p>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<p class="h5 text-capitalize">Dolor II</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-4 col-md text-center">
<div class="line"></div>
<div
class="rounded-circle mx-auto d-flex align-items-center justify-content-center mb-3 bg-dark text-white my-circle">
<span>1</span>
</div>
<p>Lorem ipsum dolor </p>
</div>
<div class="col-4 col-md text-center">
<div class="line"></div>
<div
class="rounded-circle mx-auto d-flex align-items-center justify-content-center mb-3 bg-dark text-white my-circle">
<span>2</span>
</div>
<p>sit amet consectetur </p>
</div>
<div class="col-4 col-md text-center">
<div class="line"></div>
<div
class="rounded-circle mx-auto d-flex align-items-center justify-content-center mb-3 bg-dark text-white my-circle">
<span>3</span>
</div>
<p>adipisicing elit.</p>
</div>
<div class="col-4 col-md text-center">
<div class="line"></div>
<div
class="rounded-circle mx-auto d-flex align-items-center justify-content-center mb-3 bg-dark text-white my-circle">
<span>4</span>
</div>
<p> Mollitia magni similique </p>
</div>
<div class="col-4 col-md text-center">
<div class="line"></div>
<div
class="rounded-circle mx-auto d-flex align-items-center justify-content-center mb-3 bg-dark text-white my-circle">
<span>5</span>
</div>
<p>sunt voluptatum minima! </p>
</div>
<div class="col-4 col-md text-center">
<div class="line"></div>
<div
class="rounded-circle mx-auto d-flex align-items-center justify-content-center mb-3 bg-dark text-white my-circle">
<span>6</span>
</div>
<p>Dolores, recusandae? Temporibus </p>
</div>
</div>
</div>
</section>
<section class="container-fluid py-4" id="sit">
<div class="row">
<div class="col-md-3 mb-3">
<p class="h5 text-capitalize">sit</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 text-center">
<img src="https://place-hold.it/75x65" alt="" class="img-fluid mb-3">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. </p>
</div>
<div class="col-sm-4 text-center">
<img src="https://place-hold.it/75x65" alt="" class="img-fluid mb-3">
<p>Dolore labore velit eum at illum pariatur voluptatibus tempora aliquid rem illo</p>
</div>
<div class="col-sm-4 text-center">
<img src="https://place-hold.it/75x65" alt="" class="img-fluid mb-3">
<p>consequatur libero sunt error. Modi, cupiditate. Dolore itaque illo eos!</p>
</div>
</div>
</div>
</section>
<section class="container-fluid py-4" id="amet">
<div class="row">
<div class="col-md-3 mb-3">
<p class="h5 text-capitalize">Amet</p>
</div>
</div>
<div class="row">
<div class="col-sm-4 mb-3">
<div class="mx-auto text-center mb-3">
<img width="90px"
src="https://s3.amazonaws.com/assets.mockflow.com/app/wireframepro/company/Cdbebc2ebb2344f07943beef702058d48/projects/M1994437fa3b527ed9453482573cfb2181586311741351/images/Ddfad8ba74fbe3e586e305728f70394fd"
alt="" class="border border-dark rounded-circle">
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, nulla sed ipsa doloremque maiores excepturi
magnam quia consectetur rem ad fuga tenetur dolorem necessitatibus suscipit quisquam quidem vitae tempore
dicta?</p>
<p class="text-center">Miércoles 27 de mayo</p>
</div>
<div class="col-sm-4 mb-3">
<div class="mx-auto text-center mb-3">
<img width="90px"
src="https://s3.amazonaws.com/assets.mockflow.com/app/wireframepro/company/Cdbebc2ebb2344f07943beef702058d48/projects/M1994437fa3b527ed9453482573cfb2181586311741351/images/Ddfad8ba74fbe3e586e305728f70394fd"
alt="" class="border border-dark rounded-circle">
</div>
<p>Blanditiis at magni quis quo voluptatibus est officiis recusandae similique soluta magnam, dolores ad beatae.
Amet saepe, maiores, doloribus eveniet laboriosam fugit distinctio commodi similique in dolores atque quasi.
Fuga.</p>
<p class="text-center">Viernes 29 de mayo</p>
</div>
<div class="col-sm-4 mb-3">
<div class="mx-auto text-center mb-3">
<img width="90px"
src="https://s3.amazonaws.com/assets.mockflow.com/app/wireframepro/company/Cdbebc2ebb2344f07943beef702058d48/projects/M1994437fa3b527ed9453482573cfb2181586311741351/images/Ddfad8ba74fbe3e586e305728f70394fd"
alt="" class="border border-dark rounded-circle">
</div>
<p>Odit ut nam eaque deserunt libero, quo dignissimos recusandae aliquam neque vel commodi aperiam suscipit,
voluptates qui, excepturi necessitatibus sint. Eveniet sint fugiat consectetur minima magni in provident
veritatis? Beatae.</p>
<p class="text-center">Lunes 01 de junio</p>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<a href="" class="btn btn-primary">
accionar
</a>
</div>
</div>
</section>
<section class="container-fluid py-4" id="consectetur">
<div class="row">
<div class="col-md-3 mb-3">
<p class="h5 text-capitalize">consectetur</p>
</div>
</div>
<div class="row row d-flex align-items-center">
<div class="col-md-8 mb-3">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://place-hold.it/1920x1080" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://place-hold.it/1920x1080" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://place-hold.it/1920x1080" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" 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 class="col-md-4 mb-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc maximus, nulla ut commodo sagittis, sapien dui
mattis dui, non pulvinar lorem felis nec erat</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum delectus nulla sed ratione nesciunt
exercitationem, eaque corporis soluta excepturi, amet, incidunt consequatur commodi voluptatem! A quisquam
sint excepturi aliquam ut!</p>
</div>
</div>
</section>
<section class="container-fluid py-4" id="adipisicing ">
<div class="row">
<div class="col-md-3 mb-3">
<p class="h5 text-capitalize">adipisicing</p>
</div>
</div>
<div class="row">
<div class="col-2 text-center"><img src="https://place-hold.it/75x65" alt="" class="img-fluid"></div>
<div class="col-2 text-center"><img src="https://place-hold.it/75x65" alt="" class="img-fluid"></div>
<div class="col-2 text-center"><img src="https://place-hold.it/75x65" alt="" class="img-fluid"></div>
<div class="col-2 text-center"><img src="https://place-hold.it/75x65" alt="" class="img-fluid"></div>
<div class="col-2 text-center"><img src="https://place-hold.it/75x65" alt="" class="img-fluid"></div>
<div class="col-2 text-center"><img src="https://place-hold.it/75x65" alt="" class="img-fluid"></div>
</div>
</section>
<section class="container-fluid py-4" id="elit">
<div class="row">
<div class="col-md-6 mb-3">
<div class="row">
<div class="col-md-4">
<p class="small">Elit</p>
</div>
</div>
<div class="row">
<div class="col">
<div class="text-center"><img src="https://place-hold.it/75x65" alt="" class="img-fluid"></div>
</div>
<div class="col">
<div class="text-center"><img src="https://place-hold.it/75x65" alt="" class="img-fluid"></div>
</div>
<div class="col">
<div class="text-center"><img src="https://place-hold.it/75x65" alt="" class="img-fluid"></div>
</div>
<div class="col">
<div class="text-center"><img src="https://place-hold.it/75x65" alt="" class="img-fluid"></div>
</div>
<div class="col">
<div class="text-center"><img src="https://place-hold.it/75x65" alt="" class="img-fluid"></div>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="row">
<div class="col-md-4">
<p class="small">En alianza con</p>
</div>
</div>
<div class="row">
<div class="col-2"><img src="https://place-hold.it/75x65" alt="" class="img-fluid mb-3"></div>
<div class="col-2"><img src="https://place-hold.it/75x65" alt="" class="img-fluid mb-3"></div>
<div class="col-2"><img src="https://place-hold.it/75x65" alt="" class="img-fluid mb-3"></div>
<div class="col-2"><img src="https://place-hold.it/75x65" alt="" class="img-fluid mb-3"></div>
<div class="col-2"><img src="https://place-hold.it/75x65" alt="" class="img-fluid mb-3"></div>
<div class="col-2"><img src="https://place-hold.it/75x65" alt="" class="img-fluid mb-3"></div>
<div class="col-2"><img src="https://place-hold.it/75x65" alt="" class="img-fluid mb-3"></div>
<div class="col-2"><img src="https://place-hold.it/75x65" alt="" class="img-fluid mb-3"></div>
<div class="col-2"><img src="https://place-hold.it/75x65" alt="" class="img-fluid mb-3"></div>
<div class="col-2"><img src="https://place-hold.it/75x65" alt="" class="img-fluid mb-3"></div>
<div class="col-2"><img src="https://place-hold.it/75x65" alt="" class="img-fluid mb-3"></div>
<div class="col-2"><img src="https://place-hold.it/75x65" alt="" class="img-fluid mb-3"></div>
</div>
</div>
</div>
</section>
<footer class="footer container-fluid py-4">
<nav class="row">
<div class="col">
<div class="row">
<div class="col small">
<i class="fas fa-phone"></i>
<span>+569 xxx xxx xxx</span>
</div>
<div class="col small">
<i class="far fa-envelope"></i>
<span>xxxxx@mail.cl</span>
</div>
<div class="col small">
<i class="far fa-clock"></i>
<span>Horario de atención: <br>Lunes a viernes, entre 09.00 - 18.00</span>
</div>
</div>
</div>
<div class="col-md-2">
<div class="navbar navbar-expand navbar-light bg-light">
<ul class="navbar-nav ml-auto">
<li class="nav-item float-left">
<a class="nav-link" href="#">
<i class="fab fa-facebook-square"></i></a>
</li>
<li class="nav-item float-left">
<a class="nav-link" href="#">
<i class="fab fa-twitter-square"></i>
</a>
</li>
<li class="nav-item float-left">
<a class="nav-link" href="#">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="nav-item float-left">
<a class="nav-link" href="#">
<i class="fab fa-google-plus-square"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
</footer>
<script>
$('.nav-link').click(function () {
var divId = $(this).attr('href');
$('html, body').animate({
scrollTop: $(divId).offset().top - 87
}, 100);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment