Responsive-Website/index.html at main · AlexandrBalan/Responsive-Website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!--
    Filename: index.html
    Author: Anonymous
    Date: 01-11-2025
    Description: This website is a digital space for Jesus the Savior MBC.
    Created as a surprise to celebrate the church's mission.
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Welcome to Jesus MBC, a Baptist church where faith, community, and worship come together.
    Join us for uplifting services and fellowship!">
    <title>Jesus The Savior MBC</title>
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="/assets/images/Cross.png">
    <!-- Preconnect & Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Poppins:wght@100;400&family=Lexend:wght@100..900&display=swap" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
          integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
          crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/index.css">
  </head>
  <body>
    <!-- HEADER -->
    <header>
      <div class="logo">
        <img src="/assets/images/noword.png" alt="Church Logo" />
      </div>
      <nav>
        <a href="index.html" class="active-link">Home</a>
        <a href="aboutus.html">About Us</a>
        <a href="calendar.html">Calendar</a>
        <a href="contactus.html" >Contact Us</a>
      </nav>
      <div class="user-actions">
        <a href="donate.html">
          <button class="button-donate" role="button">Donate</button>
        </a>
      </div>
    </header>

    <!-- HERO SECTION -->
    <section class="hero">
      <div class="hero-overlay"></div>
      <div class="hero-content">
        <h1 class="fadeInDown">Welcome Home</h1>
        <p class="fadeInUp">
          "A place where faith grows, hearts connect, and lives are transformed." <br>
          - Jesus MBC Youth
        </p>
      </div>
    </section>

    <div class="bubble">
      <p class="script-title">SCRIPTURE OF GRACE</p>
      <h1>
        "Keep this Book of the Law always on your lips; meditate on it <br>
        day and night, so that you may be careful to do everything <br>
        written in it. Then you will be prosperous and successful."
      </h1>
      <p>Joshua 1:8</p>
    </div>

    <!-- Services Container -->
    <div class="services-container">
      <div class="service-box full-width">
        <h4>Sunday Services</h4>
        <p>10:00 AM - First Service</p>
        <p>5:00 PM - Second Service</p>
      </div>
      <div class="service-row">
        <div class="service-box">
          <h4>Wednesday Bible Study</h4>
          <p>7:00 PM - Service</p>
        </div>
        <div class="service-box">
          <h4>Friday Youth Night</h4>
          <p>7:30 PM - Service</p>
        </div>
      </div>
    </div>

    <!-- FAQ Section -->
    <section class="faq-section">
      <h1>Frequently Asked Questions</h1>
      <p class="faq-intro">
        Have questions? We're here to help! If you don't find what you're looking for, feel free to
        <a href="mailto:Ourbaptistchurch@gmail.com">contact us</a>.
      </p>
      <div class="faq-item">
        <details>
          <summary>
            <span class="faq-icon">
              <i class="fa-solid fa-church"></i>
            </span>
            <span class="faq-question">What are the core beliefs of the church?</span>
          </summary>
          <div class="faq-answer">
            <p>
              We are a Christian Baptist church, rooted in the belief that Jesus Christ sacrificed Himself for the forgiveness of all our sins. Through His death and resurrection, we find hope, salvation, and the promise of eternal life. We strive to live by His teachings, sharing His love, grace, and truth with everyone as we grow together in faith and fellowship.
            </p>
          </div>
        </details>
      </div>
      <div class="faq-item">
        <details>
          <summary>
            <span class="faq-icon">
              <i class="fa-solid fa-hands-helping"></i>
            </span>
            <span class="faq-question">What should I expect during a church service?</span>
          </summary>
          <div class="faq-answer">
            <p>
              Our services include uplifting worship through music, an inspiring message from the Bible, and time for prayer and reflection. Everyone is welcome to participate as much or as little as they feel comfortable. Services usually last about two hours.
            </p>
          </div>
        </details>
      </div>
      <div class="faq-item">
        <details>
          <summary>
            <span class="faq-icon">
              <i class="fa-solid fa-video"></i>
            </span>
            <span class="faq-question">Can I watch a service online before visiting?</span>
          </summary>
          <div class="faq-answer">
            <p>
              Absolutely! All our services are streamed live and available to watch on our
              <a href="https://www.youtube.com/@IsusSalvatorulRenton" target="_blank">YouTube channel</a>. This is a great way to experience our community and the spirit of our gatherings before attending in person.
            </p>
          </div>
        </details>
      </div>
      <div class="faq-item">
        <details>
          <summary>
            <span class="faq-icon">
              <i class="fa-solid fa-user-friends"></i>
            </span>
            <span class="faq-question">Can I bring a friend or family member with me?</span>
          </summary>
          <div class="faq-answer">
            <p>
              Of course! We encourage you to invite friends and family to join you. Our doors are open to everyone, and we are delighted to welcome new faces into our community.
            </p>
          </div>
        </details>
      </div>
    </section>

    <!-- FOOTER -->
    <footer>
      <div class="footerContainer">
        <div class="socialIcons">
          <a href="https://www.instagram.com/jesusmbc_youth/" target="_blank">
            <i class="fa-brands fa-instagram"></i>
          </a>
          <a href="https://www.youtube.com/@IsusSalvatorulRenton" target="_blank">
            <i class="fa-brands fa-youtube"></i>
          </a>
        </div>
        <div class="footerNav">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="aboutus.html">About Us</a></li>
            <li><a href="calendar.html">Calendar</a></li>
            <li><a href="contactus.html">Contact Us</a></li>
          </ul>
        </div>
      </div>
      <div class="footerBottom">
        <p>&copy; 2025 Jesus The Savior MBC | All Rights Reserved</p>
      </div>
    </footer>
    <script src="/js/script.js"></script>
  </body>
</html>