Clockwork Hotel & Spa

In this example below you will see how to do a Clockwork Hotel & Spa with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by craig-potter, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright craig-potter ©
  • HTML
  • CSS
  • JavaScript
    <div class="container">
    <header class="masthead">
        <div class="d-flex justify-content-between m-2">
         <h3 class="">Clockwork Hotel & Spa</h3>
          <a href="" class="btn btn-primary">Book Online</a> 
        </div>

        <nav class="navbar navbar-expand-md navbar-light bg-light rounded mb-3">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav text-md-center nav-justified w-100">
              <li class="nav-item">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Rooms</a>
              </li>
              <li class="nav-item active">
                <a class="nav-link" href="#">Spa</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Weddings</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
              </li>
              
            </ul>
          </div>
        </nav>
      </header>
	<div class="row">
		<div class="col">
			<div id="flixel" style="" class="flixel-embed landscape ">
				<div id="flixel-player">         
					<video id="flixel-video" autoplay="" loop="" preload="" playsinline="" poster="" class="video landscape desktop"><source src="https://cdn.flixel.com/flixel/fckn77mdiihpvkx6406h.tablet.mp4?v=1" type="video/mp4"><source src="https://cdn.flixel.com/flixel/fckn77mdiihpvkx6406h.phone.mp4?v=1" type="video/mp4"></video>
				</div>
			</div>
		</div>
	</div>
</div>

/*Downloaded from https://www.codeseek.co/craig-potter/clockwork-hotel-andamp-spa-JOKMYo */
    #flixel{
  width:100%;
  position:relative;
  video{
    
  }
}

body {
  padding-top: 20px;
}

.footer {
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: 40px;
  border-top: 1px solid #eee;
}

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  background-color: transparent;
}
.jumbotron .btn {
  padding: 14px 24px;
  font-size: 21px;
}

.navbar {
  background-image: linear-gradient(to bottom, #f7f7f7 0%,#eee 100%);
  border: 1px solid #e5e5e5;
}

@media (min-width: 768px) {
  .navbar-nav {
    display: -ms-flexbox;
    display: flex;
  }

  .navbar-nav .nav-item {
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
  }
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
  /* Remove the padding we set earlier */
  .masthead,
  .marketing,
  .footer {
    padding-right: 0;
    padding-left: 0;
  }
}

video { 
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translate(-50%, -50%);
}

h3 {
  color:white;
}



/*Downloaded from https://www.codeseek.co/craig-potter/clockwork-hotel-andamp-spa-JOKMYo */
    

Comments