HTML
xxxxxxxxxx1
<!-- Header -->2
<div class="container-fluid">3
<div class="row my-row-1">4
<div5
class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 d-flex justify-content-xs-center justify-content-sm-center justify-content-md-center justify-content-lg-start justify-content-xl-start justify-content-xxl-start d-flex align-items-center logo-container">6
<a href="index.html">7
<!--Image-->8
<picture>9
<source srcset="img/png/webp/Društvo-Henosis-logo.webp" type="image/webp" />10
<source srcset="img/png/Društvo-Henosis-logo.png" type="image/png" />11
<img src="img/png/Društvo-Henosis-logo.png" alt="Logo" class="logo" />12
</picture>13
</a>14
</div>15
<div16
class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 d-flex justify-content-xs-center justify-content-sm-center justify-content-md-center justify-content-lg-end justify-content-xl-end justify-content-xxl-end d-flex align-items-center click-to-action col-b1">17
<div class="d-flex justify-content-end align-items-center">18
<div class="pulse">19
<i class="fas fa-phone fa-5x my-fa-phone-1"></i>20
</div>21
<a href="tel:0038640706921">22
<p class="display-6 my-text-color">Stopite v stik z mano</p>23
</a>24
</div>25
</div>26
</div>27
</div>28
<nav class="navbar sticky-top navbar-expand-lg navbar-dark">29
<!-- Container wrapper -->30
<div class="container-fluid">31
<!-- Toggle button -->32
<div class="navbar-toggler hamburger ms-auto py-0" role="button" aria-expanded="false"33
aria-label="Toggle navigation">34
<svg class="hamburger-icon" data-mdb-toggle="collapse" data-mdb-target="#navbarCenteredExample" id="icon"35
viewbox="0 0 800 600">36
<path d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200" id="top"></path>37
<path d="M300,320 L540,320" id="middle"></path>38
<path d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190" id="bottom"39
transform="translate(480, 320) scale(1, -1) translate(-480, -318)"></path>40
</svg>41
</div>42
<div class="dropdown-divider my-divider-1 d-lg-none"></div>43
<!-- Collapsible wrapper -->44
<div class="collapse navbar-collapse justify-content-center" id="navbarCenteredExample">45
<!-- Left links -->46
<ul class="navbar-nav mb-2 mb-lg-0">47
<li class="nav-item">48
<a class="nav-link active" aria-current="page" href="index">49
Domov</a>50
<div class="dropdown-divider my-divider-1 d-lg-none"></div>51
</li>52
<!-- Dropdown -->53
<li class="nav-item dropdown">54
<a class="nav-link dropdown-toggle" href="#" data-mdb-toggle="dropdown" data-mdb-auto-close="outside"55
data-mdb-dropdown-animation="off" id="navbarDropdownMenuLink1">Regresoterapija</a>56
<div class="dropdown-divider my-divider-1 d-lg-none"></div>57
<ul class="dropdown-menu shadow">58
<li class="dropend">59
<a href="#" class="dropdown-item mt-2 dropdown-toggle" data-mdb-toggle="dropdown"60
data-mdb-auto-close="outside" data-mdb-dropdown-animation="off">Regresija</a>61
<ul class="dropdown-menu shadow">62
<li>63
<a class="dropdown-item mt-2" href="regresija">Regresija</a>64
</li>65
66
<li class="dropdown-divider my-divider-1"></li>67
<li>68
<a class="dropdown-item mb-2" href="kako-poteka-regresija">Kako poteka regresija</a>69
</li>70
</ul>71
</li>72
<li class="dropdown-divider my-divider-1"></li>73
<!-- Dropdown -->74
<li class="dropend">75
<a href="#" class="dropdown-item dropdown-toggle" data-mdb-toggle="dropdown"76
data-mdb-auto-close="outside" data-mdb-dropdown-animation="off">Regresija v prejšnja življenja</a>77
<ul class="dropdown-menu shadow">78
<li>79
<a class="dropdown-item mt-2" href="regresija-v-prejsnja-zivljenja">Regresija v prejšnja80
življenja</a>81
</li>82
<li class="dropdown-divider my-divider-1"></li>83
<li>84
<a class="dropdown-item" href="ali-so-prejsnja-zivljenja-resnicna">Ali so prejšnja življenja85
resnična</a>86
</li>87
<li class="dropdown-divider my-divider-1"></li>88
<li>89
<a class="dropdown-item mb-2" href="kaksen-ucinek-ima-lahko-taka-seansa">Kakšen učinek ima lahko90
taka seansa</a>91
</li>92
</ul>93
</li>94
<li class="dropdown-divider my-divider-1"></li>95
<li>96
<a class="dropdown-item" href="regresija-sedanjega-zivljenja">Regresija sedanjega življenja</a>97
</li>98
<li class="dropdown-divider my-divider-1"></li>99
<li>100
<a class="dropdown-item mb-2" href="zivljenje-med-zivljenji">Regresija v življenje med življenji</a>101
</li>102
</ul>103
</li>104
<!-- Dropdown-end -->105
<li class="nav-item">106
<a class="nav-link" href="progresija">Progresija</a>107
<div class="dropdown-divider my-divider-1 d-lg-none"></div>108
</li>109
110
<!-- Dropdown -->111
<li class="nav-item dropdown">112
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink2" role="button"113
data-mdb-toggle="dropdown" aria-expanded="false">114
Hipnoterapija115
</a>116
<div class="dropdown-divider my-divider-1 d-lg-none"></div>117
<ul class="dropdown-menu shadow">118
<li>119
<a class="dropdown-item mt-2" href="hipnoza">Hipnoza</a>120
</li>121
<li class="dropdown-divider my-divider-1"></li>122
<li>123
<a class="dropdown-item" href="fobije">Fobije</a>124
</li>125
<li class="dropdown-divider my-divider-1"></li>126
<li>127
<a class="dropdown-item" href="kajenje">Kajenje</a>128
</li>129
<li class="dropdown-divider my-divider-1"></li>130
<li>131
<a class="dropdown-item" href="reprogramiranje-caker">Reprogramiranje čaker</a>132
</li>133
<li class="dropdown-divider my-divider-1"></li>134
<li>135
<a class="dropdown-item mb-2" href="telesna-teza">Telesna teža</a>136
</li>137
</ul>138
</li>139
<!-- Dropdown-end -->140
<!-- Dropdown -->141
<li class="nav-item dropdown">142
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-mdb-toggle="dropdown"143
aria-expanded="false">144
Ujete duše145
</a>146
<div class="dropdown-divider my-divider-1 d-lg-none"></div>147
<ul class="dropdown-menu shadow">148
<li>149
<a class="dropdown-item mt-2" href="ujete-duse">Ujete duše</a>150
</li>151
<li class="dropdown-divider my-divider-1"></li>152
<li>153
<a class="dropdown-item mb-2" href="kako-je-mogoce-odstraniti-ujete-duse">Odstranjevanje ujetih duš</a>154
</li>155
</ul>156
</li>157
<li class="nav-item">158
<a class="nav-link" href="mnenja-in-vtisi">Mnenja in vtisi</a>159
<div class="dropdown-divider my-divider-1 d-lg-none"></div>160
</li>161
<!-- Dropdown -->162
<li class="nav-item dropdown">163
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink4" role="button"164
data-mdb-toggle="dropdown" aria-expanded="false">165
O meni166
</a>167
<div class="dropdown-divider my-divider-1 d-lg-none"></div>168
<ul class="dropdown-menu shadow">169
<li>170
<a class="dropdown-item mt-2" href="o-meni">O meni</a>171
</li>172
<li class="dropdown-divider my-divider-1"></li>173
<li>174
<a class="dropdown-item" href="kontakt">Kontakt</a>175
</li>176
<li class="dropdown-divider my-divider-1"></li>177
<li>178
<a class="dropdown-item mb-2" href="clanek">Mediji</a>179
</li>180
</ul>181
</li>182
<!-- Dropdown-end -->183
<li class="nav-item">184
<a class="nav-link" href="delavnice">Dogodki</a>185
<div class="dropdown-divider my-divider-1 d-lg-none"></div>186
</li>187
<li class="nav-item">188
<a class="nav-link" href="blog">Blog</a>189
</li>190
</ul>191
<!-- Left links -->192
</div>193
<!-- Collapsible wrapper -->194
</div>195
<!-- Container wrapper -->196
</nav>197
<header>198
<!-- Section-1 -->199
<section class="mb-3">200
<div class="page-header">201
<span class="mask bg-gradient-info opacity-80"></span>202
<div class="container">203
<div class="row">204
<div class="col-lg-10 ls-1 lh-1 my-auto mx-auto">205
<h3 class="text-white fw-500 mb-4 text-center my-display-4 my-h3">206
<span class="font-weight-bold" data-mdb-toggle="animation" data-mdb-animation="zoom-in"207
data-mdb-animation-start="onLoad" data-mdb-animation-delay="300"208
data-mdb-animation-duration="1000">Odkrij,</span>209
<span class="font-weight-bold" data-mdb-toggle="animation" data-mdb-animation="zoom-in"210
data-mdb-animation-start="onLoad" data-mdb-animation-delay="800"211
data-mdb-animation-duration="1000">razišči,</span>212
<span class="font-weight-bold" data-mdb-toggle="animation" data-mdb-animation="zoom-in"213
data-mdb-animation-start="onLoad" data-mdb-animation-delay="1300"214
data-mdb-animation-duration="1000">razreši!</span>215
</h3>216
<!-- Divider -->217
<hr class="text-white" />218
<p class="lead mb-4 fw-normal text-white opacity-90 text-center my-display-4">219
<span data-mdb-toggle="animation" data-mdb-animation="zoom-in" data-mdb-animation-start="onLoad"220
data-mdb-animation-delay="1500" data-mdb-animation-duration="1000">Zdaj je čas je, da prepoznate svojo221
pravo naravo, vzamete222
svojo moč nazaj in zaživite svoje poslanstvo.</span>223
</p>224
</div>225
</div>226
</div>227
<div class="position-absolute w-100 z-index-1 bottom-0">228
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"229
viewbox="0 24 150 40" preserveaspectratio="none" shape-rendering="auto">230
<defs>231
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z">232
</path>233
</defs>234
<g class="simple-waves">235
<use xlink:href="#gentle-wave" x="48" y="-1" fill="rgba(255,255,255,0.40"></use>236
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.35)"></use>237
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.25)"></use>238
<use xlink:href="#gentle-wave" x="48" y="8" fill="rgba(255,255,255,0.20)"></use>239
<use xlink:href="#gentle-wave" x="48" y="13" fill="rgba(255,255,255,0.15)"></use>240
<use xlink:href="#gentle-wave" x="48" y="16" fill="rgba(255,255,255,1"></use>241
</g>242
</svg>243
</div>244
</div>245
</section>246
<!-- ./Section-1 -->247
</header>248
<!-- ./Header -->CSS
xxxxxxxxxx1
.my-row-1 {2
background-color: #326796;3
background: -moz-radial-gradient(4
center,5
ellipse cover,6
#3f81bc 0%,7
#326796 100%8
);9
background: -webkit-radial-gradient(10
center,11
ellipse cover,12
#3f81bc 0%,13
#326796 100%14
);15
background: -webkit-gradient(16
radial,17
center center,18
0px,19
center center,20
100%,21
color-stop(0%, #3f81bc),22
color-stop(100%, #326796)23
);24
background: -o-radial-gradient(25
center,26
ellipse cover,27
#3f81bc 0%,28
#326796 100%29
);30
background: -ms-radial-gradient(31
center,32
ellipse cover,33
#3f81bc 0%,34
#326796 100%35
);36
background: radial-gradient(ellipse at center, #3f81bc 0%, #326796 100%);37
border-bottom: 1px solid #76abd9;38
}39
40
.my-text-color {41
color: #c2d2e0;42
}43
44
@media (max-width: 575px) {45
.logo-container {46
margin-left: 32%;47
}48
}49
50
@media (max-width: 991px) {51
.click-to-action {52
padding-top: 10px;53
padding-bottom: 10px;54
}55
}56
57
@media (max-width: 575px) {58
.my-fa-phone-1 {59
height: 100px;60
}61
}62
63
.logo {64
width: 100;65
height: 100px;66
margin-top: 10%;67
margin-bottom: 10%;68
}69
70
.logo-container {71
padding-left: 2%;72
}73
74
.click-to-action {75
padding-right: 2%;76
}77
78
.pulse i {79
color: #88a8c3;80
}81
82
.pulse {83
height: 100px;84
width: 100px;85
border-radius: 50%;86
display: flex;87
justify-content: center;88
align-items: center;89
position: relative;90
}91
92
.pulse::before {93
content: "";94
position: absolute;95
border: 1px solid #88a8c3;96
width: calc(100% + 40px);97
height: calc(100% + 40px);98
border-radius: 50%;99
animation: pulse 1s linear infinite;100
}101
102
.pulse::after {103
content: "";104
position: absolute;105
border: 1px solid #88a8c3;106
width: calc(100% + 40px);107
height: calc(100% + 40px);108
border-radius: 50%;109
animation: pulse 1s linear infinite;110
animation-delay: 0.3s;111
}112
113
@keyframes pulse {114
0% {115
transform: scale(0.5);116
opacity: 0;117
}118
119
50% {120
transform: scale(1);121
opacity: 1;122
}123
124
100% {125
transform: scale(1.3);126
opacity: 0;127
}128
}129
130
.navbar {131
background-color: #3977ac;132
background: -moz-radial-gradient(133
center,134
ellipse cover,135
#3f81bc 0%,136
#3977ac 100%137
);138
background: -webkit-radial-gradient(139
center,140
ellipse cover,141
#3f81bc 0%,142
#3977ac 100%143
);144
background: -webkit-gradient(145
radial,146
center center,147
0px,148
center center,149
100%,150
color-stop(0%, #3f81bc),151
color-stop(100%, #3977ac)152
);153
background: -o-radial-gradient(154
center,155
ellipse cover,156
#3f81bc 0%,157
#3977ac 100%158
);159
background: -ms-radial-gradient(160
center,161
ellipse cover,162
#3f81bc 0%,163
#3977ac 100%164
);165
background: radial-gradient(ellipse at center, #3f81bc 0%, #3977ac 100%);166
}167
168
.navbar-text {169
color: #c2d2e0;170
}171
172
.navbar-text a {173
color: #ffffff;174
}175
176
.navbar-text a:hover,177
.navbar-text a:focus {178
color: #c2d2e0;179
}180
181
.navbar-nav .nav-link {182
color: #c2d2e0;183
border-radius: 0.25rem;184
margin: 0 0.25em;185
}186
187
.navbar-nav .nav-link:not(.disabled):hover,188
.navbar-nav .nav-link:not(.disabled):focus {189
color: #ffffff;190
}191
192
.navbar-nav .dropdown-menu {193
border-color: #76abd9;194
background-color: #3977ac;195
}196
197
.navbar-nav .dropdown-item {198
color: #c2d2e0;199
}200
201
.navbar-nav .dropdown-item:hover,202
.navbar-nav .dropdown-item:focus,203
.navbar-nav .dropdown-item.active {204
color: #ffffff;205
background-color: #3977ac;206
}207
208
.navbar-nav .dropdown-divider {209
border-top-color: #c2d2e0;210
}211
212
.nav-item.active .nav-link {213
color: #ffffff;214
}215
216
.nav-item.active .nav-link:hover,217
.nav-item.active .nav-link:focus {218
color: #ffffff;219
}220
221
.nav-item.show .nav-link {222
color: #ffffff;223
}224
225
.nav-item.show .nav-link:hover,226
.nav-item.show .nav-link:focus {227
color: #ffffff;228
}229
230
.navbar-toggle {231
border-color: #428bca;232
}233
234
.navbar-toggle:hover,235
.navbar-toggle:focus {236
background-color: #428bca;237
}238
239
.navbar-toggle .navbar-toggler-icon {240
color: #c2d2e0;241
}242
243
.navbar-collapse,244
.navbar-form {245
border-color: #c2d2e0;246
}247
248
.navbar-link {249
color: #c2d2e0;250
}251
252
.header-bord.t {253
border-bottom: thin solid #76abd9;254
}255
256
.navbar .navbar-link:hover {257
color: #ffffff;258
background-color: #3977ac;259
}260
261
.navbar-dark .navbar-toggler {262
border: 0px black solid;263
}264
265
.my-divider {266
background-color: #c2d2e0;267
}268
269
body {270
font-family: Roboto, sans-serif;271
font-weight: 300;272
}273
274
.bg-gradient-info {275
background: linear-gradient(276
310deg,277
rgba(106, 17, 203, 0.8),278
rgba(37, 117, 252, 0.8)279
);280
}281
282
.z-index-1 {283
z-index: 1;284
}285
286
.page-header .container {287
z-index: 1;288
}289
290
.page-header {291
padding: 0;292
position: relative;293
overflow: hidden;294
display: flex;295
align-items: center;296
background-size: cover;297
background-position: 50%;298
}299
300
.page-header {301
background-image: url("https://i.ibb.co/JHhpwB6/Regresija-hipnoza-4.jpg");302
background-size: cover;303
background-position: center center;304
width: 100%;305
height: auto;306
}307
@supports (background-image: -webkit-image-set(url("https://i.ibb.co/qpqc4PN/Regresija-hipnoza-4.webp") 1x)) {308
.page-header {309
background-image: -webkit-image-set(url("https://i.ibb.co/qpqc4PN/Regresija-hipnoza-4.webp") 1x);310
}311
}312
313
.fw-900 {314
font-weight: 900;315
}316
317
.waves {318
position: relative;319
width: 100%;320
height: 15vh;321
margin-bottom: -7px;322
/*Fixforsafarigap*/323
min-height: 100px;324
max-height: 150px;325
}326
327
.simple-waves > use {328
animation: wavy 55s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;329
}330
331
.simple-waves > use:nth-child(1) {332
animation-delay: -2s;333
animation-duration: 7s;334
}335
336
.simple-waves > use:nth-child(2) {337
animation-delay: -3s;338
animation-duration: 10s;339
}340
341
.simple-waves > use:nth-child(3) {342
animation-delay: -4s;343
animation-duration: 13s;344
}345
346
.simple-waves > use:nth-child(4) {347
animation-delay: -5s;348
animation-duration: 16s;349
}350
351
.simple-waves > use:nth-child(5) {352
animation-delay: -4s;353
animation-duration: 20s;354
}355
356
@keyframes wavy {357
0% {358
transform: translate3d(-90px, 0, 0);359
}360
361
100% {362
transform: translate3d(85px, 0, 0);363
}364
}365
366
@media (max-width: 768px) {367
.waves {368
height: 40px;369
min-height: 40px;370
}371
}372
373
#icon {374
width: 60px;375
height: 50px;376
cursor: pointer;377
transform: translate3d(0, 0, 0);378
}379
380
.hamburger-icon path {381
fill: none;382
transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25),383
stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);384
stroke-width: 30px;385
stroke-linecap: round;386
stroke: #c2d2e0;387
stroke-dashoffset: 0px;388
}389
390
.hamburger-icon path#top,391
.hamburger-icon path#bottom {392
stroke-dasharray: 240px 950px;393
}394
395
.hamburger-icon path#middle {396
stroke-dasharray: 240px 240px;397
}398
399
.cross path#top,400
.cross path#bottom {401
stroke-dashoffset: -650px;402
stroke-dashoffset: -650px;403
}404
405
.cross path#middle {406
stroke-dashoffset: -115px;407
stroke-dasharray: 1px 220px;408
}409
410
411
/* Extra small devices phones */412
@media (max-width: 575.98px) {413
.page-header {414
min-height: 45vh;415
}416
} 417
418
/* Small devices phones */419
@media (min-width: 576px) and (max-width: 767.98px) { 420
.page-header {421
min-height: 50vh;422
}423
}424
425
/* Medium devices tablets */426
@media (min-width: 768px) and (max-width: 991.98px) { 427
.page-header {428
min-height: 60vh;429
}430
}431
432
/* Large devices laptops/desktops */433
@media (min-width: 992px) and (max-width: 1199.98px) { 434
.page-header {435
min-height: 70vh;436
}437
}438
439
/* Extra large devices (large laptops and desktops */440
@media (min-width: 1200px) and (max-width: 1399.98px) { 441
.page-header {442
min-height: 75vh;443
}444
}445
446
/* XX-Large devices larger desktops */447
@media (min-width: 1400px) { 448
.page-header {449
min-height: 75vh;450
}451
}JS
xxxxxxxxxx1
//Hamburger menu icon2
var el = document.querySelector(".hamburger");3
4
el.onclick = function () {5
el.classList.toggle("cross");6
}; Console errors: 0