PO/style.css
:root{
/* --main-bg-color: #4040a0; */
--main-bg-color: #4766bc;
--secondary-bg-color: white;
--default-font: Verdana, sans-serif;
}
h1{
font-family: var(--default-font);
}
h2{
font-family: var(--default-font);
}
body{
background-color: var(--main-bg-color);
}
.hidden{
display: none;
appearance: none;
}
.topbar{
width: calc(100% - 20px);
height: 40px;
background-color: var(--main-bg-color);
display: flex;
align-items: center;
font-family: Verdana, var(--default-font);
border-radius: 5px;
margin-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
.topbar a{
color: white;
margin-left: 3%;
margin-right: 3%;
padding: 10px;
text-decoration: none;
cursor: pointer;
}
.topbar button{
color: white;
margin-left: 5%;
text-decoration: none;
background-color: transparent;
border: none;
font-size: 18px;
}
#homecontent{
display: flex;
/* grid-template-columns: auto auto; */
flex-wrap: wrap;
gap: 10px;
margin: 10px;
}
.largediv{
height: 50vw;
border-radius: 10px;
border: 1px solid black;
display: flex;
align-items: center;
flex-direction: column;
}
.largediv.img{
background-color: var(--main-bg-color);
width: calc(49vw - 50px);
display: flex;
justify-content: center;
align-items: center;
}
.largediv.img img{
max-width: 100%;
max-height: 100%;
}
.largediv.text{
padding-left: 5%;
padding-right: 5%;
width: calc(60vw - 18px - 20%);
}
.largediv.text h2{
font-size: 4vw;
font-family: var(--default-font);
}
.largediv.text p{
font-size: 2vw;
font-family: var(--default-font);
}
.largediv:nth-child(3){
order: 2;
}
.largediv:nth-child(4){
order: 1;
}
#winkelnavbar{
width: fit-content;
border-radius: 10px;
float: right;
height: 60px;
margin-top: 10px;
margin-right: 10px;
padding: 0px 10px 0px 10px;
margin-left: auto;
}
.topbar input{
margin-right: 5%;
}
.right{
margin-left: auto !important;
}
#searchdiv{
background-color: white;
color: black;
height: 30px;
width: 200px;
border-radius: 15px;
padding-left: 10px;
display: flex;
align-items: center;
margin-right: 10px;
margin-left: 20px;
padding-left: 5px;
}
#search{
background-color: transparent;
outline: none;
border: none;
appearance: none;
width: 80%;
}
.content{
border: 1px solid black;
border-radius: 5px;
background-color: var(--secondary-bg-color);
display: flex;
}
.content.winkel{
flex-wrap: wrap;
padding-bottom: 10px;
}
.content.home{
flex-direction: column;
align-items: center;
}
.content.home h1{
font-size: 5vw;
}
.content.winkel h1{
margin-left: 70px;
}
.content.winkelwagen{
flex-direction: column;
}
.content.winkelwagen h1{
margin-left: 70px;
}
.producten{
width: calc(100% - 63px);
border: 1px solid black;
border-radius: 5px;
display: flex;
flex-wrap: wrap;
gap: 20px;
grid-template-columns: 1fr 1fr 1fr;
justify-items: center;
margin-left: 10px;
margin-right: 10px;
padding-bottom: 20px;
padding: 20px;
justify-content: space-evenly;
background-color: #ddd;
}
.product{
border: 1px solid black;
background-color: white;
border-radius: 5px;
max-height: calc(200px + 10vw);
width: calc(200px + 10vw);
/* margin-top: 20px; */
display: flex;
flex-direction: column;
color: black;
text-decoration: none;
transition: all 0.3s ease;
}
#productafbeelding{
border: 1px solid black;
border-radius: 5px;
padding: 5px;
margin: 10px;
}
#productafbeelding img{
max-width: 30vw;
max-height: 30vw;
}
.product:hover{
box-shadow: 0px 0px 4px;
}
.product > div{
width: 100%;
height: 70%;
display: flex;
justify-content: center;
}
#productdetail{
display: flex;
border: 1px solid black;
border-radius: 5px;
padding-bottom: 10px;
background-color: var(--secondary-bg-color);
}
#productdetail button{
border-radius: 15px;
color: white;
height: 40px;
font-size: 20px;
padding-left: 20px;
padding-right: 20px;
border: none;
cursor: pointer;
display: flex;
align-items: center;
padding-top: 2px;
background: black;
}
.button{
border-radius: 15px;
color: white;
height: 40px;
font-size: 20px;
padding-left: 20px;
padding-right: 20px;
border: none;
cursor: pointer;
display: flex;
align-items: center;
background: black;
width: fit-content;
font-family: var(--default-font);
text-decoration: none;
margin-top: 10px;
margin-right: 10px;
}
#price button{
width: 100%;
}
#price > button::before{
content: "";
background-image: url("afbeeldingen/add.svg");
background-size: 15px 15px;
width: 15px;
height: 15px;
margin: 0px 15px 0px -10px ;
display: inline-block;
color: white;
}
.product > .desc{
width: 100%;
height: 30%;
border-top: 1px dashed black;
align-self: flex-end;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.desc p{
width: 80%;
margin: 0px;
}
.product img{
height: 100%;
max-width: 100%;
width: auto;
}
.icon{
width: 35px;
height: 35px;
cursor: pointer;
}
#filter{
position: relative;
}
#filterpopup{
border: 2px solid black;
background-color: white;
width: 300px;
border-radius: 5px;
position: absolute;
margin-top: 20px;
display: none;
align-items: center;
flex-direction: column;
gap: 10px;
left: -133px;
padding-bottom: 10px;
}
#filterpopuparrow{
top: -17px;
margin-left: 10px;
position: absolute;
border: 8px solid black;
z-index: 1;
border-color: transparent transparent black transparent;
}
#closepopup{
float: right;
width: 20px;
height: 20px;
margin: 5px;
cursor: pointer;
align-self: flex-end;
}
#price{
background-color: black;
border-radius: 15px;
width: fit-content;
}
#itemamount button{
width: 50px;
background-color: #333;
border-radius: 0px;
transition: height 0.4s ease;
visibility: hidden;
}
#itemamount #min{
border-bottom-left-radius: 15px;
}
#itemamount #plus{
border-bottom-right-radius: 15px;
}
#itemamount{
width: auto;
min-width: 200px;
height: 0px;
display: flex;
justify-content: space-between;
transition: all 0.4s ease;
align-items: center;
}
#additemtocart{
margin-top: 10px;
}
#amount{
color: white;
font-family: var(--default-font);
}
.filteroption{
padding: 0px 10px 0px 10px;
height: 30px;
color: white;
background-color: black;
border-radius: 10px;
width: fit-content;
cursor: pointer;
display: flex;
align-items: center;
}
.filtercheckbox:checked + label{
box-shadow: 0px 0px 10px aqua;
}
.popupanim{
animation: popupanim 0.4s ease-out;
display: flex !important;
}
.login{
flex-wrap: nowrap;
flex-direction: column;
align-items: center;
}
.login a{
color: black;
text-decoration: none;
background-color: white;
padding: 10px;
border-radius: 15px;
font-family: var(--default-font);
border: 3px solid;
}
form div{
display: flex;
align-items: center;
margin-top: 10px;
}
form label{
margin-top: 4px;
cursor: pointer;
}
form input[type=radio]{
cursor: pointer;
}
form input:not(input[type=radio]){
width: 40vw;
padding: 5px;
border-radius: 5px;
}
form input[type=submit]{
cursor: pointer;
width: calc(40vw + 12px) !important;
}
form{
font-family: var(--default-font);
}
.doubleslidercontainer{
position: relative;
height: 30px;
}
p{
color: black;
font-family: var(--default-font);
}
#pricerange{
display: flex;
width: 100%;
/* height: 30px; */
justify-content: center;
}
#pricerange input{
width: 60px;
margin-left: 5px;
margin-right: 5px;
}
#bereken{
background-color: black;
color: white;
border-radius: 15px;
border: none;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
font-size: 20px;
cursor: pointer;
}
/* #pricerange input::before{
content: "€";
} */
#pricerange p{
margin-top: 5px;
margin-bottom: 5px;
}
.content.winkelwagen table{
border-collapse: collapse;
font-family: var(--default-font);
}
.content.winkelwagen td:not(.zestig){
border-left: 1px solid black;
}
.content.winkelwagen tr:nth-child(odd){
background-color: #eef;
}
.content.winkelwagen tr:nth-child(1){
background-color: #fff;
}
.content.winkelwagen form{
display: flex;
justify-content: center;
padding-top: 10px;
padding-bottom: 10px;
}
@media screen and (max-width: 575px){
.content.winkel{
align-items: center;
flex-direction: column;
}
.content.winkel h1{
margin-left: 0px;
}
#winkelnavbar{
float: none;
margin-left: 0px;
flex-wrap: wrap;
height: auto;
width: 80%;
padding: 10px;
justify-content: center;
}
#topbar{
height: auto;
flex-wrap: wrap;
justify-content: center;
}
.right{
margin-left: 0px !important;
}
#filterpopup{
left: -95px;
}
#filterpopuparrow{
margin-left: -66px;
}
.content.home{
flex-wrap: wrap;
}
.largediv{
width: 100% !important;
}
.largediv:nth-child(4){
order: 2;
}
.largediv:nth-child(3){
order: 1;
}
#productdetail{
flex-direction: column;
}
#productdetail > div{
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
}
#productdetail #winkelnavbar{
display: none;
}
#productafbeelding{
display: flex;
justify-content: center;
}
#productafbeelding img{
max-height: 60vw;
max-width: 100%;
}
}
@keyframes popupanim {
from{
opacity: 0;
margin-top: 0px;
}
to{
opacity: 1;
margin-top: 20px;
}
}
Resultaat
Made by Thijs Aarnoudse