-
Notifications
You must be signed in to change notification settings - Fork 0
/
index-english.html
222 lines (167 loc) · 12.7 KB
/
index-english.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
<!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">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="assets/css/style.css">
<title>JAHR</title>
</head>
<body>
<header>
<nav class="container navbar navbar-expand-md navbar-light">
<div class="container-fluid justify-content-center justify-content-md-between">
<div id="logo" class="navbar-brand ">
<img src="assets/img/logo.png" alt="">
</div>
<button class="navbar-toggler text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse container-fluid" id="navbarTogglerDemo03">
<ul class="navbar-nav flex-grow-1 justify-content-center text-center">
<li class="nav-item"><a class="nav-link text-white" aria-current="page" href="/">Main</a></li>
<li class="nav-item"><a class="nav-link text-white px-md-4" href="#services">Our Services</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#contact">Contact Us</a></li>
</ul>
<ul class="nav justify-content-center">
<li class="nav-item social-link"><a class="text-white" href="https://www.snapchat.com/add/jahrksa"><i class="fab fa-snapchat-ghost"></i></a></li>
<li class="nav-item social-link"><a class="text-white" href="https://twitter.com/JahrKSA"><i class="fab fa-twitter"></i></a></li>
<li class="nav-item social-link"><a class="text-white" href="https://www.instagram.com/jahrksa/"><i class="fab fa-instagram"></i></a></li>
<li class="nav-item social-link social-link-transparent"><a class="text-white" href="index.html">ع</a></li>
</ul>
</div>
</div>
</nav>
</header>
<!-- --------------------------------------------------------------------------------------------------------------------------------- -->
<section id="hero" class="d-flex justify-content-center align-items-center">
<div class="container heroanimation">
<div class="text-center">
<h1 class="display-1 fw-bold text-white"> Let everyone knows</h1>
<p class="secondary-color py-4 text-center fs-2 lh-base"> Because your story deserves to be told, we help you in the considered process of spreading to move with steady steps.</p>
<a class="btn btn-light pt-1 pb-2 px-3 fw-bold" href="#services" role="button">Jahr Services</a>
</div>
</div>
</section>
<!-- --------------------------------------------------------------------------------------------------------------------------------- -->
<section id="aboutus" class="d-flex flex-column justify-content-center align-items-center">
<div class="container text-center aboutusanimation">
<div id="title" class="text-center">
<h1 class="fw-bold text-white border-bottom border-4 pb-4 d-inline-block display-4"> who’s jahr?</h1>
</div>
<p class="text-center secondary-color m-auto py-5 fs-3 lh-base">Jahr is a Saudi marketing company that works to provide quality services in the field of marketing and business services with the aim of bridging the gap in the local market, In addition, Jahr's contribution through after-sales services to implement strategies on the ground.
</p>
<a class="btn btn-light pt-1 pb-2 px-3 fw-bold" href="#contact" role="button">Contact Us</a>
</div>
</section>
<!-- --------------------------------------------------------------------------------------------------------------------------------- -->
<section id="services" class="container py-5 my-5">
<div id="title" class="text-center py-5">
<h1 class="fw-bold text-white border-bottom border-4 pb-4 d-inline-block display-4">jahr’s services</h1>
</div>
<div id="services-boxs" class="pt-5">
<div class="row mb-5 grid">
<div class="col-md-4 col-sm-12">
<div class="box d-flex flex-column justify-content-center align-items-center mx-2 mx-lg-5 py-5">
<img src="assets/img/icons/box3.png" class="icon" alt="">
<h4 class="text-white py-3 px-1 text-center"> Marketing Strategies </h4>
<p class="px-5 secondary-color text-center px-1 fs-6"> This service contains the identification of medium and long-term partners' goals.
Develop internal and external work methodologies. Also Contribute to product planning, implementation. and track strategy implementation progress. </p>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="box d-flex flex-column justify-content-center align-items-center mx-2 mx-lg-5 py-5">
<img src="assets/img/icons/box2.png" class="icon" alt="">
<h4 class="text-white py-3 px-1 text-center"> Brand Strategies </h4>
<p class="px-5 secondary-color text-center px-1 fs-6"> We build long-term plans to achieve a series of strategic goals that eventually lead to the definition of your brand In the target place by consumers. </p>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="box d-flex flex-column justify-content-center text-center align-items-center mx-2 mx-lg-5 py-5">
<img src="assets/img/icons/box1.png" class="icon" alt="">
<h4 class="text-white py-3 text-center"> Intellectual Property (IP) Rights Management </h4>
<p class="px-3 secondary-color text-center px-1 fs-6">We design a comprehensive strategy for managing a company's and individual's intangible assets, such as the company name, logo, brand protection, and marketing and promotion management.
</p>
</div>
</div>
<div class="col-md-4 col-sm-12 mt-md-3">
<div class="box d-flex flex-column justify-content-center align-items-center mx-2 mx-lg-5 py-5">
<img src="assets/img/icons/box5.png" class="icon" alt="">
<h4 class="text-white py-3 text-center"> Marketing on Behalf <br> of Others </h4>
<p class="px-3 secondary-color text-center px-1 fs-6"> This service seeks to provide marketing/sales operations management services on behalf of customers in order to stimulate sales in the businesses that benefit from the service, and we have a professional team that provides these high-quality services to businesses.</p>
</div>
</div>
<div class="col-md-4 col-sm-12 mt-md-3">
<div class="box d-flex flex-column justify-content-center align-items-center mx-2 mx-lg-5 py-5">
<img src="assets/img/icons/box4.png" class="icon" alt="">
<h4 class="text-white py-3 px-1 text-center"> Relationship Management </h4>
<p class="px-3 secondary-color text-center px-1 fs-6"> We provide significant client account management solutions to businesses who do not have teams for customer success and sales, as well as consulting services to help them build, manage, and measure their performance.</p>
</div>
</div>
<div class="col-md-4 col-sm-12 mt-md-3">
<div class="box d-flex flex-column justify-content-center align-items-center mx-2 mx-lg-5 py-5">
<img src="assets/img/icons/box6.png" class="icon" alt="">
<h4 class="text-white py-3"> Public Relations </h4>
<p class="px-3 secondary-color text-center px-1 fs-6"> In this service, there is a highly specialized team that manages the organization's good reputation and interacts with the media and others. public relations management is a strategic and important communication process to maintain the entity's brand image.</p>
</div>
</div>
</div>
</div>
</section>
<!-- --------------------------------------------------------------------------------------------------------------------------------- -->
<section id="contact" class="py-5 my-5 container">
<div id="title" class="text-center py-5">
<h1 class="fw-bold text-white border-bottom border-4 pb-4 d-inline-block display-4"> Contact Us </h1>
</div>
<form action="https://formsubmit.co/[email protected]" method="POST" class="text-center pt-4">
<div class="mb-3">
<input type="text" name="name" class="form-control text-white" placeholder="Full Name" required>
</div>
<div class="row">
<div class="mb-3 col pt-3">
<input type="text" name="phone" class="form-control col-12 col-md-6 text-white" placeholder="Phone Number">
</div>
<div class="mb-3 col pt-3">
<input type="email" name="email" class="form-control col-12 col-md-6 text-white" placeholder="Email" required>
</div>
</div>
<div class="mb-3 col pt-3">
<textarea class="form-control text-white" name="message" id="exampleFormControlTextarea1" placeholder="Message" rows="3"></textarea>
</div>
<input type="hidden" name="_captcha" value="false">
<button type="submit" class="btn btn-light mt-4 px-4 fw-bold">Send</button>
</form>
</section>
<!-- --------------------------------------------------------------------------------------------------------------------------------- -->
<footer class='py-5 mt-5 d-flex flex-column justify-content-center align-items-center'>
<div dir="ltr" class="container text-center">
<img src="assets/img/biglogo.png" class="py-5" alt="">
<div dir="ltr" class="d-flex align-items-center justify-content-center pb-1"><i class="fas fa-envelope link-light pe-2"></i><span class="text-white"><a class="text-white" href="mailto:[email protected]">[email protected]</a></span></div>
<div dir="ltr" class="d-flex align-items-center justify-content-center"><i class="fas fa-phone-alt link-light pe-2"></i><span class="text-white"><a class="text-white" href="tel:00966504668884">00966504668884</a></span></div>
<ul class="nav justify-content-center align-items-center py-5">
<li class="nav-item"><a href="https://www.snapchat.com/add/jahrksa" class=" link-light"><i class="fab fa-snapchat-ghost"></i></a></li>
<li class="nav-item"><a href="https://twitter.com/JahrKSA" class="px-3 link-light"><i class="fab fa-twitter"></i></a></li>
<li class="nav-item"><a href="https://www.instagram.com/jahrksa/" class=" link-light"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
<div id="copyright" class="w-100 text-center">
<p class="py-3 text-white">All rights reserved - Jahr 2022</p>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js" integrity="sha512-UxP+UhJaGRWuMG2YC6LPWYpFQnsSgnor0VUF3BHdD83PS/pOpN+FYbZmrYN+ISX8jnvgVUciqP/fILOXDjZSwg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="app.js"></script>
<script>
gsap.from('.heroanimation', {
opacity: 0,
duration: 1.2,
y: -70,
})
</script>
</body>
</html>