Skip to content

Commit

Permalink
v2.2 add responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@sakibmouin
sakibmouin committed Feb 5, 2024
1 parent 2b7fdd1 commit e7a7735
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 32 deletions.
56 changes: 35 additions & 21 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
</head>
<body class="bg-white text-white font-dm">
<!-- Header Section -->
<header id="header" class="z-10">
<header id="header" class="z-10 hidden lg:block">
<nav
class="py-[15px] px-[80px] flex justify-between items-center font-dm text-[18px] bg-blue"
>
Expand Down Expand Up @@ -126,7 +126,7 @@
<!-- Section 1: Landing -->
<section
id="sec1"
class="hero flex w-full justify-center py-24 border-b-2 md:border-b-0"
class="hero flex w-full justify-center py-24 border-b-2 lg:border-b-0"
>
<div
class="sec1container flex flex-wrap justify-center flex-col items-center"
Expand All @@ -138,7 +138,7 @@
src="./public/sjij-logo.svg"
alt="Sheikh Jamal Innovation Grant
Logo"
class="block md:h-[370px] scaleup"
class="block h-28 md:h-48 lg:h-[370px] scaleup"
draggable="false"
loading="lazy"
/>
Expand All @@ -152,7 +152,9 @@
class="flex justify-center items-center py-10 text-black"
>
<!-- Container for content -->
<div class="content flex flex-col gap-5 justify-between mx-72 py-10">
<div
class="content flex flex-col gap-5 justify-between mx-4 md:mx-8 lg:mx-72 py-10"
>
<div class="text-left text-[40px] font-normal font-square uppercase">
SHEIKH JAMAL INNOVATION GRANT 2023 AT A GLANCE
</div>
Expand Down Expand Up @@ -185,7 +187,9 @@
class="flex flex-col justify-center items-center py-10 text-white"
>
<!-- Container for content -->
<div class="content flex flex-col gap-5 justify-between mx-72 py-10">
<div
class="content flex flex-col gap-5 justify-between mx-4 md:mx-8 lg:mx-72 py-10"
>
<div class="text-left text-[40px] font-normal font-square uppercase">
OBJECTIVE
</div>
Expand All @@ -198,7 +202,9 @@
prosperous Bangladesh.
</div>
</div>
<div class="content flex flex-col gap-5 justify-between mx-72 py-10">
<div
class="content flex flex-col gap-5 justify-between mx-4 md:mx-8 lg:mx-72 py-10"
>
<div class="text-left text-[40px] font-normal font-square uppercase">
ROADMAP
</div>
Expand Down Expand Up @@ -229,7 +235,9 @@
class="flex justify-center items-center py-10 text-black"
>
<!-- Container for content -->
<div class="content flex flex-col gap-5 justify-between mx-72 py-10">
<div
class="content flex flex-col gap-5 justify-between mx-4 md:mx-8 lg:mx-72 py-10"
>
<div class="text-left text-[40px] font-normal font-square uppercase">
WHO CAN APPLY?
</div>
Expand All @@ -250,7 +258,9 @@
class="flex justify-center items-center py-10 text-black"
>
<!-- Container for content -->
<div class="content flex flex-col gap-5 justify-between mx-72 py-10">
<div
class="content flex flex-col gap-5 justify-between mx-4 md:mx-8 lg:mx-72 py-10"
>
<div class="text-left text-[40px] font-normal font-square uppercase">
Selection Process and Steps
</div>
Expand Down Expand Up @@ -278,7 +288,9 @@
<!-- Section 7: TERMS AND CONDITIONS -->
<section id="sec7" class="flex justify-center items-center py-10">
<!-- Container for content -->
<div class="content flex flex-col gap-5 justify-between mx-72 py-10">
<div
class="content flex flex-col gap-5 justify-between mx-4 md:mx-8 lg:mx-72 py-10"
>
<div class="text-left text-[40px] font-normal font-square uppercase">
TERMS AND CONDITIONS
</div>
Expand Down Expand Up @@ -357,7 +369,9 @@
class="flex justify-center items-center py-10 text-black"
>
<!-- Container for content -->
<div class="content flex flex-col gap-5 justify-between mx-72 py-10">
<div
class="content flex flex-col gap-5 justify-between mx-4 md:mx-8 lg:mx-72 py-10"
>
<div class="text-left text-[40px] font-normal font-square uppercase">
PITCH DECK GUIDELINE
</div>
Expand Down Expand Up @@ -432,10 +446,10 @@
</section>

<!-- Section 9 -->
<section id="sec9" class="flex justify-center items-center md:h-auto py-16">
<section id="sec9" class="flex justify-center items-center lg:h-auto py-16">
<!-- Container for content with a flex layout -->
<div
class="flex flex-col justify-center items-center w-full px-4 md:w-[836px]"
class="flex flex-col justify-center items-center w-full px-4 lg:w-[836px]"
>
<div
class="font-bahn text-base mb-5 max-w-[602px] text-center px-[72px]"
Expand All @@ -448,7 +462,7 @@
id="apply"
href="./apply"
target="_blank"
class="px-3 py-2 bg-emerald-900 bg-opacity-100 shadow-inner border border-white backdrop-blur-[10px] text-white text-xl md:text-2xl font-bold font-bahn uppercase"
class="px-3 py-2 bg-emerald-900 bg-opacity-100 shadow-inner border border-white backdrop-blur-[10px] text-white text-xl lg:text-2xl font-bold font-bahn uppercase"
>
Apply Now
</a>
Expand All @@ -459,21 +473,21 @@
<section class="bg-blue">
<footer
id="footer"
class="bg-green bg-opacity-30 flex flex-col justify-center items-center py-3 md:py-5"
class="bg-green bg-opacity-30 flex flex-col justify-center items-center py-3 lg:py-5"
>
<div
class="text-[18px] md:text-[40px] font-square font-bold pb-3 md:pb-5 uppercase tracking-[4px]"
class="text-[18px] md:text-2xl lg:text-[40px] font-square font-bold pb-3 lg:pb-5 uppercase tracking-[4px]"
>
Sheikh Jamal Innovation Grant
</div>
<div class="flex gap-4 pb-3 md:pb-5">
<div class="flex gap-4 pb-3 lg:pb-5">
<a href="https://www.facebook.com/drmcitclub" target="_blank">
<img
src="./public/fb_icon.svg"
alt="Facebook Icon"
draggable="false"
loading="lazy"
class="h-[26px] md:h-auto"
class="h-[26px] lg:h-auto"
/>
</a>
<a href="https://www.instagram.com/drmcitclub" target="_blank">
Expand All @@ -482,7 +496,7 @@
alt="Instagram Icon"
draggable="false"
loading="lazy"
class="h-[26px] md:h-auto"
class="h-[26px] lg:h-auto"
/>
</a>
<a
Expand All @@ -494,11 +508,11 @@
alt="GitHub Icon"
draggable="false"
loading="lazy"
class="h-[26px] md:h-auto"
class="h-[26px] lg:h-auto"
/>
</a>
</div>
<div id="copyright" class="text-[7px] md:text-[10px]">
<div id="copyright" class="text-[7px] lg:text-[10px]">
© Copyright
<span class="font-bold uppercase">Sheikh Jamal Innovation Grant</span>
. All Rights Reserved
Expand All @@ -511,7 +525,7 @@
id="apply"
href="./apply"
target="_blank"
class="px-3 py-2 bg-emerald-900 bg-opacity-100 shadow-inner border border-white backdrop-blur-[10px] text-white text-xl md:text-2xl font-bold font-bahn uppercase"
class="px-3 py-2 bg-emerald-900 bg-opacity-100 shadow-inner border border-white backdrop-blur-[10px] text-white text-xl lg:text-2xl font-bold font-bahn uppercase"
>
Apply Now
</a>
Expand Down
91 changes: 80 additions & 11 deletions output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -610,9 +610,9 @@ video {
z-index: 10;
}

.mx-72 {
margin-left: 18rem;
margin-right: 18rem;
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}

.mx-\[82px\] {
Expand Down Expand Up @@ -653,6 +653,10 @@ video {
display: none;
}

.h-28 {
height: 7rem;
}

.h-\[26px\] {
height: 26px;
}
Expand Down Expand Up @@ -1283,6 +1287,21 @@ body {
background-size: 500px, cover;
}

@media screen and (max-width: 1024px) {
#sec1 {
background-color: var(--blue);
background-image: none;
background-position: bottom right;
background-repeat: no-repeat;
background-size: 500px, cover;
}

#sec9 {
background-color: var(--blue);
background-image: none;
}
}

#copyright {
color: var(--green);
opacity: 0.7;
Expand Down Expand Up @@ -1600,12 +1619,17 @@ body * {
}

@media (min-width: 768px) {
.md\:h-\[172px\] {
height: 172px;
.md\:mx-8 {
margin-left: 2rem;
margin-right: 2rem;
}

.md\:h-\[370px\] {
height: 370px;
.md\:h-48 {
height: 12rem;
}

.md\:h-\[172px\] {
height: 172px;
}

.md\:h-\[376px\] {
Expand Down Expand Up @@ -1690,17 +1714,62 @@ body * {
font-size: 32px;
}

.md\:text-\[40px\] {
font-size: 40px;
}

.md\:backdrop-blur-sm {
--tw-backdrop-blur: blur(4px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
}

@media (min-width: 1024px) {
.lg\:mx-72 {
margin-left: 18rem;
margin-right: 18rem;
}

.lg\:block {
display: block;
}

.lg\:h-\[370px\] {
height: 370px;
}

.lg\:h-auto {
height: auto;
}

.lg\:w-\[836px\] {
width: 836px;
}

.lg\:border-b-0 {
border-bottom-width: 0px;
}

.lg\:py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}

.lg\:pb-5 {
padding-bottom: 1.25rem;
}

.lg\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}

.lg\:text-\[10px\] {
font-size: 10px;
}

.lg\:text-\[40px\] {
font-size: 40px;
}
}

.peer:focus ~ .rtl\:peer-focus\:left-auto:where([dir="rtl"], [dir="rtl"] *) {
left: auto;
}
Expand Down
15 changes: 15 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,21 @@ body {
background-size: 500px, cover;
}

@media screen and (max-width: 1024px) {
#sec1 {
background-color: var(--blue);
background-image: none;
background-position: bottom right;
background-repeat: no-repeat;
background-size: 500px, cover;
}

#sec9 {
background-color: var(--blue);
background-image: none;
}
}

#copyright {
color: var(--green);
opacity: 0.7;
Expand Down

0 comments on commit e7a7735

Please sign in to comment.