Skip to content

Commit ce3db82

Browse files
Nathius262Nathius262
committed
updated app with latest year theme
1 parent 624daee commit ce3db82

File tree

9 files changed

+163
-97
lines changed

9 files changed

+163
-97
lines changed

‎public/css/style.css

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -114,11 +114,12 @@ p{
114114
padding: 9rem 0;
115115
margin-top: 50px;
116116
z-index: 1;
117+
height: 100vh;
117118
overflow: hidden;
118119
animation: backgroundTransition 50s infinite;
119120
}
120121

121-
/* Add overlay */
122+
/* Add overlay
122123
.intro::before {
123124
content: "";
124125
position: absolute;
@@ -127,24 +128,24 @@ p{
127128
right: 0;
128129
bottom: 0;
129130
background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity as needed */
130-
z-index: -1; /* Make sure the overlay is behind the text */
131-
}
131+
/*z-index: -1; Make sure the overlay is behind the text
132+
}*/
132133

133134
@keyframes backgroundTransition {
134135
0% {
135-
background: var(--white) url('../img/header.jfif') no-repeat center top/cover;
136+
background: var(--white) url('../img/theme1.jpg') no-repeat center top/cover;
136137
}
137138
45% {
138-
background: var(--white) url('../img/header2.jfif') no-repeat center top/cover;
139+
background: var(--white) url('../img/theme1.jpg') no-repeat center top/cover;
139140
}
140141
55% {
141-
background: var(--white) url('../img/wlc.jfif') no-repeat center top/cover;
142+
background: var(--white) url('../img/theme1.jpg') no-repeat center top/cover;
142143
}
143144
70% {
144-
background: var(--white) url('../img/media_bg.jfif') no-repeat center top/cover;
145+
background: var(--white) url('../img/theme2.jpg') no-repeat center top/cover;
145146
}
146147
100% {
147-
background: var(--blue) url('../img/zz2.jfif') no-repeat center top/cover;
148+
background: var(--blue) url('../img/theme2.jpg') no-repeat center top/cover;
148149
}
149150
}
150151

@@ -598,6 +599,9 @@ intro
598599
}
599600

600601
@media screen and (min-width:960px){
602+
603+
604+
601605
.birthing{
602606
font-size: calc(70px * 1.7);
603607
font-weight: bold;
@@ -652,6 +656,28 @@ MEDIA QUERY @ screen size below 768px
652656
.relative-container {
653657
width: 100vw;
654658
}
659+
.intro {
660+
animation: backgroundTransition 50s infinite;
661+
height: auto;
662+
}
663+
664+
@keyframes backgroundTransition {
665+
0% {
666+
background: var(--white) url('../img/theme1.jpg') no-repeat center top/fit;
667+
}
668+
45% {
669+
background: var(--white) url('../img/theme1.jpg') no-repeat center top/contain;
670+
}
671+
55% {
672+
background: var(--white) url('../img/theme1.jpg') no-repeat center top/contain;
673+
}
674+
70% {
675+
background: var(--white) url('../img/theme2.jpg') no-repeat center top/contain;
676+
}
677+
100% {
678+
background: var(--blue) url('../img/theme2.jpg') no-repeat center top/contain;
679+
}
680+
}
655681
}
656682

657683
/**********

‎public/img/event.jfif

-149 KB
Binary file not shown.

‎public/img/theme1.jpg

107 KB
Loading

‎public/img/theme2.jpg

175 KB
Loading

‎views/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<section class="intro mb-0 ft-upper">
1717
<div class="container">
1818
<div class="row">
19-
<div class="col-md-8">
19+
<div class="col-md-8 d-none">
2020
<div class="d-flex mx-auto position-relative">
2121
<div class="year">2024</div>
2222
<div class="text_year">Our Year<span class="the">of The</span></div>
@@ -30,7 +30,7 @@ <h1 class="d-grid mx-0">
3030
</div>
3131
</div>
3232

33-
<div class="ellipse"></div>
33+
<!--<div class="ellipse"></div>-->
3434

3535
</section>
3636

@@ -91,9 +91,9 @@ <h2 class="text-color-blue ft-upper text-md-start text-center">About Us</h2>
9191
<h4 class="text-color-blue ft-upper text-md-end text-center">Upcoming</h4>
9292
<h2 class="text-color-blue ft-upper text-md-end text-center">Events</h2>
9393
<p>
94-
Join us for Kabod '24, our annual event dedicated to unveiling the revelation of Christ. Experience transformative teachings that will deepen your understanding of His glory and purpose for your life. Don’t miss this powerful encounter!
94+
Stay tunned for our Upcoming events
9595
</p>
96-
<a href="/event">
96+
<a href="#event">
9797
see details
9898
</a>
9999

‎views/media/sermon.html

Lines changed: 120 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,131 @@
11
<style>
2-
.intro{
3-
height: 40vh;
2+
.intro {
3+
animation: backgroundTransition 50s infinite;
4+
height: 40vh;
5+
}
6+
7+
.intro::before {
8+
content: "";
9+
position: absolute;
10+
top: 0;
11+
left: 0;
12+
right: 0;
13+
bottom: 0;
14+
background-color: rgba(0, 0, 0, 0.5);
15+
z-index: -1;
16+
}
17+
18+
@keyframes backgroundTransition {
19+
0% {
20+
background: var(--white) url('../img/header.jfif') no-repeat center top/cover;
21+
}
22+
23+
45% {
24+
background: var(--white) url('../img/header.jfif') no-repeat center top/cover;
25+
}
26+
27+
55% {
28+
background: var(--white) url('../img/17.jpg') no-repeat center top/cover;
29+
}
30+
31+
70% {
32+
background: var(--white) url('../img/17.jpg') no-repeat center top/cover;
433
}
5-
6-
@media screen and (max-width:438px) {
7-
.intro{
8-
height: 40vh;
9-
}
34+
35+
100% {
36+
background: var(--blue) url('../img/17.jpg') no-repeat center top/cover;
1037
}
38+
}
39+
40+
41+
42+
@media screen and (max-width:438px) {
43+
.intro {
44+
height: 40vh;
45+
}
46+
}
1147
</style>
1248

1349
<main>
14-
<!---=========INTRO BEGIN========-->
15-
<section class="intro mb-0 ft-upper position-relative" style="background: url({{sermons.[0].image_url}}); background-size: cover; background-repeat: no-repeat; display: flex; align-items: flex-end;">
16-
<div class="media-top" >
17-
<div class="row justify-content-center">
18-
<div class="col-md-8 justify-content-center" >
19-
<div class="d-grid justify-content-center latest_media">
20-
<h4 class="text-center fs-6 fw-bold">Latest Sermon</h4>
21-
<h2 class="text-center">{{sermons.[0].title}}</h2>
22-
<div class="d-flex justify-content-center">
23-
<a href="{{sermons.[0].audio_url}}"><img src="img/icon/download.png" width="200" alt="download"></a>
24-
</div>
25-
</div>
26-
</div>
50+
<!---=========INTRO BEGIN========-->
51+
<section class="intro mb-0 ft-upper position-relative"
52+
style="background: url({{sermons.[0].image_url}}); background-size: cover; background-repeat: no-repeat; display: flex; align-items: flex-end;">
53+
<div class="media-top">
54+
<div class="row justify-content-center">
55+
<div class="col-md-8 justify-content-center">
56+
<div class="d-grid justify-content-center latest_media">
57+
<h4 class="text-center fs-6 fw-bold">Latest Sermon</h4>
58+
<h2 class="text-center">{{sermons.[0].title}}</h2>
59+
<div class="d-flex justify-content-center">
60+
<a href="{{sermons.[0].audio_url}}"><img src="img/icon/download.png" width="200" alt="download"></a>
2761
</div>
28-
62+
</div>
2963
</div>
30-
<div class="ellipse_media"></div>
31-
</section>
32-
33-
34-
<!---=========INTRO END========-->
35-
36-
37-
<section class=" mb-5">
38-
<div class="container mt-5">
39-
40-
<div class="row justify-content-start align-items-center">
41-
42-
{{#each sermons}}
43-
<div class="col-lg-3 p-3 col-md-4 col-sm-6 col mb-4">
44-
<div class="" style="height: 300px;">
45-
<img class="rounded-4" style="object-fit: cover; height: 100%; width: 100%;" src="{{this.image_url}}" alt="{{this.title}}">
46-
</div>
47-
<div class="d-flex justify-content-between mx-3 mx-auto mt-1 px-5 text-secondary container text-center ft-upper fs-6">
48-
<a href="{{this.audio_url}}" class="download-link"><img src="img/icon/download1.png" width="25" alt=""></a>
49-
<a href="{{this.audio_url}}"><img src="img/icon/listen1.png" width="25" alt=""></a>
50-
<!--<a href="{{this.video_url}}"><img src="img/icon/stream.png" width="25" alt=""></a>-->
51-
<a href="/media/sermon/{{this.id}}" class="download-link nav-link text-secondary"><i class="fa-solid fa-eye" style="font-size: 20px;"></i></a>
52-
</div>
53-
</div>
54-
{{/each}}
55-
</div>
64+
</div>
5665

57-
<div class="d-flex justify-content-center">
58-
<nav aria-label="Page navigation">
59-
<ul class="pagination">
60-
{{#if (gt currentPage 1)}}
61-
<li class="page-item">
62-
<a class="page-link" href="?page={{subtract currentPage 1}}">Previous</a>
63-
</li>
64-
{{else}}
65-
<li class="page-item disabled">
66-
<a class="page-link">Previous</a>
67-
</li>
68-
{{/if}}
69-
70-
{{#each (range 1 totalPages)}}
71-
<li class="page-item {{#if (eq this ../currentPage)}}active{{/if}}">
72-
<a class="page-link" href="?page={{this}}">{{this}}</a>
73-
</li>
74-
{{/each}}
75-
76-
{{#if (lt currentPage totalPages)}}
77-
<li class="page-item">
78-
<a class="page-link" href="?page={{add currentPage 1}}">Next</a>
79-
</li>
80-
{{else}}
81-
<li class="page-item disabled">
82-
<a class="page-link">Next</a>
83-
</li>
84-
{{/if}}
85-
</ul>
86-
</nav>
87-
</div>
66+
</div>
67+
<div class="ellipse_media"></div>
68+
</section>
69+
70+
71+
<!---=========INTRO END========-->
72+
73+
74+
<section class=" mb-5">
75+
<div class="container mt-5">
76+
77+
<div class="row justify-content-start align-items-center">
78+
79+
{{#each sermons}}
80+
<div class="col-lg-3 p-3 col-md-4 col-sm-6 col mb-4">
81+
<div class="" style="height: 300px;">
82+
<img class="rounded-4" style="object-fit: cover; height: 100%; width: 100%;" src="{{this.image_url}}"
83+
alt="{{this.title}}">
84+
</div>
85+
<div
86+
class="d-flex justify-content-between mx-3 mx-auto mt-1 px-5 text-secondary container text-center ft-upper fs-6">
87+
<a href="{{this.audio_url}}" class="download-link"><img src="img/icon/download1.png" width="25" alt=""></a>
88+
<a href="{{this.audio_url}}"><img src="img/icon/listen1.png" width="25" alt=""></a>
89+
<!--<a href="{{this.video_url}}"><img src="img/icon/stream.png" width="25" alt=""></a>-->
90+
<a href="/media/sermon/{{this.id}}" class="download-link nav-link text-secondary"><i class="fa-solid fa-eye"
91+
style="font-size: 20px;"></i></a>
92+
</div>
8893
</div>
89-
</section>
90-
94+
{{/each}}
95+
</div>
96+
97+
<div class="d-flex justify-content-center">
98+
<nav aria-label="Page navigation">
99+
<ul class="pagination">
100+
{{#if (gt currentPage 1)}}
101+
<li class="page-item">
102+
<a class="page-link" href="?page={{subtract currentPage 1}}">Previous</a>
103+
</li>
104+
{{else}}
105+
<li class="page-item disabled">
106+
<a class="page-link">Previous</a>
107+
</li>
108+
{{/if}}
109+
110+
{{#each (range 1 totalPages)}}
111+
<li class="page-item {{#if (eq this ../currentPage)}}active{{/if}}">
112+
<a class="page-link" href="?page={{this}}">{{this}}</a>
113+
</li>
114+
{{/each}}
115+
116+
{{#if (lt currentPage totalPages)}}
117+
<li class="page-item">
118+
<a class="page-link" href="?page={{add currentPage 1}}">Next</a>
119+
</li>
120+
{{else}}
121+
<li class="page-item disabled">
122+
<a class="page-link">Next</a>
123+
</li>
124+
{{/if}}
125+
</ul>
126+
</nav>
127+
</div>
128+
</div>
129+
</section>
130+
91131
</main>

‎views/partials/footer.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
Connect
5656
</div>
5757
<ul class="ft-upper fw-normal fs-5">
58-
<li><a href="/event">Event</a></li>
58+
<li><a href="#event">Event</a></li>
5959
<li><a href="/department">Join a Department</a></li>
6060
<li><a href="">Testimonies</a></li>
6161
</ul>

‎views/partials/header.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<a class="nav-link" href="/about">About Us</a>
1717
</li>
1818
<li class="nav-item">
19-
<a class="nav-link" href="/event">Events</a>
19+
<a class="nav-link" href="#event">Events</a>
2020
</li>
2121
<li class="nav-item">
2222
<a class="nav-link" href="/giving">Giving</a>

‎views/stream.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<div class="col">
2727
<div class="row">
2828
<div class="col-sm-6 text-center my-4 justify-content-center">
29-
<a href="#" class="fw-light nav-link">
29+
<a href="https://www.youtube.com/@glorycarriersministryintl7470" class="fw-light nav-link">
3030
<img src="img/icon/youtube.png" width="40" alt="youtube">
3131
<div class="fs-4">
3232
Join Now
@@ -36,8 +36,8 @@
3636

3737

3838
<div class="col-sm-6 text-center my-4 justify-content-center">
39-
<a href="#" class="container fw-light nav-link">
40-
<img src="img/icon/fb.png" width="40" alt="youtube">
39+
<a href="https://www.facebook.com/glorycarriersmin?_rdc=1&_rdr" class="container fw-light nav-link">
40+
<img src="img/icon/fb.png" width="40" alt="facebook">
4141
<div class="fs-4">
4242
Join Now
4343
</div>

0 commit comments

Comments
 (0)