Skip to content

Commit

Permalink
home page design compleate
Browse files Browse the repository at this point in the history
  • Loading branch information
@sabbir-hosen-dev
sabbir-hosen-dev committed Sep 23, 2024
1 parent 6cc640c commit 60ef92b
Show file tree
Hide file tree
Showing 2 changed files with 287 additions and 9 deletions.
295 changes: 286 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,35 +11,312 @@
rel="stylesheet"
type="text/css"
/>
<!-- tailwindcss -->

<!-- font link -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap"
rel="stylesheet"
/>

<!-- Load Tailwind via CDN with Config -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- custom tailwindcss -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: "#da373d",
primary: "#B4F461",
secondary: "#111111",
gray: "#111111b3",
},
fontFamily: {
lexed: ['"Lexend"', "sans-serif"],
},
},
},
};
</script>

<!-- tailwindcss class -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
.heading {
@apply font-bold text-lg text-secondary;
}
.btn {
@apply bg-primary rounded-md cursor-pointer transition-all ease-in-out hover:bg-gray hover:text-white duration-300 border-none py-3 px-8 text-secondary font-bold text-base font-lexed;
}
.btn-active {
@apply rounded-md cursor-pointer transition-all ease-in-out hover:bg-primary hover:border-primary duration-300 py-3 px-8 text-secondary border-2 border-primary bg-primary font-bold text-base font-lexed text-secondary hover:text-secondary;
}
.btn-normal {
@apply rounded-md cursor-pointer transition-all ease-in-out hover:bg-primary hover:border-primary duration-300 py-3 px-8 text-gray hover:text-secondary border-2 border-gray bg-transparent font-bold text-base font-lexed;
}
.wraper {
@apply container m-auto max-w-[1250px] px-5;
}
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
</style>
</head>
<body>
<h1>Test</h1>
<body class="font-lexed text-gray">
<header class="bg-[#F9F7F3] py-4 pb-6">
<nav class="wraper flex justify-between items-center flex-wrap gap-5">
<button class="btn">Blog</button>
<div class="flex gap-2 items-center sm:order-2 order-3">
<img class="w-9" src="assets/logo.png" alt="" />
<p class="heading">Donate Bangladesh</p>
</div>
<div class="flex items-center gap-1 sm:order-3 order-2">
<img src="assets/coin.png" alt="" />
<h4 class="text-lg font-bold"><span id="balance">5500</span> BDT</h4>
</div>
</nav>
</header>
<section class="">
<div class="wrapper navigate flex justify-center gap-5 items-center py-10">
<button class="btn btn-active hover:text-secondary">Donation</button>
<button class="btn btn-normal">History</button>
</div>
</section>
<section class="wraper">


<div
class="donate-wrap grid grid-cols-1 md:grid-cols-2 gap-5 p-5 rounded-xl border border-[#1111110d] mb-6"
>
<div class="">
<img src="assets/noakhali.png" alt="" />
</div>
<div class="">
<span class="bg-[#1111110d] inline-block rounded-md gap-1 p-2 px-4">
<div class="flex justify-center items-center gap-2">
<img src="assets/coin.png" alt="" />
<h4 class="font-bold"><span>0</span> BDT</h4>
</div>
</span>
<h4 class="heading my-3">Donate for Flood at Noakhali, Bangladesh</h4>
<p>
The recent floods in Noakhali have caused significant damage to
homes infrastructure. Your donation will help provide essential
supplies and to those affected by this disaster. Every contribution,
big or small, makes difference. Please join us in supporting the
relief efforts and making a positive impact on the lives of those in
need.
</p>

<div class="">
<input
type="number"
name="amount"
id="donate-input"
required
placeholder="Write Donation Amount"
class="p-3 border border-[#1111110d] rounded-md w-full my-4"
/>
</div>
<button class="btn w-full">donate Now</button>
</div>
</div>


<div
class="donate-wrap grid grid-cols-1 md:grid-cols-2 gap-5 p-5 rounded-xl border border-[#1111110d] mb-6"
>
<div class="">
<img src="assets/noakhali.png" alt="" />
</div>
<div class="">
<span class="bg-[#1111110d] inline-block rounded-md gap-1 p-2 px-4">
<div class="flex justify-center items-center gap-2">
<img src="assets/coin.png" alt="" />
<h4 class="font-bold"><span>0</span> BDT</h4>
</div>
</span>
<h4 class="heading my-3">Donate for Flood at Noakhali, Bangladesh</h4>
<p>
The recent floods in Noakhali have caused significant damage to
homes infrastructure. Your donation will help provide essential
supplies and to those affected by this disaster. Every contribution,
big or small, makes difference. Please join us in supporting the
relief efforts and making a positive impact on the lives of those in
need.
</p>

<div class="">
<input
type="number"
name="amount"
id="donate-input"
required
placeholder="Write Donation Amount"
class="p-3 border border-[#1111110d] rounded-md w-full my-4"
/>
</div>
<button class="btn w-full">donate Now</button>
</div>
</div>


<div
class="donate-wrap grid grid-cols-1 md:grid-cols-2 gap-5 p-5 rounded-xl border border-[#1111110d] mb-6"
>
<div class="">
<img src="assets/noakhali.png" alt="" />
</div>
<div class="">
<span class="bg-[#1111110d] inline-block rounded-md gap-1 p-2 px-4">
<div class="flex justify-center items-center gap-2">
<img src="assets/coin.png" alt="" />
<h4 class="font-bold"><span>0</span> BDT</h4>
</div>
</span>
<h4 class="heading my-3">Donate for Flood at Noakhali, Bangladesh</h4>
<p>
The recent floods in Noakhali have caused significant damage to
homes infrastructure. Your donation will help provide essential
supplies and to those affected by this disaster. Every contribution,
big or small, makes difference. Please join us in supporting the
relief efforts and making a positive impact on the lives of those in
need.
</p>

<div class="">
<input
type="number"
name="amount"
id="donate-input"
required
placeholder="Write Donation Amount"
class="p-3 border border-[#1111110d] rounded-md w-full my-4"
/>
</div>
<button class="btn w-full">donate Now</button>
</div>
</div>


<div
class="donate-wrap grid grid-cols-1 md:grid-cols-2 gap-5 p-5 rounded-xl border border-[#1111110d] mb-6"
>
<div class="">
<img src="assets/noakhali.png" alt="" />
</div>
<div class="">
<span class="bg-[#1111110d] inline-block rounded-md gap-1 p-2 px-4">
<div class="flex justify-center items-center gap-2">
<img src="assets/coin.png" alt="" />
<h4 class="font-bold"><span>0</span> BDT</h4>
</div>
</span>
<h4 class="heading my-3">Donate for Flood at Noakhali, Bangladesh</h4>
<p>
The recent floods in Noakhali have caused significant damage to
homes infrastructure. Your donation will help provide essential
supplies and to those affected by this disaster. Every contribution,
big or small, makes difference. Please join us in supporting the
relief efforts and making a positive impact on the lives of those in
need.
</p>

<div class="">
<input
type="number"
name="amount"
id="donate-input"
required
placeholder="Write Donation Amount"
class="p-3 border border-[#1111110d] rounded-md w-full my-4"
/>
</div>
<button class="btn w-full">donate Now</button>
</div>
</div>


<div
class="donate-wrap grid grid-cols-1 md:grid-cols-2 gap-5 p-5 rounded-xl border border-[#1111110d] mb-6 "
>
<div class="">
<img src="assets/noakhali.png" alt="" />
</div>
<div class="">
<span class="bg-[#1111110d] inline-block rounded-md gap-1 p-2 px-4">
<div class="flex justify-center items-center gap-2">
<img src="assets/coin.png" alt="" />
<h4 class="font-bold"><span>0</span> BDT</h4>
</div>
</span>
<h4 class="heading my-3">Donate for Flood at Noakhali, Bangladesh</h4>
<p>
The recent floods in Noakhali have caused significant damage to
homes infrastructure. Your donation will help provide essential
supplies and to those affected by this disaster. Every contribution,
big or small, makes difference. Please join us in supporting the
relief efforts and making a positive impact on the lives of those in
need.
</p>

<div class="">
<input
type="number"
name="amount"
id="donate-input"
required
placeholder="Write Donation Amount"
class="p-3 border border-[#1111110d] rounded-md w-full my-4"
/>
</div>
<button class="btn w-full">donate Now</button>
</div>
</div>


<div
class="donate-wrap grid grid-cols-1 md:grid-cols-2 gap-5 p-5 rounded-xl border border-[#1111110d] mb-6"
>
<div class="">
<img src="assets/noakhali.png" alt="" />
</div>
<div class="">
<span class="bg-[#1111110d] inline-block rounded-md gap-1 p-2 px-4">
<div class="flex justify-center items-center gap-2">
<img src="assets/coin.png" alt="" />
<h4 class="font-bold"><span>0</span> BDT</h4>
</div>
</span>
<h4 class="heading my-3">Donate for Flood at Noakhali, Bangladesh</h4>
<p>
The recent floods in Noakhali have caused significant damage to
homes infrastructure. Your donation will help provide essential
supplies and to those affected by this disaster. Every contribution,
big or small, makes difference. Please join us in supporting the
relief efforts and making a positive impact on the lives of those in
need.
</p>

<div class="">
<input
type="number"
name="amount"
id="donate-input"
required
placeholder="Write Donation Amount"
class="p-3 border border-[#1111110d] rounded-md w-full my-4"
/>
</div>
<button class="btn w-full">donate Now</button>
</div>
</div>
</section>

<!-- javasctipt link -->
<!-- javasctipt link -->
<script src="js/function.js"></script>
<script src="js/custom.js"></script>
</body>
Expand Down
1 change: 1 addition & 0 deletions js/function.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

0 comments on commit 60ef92b

Please sign in to comment.