|
|
| خط ۱۳۲: |
خط ۱۳۲: |
|
| |
|
| </section> | | </section> |
|
| |
|
| |
| .products-section{
| |
|
| |
| padding:70px 15px;
| |
|
| |
| background:#fff;
| |
|
| |
| }
| |
|
| |
| .container{
| |
|
| |
| max-width:1300px;
| |
|
| |
| margin:auto;
| |
|
| |
| }
| |
|
| |
| .section-header{
| |
|
| |
| text-align:center;
| |
|
| |
| margin-bottom:55px;
| |
|
| |
| }
| |
|
| |
| .section-header h2{
| |
|
| |
| font-size:42px;
| |
|
| |
| font-weight:700;
| |
|
| |
| color:#111;
| |
|
| |
| position:relative;
| |
|
| |
| display:inline-block;
| |
|
| |
| }
| |
|
| |
| .section-header h2::after{
| |
|
| |
| content:"";
| |
|
| |
| display:block;
| |
|
| |
| width:80px;
| |
|
| |
| height:3px;
| |
|
| |
| background:#e6e6e6;
| |
|
| |
| margin:15px auto 0;
| |
|
| |
| }
| |
|
| |
| .products-grid{
| |
|
| |
| display:grid;
| |
|
| |
| grid-template-columns:repeat(4,1fr);
| |
|
| |
| gap:40px;
| |
|
| |
| }
| |
|
| |
| .product-card{
| |
|
| |
| text-align:center;
| |
|
| |
| transition:.35s;
| |
|
| |
| }
| |
|
| |
| .product-card a{
| |
|
| |
| color:#333;
| |
|
| |
| text-decoration:none;
| |
|
| |
| display:block;
| |
|
| |
| }
| |
|
| |
| .product-card figure{
| |
|
| |
| width:190px;
| |
|
| |
| height:190px;
| |
|
| |
| margin:0 auto 25px;
| |
|
| |
| border-radius:50%;
| |
|
| |
| overflow:hidden;
| |
|
| |
| transition:.4s;
| |
|
| |
| }
| |
|
| |
| .product-card img{
| |
|
| |
| width:100%;
| |
|
| |
| height:100%;
| |
|
| |
| object-fit:cover;
| |
|
| |
| transition:.5s;
| |
|
| |
| }
| |
|
| |
| .product-card h3{
| |
|
| |
| font-size:29px;
| |
|
| |
| margin-bottom:18px;
| |
|
| |
| color:#222;
| |
|
| |
| }
| |
|
| |
| .product-card p{
| |
|
| |
| line-height:2;
| |
|
| |
| color:#666;
| |
|
| |
| font-size:17px;
| |
|
| |
| }
| |
|
| |
| .product-card:hover figure{
| |
|
| |
| transform:translateY(-8px);
| |
|
| |
| box-shadow:0 18px 40px rgba(0,0,0,.18);
| |
|
| |
| }
| |
|
| |
| .product-card:hover img{
| |
|
| |
| transform:scale(1.08);
| |
|
| |
| }
| |
|
| |
| .product-card:hover h3{
| |
|
| |
| color:#b48b45;
| |
|
| |
| }
| |
| .products-section{
| |
|
| |
| padding:70px 15px;
| |
|
| |
| background:#fff;
| |
|
| |
| }
| |
|
| |
| .container{
| |
|
| |
| max-width:1300px;
| |
|
| |
| margin:auto;
| |
|
| |
| }
| |
|
| |
| .section-header{
| |
|
| |
| text-align:center;
| |
|
| |
| margin-bottom:55px;
| |
|
| |
| }
| |
|
| |
| .section-header h2{
| |
|
| |
| font-size:42px;
| |
|
| |
| font-weight:700;
| |
|
| |
| color:#111;
| |
|
| |
| position:relative;
| |
|
| |
| display:inline-block;
| |
|
| |
| }
| |
|
| |
| .section-header h2::after{
| |
|
| |
| content:"";
| |
|
| |
| display:block;
| |
|
| |
| width:80px;
| |
|
| |
| height:3px;
| |
|
| |
| background:#e6e6e6;
| |
|
| |
| margin:15px auto 0;
| |
|
| |
| }
| |
|
| |
| .products-grid{
| |
|
| |
| display:grid;
| |
|
| |
| grid-template-columns:repeat(4,1fr);
| |
|
| |
| gap:40px;
| |
|
| |
| }
| |
|
| |
| .product-card{
| |
|
| |
| text-align:center;
| |
|
| |
| transition:.35s;
| |
|
| |
| }
| |
|
| |
| .product-card a{
| |
|
| |
| color:#333;
| |
|
| |
| text-decoration:none;
| |
|
| |
| display:block;
| |
|
| |
| }
| |
|
| |
| .product-card figure{
| |
|
| |
| width:190px;
| |
|
| |
| height:190px;
| |
|
| |
| margin:0 auto 25px;
| |
|
| |
| border-radius:50%;
| |
|
| |
| overflow:hidden;
| |
|
| |
| transition:.4s;
| |
|
| |
| }
| |
|
| |
| .product-card img{
| |
|
| |
| width:100%;
| |
|
| |
| height:100%;
| |
|
| |
| object-fit:cover;
| |
|
| |
| transition:.5s;
| |
|
| |
| }
| |
|
| |
| .product-card h3{
| |
|
| |
| font-size:29px;
| |
|
| |
| margin-bottom:18px;
| |
|
| |
| color:#222;
| |
|
| |
| }
| |
|
| |
| .product-card p{
| |
|
| |
| line-height:2;
| |
|
| |
| color:#666;
| |
|
| |
| font-size:17px;
| |
|
| |
| }
| |
|
| |
| .product-card:hover figure{
| |
|
| |
| transform:translateY(-8px);
| |
|
| |
| box-shadow:0 18px 40px rgba(0,0,0,.18);
| |
|
| |
| }
| |
|
| |
| .product-card:hover img{
| |
|
| |
| transform:scale(1.08);
| |
|
| |
| }
| |
|
| |
| .product-card:hover h3{
| |
|
| |
| color:#b48b45;
| |
|
| |
| }
| |
|
| |
|
| |
|
| </html> | | </html> |