API tools faq
paste
Advertisement
Affbuddy

Hero Style Landing Page Video/Optin

Affbuddy
Aug 12th, 2016
130
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.17 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <!--
  4. Author: Affbuddy
  5. Site: https://affbuddy.com/
  6. Youtube: https://www.youtube.com/watch?v=pk9Iejdquik
  7. -->
  8. <head>
  9. <meta charset="UTF-8">
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11. <title>Hero Style Landing Page Video/Optin </title>
  12. <link rel="shortcut icon" href="https://s3.amazonaws.com/affbuddy/favicon.png">
  13. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  14. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
  15. <link href='https://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>
  16. <link href='https://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
  17. <style>
  18.     body {
  19.         padding-top:30px;
  20.         color: #000;
  21.     }
  22.     a {
  23.         color: #0044CC;
  24.     }
  25.     h1, .h1 {
  26.         font-size: 50px;
  27.     }
  28.     h1, .h1, h2, .h2, h3, .h3, .btn {
  29.         font-family: 'Bangers', cursive;
  30.     }
  31.     .container {
  32.         max-width: 1024px;
  33.     }
  34.     .mark {
  35.         background-color: #fff000;
  36.         font-family: 'Permanent Marker', cursive;
  37.         font-size: 20px;
  38.     }
  39.     .btn {
  40.         font-size: 30px;
  41.     }
  42.     .btn-primary {
  43.       background-image: -webkit-linear-gradient(top, #ff0000 0%, #cc0000 100%);
  44.       background-image:      -o-linear-gradient(top, #ff0000 0%, #cc0000 100%);
  45.       background-image: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#cc0000));
  46.       background-image:         linear-gradient(to bottom, #ff0000 0%, #cc0000 100%);
  47.       background-repeat: repeat-x;
  48.       border-color: #cc0000;
  49.     }
  50.     .btn-primary:hover,
  51.     .btn-primary:focus {
  52.       background-color: #cc0000;
  53.       background-position: 0 -15px;
  54.     }
  55.     .btn-primary:active,
  56.     .btn-primary.active {
  57.       background-color: #cc0000 !important;
  58.       border-color: #cc0000 !important;
  59.     }
  60. </style>
  61.  
  62. <!--[if IE]>
  63.    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
  64.    <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
  65. <![endif]-->
  66. </head>
  67.  
  68. <body>
  69.  
  70.  
  71. <div class="container">
  72.  
  73.     <h1 class="text-center">Make Killer Sales Pages With Bootstrap</h1>
  74.     <h2 class="text-center">Mobile Ready, Fast Loading Landing Pages That Convert!</h2>
  75.     <br />
  76.     <br />
  77.     <div class="col-sm-7">
  78.         <!-- 16:9 aspect ratio -->
  79.         <div class="embed-responsive embed-responsive-16by9">
  80.           <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/pk9Iejdquik?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1"></iframe>
  81.         </div>
  82.     </div>
  83.  
  84.     <div class="col-sm-5">
  85.         <p class="text-center mark">Sign up for FREE Course! $67 Value</p>
  86.         <p>Presented by: <a href="https://affbuddy.com/">www.affbuddy.com</a></p>
  87.         <form action="" method="post">
  88.           <div class="form-group">
  89.             <input type="text" class="form-control input-lg" id="name" placeholder="Name">
  90.           </div>
  91.           <div class="form-group">
  92.             <input type="email" class="form-control input-lg" id="email" placeholder="Email">
  93.           </div>
  94.           <div class="checkbox">
  95.             <label>
  96.               <input type="checkbox"> We promise not to spam you too much :)
  97.             </label>
  98.           </div>
  99.           <button type="submit" class="btn btn-primary btn-lg btn-block">Yes! Show Me</button>
  100.         </form>
  101.     </div>
  102.     <!-- Usage as a class -->
  103.     <div class="clearfix"></div>
  104.     <br />
  105.     <div class="col-sm-8 col-sm-offset-2">
  106.     <h3>What Raving Fans of Affbuddy are saying!</h3>
  107.     <blockquote>
  108.     <p>Affbuddy is the best way to learn Bootstrap bar none. I can't beleive how easy it was to make awesome Bootstrap sales pages. My sales are up 67%! Thank you Affbuddy.</p>
  109.     <footer>Mr. Sales Person</footer>
  110.     </blockquote>
  111.     </div>
  112. </div>
  113.  
  114. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  115. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  116. </body>
  117. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!