Clockwork Hotel & Spa

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

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
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> 

        <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>
          <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 class="nav-item">
                <a class="nav-link" href="#">Rooms</a>
              <li class="nav-item active">
                <a class="nav-link" href="#">Spa</a>
              <li class="nav-item">
                <a class="nav-link" href="#">Weddings</a>
              <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
	<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="" type="video/mp4"><source src="" type="video/mp4"></video>

/*Downloaded from */

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 */
  .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 {

/*Downloaded from */