Skip to content

Commit

Permalink
Updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@chandraprakash-pandey
chandraprakash-pandey committed Jun 14, 2024
1 parent c7dd9ce commit 206cc44
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 112 deletions.
63 changes: 39 additions & 24 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,24 @@
<div class="border-l-2 border-black pl-6 hidden min-[858px]:block">
<div class="flex items-center gap-4">
<img src="images/xbox.png" alt="xbox" class="h-6">
<span class="text-[0.8rem] text-slate-800 hover:border-b-[3px] hover:border-black cursor-pointer">Game Pass &vee;</span>
<span class="text-[0.8rem] text-slate-800 hover:border-b-[3px] hover:border-black cursor-pointer">Games &vee;</span>
<span class="text-[0.8rem] text-slate-800 hover:border-b-[3px] hover:border-black cursor-pointer">Devices &vee;</span>
<span class="text-[0.8rem] text-slate-800 hover:border-b-[3px] hover:border-black cursor-pointer">Play &vee;</span>
<span class="text-[0.8rem] text-slate-800 hover:border-b-[3px] hover:border-black cursor-pointer">Store &vee;</span>
<span class="text-[0.8rem] text-slate-800 hover:border-b-[3px] hover:border-black cursor-pointer">Community &vee;</span>
<span class="text-[0.8rem] text-slate-800 hover:border-b-[3px] hover:border-black cursor-pointer">Support &vee;</span>
<span class="text-[0.8rem] text-slate-800 hover:border-b-[3px] hover:border-black cursor-pointer">My Xbox &vee;</span>
<span class="text-[0.8rem] text-slate-800 hover:border-b-[3px] hover:border-black cursor-pointer">More &vee;</span>
<span class="text-[0.8rem] text-slate-800 cursor-pointer anime">Game Pass &vee;</span>
<!-- <div class="h-[2px] bg-black anime_d"></div> -->
<span class="text-[0.8rem] text-slate-800 cursor-pointer anime">Games &vee;</span>
<!-- <div class="h-[2px] bg-black anime_d"></div> -->
<span class="text-[0.8rem] text-slate-800 cursor-pointer anime">Devices &vee;</span>
<!-- <div class="h-[2px] bg-black anime_d"></div> -->
<span class="text-[0.8rem] text-slate-800 cursor-pointer anime">Play &vee;</span>
<!-- <div class="h-[2px] bg-black anime_d"></div> -->
<span class="text-[0.8rem] text-slate-800 cursor-pointer anime">Store &vee;</span>
<!-- <div class="h-[2px] bg-black anime_d"></div> -->
<span class="text-[0.8rem] text-slate-800 cursor-pointer anime">Community &vee;</span>
<!-- <div class="h-[2px] bg-black anime_d"></div> -->
<span class="text-[0.8rem] text-slate-800 cursor-pointer anime">Support &vee;</span>
<!-- <div class="h-[2px] bg-black anime_d"></div> -->
<span class="text-[0.8rem] text-slate-800 cursor-pointer anime">My Xbox &vee;</span>
<!-- <div class="h-[2px] bg-black anime_d"></div> -->
<span class="text-[0.8rem] text-slate-800 cursor-pointer anime">More &vee;</span>
<!-- <div class="h-[2px] bg-black anime_d"></div> -->
</div>
</div>
<div class="p-4 flex items-center gap-3">
Expand All @@ -57,45 +66,51 @@
<hr>
<!-- end -->
<!-- cod -->
<div class="h-[56rem] bg-[url('./images/cod.webp')] bg-no-repeat bg-center bg-cover relative">
<div class="h-[56rem] bg-gradient-to-b from-transparent to-black opacity-1 z-0 flex justify-center items-center relative">
<div class="flex justify-center items-center flex-col w-[90%] text-white text-center absolute top-[50%]">
<div class="bg-yellow-400 text-black text-sm font-bold px-2">PLAY DAY ONE WITH GAME PASS</div>
<h1 class="text-5xl font-bold my-4 text-center">Call of Duty®:<br>Black Ops 6
<div class="h-[56rem] bg-[url('./images/cod.webp')] bg-no-repeat bg-center bg-cover relative min-[858px]:h-[35rem]">
<div class="h-[56rem] bg-gradient-to-b from-transparent to-black opacity-1 min-[858px]:h-[35rem]">
<div class="flex justify-center max-[858px]:items-center flex-col w-[90%] text-white text-center absolute max-[858px]:top-[40%] left-[5%] min-[858px]:w-[35%] min-[858px]:left-[60%] min-[858px]:text-left min-[858px]:h-[35rem]">
<div><span class="bg-yellow-400 text-black text-sm font-bold px-2">PLAY DAY ONE WITH GAME PASS</span></div>
<h1 class="text-5xl font-bold my-4 ">Call of Duty®:<br>Black Ops 6
</h1>
<p class="text-4xl mb-7">Forced to go rogue. Hunted from within. This is Black Ops 6.</p>
<div class="flex gap-0 mt-2 flex-col">
<div class="flex gap-0 mt-2 flex-col min-[858px]:flex-row min-[858px]:justify-start">
<button class="bg-[#9bf00b] text-black px-5 py-1 font-extrabold">PRE-ORDER NOW ></button>
<button class="bg-transparent text-[#9bf00b] px-5 py-1 font-extrabold">JOIN GAME PASS ></button>
</div>
</div>
</div>
</div>
<!-- end -->
<div class="my-8 grid grid-rows-2 grid-cols-3">
<div class="my-8 grid grid-rows-2 grid-cols-3 min-[858px]:flex min-[858px]:justify-evenly min-[858px]:px-12">
<div class="flex flex-col items-center anime">
<img src="https://assets.xboxservices.com/assets/37/ec/37ec5a7a-08b4-466f-93e3-81fb5dd0b471.svg?n=Homepage-FY20_Home-Icons-0_XGP_72x56-01.svg" alt="Game Pass" class="h-14">
<p class="font-medium text-[#107c10] animep">GAME PASS</p>
<p class="font-medium text-[#107c10] ">GAME PASS</p>
<div class="h-[2px] anime_d"></div>
</div>
<div class="flex flex-col items-center m-0 p-0 anime">
<div class="flex flex-col items-center anime">
<img src="https://assets.xboxservices.com/assets/e2/a8/e2a830ea-71e7-42fa-af94-7a07d66f150e.svg?n=Homepage-FY20_Home-Icons-0_Games_72x56-01.svg" alt="Game Pass" class="h-14">
<p class="font-medium text-[#107c10] anime_done m-0 p-0 animep">GAMES</p>
<p class="font-medium text-[#107c10] m-0 p-0">GAMES</p>
<div class="h-[2px] anime_d"></div>
</div>
<div class="flex flex-col items-center anime anime">
<div class="flex flex-col items-center anime">
<img src="https://assets.xboxservices.com/assets/12/74/12744081-03f9-42a4-87be-e869ddce3327.svg?n=Homepage-FY20_Home-Icons-0_Consoles_72x56-02.svg" alt="Game Pass" class="h-14">
<p class="font-medium text-[#107c10] animep">CONSOLES</p>
<p class="font-medium text-[#107c10] ">CONSOLES</p>
<div class="h-[2px] anime_d"></div>
</div>
<div class="flex flex-col items-center anime">
<img src="https://assets.xboxservices.com/assets/29/ff/29ffa9b2-2d48-433b-abb7-99229bcbaa8b.svg?n=Homepage-FY20_Home-Icons-0_Accessories_72x56-01.svg" alt="Game Pass" class="h-14">
<p class="font-medium text-[#107c10] animep">ACCESSORIES</p>
<p class="font-medium text-[#107c10]">ACCESSORIES</p>
<div class="h-[2px] anime_d"></div>
</div>
<div class="flex flex-col items-center anime">
<img src="https://assets.xboxservices.com/assets/b0/5e/b05eb3af-fda3-481c-8edc-585eb33b864a.svg?n=Homepage-FY20_Home-Icons-0_Play_72x56_02.svg" alt="Game Pass" class="h-14">
<p class="font-medium text-[#107c10] animep">PLAY</p>
<p class="font-medium text-[#107c10]">PLAY</p>
<div class="h-[2px] anime_d"></div>
</div>
<div class="flex flex-col items-center anime">
<img src="https://assets.xboxservices.com/assets/30/ab/30abec76-ab4c-4275-b0ca-725a6eb2f85f.svg?n=Homepage-FY20_Home-Icons-0_Sign-In_72x56-01.svg" alt="Game Pass" class="h-14">
<p class="font-medium text-[#107c10] animep">GAME PASS</p>
<p class="font-medium text-[#107c10]">GAME PASS</p>
<div class="h-[2px] anime_d"></div>
</div>
</div>

Expand Down
15 changes: 14 additions & 1 deletion input.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,16 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind utilities;

.anime_d{
width: 0px;
transition: 0.5s;
background-color: #107c10;
}

.anime:hover{
.anime_d{
width: 100%;
/* transition: 0.5s; */
}
}
137 changes: 50 additions & 87 deletions output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -566,12 +566,8 @@ video {
bottom: 3rem;
}

.top-\[50\%\] {
top: 50%;
}

.z-0 {
z-index: 0;
.left-\[5\%\] {
left: 5%;
}

.m-0 {
Expand Down Expand Up @@ -656,6 +652,10 @@ video {
height: 20rem;
}

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

.h-\[38rem\] {
height: 38rem;
}
Expand All @@ -680,20 +680,6 @@ video {
width: 100%;
}

.w-8 {
width: 2rem;
}

.rotate-90 {
--tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180 {
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer {
cursor: pointer;
}
Expand Down Expand Up @@ -726,10 +712,6 @@ video {
gap: 0px;
}

.gap-5 {
gap: 1.25rem;
}

.gap-3 {
gap: 0.75rem;
}
Expand All @@ -738,18 +720,14 @@ video {
gap: 1rem;
}

.gap-8 {
gap: 2rem;
.gap-5 {
gap: 1.25rem;
}

.rounded-md {
border-radius: 0.375rem;
}

.border {
border-width: 1px;
}

.border-l-2 {
border-left-width: 2px;
}
Expand Down Expand Up @@ -875,19 +853,10 @@ video {
padding-bottom: 0.25rem;
}

.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}

.pl-5 {
padding-left: 1.25rem;
}

.pl-7 {
padding-left: 1.75rem;
}

.pl-6 {
padding-left: 1.5rem;
}
Expand All @@ -911,6 +880,10 @@ video {
line-height: 1;
}

.text-\[0\.8rem\] {
font-size: 0.8rem;
}

.text-base {
font-size: 1rem;
line-height: 1.5rem;
Expand All @@ -926,15 +899,6 @@ video {
line-height: 1.25rem;
}

.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}

.text-\[0\.8rem\] {
font-size: 0.8rem;
}

.font-bold {
font-weight: 700;
}
Expand Down Expand Up @@ -962,35 +926,27 @@ video {
color: rgb(0 0 0 / var(--tw-text-opacity));
}

.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}

.text-\[0\.8re\] {
color: 0.8re;
}

.text-slate-600 {
--tw-text-opacity: 1;
color: rgb(71 85 105 / var(--tw-text-opacity));
}

.text-slate-800 {
--tw-text-opacity: 1;
color: rgb(30 41 59 / var(--tw-text-opacity));
}

.hover\:border-b:hover {
border-bottom-width: 1px;
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}

.hover\:border-b-2:hover {
border-bottom-width: 2px;
.anime_d{
width: 0px;
transition: 0.5s;
background-color: #107c10;
}

.hover\:border-b-4:hover {
border-bottom-width: 4px;
.anime:hover{
.anime_d{
width: 100%;
/* transition: 0.5s; */
}
}

.hover\:border-b-\[3px\]:hover {
Expand All @@ -1002,17 +958,21 @@ video {
border-color: rgb(0 0 0 / var(--tw-border-opacity));
}

.hover\:border-b-\[\]:hover {
border-bottom-color: ;
}

@media (max-width: 858px) {
.max-\[858px\]\:hidden {
display: none;
.max-\[858px\]\:top-\[40\%\] {
top: 40%;
}

.max-\[858px\]\:items-center {
align-items: center;
}
}

@media (min-width: 858px) {
.min-\[858px\]\:left-\[60\%\] {
left: 60%;
}

.min-\[858px\]\:block {
display: block;
}
Expand All @@ -1029,12 +989,20 @@ video {
display: none;
}

.min-\[858px\]\:h-\[35rem\] {
height: 35rem;
}

.min-\[858px\]\:w-\[35\%\] {
width: 35%;
}

.min-\[858px\]\:w-full {
width: 100%;
}

.min-\[858px\]\:items-center {
align-items: center;
.min-\[858px\]\:flex-row {
flex-direction: row;
}

.min-\[858px\]\:justify-start {
Expand All @@ -1045,9 +1013,8 @@ video {
justify-content: space-between;
}

.min-\[858px\]\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
.min-\[858px\]\:justify-evenly {
justify-content: space-evenly;
}

.min-\[858px\]\:px-12 {
Expand All @@ -1060,15 +1027,11 @@ video {
padding-right: 3.5rem;
}

.min-\[858px\]\:pr-6 {
padding-right: 1.5rem;
}

.min-\[858px\]\:pr-4 {
padding-right: 1rem;
}

.min-\[858px\]\:pr-3 {
padding-right: 0.75rem;
}

.min-\[858px\]\:text-left {
text-align: left;
}
}

0 comments on commit 206cc44

Please sign in to comment.