Struggling with achieving my visual mockup while designing a webpage:
Check out my web design mockup
Currently focusing on section 2 of the page. Using Angular 5, Bootstrap 3, and ngx-bootstrap library to integrate Bootstrap components into Angular. Here is a snippet of my code so far:
<div class="row"> <!-- Schedule / Budget Navbar-->
<tabset type="pills">
<tab heading="Schedule"></tab>
<tab heading="Budget"></tab>
</tabset>
</div>
<div class="row"> <!-- Schedule / Budget Content -->
<!-- <app-schedule/> OR <app-budget> -->
</div>
Custom CSS style:
.nav-pills > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
zoom:1; /* hasLayout ie7 trigger */
}
.nav-pills {
text-align: center;
}
.nav-pills > li > a{
color: black!important;
}
.nav-pills > li > a.active{
background-color: #424242!important;
color: white!important;
}
Looking to replicate the button design as per the mockup. Also aiming for section 2 to dynamically show content based on whether budget or schedule is selected. Considering creating individual components for each functionality and swapping between <app-budget/> and <app-schedule/>, attaching them respectively.