Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Pricing page</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <section>
        <header class="header">
            <div class="header__top">
                <a href="mailto:sales@somecompany.com" class="header__link">sales@somecompany.com</a>
                <a href="tel:+18008753230" class="header__link">+1-800-875-3230</a>
            </div>

            <nav class="header__nav">
                <ul class="menu">
                    <li class="menu__item"><a href="#">Home</a></li>
                    <li class="menu__item"><a href="#">Features</a></li>

                    <li class="menu__item menu__item--active">
                        <a href="#">Pricing & Plans</a>
                    </li>

                    <li class="menu__item"><a href="#">Company</a></li>
                    <li class="menu__item"><a href="#">Support</a></li>
                </ul>
            </nav>
        </header>

        <section class="l-wrapper">
            <section class="widget widget--primary">
                <header class="widget__header">
                    <div class="widget__number">1</div>
                    <h3>Choose your plan</h3>
                </header>

                <div class="widget__content">
                    <div class="l-col-3">
                        <div class="l-col-3__item">
                            <section class="widget widget--soft-blue">
                                <header class="widget__header">
                                    <h3>Individual
                                        <small>for 1 computer</small>
                                    </h3>
                                </header>

                                <div class="widget__content">
                                    <ul>
                                        <li>Per month - <strong class="price price--blue">&euro; 39.90</strong></li>
                                        <li>Per year - <strong class="price price--blue">&euro; 119.50</strong></li>
                                    </ul>
                                </div>
                            </section>
                        </div>

                        <div class="l-col-3__item">
                            <section class="widget widget--green">
                                <header class="widget__header">
                                    <h3>Family
                                        <small>for 5 computer</small>
                                    </h3>
                                </header>

                                <div class="widget__content">
                                    <ul>
                                        <li>Per month - <strong class="price price--green">&euro; 85.90</strong></li>
                                        <li>Per year - <strong class="price price--green">&euro; 200</strong></li>
                                    </ul>

                                    <p>Select the plan that fits your needs. Prices for every budget.</p>
                                </div>
                            </section>
                        </div>

                        <div class="l-col-3__item">
                            <section class="widget widget--primary">
                                <header class="widget__header">
                                    <h3>Business
                                        <small>for 10 computer</small>
                                    </h3>
                                </header>

                                <div class="widget__content">
                                    <ul>
                                        <li>Per month - <strong class="price price--primary">&euro; 143.90</strong></li>
                                        <li>Per year - <strong class="price price--primary">&euro; 750</strong></li>
                                    </ul>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </section>

            <div class="l-col-2">
                <section class="l-col-2__item widget widget--primary">
                    <header class="widget__header">
                        <div class="widget__number">2</div>
                        <h3>Personal Information</h3>
                    </header>

                    <form class="widget__form">
                        <input required type="text" placeholder="First name">
                        <input required type="text" placeholder="Last name">
                        <input required type="text" placeholder="Address">
                        <input required type="text" placeholder="City">
                        <input required type="text" placeholder="State">
                        <input required type="text" placeholder="Zip code">
                        <input required type="tel" placeholder="Phone">
                        <input type="tel" placeholder="Additional phone">
                        <input placeholder="Company">
                    </form>
                </section>
                <section class="l-col-2__item">
                    <section class="widget widget--primary">
                        <header class="widget__header">
                            <div class="widget__number">3</div>
                            <h3>Your Account</h3>
                        </header>

                        <form class="widget__form">
                            <input required type="email" placeholder="Email address">
                            <input required type="email" placeholder="Confirm email address">
                            <input required type="password" placeholder="Password">
                            <input required type="password" placeholder="Confirm password">
                        </form>
                    </section>

                    <section class="widget widget--primary">
                        <header class="widget__header">
                            <div class="widget__number">4</div>
                            <h3>Payment Information</h3>
                        </header>
                        <form class="widget__form">
                            <input required type="text" placeholder="Credit card number">
                            <input required type="text" placeholder="CVV">
                            <div class="widget__total-amount">
                                <p>Total: <strong class="price price--primary">&euro; 143.90</strong></p>
                                <button class="widget__btn">Purchase</button>
                            </div>
                        </form>
                    </section>
                </section>
            </div>
        </section>

        <section class="info-block">
            <section class="l-wrapper">
                <div class="l-col-3">
                    <div class="l-col-3__item">
                        <section class="info-block__item info-block__item--price">
                            <h4 class="info-block__title">
                                Plans & Pricing
                            </h4>
                            <p class="info-block__description">
                                Select the plan that fits your needs. Prices for
                                every budget
                            </p>
                            <button class="info-block__btn">
                                Get Started
                            </button>
                        </section>
                    </div>

                    <div class="l-col-3__item">
                        <section class="info-block__item info-block__item--contact">
                            <h4 class="info-block__title">
                                Need more info? Call Us
                            </h4>
                            <p class="info-block__description">
                                Jur expect customer service team is always
                                ready to answer your questions
                            </p>
                            <button class="info-block__btn">
                                Get Started
                            </button>
                        </section>
                    </div>

                    <div class="l-col-3__item">
                        <section class="info-block__item info-block__item--trial-version">
                            <h4 class="info-block__title">
                                Start Free Trial Version
                            </h4>
                            <p class="info-block__description">
                                Learn more about SecureBackup with 30-day
                                trial download to better protect.
                            </p>
                            <button class="info-block__btn">
                                Get Started
                            </button>
                        </section>
                    </div>
                </div>
            </section>
        </section>

        <footer class="footer">
            <span class="footer__text">Copyright 2016 SomeCompany, Inc.</span>
        </footer>
    </section>
</body>
</html>