aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/App.svelte62
-rw-r--r--src/assets/svelte.pngbin0 -> 5185 bytes
-rw-r--r--src/lib/Counter.svelte12
-rw-r--r--src/lib/Tailwind.css3
-rw-r--r--src/lib/hmr-stores.js29
-rw-r--r--src/main.js8
-rw-r--r--src/routes/About.svelte37
-rw-r--r--src/routes/Blog.svelte236
-rw-r--r--src/routes/Home.svelte195
9 files changed, 582 insertions, 0 deletions
diff --git a/src/App.svelte b/src/App.svelte
new file mode 100644
index 0000000..f56f6bb
--- /dev/null
+++ b/src/App.svelte
@@ -0,0 +1,62 @@
+<script>
+ import "./lib/Tailwind.css";
+ import { Router, Link, Route } from "svelte-routing";
+ import Home from "./routes/Home.svelte";
+ import About from "./routes/About.svelte";
+ import Blog from "./routes/Blog.svelte";
+
+ export let url = "";
+</script>
+
+<Router {url}>
+ <header class="text-gray-600 body-font">
+ <div
+ class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center"
+ >
+ <a
+ class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ stroke="currentColor"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="2"
+ class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full"
+ viewBox="0 0 24 24"
+ >
+ <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
+ </svg>
+ <span class="ml-3 text-xl">Tailblocks</span>
+ </a>
+ <nav
+ class="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center"
+ >
+ <Link class="mr-5 hover:text-gray-900" to="/">Home</Link>
+ <Link class="mr-5 hover:text-gray-900" to="about">About</Link>
+ <Link class="mr-5 hover:text-gray-900" to="blog">Blog</Link>
+ </nav>
+ <button
+ class="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0"
+ >Button
+ <svg
+ fill="none"
+ stroke="currentColor"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="2"
+ class="w-4 h-4 ml-1"
+ viewBox="0 0 24 24"
+ >
+ <path d="M5 12h14M12 5l7 7-7 7" />
+ </svg>
+ </button>
+ </div>
+ </header>
+ <div>
+ <Route path="blog" component={Blog} />
+ <Route path="about" component={About} />
+ <Route path="/"><Home /></Route>
+ </div>
+</Router>
diff --git a/src/assets/svelte.png b/src/assets/svelte.png
new file mode 100644
index 0000000..e673c91
--- /dev/null
+++ b/src/assets/svelte.png
Binary files differ
diff --git a/src/lib/Counter.svelte b/src/lib/Counter.svelte
new file mode 100644
index 0000000..e417505
--- /dev/null
+++ b/src/lib/Counter.svelte
@@ -0,0 +1,12 @@
+<script>
+ import { getStore } from './hmr-stores';
+ export let id;
+ const count = getStore(id, 0);
+ export const increment = () => {
+ $count += 1
+ };
+</script>
+
+<button class="px-8 py-4 w-52 text-red-500 bg-red-200 rounded-full" {id} on:click={increment}>
+ Clicks: {$count}
+</button> \ No newline at end of file
diff --git a/src/lib/Tailwind.css b/src/lib/Tailwind.css
new file mode 100644
index 0000000..bd6213e
--- /dev/null
+++ b/src/lib/Tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities; \ No newline at end of file
diff --git a/src/lib/hmr-stores.js b/src/lib/hmr-stores.js
new file mode 100644
index 0000000..9cd6d0e
--- /dev/null
+++ b/src/lib/hmr-stores.js
@@ -0,0 +1,29 @@
+// Customized HMR-safe stores
+// Based off https://github.com/svitejs/svite/blob/ddec6b9/packages/playground/hmr/src/stores/hmr-stores.js
+import { writable } from 'svelte/store'
+
+/**
+ * @type { Record<string, import('svelte/store').Writable<any>> }
+ */
+let stores = {}
+
+/**
+ * @template T
+ * @param { string } id
+ * @param { T } initialValue
+ * @returns { import('svelte/store').Writable<T> }
+ */
+export function getStore(id, initialValue) {
+ return stores[id] || (stores[id] = writable(initialValue))
+}
+
+// preserve the store across HMR updates
+if (import.meta.hot) {
+ if (import.meta.hot.data.stores) {
+ stores = import.meta.hot.data.stores
+ }
+ import.meta.hot.accept()
+ import.meta.hot.dispose(() => {
+ import.meta.hot.data.stores = stores
+ })
+}
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..5dbcfa9
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,8 @@
+import App from './App.svelte'
+
+const app = new App({
+ target: document.body,
+ // hydrate: true,
+})
+
+export default app
diff --git a/src/routes/About.svelte b/src/routes/About.svelte
new file mode 100644
index 0000000..8978723
--- /dev/null
+++ b/src/routes/About.svelte
@@ -0,0 +1,37 @@
+<script></script>
+
+<section class="text-gray-600 body-font">
+ <div
+ class="container mx-auto flex px-5 py-24 items-center justify-center flex-col"
+ >
+ <img
+ class="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded"
+ alt="hero"
+ src="https://dummyimage.com/720x600"
+ />
+ <div class="text-center lg:w-2/3 w-full">
+ <h1
+ class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900"
+ >
+ Microdosing synth tattooed vexillologist
+ </h1>
+ <p class="mb-8 leading-relaxed">
+ Meggings kinfolk echo park stumptown DIY, kale chips beard jianbing
+ tousled. Chambray dreamcatcher trust fund, kitsch vice godard disrupt
+ ramps hexagon mustache umami snackwave tilde chillwave ugh. Pour-over
+ meditation PBR&B pickled ennui celiac mlkshk freegan photo booth af
+ fingerstache pitchfork.
+ </p>
+ <div class="flex justify-center">
+ <button
+ class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg"
+ >Button</button
+ >
+ <button
+ class="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg"
+ >Button</button
+ >
+ </div>
+ </div>
+ </div>
+</section>
diff --git a/src/routes/Blog.svelte b/src/routes/Blog.svelte
new file mode 100644
index 0000000..3a7fe84
--- /dev/null
+++ b/src/routes/Blog.svelte
@@ -0,0 +1,236 @@
+<script></script>
+
+<section class="text-gray-600 body-font">
+ <div class="container px-5 py-24 mx-auto">
+ <div class="flex flex-wrap -m-4">
+ <div class="p-4 md:w-1/3">
+ <div
+ class="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden"
+ >
+ <img
+ class="lg:h-48 md:h-36 w-full object-cover object-center"
+ src="https://dummyimage.com/720x400"
+ alt="blog"
+ />
+ <div class="p-6">
+ <h2
+ class="tracking-widest text-xs title-font font-medium text-gray-400 mb-1"
+ >
+ CATEGORY
+ </h2>
+ <h1 class="title-font text-lg font-medium text-gray-900 mb-3">
+ The Catalyzer
+ </h1>
+ <p class="leading-relaxed mb-3">
+ Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+ microdosing tousled waistcoat.
+ </p>
+ <div class="flex items-center flex-wrap ">
+ <a
+ class="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0"
+ >Learn More
+ <svg
+ class="w-4 h-4 ml-2"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ stroke-width="2"
+ fill="none"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <path d="M5 12h14" />
+ <path d="M12 5l7 7-7 7" />
+ </svg>
+ </a>
+ <span
+ class="text-gray-400 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-200"
+ >
+ <svg
+ class="w-4 h-4 mr-1"
+ stroke="currentColor"
+ stroke-width="2"
+ fill="none"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ viewBox="0 0 24 24"
+ >
+ <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+ <circle cx="12" cy="12" r="3" />
+ </svg>1.2K
+ </span>
+ <span
+ class="text-gray-400 inline-flex items-center leading-none text-sm"
+ >
+ <svg
+ class="w-4 h-4 mr-1"
+ stroke="currentColor"
+ stroke-width="2"
+ fill="none"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ viewBox="0 0 24 24"
+ >
+ <path
+ d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"
+ />
+ </svg>6
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="p-4 md:w-1/3">
+ <div
+ class="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden"
+ >
+ <img
+ class="lg:h-48 md:h-36 w-full object-cover object-center"
+ src="https://dummyimage.com/721x401"
+ alt="blog"
+ />
+ <div class="p-6">
+ <h2
+ class="tracking-widest text-xs title-font font-medium text-gray-400 mb-1"
+ >
+ CATEGORY
+ </h2>
+ <h1 class="title-font text-lg font-medium text-gray-900 mb-3">
+ The 400 Blows
+ </h1>
+ <p class="leading-relaxed mb-3">
+ Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+ microdosing tousled waistcoat.
+ </p>
+ <div class="flex items-center flex-wrap">
+ <a
+ class="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0"
+ >Learn More
+ <svg
+ class="w-4 h-4 ml-2"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ stroke-width="2"
+ fill="none"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <path d="M5 12h14" />
+ <path d="M12 5l7 7-7 7" />
+ </svg>
+ </a>
+ <span
+ class="text-gray-400 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-200"
+ >
+ <svg
+ class="w-4 h-4 mr-1"
+ stroke="currentColor"
+ stroke-width="2"
+ fill="none"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ viewBox="0 0 24 24"
+ >
+ <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+ <circle cx="12" cy="12" r="3" />
+ </svg>1.2K
+ </span>
+ <span
+ class="text-gray-400 inline-flex items-center leading-none text-sm"
+ >
+ <svg
+ class="w-4 h-4 mr-1"
+ stroke="currentColor"
+ stroke-width="2"
+ fill="none"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ viewBox="0 0 24 24"
+ >
+ <path
+ d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"
+ />
+ </svg>6
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="p-4 md:w-1/3">
+ <div
+ class="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden"
+ >
+ <img
+ class="lg:h-48 md:h-36 w-full object-cover object-center"
+ src="https://dummyimage.com/722x402"
+ alt="blog"
+ />
+ <div class="p-6">
+ <h2
+ class="tracking-widest text-xs title-font font-medium text-gray-400 mb-1"
+ >
+ CATEGORY
+ </h2>
+ <h1 class="title-font text-lg font-medium text-gray-900 mb-3">
+ Shooting Stars
+ </h1>
+ <p class="leading-relaxed mb-3">
+ Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+ microdosing tousled waistcoat.
+ </p>
+ <div class="flex items-center flex-wrap ">
+ <a
+ class="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0"
+ >Learn More
+ <svg
+ class="w-4 h-4 ml-2"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ stroke-width="2"
+ fill="none"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <path d="M5 12h14" />
+ <path d="M12 5l7 7-7 7" />
+ </svg>
+ </a>
+ <span
+ class="text-gray-400 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-200"
+ >
+ <svg
+ class="w-4 h-4 mr-1"
+ stroke="currentColor"
+ stroke-width="2"
+ fill="none"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ viewBox="0 0 24 24"
+ >
+ <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+ <circle cx="12" cy="12" r="3" />
+ </svg>1.2K
+ </span>
+ <span
+ class="text-gray-400 inline-flex items-center leading-none text-sm"
+ >
+ <svg
+ class="w-4 h-4 mr-1"
+ stroke="currentColor"
+ stroke-width="2"
+ fill="none"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ viewBox="0 0 24 24"
+ >
+ <path
+ d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"
+ />
+ </svg>6
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</section>
diff --git a/src/routes/Home.svelte b/src/routes/Home.svelte
new file mode 100644
index 0000000..8092ee1
--- /dev/null
+++ b/src/routes/Home.svelte
@@ -0,0 +1,195 @@
+<script lang="ts">
+ // interface PokemonsJson {
+ // count: number;
+ // next?: string;
+ // previous?: string;
+ // results: [{ name: string; url: string }];
+ // }
+ const getPokemons = async () /*: Promise<PokemonsJson>*/ => {
+ const ps = await fetch("https://pokeapi.co/api/v2/pokemon?limit=100").then(
+ (res) => res.json()
+ );
+ console.log(ps);
+ const pokemons = [];
+ for (const poke of ps.results) {
+ const name = poke.name;
+ const pokeData = await fetch(
+ "https://pokeapi.co/api/v2/pokemon/" + name
+ ).then((res) => res.json());
+
+ console.log();
+ pokemons.push({ name, pokeData });
+ }
+ return pokemons;
+ };
+
+ let pokemonName = "";
+ function filterPokemons(pokemons, pokeName /*: { name: string }[]*/) {
+ return pokemons.filter((p) => p.name.includes(pokeName));
+ }
+</script>
+
+<section class="text-gray-600 body-font">
+ <div class="container px-5 py-24 mx-auto">
+ <div class="flex flex-col text-center w-full mb-20">
+ <h2
+ class="text-xs text-indigo-500 tracking-widest font-medium title-font mb-1"
+ >
+ I ❤️ SERIES
+ </h2>
+ <h1
+ class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900"
+ >
+ List of pokemons
+ </h1>
+ <p class="lg:w-2/3 mx-auto leading-relaxed text-base">
+ Data is taken from pokeapi.co, so they are the one to blame for any
+ errors
+ </p>
+ </div>
+ <div class="w-full flex justify-center flex-col items-center">
+ <label
+ for="name"
+ class="leading-7 text-lg text-gray-600 flex justify-center items-center mr-3"
+ >Name of pokemon to find</label
+ >
+ <input
+ type="text"
+ id="name"
+ name="name"
+ bind:value={pokemonName}
+ class="w-3/5 bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+ />
+ </div>
+ <div class="flex flex-wrap justify-center">
+ {#await getPokemons()}
+ <h1>Downolading pokemons</h1>
+ {:then pokemons}
+ {#each filterPokemons(pokemons, pokemonName) as pokemon}
+ <div class="m-5">
+ <img
+ src={pokemon.pokeData.sprites.back_default}
+ width="250"
+ alt="{pokemon.name} image"
+ />
+ <p class="text-4xl text-black text-center mt-3">{pokemon.name}</p>
+ </div>
+ {/each}
+ {/await}
+
+ <!-- <div -->
+ <!-- class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60" -->
+ <!-- > -->
+ <!-- <h2 -->
+ <!-- class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2" -->
+ <!-- > -->
+ <!-- Shooting Stars -->
+ <!-- </h2> -->
+ <!-- <p class="leading-relaxed text-base mb-4"> -->
+ <!-- Fingerstache flexitarian street art 8-bit waistcoat. Distillery -->
+ <!-- hexagon disrupt edison bulbche. -->
+ <!-- </p> -->
+ <!-- <a class="text-indigo-500 inline-flex items-center" -->
+ <!-- >Learn More -->
+ <!-- <svg -->
+ <!-- fill="none" -->
+ <!-- stroke="currentColor" -->
+ <!-- stroke-linecap="round" -->
+ <!-- stroke-linejoin="round" -->
+ <!-- stroke-width="2" -->
+ <!-- class="w-4 h-4 ml-2" -->
+ <!-- viewBox="0 0 24 24" -->
+ <!-- > -->
+ <!-- <path d="M5 12h14M12 5l7 7-7 7" /> -->
+ <!-- </svg> -->
+ <!-- </a> -->
+ <!-- </div> -->
+ <!-- <div -->
+ <!-- class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60" -->
+ <!-- > -->
+ <!-- <h2 -->
+ <!-- class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2" -->
+ <!-- > -->
+ <!-- The Catalyzer -->
+ <!-- </h2> -->
+ <!-- <p class="leading-relaxed text-base mb-4"> -->
+ <!-- Fingerstache flexitarian street art 8-bit waistcoat. Distillery -->
+ <!-- hexagon disrupt edison bulbche. -->
+ <!-- </p> -->
+ <!-- <a class="text-indigo-500 inline-flex items-center" -->
+ <!-- >Learn More -->
+ <!-- <svg -->
+ <!-- fill="none" -->
+ <!-- stroke="currentColor" -->
+ <!-- stroke-linecap="round" -->
+ <!-- stroke-linejoin="round" -->
+ <!-- stroke-width="2" -->
+ <!-- class="w-4 h-4 ml-2" -->
+ <!-- viewBox="0 0 24 24" -->
+ <!-- > -->
+ <!-- <path d="M5 12h14M12 5l7 7-7 7" /> -->
+ <!-- </svg> -->
+ <!-- </a> -->
+ <!-- </div> -->
+ <!-- <div -->
+ <!-- class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60" -->
+ <!-- > -->
+ <!-- <h2 -->
+ <!-- class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2" -->
+ <!-- > -->
+ <!-- Neptune -->
+ <!-- </h2> -->
+ <!-- <p class="leading-relaxed text-base mb-4"> -->
+ <!-- Fingerstache flexitarian street art 8-bit waistcoat. Distillery -->
+ <!-- hexagon disrupt edison bulbche. -->
+ <!-- </p> -->
+ <!-- <a class="text-indigo-500 inline-flex items-center" -->
+ <!-- >Learn More -->
+ <!-- <svg -->
+ <!-- fill="none" -->
+ <!-- stroke="currentColor" -->
+ <!-- stroke-linecap="round" -->
+ <!-- stroke-linejoin="round" -->
+ <!-- stroke-width="2" -->
+ <!-- class="w-4 h-4 ml-2" -->
+ <!-- viewBox="0 0 24 24" -->
+ <!-- > -->
+ <!-- <path d="M5 12h14M12 5l7 7-7 7" /> -->
+ <!-- </svg> -->
+ <!-- </a> -->
+ <!-- </div> -->
+ <!-- <div -->
+ <!-- class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60" -->
+ <!-- > -->
+ <!-- <h2 -->
+ <!-- class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2" -->
+ <!-- > -->
+ <!-- Melanchole -->
+ <!-- </h2> -->
+ <!-- <p class="leading-relaxed text-base mb-4"> -->
+ <!-- Fingerstache flexitarian street art 8-bit waistcoat. Distillery -->
+ <!-- hexagon disrupt edison bulbche. -->
+ <!-- </p> -->
+ <!-- <a class="text-indigo-500 inline-flex items-center" -->
+ <!-- >Learn More -->
+ <!-- <svg -->
+ <!-- fill="none" -->
+ <!-- stroke="currentColor" -->
+ <!-- stroke-linecap="round" -->
+ <!-- stroke-linejoin="round" -->
+ <!-- stroke-width="2" -->
+ <!-- class="w-4 h-4 ml-2" -->
+ <!-- viewBox="0 0 24 24" -->
+ <!-- > -->
+ <!-- <path d="M5 12h14M12 5l7 7-7 7" /> -->
+ <!-- </svg> -->
+ <!-- </a> -->
+ <!-- </div> -->
+ <!-- </div> -->
+ <!-- <button -->
+ <!-- class="flex mx-auto mt-16 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg" -->
+ <!-- >Button</button -->
+ <!-- > -->
+ </div>
+ </div>
+</section>