PageRenderTime 45ms CodeModel.GetById 23ms RepoModel.GetById 1ms app.codeStats 0ms

/works/kelzyme.html

https://bitbucket.org/nico-kika/kika-v3-static
HTML | 211 lines | 150 code | 43 blank | 18 comment | 0 complexity | 653baa50d2589cc0b8a66456be3330f1 MD5 | raw file
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.   <head>
    4. 

  4.     <!-- Required meta tags -->
    5. 

  5.     <meta charset="utf-8">
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    7. 

  7. 

  8.     <!-- Bootstrap CSS -->
    9. 

  9.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    10. 

  10. 

  11.     <link rel="stylesheet" href="../css/master-dist.css">
    12. 

  12.   </head>
    13. 

  13.   <body>
    14. 

  14.     
    15. 

  15.     <div class="main-wrapper">
    16. 

  16.         
    17. 

  17.         <!-- Header -->
    18. 

  18.         <header class="d-flex align-items-center">
    19. 

  19.             <div class="container">
    20. 

  20.                 <div class="row">
    21. 

  21.                     
    22. 

  22.                     <!-- KIKA Logo -->
    23. 

  23.                     <div class="col-md-2">
    24. 

  24.                         <div class="kika-logo"></div>
    25. 

  25.                     </div>
    26. 

  26.                     
    27. 

  27.                     <!-- Navigation Items -->
    28. 

  28.                     <nav class="col-md-10">
    29. 

  29.                         <ul>
    30. 

  30.                             <li>HOME</li>
    31. 

  31.                             <li>SERVICES</li>
    32. 

  32.                             <li>WORK</li>
    33. 

  33.                             <li>AGENCY</li>
    34. 

  34.                             <li>BLOG</li>
    35. 

  35.                             <li>CONNECT</li>
    36. 

  36.                         </ul>
    37. 

  37.                     </nav>
    38. 

  38. 

  39.                 </div>
    40. 

  40.             </div>
    41. 

  41.         </header>
    42. 

  42. 

  43.         <!-- Portfolio -->
    44. 

  44.         <section class="portfolio page-section">
    45. 

  45.             
    46. 

  46.             <!-- Project Logo -->
    47. 

  47.             <img class="project-logo mx-auto d-block" src="../images/portfolio-page/kelzyme/project-logo.png">
    48. 

  48.             <h3>A line of feed and soil supplements made up of 100% natural fossilized sea kelp, a <br> good source of calcium and other essential minerals. </h3>
    49. 

  49.             
    50. 

  50.             <!-- Porfilio Images -->
    51. 

  51.             <div class="container">
    52. 

  52. 

  53.                 <div class="row mt-30">
    54. 

  54.                     <div class="col-md-6 project-image"><img class="img-fluid" src="../images/portfolio-page/kelzyme/project-image-1.jpg"></div>
    55. 

  55.                     <div class="col-md-6 project-image"><img class="img-fluid" src="../images/portfolio-page/kelzyme/project-image-2.jpg"></div>
    56. 

  56.                 </div>
    57. 

  57. 

  58.             </div>
    59. 

  59.             
    60. 

  60.         </section>
    61. 

  61.         
    62. 

  62.         <!-- Section Divider -->
    63. 

  63.         <div class="container">
    64. 

  64.             <div class="row">
    65. 

  65.                 <div class="col-md-12">
    66. 

  66.                     <div class="section-divider"></div>
    67. 

  67.                 </div>
    68. 

  68.             </div>
    69. 

  69.         </div>
    70. 

  70. 

  71.         <!-- More Work -->
    72. 

  72.         <section class="more-work page-section">
    73. 

  73.             
    74. 

  74.             <div class="container">
    75. 

  75.                 <div class="row">
    76. 

  76.                     <div class="col-md-12">
    77. 

  77.                         <h2>MORE WORK</h2>
    78. 

  78.                         <div class="header-bottom-border"></div>
    79. 

  79.                         <h3>We are passionate about <a href="#">what we do</a> and our work shows it.</h3>
    80. 

  80.                     </div>
    81. 

  81.                 </div>
    82. 

  82. 

  83.                 <div class="row">
    84. 

  84.                     <div class="col-md-3">
    85. 

  85.                         <div class="work-thumbnail">
    86. 

  86.                             <img src="../images/portfolio-page/more-work-1.jpg">
    87. 

  87.                         </div>
    88. 

  88.                     </div>
    89. 

  89. 

  90.                     <div class="col-md-3">
    91. 

  91.                         <div class="work-thumbnail">
    92. 

  92.                             <img src="../images/portfolio-page/more-work-2.jpg">
    93. 

  93.                         </div>
    94. 

  94.                     </div>
    95. 

  95. 

  96.                     <div class="col-md-3">
    97. 

  97.                         <div class="work-thumbnail">
    98. 

  98.                             <img src="../images/portfolio-page/more-work-3.jpg">
    99. 

  99.                         </div>
    100. 

  100.                     </div>
    101. 

  101. 

  102.                     <div class="col-md-3">
    103. 

  103.                         <div class="work-thumbnail">
    104. 

  104.                             <img src="../images/portfolio-page/more-work-4.jpg">
    105. 

  105.                         </div>
    106. 

  106.                     </div>
    107. 

  107.                 </div>
    108. 

  108.             </div>
    109. 

  109. 

  110.         </section>
    111. 

  111.         
    112. 

  112.         <!-- Footer -->
    113. 

  113.         <footer>
    114. 

  114.             <div class="container">
    115. 

  115.                 <div class="row">
    116. 

  116.                     
    117. 

  117.                     <!-- Social Widgets + Search Form -->
    118. 

  118.                     <div class="col-md-12">
    119. 

  119.                         <div class="d-flex align-items-center">
    120. 

  120.                             <div class="col-md-3 d-flex align-items-center">
    121. 

  121.                                 <h4>SOCIAL</h4>
    122. 

  122.                                 <div class="social-icons d-flex">
    123. 

  123.                                     <div class="social-icon"><img src="../images/social-icons/icon-facebook.svg" alt=""></div>
    124. 

  124.                                     <div class="social-icon"><img src="../images/social-icons/icon-twitter.svg" alt=""></div>
    125. 

  125.                                     <div class="social-icon"><img src="../images/social-icons/icon-linkdin.svg" alt=""></div>
    126. 

  126.                                     <div class="social-icon"><img src="../images/social-icons/icon-gplus.svg" alt=""></div>
    127. 

  127.                                     <div class="social-icon"><img src="../images/social-icons/icon-youtube.svg" alt=""></div>
    128. 

  128.                                 </div>
    129. 

  129.                             </div>
    130. 

  130. 

  131.                             <div class="col-md-3">
    132. 

  132.                                 <h4>SHARE &amp; BOOKMARK</h4>
    133. 

  133.                             </div>
    134. 

  134. 

  135.                             <div class="col-md-3"></div>
    136. 

  136. 

  137.                             <!-- Search Form -->
    138. 

  138.                             <div class="col-md-3">
    139. 

  139.                                 <input name="searchword" class="footer-search-form" type="text" value="Search..." style="margin: 0" onfocus="if(this.value == 'Search...')this.value = '';" onblur="if(this.value == '')this.value = 'Search...';">
    140. 

  140.                             </div>
    141. 

  141.                         </div>
    142. 

  142.                     </div>
    143. 

  143. 

  144.                     <div class="col-md-12"><div class="divider"></div></div>
    145. 

  145. 

  146.                     <!-- About KIKA -->
    147. 

  147.                     <div class="col-md-3" id="about-kika">
    148. 

  148.                         <h4>ABOUT KIKA</h4>
    149. 

  149.                         <p>Kika is a <a href="#">full service marketing, design and web ​agency</a> with extensive experience in research, strategy, design and technology​.</p>
    150. 

  150.                         <p>Our offices are located in ​<a href="#">Vancouver, Montreal and Manila</a> ​to better serve our local and international ​clients.</p>
    151. 

  151. 

  152.                         <div class="kika-footer-button">READ MORE</div>
    153. 

  153.                     </div>
    154. 

  154. 

  155.                     <!-- Latest Articles -->
    156. 

  156.                     <div class="col-md-3" id="latest-articles">
    157. 

  157.                         <h4>LATEST ARTICLES</h4>
    158. 

  158. 

  159.                         <div class="news-item">
    160. 

  160.                             <div class="news-date">03.24.2020</div>
    161. 

  161.                             <a href="#">KIKA is now using Bootstrap 4.0!</a>
    162. 

  162.                         </div>
    163. 

  163. 

  164.                         <div class="news-item">
    165. 

  165.                             <div class="news-date">03.24.2020</div>
    166. 

  166.                             <a href="#">The Power of CSS3 Flexbox</a>
    167. 

  167.                         </div>
    168. 

  168. 

  169.                         <div class="kika-footer-button">MORE ARTICLES</div>
    170. 

  170.                     </div>
    171. 

  171. 

  172.                     <!-- Newsletter -->
    173. 

  173.                     <div class="col-md-3" id="newsletter">
    174. 

  174.                         <h4>NEWSLETTER</h4>
    175. 

  175.                         <p>Keep up with the latest from Kika. We guarantee no spam.</p>
    176. 

  176. 

  177.                         <input name="searchword" type="text" class="newsletter-form" value="Name" style="margin: 0" onfocus="if(this.value == 'Name')this.value = '';" onblur="if(this.value == '')this.value = 'Name';">
    178. 

  178.                         <input name="searchword" type="text" class="newsletter-form" value="Email" style="margin: 0" onfocus="if(this.value == 'Email')this.value = '';" onblur="if(this.value == '')this.value = 'Email';">
    179. 

  179. 

  180.                         <div class="kika-footer-button">SUBSCRIBE</div>
    181. 

  181.                     </div>
    182. 

  182. 

  183.                     <!-- Contact Us -->
    184. 

  184.                     <div class="col-md-3" id="contact-us">
    185. 

  185.                         <h4>CONTACT US</h4>
    186. 

  186.                         <p>Call Us Mon-Fri 10am-​9pm (EST)</p>
    187. 

  187.                         <p>
    188. 

  188.                             Vancouver 1-604-628-8726 <br>
    189. 

  189.                             Montreal​ 1-514-430-8726 <br>
    190. 

  190.                             International 1-866-458-1164 <br>
    191. 

  191.                         </p>
    192. 

  192. 

  193.                         <div class="kika-footer-button">DIRECTIONS</div>
    194. 

  194.                         <div class="kika-footer-button bg-color-green">EMAIL US</div>
    195. 

  195.                     </div>
    196. 

  196. 

  197.                 </div>
    198. 

  198.             </div>
    199. 

  199.         </footer>
    200. 

  200. 

  201.     </div>
    202. 

  202. 

  203. 

  204. 

  205.     <!-- jQuery first, then Tether, then Bootstrap JS. -->
    206. 

  206.     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    207. 

  207.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    208. 

  208.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    209. 

  209.     <script src="js/master-dist.js"></script>
    210. 

  210.   </body>
    211. 

  211. </html>
    212.