questionnaire-10.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smart Matrimony | Half Your Deen. All Of Our Purpose.</title>
    <link rel="shortcut icon" href="./favicon.png" sizes="16x16" type="image/x-icon">
    <link rel="icon" href="./favicon.png" sizes="16x16" type="image/x-icon">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="fonts/Smartmatrimony_TT_Commons_+_Futura.css">
    <link rel="stylesheet" href="css/main.css">
</head>

<body class="questionnaire">
    <header class="header header--questionnaire">
        <div class="container">
            <div class="row align-items-center justify-content-between">
                <div class="col-auto header__main">
                    <a href="#" class="d-md-none logo logo--small">
                        <img src="images/logo-small.svg" alt="Logo" class="logo__img">
                    </a>
                    <a href="#" class="d-none d-md-block logo">
                        <img src="images/logo.svg" alt="Logo" class="logo__img">
                    </a>
                </div>
            </div>
        </div>
    </header>

    <main class="questionnaire__main">
        <div class="questionnaire__main-bg" style="background-image: url('images/questionnaire/9.jpeg');">&nbsp;</div>
        <div class="container questionnaire__main-content">
            <div class="row u-margin-bottom-small-3 u-margin-md-bottom-med-3">
                <div class="col-12">
                    <div class="d-md-flex align-items-center justify-content-between">
                        <h2 class="u-color-white">QUESTIONNAIRE</h2>
                        <a href="#" class="d-none d-md-inline-flex btn btn--icon btn--border btn--border-white btn--round btn--padding u-color-white u-font-main-dem"><img src="images/i-close.svg" alt="Close" class="btn__icon"> Save my progress and close</a>
                    </div>
                </div>
            </div>
            <div class="row u-margin-md-bottom-big-1">
                <div class="col-12 col-md-8 offset-md-4 col-lg-9 offset-lg-3">
                    <div class="progressbar">
                        <div class="progressbar__header">
                            <p class="progressbar__label u-color-white u-font-main-dem">Your progress</p>
                            <a href="#" class="d-md-none btn btn--border btn--border-white btn--padding-smaller btn--round u-font-main-dem"><span class="paragraph--smaller">Save and close</span></a>
                        </div>
                        <img src="images/progressbar/desktop/10.png" alt="Progress" class="d-none d-md-block progressbar__img">
                        <img src="images/progressbar/mobile/10.png" alt="Progress" class="d-md-none progressbar__img">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-md-4 col-lg-3">
                    <p class="u-color-white u-font-main-dem d-inline-flex align-items-center justify-content-start u-lh-1 u-margin-bottom-smaller"><img src="images/i-info-primary-lgt.svg" alt="Information" class="u-margin-right-smallest"> Important Information</p>
                    <p class="u-color-white u-margin-bottom-smaller">Before you can see any matches you must first complete our personality questionnaire. This questionnaire takes between <span class="u-color-primary-lgt u-font-main-dem">30 minutes – 1 hour</span>, your progress can be saved so you can carry on in your own time.</p>
                    <p class="u-color-white u-font-main-dem u-margin-bottom-smaller">Pick an answer between 1 and 5…</p>
                    <ul class="questionnaire__legend">
                        <li class="questionnaire__legend-item">
                            <div class="questionnaire__legend-item-label">1</div>
                            <p class="u-color-white u-font-main-dem">Strongly Agree</p>
                        </li>
                        <li class="questionnaire__legend-item">
                            <div class="questionnaire__legend-item-label">2</div>
                            <p class="u-color-white u-font-main-dem">Partially Agree</p>
                        </li>
                        <li class="questionnaire__legend-item">
                            <div class="questionnaire__legend-item-label">3</div>
                            <p class="u-color-white u-font-main-dem">Neither agree nor disagree</p>
                        </li>
                        <li class="questionnaire__legend-item">
                            <div class="questionnaire__legend-item-label">4</div>
                            <p class="u-color-white u-font-main-dem">Partially Disagree</p>
                        </li>
                        <li class="questionnaire__legend-item">
                            <div class="questionnaire__legend-item-label">5</div>
                            <p class="u-color-white u-font-main-dem">Strongly Disagree</p>
                        </li>
                    </ul>
                </div>
                <div class="col-12 col-md-8 col-lg-9">
                    <div class="row">
                        <div class="col-12">
                            <div class="questionnaire__list">
                                <div class="questionnaire__item">
                                    <p class="questionnaire__item-question">I feel comfortable around people</p>
                                    <form action="#" class="questionnaire__item-scale">
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-1" id="question-1-1" checked>
                                            <label for="question-1-1">1</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-1" id="question-1-2">
                                            <label for="question-1-2">2</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-1" id="question-1-3">
                                            <label for="question-1-3">3</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-1" id="question-1-4">
                                            <label for="question-1-4">4</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-1" id="question-1-5">
                                            <label for="question-1-5">5</label>
                                        </div>
                                    </form>
                                </div>
                                <div class="questionnaire__item">
                                    <p class="questionnaire__item-question">I feel little concern for others</p>
                                    <form action="#" class="questionnaire__item-scale">
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-2" id="question-2-1" checked>
                                            <label for="question-2-1">1</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-2" id="question-2-2">
                                            <label for="question-2-2">2</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-2" id="question-2-3">
                                            <label for="question-2-3">3</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-2" id="question-2-4">
                                            <label for="question-2-4">4</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-2" id="question-2-5">
                                            <label for="question-2-5">5</label>
                                        </div>
                                    </form>
                                </div>
                                <div class="questionnaire__item">
                                    <p class="questionnaire__item-question">I am always prepared</p>
                                    <form action="#" class="questionnaire__item-scale">
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-3" id="question-3-1" checked>
                                            <label for="question-3-1">1</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-3" id="question-3-2">
                                            <label for="question-3-2">2</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-3" id="question-3-3">
                                            <label for="question-3-3">3</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-3" id="question-3-4">
                                            <label for="question-3-4">4</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-3" id="question-3-5">
                                            <label for="question-3-5">5</label>
                                        </div>
                                    </form>
                                </div>
                                <div class="questionnaire__item">
                                    <p class="questionnaire__item-question">I get stressed out easily</p>
                                    <form action="#" class="questionnaire__item-scale">
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-4" id="question-4-1" checked>
                                            <label for="question-4-1">1</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-4" id="question-4-2">
                                            <label for="question-4-2">2</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-4" id="question-4-3">
                                            <label for="question-4-3">3</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-4" id="question-4-4">
                                            <label for="question-4-4">4</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-4" id="question-4-5">
                                            <label for="question-4-5">5</label>
                                        </div>
                                    </form>
                                </div>
                                <div class="questionnaire__item">
                                    <p class="questionnaire__item-question">I have a rich vocabulary</p>
                                    <form action="#" class="questionnaire__item-scale">
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-5" id="question-5-1" checked>
                                            <label for="question-5-1">1</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-5" id="question-5-2">
                                            <label for="question-5-2">2</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-5" id="question-5-3">
                                            <label for="question-5-3">3</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-5" id="question-5-4">
                                            <label for="question-5-4">4</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-5" id="question-5-5">
                                            <label for="question-5-5">5</label>
                                        </div>
                                    </form>
                                </div>
                                <div class="questionnaire__item">
                                    <p class="questionnaire__item-question">I am a bad loser</p>
                                    <form action="#" class="questionnaire__item-scale">
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-6" id="question-6-1" checked>
                                            <label for="question-6-1">1</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-6" id="question-6-2">
                                            <label for="question-6-2">2</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-6" id="question-6-3">
                                            <label for="question-6-3">3</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-6" id="question-6-4">
                                            <label for="question-6-4">4</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-6" id="question-6-5">
                                            <label for="question-6-5">5</label>
                                        </div>
                                    </form>
                                </div>
                                <div class="questionnaire__item">
                                    <p class="questionnaire__item-question">I would like to live for a while in a different country</p>
                                    <form action="#" class="questionnaire__item-scale">
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-7" id="question-7-1" checked>
                                            <label for="question-7-1">1</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-7" id="question-7-2">
                                            <label for="question-7-2">2</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-7" id="question-7-3">
                                            <label for="question-7-3">3</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-7" id="question-7-4">
                                            <label for="question-7-4">4</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-7" id="question-7-5">
                                            <label for="question-7-5">5</label>
                                        </div>
                                    </form>
                                </div>
                                <div class="questionnaire__item">
                                    <p class="questionnaire__item-question">I am open about myself to others</p>
                                    <form action="#" class="questionnaire__item-scale">
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-8" id="question-8-1" checked>
                                            <label for="question-8-1">1</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-8" id="question-8-2">
                                            <label for="question-8-2">2</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-8" id="question-8-3">
                                            <label for="question-8-3">3</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-8" id="question-8-4">
                                            <label for="question-8-4">4</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-8" id="question-8-5">
                                            <label for="question-8-5">5</label>
                                        </div>
                                    </form>
                                </div>
                                <div class="questionnaire__item">
                                    <p class="questionnaire__item-question">I am not willing to pay more to have name brand clothing</p>
                                    <form action="#" class="questionnaire__item-scale">
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-9" id="question-9-1" checked>
                                            <label for="question-9-1">1</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-9" id="question-9-2">
                                            <label for="question-9-2">2</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-9" id="question-9-3">
                                            <label for="question-9-3">3</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-9" id="question-9-4">
                                            <label for="question-9-4">4</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-9" id="question-9-5">
                                            <label for="question-9-5">5</label>
                                        </div>
                                    </form>
                                </div>
                                <div class="questionnaire__item">
                                    <p class="questionnaire__item-question">I prefer to be quiet</p>
                                    <form action="#" class="questionnaire__item-scale">
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-10" id="question-10-1" checked>
                                            <label for="question-10-1">1</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-10" id="question-10-2">
                                            <label for="question-10-2">2</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-10" id="question-10-3">
                                            <label for="question-10-3">3</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-10" id="question-10-4">
                                            <label for="question-10-4">4</label>
                                        </div>
                                        <div class="questionnaire__item-scale-group">
                                            <input type="radio" name="question-10" id="question-10-5">
                                            <label for="question-10-5">5</label>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 u-align-md-inline-right">
                            <a href="#" class="btn btn--full btn--padding btn--bg-primary questionnaire__btn">SAVE AND CONTINUE</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="d-md-none footer">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-10 offset-sm-1 col-md-3 offset-md-0 footer__logo">
                    <a href="#" class="logo logo--white"><img src="images/logo.svg" alt="Logo" class="logo__img"></a>
                </div>
                <nav class="col-12 col-sm-10 offset-sm-1 col-md-5 offset-md-0 offset-md-1 footer__nav">
                    <p class="u-color-white u-font-main-bld">Smart Matrimony</p>
                    <div class="row">
                        <div class="col-7">
                            <p class="u-color-white">First Floor<br>85 Great Portland Street<br>London<br>W1W 7LT</p>
                        </div>
                        <div class="col-5 col-sm-4 offset-sm-1">
                            <ul class="footer__menu">
                                <li class="footer__menu-item"><a href="#" class="footer__menu-link">Legal Stuff</a></li>
                                <li class="footer__menu-item"><a href="#" class="footer__menu-link">FAQ's</a></li>
                                <li class="footer__menu-item"><a href="#" class="footer__menu-link">Contact</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
                <div class="col-12 col-sm-10 offset-sm-1 col-md-2 offset-md-0 offset-md-1 footer__social">
                    <ul class="social align-items-center justify-content-start">
                        <li class="social__item"><a href="#" class="social__link"><i class="fab fa-facebook social__icon"></i></a></li>
                        <li class="social__item"><a href="#" class="social__link"><i class="fab fa-twitter social__icon"></i></a></li>
                        <li class="social__item"><a href="#" class="social__link"><i class="fab fa-instagram social__icon"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

    <div class="d-md-none subfooter">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-10 offset-sm-1 col-md-12 offset-md-0">
                    <p class="paragraph--big u-color-gray">Smartmatrimony © 2018</p>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script src="js/app-dist.js"></script>

</body>

</html>