dqnid/advanced-css
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

user review section done

Browse Source
This commit is contained in:
dqnid committed 2024-06-03 23:33:51 +02:00
1 parent a0387b8ca6
commit 4171a21caa
5 files changed
+308 -13
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Trillo/starter/css/style.css
+103 -8
View File
@@ -26,7 +26,8 @@ Grey dark 3: #999
--color-grey-dark-2: #777;
--color-grey-dark-3: #999;
--shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3);
--shadow-light: 0 2rem 5rem rgba(0, 0, 0, 0.06); }
--shadow-light: 0 2rem 5rem rgba(0, 0, 0, 0.06);
--line: 1px solid var(--color-grey-light-2); }
* {
margin: 0;
@@ -40,6 +41,9 @@ Grey dark 3: #999
html {
box-sizing: border-box;
font-size: 62.5%; }
html ::selection {
color: var(--color-grey-light-1);
background-color: var(--color-primary); }
body {
font-family: "Open Sans", sans-serif;
@@ -181,7 +185,7 @@ body {
.overview {
display: flex;
align-items: center;
border-bottom: 1px solid var(--color-grey-light-2); }
border-bottom: var(--line); }
.overview__heading {
font-size: 2.25rem;
font-weight: 300;
@@ -229,8 +233,13 @@ body {
background-color: transparent;
cursor: pointer;
transition: all 0.2s; }
.btn-inline span {
margin-left: 3px;
transition: margin-left 0.2s; }
.btn-inline:hover {
color: var(--color-grey-dark-1); }
.btn-inline:hover span {
margin-left: 8px; }
.btn-inline:focus {
outline: none;
animation: pulsate 1s infinite; }
@@ -246,6 +255,90 @@ body {
transform: scale(1);
box-shadow: none; } }
.paragraph:not(:last-of-type) {
margin-bottom: 2rem; }
.list {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 3rem 0;
padding: 3rem 0;
border-top: var(--line);
border-bottom: var(--line); }
.list__item {
flex: 0 0 50%;
margin-bottom: 0.7rem; }
.list__item::before {
content: "";
display: inline-block;
height: 1rem;
width: 1rem;
margin-right: 0.7rem;
background-color: var(--color-primary);
mask-image: url("../img/chevron-thin-right.svg");
mask-size: cover; }
.recommend {
font-size: 1.3rem;
color: var(--color-grey-dark-3);
display: flex;
align-items: center; }
.recommend__count {
margin-right: auto; }
.recommend__photo {
box-sizing: content-box;
height: 4rem;
width: 4rem;
border-radius: 50%;
border: 3px solid white; }
.recommend__photo:not(:last-child) {
margin-right: -1.5rem; }
.review {
background-color: white;
box-shadow: var(--shadow-light);
padding: 3rem;
margin-bottom: 3.5rem;
position: relative;
overflow: hidden; }
.review::before {
content: "\201C";
position: absolute;
top: -3.2rem;
left: -1rem;
font-size: 20rem;
font-family: sans-serif;
line-height: 1;
color: var(--color-grey-light-2);
z-index: 1; }
.review__text {
margin-bottom: 2rem;
z-index: 10;
position: relative; }
.review__user {
display: flex;
align-items: center; }
.review__photo {
height: 4.5rem;
width: 4.5rem;
border-radius: 50%;
margin-right: 1.5rem; }
.review__user-box {
margin-right: auto; }
.review__user-name {
font-size: 1.1rem;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 0.4rem; }
.review__user-date {
font-size: 1rem;
color: var(--color-grey-dark-3); }
.review__rating {
font-size: 2.2rem;
font-weight: 300;
color: var(--color-primary); }
.container {
max-width: 120rem;
min-height: 50rem;
@@ -256,7 +349,7 @@ body {
.header {
height: 7rem;
background-color: #fff;
border-bottom: 1px solid var(--color-grey-light-2);
border-bottom: var(--line);
display: flex;
justify-content: space-between;
align-items: center;
@@ -281,15 +374,17 @@ body {
padding: 4.5rem;
gap: 4.5rem;
background-color: var(--color-grey-light-1);
border-bottom: 1px solid var(--color-grey-light-2); }
border-bottom: 1px solid var(--color-grey-light-2);
font-size: 1.4rem; }
.description {
background-color: white;
box-shadow: var(--shadow-light);
padding: 3rem;
flex: 0 0 60%;
font-size: 1.4rem; }
flex: 0 0 60%; }
.user-reviews {
background-color: blue;
flex: 1; }
flex: 1;
display: flex;
flex-direction: column;
align-items: center; }