978 lines
46 KiB
Plaintext
978 lines
46 KiB
Plaintext
@using WebGrease.Css.Extensions
|
||
@{
|
||
Layout = null;
|
||
bool displayLanEdit = this.User.IsInRole("Admin");
|
||
}
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- Title -->
|
||
<title>新生命靈糧堂 | New Life Christian Center of Arcadia </title>
|
||
|
||
<!-- Required Meta Tags Always Come First -->
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||
|
||
<!-- Favicon -->
|
||
<link rel="shortcut icon" href="/favicon.ico">
|
||
|
||
<!-- Google Fonts -->
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans%3A300%2C400%2C500%2C600%2C700%2C800%7CPlayfair+Display%7CRoboto%7CRaleway%7CSpectral%7CRubik">
|
||
|
||
@Styles.Render("~/Content/bootstrap")
|
||
@Styles.Render("~/Content/Common")
|
||
@Styles.Render("~/Content/UnitfyCoreCSS")
|
||
@Styles.Render("~/Content/Index")
|
||
@Scripts.Render("~/bundles/modernizr")
|
||
@Scripts.Render("~/bundles/jquery")
|
||
|
||
<style>
|
||
.particle-network-animation {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 100vh;
|
||
/*background-color: #171717;
|
||
*/
|
||
z-index: 50;
|
||
}
|
||
|
||
.glow {
|
||
z-index: -1;
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
background-image: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0));
|
||
}
|
||
|
||
.glow-1 {
|
||
width: 150vw;
|
||
height: 150vh;
|
||
margin-top: -75vh;
|
||
margin-left: -75vw;
|
||
animation: glow-1-move 25s linear infinite both;
|
||
}
|
||
|
||
@@keyframes glow-1-move {
|
||
from {
|
||
transform: translate(-100%, 100%);
|
||
}
|
||
|
||
to {
|
||
transform: translate(100%, -100%);
|
||
}
|
||
}
|
||
|
||
.glow-2 {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
margin-top: -50vh;
|
||
margin-left: -50vw;
|
||
animation: glow-2-move 25s linear 8.33333s infinite both;
|
||
}
|
||
|
||
@@keyframes glow-2-move {
|
||
from {
|
||
transform: translate(-100%, 0%);
|
||
}
|
||
|
||
to {
|
||
transform: translate(100%, 100%);
|
||
}
|
||
}
|
||
|
||
.glow-3 {
|
||
width: 120vw;
|
||
height: 120vh;
|
||
margin-top: -60vh;
|
||
margin-left: -60vw;
|
||
animation: glow-3-move 25s linear 16.66667s infinite both;
|
||
}
|
||
|
||
@@keyframes glow-3-move {
|
||
from {
|
||
transform: translate(100%, 100%);
|
||
}
|
||
|
||
to {
|
||
transform: translate(0%, -100%);
|
||
}
|
||
}
|
||
</style>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
<!-- JS Global Compulsory -->
|
||
@Scripts.Render("~/bundles/bootstrap")
|
||
@Scripts.Render("~/bundles/UnitfyCore")
|
||
<main>
|
||
<!-- Header v1 -->
|
||
<header id="js-header" class="u-header u-header--sticky-top u-header--change-appearance"
|
||
data-header-fix-moment="100">
|
||
<div class="dark-theme u-header__section g-bg-black-opacity-0_4 g-transition-0_3 g-py-8 g-py-10--md"
|
||
data-header-fix-moment-exclude="dark-theme g-bg-black-opacity-0_4 g-py-10--md"
|
||
data-header-fix-moment-classes="light-theme u-theme-shadow-v1 g-bg-white g-py-5--md">
|
||
<nav class="navbar navbar-expand-lg p-0 g-px-15">
|
||
<div class="mx-auto">
|
||
<a href="/" class="g-hidden-lg-up navbar-brand mr-0">
|
||
@* light *@
|
||
<img class="d-block g-height-50 g-height-60--md" src="/images/logo-light.png" alt="Image Description"
|
||
data-header-fix-moment-exclude="d-block"
|
||
data-header-fix-moment-classes="d-none">
|
||
|
||
<img class="d-none g-height-50 g-height-60--md" src="/images/logo-dark.png" alt="Image Description"
|
||
data-header-fix-moment-exclude="d-none"
|
||
data-header-fix-moment-classes="d-block">
|
||
</a>
|
||
|
||
<!-- Navigation -->
|
||
<div class="js-mega-menu collapse navbar-collapse align-items-center flex-sm-row" id="navBar">
|
||
<ul class="js-scroll-nav navbar-nav align-items-lg-center text-uppercase g-font-weight-700 g-letter-spacing-1 g-font-size-12 g-pt-20 g-pt-0--lg mx-auto"
|
||
data-splitted-breakpoint="992">
|
||
|
||
|
||
<li class="nav-item g-mr-30--lg g-mb-7 g-mb-0--lg">
|
||
<a href="#Information" class="nav-link p-0">關於我們</a>
|
||
</li>
|
||
<li class="nav-item g-mr-30--lg g-mb-7 g-mb-0--lg">
|
||
<a href="#CellGroup" class="nav-link p-0">細胞小組</a>
|
||
</li>
|
||
<!-- Logo -->
|
||
<li class="g-hidden-lg-down nav-logo-item g-mx-15--lg">
|
||
<a href="#hometop" class="js-go-to navbar-brand mr-0"
|
||
data-type="static">
|
||
<img class="d-block g-height-50 g-height-60--md" src="/images/logo-light.png" alt="Image Description"
|
||
data-header-fix-moment-exclude="d-block"
|
||
data-header-fix-moment-classes="d-none">
|
||
|
||
<img class="d-none g-height-50 g-height-60--md" src="/images/logo-dark.png" alt="Image Description"
|
||
data-header-fix-moment-exclude="d-none"
|
||
data-header-fix-moment-classes="d-block">
|
||
</a>
|
||
</li>
|
||
<li class="nav-item g-mr-30--lg g-mb-7 g-mb-0--lg">
|
||
<a href="#News" class="nav-link p-0">最新消息</a>
|
||
</li>
|
||
<li class="nav-item g-mr-30--lg g-mb-7 g-mb-0--lg">
|
||
<a href="#SundayMessage" class="nav-link p-0">主日信息</a>
|
||
</li>
|
||
<!-- End Logo -->
|
||
@*
|
||
@Html.Partial("_LoginPartial")*@
|
||
</ul>
|
||
</div>
|
||
<!-- End Navigation -->
|
||
<!-- Responsive Toggle Button -->
|
||
<button class="navbar-toggler btn g-line-height-1 g-brd-none g-pa-0 g-pos-abs g-top-15 g-right-0" type="button"
|
||
aria-label="Toggle navigation"
|
||
aria-expanded="false"
|
||
aria-controls="navBar"
|
||
data-toggle="collapse"
|
||
data-target="#navBar">
|
||
<span class="hamburger hamburger--slider">
|
||
<span class="hamburger-box">
|
||
<span class="hamburger-inner"></span>
|
||
</span>
|
||
</span>
|
||
</button>
|
||
<!-- End Responsive Toggle Button -->
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
<!-- End Header v1 -->
|
||
<!-- Section Content -->
|
||
<section id="hometop"></section>
|
||
<section id="home" class="u-bg-overlay g-pos-rel g-theme-bg-blue-dark-v1-opacity-0_8--after">
|
||
|
||
<div class="js-carousel"
|
||
data-autoplay="true"
|
||
data-infinite="true"
|
||
data-fade="true"
|
||
data-speed="5000">
|
||
<div class="js-slide g-bg-img-hero g-height-100vh" style="background-image: url(/Images/background.jpg);"></div>
|
||
<div class="js-slide g-bg-img-hero g-height-100vh" style="background-image: url(/Images/background3.jpg);"></div>
|
||
|
||
</div>
|
||
|
||
<div class="u-bg-overlay__inner g-absolute-centered w-100" style="z-index: 55">
|
||
@*<div style="z-index: 55;position: absolute;top: calc(50VH - 80px);left: calc(50% - 200px);/*! right: 0; */">*@
|
||
|
||
<div class="text-center">
|
||
<div class="text-uppercase u-heading-v2-4--bottom u-promo-title g-brd-primary">
|
||
<h3 class="h3 g-letter-spacing-7 g-font-size-12 g-font-weight-400 g-color-white g-mb-25">
|
||
與我們連結
|
||
</h3>
|
||
|
||
<h2 class="u-heading-v2__title g-line-height-1 g-letter-spacing-3 g-font-size-40 g-font-size-50--md g-color-white mb-0">
|
||
<span class="d-block d-md-inline g-color-primary" data-animation="lightSpeedIn" data-animation-delay="500" data-animation-duration="1000">亞凱迪亞</span> 新生命靈糧堂
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class='particle-network-animation'>
|
||
|
||
</div>
|
||
</section>
|
||
<!-- End Section Content -->
|
||
|
||
<section id="Information" class="g-pt-50">
|
||
<div class="container g-mb-70">
|
||
<div class="row align-items-center g-mb-20">
|
||
<div class="col-md-7 order-1 order-md-2">
|
||
<div class="g-color-primary g-mb-20 u-heading-v2-2--bottom">
|
||
<h3 class="h3 g-letter-spacing-5 g-font-size-12 g-font-weight-400 g-color-primary g-mb-25">
|
||
About Us
|
||
@*@Html.Raw("Index_Description_SubTitle".GetHtml(displayLanEdit))*@
|
||
</h3>
|
||
<h2 class="g-font-size-40 g-font-weight-700 mb-0 text-uppercase u-heading-v8__title">
|
||
|
||
關於我們
|
||
</h2>
|
||
</div>
|
||
|
||
<p class="g-font-size-18 g-pr-20 mb-0">
|
||
神呼召我們在北美建立一個與眾不同的教會。我們是一個負有特定使命、帶動復興的小組教會。我們期待成為一個教會的典範。靠著神的恩典，我們必須成為一個
|
||
</p>
|
||
|
||
</div>
|
||
<div class="col-md-5 text-right order-0 order-md-3">
|
||
<h1 class="g-font-size-45 g-font-size-55--md g-font-weight-700 g-mb-0--md g-mb-20 text-uppercase u-heading-v8__title">
|
||
<div data-animation="fadeInLeft" data-animation-delay="0" data-animation-duration="1000">新生命靈糧堂</div>
|
||
<div class="d-block g-color-primary g-mt-30" data-animation="lightSpeedIn" data-animation-delay="500" data-animation-duration="1000">亞凱迪亞</div>
|
||
|
||
</h1>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row align-items-center g-mt-5">
|
||
<div class="col-md-7 ">
|
||
<div class="g-color-primary g-mb-10 u-heading-v2-2--bottom">
|
||
<h2 class="g-font-weight-700 mb-0 text-uppercase u-heading-v8__title">
|
||
|
||
主日崇拜時間 & 地點
|
||
</h2>
|
||
</div>
|
||
<p>
|
||
享用美食時間：6:30 PM - 7:00PM<br /><br />
|
||
主日崇拜時間：7:00 PM - 9:00PM<br /><br />
|
||
地點：<a href="https://goo.gl/maps/icnXwHPz9rF2" target="_blank">1881 S 1st Ave, Arcadia, CA 91006</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Timeline -->
|
||
<section id="CellGroup" class="g-bg-lightred g-py-100">
|
||
<div class="text-center g-mb-10">
|
||
<div class="container">
|
||
|
||
<div class="text-uppercase u-heading-v2-4--bottom g-brd-white g-mb-30">
|
||
<strong class="d-inline-block g-color-white g-mb-20 g-px-10 g-theme-bg-blue-dark-v1 h6">
|
||
屬靈的大家庭
|
||
</strong>
|
||
<br />
|
||
<h2 class="u-heading-v2__title g-line-height-1 g-letter-spacing-2 g-font-size-30 g-font-size-40--md g-color-white mb-0">
|
||
細胞小組
|
||
</h2>
|
||
|
||
</div>
|
||
<p class=" g-color-white">
|
||
Spiritual maturity is for everyone — no matter what your age is
|
||
<br />
|
||
加入一個合適自己的小組，學習、成長並紮根。在生命中得到成長與轉變，活出基督的樣式。
|
||
</p>
|
||
</div>
|
||
<div class="g-pt-30 px-3 px-md-5">
|
||
<!-- Row -->
|
||
<div class="row sameHeight text-left">
|
||
<div class="col-md-6 mb-4" data-animation="rotateInDownLeft" data-animation-delay="0" data-animation-duration="1000">
|
||
<div class="row no-gutters">
|
||
<div class="col-md-7">
|
||
<div class="g-height-100x--md g-opacity-0_8--hover g-opacity-1 g-pa-15 g-pa-50--md g-theme-bg-gray-light-v2 g-theme-color-gray-dark-v3 g-theme-bg-blue-dark-v1--hover g-parent g-transition--ease-in g-transition-0_2">
|
||
|
||
<h3 class="text-uppercase g-line-height-1_2 g-font-weight-700 g-mb-25 g-color-white--parent-hover">
|
||
約瑟一組
|
||
</h3>
|
||
<p class=" g-mb-30 g-color-white--parent-hover">
|
||
我們每周五18:30-19:30是Potluck時間
|
||
|
||
<br />
|
||
19:30-21:30是破冰、唱詩、分享、分擔時光。
|
||
|
||
|
||
<br />
|
||
歡迎住在Duarte City附近的新朋友加入我們的小組。
|
||
|
||
<br />
|
||
<br />小組長聯絡電話是：Mark:(626)532-0081
|
||
</p>
|
||
@*<a href="#!" class="text-uppercase g-font-weight-700 g-font-size-11 g-text-underline--none--hover">
|
||
Read More
|
||
</a>*@
|
||
</div>
|
||
</div>
|
||
<div class="col-md-5 g-bg-cover g-bg-img-hero g-bg-white-opacity-0_7--after m-after-width-60" style="background-image: url(/Images/CellGroup/IMG_7071.JPG);"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 mb-4" data-animation="rotateInDownRight" data-animation-delay="300" data-animation-duration="1000">
|
||
<div class="row no-gutters">
|
||
<div class="col-md-7">
|
||
<div class="g-height-100x--md g-opacity-0_8--hover g-opacity-1 g-pa-15 g-pa-50--md g-theme-bg-gray-light-v2 g-theme-color-gray-dark-v3 g-theme-bg-blue-dark-v1--hover g-parent g-transition--ease-in g-transition-0_2">
|
||
|
||
<h3 class="text-uppercase g-line-height-1_2 g-font-weight-700 g-mb-25 g-color-white--parent-hover">
|
||
約瑟二組
|
||
|
||
</h3>
|
||
<p class=" g-mb-30 g-color-white--parent-hover">
|
||
我們是一個以神的話語為核心，訓練組員
|
||
彼此服事，彼此相愛，以傳福音為大使命的小組
|
||
|
||
|
||
<br />
|
||
|
||
我們每周三 07:00 PM - 09:40 PM 在Monrovia小組長家聚會，共享晚餐，營照放鬆的屬靈時光
|
||
|
||
<br />
|
||
歡迎住在Duarte City附近的新朋友加入我們的小組。
|
||
|
||
</p>
|
||
@*<a href="#!" class="text-uppercase g-font-weight-700 g-font-size-11 g-text-underline--none--hover">
|
||
Read More
|
||
</a>*@
|
||
</div>
|
||
</div>
|
||
<div class="col-md-5 g-bg-cover g-bg-img-hero g-bg-white-opacity-0_7--after m-after-width-60" style="background-image: url(/Images/CellGroup/IMG_7077.JPG);"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="col-md-6 mb-4" data-animation="rotateInUpLeft" data-animation-delay="0" data-animation-duration="1000">
|
||
|
||
<div class="row no-gutters">
|
||
<div class="col-md-7">
|
||
<div class=" g-theme-bg-blue-dark-v1--hover g-parent g-height-100x--md g-opacity-0_8--hover g-opacity-1 g-pa-15 g-pa-50--md g-theme-bg-gray-light-v2 g-theme-color-gray-dark-v3 g-transition--ease-in g-transition-0_2">
|
||
|
||
<h3 class="text-uppercase g-line-height-1_2 g-font-weight-700 g-mb-25 g-color-white--parent-hover">
|
||
|
||
二街一組
|
||
|
||
</h3>
|
||
<p class="g-height-100x--md g-mb-30 g-color-white--parent-hover">
|
||
<br />
|
||
小組特色:老少適宜的小組.以愛做連結營造家的氛圍.使人渴慕神的話語.小組成員都訓練有服事主的心意.装備成各職場最佳神的代言人
|
||
<br />
|
||
<br />
|
||
希望加入成員:（35-70歲）夫妻0r單身皆可.
|
||
|
||
</p>
|
||
@*<a href="#!" class="text-uppercase g-font-weight-700 g-font-size-11 g-text-underline--none--hover">Read More</a>*@
|
||
</div>
|
||
</div>
|
||
<div class="col-md-5 g-bg-cover g-bg-img-hero g-bg-white-opacity-0_7--after m-after-width-60" style="background-image: url(/Images/CellGroup/IMG_7064.JPG);"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 mb-4" data-animation="rotateInUpRight" data-animation-delay="300" data-animation-duration="1000">
|
||
<div class="row no-gutters">
|
||
<div class="col-md-7">
|
||
<div class="g-height-100x--md g-opacity-0_8--hover g-opacity-1 g-pa-15 g-pa-50--md g-theme-bg-gray-light-v2 g-theme-color-gray-dark-v3 g-theme-bg-blue-dark-v1--hover g-parent g-transition--ease-in g-transition-0_2">
|
||
|
||
<h3 class="text-uppercase g-line-height-1_2 g-font-weight-700 g-mb-25 g-color-white--parent-hover">
|
||
羔羊小組
|
||
|
||
</h3>
|
||
<p class=" g-mb-30 g-color-white--parent-hover">
|
||
羔羊小組是以神為中心，由一群中年的父母親組成的小組，彼此相愛，勝似家人，在移民及教養孩童過程中彼此扶持。願藉著分享神的愛及神的話語中，更多實踐主的大誡命及大使命。
|
||
|
||
</p>
|
||
@*<a href="#!" class="text-uppercase g-font-weight-700 g-font-size-11 g-text-underline--none--hover">
|
||
Read More
|
||
</a>*@
|
||
</div>
|
||
</div>
|
||
<div class="col-md-5 g-bg-cover g-bg-img-hero g-bg-white-opacity-0_7--after m-after-width-60" style="background-image: url(/Images/CellGroup/IMG_7052.JPG);"></div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center">
|
||
</div>
|
||
</section>
|
||
<!-- End Timeline -->
|
||
|
||
<section id="News" class="auto-init dzsparallaxer dzsprx-readyall height-is-based-on-content mode-scroll">
|
||
<!-- Parallax Image -->
|
||
<div class="divimage dzsparallaxer--target w-100 g-bg-size-cover u-bg-overlay g-bg-black-opacity-0_8--after" style="height: 125%; background: rgba(0, 0, 0, 0) url('/Images/background2.jpg') repeat scroll 0% 0%; transform: translate3d(0px, -70.4277px, 0px);"></div>
|
||
<!-- End Parallax Image -->
|
||
|
||
<div class="container g-pb-200--lg g-pb-60 g-pt-150--md g-pt-20 u-bg-overlay__inner">
|
||
<div class="text-center g-mb-60">
|
||
<h5 class="h5 g-color-white">
|
||
WHATE WE OFFER
|
||
</h5>
|
||
<h2 class="h1 g-color-white g-font-size-24 g-font-size-40--md">
|
||
在生命中得到成長與轉變，活出基督的樣式
|
||
|
||
</h2>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<section class="slope g-bg-white">
|
||
<div class="container">
|
||
|
||
<div class="row unslope g-min-height-50vh">
|
||
<div class="col-md-8 g-pt-80--md">
|
||
<p class="h1 g-color-gray-dark-v5">
|
||
<span class="g-color-primary g-font-size-40 g-font-size-60--md">最新</span>活動與特會消息
|
||
</p>
|
||
<p>
|
||
Coming Soon...
|
||
</p>
|
||
<a class="btn btn-danger g-mt-20" href="@Url.Action("Index", "Free")">
|
||
Learn More
|
||
|
||
</a>
|
||
</div>
|
||
<div class="d-none d-md-block col-md-4" data-animation="fadeInRight" data-animation-delay="0" data-animation-duration="1000">
|
||
<img class="detach" src="/Images/free-f.png">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="slope g-theme-bg-blue-dark-v1" style="height: 200px;margin-top: -20px;"></section>
|
||
|
||
<section class="g-mt-minus-145--md g-mt-minus-200 g-theme-bg-blue-dark-v1">
|
||
<div class="container g-pos-rel g-z-index-3">
|
||
|
||
<div class="g-min-height-50vh row">
|
||
<div class="d-none d-md-block col-md-4" data-animation="wobble" data-animation-delay="300" data-animation-duration="1000">
|
||
<img class="detach" src="/Images/premium-f.png">
|
||
</div>
|
||
<div class="col-md-8 g-pt-80 g-pl-50 g-pb-40">
|
||
<p class="h1 g-color-gray-dark-v5">
|
||
<span class="g-color-primary g-font-size-40 g-font-size-60--md">教會</span>事工
|
||
|
||
</p>
|
||
<p>
|
||
Coming Soon...
|
||
|
||
</p>
|
||
<a class="btn btn-danger g-mt-20" href="@Url.Action("Index","Premium")">
|
||
Learn More
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section id="SundayMessage" class="g-py-100">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-3 text-center g-mb-30 g-mb-0--lg">
|
||
<div class="text-uppercase u-heading-v2-4--bottom g-brd-primary g-mb-30">
|
||
<h3 class="h3 g-letter-spacing-5 g-font-size-12 g-font-weight-400 g-color-primary g-mb-25">佈道信息</h3>
|
||
<h2 class="u-heading-v2__title g-line-height-1 g-letter-spacing-2 g-font-size-30 g-font-size-40--md mb-0">主日信息</h2>
|
||
</div>
|
||
|
||
<p class="g-mb-30">過去幾周的主日信息</p>
|
||
<p class="mb-0"> Sunday Service</p>
|
||
</div>
|
||
|
||
<div class="col-lg-9">
|
||
<div class="row">
|
||
<div class="col-md-4 text-center g-mb-30 g-mb-0--md g-px-5">
|
||
<div>
|
||
|
||
<iframe src="//www.youtube.com/embed/SrSZweEgklM" frameborder="0" allowfullscreen="" id="fitvid703063" class="w-100"></iframe>
|
||
</div>
|
||
<div class="text-uppercase g-mt-20 g-mb-20">
|
||
<h4 class="g-letter-spacing-1 g-font-size-11 g-font-weight-400 g-color-gray-dark-v5 g-mb-10">10/25/2018</h4>
|
||
<h2 class="g-letter-spacing-2 g-font-weight-600 g-font-size-18 g-mb-25">當周主題</h2>
|
||
</div>
|
||
|
||
<a href="#!" class="text-uppercase g-font-weight-700 g-font-size-11 g-text-underline--none--hover" tabindex="0">View</a>
|
||
</div>
|
||
|
||
<div class="col-md-4 text-center g-mb-30 g-mb-0--md g-px-5">
|
||
<iframe src="//www.youtube.com/embed/SrSZweEgklM" frameborder="0" allowfullscreen="" id="fitvid703063" class="w-100"></iframe>
|
||
|
||
<div class="text-uppercase g-mt-20 g-mb-20">
|
||
<h4 class="g-letter-spacing-1 g-font-size-11 g-font-weight-400 g-color-gray-dark-v5 g-mb-10">10/25/2018</h4>
|
||
<h2 class="g-letter-spacing-2 g-font-weight-600 g-font-size-18 g-mb-25">當周主題</h2>
|
||
</div>
|
||
|
||
<a href="#!" class="text-uppercase g-font-weight-700 g-font-size-11 g-text-underline--none--hover" tabindex="0">View</a>
|
||
</div>
|
||
|
||
<div class="col-md-4 text-center g-px-5">
|
||
<iframe src="//www.youtube.com/embed/SrSZweEgklM" frameborder="0" allowfullscreen="" id="fitvid703063" class="w-100"></iframe>
|
||
|
||
<div class="text-uppercase g-mt-20 g-mb-20">
|
||
<h4 class="g-letter-spacing-1 g-font-size-11 g-font-weight-400 g-color-gray-dark-v5 g-mb-10">10/25/2018</h4>
|
||
<h2 class="g-letter-spacing-2 g-font-weight-600 g-font-size-18 g-mb-25">當周主題</h2>
|
||
</div>
|
||
|
||
<a href="#!" class="text-uppercase g-font-weight-700 g-font-size-11 g-text-underline--none--hover" tabindex="0">View</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Timeline -->
|
||
<section id="refundPolicy" class="g-theme-bg-blue-dark-v1 g-pt-50">
|
||
<div class="container-flud g-px-20 g-px-100--md text-left">
|
||
<div class="row">
|
||
<div class="col-md-6 text-center text-md-left">
|
||
<div class="g-brd-primary g-mb-30 text-uppercase">
|
||
<span class="g-bg-primary g-color-white g-font-size-12 g-font-weight-400 g-letter-spacing-5 g-px-5 h3">
|
||
我們的異象
|
||
|
||
</span>
|
||
<h2 class="g-color-white g-font-size-23 g-font-size-30--md g-letter-spacing-2 g-line-height-1 g-mt-15 mb-0">
|
||
新⽣命靈糧堂的核⼼價值
|
||
|
||
</h2>
|
||
</div>
|
||
|
||
<p class="g-color-white-opacity-0_5 g-mb-30">
|
||
建立⼀一個以天國⽂文化為價值的使徒性⼩小組教會
|
||
<br />
|
||
Build an Apostolic Cell Church Where Disciples Live Out the Kingdom Culture.
|
||
|
||
</p>
|
||
</div>
|
||
<div class="col-md-6">
|
||
|
||
<div class="center-block g-pt-20 g-px-10 row">
|
||
<div class="col-4 col-md" data-animation="flipInY" data-animation-delay="0" data-animation-duration="1000">
|
||
<img src="/Images/Destiny/Destiny01.png" style="width: 100%" class="img-thumbnail">
|
||
</div>
|
||
<div class="col-4 col-md" data-animation="flipInY" data-animation-delay="300" data-animation-duration="1000">
|
||
<img src="/Images/Destiny/Destiny02.png" style="width: 100%" class="img-thumbnail">
|
||
</div>
|
||
<div class="col-4 col-md" data-animation="flipInY" data-animation-delay="900" data-animation-duration="1000">
|
||
<img src="/Images/Destiny/Destiny03.png" style="width: 100%" class="img-thumbnail">
|
||
</div>
|
||
<div class="col-4 col-md offset-2 offset-md-0 g-mt-10 g-mt-0--md" data-animation="flipInY" data-animation-delay="1200" data-animation-duration="1000">
|
||
<img src="/Images/Destiny/Destiny04.png" style="width: 100%" class="img-thumbnail">
|
||
</div>
|
||
<div class="col-4 col-md g-mt-10 g-mt-0--md" data-animation="flipInY" data-animation-delay="1500" data-animation-duration="1000">
|
||
<img src="/Images/Destiny/Destiny05.png" style="width: 100%" class="img-thumbnail">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</section>
|
||
<!-- End Timeline -->
|
||
|
||
@Html.Partial("_Footer")
|
||
<a class="js-go-to u-go-to-v1" href="#home"
|
||
data-type="fixed"
|
||
data-position='{
|
||
"bottom": 15,
|
||
"right": 15
|
||
}'
|
||
data-offset-top="400"
|
||
data-compensation="#js-header"
|
||
data-show-effect="zoomIn">
|
||
<i class="hs-icon hs-icon-arrow-top"></i>
|
||
</a>
|
||
</main>
|
||
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
$(function (parameters) {
|
||
// initialization of carousel
|
||
$.HSCore.components.HSCarousel.init('.js-carousel');
|
||
|
||
// initialization of header
|
||
$.HSCore.components.HSHeader.init($('#js-header'));
|
||
$.HSCore.helpers.HSHamburgers.init('.hamburger');
|
||
|
||
// initialization of tabs
|
||
$.HSCore.components.HSTabs.init('[role="tablist"]');
|
||
|
||
// initialization of HSMegaMenu component
|
||
$('.js-mega-menu').HSMegaMenu();
|
||
// initialization of go to section
|
||
$.HSCore.components.HSGoTo.init('.js-go-to');
|
||
|
||
$('#processes [role="tablist"] .nav-link').on('click', function () {
|
||
setTimeout(function () {
|
||
$('#processesTabs .js-carousel').slick('setPosition');
|
||
}, 200);
|
||
});
|
||
|
||
// initialization of countdowns
|
||
var countdowns = $.HSCore.components.HSCountdown.init('.js-countdown', {
|
||
yearsElSelector: '.js-cd-years',
|
||
monthElSelector: '.js-cd-month',
|
||
daysElSelector: '.js-cd-days',
|
||
hoursElSelector: '.js-cd-hours',
|
||
minutesElSelector: '.js-cd-minutes',
|
||
secondsElSelector: '.js-cd-seconds'
|
||
});
|
||
// initialization of scroll animation
|
||
$.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
|
||
|
||
// initialization of chart pies with rtl option
|
||
var rtlItems = $.HSCore.components.HSChartPie.init('.js-pie-rtl', {
|
||
rtl: true
|
||
});
|
||
});
|
||
|
||
|
||
// initialization of HSScrollNav
|
||
$.HSCore.components.HSScrollNav.init($('.js-scroll-nav'), {
|
||
duration: 700,
|
||
easing: 'easeOutExpo'
|
||
});
|
||
|
||
|
||
$(window).on('resize', function () {
|
||
setTimeout(function () {
|
||
$.HSCore.components.HSTabs.init('[role="tablist"]');
|
||
}, 200);
|
||
});
|
||
</script>
|
||
|
||
|
||
<script>
|
||
|
||
(function () {
|
||
|
||
var ParticleNetworkAnimation, PNA;
|
||
ParticleNetworkAnimation = PNA = function () { };
|
||
|
||
PNA.prototype.init = function (element) {
|
||
this.$el = $(element);
|
||
|
||
this.container = element;
|
||
this.canvas = document.createElement('canvas');
|
||
this.sizeCanvas();
|
||
this.container.appendChild(this.canvas);
|
||
this.ctx = this.canvas.getContext('2d');
|
||
this.particleNetwork = new ParticleNetwork(this);
|
||
|
||
this.bindUiActions();
|
||
|
||
return this;
|
||
};
|
||
|
||
PNA.prototype.bindUiActions = function () {
|
||
$(window).on('resize', function () {
|
||
// this.sizeContainer();
|
||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||
this.sizeCanvas();
|
||
this.particleNetwork.createParticles();
|
||
}.bind(this));
|
||
};
|
||
|
||
PNA.prototype.sizeCanvas = function () {
|
||
this.canvas.width = this.container.offsetWidth;
|
||
this.canvas.height = this.container.offsetHeight;
|
||
};
|
||
|
||
var Particle = function (parent, x, y) {
|
||
this.network = parent;
|
||
this.canvas = parent.canvas;
|
||
this.ctx = parent.ctx;
|
||
this.particleColor = returnRandomArrayitem(this.network.options.particleColors);
|
||
this.radius = getLimitedRandom(1.5, 2.5);
|
||
this.opacity = 0;
|
||
this.x = x || Math.random() * this.canvas.width;
|
||
this.y = y || Math.random() * this.canvas.height;
|
||
this.velocity = {
|
||
x: (Math.random() - 0.5) * parent.options.velocity,
|
||
y: (Math.random() - 0.5) * parent.options.velocity
|
||
};
|
||
};
|
||
|
||
Particle.prototype.update = function () {
|
||
if (this.opacity < 1) {
|
||
this.opacity += 0.01;
|
||
} else {
|
||
this.opacity = 1;
|
||
}
|
||
// Change dir if outside map
|
||
if (this.x > this.canvas.width + 100 || this.x < -100) {
|
||
this.velocity.x = -this.velocity.x;
|
||
}
|
||
if (this.y > this.canvas.height + 100 || this.y < -100) {
|
||
this.velocity.y = -this.velocity.y;
|
||
}
|
||
|
||
// Update position
|
||
this.x += this.velocity.x;
|
||
this.y += this.velocity.y;
|
||
};
|
||
|
||
Particle.prototype.draw = function () {
|
||
// Draw particle
|
||
this.ctx.beginPath();
|
||
this.ctx.fillStyle = this.particleColor;
|
||
this.ctx.globalAlpha = this.opacity;
|
||
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
|
||
this.ctx.fill();
|
||
};
|
||
|
||
var ParticleNetwork = function (parent) {
|
||
this.options = {
|
||
velocity: 1, // the higher the faster
|
||
density: 15000, // the lower the denser
|
||
netLineDistance: 200,
|
||
netLineColor: '#929292',
|
||
particleColors: ['#aaa']//['#aaa'] // ['#6D4E5C', '#aaa', '#FFC458' ]
|
||
};
|
||
this.canvas = parent.canvas;
|
||
this.ctx = parent.ctx;
|
||
|
||
this.init();
|
||
};
|
||
|
||
ParticleNetwork.prototype.init = function () {
|
||
// Create particle objects
|
||
this.createParticles(true);
|
||
|
||
// Update canvas
|
||
this.animationFrame = requestAnimationFrame(this.update.bind(this));
|
||
|
||
this.bindUiActions();
|
||
};
|
||
|
||
ParticleNetwork.prototype.createParticles = function (isInitial) {
|
||
// Initialise / reset particles
|
||
var me = this;
|
||
this.particles = [];
|
||
var quantity = this.canvas.width * this.canvas.height / this.options.density;
|
||
|
||
if (isInitial) {
|
||
var counter = 0;
|
||
clearInterval(this.createIntervalId);
|
||
this.createIntervalId = setInterval(function () {
|
||
if (counter < quantity - 1) {
|
||
// Create particle object
|
||
this.particles.push(new Particle(this));
|
||
}
|
||
else {
|
||
clearInterval(me.createIntervalId);
|
||
}
|
||
counter++;
|
||
}.bind(this), 250);
|
||
}
|
||
else {
|
||
// Create particle objects
|
||
for (var i = 0; i < quantity; i++) {
|
||
this.particles.push(new Particle(this));
|
||
}
|
||
}
|
||
};
|
||
|
||
ParticleNetwork.prototype.createInteractionParticle = function () {
|
||
// Add interaction particle
|
||
this.interactionParticle = new Particle(this);
|
||
this.interactionParticle.velocity = {
|
||
x: 0,
|
||
y: 0
|
||
};
|
||
this.particles.push(this.interactionParticle);
|
||
return this.interactionParticle;
|
||
};
|
||
|
||
ParticleNetwork.prototype.removeInteractionParticle = function () {
|
||
// Find it
|
||
var index = this.particles.indexOf(this.interactionParticle);
|
||
if (index > -1) {
|
||
// Remove it
|
||
this.interactionParticle = undefined;
|
||
this.particles.splice(index, 1);
|
||
}
|
||
};
|
||
|
||
ParticleNetwork.prototype.update = function () {
|
||
if (this.canvas) {
|
||
|
||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||
this.ctx.globalAlpha = 1;
|
||
|
||
// Draw connections
|
||
for (var i = 0; i < this.particles.length; i++) {
|
||
for (var j = this.particles.length - 1; j > i; j--) {
|
||
var distance, p1 = this.particles[i], p2 = this.particles[j];
|
||
|
||
// check very simply if the two points are even a candidate for further measurements
|
||
distance = Math.min(Math.abs(p1.x - p2.x), Math.abs(p1.y - p2.y));
|
||
if (distance > this.options.netLineDistance) {
|
||
continue;
|
||
}
|
||
|
||
// the two points seem close enough, now let's measure precisely
|
||
distance = Math.sqrt(
|
||
Math.pow(p1.x - p2.x, 2) +
|
||
Math.pow(p1.y - p2.y, 2)
|
||
);
|
||
if (distance > this.options.netLineDistance) {
|
||
continue;
|
||
}
|
||
|
||
this.ctx.beginPath();
|
||
this.ctx.strokeStyle = this.options.netLineColor;
|
||
this.ctx.globalAlpha = (this.options.netLineDistance - distance) / this.options.netLineDistance * p1.opacity * p2.opacity;
|
||
this.ctx.lineWidth = 0.7;
|
||
this.ctx.moveTo(p1.x, p1.y);
|
||
this.ctx.lineTo(p2.x, p2.y);
|
||
this.ctx.stroke();
|
||
}
|
||
}
|
||
|
||
// Draw particles
|
||
for (var i = 0; i < this.particles.length; i++) {
|
||
this.particles[i].update();
|
||
this.particles[i].draw();
|
||
}
|
||
|
||
if (this.options.velocity !== 0) {
|
||
this.animationFrame = requestAnimationFrame(this.update.bind(this));
|
||
}
|
||
|
||
}
|
||
else {
|
||
cancelAnimationFrame(this.animationFrame);
|
||
}
|
||
};
|
||
|
||
ParticleNetwork.prototype.bindUiActions = function () {
|
||
// Mouse / touch event handling
|
||
this.spawnQuantity = 3;
|
||
this.mouseIsDown = false;
|
||
this.touchIsMoving = false;
|
||
|
||
this.onMouseMove = function (e) {
|
||
if (!this.interactionParticle) {
|
||
this.createInteractionParticle();
|
||
}
|
||
this.interactionParticle.x = e.offsetX;
|
||
this.interactionParticle.y = e.offsetY;
|
||
}.bind(this);
|
||
|
||
this.onTouchMove = function (e) {
|
||
e.preventDefault();
|
||
this.touchIsMoving = true;
|
||
if (!this.interactionParticle) {
|
||
this.createInteractionParticle();
|
||
}
|
||
this.interactionParticle.x = e.changedTouches[0].clientX;
|
||
this.interactionParticle.y = e.changedTouches[0].clientY;
|
||
}.bind(this);
|
||
|
||
this.onMouseDown = function (e) {
|
||
this.mouseIsDown = true;
|
||
var counter = 0;
|
||
var quantity = this.spawnQuantity;
|
||
var intervalId = setInterval(function () {
|
||
if (this.mouseIsDown) {
|
||
if (counter === 1) {
|
||
quantity = 1;
|
||
}
|
||
for (var i = 0; i < quantity; i++) {
|
||
if (this.interactionParticle) {
|
||
this.particles.push(new Particle(this, this.interactionParticle.x, this.interactionParticle.y));
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
clearInterval(intervalId);
|
||
}
|
||
counter++;
|
||
}.bind(this), 50);
|
||
}.bind(this);
|
||
|
||
this.onTouchStart = function (e) {
|
||
e.preventDefault();
|
||
setTimeout(function () {
|
||
if (!this.touchIsMoving) {
|
||
for (var i = 0; i < this.spawnQuantity; i++) {
|
||
this.particles.push(new Particle(this, e.changedTouches[0].clientX, e.changedTouches[0].clientY));
|
||
}
|
||
}
|
||
}.bind(this), 200);
|
||
}.bind(this);
|
||
|
||
this.onMouseUp = function (e) {
|
||
this.mouseIsDown = false;
|
||
}.bind(this);
|
||
|
||
this.onMouseOut = function (e) {
|
||
this.removeInteractionParticle();
|
||
}.bind(this);
|
||
|
||
this.onTouchEnd = function (e) {
|
||
e.preventDefault();
|
||
this.touchIsMoving = false;
|
||
this.removeInteractionParticle();
|
||
}.bind(this);
|
||
|
||
this.canvas.addEventListener('mousemove', this.onMouseMove);
|
||
this.canvas.addEventListener('touchmove', this.onTouchMove);
|
||
this.canvas.addEventListener('mousedown', this.onMouseDown);
|
||
this.canvas.addEventListener('touchstart', this.onTouchStart);
|
||
this.canvas.addEventListener('mouseup', this.onMouseUp);
|
||
this.canvas.addEventListener('mouseout', this.onMouseOut);
|
||
this.canvas.addEventListener('touchend', this.onTouchEnd);
|
||
};
|
||
|
||
ParticleNetwork.prototype.unbindUiActions = function () {
|
||
if (this.canvas) {
|
||
this.canvas.removeEventListener('mousemove', this.onMouseMove);
|
||
this.canvas.removeEventListener('touchmove', this.onTouchMove);
|
||
this.canvas.removeEventListener('mousedown', this.onMouseDown);
|
||
this.canvas.removeEventListener('touchstart', this.onTouchStart);
|
||
this.canvas.removeEventListener('mouseup', this.onMouseUp);
|
||
this.canvas.removeEventListener('mouseout', this.onMouseOut);
|
||
this.canvas.removeEventListener('touchend', this.onTouchEnd);
|
||
}
|
||
};
|
||
|
||
var getLimitedRandom = function (min, max, roundToInteger) {
|
||
var number = Math.random() * (max - min) + min;
|
||
if (roundToInteger) {
|
||
number = Math.round(number);
|
||
}
|
||
return number;
|
||
};
|
||
|
||
var returnRandomArrayitem = function (array) {
|
||
return array[Math.floor(Math.random() * array.length)];
|
||
};
|
||
|
||
pna = new ParticleNetworkAnimation();
|
||
pna.init($('.particle-network-animation')[0]);
|
||
|
||
}());
|
||
|
||
</script>
|
||
|
||
|
||
|
||
</body>
|
||
</html>
|