Skip to content

Commit

Permalink
feat: add prices buttons activity
Browse files Browse the repository at this point in the history
  • Loading branch information
@letohx
letohx committed Apr 30, 2023
1 parent b1dd7d9 commit c7ab392
Show file tree
Hide file tree
Showing 3 changed files with 283 additions and 15 deletions.
143 changes: 134 additions & 9 deletions plants/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,7 @@ body{
border-radius: 10px;
color: #000000;
background: hsla(0, 0%, 0%, 0);
transition: 0.3s;
}
.button:hover, .button:focus{
background: #E06733;
Expand Down Expand Up @@ -340,6 +341,7 @@ body{
width: 161px;
height: 50px;
background: hsla(0, 0%, 0%, 0);
transition: 0.3s;
}
.button-servises:hover{
background: #E06733;
Expand Down Expand Up @@ -457,13 +459,14 @@ body{
}
.prices_item{
width: 332px;
height: 391px;
height: auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
align-content: stretch;

}
.text_prices_item{
width: 135px;
Expand Down Expand Up @@ -519,18 +522,19 @@ body{
text-align: center;
color: #E06733;
background: hsla(0, 0%, 0%, 0);
transition: 0.3s;
}
.button-prices:hover, .button-prices:focus{
background: #E06733;
color: #FFFFFF;
transition: .3s;
transition: 0.3s;
}
.button-prices:active{
-webkit-box-shadow:0px 0px 36px 3px rgba(224,103,51,0.59);
-moz-box-shadow: 0px 0px 36px 3px rgba(224,103,51,0.59);
box-shadow: 0px 0px 36px 3px rgba(224,103,51,0.59);
background: #E06733;
transition: .1s;
transition: 0.3s;
}

.leafs-mini-pic{
Expand All @@ -540,7 +544,7 @@ body{
}
.prices_items{
width: 332px;
height: 282.01px;
height: auto;
left: 109px;
top: 149px;
border: 1px solid #E3E1D5;
Expand All @@ -551,10 +555,12 @@ body{
justify-content: center;
align-items: center;
align-content: stretch;
transform: translateY(60px);
transition: 0.3s all;
}
.button-prices-items{
width: 250px;
height: 50px;
min-height: 0px;
margin: 16px 40px;
background: #EDF2EC;
border-radius: 20px;
Expand All @@ -566,6 +572,68 @@ body{
align-items: center;
text-align: center;
cursor: pointer;
transition: all 0.3s;
}
.button-prices-items:first-child{
margin-top: 32px;
}
.button-prices-items:last-child{
margin-bottom: 32px;
}
.prices-dropdown-text{
width: 169px;
height: 30px;
left: 114px;
top: 117px;
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-size: 10px;
line-height: 10px;
color: #717171;
margin-left: 40px;
text-align: left;
border-top: 1px solid #aea1a1;
padding-top: 10px;
transform: translateY(-7px);
transition: 0.5s;
}
.prices-dropdown-content{
text-align: left;
margin-top: 5px;
height: 0;
visibility: hidden;
overflow: hidden;
opacity: 0;
transition: 0.5s all;
}
.prices-dropdown-price-hour{
margin-top: 5px;
transition: 0.5s;
}
.prices-dropdown-price-dollar{
font-weight: 700;
font-size: 12px;
line-height: 20px;
color: #E06733;
margin-top: 13px;
margin-left: 40px;
}
.prices-dropdown-price{
font-weight: 700;
font-size: 16px;
line-height: 20px;
color: #E06733;
margin-top: 13px;
margin-left: -5px;
}
.prices-dropdown-hour{
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 20px;
transition: 0.5s;
}
.accordinon_button_wrapper{
margin: 13px 40px;
Expand All @@ -575,6 +643,27 @@ body{
justify-content: space-between;
text-align: center;
align-content: stretch;
transition: 0.5s;
}
.prices-link{
display: inline-block;
margin-top: 7px;
margin-left: 40px;
margin-bottom: 10px;
padding: 4px 26px 5px 20px;
font-family: 'Inter';
font-size: 14px;
font-weight: 700;
color: #717171;
text-decoration: none;
background-color: #ffffff;
border-radius: 10px;
transition: 0.3s;
}
.prices-link:hover{
color: #f8f8f8;
background: #E06733;
transition: 0.3s;
}

/* prices end */
Expand Down Expand Up @@ -698,6 +787,7 @@ body{
}
.footer__item{
margin-right: 20px;
transition: .1s;
}
.footer__item:last-child{
margin-right: 0;
Expand All @@ -709,6 +799,7 @@ body{
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
transition: .1s;
}
.footer__link{
text-decoration: none;
Expand All @@ -718,6 +809,7 @@ body{
font-size: 20px;
line-height: 50px;
color: #000000;
transition: .3s;
}

.footer__link:hover, .footer__link:focus{
Expand All @@ -739,11 +831,14 @@ body{
transform: scale(1.2);
transition: .3s;
}
.social-list__link-logo{
transition: .1s;
}
.social-list__link-logo:active{
-webkit-box-shadow:0px 0px 36px 3px rgba(224,103,51,0.59);
-moz-box-shadow: 0px 0px 36px 3px rgba(224,103,51,0.59);
box-shadow: 0px 0px 36px 3px rgba(224,103,51,0.59);
background: #e0673339;
-webkit-box-shadow:0px 0px 36px 3px #D6E7D2;
-moz-box-shadow: 0px 0px 36px 3px #D6E7D2;
box-shadow: 0px 0px 36px 3px #D6E7D2;
background: #d6e7d25a;
transition: .1s;
}

Expand Down Expand Up @@ -1296,6 +1391,9 @@ body{
color: #000000;
margin: 17px 31px;
}
.accordinon_button-pic{
transition: 0.5s ease;
}
.text_call_us{
width: 230px;
height: 126px;
Expand Down Expand Up @@ -1415,3 +1513,30 @@ body{
}




/* Prices active */


/* dropbtn on */

.prices_items-open{
height: auto;
transition: 0.5s;
}

.prices-dropdown-content-open{
height: auto;
visibility: visible;
opacity: 1;
transition: 0.3s;
}
.button-prices-items-open{
background: #D6E7D2;
transition: 1s;
}
.accordinon_button-pic-open{
transform: rotate(540deg);
filter: invert(30%);
transition: 1s;
}
51 changes: 45 additions & 6 deletions plants/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,24 +205,63 @@ <h2>Prices</h2>
</div>

<div class="prices_items">
<div class="button-prices-items">
<div id="button-prices-items-basics" class="button-prices-items">
<div class="accordinon_button_wrapper">
<h3>Basics</h3>
<img src="./img/svg/accordion_btn.svg" alt="accordinon_button" class="accordinon_button-pic">
<img id="buttonPricesBasicsOpenPicBasics" src="./img/svg/accordion_btn.svg" alt="accordinon_button" class="accordinon_button-pic">
</div>
<div id="prices-dropdown-content-basics" class="prices-dropdown-content">
<p class="prices-dropdown-text">
Release of Letraset sheets containing Lorem Ipsum passages, and more recently
</p>
<div class="prices-dropdown-price-hour">
<span class="prices-dropdown-price-dollar">$</span>
<span class="prices-dropdown-price">15</span>
<span class="prices-dropdown-hour"> / per hour</span>
</div>
<div>
<a href="#contacts" class="prices-link">Order</a>
</div>
</div>
</div>

<div class="button-prices-items">
<div id="button-prices-items-standard" class="button-prices-items">
<div class="accordinon_button_wrapper">
<h3>Standard</h3>
<img src="./img/svg/accordion_btn.svg" alt="accordinon_button" class="accordinon_button-pic">
<img id="buttonPricesBasicsOpenPicStandard" src="./img/svg/accordion_btn.svg" alt="accordinon_button" class="accordinon_button-pic">
</div>
<div id="prices-dropdown-content-standard" class="prices-dropdown-content">
<p class="prices-dropdown-text">
Release of Letraset sheets containing Lorem Ipsum passages, and more recently
</p>
<div class="prices-dropdown-price-hour">
<span class="prices-dropdown-price-dollar">$</span>
<span class="prices-dropdown-price">25</span>
<span class="prices-dropdown-hour"> / per hour</span>
</div>
<div>
<a href="#contacts" class="prices-link">Order</a>
</div>
</div>
</div>

<div class="button-prices-items">
<div id="button-prices-items-pro_care" class="button-prices-items">
<div class="accordinon_button_wrapper">
<h3>Pro care</h3>
<img src="./img/svg/accordion_btn.svg" alt="accordinon_button" class="accordinon_button-pic">
<img id="button-prices-basics-open-pic-pro_care" src="./img/svg/accordion_btn.svg" alt="accordinon_button" class="accordinon_button-pic">
</div>
<div id="prices-dropdown-content-pro_care" class="prices-dropdown-content">
<p class="prices-dropdown-text">
Release of Letraset sheets containing Lorem Ipsum passages, and more recently
</p>
<div class="prices-dropdown-price-hour">
<span class="prices-dropdown-price-dollar">$</span>
<span class="prices-dropdown-price">35</span>
<span class="prices-dropdown-hour"> / per hour</span>
</div>
<div>
<a href="#contacts" class="prices-link">Order</a>
</div>
</div>
</div>

Expand Down
Loading

0 comments on commit c7ab392

Please sign in to comment.