Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
    <link rel="stylesheet" type="text/css" media="all" href="css/main.css">
  </head>
  <body>
    <div id="wrapper">
      <header class="top-bar">
        <div class="logo-wrapper">
          <img src="https://www.google.com/images/srpr/logo11w.png" alt="Piggybank" class="logo">
        </div>
        <nav class="header-nav-wrapper">
          <ul class="header-nav-list">
            <li class="header-nav-list-item"><a class="header-nav-list-item-link"  href="/features">Features</a></li>
            <li class="header-nav-list-item"><a class="header-nav-list-item-link"  href="/blog">Blog</a></li>
            <li class="header-nav-list-item"><a class="header-nav-list-item-link"  href="/about">About</a></li>
            <li class="header-nav-list-item"><a class="header-nav-list-item-link"  href="/contact">Contact</a></li>
          </ul>
        </nav>
      </header>
      <div class="splash-image big-splash">
        <div class="video-background">
          <video autoplay muted loop>
            <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
          </video>
        </div>
        <div class="big-splash-left">
          <h1>Here is some text hi</h1>
          <p>
            More and more text would go here describing the app
          </p>
          <form>
            <input type="email" name="email" placeholder="you@youremail.com">
            <button type="button" name="submit">Sign up</button>
          </form>
        </div>
        <div class="big-splash-right">
          <img src="images/iphone6plus.png">
        </div>
      </div>      
      <footer>
       FOOTER STUFF
    
      </footer>
    </div>
  </body>
</html>
​
 
body {
  margin: 0;
  padding: 0;
  font-family: "gotham rounded", helvetica, sans-serif;
}
​
nav ul {
  list-style: none;
}
​
.top-bar {
  display: flex;
  height: 85px;
  position: absolute;
  width: 100%;
}
​
.top-bar .logo {
  width: 240px;
  margin: 20px;
}
​
.top-bar .logo-wrapper {
  flex-grow: 1;
}
​
.header-nav-wrapper {
  flex-shrink: 0;
}
​
.header-nav-list {
  display: flex;
  margin: 0;
  height: 85px;
}
​
.header-nav-list-item {
  align-self: center;
  flex-shrink: 0;
}
​
.header-nav-list-item-link {
  padding: 0 15px;
  color: #554F4E;
  text-decoration: none;
}
​
.big-splash {
  color: #fff;
  font-size: 1.2em;
  padding: 80px 20px 0;
  display: flex;
  height: 505px;
  overflow: hidden;
  outline: 5px solid red;
}
​
.big-splash-left {
  flex-shrink: 1;
}
​
.big-splash-right {
  padding: 50px 10px 0 50px;
  flex-shrink: 0;
}
​
.big-splash .video-background {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
  width: 100%;
}
​
.big-splash video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(some.jpg) no-repeat;
background-size: cover;
}
​
​
​
 
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers