Skip to content

Tenzing / Tenzing-Web-2023

Go to a project
Toggle navigation
Toggle navigation pinning
3f13838d by Jeff Balicki
Options

scrollTrigger 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 656df4be
Inline Side-by-side
Showing 15 changed files with 394 additions and 129 deletions
...@@ -15428,7 +15428,7 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { ...@@ -15428,7 +15428,7 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
15428 15428
15429 #main-nav.fixed-top { 15429 #main-nav.fixed-top {
15430 position: fixed; 15430 position: fixed;
15431 z-index: 999; 15431 z-index: 9999;
15432 top: 0px; 15432 top: 0px;
15433 left: 0px; 15433 left: 0px;
15434 width: 100%; 15434 width: 100%;
...@@ -15451,33 +15451,129 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { ...@@ -15451,33 +15451,129 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
15451 opacity: 0; 15451 opacity: 0;
15452 } 15452 }
15453 15453
15454 #v {
15455 height: 2000px;
15456 }
15457
15458 .video-cont { 15454 .video-cont {
15455 height: 100vh;
15459 position: relative; 15456 position: relative;
15460 left: 0px; 15457 z-index: 9;
15461 width: 100%;
15462 overflow: hidden; 15458 overflow: hidden;
15459 background-position: center center;
15460 background-repeat: no-repeat;
15461 background-size: cover;
15463 } 15462 }
15464 15463
15465 .myVideo { 15464 .myVideo {
15466 position: relative; 15465 position: absolute;
15467 right: 0;
15468 top: 0;
15469 min-width: 100%; 15466 min-width: 100%;
15470 margin: auto; 15467 min-height: 100%;
15471 display: block; 15468 width: auto;
15472 z-index: 99; 15469 height: auto;
15473 } 15470 top: 50%;
15474 15471 left: 50%;
15475 .fixed-video { 15472 -o-object-fit: contain;
15476 position: fixed; 15473 object-fit: contain;
15474 transform: translate(-50%, -50%);
15477 } 15475 }
15478 15476
15479 #full-width-page-wrapper { 15477 #full-width-page-wrapper {
15480 padding-top: 0px; 15478 padding-top: 0px;
15481 } 15479 }
15482 15480
15481 .scroll-content {
15482 position: relative;
15483 z-index: 999;
15484 }
15485
15486 .overlay-desc {
15487 position: relative;
15488 z-index: 999;
15489 display: flex;
15490 flex-direction: column;
15491 align-items: center;
15492 justify-content: center;
15493 height: 786px;
15494 }
15495 .overlay-desc span {
15496 align-self: flex-start;
15497 color: #666666;
15498 font-size: 24px;
15499 line-height: 32px;
15500 }
15501 .overlay-desc h1, .overlay-desc .h1 {
15502 align-self: flex-start;
15503 color: #333333;
15504 font-size: 40px;
15505 line-height: 48px;
15506 }
15507
15508 .overlay-desc2 {
15509 position: relative;
15510 z-index: 999;
15511 display: flex;
15512 flex-direction: column;
15513 align-items: center;
15514 justify-content: flex-end;
15515 height: 786px;
15516 }
15517 .overlay-desc2 span {
15518 align-self: flex-end;
15519 color: #666666;
15520 font-size: 24px;
15521 line-height: 32px;
15522 width: 50%;
15523 }
15524 .overlay-desc2 h1, .overlay-desc2 .h1 {
15525 align-self: flex-end;
15526 color: #333333;
15527 font-size: 40px;
15528 line-height: 48px;
15529 width: 50%;
15530 }
15531
15532 .overlay-desc2.mid {
15533 justify-content: center;
15534 }
15535
15536 .c-header_title_linerr {
15537 display: block;
15538 opacity: 0;
15539 transform-origin: center top;
15540 transform-style: preserve-3d;
15541 transform: translateY(100%) rotateX(-80deg);
15542 transition: opacity 0s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0s cubic-bezier(0.215, 0.61, 0.355, 1);
15543 }
15544 html.is-ready .c-header_title_linerr {
15545 transform: none;
15546 opacity: 1;
15547 transition-duration: 0.8s;
15548 }
15549 html.is-ready .c-header_title_linerr:nth-child(1) {
15550 transition-delay: 0.1s;
15551 }
15552 html.is-ready .c-header_title_linerr:nth-child(2) {
15553 transition-delay: 0.2s;
15554 }
15555 html.is-ready .c-header_title_linerr:nth-child(3) {
15556 transition-delay: 0.3s;
15557 }
15558 html.is-ready .c-header_title_linerr:nth-child(4) {
15559 transition-delay: 0.4s;
15560 }
15561 .c-header_title_linerr span {
15562 display: inline-block;
15563 }
15564 .c-header_title_linerr.-version {
15565 text-transform: none;
15566 font-size: 0;
15567 }
15568
15569 .line {
15570 width: 100%;
15571 max-width: 800px;
15572 height: 8px;
15573 margin: 0 0 10px 0;
15574 position: relative;
15575 display: inline-block;
15576 background-color: rgb(255, 255, 255);
15577 }
15578
15483 /*# sourceMappingURL=child-theme.css.map */ 15579 /*# sourceMappingURL=child-theme.css.map */
...\ No newline at end of file ...\ No newline at end of file
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -25,13 +25,8 @@ $navbar_type = get_theme_mod( 'understrap_navbar_type', 'collapse' ); ...@@ -25,13 +25,8 @@ $navbar_type = get_theme_mod( 'understrap_navbar_type', 'collapse' );
25 <body <?php body_class(); ?> <?php understrap_body_attributes(); ?>> 25 <body <?php body_class(); ?> <?php understrap_body_attributes(); ?>>
26 <?php do_action( 'wp_body_open' ); ?> 26 <?php do_action( 'wp_body_open' ); ?>
27 <div class="site" id="page"> 27 <div class="site" id="page">
28 <div id="v" class="video-cont"> 28
29 29
30 <video muted loop id="v0" class="myVideo fixed-video">
31 <source src="<?php echo get_stylesheet_directory_uri(); ?>/assets/istockphoto-1372856608-640_adpp_is.mp4" type="video/mp4">
32 <track label="English" kind="subtitles" srclang="en" src="" >
33 </video>
34
35 <!-- ******************* The Navbar Area ******************* --> 30 <!-- ******************* The Navbar Area ******************* -->
36 <header id="wrapper-navbar"> 31 <header id="wrapper-navbar">
37 32
...@@ -42,4 +37,4 @@ $navbar_type = get_theme_mod( 'understrap_navbar_type', 'collapse' ); ...@@ -42,4 +37,4 @@ $navbar_type = get_theme_mod( 'understrap_navbar_type', 'collapse' );
42 <?php get_template_part( 'global-templates/navbar', $navbar_type . '-' . $bootstrap_version ); ?> 37 <?php get_template_part( 'global-templates/navbar', $navbar_type . '-' . $bootstrap_version ); ?>
43 38
44 </header><!-- #wrapper-navbar --> 39 </header><!-- #wrapper-navbar -->
45 </div>
...\ No newline at end of file ...\ No newline at end of file
40
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -2295,6 +2295,11 @@ ...@@ -2295,6 +2295,11 @@
2295 "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==", 2295 "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
2296 "dev": true 2296 "dev": true
2297 }, 2297 },
2298 "gsap": {
2299 "version": "3.11.4",
2300 "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.11.4.tgz",
2301 "integrity": "sha512-McHhEguHyExMMnjqKA8G+7TvxmlKQGMbjgwAilnFe1e4id7V/tFveRQ2YMZhTYu0oxHGWvbPltdVYQOu3z1SCA=="
2302 },
2298 "has": { 2303 "has": {
2299 "version": "1.0.3", 2304 "version": "1.0.3",
2300 "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", 2305 "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
......
...@@ -42,6 +42,7 @@ ...@@ -42,6 +42,7 @@
42 }, 42 },
43 "homepage": "https://understrap.com", 43 "homepage": "https://understrap.com",
44 "dependencies": { 44 "dependencies": {
45 "gsap": "^3.11.4",
45 "locomotive-scroll": "^4.1.4" 46 "locomotive-scroll": "^4.1.4"
46 }, 47 },
47 "devDependencies": { 48 "devDependencies": {
......
...@@ -23,13 +23,82 @@ if ( is_page_template( 'page-templates/no-title.php' ) ) { ...@@ -23,13 +23,82 @@ if ( is_page_template( 'page-templates/no-title.php' ) ) {
23 } 23 }
24 ?> 24 ?>
25 25
26 <div class="wrapper" id="<?php echo $wrapper_id; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- ok. ?>"> 26 <div id="js-scroll" >
27 <div class="video-cont video2 "> 27 <div id="vc1">
28 <!-- <img class="video-sizer" src="<?php // echo get_stylesheet_directory_uri(); ?>/assets/video1.png"/> --> 28 <div class="video-cont">
29 <video id="v1" autoplay muted loop class="myVideo "> 29 <video autoplay muted loop class="myVideo">
30 <source src="<?php echo get_stylesheet_directory_uri(); ?>/assets/istockphoto-1372856608-640_adpp_is.mp4" type="video/mp4">
31 <track label="English" kind="subtitles" srclang="en" src="" >
32 </video>
33
34 <div class="container">
35 <div class="row move_1">
36 <div class="col-md-12 content-area">
37 <div class="overlay-desc header">
38 <span class="c-header_title_line">Organizations and<br> companies that align around </span>
39 <h1 class="c-header_title_line">great brand stories <br>and experiences </h1>
40 <span class="c-header_title_line">outperform their peers<br>that do not. </span>
41 </div>
42 </div>
43 </div>
44 <div class="row move_2">
45 <div class="col-md-12 content-area">
46 <div class="overlay-desc2 header">
47 <h1 class="c-header_title_line">That alignment can evolve</h1>
48 <span class="c-header_title_line">organization-wide or by product, service or project.</span>
49 </div>
50 </div>
51 </div>
52 </div>
53 </div>
54 </div>
55 </div>
56 <div id="vc2">
57 <div class="video-cont video2">
58 <video autoplay muted loop class="myVideo ">
30 <source src="<?php echo get_stylesheet_directory_uri(); ?>/assets/istockphoto-1307041439-640_adpp_is.mp4" type="video/mp4"> 59 <source src="<?php echo get_stylesheet_directory_uri(); ?>/assets/istockphoto-1307041439-640_adpp_is.mp4" type="video/mp4">
31 <track label="English" kind="subtitles" srclang="en" src="" > 60 <track label="English" kind="subtitles" srclang="en" src="" >
32 </video> 61 </video>
62 <div class="container">
63 <div class="row move_3">
64 <div class="col-md-12 content-area">
65 <div class="overlay-desc2 mid header">
66 <span class="c-header_title_line">Tenzing helps its clients <br>
67 outperform their peers or competitors <br>
68 by creating and implementing great</span>
69 <h1 class="c-header_title_line">transformative, <br>
70 compelling, <br>
71 almost magical</h1>
72 <span class="c-header_title_line">brand stories and experiences. </span>
73 </div>
74 </div>
75 </div>
76 <div class="row move_4">
77 <div class="col-md-12 content-area">
78 <div class="overlay-desc2 mid header">
79 <h1 class="c-header_title_line">transformative, <br>
80 compelling, <br>
81 almost magical</h1>
82 <span class="c-header_title_line">in both the digital and analogue worlds. </span>
83 </div>
84 </div>
85 </div>
86 </div>
87 </div>
88 </div>
89 <div id="vc3">
90 <div class="video-cont">
91 <video autoplay muted loop id="v3" class="myVideo">
92 <source src="<?php echo get_stylesheet_directory_uri(); ?>/assets/istockphoto-1372856608-640_adpp_is.mp4" type="video/mp4">
93 <track label="English" kind="subtitles" srclang="en" src="" >
94 </video>
95
96 <div class="container">
97
98 </div>
99 </div>
100 </div>
101 </div>
33 <div class="<?php echo esc_attr( $container ); ?>" id="content"> 102 <div class="<?php echo esc_attr( $container ); ?>" id="content">
34 103
35 <div class="row"> 104 <div class="row">
...@@ -51,7 +120,6 @@ if ( is_page_template( 'page-templates/no-title.php' ) ) { ...@@ -51,7 +120,6 @@ if ( is_page_template( 'page-templates/no-title.php' ) ) {
51 ?> 120 ?>
52 121
53 </main> 122 </main>
54 </div>
55 </div><!-- #primary --> 123 </div><!-- #primary -->
56 124
57 </div><!-- .row --> 125 </div><!-- .row -->
......
1 import LocomotiveScroll from 'locomotive-scroll'; 1 import LocomotiveScroll from 'locomotive-scroll';
2 import gsap from "gsap";
3 import ScrollTrigger from "gsap/ScrollTrigger";
4 import ScrollToPlugin from "gsap/ScrollToPlugin";
2 5
3 const scroll = new LocomotiveScroll(); 6 //const scroll = new LocomotiveScroll();
4 7
5 document.addEventListener("DOMContentLoaded", function() { 8 document.addEventListener("DOMContentLoaded", function() {
6 window.addEventListener('scroll', function() { 9 window.addEventListener('scroll', function() {
7 if (window.scrollY > 57) { 10 if (window.scrollY > 57) {
8 document.getElementById('main-nav').classList.add('fixed-top'); 11 document.getElementById('main-nav').classList.add('fixed-top');
9
10 } else { 12 } else {
11 document.getElementById('main-nav').classList.remove('fixed-top'); 13 document.getElementById('main-nav').classList.remove('fixed-top');
12 } 14 }
13 if (window.scrollY > 1500) {
14
15 // document.getElementById('v1').classList.add('fixed-video');
16 } else {
17 // document.getElementById('v1').classList.remove('fixed-video');
18
19 }
20 }); 15 });
21 }); 16 });
17 gsap.registerPlugin(ScrollTrigger);
18
19 // Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll
20
21 // const locoScroll = new LocomotiveScroll({
22 // el: document.querySelector("#js-scroll"),
23 // smooth: true
24 // });
25
26 // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
27 //locoScroll.on("scroll", ScrollTrigger.update);
28
29 // tell ScrollTrigger to use these proxy methods for the "#js-scroll" element since Locomotive Scroll is hijacking things
30 // ScrollTrigger.scrollerProxy("#js-scroll", {
31 // scrollTop(value) {
32 // return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
33 // }, // we don't have to define a scrollLeft because we're only scrolling vertically.
34 // getBoundingClientRect() {
35 // return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
36 // },
37 // // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
38 // pinType: document.querySelector("#js-scroll").style.transform ? "transform" : "fixed"
39 // });
40
41 // var tl = gsap.timeline({
42 // scrollTrigger: {
43 // trigger: "#vc1",
44 // scroller: "body",
45 // markers:true,
46 // scrub: true,
47 // pin: true,
48 // start: "top top",
49 // end: "+=100%",
50 // }
51 // });
52
53
54 var tl = gsap.timeline({
55 scrollTrigger: {
56 trigger: "#vc1",
57 scroller: "body",
58 markers:true,
59 scrub: true,
60 pin: true,
61 start: "top top",
62 end: "+=150%",
63 }
64 });
22 65
66 var tl1 = gsap.timeline({
67 scrollTrigger: {
68 trigger: "#vc2",
69 scroller: "body",
70 markers:true,
71 scrub: true,
72 pin: true,
73 start: "top top",
74 end: "+=150%",
75 }
76 });
23 77
24 // select video element 78 // ScrollTrigger.create({
25 var vid = document.getElementById('v0'); 79 // trigger: "#vc1",
26 //var vid = $('#v0')[0]; // jquery option 80 // scroller: "#js-scroll",
27 81 // markers:true,
28 // pause video on load 82 // scrub: true,
29 vid.pause(); 83 // pin: true,
30 84 // start: "top top",
31 // pause video on document scroll (stops autoplay once scroll started) 85 // end: "+=100%"
32 window.onscroll = function(){ 86 // });
33 vid.pause();
34 };
35
36 // refresh video frames on interval for smoother playback
37 setInterval(function(){
38 vid.currentTime = window.pageYOffset/300;
39 }, 40);
40
41
42
43 // jQuery(document).ready(function($) {
44 // // select video element
45 // var vid = document.getElementById('v0');
46 // var time = $('#time');
47 // var scroll2 = $('#scroll');
48 // var body = $('.video-cont');
49 // var windowheight = $(window).height() - 20;
50
51 // var scrollpos = window.pageYOffset / 400;
52 // var targetscrollpos = scrollpos;
53 // var accel = 0;
54
55 // // ---- Values you can tweak: ----
56 // var accelamount = 0.01; //How fast the video will try to catch up with the target position. 1 = instantaneous, 0 = do nothing.
57 // var bounceamount = 0.91; //value from 0 to 1 for how much backlash back and forth you want in the easing. 0 = no bounce whatsoever, 1 = lots and lots of bounce
58
59 // // pause video on load
60 // vid.pause();
61
62 // window.onscroll = function() {
63 // //Set the video position that we want to end up at:
64 // targetscrollpos = ($(document).scrollTop() - $(vid).offset().top) / $(vid).height();
65 // targetscrollpos = targetscrollpos > 0 ? targetscrollpos < $(vid).height() ? targetscrollpos : $(vid).height() : 0;
66
67 // targetscrollpos *= 13500/ $(vid).height();
68 // //move the red dot to a position across the side of the screen
69 // //that indicates how far we've scrolled.
70 // scroll2.css('top', 10 + (targetscrollpos * windowheight));
71 // };
72
73 // setInterval(function() {
74
75 // //Accelerate towards the target:
76 // accel += (targetscrollpos - scrollpos) * accelamount;
77
78 // //clamp the acceleration so that it doesnt go too fast
79 // if (accel > 1) accel = 1;
80 // if (accel < -1) accel = -1;
81
82 // //move the video scroll position according to the acceleration and how much bouncing you selected:
83 // scrollpos = (scrollpos + accel) * (bounceamount) + (targetscrollpos * (1 - bounceamount));
84
85 // //move the blue dot to a position across the side of the screen
86 // //that indicates where the current video scroll pos is.
87 // time.css('top', 10 + (scrollpos / targetscrollpos * 400 * windowheight));
88
89 // //update video playback
90 // vid.currentTime = scrollpos;
91 // vid.pause();
92
93 // }, 40);
94 87
88 tl.to(".move_1", {y: -700}, 0).to(".move_2", {y: -800},0)
89 tl1.to(".move_3", {y: -786}, 0).to(".move_4", {y: -786},0)
95 90
91 // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
92 //ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
96 93
97 // });
...\ No newline at end of file ...\ No newline at end of file
94 // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
95 //ScrollTrigger.refresh();
......
This diff could not be displayed because it is too large.
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
33 } 33 }
34 #main-nav.fixed-top{ 34 #main-nav.fixed-top{
35 position: fixed; 35 position: fixed;
36 z-index: 999; 36 z-index: 9999;
37 top: 0px; 37 top: 0px;
38 left: 0px; 38 left: 0px;
39 width: 100%; 39 width: 100%;
...@@ -50,38 +50,140 @@ ...@@ -50,38 +50,140 @@
50 } 50 }
51 } 51 }
52 52
53
53 .video-sizer{ 54 .video-sizer{
54 position:relative; 55 position:relative;
55 z-index: 0; 56 z-index: 0;
56 opacity: 0; 57 opacity: 0;
57 } 58 }
58 #v{ 59
59 height: 2000px;
60 }
61
62 .video-cont{ 60 .video-cont{
61 height: 100vh;
63 position: relative; 62 position: relative;
64 left: 0px; 63 z-index: 9;
65 64 overflow: hidden;
66 width: 100%; 65 background-position: center center;
67 overflow: hidden; 66 background-repeat: no-repeat;
67 -webkit-background-size: cover;
68 -moz-background-size: cover;
69 background-size: cover;
68 70
69 } 71 }
70 .myVideo { 72 .myVideo {
71 position: relative; 73 position: absolute;
72 right: 0; 74 min-width: 100%;
73 top: 0; 75 min-height: 100%;
74 min-width: 100%; 76 width: auto;
75 margin: auto; 77 height: auto;
76 display: block; 78 top: 50%;
77 z-index: 99; 79 left: 50%;
80 -o-object-fit: contain;
81 object-fit: contain;
82 -webkit-transform: translate(-50%,-50%);
83 -moz-transform: translate(-50%,-50%);
84 -ms-transform: translate(-50%,-50%);
85 -o-transform: translate(-50%,-50%);
86 transform: translate(-50%,-50%);
78 } 87 }
79 88
80 .fixed-video{ 89
81 position: fixed;
82 }
83 90
84 91
85 #full-width-page-wrapper{ 92 #full-width-page-wrapper{
86 padding-top: 0px; 93 padding-top: 0px;
94 }
95
96 .scroll-content{
97 position: relative;
98 z-index: 999;
99 }
100 .overlay-desc {
101 position: relative;
102 z-index: 999;
103 display: flex;
104 flex-direction: column;
105 align-items: center;
106 justify-content: center;
107 height: 786px;
108 span{
109 align-self:flex-start;
110 color: #666666;
111 font-size: 24px;
112 line-height: 32px;
113 }
114 h1{
115 align-self:flex-start;
116 color: #333333;
117 font-size: 40px;
118 line-height: 48px;
119 }
120 }
121
122 .overlay-desc2 {
123 position: relative;
124 z-index: 999;
125 display: flex;
126 flex-direction: column;
127 align-items: center;
128 justify-content:flex-end;
129 height: 786px;
130 span{
131 align-self:flex-end;
132 color: #666666;
133 font-size: 24px;
134 line-height: 32px;
135 width: 50%;
136 }
137 h1{
138 align-self:flex-end;
139 color: #333333;
140 font-size: 40px;
141 line-height: 48px;
142 width: 50%;
143 }
144 }
145 .overlay-desc2.mid{
146 justify-content:center;
147 }
148
149
150 .c-header_title_linerr {
151 display: block;
152 opacity: 0;
153 transform-origin: center top;
154 transform-style: preserve-3d;
155 transform: translateY(100%) rotateX(-80deg);
156 transition: opacity 0s cubic-bezier(0.215, 0.610, 0.355, 1.000), transform 0s cubic-bezier(0.215, 0.610, 0.355, 1.000);
157
158 html.is-ready & {
159 transform: none;
160 opacity: 1;
161 transition-duration: 0.8s;
162
163 @for $i from 1 through 4 {
164 &:nth-child(#{$i}){
165 transition-delay: $i*0.1s;
166 }
167 }
168 }
169
170 span {
171 display: inline-block;
172 }
173
174 &.-version {
175 text-transform: none;
176 font-size: 0;
177 }
178 }
179
180
181 .line {
182 width: 100%;
183 max-width: 800px;
184 height: 8px;
185 margin: 0 0 10px 0;
186 position: relative;
187 display: inline-block;
188 background-color: rgba(255,255,255,1);
87 } 189 }
...\ No newline at end of file ...\ No newline at end of file
......