Skip to content

Instantly share code, notes, and snippets.

@neisdev

neisdev/index.html

Created December 13, 2022 13:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save neisdev/883e647ab3af3f8f89e7b854ede72998 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save neisdev/883e647ab3af3f8f89e7b854ede72998 to your computer and use it in GitHub Desktop.
Download ZIP
Spa Landing Page
Raw
index.html
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-custom fixed-top">
<!-- Collapse toggler button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<div class="hamburger-containter">
<span class="icon-bar bar1"></span>
<span class="icon-bar bar2"></span>
<span class="icon-bar bar3"></span>
</div>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse justify-content-center " id="basicExampleNav">
<!-- Links -->
<div class="nav-slider">
<ul class="nav navbar-nav ">
<li class="nav-item dropdown">
<a class="nav-link" href="#services">Services</a>
<div class="dropdown-content">
<a href="#">Facial Treatments</a>
<a href="#">Sugaring & Waxing</a>
<a href="#">Lashes & Brows</a>
<a href="#">Body Treatment</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#products">Products</a>
</li>
</li>
<li class="nav-item">
<a class="nav-link" href="#"
target="_blank">Directions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link btn-group book-nav-link" href="#book"><span>Book Now</span></a>
</li>
</ul>
<!-- Nav Social Links -->
<ul class="nav-icons-list">
<li><a href="#" target="_blank" class="nav-contact-icon">
<span class="nav-icon-span"><i class="fab fa-facebook-f"></i></span></a>
</li>
<li><a href="#" target="_blank" class="nav-contact-icon">
<span class="nav-icon-span"><i class="fab fa-yelp"></i></span></a>
</li>
<li><a href="#" target="_blank" class="nav-contact-icon">
<span class="nav-icon-span"><i class="fas fa-envelope"></i></span></a>
</li>
<li><a href="#" target="_blank" class="nav-contact-icon">
<span class="nav-icon-span"><i class="fas fa-mobile-alt"></i></span></a>
</li>
</ul>
</div>
<!-- End collapsible content -->
</div>
<!-- Nav Book Now Button -->
<div class="nav-book-btn-containter">
<button class="btn-group nav-book-btn">Book Now</button>
</div>
</nav>
<!-- Home Section -->
<section id="home" class="home section" data-parallax="scroll">
<div class="jumbotron">
<div class="jumbo-container">
<h1 class="main-title">Local Spa</h1>
<button class="btn-group book-now-btn">Book Now</button>
</div>
<!--<div class="mouse-scroll-wrapper">
<div class="mouse-scroll">
<span class="mouse">
<span class="mouse-movement"> </span>
</span>
</div>
</div>-->
</section>
<!-- Spa Images Section -->
<section id="spa-section">
<div class="spa-image-container">
<div class="spa-image spa-image-1">
<span class="spa-image-header">Facial Treatments</span>
<div class="learn-more-btn">Learn More</div>
</div>
<div class="spa-image spa-image-2">
<span class="spa-image-header">Sugaring & Waxing</span>
<div class="learn-more-btn">Learn More</div>
</div>
<div class="spa-image spa-image-3">
<span class="spa-image-header">Lashes & Brows</span>
<div class="learn-more-btn">Learn More</div>
</div>
<div class="spa-image spa-image-4">
<span class="spa-image-header">Body Treatments</span>
<div class="learn-more-btn">Learn More</div>
</div>
</div>
</section>
<!-- Philosophy Section -->
<section id="philosophy-section">
<div class="philosophy-container">
<h1 class="philosophy-h1">Philosophy</h1>
<p class="philosophy-p">You are beautiful the way you are at this moment. Happiness and warm heartedness will always be what makes you exquisitely shine from within. No matter what kind of pampering or self care you choose to devote yourself to, you still are the only beautiful
unique you. Come appreciate and celebrate your mind body and soul by lavishing yourself with attentive tender care and kindness. We've created a tranquil and safe place for you to relax, rejuvenate, and feel good about you!</p>
</div>
</section>
<!-- Quote Section -->
<section id="quote-section">
<div class="quote-container">
<!--<h1 class="quote-title quote-title-1">&quot;Best Facial in Seattle&quot;
<span class="quote-title quote-source">Allure Magazine</span>
</h1>
<h1 class="quote-title quote-title-2">&quot;Best Facial in Seattle&quot;
<span class="quote-title quote-source">Allure Magazine</span>
</h1>
<h1 class="quote-title quote-title-3">&quot;Best Facial in Seattle&quot;
<span class="quote-title quote-source">Allure Magazine</span>
</h1>-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="carousel-item active">
<h1 class="quote-title quote-title-1">&quot;Best Facial in town&quot;
<span class="quote-title quote-source">Allure Magazine</span>
</h1>
</div>
<div class="carousel-item">
<h1 class="quote-title quote-title-1">&quot;An insanely awesome facial&quot;
<span class="quote-title quote-source">Seattle Magazine</span>
</h1>
</div>
<div class="carousel-item">
<h1 class="quote-title quote-title-1">&quot;They are amazing&quot;
<span class="quote-title quote-source">Yelp Reviewer</span>
</h1>
</div>
</div>
<!-- Carousel controls -->
<!--<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-icon carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-icon carousel-control-next-icon"></span>
</a>-->
</div>
</div>
</section>
<!-- Footer Section -->
<section id="footer-section">
<div class="footer-info">
<div class="footer-info-block">
<h1 class="address-header">Locate</h1>
<p class="address-p">Local Spa St.<br>Seattle, WA 98103</p>
</div>
<div class="footer-info-block">
<h1 class="address-header">Contact</h1>
<p class="address-p">(206) 123-4567<br>info@localspa.com</p>
</div>
</div>
<div class="contact-wrapper">
<ul class="contact-icons-list">
<li><a href="#" target="_blank" class="contact-icon">
<span class="icon-span"><i class="fab fa-facebook-f"></i></span></a>
</li>
<li><a href="#" target="_blank" class="contact-icon">
<span class="icon-span"><i class="fab fa-yelp"></i></span></a>
</li>
<li><a href="#" target="_blank" class="contact-icon">
<span class="icon-span"><i class="fas fa-envelope"></i></span></a>
</li>
<li><a href="#" target="_blank" class="contact-icon">
<span class="icon-span"><i class="fas fa-mobile-alt"></i></span></a>
</li>
</ul>
</div>
<div class="copyright-wrapper">
<p class="copyright-p">&copy; Local Spa</p>
</div>
</section>
Raw
script.js
$(document).ready(function() {
// Make Navbar full screen on toggler click
$(document).ready(function() {
var $nav = $(".nav-slider");
var $navToggler = $(".navbar-toggler");
var $navBookBtn = $(".nav-book-btn");
var $navBookBtnMain = $(".book-nav-link");
$navToggler.on("click", function() {
$nav.toggleClass("navbar-fullscreen");
$navBookBtn.toggleClass("nav-book-btn-hidden");
$navBookBtnMain.toggleClass("book-nav-link-active");
});
});
// Make navbar Book Now btn appear on scroll after jumbotron btn
$(document).scroll(function() {
var $nav = $(".navbar");
var $home = $("#home");
var $bookBtn = $(".nav-book-btn");
$bookBtn.toggleClass(
"book-btn-scrolled",
$(this).scrollTop() > 0.5 * $home.height()
);
});
// Make nav links appear on toggle
$(document).ready(function() {
$(".navbar-toggler").on("click", function() {
$(".nav-link").toggleClass("nav-links-appear");
});
});
// Navbar collapse on link click
$(".nav a").on("click", function() {
if ($(".navbar-toggler").css("display") != "none") {
$(".navbar-toggler").trigger("click");
}
});
// Transition hamburger icon to 'X' on click
$(".navbar-toggler").on("click", function() {
$(".bar1").toggleClass("bar1Active");
$(".bar2").toggleClass("bar2Active");
$(".bar3").toggleClass("bar3Active");
});
// Fade out jumbotron mouse icon on scroll
$(window).scroll(function(){
$(".mouse-scroll").css("opacity", 1 - $(window).scrollTop() / 450);
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
Raw
spa-landing-page.markdown
Raw
style.scss
html {
margin: 0;
padding: 0;
font-size: 16px;
}
body {
background: #f9faf9;
font: 300 1rem "Lato", sans-serif;
color: #fff;
}
/************************
COMMON STYLES
************************/
.btn-group {
background: #fc2161;
color: #fff;
border-radius: 50px;
border: none;
font: 700 16px "Montserrat", sans-serif;
cursor: pointer;
}
.btn-group:focus {
outline: none;
}
p {
line-height: 30px;
}
/* Navbar */
.navbar {
font: 700 14px "Montserrat", sans-serif;
text-transform: uppercase;
border-bottom: none;
line-height: 30px;
overflow: hidden;
overflow: visible;
}
.nav-slider a.nav-link {
text-align: center;
margin: 0 10px;
/* color: #fc2161 !important; */
}
/* Nav dropdown */
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
top: 40px;
left: 0px;
background-color: #f9f9f9;
min-width: 200px;
padding: 12px 16px;
z-index: 1;
}
.dropdown-content a {
display: block;
color: rgba(0,0,0,0.5);
padding: 10px 0;
font-weight: 700;
text-decoration: none;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a:hover {
color: rgba(0,0,0,0.7);
}
.navbar-fullscreen {
height: 100vh;
overflow: hidden;
}
/* Navbar toggler */
.navbar-toggler {
border: none;
}
.navbar-toggler:visited,
.navbar-toggler:focus,
.navbar-toggler:focus-within,
.navbar-toggler:active {
border: none;
outline: none;
}
.navbar-togger .hamburger-container {
position: relative;
}
.navbar-toggler .icon-bar {
position: relative;
display: block;
background: #aaa;
width: 27px;
height: 3px;
margin: 4px 0;
border-radius: 5px;
transition: all 250ms ease-in-out;
}
.bar1Active {
transform: translateY(7px) translateX(0) rotate(45deg);
background: #333;
}
.bar2Active {
opacity: 0;
transform: scale(0);
}
.bar3Active {
transform: translateY(-7px) translateX(0) rotate(-45deg);
background: #333;
}
/* Nav social links on full screen menu */
.nav-icons-list {
position: relative;
padding: 0;
list-style-type: none;
text-align: center;
font-size: 16px;
font-weight: 400;
display: none;
}
.nav-icons-list li {
position: relative;
top: 40px;
left: 0;
display: inline-block;
height: 45px;
width: 45px;
line-height: 45px;
margin: 0 5px;
background: #aaa;
cursor: pointer;
border-radius: 50%;
}
.nav-icon-span {
color: #fff;
}
/* Nav Book Now button (top right) */
.nav-book-btn {
position: fixed;
top: 14px;
right: -10px;
padding: 11px 17px;
font-size: 10px;
opacity: 0;
transition: all 250ms ease-in-out;
}
.book-btn-scrolled {
opacity: 1;
transform: scale(1);
right: 10px;
}
.nav-book-btn-hidden {
right: -150px;
opacity: 0;
transition-delay: 200ms;
}
/* Book Now btn in toggled menu */
.book-nav-link {
display: none;
position: relative;
max-width: 140px;
padding: 17px 0;
margin: 0 auto;
}
.book-nav-link span {
color: #fff;
}
.book-nav-link-active {
display: block;
}
.navbar-nav > li > a {
transition: all 100ms ease-in-out !important;
transition-delay: 100ms !important;
}
.nav-links-appear {
position: relative;
opacity: 1 !important;
transition: all 50ms ease-in-out;
transition-delay: 100ms;
}
/* Home jumbotron */
.home {
position: relative;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-image: url("https://images.unsplash.com/photo-1534003888922-a3504fa8914e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80");
background-size: cover;
background-position: 0 0;
overflow: hidden;
text-transform: uppercase;
}
#home:before {
content: "";
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.jumbotron {
margin: 0 auto;
text-align: center;
background-color: transparent;
}
.jumbotron .main-title {
position: relative;
display: block;
font: 700 8vw "Poiret One", sans-serif;
letter-spacing: 2px;
}
.book-now-btn {
display: relative;
margin-top: 25px;
padding: 20px 28px;
font: 700 1.1em "Montserrat", sans-serif;
transition: all 150ms ease-in-out;
cursor: pointer;
}
.book-now-btn:hover {
color: #fc2161;
background: #fff;
}
/* Mouse icon */
.mouse-scroll-wrapper {
position: absolute;
right: 0;
bottom: 120px;
width: 100%;
}
.mouse-scroll .mouse {
position: relative;
display: block;
width: 43px;
height: 68px;
box-sizing: border-box;
border: 3px solid #fff;
border-radius: 23px;
margin: 0 auto;
text-align: right;
opacity: .9;
}
.mouse-scroll .mouse .mouse-movement {
position: absolute;
display: block;
top: 29%;
left: 50%;
width: 4px;
height: 4px;
margin: -4px 0 0 -4px;
background: #fff;
border-radius: 50%;
animation: mouse-scroll 2s linear infinite;
}
@keyframes mouse-scroll {
0% { opacity: 1; top: 29%; }
15% { opacity: 1; top: 50%; }
30% { opacity: 0; top: 50%; }
100% { opacity: 0; top: 29%; }
}
/* Spa Section */
#spa-section {
position: relative;
padding: 75px 0;
}
.spa-image-container {
display: relative;
max-width: 700px;
margin: 10px auto;
text-align: center;
}
.spa-image {
position: relative;
display: inline-block;
margin: 10px;
height: 280px;
width: 280px;
border-radius: 50%;
font-family: "Montserrat";
cursor: pointer;
transition: 150ms all ease-in-out;
}
.spa-image:before {
content: "";
background-color: rgba(11, 11, 11, 0.5);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
border-radius: 50%;
transition: 150ms all ease-in-out;
}
.spa-image-1 {
background: url("https://s3-media1.fl.yelpcdn.com/bphoto/AIFletB2ERrIv4CaQ1TU4A/o.jpg");
background-size: cover;
background-position: 0 0;
}
.spa-image-2 {
background: url("https://s3-media4.fl.yelpcdn.com/bphoto/n8Q5403fYZgcC4CRzKwoFA/o.jpg");
background-size: cover;
background-position: 0 -40px;
}
.spa-image-3 {
background: url("https://s3-media3.fl.yelpcdn.com/bphoto/wLBCkdzroZGrfStaUDvnfA/o.jpg");
background-size: cover;
background-position: 0 -40px;
}
.spa-image-4 {
background: url("https://s3-media3.fl.yelpcdn.com/bphoto/BDCB1TclIGoj5MJmJa5Ung/o.jpg");
background-size: cover;
background-position: 0 0;
}
.spa-image-header {
position: relative;
top: 130px;
color: #fff;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
z-index: 2;
transition: 150ms all ease-in-out;
}
.learn-more-btn {
position: relative;
top: 147px;
color: #fff;
font-weight: 400;
font-size: 18px;
text-align: center;
text-transform: uppercase;
opacity: 0;
z-index: 2;
transition: 150ms all ease-in-out;
}
.spa-image:hover:before {
background-color: rgba(0, 0, 0, 0.7);
}
.spa-image:hover .spa-image-header {
top: 118px;
}
.spa-image:hover .learn-more-btn {
opacity: 1;
top: 125px;
}
/* Philosophy Section */
#philosophy-section {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 150px 0;
background-image: url("https://images.unsplash.com/photo-1517498327491-f903e1e281cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1575&q=80");
background-size: cover;
background-position: 0 20%;
}
#philosophy-section:after {
content: "";
background-color: rgba(11, 11, 11, 0.7);
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.philosophy-container {
postion: relative;
color: #fff;
z-index: 2;
width: 500px;
padding: 25px 15px;
margin: 0 40px;
}
.philosophy-h1 {
font-family: "Poiret One";
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.philosophy-p {
font-size: 16px;
font-family: "Montserrat";
line-height: 30px;
}
/* Quote Section */
#quote-section {
display: flex;
justify-content: center;
align-items: center;
color: #071011;
}
.quote-container {
position: relative;
padding: 7em 0;
display: block;
}
.quote-title {
font: 400 1.4em "Montserrat", sans-serif;
line-height: 2em;
letter-spacing: .5px;
display: inline;
}
.quote-container h1 {
text-transform: uppercase;
}
.quote-title .quote-source {
font-size: 1em;
font-weight: 700;
display: block;
text-align: center;
}
.carousel {
}
.carousel-item{
text-align: center;
min-height: 140px;
width: 500px;
}
.carousel-indicators {
}
.carousel-indicators li {
background: #ddd;
width: 10px; height: 10px;
border-radius: 50%;
}
.carousel-indicators .active {
background: #555;
}
/* Footer Section */
#footer-section {
padding: 75px 0;
background: #708781;
}
.footer-info {
position: relative;
color: #fff;
text-align: center;
}
.footer-info-block {
position: relative;
display: inline-block;
text-align: center;
margin: 20px 10px;
width: 260px;
}
.address-header {
font: 700 24px "Comfortaa", sans-serif;
text-transform: uppercase;
text-align: center;
letter-spacing: 1px;
}
.footer-info .address-p {
}
.contact-wrapper {
margin: auto;
width: 100%;
}
.contact-icons-list {
position: relative;
list-style-type: none;
text-align: center;
font-size: 18px;
padding: 0;
}
.contact-icons-list li {
position: relative;
display: inline-block;
margin: 20px 10px;
height: 50px;
width: 50px;
line-height: 50px;
background-color: #43514d;
cursor: pointer;
color: #fff;
border-radius: 50%;
transition: all 200ms ease-in-out;
}
.contact-icons-list li:after {
content: "";
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
padding: 0;
opacity: 0;
box-shadow: 0 0 0 2px #fff;
transition: all 200ms ease-in-out;
}
.contact-icons-list:hover > *,
.contact-icons-list:focus-within > *{
opacity: 0.5;
}
.contact-icons-list:hover > *:hover,
.contact-icons-list:focus-within > :focus{
opacity: 1;
}
/*
.contact-icons-list li:hover {
background-color: #fff;
}
.contact-icons-list li:hover:after {
opacity: 1;
transform: scale(1.2);
transition-timing-function: cubic-bezier(0.3, 0.7, 0.1, 1.6);
}
.contact-icons-list li:hover .icon-span {
color: #484848;
}*/
.icon-span {
color: #fff;
}
.copyright-wrapper {
text-align: center;
}
.copyright-p {
font-size: 14px;
}
@media screen and (max-width: 991px) {
.nav-icons-list {
display: block;
}
.nav-slider {
position: relative;
top: 10vh;
}
.nav-slider a.nav-link {
position: relative;
font-size: 14px;
margin: 3px auto;
opacity: 0.2;
font-weight: 700;
/*color: #fc2161 !important;*/
}
.dropdown:hover .dropdown-content {
display: none;
}
.book-nav-link {
color: #fff !important;
top: 10px;
}
.nav-book-btn {
top: 6px;
}
}
@media screen and (max-width: 630px) {
.spa-image {
height: 200px;
width: 200px;
}
.spa-image-header {
position: relative;
top: 90px;
font-size: 14px;
}
.learn-more-btn {
position: relative;
top: 105px;
font-size: 14px;
}
.spa-image:hover .spa-image-header {
top: 84px;
}
.spa-image:hover .learn-more-btn {
top: 87px;
}
}
@media screen and (max-width: 567px) {
.jumbotron .main-title {
font-size: 9vw;
}
.book-now-btn {
margin-top: 15px;
padding: 15px 28px;
font-size: 0.9em;
}
.quote-title {
font-size: 20px;
}
#philosophy-section {
padding: 100px 0;
}
.philosophy-h1 {
font-size: 2em;
}
.philosophy-p {
font-size: 14px;
line-height: 27px;
}
}
@media screen and (max-width: 460px) {
.spa-image {
height: 150px;
width: 150px;
}
.spa-image-header {
position: relative;
top: 62px;
font-size: 12px;
}
.learn-more-btn {
position: relative;
top: 48px;
font-size: 11px;
}
.spa-image:hover .spa-image-header {
top: 62px;
}
.spa-image:hover .learn-more-btn {
opacity: 0;
}
.contact-icons-list li {
margin: 20px 5px;
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment