first style integration

Co-authored-by: d7hernan <d7hernan@users.noreply.github.com>
Co-authored-by: look-its-ashton <look-its-ashton@users.noreply.github.com>
This commit is contained in:
Gavyn Ezell
2022-11-19 12:29:50 -08:00
parent 23ae101f56
commit 5668e68594
8 changed files with 143 additions and 5 deletions

View File

@@ -34,4 +34,51 @@ h1 {
color: #ccb3bb;
border: 3px solid rgb(7, 0, 0);
background-color: #b52754;
}
.hidden,
.rating:not(:checked) > input { /* Hide radio circles while star rating */
display: none;
}
/* Unchecked stars */
.rating:not(:checked) > label {
/* Make stars line up sideways and not vertically */
float: right;
/* Hide label text */
width: 1em;
overflow: hidden;
white-space: nowrap;
/* Star default color and size */
font-size: 200%;
line-height: 1.2;
color: #b3b3cc;
}
.rating > label:active {
position: relative;
}
.rating:not(:checked) > label::before {
content: "★";
}
/* Checked star color */
.rating > input:checked ~ label {
color: #ffbf00;
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: orangered;
}
.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
color: orangered;
}

View File

@@ -0,0 +1,65 @@
/* homepage.css */
/* Color*/
body{
background-color: #13323b;
}
.Top-Bar{
margin-top: -8cm;
}
.Top-Bar > img{
position: relative;
top: 7.5cm;
}
.Top-Bar > h1{
position: relative;
left: 10.5cm;
top: 2.2cm;
font-size: 3cm;
color: #EAA9BC;
}
.Top-Bar > form{
position: relative;
left: 32cm;
}
.Review-boxes {
position: relative;
}
.Review-boxes > h2 {
position: relative;
left: 10cm;
font-size: 1.5cm;
color: #EAA9BC;
}
.Review-boxes > input {
position: relative;
left: 20.34cm;
top: -3.5cm;
}
.Filter-box{
width:300px;
height:700px;
background: #8D4E62;
position: relative;
left: 29.5cm;
top: -5.5cm;
}
.review-container{
display: flex;
position: relative;
top: -22cm;
left: 5cm;
max-width: 900px;
flex-wrap: wrap;
}
.review-container > div {
background-color: #f1f1f1;
width: 200px;
height: 200px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}