Display Loan Calculator with SVG icon

by Tan

HTML

<div class="cal_head_contain">
<div class="cal_head_item">Loan Calculator - 123 - 456 - 789</div>
<div class="cal_head_item">

<div class="cal_head_nav"><div>somethin 1</div><div>something 2</div></div>

<svg width="60" height="60" version="1.1"  xmlns="http://www.w3.org/2000/svg">

<defs>
<symbol id="bit" width="60" height="60" viewBox="0 0 210.08 210.08" preserveAspectRatio="xMaxYMid">
 <path d="m0 0c27.625 0 48.521 26.964 60.357 48.212 40.735 75.959 59.998 137.16 124.25 137.02l25.394-0.12825v24.898h-210z" fill="#fff" fill-rule="evenodd" stroke-width=".26458"/>
</symbol>
</defs>

<use href="#bit" x="0" y="0" width="60" height="100%" />

</svg>

<div class="cal_head_panel"></div>

</div>
</div>

<br><br>




<div class="cal_foot_contain">

<div class="cal_foot_item">

<div class="cal_foot_nav"><div>Stamp 1</div><div>Something 2</div><div>Something 3</div></div>

<svg width="60" height="60" version="1.1"  xmlns="http://www.w3.org/2000/svg">

<defs>
<symbol id="bit2" width="60" height="60" viewBox="0 0 210.08 210.08" preserveAspectRatio="xMaxYMid">
<path d="m210 210c-27.625 0-48.521-26.964-60.357-48.212-40.735-75.959-59.998-137.16-124.25-137.02l-25.394 0.12825v-24.898h210z" fill="#fff" fill-rule="evenodd" stroke-width=".26458"/>
</symbol>
</defs>

<use href="#bit2" x="0" y="0" width="60" height="100%" />

</svg>

<div class="cal_foot_panel"></div>

</div>

<div class="cal_foot_item"><button class="submitButton" type="submit" form="myForm">Reset</button><button class="submitButton" type="submit" form="myForm">Submit Button</button></div>

</div>

<br><br>

<div class="stripe"></div>

<br><br>

<span class="plain_link"><a href="#">Plain Link</a></span>

<button class="button2link" type="button">Button Link</button>

<button class="submitButton" type="submit" form="myForm">Submit Button</button>

<span class="link2button"><a href="#">Link Button</a></span>

CSS

body {background-color:#3c69e6;font-family:Arial;}

.cal_head_contain {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: flex-start;
    }

.cal_head_item:nth-child(1) {box-sizing: border-box;
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
    height:60px;
    background-color:#ffffff;
    line-height:60px;
    border-radius:7px 0 0 7px;
    padding:0 0 0 15px;
    }

.cal_head_item:nth-child(2) {    height:60px;
    order: 0;
    flex: 1 1 auto;
    align-self: auto;
    position:relative;
    overflow:hidden;
    }

.cal_head_nav {position:absolute;top:7px;right:0px;width:100%;height:46px;
background: repeating-linear-gradient(
    -55deg,
    #00000079,
    #00000079 4px,
    #00000060 4px,
    #00000060 8px
  );border-radius:0 7px 0 0;color:#ffffff;box-sizing: border-box;padding:0 15px 0 50px;
      display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: center;}

.cal_head_item:nth-child(2) svg {position:absolute;
    }

.cal_head_panel {position:absolute;bottom:0px;right:0px;width:100%;height:7px;background-color:#ffffff;border-radius:0 0 50px 0;}





.cal_foot_contain {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: flex-start;
    }

.cal_foot_item:nth-child(1) {    height:60px;
    order: 0;
    flex: 1 1 auto;
    align-self: auto;
    position:relative;
    overflow:hidden;
    }

.cal_foot_item:nth-child(2) { box-sizing: border-box;
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
    height:60px;
    background-color:#ffffff;
    border-radius: 0 7px 7px 0;
    padding:0 10px 0 0;
        display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content:...