-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathHome.html
225 lines (225 loc) · 11 KB
/
Home.html
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
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="grid.css"/>
<title>Nazarene</title>
</head>
<body>
<!--classes named containers initialize a new grid-container-->
<div class="container">
<div class="container1">
<div id="logo">
<img src="images/logo2bg.png" width="150px" style="float: left;"/>
</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div id="nav">
<nav>
<ul>
<li><a href="Home.html">HOME</a></li>
<li><a href="About.html">ABOUT</a></li>
<li><a href="Sermons.html">SERMONS</a></li>
<li><a href="Ministries.html">MINISTRIES</a></li>
<li><a href="">EVENTS</a></li>
<li><a href="">BLOGS</a></li>
<li><a href="">CONTACTS</a></li>
</ul>
</nav>
</div>
<div id="icon">
<img src="images/search.png" width="40px" height="25px"/>
</div>
<div id="button1">
<a href="" class="button">Donate</a>
</div>
</div>
<div class="container2">
<h3 class="text text1">Building Holy and Healthy Lifes</h3>
<h1 class="text text2">THE FAMILY</h1>
<h2 class="text text3">LOVE, CARE, SHARE</h2>
<a href="" class="btn text">Learn More</a>
</div>
<!--the class nested function is to create nested grid-containers-->
<div class="container3 nested">
<div class="textzone texts1">
<div class="icon"></div>
<h2>WORSHIP</h2>
<h3 class="highlight">What to expect</h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts</p>
</div>
<div class="textzone texts2">
<div class="icon1"></div>
<h2>GOD'S LOVE</h2>
<h3 class="highlight">Beliefs and History</h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts</p>
</div>
<div class="texts3">
<h2>A Christian Should Live For The Glory Of God And The Well-Being Of Others.</h2>
<h3 class="subtxt">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts</h3>
</div>
</div>
<div class="container4 nested2">
<div class="salvation col1">
<img src="images/churchbg.jpg" class="pic"/>
</div>
<div class="salvation col2">
<h3 class="words2">WELCOME TO SALVATION CHURCH</h3>
<h2 class="words2">CONNECT, GROW AND SERVE WITH US</h2>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradicematic country, in which roasted parts of sentences fly into your mouth.</p>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradicematic country, in which roasted parts of sentences fly into your mouth.</p>
<a href="" class="btn2 learn">Learn More</a>
</div>
</div>
<div class="container5 nested3">
<div class="picture">
<h2 class="statement">My Religion is a church that believes in Jesus,</h2>
<h2 class="statement">a church that loves God and people.</h2>
</div>
</div>
<!--class header is used to set aside grid-container headers-->
<div class="header">
<h4 class="heading">OUR SERMONS</h4>
<h2 class="heading">WATCH AND LISTEN TO</h2>
<h2 class="heading">OUR SERMONS</h2>
</div>
<div class="container6 nested4">
<!--class gallery is used to display multiple images as a collective-->
<div class="gallery gallery1">
<img src="images/pic2.jpg" class="gal"/>
<div class="desc">
<h3 class="redd">The Testing of Our Faith</h3>
<p>Speaker: <span>cmsmasters</span></p>
<p>Categories: <span>Faith</span></p>
<h4>Aspernatur sit adipisci quaerat unde at neque Redug Lagre dolor sit amet. maintains the amount of lines</h4>
<a href="" class="more">Read more →</a>
</div>
</div>
<div class="gallery gallery2">
<img src="images/pic2.jpg" class="gal"/>
<div class="desc">
<h3 class="redd">He Does All Things Well</h3>
<p>Speaker: <span>cmsmasters</span></p>
<p>Categories: <span>Faith</span></p>
<h4>Aspernatur sit adipisci quaerat unde at neque Redug Lagre dolor sit amet. maintains the amount of lines</h4>
<a href="" class="more">Read more →</a>
</div>
</div>
<div class="gallery gallery3">
<img src="images/pic2.jpg" class="gal"/>
<div class="desc">
<h3 class="redd">Nothing Else Matters</h3>
<p>Speaker: <span>cmsmasters</span></p>
<p>Categories: <span>Faith</span></p>
<h4>Aspernatur sit adipisci quaerat unde at neque Redug Lagre dolor sit amet. maintains the amount of lines</h4>
<a href="" class="more">Read more →</a>
</div>
</div>
</div>
<div class="header1">
<h4 class="heading1">UPCOMING EVENTS</h4>
<h2 class="heading1">UNITED IN SPIRIT</h2>
</div>
<div class="container7 nested5">
<div class="gallerys gallery1">
<img src="images/worshipbg.jpg" class="gal1"/>
<div class="desc">
<h3 class="bold">Giving Hope to Our Spiritual Needs</h3>
<p>Saturday, 5th may, 2018</p>
<p>Nazarene Church</p>
<p>Ongata Rongai</p>
<a href="" class="more">More Details →</a>
</div>
</div>
<div class="gallerys gallery2">
<img src="images/worshipbg.jpg" class="gal1"/>
<div class="desc">
<h3 class="bold">Giving Hope to Our Spiritual Needs</h3>
<p>Saturday, 5th may, 2018</p>
<p>Nazarene Church</p>
<p>Ongata Rongai</p>
<a href="" class="more">More Details →</a>
</div>
</div>
<div class="gallerys gallery3">
<img src="images/worshipbg.jpg" class="gal1"/>
<div class="desc">
<h3 class="bold">Giving Hope to Our Spiritual Needs</h3>
<p>Saturday, 5th may, 2018</p>
<p>Nazarene Church</p>
<p>Ongata Rongai</p>
<a href="" class="more">More Details →</a>
</div>
</div>
</div>
<div class="header2">
<h4 class="heading">OUR BLOG</h4>
<h2 class="heading">LATEST NEWS FROM OUR BLOG</h2>
</div>
<div class="container8 nested6">
<div class="galla gallery1">
<img src="images/worshipbg.jpg" class="gal"/>
<div class="desc1">
<h3 class="bold">Giving Hope to Our Spiritual Needs</h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts</p>
<a href="" class="more1">More Details →</a>
</div>
</div>
<div class="galla gallery2">
<img src="images/worshipbg.jpg" class="gal"/>
<div class="desc1">
<h3 class="bold">Giving Hope to Our Spiritual Needs</h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts</p>
<a href="" class="more1">More Details →</a>
</div>
</div>
<div class="galla gallery3">
<img src="images/worshipbg.jpg" class="gal"/>
<div class="desc1">
<h3 class="bold">Giving Hope to Our Spiritual Needs</h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts</p>
<a href="" class="more1">More Details →</a>
</div>
</div>
</div>
</div>
<!--The container below entails the page footer content-->
<div class="container9 nested7">
<div class="cols logo">
<img src="images/logo2.png" class="log" width="20px"/>
</div>
<div class="cols navbar1">
<h3 class="head">QUICK LINKS</h3>
<nav1>
<ul class="second">
<li><a href="Home.html" class="link">Home</a></li>
<li><a href="About.html" class="link">About</a></li>
<li><a href="Sermons.html" class="link">Sermons</a></li>
<li><a href="" class="link">Events</a></li>
<li><a href="" class="link">Blog</a></li>
<li><a href="" class="link">Contact</a></li>
</ul>
</nav1>
</div>
<div class="cols contact">
<h3>GET IN TOUCH</h3>
<p class="sub">Lorem ipsum dolor sit amet, consect etur adipiscing elit</p>
<p class="sub">+254765524850</p>
<p class="sub">contact@example.com</p>
</div>
</div>
<div class="footer">
<p class="foot">Copyright 2021. All rights reserved</p>
</div>
</div>
</body>
</html>