Skip to content

Commit

Permalink
ready
Browse files Browse the repository at this point in the history
  • Loading branch information
@KristinaHranovska
KristinaHranovska committed Feb 12, 2024
1 parent e760fdf commit ba3e862
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 18 deletions.
56 changes: 47 additions & 9 deletions src/css/exercises.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 32px;
margin-top: 32px;
gap: 20px;
}

.exercises-button {
padding: 10px 20px;
border-radius: 30px;
Expand All @@ -16,17 +16,20 @@
background-color: var(--text-light);
color: var(--black-background);
}

.active {
background-color: var(--dark-grey-background);
color: var(--text-light);
}

.gallery {
display: flex;
flex-wrap: wrap;
gap: 20px;
row-gap: 40px;
margin-bottom: 32px;
}

.gallery-item {
border-radius: 12px;
border: 1px solid rgba(246, 246, 246, 0.3);
Expand All @@ -35,9 +38,11 @@
overflow: hidden;
position: relative;
}

.gallery-image {
max-width: 100%;
}

.gallery-item-description {
position: absolute;
inset: 0;
Expand All @@ -47,12 +52,11 @@
align-items: center;
width: 100%;
padding: 45px, 105px, 45px, 105px;
background: linear-gradient(
0deg,
background: linear-gradient(0deg,
rgba(16, 16, 16, 0.7),
rgba(16, 16, 16, 0.7)
),
rgba(16, 16, 16, 0.7)),
linear-gradient(0deg, rgba(246, 246, 246, 0.3), rgba(246, 246, 246, 0.3));

.name {
font-size: 24px;
font-weight: 400;
Expand All @@ -61,6 +65,7 @@
text-align: center;
color: var(--text-light);
}

.filter {
font-size: 12px;
font-weight: 400;
Expand All @@ -75,6 +80,7 @@
.exercises-btns-div {
gap: 8px;
}

.gallery {
column-gap: 14px;
row-gap: 14px;
Expand All @@ -83,11 +89,13 @@

@media screen and (max-width: 768px) {
.exercises-header {
font-weight: 400;
margin-bottom: 20px;
font-size: 32px;
letter-spacing: -0.02em;
line-height: 1;
}

.exercises-btns-div {
display: flex;
row-gap: 20px;
Expand All @@ -97,18 +105,22 @@
justify-content: space-between;
flex-wrap: nowrap;
}

.exercises-button {
padding: 7px 14px;
font-size: 14px;
}

.gallery {
column-gap: 20px;
row-gap: 20px;
}

.gallery-item {
width: 295px;
height: 232px;
}

.ex-search {
margin-top: 0px;
}
Expand Down Expand Up @@ -174,22 +186,26 @@
letter-spacing: -0.01em;
text-align: center;
}

.exercise-item {
border-radius: 15px;
padding: 16px;
background-color: var(--white-color);
overflow: hidden;
}

.ex-item-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}

.ex-item-head-group {
display: flex;
gap: 16px;
}

.ex-item-workout {
border-radius: 15px;
background-color: var(--dark-grey-background);
Expand All @@ -199,21 +215,25 @@
font-weight: 500;
line-height: 1.5;
}

.ex-rating-group {
display: flex;
gap: 2px;
align-items: center;
}

.ex-item-rating {
font-size: 12px;
line-height: 1.5;
color: var(--black-background);
}

.ex-star-icon {
width: 18px;
height: 18px;
fill: var(--star);
}

.ex-item-start {
display: flex;
gap: 8px;
Expand All @@ -222,10 +242,11 @@
color: var(--black-background);
align-self: center;
}

.ex-arrow-icon {
width: 14px;
height: 14px;
fill: var(--black-background);
stroke: var(--black-background);
align-self: center;
}

Expand All @@ -245,6 +266,7 @@
flex-shrink: 0;
padding: 4px 5px;
}

.ex-icon-run {
width: 14px;
height: 16px;
Expand All @@ -266,9 +288,11 @@
overflow: hidden;
text-overflow: ellipsis;
}

.ex-info-group:not(:first-child) {
padding-left: 16px;
}

.ex-item-desc {
color: var(--border-color);
}
Expand All @@ -277,6 +301,7 @@
.search-form {
position: relative;
}

.search-input {
display: block;
padding: 12px 50px 12px 14px;
Expand All @@ -286,6 +311,7 @@
border: none;
outline: none;
}

.search-input::placeholder {
color: var(--black-background);
font-size: 16px;
Expand All @@ -302,10 +328,12 @@
border-radius: 30px;
background-color: var(--text-light);
}

.search-clear-btn {
right: 30px;
visibility: hidden;
}

.search-icon {
width: 18px;
height: 18px;
Expand All @@ -321,35 +349,42 @@
letter-spacing: -0.02em;
color: rgba(27, 27, 27, 0.5);
}

.ex-list-no-result {
padding-top: 222px;
padding-bottom: 585px;
padding-left: 50px;
padding-right: 50px;
}

.exercises-card {
gap: 20px 14px;
}

.exercise-item {
/* width: 313px;
height: 165px; */
flex-basis: calc((100%-14px) / 2);
flex-basis: calc((100% - 14px) / 2);
}

.search-input {
width: 246px;
}

.ex-item-start {
font-size: 16px;
line-height: 1.5;
}

.ex-arrow-icon {
width: 16px;
height: 16px;
}

.ex-title {
margin-bottom: 12px;
}

.ex-item-name {
font-size: 24px;
line-height: 1.33;
Expand All @@ -360,23 +395,26 @@
.exercises-card {
gap: 28px 20px;
}

.ex-list-no-result {
padding-top: 217px;
padding-bottom: 350px;
padding-left: 340px;
padding-right: 340px;
}

.ex-item-info {
gap: 10px;
text-wrap: nowrap;
}

.exercise-item {
/* width: 424px;
height: 141px; */
flex-basis: calc((100%-40px) / 3);
flex-basis: calc((100% - 40px) / 3);
}
}

.accent-text {
color: var(--dark-grey-background);
}
}
2 changes: 2 additions & 0 deletions src/img/icons/sprite.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 6 additions & 9 deletions src/js/body-parts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,13 +61,12 @@ function renderExercises(data) {
</span>
<a class="ex-item-start" href="#" data-id="${i._id}">
<span>Start</span>
<svg class="ex-arrow-icon" width="14" height="14"><use href="${icons}#icon-arrow-body-parts"></use></svg>
<svg class="ex-arrow-icon" width="14" height="14"><use href="${icons}#arrow"></use></svg>
</a>
</div>
<span class="ex-title">
<span class="ex-run-men"><svg class="ex-icon-run" width="14" height="14"><use href="${icons}#icon-body-parts-fitness"></use></svg></span>
<h3 class="ex-item-name">${
i.name.charAt(0).toUpperCase() + i.name.slice(1)
<h3 class="ex-item-name">${i.name.charAt(0).toUpperCase() + i.name.slice(1)
}</h3>
</span>
<div class="ex-item-info">
Expand All @@ -77,15 +76,13 @@ function renderExercises(data) {
</span>
<span class="ex-info-group">
<span class="ex-item-desc">Body part:</span>
<span class="ex-item-value">${
i.bodyPart.charAt(0).toUpperCase() + i.bodyPart.slice(1)
}</span>
<span class="ex-item-value">${i.bodyPart.charAt(0).toUpperCase() + i.bodyPart.slice(1)
}</span>
</span>
<span class="ex-info-group">
<span class="ex-item-desc">Target:</span>
<span class="ex-item-value">${
i.target.charAt(0).toUpperCase() + i.target.slice(1)
}</span>
<span class="ex-item-value">${i.target.charAt(0).toUpperCase() + i.target.slice(1)
}</span>
</span>
</div>
</li>`
Expand Down

0 comments on commit ba3e862

Please sign in to comment.