API tools faq
paste
Advertisement
Guest User

carousel

a guest
Jun 14th, 2018
205
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 64.86 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. <meta http-equiv="x-ua-compatible" content="ie=edge">
  8. <title>ANAND HOMES</title>
  9. <!-- Font Awesome -->
  10. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  11. <!-- Bootstrap core CSS -->
  12. <link href="css/bootstrap.min.css" rel="stylesheet">
  13. <!-- Material Design Bootstrap -->
  14. <link href="css/mdb.min.css" rel="stylesheet">
  15. <!-- Your custom styles (optional) -->
  16. <link href="css/style.css" rel="stylesheet">
  17. <!-- Start your project here-->
  18. <style>
  19. .card {
  20. margin: 20px 0;
  21. box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
  22. background-color: #fff;
  23. }
  24.  
  25.  
  26. .expand>.row>.text-center {
  27. transition: transform .25s, background .25s;
  28. }
  29.  
  30. .expand>.row>.text-center:hover {
  31. transform: scale(1.09);
  32. position: relative;
  33. z-index: 1;
  34. }
  35.  
  36.  
  37. .expanda>.row>.mx-auto {
  38. transition: transform .25s, background .25s;
  39. }
  40.  
  41. .expanda>.row>.mx-auto:hover {
  42. transform: scale(1.09);
  43. position: relative;
  44. z-index: 1;
  45. }
  46.  
  47. .expandb>.row>.text-center {
  48. transition: transform .25s, background .25s;
  49. }
  50.  
  51. .expandb>.row>.text-center:hover {
  52. transform: scale(1.09);
  53. position: relative;
  54. z-index: 1;
  55. }
  56. /*
  57. html,
  58. body {
  59. max-width: 100%;
  60. overflow-x: hidden;
  61. }
  62. */
  63.  
  64. @font-face {
  65. font-family: OpenSans-Bold;
  66. src: url(font/open-sans/OpenSans-Bold.ttf);
  67. }
  68.  
  69.  
  70. @font-face {
  71. font-family: OpenSans-Semibold;
  72. src: url(font/open-sans/OpenSans-Semibold.ttf);
  73. }
  74.  
  75. @font-face {
  76. font-family: OpenSans-Regular;
  77. src: url(font/open-sans/OpenSans-Regular.ttf);
  78. }
  79.  
  80. @font-face {
  81. font-family: OpenSans-Light;
  82. src: url(font/open-sans/OpenSans-Light.ttf);
  83. }
  84.  
  85. @font-face {
  86. font-family: OpenSans-Italic;
  87. src: url(font/open-sans/OpenSans-Italic.ttf);
  88. }
  89.  
  90.  
  91.  
  92.  
  93.  
  94.  
  95. @font-face {
  96. font-family: Oswald-Bold;
  97. src: url(font/oswald/Oswald-Bold.ttf);
  98. }
  99.  
  100. @font-face {
  101. font-family: Oswald-Regular;
  102. src: url(font/oswald/Oswald-Regular.ttf);
  103. }
  104.  
  105. @font-face {
  106. font-family: Oswald-DemiBold;
  107. src: url(font/oswald/Oswald-DemiBold.ttf);
  108. }
  109.  
  110.  
  111. @font-face {
  112. font-family: Oswald-Medium;
  113. src: url(font/oswald/Oswald-Medium.ttf);
  114. }
  115.  
  116. @font-face {
  117. font-family: Oswald-Heavy;
  118. src: url(font/oswald/Oswald-Heavy.ttf);
  119. }
  120.  
  121. @font-face {
  122. font-family: Oswald-Light;
  123. src: url(font/oswald/Oswald-Light.ttf);
  124. }
  125.  
  126. @font-face {
  127. font-family: Oswald-Stencil;
  128. src: url(font/oswald/Oswald-Stencil.ttf);
  129. }
  130.  
  131.  
  132.  
  133.  
  134. nav a {
  135. position: relative;
  136. display: inline-block;
  137. outline: none;
  138. color: #000;
  139. text-decoration: none;
  140. text-transform: uppercase;
  141. letter-spacing: 1.5px;
  142. font-weight: 400;
  143. text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
  144. font-size: 1em;
  145. }
  146.  
  147. nav a:hover,
  148. nav a:focus {
  149. outline: none;
  150. color: #37474F;
  151. }
  152.  
  153.  
  154. @media (max-width: 576px) {
  155.  
  156. nav a {
  157. position: relative;
  158. display: inline-block;
  159. outline: none;
  160. color: #000;
  161. text-decoration: none;
  162. text-transform: uppercase;
  163. letter-spacing: 1.5px;
  164. font-weight: 400;
  165. text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
  166. font-size: 1em;
  167. text-align: center;
  168. }
  169.  
  170. nav a:hover,
  171. nav a:focus {
  172. outline: none;
  173. color: #37474F;
  174. }
  175.  
  176. .ah1 {
  177.  
  178. font-size: 50px;
  179. font-family: Oswald-Bold;
  180. color: white;
  181. text-align: center;
  182. }
  183. .ah2 {
  184. font-size: 50px;
  185. font-family: Oswald-Stencil;
  186. color: white;
  187. text-align: center;
  188. }
  189.  
  190. .atxt {
  191. font-size: 16px;
  192. font-family: OpenSans-Regular;
  193. color: white;
  194. text-align: justify;
  195. }
  196. .a1txt {
  197. font-size: 16px;
  198. font-family: OpenSans-Regular;
  199. color: black;
  200. text-align: justify;
  201. }
  202. .a2h1 {
  203. font-size: 55px;
  204. font-family: Oswald-Bold;
  205. color: white;
  206. text-align: center;
  207. }
  208.  
  209. .a2h2 {
  210. font-size: 55px;
  211. font-family: Oswald-Stencil;
  212. color: white;
  213. text-align: center;
  214. }
  215.  
  216. .gh {
  217. font-size: 40px;
  218. color: #37474F;
  219. font-family: Oswald-Bold;
  220. text-align: center;
  221. font-weight: 700;
  222. }
  223.  
  224. .fh {
  225. font-size: 40px;
  226. color: #3E4551;
  227. font-family: Oswald-Bold;
  228. font-weight: 700;
  229. text-align: center;
  230. }
  231.  
  232. .ftxt {
  233. font-family: OpenSans-italic;
  234. text-align: center;
  235. color: #2BBBAD;
  236. font-size: 17px;
  237. }
  238.  
  239. .fh2 {
  240. font-size: 30px;
  241. color: #37474F;
  242. font-family: Oswald-Bold;
  243. font-weight: 700;
  244. text-align: center;
  245. font-style: italic;
  246. }
  247. .ftxt1 {
  248. font-family: OpenSans-italic;
  249. text-align: center;
  250. color: #2BBBAD;
  251. font-size: 18px;
  252. }
  253. .nm1 {
  254.  
  255. background-color: #2BBBAD;
  256. height: 385px;
  257. width: 100%;
  258. margin-top: 30px;
  259. }
  260.  
  261. .fh1 {
  262. font-size: 23px;
  263. color: #37474F;
  264. font-family: Oswald-Bold;
  265. font-weight: 700;
  266. text-align: center;
  267. }
  268. .aatxt {
  269. font-size: 15px;
  270. font-family: OpenSans-Regular;
  271. color: black;
  272. text-align: justify;
  273. }
  274. }
  275.  
  276.  
  277.  
  278. @media (min-width: 576px) {
  279.  
  280. nav a {
  281. position: relative;
  282. display: inline-block;
  283. outline: none;
  284. color: #000;
  285. text-decoration: none;
  286. text-transform: uppercase;
  287. letter-spacing: 1.5px;
  288. font-weight: 400;
  289. text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
  290. font-size: 1em;
  291. text-align: center;
  292. }
  293.  
  294. nav a:hover,
  295. nav a:focus {
  296. outline: none;
  297. color: #37474F;
  298. }
  299.  
  300. .ah1 {
  301.  
  302. font-size: 65px;
  303. font-family: Oswald-Bold;
  304. color: white;
  305. margin-top: 30px;
  306. text-align: center;
  307. }
  308. .ah2 {
  309. font-size: 65px;
  310. font-family: Oswald-Stencil;
  311. color: white;
  312. text-align: center;
  313. }
  314.  
  315. .atxt {
  316. font-size: 16px;
  317. font-family: OpenSans-Regular;
  318. color: white;
  319. text-align: justify;
  320. }
  321. .a1txt {
  322. font-size: 16px;
  323. font-family: OpenSans-Regular;
  324. color: black;
  325. text-align: justify;
  326. }
  327.  
  328.  
  329. .a2h1 {
  330. font-size: 50px;
  331. font-family: Oswald-Stencil;
  332. color: white;
  333. letter-spacing: 1.5px;
  334. text-align: center;
  335. }
  336.  
  337. .a2h2 {
  338. font-size: 50px;
  339. font-family: Oswald-Light;
  340. color: white;
  341. font-weight: 700;
  342. letter-spacing: 1.5px;
  343. }
  344.  
  345. .gh {
  346. font-size: 30px;
  347. color: #37474F;
  348. font-family: Oswald-Bold;
  349. text-align: center;
  350. font-weight: 700;
  351. }
  352. .fh {
  353. font-size: 40px;
  354. color: #3E4551;
  355. font-family: Oswald-Bold;
  356. font-weight: 700;
  357. text-align: center;
  358. }
  359.  
  360. .ftxt {
  361. font-family: OpenSans-italic;
  362. text-align: center;
  363. color: #2BBBAD;
  364. font-size: 20px;
  365. }
  366.  
  367. .nm {
  368.  
  369. background-color: #2BBBAD;
  370. height: 615px;
  371. width: 100%;
  372. margin-top: 30px;
  373. }
  374. .fh1 {
  375. font-size: 23px;
  376. color: #37474F;
  377. font-family: Oswald-Bold;
  378. font-weight: 700;
  379. text-align: center;
  380. }
  381.  
  382. .nm1 {
  383.  
  384. background-color: #2BBBAD;
  385. height: 385px;
  386. width: 100%;
  387. margin-top: 30px;
  388. }
  389.  
  390. .nm2 {
  391. margin-top: 0px;
  392. }
  393.  
  394. .fh2 {
  395. font-size: 30px;
  396. color: #37474F;
  397. font-family: Oswald-Bold;
  398. font-weight: 700;
  399. text-align: center;
  400. font-style: italic;
  401. }
  402. .ftxt1 {
  403. font-family: OpenSans-italic;
  404. text-align: center;
  405. color: #2BBBAD;
  406. font-size: 18px;
  407. }
  408. .aatxt {
  409. font-size: 15px;
  410. font-family: OpenSans-Regular;
  411. color: black;
  412. text-align: justify;
  413. }
  414. }
  415.  
  416.  
  417. @media (min-width: 768px) {
  418.  
  419. .ah1 {
  420.  
  421. font-size: 75px;
  422. font-family: Oswald-Bold;
  423. color: white;
  424. margin-top: 30px;
  425. text-align: center;
  426. }
  427. .ah2 {
  428. font-size: 75px;
  429. font-family: Oswald-Stencil;
  430. color: white;
  431. text-align: center;
  432. }
  433. .atxt {
  434. font-size: 17px;
  435. font-family: OpenSans-Regular;
  436. color: white;
  437. text-align: justify;
  438. }
  439. .a1txt {
  440. font-size: 16px;
  441. font-family: OpenSans-Regular;
  442. color: black;
  443. text-align: justify;
  444. }
  445.  
  446. .a2h1 {
  447. font-size: 60px;
  448. font-family: Oswald-Stencil;
  449. color: white;
  450. letter-spacing: 1.5px;
  451. }
  452.  
  453. .a2h2 {
  454. font-size: 60px;
  455. font-family: Oswald-Light;
  456. color: white;
  457. font-weight: 700;
  458. letter-spacing: 1.5px;
  459. }
  460. .gh {
  461. font-size: 30px;
  462. color: #37474F;
  463. font-family: Oswald-Bold;
  464. text-align: center;
  465. font-weight: 700;
  466. }
  467.  
  468. .fh {
  469. font-size: 40px;
  470. color: #3E4551;
  471. font-family: Oswald-Bold;
  472. font-weight: 700;
  473. text-align: center;
  474. }
  475.  
  476. .ftxt {
  477. font-family: OpenSans-italic;
  478. text-align: center;
  479. color: #2BBBAD;
  480. font-size: 20px;
  481. }
  482. .nm {
  483.  
  484. background-color: #2BBBAD;
  485. height: 615px;
  486. width: 100%;
  487. margin-top: 30px;
  488. }
  489.  
  490. .fh1 {
  491. font-size: 27px;
  492. color: #37474F;
  493. font-family: Oswald-Bold;
  494. font-weight: 700;
  495. text-align: center;
  496. }
  497.  
  498. .nm1 {
  499.  
  500. background-color: #2BBBAD;
  501. height: 385px;
  502. width: 100%;
  503. margin-top: 30px;
  504. }
  505.  
  506. .nm2 {
  507. margin-top: 0px;
  508. }
  509. .fh2 {
  510. font-size: 30px;
  511. color: #37474F;
  512. font-family: Oswald-Bold;
  513. font-weight: 700;
  514. text-align: center;
  515. font-style: italic;
  516. }
  517. .ftxt1 {
  518. font-family: OpenSans-italic;
  519. text-align: center;
  520. color: #2BBBAD;
  521. font-size: 18px;
  522. }
  523. .aatxt {
  524. font-size: 15px;
  525. font-family: OpenSans-Regular;
  526. color: black;
  527. text-align: justify;
  528. }
  529. }
  530.  
  531.  
  532. @media (min-width: 992px) {
  533.  
  534.  
  535. .ah1 {
  536.  
  537. font-size: 75px;
  538. font-family: Oswald-Bold;
  539. color: white;
  540. margin-top: 30px;
  541. }
  542. .ah2 {
  543. font-size: 75px;
  544. font-family: Oswald-Stencil;
  545. color: white;
  546. }
  547. .atxt {
  548. font-size: 16px;
  549. font-family: OpenSans-Regular;
  550. color: white;
  551. text-align: justify;
  552. }
  553. .a1txt {
  554. font-size: 16px;
  555. font-family: OpenSans-Regular;
  556. color: black;
  557. text-align: justify;
  558. }
  559.  
  560.  
  561. .a2h1 {
  562. font-size: 60px;
  563. font-family: Oswald-Stencil;
  564. color: white;
  565. letter-spacing: 1.5px;
  566. }
  567.  
  568. .a2h2 {
  569. font-size: 60px;
  570. font-family: Oswald-Light;
  571. color: white;
  572. font-weight: 700;
  573. letter-spacing: 1.5px;
  574. }
  575.  
  576.  
  577. .gh {
  578. font-size: 40px;
  579. color: #37474F;
  580. font-family: Oswald-Bold;
  581. text-align: center;
  582. font-weight: 700;
  583. }
  584.  
  585. .fh {
  586. font-size: 40px;
  587. color: #3E4551;
  588. font-family: Oswald-Bold;
  589. font-weight: 700;
  590. text-align: center;
  591. }
  592.  
  593. .ftxt {
  594. font-family: OpenSans-italic;
  595. text-align: center;
  596. color: #2BBBAD;
  597. font-size: 20px;
  598. }
  599.  
  600. .nm {
  601.  
  602. background-color: #2BBBAD;
  603. height: 615px;
  604. width: 100%;
  605. margin-top: -180px;
  606. }
  607.  
  608. .fh1 {
  609. font-size: 30px;
  610. color: #37474F;
  611. font-family: Oswald-Bold;
  612. font-weight: 700;
  613. text-align: center;
  614. }
  615.  
  616. .fh2 {
  617. font-size: 30px;
  618. color: #37474F;
  619. font-family: Oswald-Bold;
  620. font-weight: 700;
  621. text-align: center;
  622. font-style: italic;
  623. }
  624.  
  625. .nm1 {
  626. background-color: #2BBBAD;
  627. height: 385px;
  628. width: 100%;
  629. margin-top: 30px;
  630. }
  631. .nm2 {
  632. margin-top: 30px;
  633. }
  634. .aatxt {
  635. font-size: 15px;
  636. font-family: OpenSans-Regular;
  637. color: black;
  638. text-align: justify;
  639. }
  640.  
  641. .ftxt1 {
  642. font-family: OpenSans-italic;
  643. text-align: center;
  644. color: #2BBBAD;
  645. font-size: 20px;
  646. }
  647. }
  648.  
  649.  
  650. @media (min-width: 1200px) {
  651.  
  652. .ah1 {
  653. margin-top: 30px;
  654. font-size: 60px;
  655. font-family: Oswald-Light;
  656. color: white;
  657. font-weight: 700;
  658. letter-spacing: 1.5px;
  659. }
  660. .ah2 {
  661. font-size: 60px;
  662. font-family: Oswald-Stencil;
  663. color: white;
  664. letter-spacing: 1.5px;
  665. }
  666. .atxt {
  667. font-size: 16px;
  668. font-family: OpenSans-Regular;
  669. color: white;
  670. text-align: justify;
  671. }
  672. .aatxt {
  673. font-size: 15px;
  674. font-family: OpenSans-Regular;
  675. color: black;
  676. text-align: justify;
  677. }
  678.  
  679. .a1txt {
  680. font-size: 16px;
  681. font-family: OpenSans-Italic;
  682. color: black;
  683. text-align: justify;
  684. }
  685.  
  686. .a2h1 {
  687. font-size: 60px;
  688. font-family: Oswald-Stencil;
  689. color: white;
  690. letter-spacing: 1.5px;
  691. }
  692.  
  693. .a2h2 {
  694. font-size: 60px;
  695. font-family: Oswald-Light;
  696. color: white;
  697. font-weight: 700;
  698. letter-spacing: 1.5px;
  699. }
  700.  
  701.  
  702.  
  703. .gh {
  704. font-size: 55px;
  705. color: #37474F;
  706. font-family: Oswald-Bold;
  707. text-align: center;
  708. font-weight: 700;
  709. }
  710.  
  711. .fh {
  712. font-size: 55px;
  713. color: #3E4551;
  714. font-family: Oswald-Bold;
  715. font-weight: 700;
  716. text-align: center;
  717. }
  718.  
  719. .ftxt {
  720. font-family: OpenSans-italic;
  721. text-align: center;
  722. color: #2BBBAD;
  723. font-size: 22px;
  724. }
  725.  
  726. .ftxt1 {
  727. font-family: OpenSans-italic;
  728. text-align: center;
  729. color: #2BBBAD;
  730. font-size: 20px;
  731. }
  732.  
  733. .fh1 {
  734. font-size: 30px;
  735. color: #37474F;
  736. font-family: Oswald-Bold;
  737. font-weight: 700;
  738. text-align: center;
  739. }
  740.  
  741. .fh2 {
  742. font-size: 30px;
  743. color: #37474F;
  744. font-family: Oswald-Bold;
  745. font-weight: 700;
  746. text-align: center;
  747. font-style: italic;
  748. }
  749.  
  750.  
  751. .nm {
  752.  
  753. background-color: #2BBBAD;
  754. height: 615px;
  755. width: 100%;
  756. margin-top: -225px;
  757. }
  758.  
  759. .nm1 {
  760.  
  761. background-color: #2BBBAD;
  762. height: 385px;
  763. width: 100%;
  764. margin-top: 30px;
  765. }
  766.  
  767. .nm2 {
  768. margin-top: 30px;
  769. }
  770. }
  771.  
  772.  
  773. @media (min-width: 1600px) {}
  774.  
  775. @media (min-width: 1768px) {}
  776.  
  777.  
  778. @media (min-width: 1920px) {}
  779. /* Width */
  780.  
  781. ::-webkit-scrollbar {
  782. width: 15px;
  783. }
  784. /* Track */
  785.  
  786. ::-webkit-scrollbar-track {
  787. background: #f1f1f1;
  788. }
  789. /* Handle */
  790.  
  791. ::-webkit-scrollbar-thumb {
  792. background: #888;
  793. }
  794. /* Handle on hover */
  795.  
  796. ::-webkit-scrollbar-thumb:hover {
  797. background: #555;
  798. }
  799. /*
  800. #video-viewport {
  801. position: absolute;
  802. top: 0;
  803. left: 0;
  804. width: 100%;
  805. height: 100%;
  806. overflow: hidden;
  807. z-index: -1;
  808. }
  809.  
  810. video {
  811. display: block;
  812. width: 100%;
  813. height: auto;
  814. }
  815.  
  816. .fullsize-video-bg {
  817. height: 100%;
  818. overflow: hidden;
  819. }*/
  820.  
  821. * {
  822. -webkit-box-sizing: border-box;
  823. -moz-box-sizing: border-box;
  824. box-sizing: border-box;
  825. }
  826.  
  827. *:before,
  828. *:after {
  829. -webkit-box-sizing: inherit;
  830. -moz-box-sizing: inherit;
  831. box-sizing: inherit;
  832. }
  833.  
  834. .op {
  835. font-family: OpenSans-Regular;
  836. }
  837.  
  838. .clr {
  839. background-color: #33b5e5;
  840. }
  841.  
  842. .clr1 {
  843. background-color: #37474F;
  844. }
  845.  
  846. .clr2 {
  847. background-color: #ffffff;
  848. }
  849.  
  850. .clr3 {
  851. background-color: #2BBBAD;
  852. }
  853.  
  854. html,
  855. body,
  856. .view {
  857. height: 100%;
  858. }
  859. /* Full Page Carousel itself*/
  860.  
  861. .carousel {
  862. height: 100%;
  863. }
  864.  
  865. .carousel .carousel-inner {
  866. height: 100%;
  867. }
  868.  
  869. .carousel .carousel-inner .carousel-item,
  870. .carousel .carousel-inner .active {
  871. height: 100%;
  872. }
  873. </style>
  874. </head>
  875.  
  876. <body>
  877. <nav class="navbar fixed-top navbar-expand-lg navbar-light white scrolling-navbar">
  878. <a class="navbar-brand" href="#"><img src="img/AH 3.png" style="height:65px; width:125px;" alt="img"></a>
  879. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  880. <span class="navbar-toggler-icon"></span>
  881. </button>
  882. <div class="collapse navbar-collapse" id="navbarSupportedContent">
  883. <ul class="navbar-nav ml-auto smooth-scroll">
  884. <li class="nav-item">
  885. <a class="nav-link" href="#about" style="margin-right:50px; font-family:Oswald-Regular; font-weight:100;">ABOUT <span class="sr-only">(current)</span></a>
  886. </li>
  887. <li class="nav-item">
  888. <a class="nav-link" href="#gallery" style="margin-right:50px; font-family:Oswald-Regular; font-weight:100;">GALLERY</a>
  889. </li>
  890. <li class="nav-item">
  891. <a class="nav-link" href="#facilities" style="margin-right:50px; font-family:Oswald-Regular; font-weight:100;">FACILITIES</a>
  892. </li>
  893. <li class="nav-item">
  894. <a class="nav-link" href="#tariff" style="margin-right:50px; font-family:Oswald-Regular; font-weight:100;"><span data-hover="ABOUT">TARIFF</span></a>
  895. </li>
  896. <li class="nav-item">
  897. <a class="nav-link" href="#location" style="margin-right:50px; font-family:Oswald-Regular; font-weight:100;"><span data-hover="BLOG">LOCATION</span></a>
  898. </li>
  899. <li class="nav-item">
  900. <a class="nav-link" href="#contact" style="margin-right:50px; font-family:Oswald-Regular; font-weight:100;"><span data-hover="CONTACT">CONTACT</span></a>
  901. </li>
  902. </ul>
  903. </div>
  904. </nav>
  905. <!--Carousel Wrapper-->
  906. <div id="video-carousel-example2" class="carousel slide carousel-fade" data-ride="carousel">
  907. <!--Indicators-->
  908. <ol class="carousel-indicators">
  909. <li data-target="#video-carousel-example2" data-slide-to="0" class="active"></li>
  910. <li data-target="#video-carousel-example2" data-slide-to="1"></li>
  911. <li data-target="#video-carousel-example2" data-slide-to="2"></li>
  912. </ol>
  913. <!--/.Indicators-->
  914. <!--Slides-->
  915. <div class="carousel-inner" role="listbox">
  916. <!-- First slide -->
  917. <div class="carousel-item active">
  918. <!--Mask color-->
  919. <div class="view">
  920. <!--Video source-->
  921. <video class="video-intro" autoplay loop>
  922. <source src="https://mdbootstrap.com/img/video/city.mp4" type="video/mp4" />
  923. </video>
  924. <div class="mask rgba-indigo-light"></div>
  925. </div>
  926. <!--Caption-->
  927. <div class="carousel-caption pb-5 mx-auto">
  928. <div class="animated fadeInDown pb-5">
  929. <h1 class="h1-responsive font-weight-bold" style="font-size:80px; font-family:Oswald-Bold;">ANAND HOMES</h1>
  930. <p class="pb-5 mb-5" style="font-size:40px; font-family:Oswald-Light;">Welcoming you warmly,
  931. <br> to stay in homes away from home.</p>
  932. </div>
  933. </div>
  934. <!--Caption-->
  935. </div>
  936. <!-- /.First slide -->
  937. <!--Second slide-->
  938. <div class="carousel-item">
  939. <div class="view">
  940. <!--Video source-->
  941. <video class="video-intro" autoplay loop>
  942. <source src="https://mdbootstrap.com/img/video/forest.mp4" type="video/mp4" />
  943. </video>
  944. <!-- Mask & flexbox options-->
  945. <div class="mask rgba-black-light d-flex justify-content-center align-items-center">
  946. <!-- Content -->
  947. <div class="text-center white-text mx-5 wow fadeIn">
  948. <h1 class="mb-4">
  949. <strong>Learn Bootstrap 4 with MDB</strong>
  950. </h1>
  951. <p>
  952. <strong>Best & free guide of responsive web design</strong>
  953. </p>
  954. <p class="mb-4 d-none d-md-block">
  955. <strong>The most comprehensive tutorial for the Bootstrap 4. Loved by over 500 000 users. Video and written versions
  956. available. Create your own, stunning website.</strong>
  957. </p>
  958. <a target="_blank" href="https://mdbootstrap.com/bootstrap-tutorial/" class="btn btn-outline-white btn-lg">Start free tutorial
  959. <i class="fa fa-graduation-cap ml-2"></i>
  960. </a>
  961. </div>
  962. <!-- Content -->
  963. </div>
  964. <!-- Mask & flexbox options-->
  965. </div>
  966. </div>
  967. <!--/Second slide-->
  968. <!--Third slide-->
  969. <div class="carousel-item">
  970. <div class="view">
  971. <!--Video source-->
  972. <video class="video-intro" autoplay loop>
  973. <source src="https://mdbootstrap.com/img/video/Tropical.mp4" type="video/mp4" />
  974. </video>
  975. <!-- Mask & flexbox options-->
  976. <div class="mask rgba-black-light d-flex justify-content-center align-items-center">
  977. <!-- Content -->
  978. <div class="text-center white-text mx-5 wow fadeIn">
  979. <h1 class="mb-4">
  980. <strong>Learn Bootstrap 4 with MDB</strong>
  981. </h1>
  982. <p>
  983. <strong>Best & free guide of responsive web design</strong>
  984. </p>
  985. <p class="mb-4 d-none d-md-block">
  986. <strong>The most comprehensive tutorial for the Bootstrap 4. Loved by over 500 000 users. Video and written versions
  987. available. Create your own, stunning website.</strong>
  988. </p>
  989. <a target="_blank" href="https://mdbootstrap.com/bootstrap-tutorial/" class="btn btn-outline-white btn-lg">Start free tutorial
  990. <i class="fa fa-graduation-cap ml-2"></i>
  991. </a>
  992. </div>
  993. <!-- Content -->
  994. </div>
  995. <!-- Mask & flexbox options-->
  996. </div>
  997. </div>
  998. <!--/Third slide-->
  999. </div>
  1000. <!--/.Slides-->
  1001. <!--Controls-->
  1002. <a class="carousel-control-prev" href="#video-carousel-example2" role="button" data-slide="prev">
  1003. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  1004. <span class="sr-only">Previous</span>
  1005. </a>
  1006. <a class="carousel-control-next" href="#video-carousel-example2" role="button" data-slide="next">
  1007. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  1008. <span class="sr-only">Next</span>
  1009. </a>
  1010. <!--/.Controls-->
  1011. </div>
  1012. <!--Carousel Wrapper-->
  1013. <main>
  1014. <section class="clr" id="about">
  1015. <div class="container">
  1016. <div class="row pt-5 pb-5">
  1017. <div class="col-xl-6 col-lg-6 col-md-12 col-xs-12 mb-4">
  1018. <p class="ah1">WHAT ARE
  1019. <br> <b style="letter-spacing:2px;">SERVICE </b>
  1020. <br> <b class="ah2">APARTMENTS ?</b></p>
  1021. </div>
  1022. <div class="col-xl-6 col-lg-6 col-xs-12 mb-4">
  1023. <p class="atxt mt-5">A service apartment is a semi / fully furnished apartment for your short-term and the occasional long-term stays in cities for your professional or personal visits. They are the answer to the problem that most visitors to a city face: Where do I stay?</p>
  1024. <p class="atxt">This question arises when we are to stay in a new city without friends or family and a hotel may not be comfortable enough. Travelling is made easier with service apartments.</p>
  1025. <p class="atxt">Whether your stay is brief or extended, our service apartments provide the comfort of one’s home and the connectivity of a hotel.</p>
  1026. </div>
  1027. </div>
  1028. </div>
  1029. </section>
  1030. <section class="clr1">
  1031. <div class="container">
  1032. <div class="row pt-5 pb-5">
  1033. <div class="col-xl-7 col-lg-6 col-md-12 col-xs-12 mt-4 mb-4">
  1034. <div class="card mx-auto mb-4 mt-4" style="background-color:#ffffff; height:355px; width:100%;">
  1035. <img src="img/009.jpg" alt="img" style="height:345px; width:98%; margin-top:5px;" class="mx-auto">
  1036. </div>
  1037. </div>
  1038. <div class="col-xl-5 col-lg-6 col-xs-12 mt-4 mb-4 pt-4">
  1039. <p class="a2h1 ">CHENNAI'S
  1040. <br> <b class="a2h2">AFFORDABLE </b>
  1041. <br> <b class="a2h2"> SERVICE APARTMENTS</b></p>
  1042. </div>
  1043. </div>
  1044. </div>
  1045. </section>
  1046. <section class="clr2">
  1047. <div class="container">
  1048. <div class="row">
  1049. <div class="col-xl-10 col-lg-12 col-md-12 col-xs-12 mx-auto">
  1050. <p class="a1txt mt-5" style="color:#33b5e5; font-size:20px;">A modern establishment launched in 2017, Anand Homes are home styled service apartments. Our service apartments are located in Velachery, a suburb of Chennai that enjoys great connectivity.</p>
  1051. <p class="aatxt">Located centrally within Velachery’s residential area, our service apartments uniquely give you access to Chennai’s commercial localities, while allowing you to rest in comfort in the quiet and peaceful residential locality.</p>
  1052. <p class="aatxt">Targeted for the short-term visitors to the city who need to stay only for a few days, Anand Homes is the perfect solution for everyone: families who are attending a wedding and other occasions in the city, patients staying for the short period of their treatment at nearby medical facilities, or even youngsters who have come down during the weekend for an examination or a job interview</p>
  1053. </div>
  1054. </div>
  1055. </div>
  1056. </section>
  1057. <section class="clr2" id="gallery">
  1058. <div class="container">
  1059. <div class="row">
  1060. <div class="col-xl-3 col-lg-12 col-md-12 col-xs-12 mx-auto">
  1061. <hr>
  1062. </div>
  1063. </div>
  1064. </div>
  1065. <div class="container">
  1066. <div class="row mb-3">
  1067. <div class="col-xl-10 col-xs-12 mx-auto">
  1068. <p class="gh mt-5 mb-5"> GALLERY</p>
  1069. </div>
  1070. <div class="col-xl-12 col-xs-12 mx-auto">
  1071. <!--Carousel Wrapper-->
  1072. <div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel">
  1073. <!--Slides-->
  1074. <div class="carousel-inner" role="listbox">
  1075. <!--First slide-->
  1076. <div class="carousel-item active">
  1077. <img class="d-block w-100" src="img/001.jpg" alt="First slide">
  1078. </div>
  1079. <!--/First slide-->
  1080. <!--Second slide-->
  1081. <div class="carousel-item">
  1082. <img class="d-block w-100" src="img/002.jpg" alt="Second slide">
  1083. </div>
  1084. <!--/Second slide-->
  1085. <!--Third slide-->
  1086. <div class="carousel-item">
  1087. <img class="d-block w-100" src="img/003.jpg" alt="Third slide">
  1088. </div>
  1089. <!--/Third slide-->
  1090. <!--Third slide-->
  1091. <div class="carousel-item">
  1092. <img class="d-block w-100" src="img/004.jpg" alt="Third slide">
  1093. </div>
  1094. <!--/Third slide-->
  1095. <!--Third slide-->
  1096. <div class="carousel-item">
  1097. <img class="d-block w-100" src="img/005.jpg" alt="Third slide">
  1098. </div>
  1099. <!--/Third slide-->
  1100. <!--Third slide-->
  1101. <div class="carousel-item">
  1102. <img class="d-block w-100" src="img/006.jpg" alt="Third slide">
  1103. </div>
  1104. <!--/Third slide-->
  1105. <!--Third slide-->
  1106. <div class="carousel-item">
  1107. <img class="d-block w-100" src="img/007.jpg" alt="Third slide">
  1108. </div>
  1109. <!--/Third slide-->
  1110. <!--Third slide-->
  1111. <div class="carousel-item">
  1112. <img class="d-block w-100" src="img/008.jpg" alt="Third slide">
  1113. </div>
  1114. <!--/Third slide-->
  1115. <!--Third slide-->
  1116. <div class="carousel-item">
  1117. <img class="d-block w-100" src="img/009.jpg" alt="Third slide">
  1118. </div>
  1119. <!--/Third slide-->
  1120. </div>
  1121. <!--/.Slides-->
  1122. <!--Controls-->
  1123. <a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
  1124. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  1125. <span class="sr-only">Previous</span>
  1126. </a>
  1127. <a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
  1128. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  1129. <span class="sr-only">Next</span>
  1130. </a>
  1131. <!--/.Controls-->
  1132. <ol class="carousel-indicators">
  1133. <li data-target="#carousel-thumb" data-slide-to="0" class="active"> <img class="d-block w-100" alt="img" src="img/001.jpg"></li>
  1134. <li data-target="#carousel-thumb" data-slide-to="1"><img class="d-block w-100" alt="img" src="img/002.jpg"></li>
  1135. <li data-target="#carousel-thumb" data-slide-to="2"><img class="d-block w-100" alt="img" src="img/003.jpg"></li>
  1136. <li data-target="#carousel-thumb" data-slide-to="3"><img class="d-block w-100" alt="img" src="img/004.jpg"></li>
  1137. <li data-target="#carousel-thumb" data-slide-to="4"><img class="d-block w-100" alt="img" src="img/005.jpg"></li>
  1138. <li data-target="#carousel-thumb" data-slide-to="5"><img class="d-block w-100" alt="img" src="img/006.jpg"></li>
  1139. <li data-target="#carousel-thumb" data-slide-to="6"><img class="d-block w-100" alt="img" src="img/007.jpg"></li>
  1140. <li data-target="#carousel-thumb" data-slide-to="7"><img class="d-block w-100" alt="img" src="img/008.jpg"></li>
  1141. <li data-target="#carousel-thumb" data-slide-to="8"><img class="d-block w-100" alt="img" src="img/009.jpg"></li>
  1142. </ol>
  1143. </div>
  1144. <!--/.Carousel Wrapper-->
  1145. </div>
  1146. </div>
  1147. </div>
  1148. </section>
  1149. <section class="white-text" id="facilities">
  1150. <div class="container">
  1151. <div class="row mt-5">
  1152. <div class="col-xl-3 col-lg-12 col-md-12 col-xs-12 mx-auto">
  1153. <hr>
  1154. </div>
  1155. </div>
  1156. </div>
  1157. <div class="container">
  1158. <div class="row mx-auto">
  1159. <div class="col-xl-10 col-xs-12 mx-auto">
  1160. <p class="fh mt-5"> FACILITIES</p>
  1161. </div>
  1162. <div class="col-xl-10 col-xs-12 mx-auto mb-4 mt-5">
  1163. <p class="ftxt">In order to make you feel at home outside of your home, we at Anand Homes have done away with the traditional elements of hotels, such as formal reception desks. But that does not mean we do not provide anything else to our customers, you, our guests.</p>
  1164. </div>
  1165. </div>
  1166. </div>
  1167. </section>
  1168. <section class="clr2" id="facilities">
  1169. <div class="container">
  1170. <div class="row mx-auto">
  1171. <div class="col-xl-10 col-xs-12 mx-auto">
  1172. <p class="fh1 mt-5"> ANAND HOME’S IRRESISTIBLE AMENITIES</p>
  1173. <hr style="width:200px;">
  1174. </div>
  1175. <div class="col-xl-12">
  1176. <!-- Section: Features v.1 -->
  1177. <section class="text-center my-5">
  1178. <!-- Grid row -->
  1179. <div class="row mb-5">
  1180. <!-- Grid column -->
  1181. <div class="col-xl-4 col-lg-4 col-md-6">
  1182. <i class="fa fa-video-camera fa-3x"></i>
  1183. <h5 class="font-weight-bold my-4" style="font-family:Oswald-Bold;">24/7 CCTV SYSTEM</h5>
  1184. <hr style="width:200px;">
  1185. <p class="mb-md-0 mb-5" style="text-align:justify; font-family:OpenSans-Light;">We take security seriously and have installed a fully functional 24/7 CCTV system to ensure the safety and security of you and your personal belongings.
  1186. </p>
  1187. </div>
  1188. <!-- Grid column -->
  1189. <!-- Grid column -->
  1190. <div class="col-xl-4 col-lg-4 col-md-6">
  1191. <i class="fa fa-dollar fa-3x"></i>
  1192. <h5 class="font-weight-bold my-4" style="font-family:Oswald-Bold;">DYNAMIC PRICING</h5>
  1193. <hr style="width:200px;">
  1194. <p class="mb-md-0 mb-5" style="text-align:justify; font-family:OpenSans-Light;">We at Anand Homes warmly welcome you to the world of budget accommodation with dynamic pricing options. The rooms are available at dynamic pricing thus well suiting your varied needs.
  1195. </p>
  1196. </div>
  1197. <!-- Grid column -->
  1198. <!-- Grid column -->
  1199. <div class="col-xl-4 col-lg-4 col-md-7 mx-auto">
  1200. <i class="fa fa-battery fa-3x"></i>
  1201. <h5 class="font-weight-bold my-4" style="font-family:Oswald-Bold;">100% POWER BACK UP</h5>
  1202. <hr style="width:200px;">
  1203. <p class="mb-0" style="text-align:justify; font-family:OpenSans-Light;">The whole service apartment complex enjoys 100% power back up so that you are not stuck without power in the middle of getting ready for an important day, or are interrupted at the end of a tiring one.
  1204. </p>
  1205. </div>
  1206. <!-- Grid column -->
  1207. </div>
  1208. <!-- Grid row -->
  1209. <!-- Grid row -->
  1210. <div class="row mx-auto mt-5">
  1211. <!-- Grid column -->
  1212. <div class="col-xl-5 col-lg-5 col-md-6 mx-auto">
  1213. <i class="fa fa-desktop fa-3x"></i>
  1214. <h5 class="font-weight-bold my-4" style="font-family:Oswald-Bold;">LCD TV</h5>
  1215. <hr style="width:200px;">
  1216. <p class="mb-md-0 mb-5" style="text-align:justify; font-family:OpenSans-Light;">The furnished apartments come with air-conditioned rooms with LCD TV’s fitted with cable connections for the times when you want to relax or catch up with the happenings of the outside world.
  1217. </p>
  1218. </div>
  1219. <!-- Grid column -->
  1220. <!-- Grid column -->
  1221. <div class="col-xl-5 col-lg-5 col-md-6 mx-auto">
  1222. <i class="fa fa-book fa-3x"></i>
  1223. <h5 class="font-weight-bold my-4" style="font-family:Oswald-Bold;">KITCHENETTES</h5>
  1224. <hr style="width:200px;">
  1225. <p class="mb-md-0 mb-5" style="text-align:justify; font-family:OpenSans-Light;"> Inside the apartments, we also provide kitchenettes – a small cooking area, for your instant cooking needs. We also offer a refrigerator for those times when you need to store medicines or beverages – that are required to be kept cold.
  1226. </p>
  1227. </div>
  1228. <!-- Grid column -->
  1229. </div>
  1230. <!-- Grid row -->
  1231. </section>
  1232. <!-- Section: Features v.1 -->
  1233. </div>
  1234. </div>
  1235. </div>
  1236. </section>
  1237. <section class="clr3" id="tariff">
  1238. <div class="row">
  1239. <div class="col-xl-8 col-sm-10 col-xs-10 mx-auto">
  1240. <!-- Section heading
  1241.  
  1242. <p class="fh mt-5 white-text"> TARIFF</p>
  1243.  
  1244.  
  1245. <!-- Grid row -->
  1246. <div class="row mb-5">
  1247. <!-- Grid column -->
  1248. <div class="expanda col-xl-4 col-lg-4 col-md-8 mx-auto mb-lg-0 mb-4">
  1249. <div class="row">
  1250. <!-- Pricing card -->
  1251. <div class="mx-auto card pricing-card">
  1252. <!-- Price -->
  1253. <div class="price header black-text white rounded-top">
  1254. <!-- <h2 class="number">10</h2> -->
  1255. <h2 class="mb-5" style="font-weight:700; color:#2BBBAD; font-family:Oswald-Bold;">ONE ROOM</h2>
  1256. </div>
  1257. <!-- Features -->
  1258. <div class="card-body clr3">
  1259. <ul class="white-text pb-5 striped">
  1260. <li>
  1261. <p class="mt-2 op">PER DAY - RS 1500</p>
  1262. </li>
  1263. <hr class="white">
  1264. <li>
  1265. <p class="op">PER WEEK - RS 6000</p>
  1266. </li>
  1267. <hr class="white">
  1268. <li>
  1269. <p class="op">TWO WEEKS - RS 10,000
  1270. <br> (RS 5000 PER ROOM
  1271. <br> X 2 WEEKS)</p>
  1272. </li>
  1273. <hr class="white">
  1274. <li>
  1275. <p class="op">THREE WEEKS - RS 15,000
  1276. <br> (RS 5000 PER ROOM
  1277. <br> X 3 WEEKS)</p>
  1278. </li>
  1279. <hr class="white">
  1280. <li>
  1281. <p class="pb-4 op"> PER MONTH - RS 20,000 </p>
  1282. </li>
  1283. </ul>
  1284. </div>
  1285. <!-- Features -->
  1286. </div>
  1287. <!-- Pricing card -->
  1288. </div>
  1289. </div>
  1290. <!-- Grid column -->
  1291. <!-- Grid column -->
  1292. <div class="expanda col-xl-4 col-lg-4 col-md-8 mx-auto mb-md-0 mb-4">
  1293. <div class="row">
  1294. <!-- Pricing card -->
  1295. <div class="card pricing-card mx-auto">
  1296. <!-- Price -->
  1297. <div class="price header black-text white rounded-top">
  1298. <!-- <h2 class="number">10</h2> -->
  1299. <h2 class="mb-5" style="font-weight:700; color:#2BBBAD; font-family:Oswald-Bold;">TWO ROOMS</h2>
  1300. </div>
  1301. <!-- Features -->
  1302. <div class="card-body clr3">
  1303. <ul class="white-text striped mb-1">
  1304. <li>
  1305. <p class="mt-2 op">PER DAY - RS 3000
  1306. <br> (RS 1500 X 2 ROOMS)</p>
  1307. </li>
  1308. <hr class="white">
  1309. <li>
  1310. <p class="op">PER WEEK - RS 12,000
  1311. <br> (RS 6000 X 2 ROOMS)</p>
  1312. </li>
  1313. <hr class="white">
  1314. <li>
  1315. <p class="op">TWO WEEKS - RS 20,000
  1316. <br> (RS 5000 PER ROOM
  1317. <br> X 2 WEEKS X 2 ROOMS)</p>
  1318. </li>
  1319. <hr class="white">
  1320. <li>
  1321. <p class="op">THREE WEEKS -
  1322. <br>
  1323. <strike style="color:black">RS 30,000</strike> = RS 25000
  1324. <br> (RS 5000 PER ROOM
  1325. <br> X 3 WEEKS X 2 ROOMS)</p>
  1326. </li>
  1327. <hr class="white">
  1328. <li>
  1329. <p class="op">PER MONTH - RS 40,000</p>
  1330. </li>
  1331. </ul>
  1332. </div>
  1333. <!-- Features -->
  1334. </div>
  1335. <!-- Pricing card -->
  1336. </div>
  1337. </div>
  1338. <!-- Grid column -->
  1339. <!-- Grid column -->
  1340. <div class="expanda col-xl-4 col-lg-4 col-md-8 mx-auto mb-md-0 mb-4">
  1341. <div class="row">
  1342. <!-- Pricing card -->
  1343. <div class="mx-auto card pricing-card">
  1344. <!-- Price -->
  1345. <div class="price header black-text white rounded-top">
  1346. <!-- <h2 class="number">10</h2> -->
  1347. <h2 class="mb-5" style="font-weight:700; color:#2BBBAD; font-family:Oswald-Bold;">THREE ROOMS</h2>
  1348. </div>
  1349. <!-- Features -->
  1350. <div class="card-body clr3">
  1351. <ul class="white-text striped mb-1">
  1352. <li>
  1353. <p class="mt-2 op">PER DAY - RS 4500
  1354. <br> (RS 1500 X 3 ROOMS)</p>
  1355. </li>
  1356. <hr class="white">
  1357. <li>
  1358. <p class="op">PER WEEK - RS 18,000
  1359. <br> (RS 6000 X 3 ROOMS)</p>
  1360. </li>
  1361. <hr class="white">
  1362. <li>
  1363. <p class="op">TWO WEEKS - RS 30,000
  1364. <br> (RS 5000 PER ROOM
  1365. <br> X 2 WEEKS X 3 ROOMS)</p>
  1366. </li>
  1367. <hr class="white">
  1368. <li>
  1369. <p class="op">THREE WEEKS -
  1370. <br>
  1371. <strike style="color:black">RS 45,000</strike> = RS 40,000
  1372. <br> (RS 5000 PER ROOM
  1373. <br> X 3 WEEKS X 3 ROOMS)</p>
  1374. </li>
  1375. <hr class="white">
  1376. <li>
  1377. <p class="op">PER MONTH - RS 40,000</p>
  1378. </li>
  1379. </ul>
  1380. </div>
  1381. <!-- Features -->
  1382. </div>
  1383. <!-- Pricing card -->
  1384. </div>
  1385. </div>
  1386. <!-- Grid column -->
  1387. </div>
  1388. <!-- Grid row -->
  1389. </div>
  1390. </div>
  1391. </section>
  1392. <section class="clr2" id="location">
  1393. <div class="container">
  1394. <div class="row">
  1395. <div class="col-xl-12 col-lg-12 col-md-12 col-xs-12 mx-auto">
  1396. <p class="fh nm2"> LOCATION</p>
  1397. </div>
  1398. <div class="col-xl-6 col-lg-6 col-xs-12">
  1399. <div class="card nm1">
  1400. <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3887.9819451438398!2d80.21148291420079!3d12.97300651835895!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a525d939670b605%3A0xaedd5eecf2993495!2s68%2C+8th+Main+Rd%2C+Shankar+Nagar%2C+Ram+Nagar%2C+Velachery%2C+Chennai%2C+Tamil+Nadu+600042!5e0!3m2!1sen!2sin!4v1528813300928" width="550" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
  1401. </div>
  1402. </div>
  1403. <div class="col-xl-6 col-lg-6 col-xs-12">
  1404. <p class="fh2 mt-4"> OUR CLOSEST FACILITIES</p>
  1405. <p class="aatxt text-center mt-1">Anand Homes Service Apartments are located in the quiet neighbourhood of Velachery, and yet can be considered as the central hub for the city.</p>
  1406. <p class="aatxt text-center">Velachery is home to prominent malls such as
  1407. <br>
  1408. <b class=" font-weight-bold"><a style="text-decoration:underline;" href="https://www.google.co.in/maps/dir/''/Grand++mall+chennai/data=!4m5!4m4!1m0!1m2!1m1!1s0x3a525d974d27837d:0xdf9b45768a110aef?sa=X&ved=0ahUKEwiQ_OK1xtDbAhWBKo8KHQdbCfsQ9RcIzAEwEA" class="cyan-text">The Phoenix Market City and The Grand Mall.</a></b></p>
  1409. <p class="aatxt text-center">Our service apartments are close to a whole class of restaurants, shopping destinations, malls, movies, dance clubs, and other such hangout spots.</p>
  1410. <p class="aatxt text-center"><b class="font-weight-bold"><a style="text-decoration:underline;" class="cyan-text" href="https://www.google.co.in/maps/dir/''/mrts+railway+station/@12.9672572,80.1494245,12z/data=!4m8!4m7!1m0!1m5!1m1!1s0x3a525d97c0f2f791:0x1ebbd4645cd267f2!2m2!1d80.219465!2d12.9672666">10 Mins to the nearest MRTS</a></b>
  1411. <br>
  1412. <b class=" font-weight-bold text-center"><a style="text-decoration:underline;" href="https://www.google.co.in/maps/dir/''/velachery+vijaya+nagar+bus+stop/data=!4m5!4m4!1m0!1m2!1m1!1s0x3a525d90767ef247:0x436a0a2c85161ffa?sa=X&ved=0ahUKEwjOy-b4xtDbAhVHso8KHTxpCa4Q9RcImAEwCw" class="cyan-text">15 Mins to the nearest Bus Stop</a></b>
  1413. <br>
  1414. <b class=" font-weight-bold text-center"><a style="text-decoration:underline;" class="cyan-text" href="https://www.google.co.in/maps/dir/''/chennai+airport/data=!4m5!4m4!1m0!1m2!1m1!1s0x3a525e1f5da86397:0x21092f216ee26e47?sa=X&ved=0ahUKEwi07ZXFxtDbAhVKpI8KHVvqDCsQ9RcIygEwEQ">20 Mins to Chennai International Airport</a></b></p>
  1415. <p class="aatxt text-center">This ensures that you will get to your destination, in any part of the city, with enough time to spare. With these spaces located in the heart of the city, you enjoy easy access to the city’s hotspots without losing out on quality lifestyle.</p>
  1416. </div>
  1417. </div>
  1418. </div>
  1419. </section>
  1420. <section class="mt-3">
  1421. <div class="container">
  1422. <div class="row">
  1423. <div class="col-xl-12 col-lg-12 col-md-12 col-xs-12 mx-auto">
  1424. <p class="ftxt1 mt-3 mb-5">Velachery has emerged as Chennai’s newest hub for food, clothes, fun and more. With the availability of the cities famous hangout spots, Velachery is well connected to various other parts of the cities – especially the transportation hubs such as bus and train routes, and the city airport. Apart from such commercial ventures, Velachery being a residential area at heart has healthcare and medical facilities available at hospitals such as Global Hospital.</p>
  1425. </div>
  1426. </div>
  1427. </div>
  1428. </section>
  1429. <section class="stylish-color-dark pb-5" id="contact">
  1430. <div class="container">
  1431. <div class="row">
  1432. <div class="col-xl-6 col-lg-6 mt-5">
  1433. <!-- Form with header -->
  1434. <div class="card mt-5">
  1435. <div class="card-body">
  1436. <!-- Header -->
  1437. <div class="form-header stylish-color-dark accent-1">
  1438. <p class="fh text-center white-text pt-3" style="font-size:30px;"> CONTACT</p>
  1439. </div>
  1440. <!-- Body -->
  1441. <div class="row">
  1442. <div class="col-xl-12">
  1443. <div class="md-form">
  1444. <i class="fa fa-user prefix grey-text"></i>
  1445. <input type="text" id="form-name" class="form-control">
  1446. <label for="form-name">Your name</label>
  1447. </div>
  1448. </div>
  1449. <div class="col-xl-6">
  1450. <div class="md-form">
  1451. <i class="fa fa-user prefix grey-text"></i>
  1452. <input type="number" id="form-name" class="form-control">
  1453. <label for="form-name">Phone</label>
  1454. </div>
  1455. </div>
  1456. <div class="col-xl-6">
  1457. <div class="md-form">
  1458. <i class="fa fa-envelope prefix grey-text"></i>
  1459. <input type="text" id="form-email" class="form-control">
  1460. <label for="form-email">Your email</label>
  1461. </div>
  1462. </div>
  1463. <div class="col-xl-12">
  1464. <div class="md-form">
  1465. <i class="fa fa-tag prefix grey-text"></i>
  1466. <input type="text" id="form-Subject" class="form-control">
  1467. <label for="form-Subject">Message</label>
  1468. </div>
  1469. </div>
  1470. <div class="col-xl-6 mx-auto">
  1471. <div class="text-center">
  1472. <button class="btn btn-sm" style="background-color:#37474F;">Submit</button>
  1473. </div>
  1474. </div>
  1475. </div>
  1476. </div>
  1477. </div>
  1478. <!-- Form with header -->
  1479. </div>
  1480. <div class="col-xl-6 col-lg-6 mt-3">
  1481. <p class="ftxt mt-5 pt-5">It is said that distance does make the hearts grow fonder, but that does not mean you should not keep in touch. We look forward to having you stay with us!</p>
  1482. <div class="card pricing-card mt-4 ">
  1483. <!-- Price -->
  1484. <div class="white mt-3 mb-3">
  1485. <!-- <h2 class="number">10</h2> -->
  1486. <p class="mb-1 mt-0" style="font-weight:700; color:#3E4551; font-family:OpenSans-Regular;">CONTACT US FOR QUERIES, BOOKINGS AND GOOD MEMORIES AT:</p>
  1487. </div>
  1488. <!-- Features -->
  1489. <div class="card-body z-depth-0" style="background-color:#3E4551;">
  1490. <p class="white-text text-center pt-4 pb-3" style="font-family:OpenSans-Regular; font-size:18px;">
  1491. <b style="text-decoration:underline; font-size:24px;">ADDRESS</b>
  1492. <br>
  1493. <br> PLOT NO 68, 8TH MAIN ROAD, RAM NAGAR NORTH EXTN,
  1494. <br> Velacheri, Chennai - 600042
  1495. <br> PHONE - +91 91521 85606 | Email - info@gmail.com
  1496. </p>
  1497. </div>
  1498. <!-- Features -->
  1499. </div>
  1500. </div>
  1501. </div>
  1502. </div>
  1503. </section>
  1504. </main>
  1505. <!-- Footer -->
  1506. <footer class="page-footer font-small">
  1507. <!-- Footer Links -->
  1508. <div class="container">
  1509. <!-- Grid row-->
  1510. <div class="row text-center d-flex justify-content-center smooth-scroll pt-5 mb-3">
  1511. <!-- Grid column -->
  1512. <div class="col-md-2 mb-3">
  1513. <h6 class="text-uppercase font-weight-bold">
  1514. <a href="#about" class="black-text" style="font-family:Oswald-Light; letter-spacing:1.5px;">About</a>
  1515. </h6>
  1516. </div>
  1517. <!-- Grid column -->
  1518. <!-- Grid column -->
  1519. <div class="col-md-2 mb-3">
  1520. <h6 class="text-uppercase font-weight-bold">
  1521. <a href="#gallery" class="black-text" style="font-family:Oswald-Light; letter-spacing:1.5px;">Gallery</a>
  1522. </h6>
  1523. </div>
  1524. <!-- Grid column -->
  1525. <!-- Grid column -->
  1526. <div class="col-md-2 mb-3">
  1527. <h6 class="text-uppercase font-weight-bold">
  1528. <a href="#facilities" class="black-text" style="font-family:Oswald-Light; letter-spacing:1.5px;">Facilities</a>
  1529. </h6>
  1530. </div>
  1531. <!-- Grid column -->
  1532. <!-- Grid column -->
  1533. <div class="col-md-2 mb-3">
  1534. <h6 class="text-uppercase font-weight-bold">
  1535. <a href="#tariff" class="black-text" style="font-family:Oswald-Light; letter-spacing:1.5px;">Tariff</a>
  1536. </h6>
  1537. </div>
  1538. <!-- Grid column -->
  1539. <!-- Grid column -->
  1540. <div class="col-md-2 mb-3">
  1541. <h6 class="text-uppercase font-weight-bold">
  1542. <a href="#location" class="black-text" style="font-family:Oswald-Light; letter-spacing:1.5px;">Location</a>
  1543. </h6>
  1544. </div>
  1545. <!-- Grid column -->
  1546. <!-- Grid column -->
  1547. <div class="col-md-2 mb-3">
  1548. <h6 class="text-uppercase font-weight-bold">
  1549. <a href="#contact" class="black-text" style="font-family:Oswald-Light; letter-spacing:1.5px;">Contact</a>
  1550. </h6>
  1551. </div>
  1552. <!-- Grid column -->
  1553. </div>
  1554. <!-- Grid row-->
  1555. <hr class="rgba-white-light" style="margin: 0 15%;">
  1556. <!-- Grid row-->
  1557. <div class="row d-flex text-center justify-content-center mb-md-0 mb-4">
  1558. </div>
  1559. <!-- Grid row-->
  1560. <hr class="clearfix d-md-none rgba-white-light" style="margin: 10% 15% 5%;">
  1561. </div>
  1562. <!-- Footer Links -->
  1563. <!-- Copyright -->
  1564. <div class="footer text-center black-text py-3" style="font-family:Oswald-Regular;">© 2018 Copyright:
  1565. <a href="https://mdbootstrap.com/bootstrap-tutorial/" class="black-text"> anandhomes.com</a>
  1566. </div>
  1567. <!-- Copyright -->
  1568. </footer>
  1569. <!-- Footer -->
  1570. <!-- /Start your project here-->
  1571. <!-- SCRIPTS -->
  1572. <!-- JQuery -->
  1573. <script src="js/jquery-3.3.1.min.js"></script>
  1574. <!-- Bootstrap tooltips -->
  1575. <script src="js/popper.min.js"></script>
  1576. <!-- Bootstrap core JavaScript -->
  1577. <script src="js/bootstrap.min.js"></script>
  1578. <!-- MDB core JavaScript -->
  1579. <script src="js/mdb.min.js"></script>
  1580. <script>
  1581. $('.navbar-nav>li>a').on('click', function() {
  1582. $('.navbar-collapse').collapse('hide');
  1583. });
  1584.  
  1585.  
  1586.  
  1587. $('.carousel').carousel({
  1588. interval: 2000
  1589. })
  1590.  
  1591.  
  1592.  
  1593. // Regular map
  1594. function regular_map() {
  1595. var var_location = new google.maps.LatLng(40.725118, -73.997699);
  1596.  
  1597. var var_mapoptions = {
  1598. center: var_location,
  1599. zoom: 14
  1600. };
  1601.  
  1602. var var_map = new google.maps.Map(document.getElementById("map-container"),
  1603. var_mapoptions);
  1604.  
  1605. var var_marker = new google.maps.Marker({
  1606. position: var_location,
  1607. map: var_map,
  1608. title: "New York"
  1609. });
  1610. }
  1611.  
  1612. // Initialize maps
  1613. google.maps.event.addDomListener(window, 'load', regular_map);
  1614. </script>
  1615. <script src="https://maps.google.com/maps/api/js"></script>
  1616. </body>
  1617.  
  1618. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!