Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make Variants page responsive. #412

Merged
merged 2 commits into from
Nov 9, 2024
Merged

Make Variants page responsive. #412

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cc4a557
Make Variants
Ibrangrd Nov 8, 2024
40f3e29
Merge branch 'main' into video_page_res
Ibrangrd Nov 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
350 changes: 22 additions & 328 deletions variants.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,14 +251,14 @@ body {
box-shadow: 0px 8 px;
}
.variantsmem {
#mem1 {
#mem {
margin-top: 20px;
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
.vitems1 {
.vitems {
position: relative;
background-color: black;
border: 0px 0px 8px rgb(0, 0, 0);
Expand All @@ -270,352 +270,31 @@ body {
border: 13px solid black;
transition: 0.5s;
}
.vitems1:hover {
.vitems:hover {
transform: scale(1.15);
}
.vitems1 img {
.vitems img {
width: 100%;
height: 75%;
object-fit: cover;
transition: 0.5s ease;
border-radius: 12px 12px;
}
#title1 {
#title {
color: rgb(252, 252, 252);
text-align: center;
font-family: "Alkatra", cursive;
}
}
.vitems1 button {
.vitems button {
color: rgb(255, 252, 252) rgb(255, 255, 255) rgb(250, 250, 250);
border-radius: 5px 5px;
cursor: pointer;
}
.vitems1 p {
.vitems p {
color: white;
}

#mem2 {
margin-top: 20px;
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
.vitems2 {
position: relative;
background-color: black;
border: 0px 0px 8px rgb(0, 0, 0);
border-radius: 12px 12px;
width: 600px;
box-shadow: 2px;
height: 350px;
margin: 10px;
border: 13px solid black;
transition: 0.5s;
}
.vitems2:hover {
transform: scale(1.15);
}
.vitems2 img {
width: 100%;
height: 75%;
object-fit: cover;
transition: 0.5s ease;
border-radius: 12px 12px;
}
#title2 {
color: rgb(252, 252, 252);
text-align: center;
font-family: "Alkatra", cursive;
}
.vitems2 button {
color: rgb(255, 252, 252) rgb(255, 255, 255) rgb(250, 250, 250);
border-radius: 5px 5px;
cursor: pointer;
}

#mem3 {
margin-top: 20px;
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
.vitems3 {
position: relative;
background-color: black;
border: 0px 0px 8px rgb(0, 0, 0);
border-radius: 12px 12px;
width: 600px;
box-shadow: 2px;
height: 350px;
margin: 10px;
border: 13px solid black;
transition: 0.5s;
}
.vitems3:hover {
transform: scale(1.15);
}
.vitems3 img {
width: 100%;
height: 75%;
object-fit: cover;
transition: 0.5s ease;
border-radius: 12px 12px;
}
#title3 {
color: rgb(252, 252, 252);
text-align: center;
font-family: "Alkatra", cursive;
}
.vitems3 button {
color: rgb(255, 252, 252) rgb(255, 255, 255) rgb(250, 250, 250);
border-radius: 5px 5px;
cursor: pointer;
}

#mem4 {
margin-top: 20px;
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
.vitems4 {
position: relative;
background-color: black;
border: 0px 0px 8px rgb(0, 0, 0);
border-radius: 12px 12px;
width: 600px;
box-shadow: 2px;
height: 350px;
margin: 10px;
border: 13px solid black;
transition: 0.5s;
}
.vitems4:hover {
transform: scale(1.15);
}
.vitems4 img {
width: 100%;
height: 75%;
object-fit: cover;
transition: 0.5s ease;
border-radius: 12px 12px;
}
#title4 {
color: rgb(252, 252, 252);
text-align: center;
font-family: "Alkatra", cursive;
}
.vitems4 button {
color: rgb(255, 252, 252) rgb(255, 255, 255) rgb(250, 250, 250);
border-radius: 5px 5px;
cursor: pointer;
}

#mem5 {
margin-top: 20px;
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
.vitems5 {
position: relative;
background-color: black;
border: 0px 0px 8px rgb(0, 0, 0);
border-radius: 12px 12px;
width: 600px;
box-shadow: 2px;
height: 350px;
margin: 10px;
border: 13px solid black;
transition: 0.5s;
}
.vitems5:hover {
transform: scale(1.15);
}
.vitems5 img {
width: 100%;
height: 75%;
object-fit: cover;
transition: 0.5s ease;
border-radius: 12px 12px;
}
#title5 {
color: rgb(252, 252, 252);
text-align: center;
font-family: "Alkatra", cursive;
}
.vitems5 button {
color: rgb(255, 252, 252) rgb(255, 255, 255) rgb(250, 250, 250);
border-radius: 5px 5px;
cursor: pointer;
}

#mem6 {
margin-top: 20px;
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
.vitems6 {
position: relative;
background-color: black;
border: 0px 0px 8px rgb(0, 0, 0);
border-radius: 12px 12px;
width: 600px;
box-shadow: 2px;
height: 350px;
margin: 10px;
border: 13px solid black;
transition: 0.5s;
}
.vitems6:hover {
transform: scale(1.15);
}
.vitems6 img {
width: 100%;
height: 75%;
object-fit: cover;
transition: 0.5s ease;
border-radius: 12px 12px;
}
#title6 {
color: rgb(252, 252, 252);
text-align: center;
font-family: "Alkatra", cursive;
}

.vitems6 button {
color: rgb(255, 252, 252) rgb(255, 255, 255) rgb(250, 250, 250);
border-radius: 5px 5px;
cursor: pointer;
}

#mem7 {
margin-top: 20px;
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
.vitems7 {
position: relative;
background-color: black;
border: 0px 0px 8px rgb(0, 0, 0);
border-radius: 12px 12px;
width: 600px;
box-shadow: 2px;
height: 350px;
margin: 10px;
border: 13px solid black;
transition: 0.5s;
}
.vitems7:hover {
transform: scale(1.15);
}
.vitems7 img {
width: 100%;
height: 75%;
object-fit: cover;
transition: 0.5s ease;
border-radius: 12px 12px;
}
#title7 {
color: rgb(252, 252, 252);
text-align: center;
font-family: "Alkatra", cursive;
}
.vitems7 button {
color: rgb(255, 252, 252) rgb(255, 255, 255) rgb(250, 250, 250);
border-radius: 5px 5px;
cursor: pointer;
}

#mem8 {
margin-top: 20px;
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
.vitems8 {
position: relative;
background-color: black;
border: 0px 0px 8px rgb(0, 0, 0);
border-radius: 12px 12px;
width: 600px;
box-shadow: 2px;
height: 350px;
margin: 10px;
border: 13px solid black;
transition: 0.5s;
}
.vitems8:hover {
transform: scale(1.15);
}
.vitems8 img {
width: 100%;
height: 75%;
object-fit: cover;
transition: 0.5s ease;
border-radius: 12px 12px;
}
#title8 {
color: rgb(252, 252, 252);
text-align: center;
font-family: "Alkatra", cursive;
}
.vitems8 button {
color: rgb(255, 252, 252) rgb(255, 255, 255) rgb(250, 250, 250);
border-radius: 5px 5px;
cursor: pointer;
}

#mem9 {
margin-top: 20px;
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
.vitems9 {
position: relative;
background-color: black;
border: 0px 0px 8px rgb(0, 0, 0);
border-radius: 12px 12px;
width: 600px;
box-shadow: 2px;
height: 350px;
margin: 10px;
border: 13px solid black;
transition: 0.5s;
}
.vitems9:hover {
transform: scale(1.15);
}
.vitems9 img {
width: 100%;
height: 75%;
object-fit: cover;
transition: 0.5s ease;
border-radius: 12px 12px;
}
#title9 {
color: rgb(252, 252, 252);
text-align: center;
font-family: "Alkatra", cursive;
}

.vitems9 button {
color: rgb(255, 252, 252) rgb(255, 255, 255) rgb(250, 250, 250);
border-radius: 5px 5px;
cursor: pointer;
}
#BacktoTop {
display: block;
/* Ensure the button is part of the layout */
Expand Down Expand Up @@ -686,3 +365,18 @@ height: 100%;
background-image: linear-gradient(to right,red,orange);
z-index: 100;
}
@media(max-width:480px)
{


#heading {
font-size: 50px;
}
.variantsmem {
.vitems {
width: 350px;
height: 300px;
}
}

}
Loading