Edit file File name : select-product.html Content :<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Select your product </title> <link rel="stylesheet" href="style.css"> </head> <body> <header class="header"> <div class="header_top js-menu-close"> <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6.10742 12.834C6.93945 12.834 7.7207 12.6758 8.45117 12.3594C9.18164 12.043 9.82617 11.6055 10.3848 11.0469C10.9434 10.4883 11.3809 9.84375 11.6973 9.11328C12.0137 8.37891 12.1719 7.59766 12.1719 6.76953C12.1719 5.94141 12.0137 5.16211 11.6973 4.43164C11.3809 3.70117 10.9434 3.05664 10.3848 2.49805C9.82617 1.93945 9.17969 1.50195 8.44531 1.18555C7.71484 0.869141 6.93555 0.710938 6.10742 0.710938C5.27539 0.710938 4.49414 0.869141 3.76367 1.18555C3.0332 1.50195 2.38867 1.93945 1.83008 2.49805C1.27539 3.05664 0.839844 3.70117 0.523438 4.43164C0.207031 5.16211 0.0488281 5.94141 0.0488281 6.76953C0.0488281 7.59766 0.207031 8.37891 0.523438 9.11328C0.839844 9.84375 1.27734 10.4883 1.83594 11.0469C2.39453 11.6055 3.03906 12.043 3.76953 12.3594C4.5 12.6758 5.2793 12.834 6.10742 12.834ZM6.10742 11.6152C5.43555 11.6152 4.80664 11.4902 4.2207 11.2402C3.63867 10.9902 3.125 10.6445 2.67969 10.2031C2.23828 9.75781 1.89258 9.24219 1.64258 8.65625C1.39258 8.07031 1.26758 7.44141 1.26758 6.76953C1.26758 6.09766 1.39258 5.46875 1.64258 4.88281C1.89258 4.29688 2.23828 3.7832 2.67969 3.3418C3.12109 2.89648 3.63477 2.54883 4.2207 2.29883C4.80664 2.04883 5.43555 1.92383 6.10742 1.92383C6.7793 1.92383 7.40625 2.04883 7.98828 2.29883C8.57422 2.54883 9.08984 2.89648 9.53516 3.3418C9.98047 3.7832 10.3281 4.29688 10.5781 4.88281C10.832 5.46875 10.959 6.09766 10.959 6.76953C10.959 7.44141 10.834 8.07031 10.584 8.65625C10.334 9.24219 9.98633 9.75781 9.54102 10.2031C9.09961 10.6445 8.58594 10.9902 8 11.2402C7.41406 11.4902 6.7832 11.6152 6.10742 11.6152ZM5.07617 9.95117H7.44922C7.58203 9.95117 7.69336 9.9082 7.7832 9.82227C7.87695 9.73633 7.92383 9.62891 7.92383 9.5C7.92383 9.37109 7.87695 9.26367 7.7832 9.17773C7.69336 9.08789 7.58203 9.04297 7.44922 9.04297H6.80469V6.2832C6.80469 6.10742 6.75977 5.9668 6.66992 5.86133C6.58398 5.75195 6.45703 5.69727 6.28906 5.69727H5.17578C5.04297 5.69727 4.93164 5.74219 4.8418 5.83203C4.75195 5.91797 4.70703 6.02539 4.70703 6.1543C4.70703 6.2832 4.75195 6.39062 4.8418 6.47656C4.93164 6.5625 5.04297 6.60547 5.17578 6.60547H5.77344V9.04297H5.07617C4.93945 9.04297 4.82617 9.08789 4.73633 9.17773C4.64648 9.26367 4.60156 9.37109 4.60156 9.5C4.60156 9.62891 4.64648 9.73633 4.73633 9.82227C4.82617 9.9082 4.93945 9.95117 5.07617 9.95117ZM6.07227 4.78906C6.29883 4.78906 6.48828 4.71094 6.64062 4.55469C6.79688 4.39844 6.875 4.21094 6.875 3.99219C6.875 3.76562 6.79688 3.57422 6.64062 3.41797C6.48828 3.26172 6.29883 3.18359 6.07227 3.18359C5.85352 3.18359 5.66602 3.26172 5.50977 3.41797C5.35352 3.57422 5.27539 3.76562 5.27539 3.99219C5.27539 4.21094 5.35352 4.39844 5.50977 4.55469C5.66602 4.71094 5.85352 4.78906 6.07227 4.78906Z" fill="#6A788D" /> </svg> CFDs are comple instuments and ome with a high risk of losing money rapidly due leveerage. The vast Majority of retail client account lose money when trading in CFDs. You should considr wahether you undeerstand how CFDDs work and can afforrd tto take thee high risk of losing you mony </div> <div class="header_container"> <div class="header_logo"> <a href="#"> <img src="./assets/img/logo.svg" alt="img"> </a> </div> <div class="header_in-account"> <span>Hello Charlton</span> <img src="./assets/img/icons/in-account.svg" alt="img"> <div class="header_dropdown"> <div class="header_dropdown-click"> <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 6.25586C6.16016 6.25195 6.30664 6.2207 6.43945 6.16211C6.57227 6.09961 6.70312 6.00391 6.83203 5.875L10.875 1.74414C11.0625 1.55273 11.1562 1.32422 11.1562 1.05859C11.1562 0.871094 11.1113 0.701172 11.0215 0.548828C10.9316 0.396484 10.8105 0.275391 10.6582 0.185547C10.5098 0.0917969 10.3438 0.0449219 10.1602 0.0449219C9.88281 0.0449219 9.63672 0.154297 9.42188 0.373047L5.80078 4.12891H6.2168L2.57812 0.373047C2.36328 0.154297 2.11719 0.0449219 1.83984 0.0449219C1.65625 0.0449219 1.48828 0.0917969 1.33594 0.185547C1.1875 0.275391 1.06836 0.396484 0.978516 0.548828C0.888672 0.701172 0.84375 0.871094 0.84375 1.05859C0.84375 1.19141 0.867188 1.31445 0.914062 1.42773C0.960938 1.54102 1.03125 1.64648 1.125 1.74414L5.17383 5.875C5.42383 6.12891 5.69922 6.25586 6 6.25586Z" fill="#6A788D" /> </svg> </div> <div class="header_dropdown-content"> <a href="#">Log out</a> </div> </div> </div> </div> </header> <main> <section class="select-cards"> <div class="select-cards_fixed"> <div class="container"> <form method="post" action="/application/select-type" class="select-cards_choose card2"> <p> Sterling Trading Tech </p> <input type="hidden" name="account_type" value="Helsdt"> <input type="hidden" name="active_trading_type" value="Helsdt"> <button class="btn">Choose</button> </form> <div class="select-cards_choose card1"> <p> Standard CAPitAll Account </p> <a href="#" class="btn">Choose</a> </div> <div class="select-cards_choose card3"> <p> Standart Dastrader Account </p> <a href="#" class="btn">Choose</a> </div> </div> </div> <div class="select-cards_container container"> <div class="select-cards_title"> <h2>Select your product</h2> </div> <div class="select-cards_wrapper"> <div class="select-cards_card" data-card="card1"> <div class="select-cards_popular"> <img src="./assets/img/icons/shiny-star-svgrepo-com.svg" alt=""> Popular </div> <div class="select-cards_top"> <div class="select-cards_logo"> <img src="./assets/img/icons/capitall.png" alt="img"> </div> <a href="#">Details</a> </div> <p> Dynamiic platform designed for acttive traders and professionals who work with the rapidly moving electronic markers </p> <h5>Powered by CAPITAL</h5> <div class="select-cards_tabs"> <div class="select-cards_tabsBtns"> <div class="select-cards_tabs-btn select-cards_tabs-btn--active" data-tab="tab1"> Standard </div> <div class="select-cards_tabs-btn" data-tab="tab2"> VIP </div> </div> <div class="select-cards_tabsWrapper"> <div class="select-cards_tabs-content select-cards_tabs-content--active tab1"> <div class="select-cards_dropdown"> <div class="select-cards_dropdown-head"> <div class="select-cards_dropdown-open"> <p>Standard Account</p> <img src="./assets/img/icons/select.svg" alt="img"> </div> <a href="#" class="btn">Choose</a> </div> <div class="select-cards_dropdown-content"> <p> Karen Barker-Gentile started her career as a network engineer in Yonkers, New York. But with an interest in online banking and stock trading </p> <h6>Details</h6> <ul> <li>Attract new clients</li> <li>Increase engagement</li> <li>Faster onboarding process</li> <li>Fully Customizable</li> <li>FREE 7-day trial</li> <li>Affordability</li> <li>Specific to your market</li> </ul> </div> </div> </div> <div class="select-cards_tabs-content tab2"> <div class="select-cards_dropdown"> <div class="select-cards_dropdown-head"> <div class="select-cards_dropdown-open"> <p>VIP CAP it ALL Account</p> <img src="./assets/img/icons/select.svg" alt="img"> </div> <a href="#" class="btn">Choose</a> </div> <div class="select-cards_dropdown-content"> <p> Karen Barker-Gentile started her career as a network engineer in Yonkers, New York. But with an interest in online banking and stock trading </p> <h6>Details</h6> <ul> <li>Attract new clients</li> <li>Increase engagement</li> <li>Faster onboarding process</li> <li>Fully Customizable</li> <li>FREE 7-day trial</li> <li>Affordability</li> <li>Specific to your market</li> </ul> </div> </div> </div> </div> </div> </div> <div class="select-cards_card" data-card="card2"> <div class="select-cards_top"> <div class="select-cards_logo"> <img src="./assets/img/icons/sterling.svg" alt="img"> </div> <a href="#">Details</a> </div> <p> Dynamiic platform designed for acttive traders and professionals who work with the rapidly moving electronic markers </p> <h5>Trader Elite Pro - Powered by Sterling</h5> <div class="select-cards_tabs"> <div class="select-cards_tabsWrapper"> <div class="select-cards_tabs-content select-cards_tabs-content--active tab1"> <div class="select-cards_dropdown"> <div class="select-cards_dropdown-head"> <div class="select-cards_dropdown-open"> <p>Standard Account</p> <img src="./assets/img/icons/select.svg" alt="img"> </div> <a href="#" class="btn">Choose</a> </div> <div class="select-cards_dropdown-content"> <p> Karen Barker-Gentile started her career as a network engineer in Yonkers, New York. But with an interest in online banking and stock trading </p> <h6>Details</h6> <ul> <li>Attract new clients</li> <li>Increase engagement</li> <li>Faster onboarding process</li> <li>Fully Customizable</li> <li>FREE 7-day trial</li> <li>Affordability</li> </ul> </div> </div> </div> </div> </div> </div> <div class="select-cards_card" data-card="card3"> <div class="select-cards_top"> <div class="select-cards_logo"> <img src="./assets/img/icons/das.png" alt="img"> </div> <a href="#">Details</a> </div> <p> Dynamiic platform designed for acttive traders and professionals who work with the rapidly moving electronic markers </p> <h5>Trader Elite Pro - Powered by DAS</h5> <div class="select-cards_tabs"> <div class="select-cards_tabsWrapper"> <div class="select-cards_tabs-content select-cards_tabs-content--active tab1"> <div class="select-cards_dropdown"> <div class="select-cards_dropdown-head"> <div class="select-cards_dropdown-open"> <p>Standard Account</p> <img src="./assets/img/icons/select.svg" alt="img"> </div> <a href="#" class="btn">Choose</a> </div> <div class="select-cards_dropdown-content"> <p> Karen Barker-Gentile started her career as a network engineer in Yonkers, New York. But with an interest in online banking and stock trading </p> <h6>Details</h6> <ul> <li>Attract new clients</li> <li>Fully Customizable</li> <li>FREE 7-day trial</li> <li>Affordability</li> <li>Specific to your market</li> <li>Advanced software development</li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </section> </main> <script src="js/main.js"></script> </body> </html>Save