xxxxxxxxxx1
<style>2
3
html,4
body,5
header,6
.view {7
height: 100%;8
}9
10
@media (max-width: 740px) {11
html,12
body,13
header,14
.view {15
height: 100vh;16
}17
}18
19
.top-nav-collapse {20
background-color: #563e91 !important;21
}22
23
.navbar:not(.top-nav-collapse) {24
background: transparent !important;25
}26
27
@media (max-width: 991px) {28
.navbar:not(.top-nav-collapse) {29
background: #563e91 !important;30
}31
}32
33
.rgba-gradient {34
background: linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);35
}36
37
</style>38
39
<!-- Main navigation -->40
<header>41
42
<!-- Navbar -->43
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">44
45
<div class="container">46
47
<a class="navbar-brand" href="#">Navbar</a>48
49
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"50
aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">51
<span class="navbar-toggler-icon"></span>52
</button>53
54
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">55
56
<ul class="navbar-nav mr-auto smooth-scroll">57
<li class="nav-item">58
<a class="nav-link" href="#home">Home59
<span class="sr-only">(current)</span>60
</a>61
</li>62
<li class="nav-item">63
<a class="nav-link" href="#about" data-offset="90">About</a>64
</li>65
<li class="nav-item">66
<a class="nav-link" href="#features" data-offset="90">Features</a>67
</li>68
<li class="nav-item">69
<a class="nav-link" href="#services" data-offset="90">Services</a>70
</li>71
<li class="nav-item">72
<a class="nav-link" href="#opinions" data-offset="30">Opinions</a>73
</li>74
<li class="nav-item">75
<a class="nav-link" href="#team" data-offset="90">Team</a>76
</li>77
<li class="nav-item">78
<a class="nav-link" href="#contact" data-offset="90">Contact</a>79
</li>80
</ul>81
82
<!-- Social Icon -->83
<ul class="navbar-nav nav-flex-icons">84
<li class="nav-item">85
<a class="nav-link">86
<i class="fab fa-facebook-f light-green-text-2"></i>87
</a>88
</li>89
<li class="nav-item">90
<a class="nav-link">91
<i class="fab fa-twitter light-green-text-2"></i>92
</a>93
</li>94
<li class="nav-item">95
<a class="nav-link">96
<i class="fab fa-instagram light-green-text-2"></i>97
</a>98
</li>99
</ul>100
101
</div>102
103
</div>104
105
</nav>106
<!-- Navbar -->107
108
<!-- Full Page Intro -->109
<div id="intro-section" class="view">110
111
<video class="video-intro" poster="https://mdbootstrap.com/img/Photos/Others/background.jpg" playsinline112
autoplay muted loop>113
<source src="https://mdbootstrap.com/img/video/animation.mp4" type="video/mp4">114
</video>115
116
<!-- Mask & flexbox options-->117
<div class="mask rgba-gradient d-flex justify-content-center align-items-center">118
119
<!-- Content -->120
<div class="container px-md-3 px-sm-0">121
122
<!--Grid row-->123
<div class="row wow fadeIn">124
125
<!--Grid column-->126
<div class="col-md-12 mb-4 white-text text-center wow fadeIn">127
128
<h3 class="display-3 font-weight-bold white-text mb-0 pt-md-5 pt-5">Creative Agency</h3>129
<hr class="hr-light my-4 w-75">130
<h4 class="subtext-header mt-2 mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit131
deleniti consequuntur nihil.</h4>132
<a href="#!" class="btn btn-rounded btn-outline-white">133
<i class="fas fa-home"></i> Visit us134
</a>135
136
</div>137
<!--Grid column-->138
139
</div>140
<!--Grid row-->141
142
</div>143
<!-- Content -->144
145
</div>146
<!-- Mask & flexbox options-->147
148
</div>149
<!-- Full Page Intro -->150
151
</header>152
<!-- Main navigation -->1
1
xxxxxxxxxx1
new WOW().init(); Console errors: 0