Clockwork Bar

In this example below you will see how to do a Clockwork Bar 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 ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Clockwork Bar </title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
    <header class="masthead">
        <div class="d-flex justify-content-between m-2">
         <h3 class="">Clockwork Hotel &amp; Bar</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="#">Our Bar</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="">
		<div class="">
			<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/700gg4ultwdeg5v3p3r5.tablet.mp4?v=1" type="video/mp4">
						<source src="https://cdn.flixel.com/flixel/700gg4ultwdeg5v3p3r5.phone.mp4?v=1" type="video/mp4">
					</video>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="container">
  <div class="row">
    <div class="col">
      <h1>Welcome to Clockwork</h1>
    </div>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/craig-potter/clockwork-bar-EbPJYV */
#flixel {
  width: 100%;
  position: relative;
  height: 100%;
}

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: flex;
  }

  .navbar-nav .nav-item {
    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 {
  max-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
}

.nudge {
  margin-top: 10vh;
}

#flixel-player {
  position: relative;
}

Comments