sashaastiadi/www_duniayetu
1
0
Fork 0
forked from tfcoop/www_duniayetu
Code Pull Requests Activity

added Hero

Browse Source
This commit is contained in:
Ehab Hassan 2023-11-30 09:00:46 +02:00
parent d135038e55
commit 6cdfea7461
2 changed files with 49 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
content/home/index.md
View File

@ -7,9 +7,34 @@ draft: false
weight: 1
---
<div class="container mx-auto">
<!-- section hero -->
{% hero(
hero_subtitle = "Very proud to introduce"
hero_title = "Revolutionary way to build the web"
hero_text = "This is a section of some simple filler text, also known as placeholder text. It shares some characteristics of a real written text but is random."
hero_img = "https://images.unsplash.com/photo-1618004912476-29818d81ae2e?auto=format&q=75&fit=crop&w=1000"
hero_link1 = "#"
hero_link1_name = "Start Now"
hero_link2 = "#"
hero_link2_name = "Take tour"
) %}
# test
{% end %}
<!-- section CTA -->
<div class="container mx-auto">
{% cta(

23
templates/shortcodes/hero.html Normal file
View File

@ -0,0 +1,23 @@
<section class="flex flex-col justify-between gap-6 sm:gap-10 md:gap-16 lg:flex-row">
<!-- content - start -->
<div class="flex flex-col justify-center sm:text-center lg:py-12 lg:text-left xl:w-5/12 xl:py-24">
<p class="mb-4 font-semibold text-indigo-500 md:mb-6 md:text-lg xl:text-xl">{{ hero_subtitle }}</p>
<h1 class="mb-8 text-4xl font-bold text-black sm:text-5xl md:mb-12 md:text-6xl">{{ hero_title }}</h1>
<p class="mb-8 leading-relaxed text-gray-500 md:mb-12 lg:w-4/5 xl:text-lg">{{ hero_text }}</p>
<div class="flex flex-col gap-2.5 sm:flex-row sm:justify-center lg:justify-start">
<a href="{{ hero_link1 }}" class="inline-block rounded-lg bg-indigo-500 px-8 py-3 text-center text-sm font-semibold text-white outline-none ring-indigo-300 transition duration-100 hover:bg-indigo-600 focus-visible:ring active:bg-indigo-700 md:text-base">{{ hero_link1_name }}</a>
<a href="{{ hero_link2 }}" class="inline-block rounded-lg bg-gray-200 px-8 py-3 text-center text-sm font-semibold text-gray-500 outline-none ring-indigo-300 transition duration-100 hover:bg-gray-300 focus-visible:ring active:text-gray-700 md:text-base">{{ hero_link2_name }}</a>
</div>
</div>
<!-- content - end -->
<!-- image - start -->
<div class="h-48 overflow-hidden rounded-lg bg-gray-100 shadow-lg lg:h-auto xl:w-5/12">
<img src="{{ hero_img }}<" loading="lazy" alt="Photo by Fakurian Design" class="h-full w-full object-cover object-center" />
</div>
<!-- image - end -->
</section>