xxxxxxxxxx1
<!-- Container for demo purpose -->2
<div>3
4
<!-- Section: Design Block -->5
<section>6
7
<style>8
.custom-intro {9
height: 100vh;10
}11
@media (max-width: 767px) {12
.custom-intro {13
height: 1400px;14
}15
}16
@media (min-width: 800px) and (max-width: 850px) {17
.custom-intro {18
height: 800px;19
}20
}21
.custom-title {22
font-size: 5rem;23
line-height: 1.2;24
letter-spacing: -5px;25
}26
@media (max-width: 1025px) {27
.custom-title {28
font-size: 3.5rem;29
}30
}31
</style>32
33
<header>34
<!-- Navbar -->35
<nav36
class="navbar navbar-expand-lg navbar-light bg-white fixed-top shadow-0 py-3"37
style="border-bottom: 2px solid #000"38
>39
<!-- Container wrapper -->40
<div class="container py-1">41
<!-- Toggle button -->42
<button43
class="navbar-toggler ps-0"44
type="button"45
data-mdb-toggle="collapse"46
data-mdb-target="#navbarSupportedContent"47
aria-controls="navbarSupportedContent"48
aria-expanded="false"49
aria-label="Toggle navigation"50
>51
<i class="fas fa-bars text-black"></i>52
</button>53
54
<!-- Collapsible wrapper -->55
<div class="collapse navbar-collapse" id="navbarSupportedContent">56
<!-- Navbar brand -->57
<a class="navbar-brand py-0" href="#!">58
<i class="fab fa-mdb text-black fa-2x"></i>59
</a>60
<!-- Left links -->61
<ul class="navbar-nav me-auto mb-2 mb-lg-0">62
<li class="nav-item">63
<a class="nav-link text-black px-lg-3" href="#!">Dashboard</a>64
</li>65
<li class="nav-item">66
<a class="nav-link text-black px-lg-3" href="#!">Team</a>67
</li>68
<li class="nav-item">69
<a class="nav-link text-black px-lg-3" href="#!">Projects</a>70
</li>71
</ul>72
<!-- Left links -->73
</div>74
<!-- Collapsible wrapper -->75
76
<!-- Right elements -->77
<div class="d-flex align-items-center">78
<div79
class="d-flex align-items-center me-3"80
style="border: 2px solid #000; height: 40px; padding-left: 13px; padding-right: 13px"81
>82
<a class="text-black" href="#!">83
<i class="fab fa-facebook-f"></i>84
</a>85
</div>86
<div87
class="d-flex align-items-center me-3"88
style="border: 2px solid #000; height: 40px; padding-left: 11px; padding-right: 11px"89
>90
<a class="text-black" href="#!">91
<i class="fab fa-instagram"></i>92
</a>93
</div>94
<div95
class="d-flex align-items-center"96
style="border: 2px solid #000; height: 40px; padding-left: 10px; padding-right: 10px"97
>98
<a class="text-black" href="#!">99
<i class="fab fa-twitter"></i>100
</a>101
</div>102
</div>103
<!-- Right elements -->104
</div>105
<!-- Container wrapper -->106
</nav>107
<!-- Navbar -->108
109
<section110
class="bg-image text-dark custom-intro"111
style="112
background-image: url('https://mdbootstrap.com/img/Photos/new-templates/gradient2.jpg');113
"114
>115
<div116
class="mask mask-custom d-flex align-items-center h-100"117
style="backdrop-filter: blur(100px); background: rgba(255, 255, 255, 0.3)"118
>119
<div class="container mt-lg-5">120
<div class="row align-items-center h-100">121
<div class="col-lg-6 col-md-6 mb-5 mb-md-0 pb-4 pb-md-0">122
<h5 class="fw-normal mb-0">123
<div class="d-flex flex-row align-items-center">124
<span class="custom-title me-4 pe-2">go</span>125
<div style="height: 2px; width: 100%; background-color: #000"></div>126
</div>127
<div class="d-flex flex-row align-items-center">128
<div style="height: 2px; width: 100%; background-color: #000"></div>129
<span class="custom-title ms-4 ps-2">everywhere</span>130
</div>131
<div class="d-flex flex-row align-items-center">132
<span class="custom-title me-4 pe-2">you</span>133
<div style="height: 2px; width: 100%; background-color: #000"></div>134
</div>135
<div class="d-flex flex-row align-items-center">136
<div style="height: 2px; width: 100%; background-color: #000"></div>137
<span class="custom-title ms-4 ps-2">want</span>138
</div>139
</h5>140
<div class="row">141
<div class="col-xl-7 col-lg-8">142
<div class="mb-5">143
<img src="https://img.icons8.com/wired/45/000000/spa-flower.png" />144
<img src="https://img.icons8.com/wired/45/000000/spa-flower.png" />145
<img src="https://img.icons8.com/wired/45/000000/spa-flower.png" />146
<img src="https://img.icons8.com/wired/45/000000/spa-flower.png" />147
<img src="https://img.icons8.com/wired/45/000000/spa-flower.png" />148
</div>149
<p class="mb-5">150
Lorem ipsum dolor sit amet consectetur adipisicing elit nemo nesciunt ea151
aspernatur autem molestiae sequi, ratione voluptas.152
</p>153
<button class="btn btn-black btn-lg me-1 rounded-0">Download</button>154
<button class="btn btn-outline-black btn-lg rounded-0">Learn more</button>155
</div>156
<div157
class="col-xl-5 col-lg-4 d-none d-lg-flex align-items-end justify-content-end"158
>159
<div>160
<img src="https://img.icons8.com/ultraviolet/110/000000/spa-flower.png" />161
</div>162
</div>163
</div>164
</div>165
<div class="col-lg-2 col-md-1">166
<div class="d-none d-md-flex align-items-center justify-content-end h-100">167
<h6168
class="mb-0 text-uppercase me-2"169
style="letter-spacing: 5px; font-weight: 900; writing-mode: vertical-rl"170
>171
• Visit the city •172
</h6>173
</div>174
</div>175
<div class="col-lg-4 col-md-5">176
<div177
class="bg-image custom-image"178
style="border: 2px solid #000; border-radius: 50%"179
>180
<img181
src="https://mdbootstrap.com/img/Photos/new-templates/img1.jpg"182
alt="Intro"183
class="w-100"184
/>185
<div class="mask"></div>186
</div>187
</div>188
</div>189
</div>190
</div>191
</section>192
</header>193
194
</section>195
<!-- Section: Design Block -->196
197
</div>198
<!-- Container for demo purpose -->1
1
1
1
Console errors: 0