xxxxxxxxxx1
<header>2
3
<!--Navbar -->4
<nav class="navbar navbar-expand-lg navbar-dark gradient-multiline z-depth-0 fixed-top">5
<a class="navbar-brand" href="#">6
<img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" alt="mdb logo">7
</a>8
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-4"9
aria-controls="navbarSupportedContent-4" aria-expanded="false" aria-label="Toggle navigation">10
<span class="navbar-toggler-icon"></span>11
</button>12
<div class="collapse navbar-collapse" id="navbarSupportedContent-4">13
<ul class="navbar-nav ml-auto">14
<li class="nav-item">15
<a class="nav-link" href="#">16
<i class="fab fa-pinterest-p"></i>17
</a>18
</li>19
<li class="nav-item">20
<a class="nav-link" href="#">21
<i class="fab fa-dribbble"></i>22
</a>23
</li>24
<li class="nav-item">25
<a class="nav-link" href="#">26
<i class="fab fa-facebook-f"></i>27
</a>28
</li>29
<li class="nav-item">30
<a class="nav-link" href="#">31
<i class="fab fa-instagram"></i>32
</a>33
</li>34
<li class="nav-item dropdown">35
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-4" data-toggle="dropdown" aria-haspopup="true"36
aria-expanded="false">37
<i class="fas fa-user"></i>38
</a>39
<div class="dropdown-menu dropdown-menu-right dropdown-info" aria-labelledby="navbarDropdownMenuLink-4">40
<a class="dropdown-item" href="#">My account</a>41
<a class="dropdown-item" href="#">Log out</a>42
</div>43
</li>44
</ul>45
</div>46
</nav>47
<!--/.Navbar -->48
49
<!-- Intro -->50
<section class="view">51
52
<div class="row">53
54
<div class="col-md-6">55
56
<div class="d-flex flex-column justify-content-center align-items-center h-100">57
<h1 class="heading display-3">Material Design for Bootstrap</h1>58
<h4 class="subheading font-weight-bold">World's most popular framework for building responsive, mobile-first websites and apps</h4>59
<div class="mr-auto">60
<button type="button" class="btn btn-lily btn-margin btn-rounded">Get started <i class="fas fa-caret-right ml-3"></i></button>61
</div>62
</div>63
64
</div>65
66
<div class="col-md-6">67
68
<div class="view">69
<img src="https://images.pexels.com/photos/325045/pexels-photo-325045.jpeg" class="img-fluid" alt="smaple image">70
<div class="mask flex-center hm-gradient">71
</div>72
</div>73
74
</div>75
76
</div>77
78
</section>79
<!-- Intro -->80
81
</header>82
83
<main>84
85
<div class="container">86
87
<!-- Section: Features v.3 -->88
<section class="features my-5">89
90
<!-- Section heading -->91
<h2 class="title h1-responsive font-weight-bold text-center">Why is it so great?</h2>92
<!-- Section description -->93
<h6 class="subtitle font-weight-bold text-center">Lorem ipsum dolor sit amet, consectetur94
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim95
veniam.</h6>96
97
<!-- Grid row -->98
<div class="row">99
100
<!-- Grid column -->101
<div class="col-lg-5 text-center text-lg-left">102
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/screens-section.jpg" alt="Sample image">103
</div>104
<!-- Grid column -->105
106
<!-- Grid column -->107
<div class="col-lg-7">108
109
<!-- Grid row -->110
<div class="row mb-3">111
112
<!-- Grid column -->113
<div class="col-1">114
<i class="fas fa-share fa-lg"></i>115
</div>116
<!-- Grid column -->117
118
<!-- Grid column -->119
<div class="col-xl-10 col-md-11 col-10">120
<h5 class="font-weight-bold mb-3">Safety</h5>121
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,122
quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p>123
</div>124
<!-- Grid column -->125
126
</div>127
<!-- Grid row -->128
129
<!-- Grid row -->130
<div class="row mb-3">131
132
<!-- Grid column -->133
<div class="col-1">134
<i class="fas fa-share fa-lg"></i>135
</div>136
<!-- Grid column -->137
138
<!-- Grid column -->139
<div class="col-xl-10 col-md-11 col-10">140
<h5 class="font-weight-bold mb-3">Technology</h5>141
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,142
quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p>143
</div>144
<!-- Grid column -->145
146
</div>147
<!-- Grid row -->148
149
<!--Grid row-->150
<div class="row">151
152
<!-- Grid column -->153
<div class="col-1">154
<i class="fas fa-share fa-lg"></i>155
</div>156
<!-- Grid column -->157
158
<!-- Grid column -->159
<div class="col-xl-10 col-md-11 col-10">160
<h5 class="font-weight-bold mb-3">Finance</h5>161
<p class="grey-text mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima162
veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p>163
</div>164
<!-- Grid column -->165
166
</div>167
<!--Grid row-->168
169
</div>170
<!--Grid column-->171
172
</div>173
<!-- Grid row -->174
175
</section>176
<!-- Section: Features v.3 -->177
178
<section class="form-section">179
180
<!-- Section heading -->181
<h2 class="title h1-responsive font-weight-bold text-center">Register on our website</h2>182
183
<!-- Default form login -->184
<form class="text-center">185
186
<div class="md-form md-outline mx-auto" style="max-width: 20rem;">187
<input type="text" id="example0" class="form-control">188
<label for="example0">Name</label>189
</div>190
191
<div class="md-form md-outline mx-auto" style="max-width: 20rem;">192
<input type="email" id="example1" class="form-control">193
<label for="example1">E-mail</label>194
</div>195
196
<div class="md-form md-outline mx-auto" style="max-width: 20rem;">197
<input type="password" id="example2" class="form-control">198
<label for="example2">Password</label>199
</div>200
201
<!-- Sign in button -->202
<button type="button" class="btn btn-lily btn-rounded mt-2">Sign up <i class="fas fa-thumbs-up ml-2"></i></button>203
204
</form>205
<!-- Default form login -->206
207
</section>208
209
</div>210
211
</main>212
213
<!-- Footer -->214
<footer class="page-footer font-small">215
216
<!-- Footer Elements -->217
<div class="container">218
219
<!-- Grid row-->220
<div class="row">221
222
<!-- Grid column -->223
<div class="col-md-12 py-5">224
<div class="mb-5 flex-center">225
226
<!-- Facebook -->227
<a class="fb-ic">228
<i class="fab fa-facebook-f fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>229
</a>230
<!-- Twitter -->231
<a class="tw-ic">232
<i class="fab fa-twitter fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>233
</a>234
<!-- Google +-->235
<a class="gplus-ic">236
<i class="fab fa-google-plus-g fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>237
</a>238
<!--Linkedin -->239
<a class="li-ic">240
<i class="fab fa-linkedin-in fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>241
</a>242
<!--Instagram-->243
<a class="ins-ic">244
<i class="fab fa-instagram fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>245
</a>246
<!--Pinterest-->247
<a class="pin-ic">248
<i class="fab fa-pinterest fa-lg white-text fa-2x"> </i>249
</a>250
</div>251
</div>252
<!-- Grid column -->253
254
</div>255
<!-- Grid row-->256
257
</div>258
<!-- Footer Elements -->259
260
<!-- Copyright -->261
<div class="footer-copyright text-center py-3">© 2018 Copyright:262
<a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>263
</div>264
<!-- Copyright -->265
266
</footer>267
<!-- Footer -->268
xxxxxxxxxx1
.navbar {2
background-color: transparent;3
}4
.navbar .navbar-brand img {5
height: 40px;6
margin: 10px;7
}8
.hm-gradient {9
background: linear-gradient(40deg, rgba(0,51,199,.3), rgba(209,149,249,.3));10
}11
.heading {12
margin: 0 6rem;13
font-weight: 700;14
color: #5d4267;15
}16
.subheading {17
margin: 2.5rem 6rem;18
color: #bcb2c0;19
}20
.btn.btn-margin {21
margin-left: 6rem;22
margin-top: 3rem;23
}24
.btn.btn-lily {25
background: linear-gradient(40deg, rgba(0,51,199,.7), rgba(209,149,249,.7));26
}27
.btn.btn-lily:hover {28
color: #fff;29
}30
.title {31
margin-top: 6rem;32
margin-bottom: 2rem;33
color: #5d4267;34
}35
.subtitle {36
color: #bcb2c0;37
margin-left: 20%;38
margin-right: 20%;39
margin-bottom: 6rem;40
}41
.features i {42
color: #0033c7;43
}44
.form-section .title {45
margin-bottom: 5rem;46
}47
48
49
.md-form.mat-2 input[type=text]:focus,50
.md-form.mat-2 input[type=email]:focus,51
.md-form.mat-2 input[type=password]:focus {52
border-color: #4285f4;53
box-shadow: inset 0px 0px 0px 1px #4285f4;54
}55
56
.fa-thumbs-up {57
padding-bottom: .2rem;58
}59
.form-section {60
margin-bottom: 6rem;61
}62
.page-footer {63
background-color: #eeeeee;64
}65
.page-footer a i {66
color: #5d4267 !important;67
}68
.md-outline>input[type]:-webkit-autofill:not(.browser-default):not([type="search"])+label, 69
.md-outline >input[type=date]:not(.browser-default)+label, 70
.md-outline >input[type=time]:not(.browser-default)+label {71
transform: translateY(-17px);72
transform-origin: 0 0;73
background: #fff;74
font-weight: 500;75
padding-right: 5px;76
padding-left: 5px;77
font-size: 11px;78
left: 8px;79
}80
.md-outline>input[type]:-webkit-autofill:not(.browser-default):not([type="search"])+label.active, 81
.md-outline >input[type=date]:not(.browser-default)+label.active, 82
.md-outline >input[type=time]:not(.browser-default)+label.active {83
transform: translateY(-17px);84
transform-origin: 0 0;85
}1
1
Console errors: 0