SHARE
TWEET

Untitled

a guest Oct 16th, 2017 407 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Pricing page</title>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7. </head>
  8. <body>
  9.     <section>
  10.         <header class="header">
  11.             <div class="header__top">
  12.                 <a href="mailto:sales@somecompany.com" class="header__link">sales@somecompany.com</a>
  13.                 <a href="tel:+18008753230" class="header__link">+1-800-875-3230</a>
  14.             </div>
  15.  
  16.             <nav class="header__nav">
  17.                 <ul class="menu">
  18.                     <li class="menu__item"><a href="#">Home</a></li>
  19.                     <li class="menu__item"><a href="#">Features</a></li>
  20.  
  21.                     <li class="menu__item menu__item--active">
  22.                         <a href="#">Pricing & Plans</a>
  23.                     </li>
  24.  
  25.                     <li class="menu__item"><a href="#">Company</a></li>
  26.                     <li class="menu__item"><a href="#">Support</a></li>
  27.                 </ul>
  28.             </nav>
  29.         </header>
  30.  
  31.         <section class="l-wrapper">
  32.             <section class="widget widget--primary">
  33.                 <header class="widget__header">
  34.                     <div class="widget__number">1</div>
  35.                     <h3>Choose your plan</h3>
  36.                 </header>
  37.  
  38.                 <div class="widget__content">
  39.                     <div class="l-col-3">
  40.                         <div class="l-col-3__item">
  41.                             <section class="widget widget--soft-blue">
  42.                                 <header class="widget__header">
  43.                                     <h3>Individual
  44.                                         <small>for 1 computer</small>
  45.                                     </h3>
  46.                                 </header>
  47.  
  48.                                 <div class="widget__content">
  49.                                     <ul>
  50.                                         <li>Per month - <strong class="price price--blue">&euro; 39.90</strong></li>
  51.                                         <li>Per year - <strong class="price price--blue">&euro; 119.50</strong></li>
  52.                                     </ul>
  53.                                 </div>
  54.                             </section>
  55.                         </div>
  56.  
  57.                         <div class="l-col-3__item">
  58.                             <section class="widget widget--green">
  59.                                 <header class="widget__header">
  60.                                     <h3>Family
  61.                                         <small>for 5 computer</small>
  62.                                     </h3>
  63.                                 </header>
  64.  
  65.                                 <div class="widget__content">
  66.                                     <ul>
  67.                                         <li>Per month - <strong class="price price--green">&euro; 85.90</strong></li>
  68.                                         <li>Per year - <strong class="price price--green">&euro; 200</strong></li>
  69.                                     </ul>
  70.  
  71.                                     <p>Select the plan that fits your needs. Prices for every budget.</p>
  72.                                 </div>
  73.                             </section>
  74.                         </div>
  75.  
  76.                         <div class="l-col-3__item">
  77.                             <section class="widget widget--primary">
  78.                                 <header class="widget__header">
  79.                                     <h3>Business
  80.                                         <small>for 10 computer</small>
  81.                                     </h3>
  82.                                 </header>
  83.  
  84.                                 <div class="widget__content">
  85.                                     <ul>
  86.                                         <li>Per month - <strong class="price price--primary">&euro; 143.90</strong></li>
  87.                                         <li>Per year - <strong class="price price--primary">&euro; 750</strong></li>
  88.                                     </ul>
  89.                                 </div>
  90.                             </section>
  91.                         </div>
  92.                     </div>
  93.                 </div>
  94.             </section>
  95.  
  96.             <div class="l-col-2">
  97.                 <section class="l-col-2__item widget widget--primary">
  98.                     <header class="widget__header">
  99.                         <div class="widget__number">2</div>
  100.                         <h3>Personal Information</h3>
  101.                     </header>
  102.  
  103.                     <form class="widget__form">
  104.                         <input required type="text" placeholder="First name">
  105.                         <input required type="text" placeholder="Last name">
  106.                         <input required type="text" placeholder="Address">
  107.                         <input required type="text" placeholder="City">
  108.                         <input required type="text" placeholder="State">
  109.                         <input required type="text" placeholder="Zip code">
  110.                         <input required type="tel" placeholder="Phone">
  111.                         <input type="tel" placeholder="Additional phone">
  112.                         <input placeholder="Company">
  113.                     </form>
  114.                 </section>
  115.                 <section class="l-col-2__item">
  116.                     <section class="widget widget--primary">
  117.                         <header class="widget__header">
  118.                             <div class="widget__number">3</div>
  119.                             <h3>Your Account</h3>
  120.                         </header>
  121.  
  122.                         <form class="widget__form">
  123.                             <input required type="email" placeholder="Email address">
  124.                             <input required type="email" placeholder="Confirm email address">
  125.                             <input required type="password" placeholder="Password">
  126.                             <input required type="password" placeholder="Confirm password">
  127.                         </form>
  128.                     </section>
  129.  
  130.                     <section class="widget widget--primary">
  131.                         <header class="widget__header">
  132.                             <div class="widget__number">4</div>
  133.                             <h3>Payment Information</h3>
  134.                         </header>
  135.                         <form class="widget__form">
  136.                             <input required type="text" placeholder="Credit card number">
  137.                             <input required type="text" placeholder="CVV">
  138.                             <div class="widget__total-amount">
  139.                                 <p>Total: <strong class="price price--primary">&euro; 143.90</strong></p>
  140.                                 <button class="widget__btn">Purchase</button>
  141.                             </div>
  142.                         </form>
  143.                     </section>
  144.                 </section>
  145.             </div>
  146.         </section>
  147.  
  148.         <section class="info-block">
  149.             <section class="l-wrapper">
  150.                 <div class="l-col-3">
  151.                     <div class="l-col-3__item">
  152.                         <section class="info-block__item info-block__item--price">
  153.                             <h4 class="info-block__title">
  154.                                 Plans & Pricing
  155.                             </h4>
  156.                             <p class="info-block__description">
  157.                                 Select the plan that fits your needs. Prices for
  158.                                 every budget
  159.                             </p>
  160.                             <button class="info-block__btn">
  161.                                 Get Started
  162.                             </button>
  163.                         </section>
  164.                     </div>
  165.  
  166.                     <div class="l-col-3__item">
  167.                         <section class="info-block__item info-block__item--contact">
  168.                             <h4 class="info-block__title">
  169.                                 Need more info? Call Us
  170.                             </h4>
  171.                             <p class="info-block__description">
  172.                                 Jur expect customer service team is always
  173.                                 ready to answer your questions
  174.                             </p>
  175.                             <button class="info-block__btn">
  176.                                 Get Started
  177.                             </button>
  178.                         </section>
  179.                     </div>
  180.  
  181.                     <div class="l-col-3__item">
  182.                         <section class="info-block__item info-block__item--trial-version">
  183.                             <h4 class="info-block__title">
  184.                                 Start Free Trial Version
  185.                             </h4>
  186.                             <p class="info-block__description">
  187.                                 Learn more about SecureBackup with 30-day
  188.                                 trial download to better protect.
  189.                             </p>
  190.                             <button class="info-block__btn">
  191.                                 Get Started
  192.                             </button>
  193.                         </section>
  194.                     </div>
  195.                 </div>
  196.             </section>
  197.         </section>
  198.      
  199.         <footer class="footer">
  200.             <span class="footer__text">Copyright 2016 SomeCompany, Inc.</span>
  201.         </footer>
  202.     </section>
  203. </body>
  204. </html>
RAW Paste Data
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
 
Top