xxxxxxxxxx1
<!--Double navigation-->2
<body class="white-skin">3
<header>4
<!-- Sidebar navigation -->5
<mdb-side-nav #sidenav class="sn-bg-1 fixed" [fixed]="true">6
7
<mdb-navbar-brand>8
<!-- Logo -->9
<li>10
<div class="logo-wrapper waves-light">11
<a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>12
</div>13
</li>14
<!--/. Logo -->15
</mdb-navbar-brand>16
17
<links>18
<!--Social-->19
20
<!--/Social-->21
<!--Search Form-->22
<li>23
<form class="search-form" role="search">24
<div class="form-group md-form mt-0 pt-1" mdbWavesEffect>25
<input type="text" class="form-control" placeholder="Search">26
</div>27
</form>28
</li>29
<!--/.Search Form-->30
<!-- Side navigation links -->31
<li>32
<ul class="collapsible collapsible-accordion">33
<mdb-accordion [multiple]="false" aria-multiselectable="false">34
35
<!-- Collapsible link -->36
<mdb-accordion-item>37
<mdb-accordion-item-head mdbWavesEffect><mdb-icon fas icon="chevron-right"></mdb-icon> Collapsible menu38
</mdb-accordion-item-head>39
<mdb-accordion-item-body>40
<ul>41
<li><a href="#" mdbWavesEffect>Link 1</a></li>42
<li><a href="#" mdbWavesEffect>Link 2</a></li>43
</ul>44
</mdb-accordion-item-body>45
</mdb-accordion-item>46
47
<!-- Simple link -->48
<mdb-accordion-item class="no-collase">49
<mdb-accordion-item-head mdbWavesEffect><mdb-icon far icon="hand-pointer"></mdb-icon> Simple link50
</mdb-accordion-item-head>51
<mdb-accordion-item-body></mdb-accordion-item-body>52
</mdb-accordion-item>53
54
<!-- Collapsible link -->55
<mdb-accordion-item>56
<mdb-accordion-item-head mdbWavesEffect><mdb-icon far icon="eye"></mdb-icon> Collapsible menu 257
</mdb-accordion-item-head>58
<mdb-accordion-item-body>59
<ul>60
<li><a href="#" mdbWavesEffect>Link 1</a></li>61
<li><a href="#" mdbWavesEffect>Link 2</a></li>62
</ul>63
</mdb-accordion-item-body>64
</mdb-accordion-item>65
66
<!-- Simple link -->67
<mdb-accordion-item class="no-collase">68
<mdb-accordion-item-head mdbWavesEffect><mdb-icon far icon="gem"></mdb-icon> Simple link 2</mdb-accordion-item-head>69
<mdb-accordion-item-body></mdb-accordion-item-body>70
</mdb-accordion-item>71
72
</mdb-accordion>73
</ul>74
</li>75
<!--/. Side navigation links -->76
</links>77
<div class="sidenav-bg mask-strong"></div>78
</mdb-side-nav>79
<!--/. Sidebar navigation -->80
81
<!-- Navbar -->82
<mdb-navbar SideClass="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav"83
[containerInside]="false">84
85
<navlinks class="navbar-container">86
<!-- SideNav slide-out button -->87
<div class="float-left">88
<a (click)="sidenav.show()" class="button-collapse"><mdb-icon fas icon="bars"></mdb-icon></a>89
</div>90
<!--/. SideNav slide-out button -->91
</navlinks>92
93
<mdb-navbar-brand>94
<!-- Breadcrumb-->95
<div class="breadcrumbs breadcrumb-dn mr-auto">96
<p>Moniesta Admin</p>97
</div>98
<!--/. Breadcrumb-->99
</mdb-navbar-brand>100
101
<navlinks>102
<ul class="nav navbar-nav nav-flex-icons ml-auto ie-double-nav">103
<li class="nav-item">104
<a class="nav-link waves-light" mdbWavesEffect><mdb-icon fas icon="envelope"></mdb-icon> <span105
class="clearfix d-none d-sm-inline-block">Contact</span></a>106
</li>107
<li class="nav-item">108
<a class="nav-link waves-light" mdbWavesEffect><mdb-icon far icon="comments"></mdb-icon> <span109
class="clearfix d-none d-sm-inline-block">Support</span></a>110
</li>111
<li class="nav-item">112
<a class="nav-link waves-light" mdbWavesEffect><mdb-icon fas icon="user"></mdb-icon> <span113
class="clearfix d-none d-sm-inline-block">Account</span></a>114
</li>115
<li class="nav-item dropdown btn-group" dropdown>116
<a dropdownToggle type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect>117
Dropdown118
</a>119
<div class="dropdown-menu dropdown-primary dropdown-menu-right" role="menu">120
<a class="dropdown-item" href="#">Action</a>121
<a class="dropdown-item" href="#">Another action</a>122
<a class="dropdown-item" href="#">Something else here</a>123
</div>124
</li>125
</ul>126
</navlinks>127
</mdb-navbar>128
129
</header>130
131
</body>132
133
<!--Card starts here-->134
135
<div class="container-fluid" style="padding-top: 100px">136
137
<section class="mt-lg-5">138
139
<!--Grid row-->140
<div class="row flex-row flex-fill">141
142
<!--Grid column-->143
<div class="col-xl-4 col-md-6 mb-r">144
145
<!--Card-->146
<mdb-card cascade="true" class="cascading-admin-card">147
148
<!--Card Data-->149
<div class="admin-up">150
<mdb-icon far icon="money-bill-alt" class="primary-color"></mdb-icon>151
<div class="data">152
<p>SALES</p>153
<h4><strong>$2000</strong></h4>154
</div>155
</div>156
<!--/.Card Data-->157
158
<!--Card content-->159
<mdb-card-body>160
<div class="progress">161
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25"162
aria-valuemin="0" aria-valuemax="100"></div>163
</div>164
<!--Text-->165
<p class="card-text">Better than last week (25%)</p>166
</mdb-card-body>167
<!--/.Card content-->168
169
</mdb-card>170
<!--/.Card-->171
172
</div>173
<!--Grid column-->174
175
<!--Grid column-->176
<div class="col-xl-4 col-md-6 mb-r">177
178
<!--Card-->179
<mdb-card cascade="true" class="cascading-admin-card">180
181
<!--Card Data-->182
<div class="admin-up">183
<mdb-icon fas icon="chart-line" class="warning-color"></mdb-icon>184
<div class="data">185
<p>SUBSCRIPTIONS</p>186
<h4><strong>200</strong></h4>187
</div>188
</div>189
<!--/.Card Data-->190
191
<!--Card content-->192
<mdb-card-body>193
<div class="progress">194
<div class="progress-bar bg grey darken-2" role="progressbar" style="width: 25%"195
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>196
</div>197
<!--Text-->198
<p class="card-text">Worse than last week (25%)</p>199
</mdb-card-body>200
<!--/.Card content-->201
202
</mdb-card>203
<!--/.Card-->204
205
</div>206
<!--Grid column-->207
208
<!--Grid column-->209
<div class="col-xl-4 col-md-6 mb-r">210
211
<!--Card-->212
<mdb-card cascade="true" class="cascading-admin-card">213
214
<!--Card Data-->215
<div class="admin-up">216
<mdb-icon fas icon="chart-pie" class="light-blue lighten-1"></mdb-icon>217
<div class="data">218
<p>TRAFFIC</p>219
<h4><strong>20000</strong></h4>220
</div>221
</div>222
<!--/.Card Data-->223
224
<!--Card content-->225
<mdb-card-body>226
<div class="progress">227
<div class="progress-bar grey darken-2" role="progressbar" style="width: 75%" aria-valuenow="75"228
aria-valuemin="0" aria-valuemax="100"></div>229
</div>230
<!--Text-->231
<p class="card-text">Worse than last week (75%)</p>232
</mdb-card-body>233
<!--/.Card content-->234
235
</mdb-card>236
<!--/.Card-->237
238
</div>239
<!--Grid column-->240
241
</div>242
243
</section>244
245
</div>246
xxxxxxxxxx1
.cascading-admin-card {2
margin-top: 20px;3
4
}5
.cascading-admin-card .admin-up {6
margin-left: 4%;7
margin-right: 4%;8
margin-top: -20px;9
padding-top: 5px;10
}11
.cascading-admin-card .admin-up mdb-icon {12
padding: 1.7rem;13
font-size: 2rem;14
color: #fff;15
text-align: left;16
margin-right: 1rem;17
border-radius: 3px;18
box-shadow: 0 2px 9px 0 rgba(0,0,0,.2),0 2px 13px 0 rgba(0,0,0,.19); }19
.cascading-admin-card .admin-up .data {20
float: right;21
margin-top: 2rem;22
text-align: right; }23
.cascading-admin-card .admin-up .data p {24
color: #999999;25
font-size: 12px; }26
27
.classic-admin-card .card-body {28
color: #fff;29
margin-bottom: 0;30
padding: 0.9rem; }31
.classic-admin-card .card-body p {32
font-size: 13px;33
opacity: 0.7;34
margin-bottom: 0; }35
.classic-admin-card .card-body h4 {36
margin-top: 10px; }37
.classic-admin-card .card-body .float-right .fa {38
font-size: 3rem;39
opacity: 0.5; }40
41
.classic-admin-card .progress {42
margin: 0;43
opacity: 0.7; }44
45
46
.cascading-admin-card .admin-up .fa {47
-webkit-box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2), 0 2px 13px 0 rgba(0, 0, 0, 0.19);48
box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2), 0 2px 13px 0 rgba(0, 0, 0, 0.19);49
}50
xxxxxxxxxx1
import { Component } from '@angular/core';2
3
@Component({4
selector: 'app-root',5
templateUrl: './app.component.html',6
styleUrls: ['./app.component.scss']7
})8
export class AppComponent {9
title = 'app';10
}11
Console errors: 0