contact.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Conocimientos Libres</title>
  5. <!-- stylesheets -->
  6. <link rel="stylesheet" href="dist/css/bulma.css">
  7. <link rel="stylesheet" href="dist/css/style.css">
  8. </head>
  9. <body>
  10. <!-- navigation -->
  11. <header class="navigation">
  12. <nav class="navbar">
  13. <div class="container">
  14. <!-- nav site title -->
  15. <!-- Input for menu-mobile with checkbox-->
  16. <input id="navbar-toggle-cbox" type="checkbox">
  17. <!-- End Input for menu-mobile with checkbox-->
  18. <div class="navbar-brand">
  19. <a class="navbar-item">
  20. <h3 class="title is-3" style="color: white;">CL</h3>
  21. </a>
  22. <!-- this "navbar-burger" hamburger menu is only visible on mobile -->
  23. <label class="nav__toggle" for="navbar-toggle-cbox">
  24. <!-- Menu -->
  25. <svg class="menu" viewBox="0 0 448 512" width="100">
  26. <path
  27. d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
  28. />
  29. <title>Open</title>
  30. </svg>
  31. <!-- Close -->
  32. <svg class="close" viewBox="0 0 384 512" width="100">
  33. <path
  34. d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
  35. />
  36. <title>Close</title>
  37. </svg>
  38. </label>
  39. <!-- end of burger -->
  40. </div>
  41. <!-- this "nav-menu" is hidden on mobile -->
  42. <div id="navMenu" class="navbar-menu">
  43. <ul class="navbar-end">
  44. <li><a href="index.html" class="navbar-item is-tab">Home</a></li>
  45. <li><a href="post.html" class="navbar-item is-tab">Static Post</a></li>
  46. <li><a href="about.html" class="navbar-item is-tab">About</a></li>
  47. <li><a href="contact.html" class="navbar-item is-tab is-active">Contact</a></li>
  48. </ul>
  49. </div>
  50. <!-- end of nav -->
  51. </div>
  52. </nav>
  53. </header>
  54. <!-- end navigation -->
  55. <!-- page header (title, etc) -->
  56. <div class="main-header">
  57. <section class="hero">
  58. <div class="hero-body">
  59. <div class="container">
  60. <div class="has-text-centered">
  61. <!-- header && subheader -->
  62. <h1 class="title is-1 is-spaced">Conocimientos Libres</h1>
  63. <h4 class="subtitle is-4">Sitio de información sobre Software Libre</h4>
  64. <!-- end of header && subheader -->
  65. </div>
  66. </div>
  67. </div>
  68. </section>
  69. </div>
  70. <!-- end page header -->
  71. <!-- page content -->
  72. <div class="main-content">
  73. <div class="container">
  74. <!-- start of contact -->
  75. <div class="columns is-multiline is-centered">
  76. <!-- start of contact -->
  77. <article class="column is-7">
  78. <div class="card">
  79. <!-- contact header -->
  80. <div class="card-content-header has-text-centered">
  81. <h4 class="title is-4">Contact Header</h4>
  82. </div>
  83. <!-- end of contact header -->
  84. <!-- contact content -->
  85. <div class="card-content">
  86. <div class="content">
  87. <div class="card-inner-wrapper">
  88. <div class="card-content-text">
  89. <!-- contact text -->
  90. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia euismod urna, in gravida leo efficitur a. Sed tempus augue risus, eget faucibus urna hendrerit a. Donec pulvinar maximus dui ut porttitor.</p>
  91. <!-- end contact text -->
  92. <!-- form begin -->
  93. <div class="card-content-form">
  94. <form>
  95. <div class="field">
  96. <label class="label">Name</label>
  97. <p class="control">
  98. <input class="input" type="text" placeholder="Text">
  99. </p>
  100. </div>
  101. <div class="field">
  102. <label class="label">Email</label>
  103. <p class="control">
  104. <input class="input" type="email" placeholder="Email" value="">
  105. </p>
  106. </div>
  107. <div class="field">
  108. <label class="label">Message</label>
  109. <p class="control">
  110. <textarea class="textarea" placeholder="Message"></textarea>
  111. </p>
  112. </div>
  113. <div class="field is-grouped">
  114. <p class="control">
  115. <button class="button is-button-grey">Send</button>
  116. </p>
  117. <p class="control">
  118. <button class="button is-button-grey">Clear</button>
  119. </p>
  120. </div>
  121. </form>
  122. </div>
  123. <!-- form end -->
  124. </div>
  125. <!-- contact footer -->
  126. <div class="card-content-footer-small">
  127. <div class="navbar is-social-center">
  128. <a class="navbar-item" href="">
  129. <span class="soumaicon">
  130. <svg>
  131. <use href="./dist/images/icons/master.svg#gnusocial" />
  132. </svg>
  133. </span>
  134. </a>
  135. <a class="navbar-item" href="">
  136. <span class="soumaicon">
  137. <svg>
  138. <use href="./dist/images/icons/master.svg#diaspora" />
  139. </svg>
  140. </span>
  141. </a>
  142. <a class="navbar-item" href="">
  143. <span class="soumaicon">
  144. <svg>
  145. <use href="./dist/images/icons/master.svg#mastodom" />
  146. </svg>
  147. </span>
  148. </a>
  149. </div>
  150. </div>
  151. <!-- end of contact footer -->
  152. </div>
  153. </div>
  154. </div>
  155. </div>
  156. </article>
  157. <!-- end of contact column -->
  158. </div>
  159. <!-- end of contact columns -->
  160. </div>
  161. </div>
  162. <!-- end of page content -->
  163. <!-- footer: will stick to the bottom -->
  164. <footer class="footer footer-top-shadow">
  165. <!-- header nav content -->
  166. <div class="navbar is-social-center">
  167. <a class="navbar-item" href="">
  168. <span class="soumaicon">
  169. <svg>
  170. <use href="./dist/images/icons/master.svg#diaspora"/>
  171. </svg>
  172. </span>
  173. </a>
  174. <a class="navbar-item" href="">
  175. <span class="soumaicon">
  176. <svg>
  177. <use href="./dist/images/icons/master.svg#gnusocial"/>
  178. </svg>
  179. </span>
  180. </a>
  181. <a class="navbar-item" href="">
  182. <span class="soumaicon">
  183. <svg>
  184. <use href="./dist/images/icons/master.svg#pump"/>
  185. </svg>
  186. </span>
  187. </a>
  188. <a class="navbar-item" href="">
  189. <span class="soumaicon">
  190. <svg>
  191. <use href="./dist/images/icons/master.svg#pixelfed"/>
  192. </svg>
  193. </span>
  194. </a>
  195. <a class="navbar-item" href="">
  196. <span class="soumaicon">
  197. <svg>
  198. <use href="./dist/images/icons/master.svg#peertube"/>
  199. </svg>
  200. </span>
  201. </a>
  202. <a class="navbar-item" href="">
  203. <span class="soumaicon">
  204. <svg>
  205. <use href="./dist/images/icons/master.svg#mediagoblin"/>
  206. </svg>
  207. </span>
  208. </a>
  209. <a class="navbar-item" href="">
  210. <span class="soumaicon">
  211. <svg>
  212. <use href="./dist/images/icons/master.svg#matrix"/>
  213. </svg>
  214. </span>
  215. </a>
  216. <a class="navbar-item" href="">
  217. <span class="soumaicon">
  218. <svg>
  219. <use href="./dist/images/icons/master.svg#rss"/>
  220. </svg>
  221. </span>
  222. </a>
  223. </div>
  224. <!-- end of header nav content -->
  225. <div class="container has-text-centered">
  226. <span class="soumaicon">
  227. <svg>
  228. <use href="./dist/images/icons/master.svg#libregit"/>
  229. </svg>
  230. </span>
  231. <p>template by <a href="https://libregit.org/heckyel">libregit.org/heckyel</a></p>
  232. <p>this template is Free Software</p>
  233. </div>
  234. </footer>
  235. <!-- end of footer -->
  236. </body>
  237. </html>