Skip to content

Commit

Permalink
saving money section added with responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mehedi-irfan
Mehedi-irfan committed Dec 15, 2024
1 parent 09769f7 commit 17e6538
Show file tree
Hide file tree
Showing 3 changed files with 186 additions and 33 deletions.
86 changes: 78 additions & 8 deletions css/output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -560,8 +560,8 @@ video {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 20px;
padding-left: 20px;
padding-right: 30px;
padding-left: 30px;
}

@media (min-width: 640px){
Expand Down Expand Up @@ -596,10 +596,6 @@ video {
}
}

.fixed{
position: fixed;
}

.absolute{
position: absolute;
}
Expand All @@ -620,10 +616,26 @@ video {
bottom: 2.5rem;
}

.bottom-32{
bottom: 8rem;
}

.left-12{
left: 3rem;
}

.right-12{
right: 3rem;
}

.right-8{
right: 2rem;
}

.top-10{
top: 2.5rem;
}

.top-5{
top: 1.25rem;
}
Expand Down Expand Up @@ -653,6 +665,10 @@ video {
margin-bottom: 1rem;
}

.inline-block{
display: inline-block;
}

.flex{
display: flex;
}
Expand Down Expand Up @@ -707,6 +723,12 @@ video {
margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
Expand All @@ -717,6 +739,10 @@ video {
overflow: hidden;
}

.rounded-lg{
border-radius: 0.5rem;
}

.bg-color-blob{
--tw-bg-opacity: 1;
background-color: rgb(164 39 223 / var(--tw-bg-opacity, 1));
Expand Down Expand Up @@ -747,11 +773,21 @@ video {
padding-right: 1rem;
}

.px-6{
padding-left: 1.5rem;
padding-right: 1.5rem;
}

.py-20{
padding-top: 5rem;
padding-bottom: 5rem;
}

.py-3{
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}

.py-32{
padding-top: 8rem;
padding-bottom: 8rem;
Expand Down Expand Up @@ -789,6 +825,11 @@ video {
line-height: 2.5rem;
}

.text-6xl{
font-size: 3.75rem;
line-height: 1;
}

.text-lg{
font-size: 1.125rem;
line-height: 1.75rem;
Expand Down Expand Up @@ -836,10 +877,18 @@ video {
transition-duration: 150ms;
}

.duration-200{
transition-duration: 200ms;
}

.duration-300{
transition-duration: 300ms;
}

.ease-in{
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.nav-link{
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
Expand Down Expand Up @@ -937,9 +986,14 @@ video {
font-weight: 700;
}

.hover\:bg-color-secondary:hover{
--tw-bg-opacity: 1;
background-color: rgb(255 125 59 / var(--tw-bg-opacity, 1));
}

@media (min-width: 768px){
.md\:hidden{
display: none;
.md\:ml-20{
margin-left: 5rem;
}

.md\:w-1\/2{
Expand All @@ -958,6 +1012,18 @@ video {
gap: 2rem;
}

.md\:space-x-6 > :not([hidden]) ~ :not([hidden]){
--tw-space-x-reverse: 0;
margin-right: calc(1.5rem * var(--tw-space-x-reverse));
margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.md\:space-y-0 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.md\:pr-10{
padding-right: 2.5rem;
}
Expand All @@ -966,6 +1032,10 @@ video {
text-align: left;
}

.md\:text-start{
text-align: start;
}

.md\:text-2xl{
font-size: 1.5rem;
line-height: 2rem;
Expand Down
131 changes: 107 additions & 24 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
</head>
<body class="bg-color-primary text-color-white">
<!-- header section start -->
<header>
<nav class="container fixed z-50 flex justify-between items-center">
<header class="bg-color-primary-dark">
<nav class="container z-50 flex justify-between items-center">
<div
class="py-5 text-color-secondary font-bold text-3xl font-lobster tracking-wider"
>
Expand All @@ -42,28 +42,30 @@
</ul>
</div>
<!-- mobile device -->
<div
class="lg:hidden overflow-hidden z-50 cursor-pointer relative text-2xl"
id="hamburger"
>
<i class="ri-menu-3-line hamburgerIcon"></i>
</div>
<div
id="menu"
class="hidden transition-all duration-300 bg-color-primary-dark h-[100vh] absolute inset-0"
>
<ul class="h-full grid place-items-center space-y-8 py-20 text-xl">
<li><a class="nav-link" href="#home">Home</a></li>
<li><a class="nav-link" href="#Features">Features</a></li>
<li><a class="nav-link" href="#Testimonial">Testimonial</a></li>
<li><a class="nav-link" href="#Pricing">Pricing</a></li>
<li><a class="nav-link" href="#Blog">Blog</a></li>
<li><a class="nav-link" href="#Contact">Contact</a></li>
<li>
<button class="btn">Free trail</button>
</li>
</ul>
</div>
<!-- <div>
<div
class="lg:hidden overflow-hidden z-50 cursor-pointer relative text-2xl"
id="hamburger"
>
<i class="ri-menu-3-line hamburgerIcon"></i>
</div>
<div
id="menu"
class="hidden transition-all duration-300 bg-color-primary-dark h-[100vh] absolute inset-0"
>
<ul class="h-full grid place-items-center space-y-8 py-20 text-xl">
<li><a class="nav-link" href="#home">Home</a></li>
<li><a class="nav-link" href="#Features">Features</a></li>
<li><a class="nav-link" href="#Testimonial">Testimonial</a></li>
<li><a class="nav-link" href="#Pricing">Pricing</a></li>
<li><a class="nav-link" href="#Blog">Blog</a></li>
<li><a class="nav-link" href="#Contact">Contact</a></li>
<li>
<button class="btn">Free trail</button>
</li>
</ul>
</div>
</div> -->
<!-- mobile device end -->
</nav>
</header>
Expand Down Expand Up @@ -141,6 +143,87 @@ <h3 class="card-title">Support 24/24</h3>
</div>
</section>
<!-- features section start end -->

<!-- saving money section start -->
<section id="savingMoney " class="relative">
<div class="blab bg-color-blob top-10 left-12"></div>
<div class="blab bg-color-secondary bottom-32 right-12"></div>
<div class="container py-20 relative">
<div class="flex flex-col items-center justify-between md:flex-row">
<div class="mb-12 md:w-1/2">
<img src="./img/hero3.png" alt="" />
</div>
<div class="text-center md:text-start md:w-1/2 md:ml-20">
<h4
class="font-bold text-color-secondary mb-4 text-xl md:text-2xl"
>
Saving Money
</h4>
<p class="title mb-4">Best Financial App To Saving Money</p>
<p class="leading-relaxed mb-10">
Best financing app ever in the world. Easy to use and very user
friendly for mobile banking. You can control your card easily
and send money some one just one click
</p>
<button class="btn">Read More</button>
</div>
</div>
</div>
</section>
<!-- saving money section end -->
<!-- how it works section start -->
<section id="how-it-works" class="relative bg-color-primary-light">
<div class="container py-20">
<div class="text-center mx-auto mb-20 md:w-1/2">
<h4 class="font-bold text-color-secondary mb-4 text-xl md:text-2xl">
How it works
</h4>
<p class="title mb-4">Grow Up Your Money Saving</p>
</div>

<div
class="flex flex-col items-center justify-between space-y-6 md:flex-row md:space-y-0 md:space-x-6"
>
<!-- card 1 -->
<div class="text-center cursor-pointer">
<div
class="relative bg-color-primary-dark inline-block px-6 py-3 rounded-lg cursor-pointer hover:bg-color-secondary ease-in duration-200"
>
<p class="text-6xl">1</p>
</div>
<h3 class="card-title">Install The App</h3>
<p class="leading-relaxed font-lobster tracking-widest">
We use an application designed a testing gnose to keep away
</p>
</div>
<!-- card 2 -->
<div class="text-center cursor-pointer">
<div
class="relative inline-block px-6 py-3 rounded-lg cursor-pointer bg-color-secondary ease-in duration-200"
>
<p class="text-6xl savingCard-number">2</p>
</div>
<h3 class="card-title">Setup your Profile</h3>
<p class="leading-relaxed font-lobster tracking-widest">
We use an application designed a testing gnose to keep away
</p>
</div>
<!-- card 3 -->
<div class="text-center cursor-pointer">
<div
class="relative bg-color-primary-dark inline-block px-6 py-3 rounded-lg cursor-pointer hover:bg-color-secondary ease-in duration-200"
>
<p class="text-6xl">3</p>
</div>
<h3 class="card-title">Enjoy The Features</h3>
<p class="leading-relaxed font-lobster tracking-widest">
We use an application designed a testing gnose to keep away
</p>
</div>
</div>
</div>
</section>
<!-- how it works section end -->
</main>
<!-- main section end -->

Expand Down
2 changes: 1 addition & 1 deletion tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ module.exports = {
container: {
center: true,
padding: {
DEFAULT: "20px",
DEFAULT: "30px",
md: "50px",
},
},
Expand Down

0 comments on commit 17e6538

Please sign in to comment.