From ca9a9f4ce1205a810b1a1bce8bd97a148ed61027 Mon Sep 17 00:00:00 2001 From: anup kumr Date: Tue, 4 Oct 2022 13:25:39 +0530 Subject: [PATCH] Responsive Landing page --- card.css | 95 ++- index.html | 1668 +++++++++++++++++++++++++++------------------------- style.css | 151 ++++- 3 files changed, 1097 insertions(+), 817 deletions(-) diff --git a/card.css b/card.css index e4d0357..820dace 100644 --- a/card.css +++ b/card.css @@ -3,16 +3,12 @@ width: 100%; margin-top: 30px; display: flex; + align-items: center; justify-content: space-around; flex-wrap: wrap; } -@media screen and (max-width:600px) { - .cards-list { - width: 80%; - /* flex-direction: column; */ - } -} + .card { margin: 30px; @@ -46,9 +42,14 @@ font-size: 20 px; margin-top: 3px; height: 40px; + color: white; + /* color: aqua; */ + /* line-height: 100px; */ } + + .card:hover { transform: scale(0.9, 0.9); box-shadow: 5px 5px 30px 15px rgba(0, 0, 0, 0.25), @@ -62,14 +63,84 @@ .title-black { color: rgb(250, 250, 250); } +@media screen and (max-width:1200px) { + + section{ + overflow-x: hidden; + + } + .scroller{ + overflow-x: scroll; + white-space:nowrap; + display: block; + margin: 0; + padding: 0; + } + .cards-list { + /* background-color: aqua; */ + display: block; + padding-left: 10px; + overflow-y: hidden; + overscroll-behavior-inline: contain; + margin: 0; + padding: 0; + + + + } + .cards-list{ + margin-top: 0; + } + .card { + margin: 0; + padding: 0; + height: 150px; + width: 150px; + margin: 30px; + display:inline-block; + box-shadow: 0px 0px 20px 1px; + /* display: inline-block; */ -@media all and (max-width: 560px) { - .card-list { - /* On small screens, we are no longer using row direction but column */ - flex-direction: column; } -} + ::-webkit-scrollbar{ + width: 0; +} +@media screen and (max-width:600px){ + .cards-list{ + + padding: 0; + margin-top: 0px; + } + .card { + /* padding-top: 30px; */ + height: 100px; + width: 100px; + box-shadow: 0px 0px 10px 3px; + /* box-shadow: 0; */ + margin-top: 10px; + border-radius: 20px; + display:inline-block; + } + .card .card_image{ + border-radius: 20px; + } + .card .card_image img{ + border-radius: 20px; + } + p{ + /* height: 100px; */ + /* width: 100px; */ + /* padding: 20px; */ + /* background-color: aqua; */ + display: flex; + text-align: center; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + +} /* .card { @@ -85,4 +156,4 @@ box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22); transition: 0.4s; } -*/ \ No newline at end of file +*/} \ No newline at end of file diff --git a/index.html b/index.html index f05e405..396a82e 100644 --- a/index.html +++ b/index.html @@ -125,17 +125,18 @@
- All Time Favourite +
All Time Favourite
-
-
+
+
+
@@ -148,7 +149,7 @@
@@ -161,7 +162,7 @@
@@ -182,7 +183,7 @@
@@ -192,7 +193,9 @@
-
+
+
+
@@ -234,696 +237,738 @@
+
+
+
BTS +
-
-
-
- -
-
-

Boy In Luv

-
-
-
-
- -
-
-

Save Me

-
-
-
-
- -
-
-

Blood Sweat & Tears

-
-
-
-
- -
-
-

MIC DROP

-
-
-
-
- -
-
-

Fake Love

-
-
-
-
-
-
- -
-
-

Dynamite

-
-
-
-
- -
-
-

Savage Love

-
-
-
-
- -
-
-

Boy With Luv

-
-
-
-
- -
-
-

Idol

-
-
-
-
- -
-
-

Life Goes On

-
-
-
-
-
-
- Korean -
- -
-
-
-
-
- -
-
-

TT

-
-
-
-
- -
-
-

Cheer Up

-
-
-
-
- -
-
-

More More

-
-
-
-
- -
-
-

I Can't Stop Me

-
-
-
-
- -
-
-

Blueming

-
-
-
-
-
-
- -
-
-

Bad Boy

-
-
-
-
- -
-
-

Icecream

-
-
-
-
- -
-
-

Hey You Like That

-
-
-
-
- -
-
-

Love Shot

-
-
-
-
- -
-
-

Momoland

-
-
-
-
-
-
- Hollywood -
- -
-
-
-
-
- -
-
-

Let Me Love You

-
-
-
-
- -
-
-

Baby

-
-
-
-
- -
-
-

Stay

-
-
-
-
- -
-
-

Aurora-Runaway

-
-
-
-
- -
-
-

Lovely

+
+
+
+
+ +
+
+

Boy In Luv

+
+
+
+
+ +
+
+

Save Me

+
+
+
+
+ +
+
+

Blood Sweat & Tears

+
+
+
+
+ +
+
+

MIC DROP

+
+
+
+
+ +
+
+

Fake Love

+
-
-
-
- -
-
-

Jalebi

-
-
-
-
- -
-
-

Belly Dancer

-
-
-
-
- -
-
-

I Love Cheapthrills

-
-
-
-
- -
-
-

Hymn For the Weekend

-
-
-
-
- + +
+
+
+
+ +
+
+

Dynamite

+
+
+
+
+ +
+
+

Savage Love

+
+
+
+
+ +
+
+

Boy With Luv

+
+
+
+
+ +
+
+

Idol

+
-
-

Maroon 5

+
+
+ +
+
+

Life Goes On

+
+
-
- Bollywood +
Korean
-
-
-
- -
-
-

Tujhe Kitna Chhahne Lage

-
-
-
-
- -
-
-

High Rated

-
-
-
-
- -
-
-

Paniyosa

-
-
-
-
- -
-
-

Naino ne Bandhi

-
-
-
-
- -
-
-

Soch na Sake

-
-
-
-
-
-
- -
-
-

Teri Meri Kahani

-
-
-
-
- -
-
-

ohh tere sang yaara

-
-
-
-
- -
-
-

Teri Galliyaan

-
-
-
-
- -
-
-

Vee Mahi

-
-
-
-
- -
-
-

Kesariya

-
-
-
-
-
-
- Hit Songs -
- -
-
-
-
-
- -
-
- -

Bhool Bhulaiya

 -
-
-
-
- -
-
- -

Lega Re

 -
-
-
-
- -
-
- -

Nacho Nacho

 -
-
-
-
- -
-
- -

Kaise Hua

 -
-
-
-
- -
-
- -

Coca Cola

 -
-
-
-
-
-
- -
-
- -

Rataan Lambiyan

 -
-
-
-
- -
-
-

Dilbar

 -
-
-
-
- -
-
- -

Saki Saki

 -
-
-
-
- -
-
- -

Tu chahiye

 +
+
+
+
+ +
+
+

TT

+
+
+
+
+ +
+
+

Cheer Up

+
+
+
+
+ +
+
+

More More

+
+
+
+
+ +
+
+

I Can't Stop Me

+
+
+
+
+ +
+
+

Blueming

+
-
-
- -
-
- -

chogada

 +
+ +
+
+
+
+ +
+
+

Bad Boy

+
+
+
+
+ +
+
+

Icecream

+
+
+
+
+ +
+
+

Hey You Like That

+
+
+
+
+ +
+
+

Love Shot

+
+
+
+
+ +
+
+

Momoland

+
+
- Old Songs +
Hollywood
+
+
+
+
+ +
+
+

Let Me Love You

+
+
+
+
+ +
+
+

Baby

+
+
+
+
+ +
+
+

Stay

+
+
+
+
+ +
+
+

Aurora-Runaway

+
+
+
+
+ +
+
+

Lovely

+
+
+
+
+
- +
-

gulabi aakhen

+

Jalebi

- +
-

Maine Pucha Chandse

+

Belly Dancer

- +
-

Tera Vada

+

I Love Cheapthrills

-

likhe jo Khatt

+

Hymn For the Weekend

- +
-

Yara Teri yaari

+

Maroon 5

-
-
-
- -
-
-

Pyaar hua Ikrar hua

-
+
+ +
+ +
+
+
Bollywood
+
+
-
-
- -
-
-

Ek Ladki ko dekha

+
+
+
+
+
+ +
+
+

Tujhe Kitna Chhahne

+
+
+
+
+ +
+
+

High Rated

+
+
+
+
+ +
+
+

Paniyosa

+
+
+
+
+ +
+
+

Naino ne Bandhi

+
+
+
+
+ +
+
+

Soch na Sake

+
-
-
- -
-
-

Gali mai Aaj Chand

+
+ +
+
+
+
+ +
+
+

Teri Meri Kahani

+
+
+
+
+ +
+
+

ohh tere sang yaara

+
+
+
+
+ +
+
+

Teri Galliyaan

+
+
+
+
+ +
+
+

Vee Mahi

+
+
+
+
+ +
+
+

Kesariya

+
+
+
+
+
+
+
Hit Songs
+
+
-
-
- +
+ +
+
+
+
+ +
+
+ +

Bhool Bhulaiya

 +
+
+
+
+ +
+
+ +

Lega Re

 +
+
+
+
+ +
+
+ +

Nacho Nacho

 +
+
+
+
+ +
+
+ +

Kaise Hua

 +
+
+
+
+ +
+
+ +

Coca Cola

 +
-
-

Tumjhse dekhte hi

+
+
+ +
+
+
+
+ +
+
+ +

Rataan Lambiyan

 +
+
+
+
+ +
+
+

Dilbar

 +
+
+
+
+ +
+
+ +

Saki Saki

 +
+
+
+
+ +
+
+ +

Tu chahiye

 +
+
+
+
+ +
+
+ +

chogada

 +
-
-
- +
+ +
+
+
+
Old Songs
+
+ +
+
+
+
+
+
+ +
+
+

gulabi aakhen

+
+
+
+
+ +
+
+

Maine Pucha Chandse

+
+
+
+
+ +
+
+

Tera Vada

+
+
+
+
+ +
+
+

likhe jo Khatt

+
+
+
+
+ +
+
+

Yara Teri yaari

+
-
-

Pyaar kiya toh drna ky

+
+
+ + + +
+
+
+
+ +
+
+

Pyaar hua Ikrar hua

+
+
+
+
+ +
+
+

Ek Ladki ko dekha

+
+
+
+
+ +
+
+

Gali mai Aaj Chand

+
+
+
+
+ +
+
+

Tumjhse dekhte hi

+
+
+
+
+ +
+
+

Pyaar kiya toh drna ky

+
+
- Patriotic Song +
Patriotic Song
-
-
-
- -
-
-

Namo Namo

-
-
-
-
- -
-
-

Teri mitti

-
-
-
-
- -
-
-

Mai ek din aunga

-
-
-
-
- -
-
-

vande mataram

-
-
-
-
- -
-
-

Aee vatan

-
-
-
-
-
-
- -
-
-

East or West

-
-
-
-
- -
-
-

mere desh ki dharti

-
-
-
-
- -
-
-

nanha munna rahi hoon

-
-
-
-
- -
-
-

ye desh h veer

-
-
-
-
- -
-
-

Oh mai na lauta

+ +
+
+
+
+ +
+
+

Namo Namo

+
+
+
+
+ +
+
+

Teri mitti

+
+
+
+
+ +
+
+

Mai ek din aunga

+
+
+
+
+ +
+
+

vande mataram

+
+
+
+
+ +
+
+

Aee vatan

+
+
+
+
+
+
+ +
+
+

East or West

+
+
+
+
+ +
+
+

mere desh ki dharti

+
+
+
+
+ +
+
+

nanha munna rahi hoon

+
+
+
+
+ +
+
+

ye desh h veer

+
+
+
+
+ +
+
+

Oh mai na lauta

+
+
- Trending Songs +
Trending Songs
-
-
-
- -
-
-

Sauda Khara Khara

-
-
-
-
- -
-
-

10 bahane

-
-
-
-
- -
-
-

Dil diyan Galla

-
-
-
-
- -
-
-

bom diggy

-
-
-
-
- -
-
-

Dheeme Dheeme

+
+
+
+
+ +
+
+

Sauda Khara Khara

+
+
+
+
+ +
+
+

10 bahane

+
+
+
+
+ +
+
+

Dil diyan Galla

+
+
+
+
+ +
+
+

bom diggy

+
+
+
+
+ +
+
+

Dheeme Dheeme

+
+
-
-
-
- -
-
-

Ghungroo

-
-
-
-
- -
-
-

Sanam re

-
-
-
- u -
- -
-
-

Vaste

-
-
-
-
- -
-
-

Filhal

-
-
-
-
- -
-
-

Oo pata nhi

+ + + + + +
+
+
+
+ +
+
+

Ghungroo

+
+
+
+
+ +
+
+

Sanam re

+
+
+
+ +
+ +
+
+

Vaste

+
+
+
+
+ +
+
+

Filhal

+
+
+
+
+ +
+
+

Oo pata nhi

+
+
-
+ diff --git a/style.css b/style.css index 692221e..13f65c4 100644 --- a/style.css +++ b/style.css @@ -307,7 +307,7 @@ body.dark .switch::before { flex-direction: column; position: relative; height: auto; - top: 50px; + /* top: px; */ left: 250px; width: calc(100% - 250px); background: var(--body-color); @@ -367,3 +367,152 @@ button.btn { left: 88px; width: calc(100% - 88px); } + +@media screen and (max-width:1200px){ + .home .text { + width: 100%; + height: 0px; + font-size: 20px; + + align-items: center; + padding: 30px; + display: flex; + margin-bottom: 20px; + /* background-color: #00a037; */ + + /* padding: 90px 40px; */ + /* margin-right: 300px; */ + } + .catagory{ + flex:1; + + /* background-color: #00a037; */ + } + .count{ + flex: 1; + align-items: flex-end; + justify-content: flex-end; + + /* background-color: #00a037; */ + /* padding-left: 50%; */ + /* margin-left: auto; */ + } + button { + padding: 15px 10px; + width: 30%; + /* float:right; */ + + margin: 0; + /* margin-left: 80%; */ + font-size: 15px; + } + + button.btn { + /* margin-left: 70%; */ + color: #ed0000; + box-shadow: inset 10px 10px 10px -1px rgba(10, 99, 169, 0.16), + inset -10px -10px 10px -1px rgba(255, 255, 255, 0.7); + } + +} + +@media screen and (max-width:650px){ + .sidebar{ + width: 100%; + } + .toggle{ + margin-right: 20px; + margin-top: 40px; + } + .home .text{ + /* background-color: #18191a; */ + width: 100%; + + /* margin: auto; */ + display: flex; + align-items: center; + + justify-content:space-between; + } + .catagory{ + min-width: 70px; + flex:1; + + } + + .count{ + flex: 1; + margin-left: 300px; + /* background-color: #00a037; */ + margin-left: 20px; + /* padding-left: 50%; */ + /* margin-left: auto; */ + } + button { + padding: 10px 50px; + font-size: 10px; + padding-right:70px ; + color: #ed0000; + + } + + button.btn { + /* margin-left: 10%; */ + margin-right: -10px; + /* width: 10%; */ + color: #ed0000; + box-shadow: inset 10px 10px 10px -1px rgba(10, 99, 169, 0.16), + inset -10px -10px 10px -1px rgba(255, 255, 255, 0.7); + } +} + +@media screen and (max-width:400px){ + .home .text{ + font-size: 15px; + } + button { + padding: 10px 40px; + + font-size: 10px; + padding-right:60px ; + color: #ed0000; + + } + + button.btn { + /* margin-left: 10%; */ + margin-right: -20px; + /* width: 10%; */ + + } + + +} + +@media screen and (max-width:337px){ + + .catagory{ + min-width: 20px; + flex:1; + font-size: 10px; + + } + button { + padding: 10px 20px; + + font-size: 8px; + + /* padding-right:60px ; */ + color: #ed0000; + + } + + button.btn { + /* margin-left: 10%; */ + padding-right: 35px; + margin-right: -20px; + /* width: 10%; */ + + } + +}