197 lines
3.3 KiB
CSS
197 lines
3.3 KiB
CSS
/* Import website font */
|
|
@import url('https://stockfont.org/?3e1218d9a01517d5734a1be9e67be4af797abff1230ab272235ec8ed759251d6');
|
|
|
|
|
|
* {
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
}
|
|
|
|
body { font-family: 'Oxygen-Regular', sans-serif; background-color: #f6f5f4; max-width: 100vw; overflow-x: hidden;}
|
|
h1, h2, h3, h4 { font-weight: normal; }
|
|
|
|
a, a:visited {color: #444;}
|
|
a:hover {text-decoration: underline; color: #222;}
|
|
header {
|
|
margin-top: 1vw;
|
|
font-family: 'Univers-Light-Normal';
|
|
display: grid;
|
|
grid-template-columns: 15% 85%;
|
|
align-items: center;
|
|
padding-top: 1vw;
|
|
padding-bottom: 1vw;
|
|
border-top: 1px solid #ddd;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
header h1 {
|
|
text-align: center;
|
|
font-size: 5em;
|
|
}
|
|
form {
|
|
display: block;
|
|
}
|
|
|
|
|
|
header form input[type=text] {
|
|
border: 3px solid black;
|
|
font-size: 2em;
|
|
padding: 0.5em;
|
|
|
|
width: 70%;
|
|
}
|
|
|
|
body > img { width: 100vw; }
|
|
|
|
header form input[type=submit] {
|
|
background-color: #3665f3;
|
|
color: white;
|
|
width: 20%;
|
|
font-size: 2em;
|
|
padding: 0.5em;
|
|
cursor: pointer;
|
|
border: 0;
|
|
}
|
|
|
|
header .i {
|
|
color: #e43137;
|
|
}
|
|
header .b {
|
|
color: #0063d1;
|
|
}
|
|
header .u {
|
|
color: #f4ae01;
|
|
}
|
|
header .y {
|
|
color: #85b716;
|
|
}
|
|
|
|
body > nav {
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
body > nav ul li:last-child a:after {content: 'ˬ'; position: absolute;}
|
|
|
|
body > nav ul {
|
|
display: flex;
|
|
width: 100vw;
|
|
list-style-type: none;
|
|
}
|
|
|
|
body > nav ul li {
|
|
flex: 1;
|
|
}
|
|
|
|
body > nav ul li a {
|
|
display: block; text-align: center;
|
|
padding-top: 0.5vw;
|
|
padding-bottom: 0.5vw;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.productList {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.productList li {
|
|
padding: 2vw;
|
|
border-bottom: 1px solid #ddd;
|
|
display: grid;
|
|
grid-template-columns: 18% 80%;
|
|
}
|
|
|
|
.productList img {width: auto; display: block; max-width: 10vw;}
|
|
|
|
p.price {display: block; text-align: right; font-weight: bold; font-size: 2em;}
|
|
a.more {display: block; text-align: right; font-weight: bold; float: right; background-color: #3665f3;
|
|
color: white;
|
|
|
|
font-size: 2em;
|
|
padding: 0.5em;
|
|
cursor: pointer; }
|
|
|
|
main {padding: 3vw; display: block; overflow: hidden; width: 80vw; margin: auto; border-left: 2px solid #ddd; border-right: 2px solid #ddd;}
|
|
|
|
article.product {
|
|
display: grid;
|
|
griid-template-columns: 60% 40%;
|
|
grid-template-areas: "img details"
|
|
"description description"
|
|
"reviews reviews"
|
|
}
|
|
|
|
article.product img {
|
|
grid-area: img;
|
|
}
|
|
|
|
main h1 {margin-top: 5vw; margin-bottom: 5vw;}
|
|
article .details {
|
|
grid-area: details;
|
|
}
|
|
|
|
article .reviews {
|
|
grid-area: reviews;
|
|
|
|
}
|
|
|
|
textarea {width: 100%; height: 20em;}
|
|
.reviews form {margin-top: 5em;}
|
|
.reviews ul {
|
|
list-style-type: none;
|
|
}
|
|
.reviews li{
|
|
padding-top: 1em;
|
|
padding-bottom: 1em;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
article .description {
|
|
grid-area: description;
|
|
padding-top: 3em;
|
|
padding-bottom: 3em;
|
|
}
|
|
|
|
.price {color: red;}
|
|
article.product .price {text-align: left;}
|
|
|
|
footer {margin-top: 5vw; border-top: 1px solid #ddd;}
|
|
|
|
time {display: block; margin: 1em 0;}
|
|
main form {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 50vw;
|
|
}
|
|
|
|
.details p {
|
|
margin-top: 0.5em;
|
|
}
|
|
main form label, main form input {
|
|
flex-grow: 1;
|
|
width: 20vw;
|
|
margin-bottom: 1em;
|
|
margin-right: 2vw;
|
|
margin-left: 2vw;
|
|
}
|
|
|
|
.bid {
|
|
margin-top: 2em;
|
|
padding: 0;
|
|
}
|
|
|
|
.bid input {
|
|
margin-left: 0;
|
|
}
|
|
|
|
main form input[type=submit] {
|
|
background-color: #3665f3;
|
|
color: white;
|
|
flex-grow: 0;
|
|
margin-left: auto;
|
|
font-size: 1.2em;
|
|
padding: 0.2em;
|
|
cursor: pointer;
|
|
border: 0;
|
|
|
|
}
|