-
-
Save Ladyprowess/ce8322ac5fceb59ec934644bda1d7df2 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
} | |
html { | |
scroll-behavior: smooth; | |
} | |
header { | |
display: flex; | |
justify-content: space-evenly; | |
align-items: center; | |
height: 60px; | |
width: 100%; | |
background: black; | |
} | |
.heading ul { | |
display: flex; | |
} | |
.logo a { | |
color: white; | |
transition-duration: 1s; | |
font-weight: 800; | |
} | |
.logo a:hover { | |
color: rgb(6, 72, 240); | |
transition-duration: 1s; | |
} | |
.heading ul li { | |
list-style: none; | |
} | |
.heading ul li a { | |
margin: 5px; | |
text-decoration: none; | |
color: black; | |
font-weight: 500; | |
position: relative; | |
color: white; | |
margin: 2px 14px; | |
font-size: 18px; | |
transition-duration: 1s; | |
} | |
.heading ul li a:active { | |
color: red; | |
} | |
.heading ul li a:hover { | |
color: rgb(6, 72, 240); | |
transition-duration: 1s; | |
} | |
.heading ul li a::before { | |
content: ""; | |
height: 2px; | |
width: 0px; | |
position: absolute; | |
left: 0; | |
bottom: 0; | |
background-color: white; | |
transition-duration: 1s; | |
} | |
.heading ul li a:hover::before { | |
width: 100%; | |
transition-duration: 1s; | |
background-color: rgb(6, 72, 240); | |
} | |
#input { | |
height: 30px; | |
width: 300px; | |
text-decoration: none; | |
border: 0px; | |
padding: 5px; | |
} | |
.logo a { | |
color: white; | |
font-size: 35px; | |
font-weight: 500; | |
text-decoration: none; | |
} | |
ion-icon { | |
width: 30px; | |
height: 30px; | |
background-color: white; | |
color: black; | |
} | |
ion-icon:hover { | |
cursor: pointer; | |
} | |
.search a { | |
display: flex; | |
} | |
header a ion-icon { | |
position: relative; | |
right: 3px; | |
} | |
.img-slider img { | |
height: 720px; | |
width: 1080px; | |
} | |
@keyframes slide { | |
0% { | |
left: 0px; | |
} | |
15% { | |
left: 0px; | |
} | |
20% { | |
left: -1080px; | |
} | |
32% { | |
left: -1080px; | |
} | |
35% { | |
left: -2160px; | |
} | |
47% { | |
left: -2160px; | |
} | |
50% { | |
left: -3240px; | |
} | |
63% { | |
left: -3240px; | |
} | |
66% { | |
left: -4320px; | |
} | |
79% { | |
left: -4320px; | |
} | |
82% { | |
left: -5400px; | |
} | |
100% { | |
left: 0px; | |
} | |
} | |
.img-slider { | |
display: flex; | |
float: left; | |
position: relative; | |
width: 1080px; | |
height: 720px; | |
animation-name: slide; | |
animation-duration: 10s; | |
animation-iteration-count: infinite; | |
transition-duration: 2s; | |
} | |
.heading1 { | |
opacity: 0; | |
} | |
.search { | |
display: flex; | |
position: relative; | |
} | |
.section1 { | |
width: 1080px; | |
overflow: hidden; | |
justify-content: center; | |
align-items: center; | |
margin: 0px auto; | |
} | |
.section2 .container { | |
display: flex; | |
width: 100%; | |
height: max-content; | |
flex-wrap: wrap; | |
justify-content: center; | |
margin: 10px auto; | |
} | |
.section2 .container .items { | |
margin: 10px; | |
width: 200px; | |
height: 300px; | |
background-color: white; | |
border: 2.5px solid black; | |
border-radius: 12px; | |
} | |
.section2 .container .items .name { | |
text-align: center; | |
background-color: rgb(6, 72, 240); | |
height: 25px; | |
padding-top: 4px; | |
color: white; | |
margin: 0; | |
} | |
.cloudinary-button { | |
display: flex; | |
float: left; | |
position: relative; | |
width: 100%; | |
height: 60%; | |
border: 3px solid red; | |
} | |
.section2 .container .items .price { | |
float: left; | |
padding-left: 10px; | |
display: block; | |
width: 100%; | |
color: rgb(255, 0, 0); | |
font-weight: 650; | |
} | |
.section2 .container .items .info { | |
padding-left: 10px; | |
color: rgb(6, 72, 240); | |
} | |
.section2 .container .items .img img { | |
width: 200px; | |
height: 200px; | |
margin: 0; | |
padding: 0; | |
border-radius: 12px; | |
transition-duration: 0.8s; | |
} | |
.section2 .container .items .img { | |
overflow: hidden; | |
margin: 0; | |
} | |
.section2 .container .items:hover .img img { | |
transform: scale(1.2); | |
transition-duration: 0.8s; | |
border-radius: 12px; | |
} | |
footer { | |
display: flex; | |
flex-direction: column; | |
background-color: black; | |
align-items: center; | |
color: white; | |
} | |
.footer1 { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
color: white; | |
margin-top: 15px; | |
} | |
.social-media { | |
display: flex; | |
justify-content: center; | |
color: white; | |
flex-wrap: wrap; | |
} | |
.social-media a { | |
color: white; | |
margin: 20px; | |
border-radius: 5px; | |
margin-top: 10px; | |
color: white; | |
} | |
.social-media a ion-icon { | |
color: white; | |
background-color: black; | |
} | |
.social-media a:hover ion-icon { | |
color: red; | |
transform: translateY(5px); | |
} | |
.footer2 { | |
display: flex; | |
width: 100%; | |
justify-content: space-evenly; | |
align-items: center; | |
text-decoration: none; | |
flex-wrap: wrap; | |
} | |
.footer0 { | |
font-weight: 1200; | |
transition-duration: 1s; | |
} | |
.footer0:hover { | |
color: rgb(6, 72, 240); | |
} | |
.footer2 .heading { | |
font-weight: 900; | |
font-size: 18px; | |
} | |
.footer3 { | |
margin-top: 60px; | |
margin-bottom: 20px; | |
display: flex; | |
flex-wrap: wrap; | |
justify-content: center; | |
} | |
.footer2 .heading:hover { | |
color: rgb(6, 72, 240); | |
} | |
.footer2 .div:hover { | |
transform: scale(1.05); | |
} | |
.footer3 h4 { | |
margin: 0 10px; | |
} | |
.footer2 div { | |
margin: 10px; | |
} | |
.menu { | |
visibility: hidden; | |
} | |
.heading1 .ham:active { | |
color: red; | |
} | |
.items { | |
overflow: hidden; | |
} | |
.ham, | |
.close { | |
cursor: pointer; | |
} | |
@media screen and (max-width: 1250px) { | |
.heading ul li { | |
display: none; | |
} | |
.items { | |
transform: scale(0.9); | |
} | |
.img-slider img { | |
height: 60vw; | |
width: 80vw; | |
} | |
.ham:active { | |
color: red; | |
} | |
.menu { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
} | |
.menu a ion-icon { | |
position: absolute; | |
} | |
@keyframes slide1 { | |
0% { | |
left: 0vw; | |
} | |
15% { | |
left: 0vw; | |
} | |
20% { | |
left: -80vw; | |
} | |
32% { | |
left: -80vw; | |
} | |
35% { | |
left: -160vw; | |
} | |
47% { | |
left: -160vw; | |
} | |
50% { | |
left: -240vw; | |
} | |
63% { | |
left: -240vw; | |
} | |
66% { | |
left: -320vw; | |
} | |
79% { | |
left: -320vw; | |
} | |
82% { | |
left: -400vw; | |
} | |
100% { | |
left: 0vw; | |
} | |
} | |
.menu ul { | |
display: flex; | |
flex-direction: column; | |
position: absolute; | |
width: 100vw; | |
height: 100vh; | |
background-color: black; | |
left: 0; | |
top: 0; | |
z-index: 11; | |
align-items: center; | |
justify-content: center; | |
opacity: 1; | |
} | |
.close { | |
z-index: 34; | |
color: white; | |
background-color: black; | |
} | |
.close:active { | |
color: red; | |
} | |
.menu ul li { | |
list-style: none; | |
margin: 20px; | |
border-top: 3px solid white; | |
width: 80%; | |
text-align: center; | |
padding-top: 10px; | |
} | |
.menu ul li a { | |
text-decoration: none; | |
padding-top: 10px; | |
color: white; | |
font-weight: 900; | |
} | |
.menu ul li a:hover { | |
color: rgb(6, 72, 240); | |
} | |
.img-slider { | |
display: flex; | |
float: left; | |
position: relative; | |
width: 80%; | |
height: 60%; | |
animation-name: slide1; | |
animation-duration: 10s; | |
animation-iteration-count: infinite; | |
transition-duration: 2s; | |
} | |
.section1 { | |
width: 80%; | |
overflow: hidden; | |
justify-content: center; | |
align-items: center; | |
margin: 0px auto; | |
} | |
.heading1 { | |
opacity: 1; | |
position: relative; | |
bottom: 8px; | |
} | |
.search a { | |
display: flex; | |
flex-wrap: nowrap; | |
} | |
.heading1 .ham { | |
background-color: black; | |
color: white; | |
} | |
#input { | |
width: 200px; | |
flex-shrink: 2; | |
} | |
header { | |
height: 150px; | |
} | |
} | |
@media screen and (max-width: 550px) { | |
.heading ul li { | |
display: none; | |
} | |
.heading1 { | |
opacity: 1; | |
bottom: 8px; | |
} | |
header { | |
height: 250px; | |
flex-wrap: wrap; | |
display: flex; | |
flex-direction: column; | |
} | |
#input { | |
width: 150px; | |
} | |
.close { | |
z-index: 34; | |
} | |
.search a { | |
display: flex; | |
flex-wrap: nowrap; | |
} | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment