xxxxxxxxxx1
<!--Main Navigation-->2
<header>3
<style>4
#intro {5
background-image: url(https://mdbootstrap.com/img/new/fluid/city/008.jpg);6
height: 100vh;7
}8
9
/* Height for devices larger than 576px */10
@media (min-width: 992px) {11
#intro {12
margin-top: -58.59px;13
}14
}15
16
.navbar .nav-link {17
color: #fff !important;18
}19
</style>20
21
<!-- Navbar -->22
<nav class="navbar navbar-expand-lg navbar-dark d-none d-lg-block" style="z-index: 2000;">23
<div class="container-fluid">24
<!-- Navbar brand -->25
<a class="navbar-brand nav-link" target="_blank" href="https://mdbootstrap.com/docs/standard/">26
<strong>MDB</strong>27
</a>28
<button class="navbar-toggler" type="button" data-mdb-collapse-init data-mdb-target="#navbarExample01"29
aria-controls="navbarExample01" aria-expanded="false" aria-label="Toggle navigation">30
<i class="fas fa-bars"></i>31
</button>32
<div class="collapse navbar-collapse" id="navbarExample01">33
<ul class="navbar-nav me-auto mb-2 mb-lg-0">34
<li class="nav-item active">35
<a class="nav-link" aria-current="page" href="#intro">Home</a>36
</li>37
<li class="nav-item">38
<a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"39
target="_blank">Learn Bootstrap 5</a>40
</li>41
<li class="nav-item">42
<a class="nav-link" href="https://mdbootstrap.com/docs/standard/" target="_blank">Download MDB UI KIT</a>43
</li>44
</ul>45
46
<ul class="navbar-nav d-flex flex-row">47
<!-- Icons -->48
<li class="nav-item me-3 me-lg-0">49
<a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"50
target="_blank">51
<i class="fab fa-youtube"></i>52
</a>53
</li>54
<li class="nav-item me-3 me-lg-0">55
<a class="nav-link" href="https://www.facebook.com/mdbootstrap" rel="nofollow" target="_blank">56
<i class="fab fa-facebook-f"></i>57
</a>58
</li>59
<li class="nav-item me-3 me-lg-0">60
<a class="nav-link" href="https://twitter.com/MDBootstrap" rel="nofollow" target="_blank">61
<i class="fab fa-twitter"></i>62
</a>63
</li>64
<li class="nav-item me-3 me-lg-0">65
<a class="nav-link" href="https://github.com/mdbootstrap/mdb-ui-kit" rel="nofollow" target="_blank">66
<i class="fab fa-github"></i>67
</a>68
</li>69
</ul>70
</div>71
</div>72
</nav>73
<!-- Navbar -->74
75
<!-- Background image -->76
<div id="intro" class="bg-image shadow-2-strong">77
<div class="mask d-flex align-items-center h-100" style="background-color: rgba(0, 0, 0, 0.8);">78
<div class="container">79
<div class="row justify-content-center">80
<div class="col-xl-5 col-md-8">81
<form class="bg-white rounded shadow-5-strong p-5">82
<!-- Email input -->83
<div class="form-outline mb-4" data-mdb-input-init>84
<input type="email" id="form1Example1" class="form-control" />85
<label class="form-label" for="form1Example1">Email address</label>86
</div>87
88
<!-- Password input -->89
<div class="form-outline mb-4" data-mdb-input-init>90
<input type="password" id="form1Example2" class="form-control" />91
<label class="form-label" for="form1Example2">Password</label>92
</div>93
94
<!-- 2 column grid layout for inline styling -->95
<div class="row mb-4">96
<div class="col d-flex justify-content-center">97
<!-- Checkbox -->98
<div class="form-check">99
<input class="form-check-input" type="checkbox" value="" id="form1Example3" checked />100
<label class="form-check-label" for="form1Example3">101
Remember me102
</label>103
</div>104
</div>105
106
<div class="col text-center">107
<!-- Simple link -->108
<a href="#!">Forgot password?</a>109
</div>110
</div>111
112
<!-- Submit button -->113
<button type="submit" class="btn btn-primary btn-block" data-mdb-ripple-init>Sign in</button>114
</form>115
</div>116
</div>117
</div>118
</div>119
</div>120
<!-- Background image -->121
</header>122
<!--Main Navigation-->123
124
<!--Footer-->125
<footer class="bg-light text-lg-start">126
<div class="py-4 text-center">127
<a role="button" class="btn btn-primary btn-lg m-2" data-mdb-ripple-init128
href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow" target="_blank">129
Learn Bootstrap 5130
</a>131
<a role="button" class="btn btn-primary btn-lg m-2" data-mdb-ripple-init href="https://mdbootstrap.com/docs/standard/" target="_blank">132
Download MDB UI KIT133
</a>134
</div>135
136
<hr class="m-0" />137
138
<div class="text-center py-4 align-items-center">139
<p>Follow MDB on social media</p>140
<a href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" class="btn btn-primary m-1" role="button" data-mdb-ripple-init141
rel="nofollow" target="_blank">142
<i class="fab fa-youtube"></i>143
</a>144
<a href="https://www.facebook.com/mdbootstrap" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init145
target="_blank">146
<i class="fab fa-facebook-f"></i>147
</a>148
<a href="https://twitter.com/MDBootstrap" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init149
target="_blank">150
<i class="fab fa-twitter"></i>151
</a>152
<a href="https://github.com/mdbootstrap/mdb-ui-kit" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init153
target="_blank">154
<i class="fab fa-github"></i>155
</a>156
</div>157
158
<!-- Copyright -->159
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">160
© 2020 Copyright:161
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>162
</div>163
<!-- Copyright -->164
</footer>165
<!--Footer-->1
1
1
1
Console errors: 0