-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
153 lines (151 loc) · 5.42 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Welcome to Fasmoha Entertainment Avenue</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<script src="script.js" defer></script>
</head>
<body>
<section class="part1">
<nav class="navbar">
<div class="content">
<div class="logo">
<img src="images/logo.png" alt="" />
<a href="/">Fasmoha</a>
</div>
<ul class="menu-list">
<div class="icon cancel-btn">
<i class="fa-solid fa-xmark"></i>
</div>
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li>
<a href="menu.html">Products</a>
<!-- <ul class="sub_list">
<li><a href="#">Full Games List</a></li>
<li><a href="#">PS4 Offers</a></li>
</ul> -->
</li>
</ul>
<div class="icon menu-btn">
<i class="fa-solid fa-bars"></i>
</div>
</div>
<script>
const menu = document.querySelector(".menu-list");
const body = document.querySelector("body");
const navbar = document.querySelector(".navbar");
const menuBtn = document.querySelector(".menu-btn");
const cancelBtn = document.querySelector(".cancel-btn");
menuBtn.onclick = () => {
menu.classList.add("active");
menuBtn.classList.add("hide");
body.classList.add("disabledScroll");
};
cancelBtn.onclick = () => {
menu.classList.remove("active");
menuBtn.classList.remove("hide");
body.classList.remove("disabledScroll");
};
</script>
</nav>
<div class="topic">
<h1>PLAY . CONQUER . UNLEASH THE FUN</h1>
<p>Karibu Na Tunafurahi Kwa Kuwa Nasi!</p>
<button class="topic-button">Learn More</button>
</div>
</section>
<section class="part2">
<div class="products-content">
<div class="headings">
<span>Our</span>
<span class="span2">Products</span>
</div>
<div class="wrapper">
<div class="image-container">
<i class="fa-solid fa-arrow-left button" id="prev"></i>
<div class="carousel">
<img src="images/fc24.jpg" alt="" />
<img src="images/spiderman2.jpg" alt="" />
<img src="images/cod.jpeg" alt="" />
<img src="images/horizon.jpg" alt="" />
<img src="images/gt7.webp" alt="" />
<img src="images/ratchet.webp" alt="" />
<img src="images/gow.jpg" alt="" />
</div>
<i class="fa-solid fa-arrow-right button" id="next"></i>
</div>
</div>
<button class="clickall">Click here to see all</button>
</div>
</section>
<section class="part3">
<div class="huduma-content">
<div class="headings_2">
<span>Pata</span>
<span class="span2_">huduma</span>
<span>zetu kwa steps 3</span>
</div>
<div class="box-container">
<div class="box">
<div class="text"><span>Tupe order ya Ps4 au order ya games unazotaka ili tukuwekee karibu.</span></div>
</div>
<div class="box">
<div class="text"><span>Fika Darajani kwa Kuhakiki na Kulipia Order yako.</span></div>
</div>
<div class="box">
<div class="text"><span>Na usiache kutupa Feedback Kuhusu huduma zetu kwako.</span></div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<h4>Follow Us</h4>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-tiktok"></i></a>
</div>
</div>
<div class="footer-col">
<h4>Partnership with</h4>
<div class="logo">
<img src="images/hardtech.jpg" alt="hardtech logo" width="30px" height="30px" />
<p>Hard Tech</p>
</div>
</div>
<div class="footer-col">
<h4>Useful links</h4>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li>
<a href="#">Products</a>
</li>
</ul>
</div>
<div class="footer-col">
<h4>Contact us</h4>
<div class="social-links">
<a href="#"><i class="fab fa-whatsapp"></i></a>
</div>
</div>
</div>
<div class="p">
<p>© 2023 - “Yearly” Fasmoha Entertainment Avenue</p>
</div>
</div>
</footer>
</body>
</html>