Skip to content

Commit

Permalink
Merge pull request #412 from Ibrangrd/video_page_res
Browse files Browse the repository at this point in the history 
Make Variants page responsive.
  • Loading branch information
@aslams2020
aslams2020 authored Nov 9, 2024
2 parents 033dc31 + 40f3e29 commit 014b77d
Show file tree
Hide file tree
Showing 2 changed files with 232 additions and 404 deletions.
350 changes: 22 additions & 328 deletions variants.css
View file
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

0 comments on commit 014b77d

Please sign in to comment.