PageRenderTime 133ms CodeModel.GetById 25ms RepoModel.GetById 1ms app.codeStats 0ms

/index.html

https://gitlab.com/vjandrei/maukasta-blogi
HTML | 296 lines | 283 code | 7 blank | 6 comment | 0 complexity | 03160d37c1c721edf3c6584d44723433 MD5 | raw file
  1. ---
  2. layout: default
  3. ---
  4. <div id="welcomeHeader">
  5. <section>
  6. <div id="welcomeHeaderContainer">
  7. <div>
  8. <h1 class="black">Tervetuloa <b> </b><br/>hyvän ruoan ja ruokakulttuurin parissa.</h1>
  9. <h3 class="">Maukkaita juttuja on jo {{ site.posts | size }} ja niitä tulee lisää kokoajan joten pysy mukana menossa.</h3>
  10. </div>
  11. </div>
  12. </section>
  13. </div>
  14. <section>
  15. <div id="mainSelection">
  16. <div class="blogFeedWrapper">
  17. <div class="blogFeedContainer">
  18. {% for blogi in site.blogit | limit: 1 %}
  19. <div class="blogFeedContentImage">
  20. <div class="blogFeedContentType">
  21. <div class="blogFeedContentTypeItem">
  22. <h4 class="bold">Tuorein artikkeli</h4>
  23. <h5 class="medium">{{ blogi.date | date: "%d.%m.%Y" }}</h5>
  24. </div>
  25. </div>
  26. <img src="{{ blogi.bigthumbnail }}" />
  27. </div>
  28. <div class="blogFeedArticle">
  29. <a href="{{blogi.url}}">
  30. <h2 class="black">{{ blogi.title }}</h2>
  31. </a>
  32. {% include shares-blog.html %}
  33. {{blogi.content}}
  34. </div>
  35. {% endfor %}
  36. </div>
  37. </div>
  38. <div id="aboutBlogger">
  39. <figure id="aboutBloggerContainer">
  40. <img src="images/profiles/profile-450.jpg" alt="profile-450" width="450" height="253" />
  41. <figcaption>
  42. <img src="images/maukasta-profiili.jpg" alt="maukasta-profiili" class="profile"/>
  43. <h3 class="black">Andreas Koutsoukos</h3>
  44. <h4 class="book italic">"Ruoan laittaminen ei ole suoritus vaan nautintoa - Andreas"</h4>
  45. <p>Ensimmäiseksi haluan toivottaa sinut tervetulleeksi Maukasta-ruokablogiin.
  46. Olen tosiaan Andreas entinen ammattikokki joka jätti padat ja kuumat
  47. hellat ja siirtyi ihmettelemään bittejä, fuctioneita ja käyttäjäystävällisyyttä. Kokkaus jatkuu kumminkin kotona ja reseptien tuloksia voi nauttia
  48. tällä sivulla.
  49. </p>
  50. <!--p>Ensimmäiseksi haluan toivottaa sinut tervetulleeksi Maukasta-ruokablogiin.<br/>
  51. <a href="http://www.snappaajat.fi/profiles/vjandrei">snapchatissä.</a><br/>
  52. Jos haluat olla minuun henkilökohtaisesti yhteydessä lähetä
  53. <a href="mailto:andreas.koutsoukos@gmail.com?Subject=Yhteydentto%20maukasta.fi sivuista" target="_top">sähköpostia</a>.<br/><br/>
  54. <small>ps: minulla on lukihäiriö joten antakaa anteeksi äidinkielen virheet.</small-->
  55. </figcaption>
  56. </figure>
  57. </div>
  58. </div>
  59. </section>
  60. <section>
  61. <div class="scroller">
  62. <div class="scroller-content">
  63. {% for blogi in site.blogit | offset: 1 %}
  64. <div class="scrollerBlog">
  65. <div class="scrollerBlogItem">
  66. <div class="scrollerBlogItemImage">
  67. <a class="item" href="{{blogi.url}}">
  68. <img src="{{ blogi.bigthumbnail }}" />
  69. </a>
  70. </div>
  71. <div class="scrollerBlogItemContent">
  72. <a class="item" href="{{blogi.url}}"><h4 class="black">{{ blogi.title }}</h4></a>
  73. <h5 class="date medium">{{ blogi.date | date: "%d.%m.%Y" }}</h5>
  74. {{blogi.content | truncate: 100}}
  75. </div>
  76. </div>
  77. </div>
  78. {% endfor %}
  79. </div>
  80. </div>
  81. </section>
  82. <section>
  83. <div id="newestPostContainer" class="contentBlock">
  84. {% for post in site.categories['nosto'] limit:1 %}
  85. <div id="newestPost">
  86. <div id="newestPostImage" style="background: url('{{ post.bigthumbnail }}')no-repeat;">
  87. <div id="detailsPost">
  88. <h4 class="bold">{{post.type}}</h4>
  89. <h5 class="medium">{{ post.date | date: "%d.%m.%Y" }}</h5>
  90. </div>
  91. </div>
  92. <div id="newestPostArticle">
  93. <div id="titleOfPost">
  94. <a class="post-link" href="{{ post.url | prepend: site.baseurl }}"><h2 class="black">{{ post.title }}</h2></a>
  95. </div>
  96. {% include shares.html %}
  97. <div id="teaserOfPost">
  98. <p>{{post.teaser}}</p>
  99. </div>
  100. </div>
  101. </div>
  102. {% endfor %}
  103. <div id="newestPostGrid">
  104. {% for post in site.categories['nosto'] limit:3 offset:1 %}
  105. <div class="newestPostGridItem">
  106. <div class="recentPostCotainer">
  107. <a href="{{ post.url | prepend: site.baseurl }}">
  108. <div class="recentPostImage">
  109. <img src="{{ post.gategorythumbnail }}" />
  110. </div>
  111. </a>
  112. <div class="recentPostContent">
  113. <a href="{{ post.url | prepend: site.baseurl }}"><h4 class="black">{{ post.title }}</h4></a>
  114. <h5 class="date medium">{{ post.date | date: "%d.%m.%Y" }}</h5>
  115. <p class="teaser">{{post.teaser | truncate: 100 }}</p>
  116. </div>
  117. </div>
  118. </div>
  119. {% endfor %}
  120. </div>
  121. </div>
  122. </section>
  123. <section>
  124. {% for post in site.categories.videot limit:1 %}
  125. <div id="cookingVideoPost" class="contentBlock">
  126. <iframe width="100%" height="500px" src="{{post.youtubelink}}" frameborder="0" allowfullscreen></iframe>
  127. <div id="cookingVideoPostContainer">
  128. <a class="post-link" href="{{ post.url | prepend: site.baseurl }}"><h2 class="black">{{ post.title }}</h2></a>
  129. {% include shares.html %}
  130. <p>{{post.teaser}} </p>
  131. </div>
  132. </div>
  133. {% endfor %}
  134. </section>
  135. <div class="sponsorsBg">
  136. <section>
  137. <div class="scroller">
  138. <div class="scroller-content" id="bx-pager">
  139. {% for yhteistyo in site.yhteistyot %}
  140. <a class="item" data-slide-index="{{ forloop.index0 }}" href="">
  141. <h4 class="medium">{{yhteistyo.sliderlinkname}} </h4>
  142. </a>
  143. {% endfor %}
  144. </div>
  145. </div>
  146. </section>
  147. <div class="sponsors">
  148. <ul class="bxslider">
  149. {% for yhteistyo in site.yhteistyot %}
  150. <li style="background: url({{ yhteistyo.image_path }}) no-repeat; background-size: cover; background-position: center center;">
  151. <section>
  152. <h1 class="black">{{ yhteistyo.title }}</h1>
  153. <p>{{ yhteistyo.content }}</p>
  154. <button><a href="/avainsanat/{{yhteistyo.sliderlinkname}}">Lue yhteistyö artikkelit</a></button>
  155. </section>
  156. </li>
  157. {% endfor %}
  158. </ul>
  159. </div>
  160. <div id="sponsorLinks">
  161. <section>
  162. <div id="sponsorLinksContent">
  163. <!--h2 class="sectionHeader"><a href="/yhteistyoreseptit">Kaikki yhteistyö artikkelit</a></h2-->
  164. <h2 class="sectionHeader"><a href="#contact">Kiinnostaako yhteistyö?</a></h2>
  165. </div>
  166. </section>
  167. </div>
  168. </div>
  169. <section>
  170. <div id="categoryPosts" class="contentBlock">
  171. <div class="categoryItem">
  172. <h3 class="black">Alkupalat</h3>
  173. <a href="/avainsanat/Alkupalat"><h5 class="medium">Lue kaikki</h5></a>
  174. <div class="categoryItemContent">
  175. {% for post in site.categories.alkupalat limit:1 %}
  176. <a href="{{ post.url | prepend: site.baseurl }}">
  177. <div class="categoryItemContentImage">
  178. <img src="{{ post.gategorythumbnail }}" />
  179. </div>
  180. </a>
  181. <a href="{{ post.url | prepend: site.baseurl }}"><h4 class="black">{{ post.title }}</h4></a>
  182. <h5 class="date medium">{{ post.date | date: "%d.%m.%Y" }}</h5>
  183. <p class="teaser">{{post.teaser | truncate: 200 }}</p>
  184. {% endfor %}
  185. </div>
  186. </div>
  187. <div class="categoryItem">
  188. <h3 class="black">Leivonnaiset</h3>
  189. <a href="/avainsanat/Leivonnaiset"><h5 class="medium">Lue kaikki</h5></a>
  190. <div class="categoryItemContent">
  191. {% for post in site.categories.leivonnaiset limit:1 %}
  192. <a href="{{ post.url | prepend: site.baseurl }}">
  193. <div class="categoryItemContentImage">
  194. <img src="{{ post.gategorythumbnail }}" />
  195. </div>
  196. </a>
  197. <a href="{{ post.url | prepend: site.baseurl }}"><h4 class="black">{{ post.title }}</h4></a>
  198. <h5 class="date">{{ post.date | date: "%d.%m.%Y" }}</h5>
  199. <p class="teaser">{{post.teaser | truncate: 200 }}</p>
  200. {% endfor %}
  201. </div>
  202. </div>
  203. <div class="categoryItem">
  204. <h3 class="black">Salaatit</h3>
  205. <a href="/avainsanat/Salaatit"><h5 class="medium">Lue kaikki</h5></a>
  206. <div class="categoryItemContent">
  207. {% for post in site.categories.salaatit limit:1 %}
  208. <a href="{{ post.url | prepend: site.baseurl }}">
  209. <div class="categoryItemContentImage">
  210. <img src="{{ post.gategorythumbnail }}" />
  211. </div>
  212. </a>
  213. <a href="{{ post.url | prepend: site.baseurl }}"><h4 class="black">{{ post.title }}</h4></a>
  214. <h5 class="date">{{ post.date | date: "%d.%m.%Y" }}</h5>
  215. <p class="teaser">{{post.teaser | truncate: 200 }}</p>
  216. {% endfor %}
  217. </div>
  218. </div>
  219. <div class="categoryItem">
  220. <h3 class="black">Keitot & Padat</h3>
  221. <a href="/avainsanat/Keitot"><h5 class="medium">Lue kaikki</h5></a>
  222. <div class="categoryItemContent">
  223. {% for post in site.categories.keitot limit:1 %}
  224. <a href="{{ post.url | prepend: site.baseurl }}">
  225. <div class="categoryItemContentImage">
  226. <img src="{{ post.gategorythumbnail }}" />
  227. </div>
  228. </a>
  229. <a href="{{ post.url | prepend: site.baseurl }}"><h4 class="black">{{ post.title }}</h4></a>
  230. <h5 class="date">{{ post.date | date: "%d.%m.%Y" }}</h5>
  231. <p class="teaser">{{post.teaser | truncate: 200 }}</p>
  232. {% endfor %}
  233. </div>
  234. </div>
  235. <div class="categoryItem">
  236. <h3 class="black">Ruokaisat</h3>
  237. <a href="/avainsanat/Ruokaisa"><h5 class="medium">Lue kaikki</h5></a>
  238. <div class="categoryItemContent">
  239. {% for post in site.categories.ruokaisat limit:1 %}
  240. <a href="{{ post.url | prepend: site.baseurl }}">
  241. <div class="categoryItemContentImage">
  242. <img src="{{ post.gategorythumbnail }}" />
  243. </div>
  244. </a>
  245. <a href="{{ post.url | prepend: site.baseurl }}"><h4 class="black">{{ post.title }}</h4></a>
  246. <h5 class="date">{{ post.date | date: "%d.%m.%Y" }}</h5>
  247. <p class="teaser">{{post.teaser | truncate: 200 }}</p>
  248. {% endfor %}
  249. </div>
  250. </div>
  251. <div class="categoryItem">
  252. <h3 class="black">Makeat</h3>
  253. <a href="/avainsanat/Makeat"><h5 class="medium">Lue kaikki</h5></a>
  254. <div class="categoryItemContent">
  255. {% for post in site.categories.jalkiruoat limit:1 %}
  256. <a href="{{ post.url | prepend: site.baseurl }}">
  257. <div class="categoryItemContentImage">
  258. <img src="{{ post.gategorythumbnail }}" />
  259. </div>
  260. </a>
  261. <a href="{{ post.url | prepend: site.baseurl }}"><h4 class="black">{{ post.title }}</h4></a>
  262. <h5 class="date">{{ post.date | date: "%d.%m.%Y" }}</h5>
  263. <p class="teaser">{{post.teaser | truncate: 200 }}</p>
  264. {% endfor %}
  265. </div>
  266. </div>
  267. <div class="categoryItem">
  268. <h3 class="black">Muut</h3>
  269. <a href="/avainsanat/Muut"><h5 class="medium">Lue kaikki</h5></a>
  270. <div class="categoryItemContent">
  271. {% for post in site.categories.muut limit:1 %}
  272. <a href="{{ post.url | prepend: site.baseurl }}">
  273. <div class="categoryItemContentImage">
  274. <img src="{{ post.gategorythumbnail }}" />
  275. </div>
  276. </a>
  277. <a href="{{ post.url | prepend: site.baseurl }}"><h4 class="black">{{ post.title }}</h4></a>
  278. <h5 class="date">{{ post.date | date: "%d.%m.%Y" }}</h5>
  279. <p class="teaser">{{post.teaser | truncate: 200 }}</p>
  280. {% endfor %}
  281. </div>
  282. </div>
  283. </div>
  284. </section>
  285. <section>
  286. <div class="socialBoard">
  287. <div class="socialContainer"></div>
  288. </div>
  289. </section>