CSY2028-assignment-1/public/assets/ibuy.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;

}