Skip to content

update nav #10 #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

update nav #10 #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
df5f559
baru
Pugud19 Aug 14, 2021
5c3da67
Merge branch 'main' of git://github.com/mulaidev/components
Pugud19 Aug 14, 2021
dfffa0e
update content
Pugud19 Aug 21, 2021
6e0dc4f
Merge branch 'main' of https://github.com/Pugud19/components
Pugud19 Aug 21, 2021
36a9db2
Merge branch 'main' of https://github.com/Pugud19/components
Pugud19 Aug 21, 2021
72c4b68
add nav #10
Pugud19 Aug 25, 2021
bb25bc7
Merge branch
Pugud19 Aug 25, 2021
737b50e
update components from ikbal
Pugud19 Aug 25, 2021
a2581bc
fix nav #10
Pugud19 Sep 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions src/components/Hero2.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!-- Hero -->
<section id="Hero">
<div class="hero py-12">
<!-- Container -->
<div class="container px-12 mx-auto">
<!-- Hero Wrapper -->
<div class="grid grid-cols-2 gap-6 items-center">
<!-- Hero Text -->
<div class="hero-text col-span-6 text-center">
<h1 class="font-bold text-3xl max-w-full text-black">
<slot/ name="Hero-title"></h1>
</div>
</div>
</div>
</div>
</section>
27 changes: 27 additions & 0 deletions src/components/Nav.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
const { Navitems, Navbtn } = Astro.props ;
---

<div id="Navigation">
<nav class="relative flex flex-wrap items-center justify-between px-3 py-3 bg-gray-50 ">
<div class="container items-center justify-between mx-auto flex flex-wrap h-16 px-12 ">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<slot name="Logo"></slot>
</div>
<div class="lg:flex flex-grow items-center hidden">
<ul class="flex flex-col lg:flex-row list-none ml-auto space-x-5">
{ Navitems.map((item) => (
<li>
<a href="/#" class="flex text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">{item}</a>
</li>
))
}
<li>
<a href="/#" class="text-gray-300 px-3 py-2 text-sm font-medium">
<button class="text-gray-800 dark:text-white hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">{Navbtn}</button>
</a>
</li>
</ul>
</div>
</nav>
</div>
20 changes: 10 additions & 10 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,10 +75,10 @@ const pricingFeature = ["Feature 1", "Feature 2", "Feature 3", "Feature 4", "Fea

<!-- Navigation 2 -->
<div class="w-full px-4 mx-auto max-w-screen-2xl sm:px-6 md:px-8 ">
<div class="flex items-center h-16 px-12">
<span class="font-semibold text-2xl leading-none tracking-light text-blue-600 px-16
<div class="flex items-center justify-between h-16 px-12">
<span class="font-semibold justify-between text-2xl leading-none tracking-light text-blue-600 px-16
">Mulai</span>
<form class="px-5">
<form class="px-3 shadow-md">
<input name="q" type="text" size="15" placeholder="search..." />
</form>
<ul class="items-center hidden text-sm space-x-4 px-2 font-medium text-gray-400 md:flex">
Expand All @@ -89,7 +89,7 @@ const pricingFeature = ["Feature 1", "Feature 2", "Feature 3", "Feature 4", "Fea
<li><a class="p-4 px-2 transition rounded-lg focus:outline-none hover:text-gray-700" href="#">Groups</a></li>
</ul>

<div class=" inline-flex items-center space-x-4 ml-80 ">
<div class="flex items-center space-x-4">
<a class="w-6 h-5" href="#"><img src={icirclesolid} /></a>
<a class="w-6 h-5" href="#"><img src={bell} /></a>
<a class="p-1 text-white text-sm bg-purple-700 rounded-full focus:outline-none" href="#">JW</a>
Expand All @@ -103,12 +103,12 @@ const pricingFeature = ["Feature 1", "Feature 2", "Feature 3", "Feature 4", "Fea
<div class="flex items-center justify-between h-16 px-12">
<span class="font-semibold text-2xl leading-none tracking-light text-blue-600 px-16
">Mulai</span>
<ul class="items-center hidden text-sm space-x-5 md:flex">
<li><a class="text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium " href="#">Offers</a></li>
<li><a class="text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="#"><img class="inline-block w-4 h-5 " src={card} /> Card</a></li>
<li><a class="text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="#">Transaction</a></li>
<li><a class="text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="#"><img class="inline-block w-4 h-5 " src={booth}/> Booth</a></li>
<li><a class="text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="#"><img class="inline-block w-4 h-5 " src={refers} /> Refer</a></li>
<ul class="items-center hidden text-sm space-x-5 md:flex text-gray-400">
<li><a class=" hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium " href="#">Offers</a></li>
<li><a class=" hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="#"><img class="inline-block w-4 h-5 " src={card} /> Card</a></li>
<li><a class=" hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="#">Transaction</a></li>
<li><a class=" hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="#"><img class="inline-block w-4 h-5 " src={booth}/> Booth</a></li>
<li><a class=" hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="#"><img class="inline-block w-4 h-5 " src={refers} /> Refer</a></li>
<div>
</ul>

Expand Down