View file File name : tell-us-more.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>Tell us more about you </title> <link rel="stylesheet" href="style.css"> </head> <body> <header class="header"> <div class="header_top"> <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_fader js-menu-close"></div> <div class="header_container"> <div class="header_logo"> <a href="#"> <img src="./assets/img/logo.svg" alt="img"> </a> </div> <nav class="header_nav"> <div class="header_close js-menu-close"> </div> <ul class="header_menu"> <li class="header_menu-item header_menu-item--active"> <a href="#"> <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.5 18.6191C14.4043 18.6191 18.4648 14.5498 18.4648 9.6543C18.4648 4.75 14.3955 0.689453 9.49121 0.689453C4.5957 0.689453 0.535156 4.75 0.535156 9.6543C0.535156 14.5498 4.60449 18.6191 9.5 18.6191ZM9.5 17.125C5.35156 17.125 2.03809 13.8027 2.03809 9.6543C2.03809 5.50586 5.34277 2.18359 9.49121 2.18359C13.6396 2.18359 16.9619 5.50586 16.9707 9.6543C16.9795 13.8027 13.6484 17.125 9.5 17.125ZM9.49121 5.67285C9.96582 5.67285 10.3525 5.27734 10.3525 4.81152C10.3525 4.32812 9.96582 3.9502 9.49121 3.9502C9.02539 3.9502 8.62988 4.32812 8.62988 4.81152C8.62988 5.27734 9.02539 5.67285 9.49121 5.67285ZM12.0225 6.45508C12.5059 6.45508 12.8838 6.05957 12.8838 5.58496C12.8838 5.11035 12.5059 4.71484 12.0225 4.71484C11.5479 4.71484 11.1611 5.11035 11.1611 5.58496C11.1611 6.05957 11.5479 6.45508 12.0225 6.45508ZM6.8457 6.45508C7.3291 6.45508 7.70703 6.05957 7.70703 5.58496C7.70703 5.11035 7.3291 4.72363 6.8457 4.72363C6.37109 4.72363 5.98438 5.11035 5.98438 5.58496C5.98438 6.05957 6.37109 6.45508 6.8457 6.45508ZM5.11426 8.30957C5.59766 8.30957 5.97559 7.92285 5.97559 7.44824C5.97559 6.96484 5.59766 6.57812 5.11426 6.57812C4.63965 6.57812 4.25293 6.96484 4.25293 7.44824C4.25293 7.92285 4.63965 8.30957 5.11426 8.30957ZM13.7539 8.31836C14.2373 8.31836 14.6152 7.93164 14.6152 7.45703C14.6152 6.97363 14.2373 6.58691 13.7539 6.58691C13.2793 6.58691 12.8926 6.97363 12.8926 7.45703C12.8926 7.93164 13.2793 8.31836 13.7539 8.31836ZM9.49121 14.998C10.2734 14.998 10.8887 14.374 10.8887 13.5918C10.8887 13.0293 10.5547 12.5459 10.0713 12.3262V8.21289C10.0713 7.87891 9.80762 7.61523 9.49121 7.61523C9.18359 7.61523 8.91992 7.87891 8.91992 8.21289V12.3262C8.42773 12.5459 8.09375 13.0293 8.09375 13.5918C8.09375 14.374 8.71777 14.998 9.49121 14.998Z" fill="#0D1E41" /> </svg> Dashboard </a> </li> <li class="header_menu-item"> <a href="#"> <svg width="15" height="20" viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2.83301 19.0762H12.167C13.9863 19.0762 14.8916 18.1533 14.8916 16.3252V8.34473C14.8916 7.21094 14.7598 6.71875 14.0566 5.99805L9.21387 1.06738C8.5459 0.381836 7.99219 0.232422 7.00781 0.232422H2.83301C1.02246 0.232422 0.108398 1.16406 0.108398 2.99219V16.3252C0.108398 18.1621 1.01367 19.0762 2.83301 19.0762ZM2.89453 17.6611C1.98926 17.6611 1.52344 17.1777 1.52344 16.2988V3.01855C1.52344 2.14844 1.98926 1.64746 2.90332 1.64746H6.81445V6.75391C6.81445 7.86133 7.36816 8.40625 8.4668 8.40625H13.4766V16.2988C13.4766 17.1777 13.0107 17.6611 12.0967 17.6611H2.89453ZM8.625 7.0791C8.27344 7.0791 8.1416 6.93848 8.1416 6.58691V1.91992L13.2041 7.0791H8.625ZM8.16797 15.8945V12.7041L8.11523 11.2715L8.8623 12.0449L9.65332 12.8535C9.77637 12.9854 9.95215 13.0557 10.1279 13.0557C10.4795 13.0557 10.7432 12.8008 10.7432 12.4492C10.7432 12.2471 10.6641 12.0977 10.5234 11.9746L7.99219 9.64551C7.80762 9.47852 7.66699 9.41699 7.5 9.41699C7.33301 9.41699 7.19238 9.47852 7.00781 9.64551L4.47656 11.9746C4.33594 12.0977 4.25684 12.2471 4.25684 12.4492C4.25684 12.8008 4.51172 13.0557 4.87207 13.0557C5.03906 13.0557 5.22363 12.9854 5.34668 12.8535L6.1377 12.0449L6.88477 11.2715L6.83203 12.7041V15.8945C6.83203 16.2549 7.13965 16.5449 7.5 16.5449C7.86035 16.5449 8.16797 16.2549 8.16797 15.8945Z" fill="#344159" /> </svg> KYC Details </a> </li> <li class="header_menu-item"> <a href="#"> <svg width="21" height="19" viewBox="0 0 21 19" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4.34766 18.9443C5.53418 18.9443 7.95996 17.749 9.74414 16.4834C15.8701 16.6504 20.4668 13.126 20.4668 8.52051C20.4668 4.09961 16.0371 0.53125 10.5 0.53125C4.96289 0.53125 0.533203 4.09961 0.533203 8.52051C0.533203 11.4033 2.37891 13.9609 5.15625 15.2441C4.76074 16.0176 4.02246 17.0547 3.62695 17.5732C3.16113 18.1797 3.44238 18.9443 4.34766 18.9443ZM5.27051 17.4854C5.2002 17.5117 5.17383 17.459 5.21777 17.4062C5.70996 16.7998 6.41309 15.8857 6.71191 15.3145C6.95801 14.8662 6.89648 14.4619 6.33398 14.1982C3.57422 12.915 1.99219 10.8672 1.99219 8.52051C1.99219 4.92578 5.7627 1.99023 10.5 1.99023C15.2461 1.99023 19.0166 4.92578 19.0166 8.52051C19.0166 12.124 15.2461 15.0596 10.5 15.0596C10.3242 15.0596 10.0518 15.0508 9.7002 15.042C9.33105 15.0332 9.0498 15.1562 8.71582 15.4199C7.63477 16.2021 6.07031 17.1602 5.27051 17.4854Z" fill="#344159" /> </svg> Messages <span>1</span> </a> </li> <li class="header_menu-item"> <a href="#"> <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8.5 8.8125C10.5918 8.8125 12.2969 6.94922 12.2969 4.68164C12.2969 2.43164 10.6006 0.665039 8.5 0.665039C6.41699 0.665039 4.70312 2.4668 4.70312 4.69922C4.71191 6.95801 6.4082 8.8125 8.5 8.8125ZM8.5 7.48535C7.2168 7.48535 6.11816 6.25488 6.11816 4.69922C6.11816 3.16992 7.19922 1.99219 8.5 1.99219C9.80957 1.99219 10.8818 3.15234 10.8818 4.68164C10.8818 6.2373 9.79199 7.48535 8.5 7.48535ZM2.97168 16.9424H14.0195C15.4785 16.9424 16.1729 16.5029 16.1729 15.5361C16.1729 13.2334 13.2637 9.90234 8.5 9.90234C3.72754 9.90234 0.818359 13.2334 0.818359 15.5361C0.818359 16.5029 1.5127 16.9424 2.97168 16.9424ZM2.55859 15.6152C2.33008 15.6152 2.2334 15.5537 2.2334 15.3691C2.2334 13.9277 4.46582 11.2295 8.5 11.2295C12.5254 11.2295 14.7578 13.9277 14.7578 15.3691C14.7578 15.5537 14.6699 15.6152 14.4414 15.6152H2.55859Z" fill="#344159" /> </svg> Account Manager </a> </li> <li class="header_menu-item"> <a href="#"> <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.5 18.6191C14.4043 18.6191 18.4648 14.5498 18.4648 9.6543C18.4648 4.75 14.3955 0.689453 9.49121 0.689453C4.5957 0.689453 0.535156 4.75 0.535156 9.6543C0.535156 14.5498 4.60449 18.6191 9.5 18.6191ZM9.5 17.125C5.35156 17.125 2.03809 13.8027 2.03809 9.6543C2.03809 5.50586 5.34277 2.18359 9.49121 2.18359C13.6396 2.18359 16.9619 5.50586 16.9707 9.6543C16.9795 13.8027 13.6484 17.125 9.5 17.125ZM9.4209 6.52539C10.0625 6.52539 10.5635 6.01562 10.5635 5.38281C10.5635 4.74121 10.0625 4.23145 9.4209 4.23145C8.78809 4.23145 8.27832 4.74121 8.27832 5.38281C8.27832 6.01562 8.78809 6.52539 9.4209 6.52539ZM7.96191 14.4883H11.5391C11.8994 14.4883 12.1807 14.2334 12.1807 13.873C12.1807 13.5303 11.8994 13.2578 11.5391 13.2578H10.4492V8.78418C10.4492 8.30957 10.2119 7.99316 9.76367 7.99316H8.11133C7.75098 7.99316 7.46973 8.26562 7.46973 8.6084C7.46973 8.96875 7.75098 9.22363 8.11133 9.22363H9.05176V13.2578H7.96191C7.60156 13.2578 7.32031 13.5303 7.32031 13.873C7.32031 14.2334 7.60156 14.4883 7.96191 14.4883Z" fill="#344159" /> </svg> Funding Instructions </a> </li> </ul> </nav> <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 class="header_burger burger js-menu-open"> <span></span> <span></span> <span></span> </div> </div> </div> </header> <main> <section class="steps-form"> <div class="steps-form_fixed-btns" style="--width: 12%"> <a href="#">Back</a> <a href="#" class="btn">Continue</a> </div> <div class="steps-form_container container"> <div class="steps-form_wrapper"> <div class="steps-form_title"> <div class="steps-form_icon"> <img src="./assets/img/icons/sign-in.svg" alt="img"> </div> <h2>Tell us more about you</h2> <p> For security reasons you are required to provide three (3) security questions with answers. Keep in mind these questions </p> </div> <div class="steps-form_form"> <form action="#"> <div class="field field--label steps-form_field"> <input id="first" name="first" type="text" value="test"> <label for="first">First Name</label> </div> <div class="field field--label steps-form_field"> <input id="last" name="last" type="text"> <label for="last">First Name</label> </div> <div class="field field--label field--date steps-form_field"> <input id="date" name="last" type="date"> <label for="date">Day of birth</label> </div> <div class="field field--label field--select "> <select> <option value="1" disabled selected>Gender</option> <option value="1">Male</option> <option value="1">Famale</option> </select> </div> <div class="field field--label steps-form_field steps-form_field--full-width-onmob"> <input id="city" name="city" type="text"> <label for="city">City of birth</label> </div> <div class="field field--label field--select steps-form_field steps-form_field--full-width-onmob"> <select> <option value="1" disabled selected>Country of bith</option> <option value="1">Country of bith</option> <option value="1">Country of bith</option> <option value="1">Country of bith</option> <option value="1">Country of bith</option> <option value="1">Country of bith</option> </select> </div> <div class="field field--label field--select steps-form_field steps-form_field--full-width"> <select> <option value="1" disabled selected>Country of citizenship</option> <option value="1">Country of citizenship</option> <option value="1">Country of citizenship</option> <option value="1">Country of citizenship</option> <option value="1">Country of citizenship</option> <option value="1">Country of citizenship</option> </select> </div> <div class="field field--checkbox steps-form_field steps-form_field--full-width"> <input type="checkbox" id="checkbox" class="check-citizenship"> <label for="checkbox">I am also citizen of another country</label> </div> <div class="field field--label field--select steps-form_field steps-form_field--additional steps-form_field--full-width"> <select> <option value="1" disabled selected>Country of citizenship</option> <option value="1">Country of citizenship</option> <option value="1">Country of citizenship</option> <option value="1">Country of citizenship</option> <option value="1">Country of citizenship</option> <option value="1">Country of citizenship</option> </select> </div> <button class="btn steps-form_field steps-form_field--full-width">Continue</button> </form> </div> </div> </div> </section> </main> <script src="js/main.js"></script> </body> </html>