BCB Bank static website
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

397 lines
12 KiB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Fundzin</title>
  8. {% load staticfiles %}
  9. <!-- Using Google hot link to render fonts, downloaded Archgivo Black fonts isn't same as the previewed. -->
  10. <link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
  11. <link rel="stylesheet" href="{% static 'css/fontawesome-all.min.css' %}">
  12. <link rel="stylesheet" href="{% static 'OwlCarousel-plugins/owl.carousel.min.css' %}">
  13. <link rel="stylesheet" href="{% static 'OwlCarousel-plugins/owl.theme.default.min.css' %}">
  14. <link rel="stylesheet" href="{% static 'css/home.css' %}">
  15. </head>
  16. <body>
  17. <div class="temp-intro">
  18. <div class="temp-name">Welcome To <mark>Fundzin</mark></div>
  19. <ul class="temp-social">
  20. <li>
  21. <a href="#"><i class="fab fa-facebook-f"></i></a>
  22. </li>
  23. <li>
  24. <a href="#"><i class="fab fa-twitter"></i></a>
  25. </li>
  26. <li>
  27. <a href="#"><i class="fab fa-linkedin-in"></i></a>
  28. </li>
  29. <li>
  30. <a href="#"><i class="fab fa-google-plus-g"></i></a>
  31. </li>
  32. </ul>
  33. </div>
  34. <header id="page-header">
  35. <div class="temp-brand">
  36. <figure>
  37. <img src="{% static 'images/logo-icon.svg' %}" alt="">
  38. </figure>
  39. <h1><mark>Fundz</mark>in</h1>
  40. </div>
  41. <nav id="desktop-navigation-menu">
  42. <ul>
  43. <li class="active">
  44. <a href="#home">HOME</a>
  45. </li>
  46. <li>
  47. <a href="#about">ABOUT</a>
  48. </li>
  49. <li>
  50. <a href="#service">SERVICES</a>
  51. </li>
  52. <li>
  53. <a href="#testimonial">TESTIMONIAL</a>
  54. </li>
  55. <li>
  56. <a href="#enquiry">ENQUIRY</a>
  57. </li>
  58. <li>
  59. <a href="#contact">CONTACT</a>
  60. </li>
  61. </ul>
  62. </nav>
  63. <section id="mobile-hamburger-menu">
  64. <span class="icon-line"></span>
  65. <span class="icon-line"></span>
  66. <span class="icon-line"></span>
  67. </section>
  68. </header>
  69. <nav id="mobile-nav-menu">
  70. <ul>
  71. <li class="active">
  72. <a href="#home">HOME</a>
  73. </li>
  74. <li>
  75. <a href="#about">ABOUT</a>
  76. </li>
  77. <li>
  78. <a href="#service">SERVICES</a>
  79. </li>
  80. <li>
  81. <a href="#testimonial">TESTIMONIAL</a>
  82. </li>
  83. <li>
  84. <a href="#enquiry">ENQUIRY</a>
  85. </li>
  86. <li>
  87. <a href="#contact">CONTACT</a>
  88. </li>
  89. </ul>
  90. </nav>
  91. <div class="temp-contact-info">
  92. <ul>
  93. <li>
  94. <img src="{% static 'images/mail.svg' %}" alt="">
  95. <div class="contact-content">
  96. <span>Send us a message</span>
  97. <a href="mailto:info@fundzin.com">info@fundzin.com</a>
  98. </div>
  99. </li>
  100. <li>
  101. <img src="{% static 'images/phone-call.svg' %}" alt="">
  102. <div class="contact-content">
  103. <span>Give us a Call</span>
  104. <a href="tel:+123456789">123-456-7890</a>
  105. </div>
  106. </li>
  107. <li>
  108. <img src="{% static 'images/time.svg' %}" alt="">
  109. <div class="contact-content">
  110. <span>Opening Hours</span>
  111. <span>Mon-Fri: 9:00 to 6:00</span>
  112. </div>
  113. </li>
  114. </ul>
  115. </div>
  116. <section id="home">
  117. <figure class="hide">
  118. <img src="{% static 'images/banner.png' %}" alt="">
  119. </figure>
  120. <div class="description hide">
  121. <h3>
  122. BEING IN CONTROL <br>OF YOUR <mark>FINANCES</mark>
  123. </h3>
  124. <p>
  125. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
  126. eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
  127. enim ad minim veniam.
  128. </p>
  129. <button type="button">OUR SERVICES<i class="fas fa-chevron-right"></i></button>
  130. </div>
  131. </section>
  132. <section id="about">
  133. <div class="wrapper">
  134. <div class="description">
  135. <h3>ABOUT <mark>FUNDZIN</mark></h3>
  136. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  137. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
  138. </p>
  139. <p>
  140. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  141. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nos-
  142. trud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
  143. aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
  144. nulla pariatur.
  145. </p>
  146. </div>
  147. <figure>
  148. <img src="{% static 'images/03.png' %}" alt="">
  149. </figure>
  150. </div>
  151. </section>
  152. <section id="service">
  153. <h3>OUR SEVICES</h3>
  154. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
  155. dolore magna aliqua. Ut enim ad minim veniam.
  156. </p>
  157. <ul class="owl-carousel owl-service">
  158. <li>
  159. <div class="inner-contents">
  160. <img src="{% static 'images/car.svg' %}" alt="">
  161. <div class="title">Sales &amp; Trading</div>
  162. <p> Lorem ipsum dolor sit amet,
  163. consectetur adipiscing elit, sed
  164. do eiusmod tempor
  165. </p>
  166. </div>
  167. </li>
  168. <li>
  169. <div class="inner-contents">
  170. <img src="{% static 'images/payment-method.svg' %}" alt="">
  171. <div class="title">Financial Advisors</div>
  172. <p> Lorem ipsum dolor sit amet,
  173. consectetur adipiscing elit, sed
  174. do eiusmod tempor
  175. </p>
  176. </div>
  177. </li>
  178. <li>
  179. <div class="inner-contents">
  180. <img src="{% static 'images/economic-growth.svg' %}" alt="">
  181. <div class="title">Investment Planning</div>
  182. <p> Lorem ipsum dolor sit amet,
  183. consectetur adipiscing elit, sed
  184. do eiusmod tempor
  185. </p>
  186. </div>
  187. </li>
  188. <li>
  189. <div class="inner-contents">
  190. <img src="{% static 'images/bank-building.svg' %}" alt="">
  191. <div class="title">Tax Consulting</div>
  192. <p> Lorem ipsum dolor sit amet,
  193. consectetur adipiscing elit, sed
  194. do eiusmod tempor
  195. </p>
  196. </div>
  197. </li>
  198. <li>
  199. <div class="inner-contents">
  200. <img src="{% static 'images/car.svg' %}" alt="">
  201. <div class="title">Sales &amp; Trading</div>
  202. <p> Lorem ipsum dolor sit amet,
  203. consectetur adipiscing elit, sed
  204. do eiusmod tempor
  205. </p>
  206. </div>
  207. </li>
  208. <li>
  209. <div class="inner-contents">
  210. <img src="{% static 'images/payment-method.svg' %}" alt="">
  211. <div class="title">Financial Advisors</div>
  212. <p> Lorem ipsum dolor sit amet,
  213. consectetur adipiscing elit, sed
  214. do eiusmod tempor
  215. </p>
  216. </div>
  217. </li>
  218. <li>
  219. <div class="inner-contents">
  220. <img src="{% static 'images/economic-growth.svg' %}" alt="">
  221. <div class="title">Investment Planning</div>
  222. <p> Lorem ipsum dolor sit amet,
  223. consectetur adipiscing elit, sed
  224. do eiusmod tempor
  225. </p>
  226. </div>
  227. </li>
  228. <li>
  229. <div class="inner-contents">
  230. <img src="{% static 'images/bank-building.svg' %}" alt="">
  231. <div class="title">Tax Consulting</div>
  232. <p> Lorem ipsum dolor sit amet,
  233. consectetur adipiscing elit, sed
  234. do eiusmod tempor
  235. </p>
  236. </div>
  237. </li>
  238. </ul>
  239. <div class="service-carousel-btn">
  240. <i class="fas fa-chevron-left" id="service-carousel-left-btn"></i>
  241. <i class="fas fa-chevron-right" id="service-carousel-right-btn"></i>
  242. </div>
  243. </section>
  244. <section id="testimonial">
  245. <h3>TESTIMONIALS</h3>
  246. <p>
  247. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
  248. dolore magna aliqua. Ut enim ad minim veniam.
  249. </p>
  250. <div class="owl-carousel owl-testimonial">
  251. <div class="owl-item-testimonial">
  252. <figure>
  253. <img src="{% static 'images/corporate-people-photography.jpg' %}" alt="">
  254. </figure>
  255. <div class="description">
  256. <blockquote>
  257. Lorem ipsum dolor sit amet, con-
  258. sectetur adipiscing elit, sed do
  259. eiusmod tempor incididunt ut
  260. labore et dolore magna aliqua.
  261. Ut enim ad minim veniam.
  262. </blockquote>
  263. <div class="person-name">John Doe</div>
  264. <div class="person-info">CEO</div>
  265. <div class="person-info">Big Bank Ltd.</div>
  266. </div>
  267. </div>
  268. <div class="owl-item-testimonial">
  269. <figure>
  270. <img src="{% static 'images/boardroom-photography-London.jpg' %}" alt="">
  271. </figure>
  272. <div class="description">
  273. <blockquote>
  274. Lorem ipsum dolor sit amet, con-
  275. sectetur adipiscing elit, sed do
  276. eiusmod tempor incididunt ut
  277. labore et dolore magna aliqua.
  278. Ut enim ad minim veniam.
  279. </blockquote>
  280. <div class="person-name">John Doe</div>
  281. <div class="person-info">CEO</div>
  282. <div class="person-info">Big Bank Ltd.</div>
  283. </div>
  284. </div>
  285. <div class="owl-item-testimonial">
  286. <figure>
  287. <img src="{% static 'images/corporate-people-photography.jpg' %}" alt="">
  288. </figure>
  289. <div class="description">
  290. <blockquote>
  291. Lorem ipsum dolor sit amet, con-
  292. sectetur adipiscing elit, sed do
  293. eiusmod tempor incididunt ut
  294. labore et dolore magna aliqua.
  295. Ut enim ad minim veniam.
  296. </blockquote>
  297. <div class="person-name">John Doe</div>
  298. <div class="person-info">CEO</div>
  299. <div class="person-info">Big Bank Ltd.</div>
  300. </div>
  301. </div>
  302. <div class="owl-item-testimonial">
  303. <figure>
  304. <img src="{% static 'images/boardroom-photography-London.jpg' %}" alt="">
  305. </figure>
  306. <div class="description">
  307. <blockquote>
  308. Lorem ipsum dolor sit amet, con-
  309. sectetur adipiscing elit, sed do
  310. eiusmod tempor incididunt ut
  311. labore et dolore magna aliqua.
  312. Ut enim ad minim veniam.
  313. </blockquote>
  314. <div class="person-name">John Doe</div>
  315. <div class="person-info">CEO</div>
  316. <div class="person-info">Big Bank Ltd.</div>
  317. </div>
  318. </div>
  319. </div>
  320. <div class="testimonial-carousel-btn">
  321. <i class="fas fa-chevron-left" id="testimonial-carousel-left-btn"></i>
  322. <i class="fas fa-chevron-right" id="testimonial-carousel-right-btn"></i>
  323. </div>
  324. </section>
  325. <section id="enquiry">
  326. <h3>ENQUIRY FORM</h3>
  327. <p>
  328. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
  329. dolore magna aliqua. Ut enim ad minim veniam.
  330. </p>
  331. <form>
  332. <fieldset>
  333. <input type="text" placeholder="Name">
  334. <input type="email" placeholder="Email ID">
  335. <input type="tel" placeholder="Phone">
  336. <input type="text" placeholder="Subject">
  337. <textarea name="message" rows="6" placeholder="Your Message..."></textarea>
  338. <button type="button">Send</button>
  339. </fieldset>
  340. </form>
  341. </section>
  342. <section id="contact">
  343. <h3>CONTACT US</h3>
  344. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
  345. dolore magna aliqua. Ut enim ad minim veniam.
  346. </p>
  347. <div class="inner-container">
  348. <figure>
  349. <!-- Wrong image have been rendered for now, need to change it to map image. -->
  350. <img src="{% static 'images/map.png' %}" alt="">
  351. </figure>
  352. <ul class="description-container">
  353. <li>
  354. <label>Address</label>
  355. <address>
  356. 123 Beautiful Colony,
  357. Best Layout, 10th Main, 31st Cross,
  358. Bengaluru-560 007
  359. </address>
  360. </li>
  361. <li>
  362. <label>Phone</label>
  363. <div class="contact-content">(123) 456-7890</div>
  364. </li>
  365. <li>
  366. <label>E-mail</label>
  367. <div class="contact-content">hello@antique.com</div>
  368. </li>
  369. <li>
  370. <label>Socials</label>
  371. <ul class="contact-content">
  372. <li>
  373. <a href="#"><i class="fab fa-facebook-f"></i></a>
  374. </li>
  375. <li>
  376. <a href="#"><i class="fab fa-twitter"></i></a>
  377. </li>
  378. <li>
  379. <a href="#"><i class="fab fa-linkedin-in"></i></a>
  380. </li>
  381. <li>
  382. <a href="#"><i class="fab fa-google-plus-g"></i></a>
  383. </li>
  384. </ul>
  385. </li>
  386. </ul>
  387. </div>
  388. </section>
  389. <div class="temp-end">
  390. <small>copyright &copy; 2018 <mark>Webtrigon</mark></small>
  391. <small>Powered By <mark>Webtrigon Mini</mark></small>
  392. </div>
  393. <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  394. <script src="{% static 'OwlCarousel-plugins/owl.carousel.min.js' %}"></script>
  395. <script src="{% static 'js/home.js' %}"></script>
  396. </body>
  397. </html>