Commit 7b8132a4bef71e51949927dd0b93bd9a3a1bb193
1 parent
9c4480a9
- video button down
Showing
3 changed files
with
27 additions
and
3 deletions
Show diff stats
frontend/views/site/individual.php
| @@ -25,6 +25,7 @@ | @@ -25,6 +25,7 @@ | ||
| 25 | <div id="content"> | 25 | <div id="content"> |
| 26 | <section class="video_main"> | 26 | <section class="video_main"> |
| 27 | <div id="video-bg"> | 27 | <div id="video-bg"> |
| 28 | + <div class="arrow_bottom"><a href="#section1" class="scroll-to"><i class="fa fa-chevron-down" aria-hidden="true"></i></a></div> | ||
| 28 | <video width="100%" height="auto" muted="" autoplay="autoplay" loop="loop" preload="auto"> | 29 | <video width="100%" height="auto" muted="" autoplay="autoplay" loop="loop" preload="auto"> |
| 29 | <source src="/video/kbcover2.mp4" type="video/mp4"> | 30 | <source src="/video/kbcover2.mp4" type="video/mp4"> |
| 30 | <source src="/video/kbcover2.ogg" type="video/ogg"> | 31 | <source src="/video/kbcover2.ogg" type="video/ogg"> |
| @@ -32,7 +33,7 @@ | @@ -32,7 +33,7 @@ | ||
| 32 | </div> | 33 | </div> |
| 33 | 34 | ||
| 34 | </section> | 35 | </section> |
| 35 | - <section class="no-mb mtop-25"> | 36 | + <section class="no-mb mtop-25" id="section1"> |
| 36 | <div class="container"> | 37 | <div class="container"> |
| 37 | <div class="row"> | 38 | <div class="row"> |
| 38 | <div class="col-md-12"> | 39 | <div class="col-md-12"> |
frontend/views/site/legal.php
| @@ -31,6 +31,7 @@ $this->registerJs($js, View::POS_END); | @@ -31,6 +31,7 @@ $this->registerJs($js, View::POS_END); | ||
| 31 | 31 | ||
| 32 | <section class="video_main"> | 32 | <section class="video_main"> |
| 33 | <div id="video-bg"> | 33 | <div id="video-bg"> |
| 34 | + <div class="arrow_bottom"><a href="#section1" class="scroll-to"><i class="fa fa-chevron-down" aria-hidden="true"></i></a></div> | ||
| 34 | <video width="100%" height="auto" muted="" autoplay="autoplay" loop="loop" preload="auto"> | 35 | <video width="100%" height="auto" muted="" autoplay="autoplay" loop="loop" preload="auto"> |
| 35 | <source src="/video/kbvid1.mp4" type="video/mp4"> | 36 | <source src="/video/kbvid1.mp4" type="video/mp4"> |
| 36 | <source src="/video/kbvid1.ogg" type="video/ogg"> | 37 | <source src="/video/kbvid1.ogg" type="video/ogg"> |
| @@ -38,7 +39,7 @@ $this->registerJs($js, View::POS_END); | @@ -38,7 +39,7 @@ $this->registerJs($js, View::POS_END); | ||
| 38 | </div> | 39 | </div> |
| 39 | 40 | ||
| 40 | </section> | 41 | </section> |
| 41 | - <section class="no-mb mtop-25"> | 42 | + <section class="no-mb mtop-25" id="section1"> |
| 42 | <div class="container"> | 43 | <div class="container"> |
| 43 | <div class="row"> | 44 | <div class="row"> |
| 44 | <div class="col-md-12"> | 45 | <div class="col-md-12"> |
frontend/web/css/main.css
| @@ -268,7 +268,6 @@ section.blue-fon {padding-top: 25px;} | @@ -268,7 +268,6 @@ section.blue-fon {padding-top: 25px;} | ||
| 268 | display: flex; | 268 | display: flex; |
| 269 | align-items: center; | 269 | align-items: center; |
| 270 | justify-content: center; | 270 | justify-content: center; |
| 271 | - opacity: 0.7; | ||
| 272 | } | 271 | } |
| 273 | #video-bg:after { | 272 | #video-bg:after { |
| 274 | content: ''; | 273 | content: ''; |
| @@ -280,6 +279,29 @@ section.blue-fon {padding-top: 25px;} | @@ -280,6 +279,29 @@ section.blue-fon {padding-top: 25px;} | ||
| 280 | background: rgba(0, 0, 0, 0.1); | 279 | background: rgba(0, 0, 0, 0.1); |
| 281 | box-shadow: inset 0px 250px 250px -250px black, inset 0px -250px 250px -250px black; | 280 | box-shadow: inset 0px 250px 250px -250px black, inset 0px -250px 250px -250px black; |
| 282 | } | 281 | } |
| 282 | +#video-bg .arrow_bottom{ | ||
| 283 | + position: absolute; | ||
| 284 | + width: 100%; | ||
| 285 | + z-index: 1; | ||
| 286 | + color: #fff; | ||
| 287 | + bottom: 4%; | ||
| 288 | + left: 0; | ||
| 289 | + text-align: center; | ||
| 290 | +} | ||
| 291 | +#video-bg .arrow_bottom a{ | ||
| 292 | + font-size: 72px; | ||
| 293 | + color: rgba(255, 255, 255, 0.3); | ||
| 294 | + transition:0.2s; | ||
| 295 | +} | ||
| 296 | +#video-bg .arrow_bottom a:hover{ | ||
| 297 | + color: rgba(255, 255, 255, 0.8); | ||
| 298 | +} | ||
| 299 | +#video-bg .arrow_bottom a:active{ | ||
| 300 | + color: rgba(255, 255, 255, 1); | ||
| 301 | +} | ||
| 302 | +#video-bg video{ | ||
| 303 | + opacity: 0.7; | ||
| 304 | +} | ||
| 283 | .video_main { | 305 | .video_main { |
| 284 | background-color: #0080ca; | 306 | background-color: #0080ca; |
| 285 | z-index: -1000; | 307 | z-index: -1000; |