|
|
| خط ۱: |
خط ۱: |
|
| |
|
| <html lang="fa" dir="rtl"> | | <html lang="fa" dir="rtl"> |
|
| |
|
| |
|
| |
| <style>
| |
| /*==================================================
| |
| RESET
| |
| ==================================================*/
| |
|
| |
| *{
| |
| margin:0;
| |
| padding:0;
| |
| box-sizing:border-box;
| |
| }
| |
|
| |
| html{
| |
| scroll-behavior:smooth;
| |
| }
| |
|
| |
| body{
| |
| font-family:"Vazirmatn",sans-serif;
| |
| background:#ffffff;
| |
| color:#222;
| |
| line-height:2;
| |
| overflow-x:hidden;
| |
| }
| |
|
| |
| img{
| |
| max-width:100%;
| |
| display:block;
| |
| }
| |
|
| |
| a{
| |
| text-decoration:none;
| |
| }
| |
|
| |
| ul{
| |
| list-style:none;
| |
| }
| |
|
| |
| /*==================================================
| |
| CONTAINER
| |
| ==================================================*/
| |
|
| |
| .container{
| |
| width:min(1200px,92%);
| |
| margin:auto;
| |
| }
| |
|
| |
| /*==================================================
| |
| SECTION
| |
| ==================================================*/
| |
|
| |
| .about-cafenet{
| |
| padding:90px 0;
| |
| background:#fff;
| |
| overflow:hidden;
| |
| }
| |
|
| |
| .about-cafenet .container{
| |
|
| |
| display:grid;
| |
| grid-template-columns:1fr 1.2fr;
| |
|
| |
| gap:70px;
| |
|
| |
| align-items:center;
| |
| }
| |
|
| |
| /* کارتها سمت راست */
| |
|
| |
| .stats-wrapper{
| |
| order:1;
| |
| }
| |
|
| |
| /* متن سمت چپ */
| |
|
| |
| .about-content{
| |
| order:2;
| |
| }
| |
|
| |
| /*==================================================
| |
| CONTENT
| |
| ==================================================*/
| |
|
| |
| .section-subtitle{
| |
|
| |
| display:inline-block;
| |
|
| |
| background:#ebfff6;
| |
|
| |
| color:#00b96b;
| |
|
| |
| padding:8px 18px;
| |
|
| |
| border-radius:40px;
| |
|
| |
| font-size:14px;
| |
|
| |
| font-weight:700;
| |
|
| |
| margin-bottom:18px;
| |
| }
| |
|
| |
| .about-content h2{
| |
|
| |
| font-size:38px;
| |
|
| |
| font-weight:800;
| |
|
| |
| color:#111;
| |
|
| |
| line-height:1.5;
| |
|
| |
| margin-bottom:18px;
| |
| }
| |
|
| |
| .about-content p{
| |
|
| |
| font-size:15px;
| |
|
| |
| color:#666;
| |
|
| |
| text-align:justify;
| |
|
| |
| line-height:2;
| |
|
| |
| margin-bottom:30px;
| |
| }
| |
|
| |
| /*==================================================
| |
| BUTTON
| |
| ==================================================*/
| |
|
| |
| .main-btn{
| |
|
| |
| display:inline-flex;
| |
|
| |
| align-items:center;
| |
|
| |
| gap:10px;
| |
|
| |
| background:#00c97b;
| |
|
| |
| color:#fff;
| |
|
| |
| padding:14px 26px;
| |
|
| |
| border-radius:12px;
| |
|
| |
| font-weight:700;
| |
|
| |
| transition:.35s;
| |
|
| |
| box-shadow:0 12px 30px rgba(0,201,123,.18);
| |
|
| |
| }
| |
|
| |
| .main-btn:hover{
| |
|
| |
| transform:translateY(-4px);
| |
|
| |
| background:#00b86d;
| |
|
| |
| }
| |
|
| |
| .main-btn i{
| |
|
| |
| transition:.3s;
| |
|
| |
| }
| |
|
| |
| .main-btn:hover i{
| |
|
| |
| transform:translateX(-5px);
| |
|
| |
| }
| |
|
| |
| /*==================================================
| |
| CARDS
| |
| ==================================================*/
| |
|
| |
| .stats-wrapper{
| |
|
| |
| position:relative;
| |
|
| |
| display:grid;
| |
|
| |
| grid-template-columns:repeat(2,1fr);
| |
|
| |
| gap:18px;
| |
|
| |
| z-index:2;
| |
|
| |
| }
| |
|
| |
| .stat-card{
| |
|
| |
| background:#fff;
| |
|
| |
| border-radius:18px;
| |
|
| |
| padding:26px 22px;
| |
|
| |
| border:1px solid #f3f3f3;
| |
|
| |
| transition:.35s;
| |
|
| |
| box-shadow:
| |
| 0 8px 24px rgba(0,0,0,.05);
| |
|
| |
| position:relative;
| |
|
| |
| z-index:2;
| |
|
| |
| }
| |
|
| |
| .stat-card:hover{
| |
|
| |
| transform:translateY(-8px);
| |
|
| |
| border-color:#00c97b;
| |
|
| |
| box-shadow:
| |
| 0 18px 45px rgba(0,0,0,.10);
| |
|
| |
| }
| |
|
| |
| /*==================================================
| |
| ICON
| |
| ==================================================*/
| |
|
| |
| .stat-card .icon{
| |
|
| |
| width:56px;
| |
|
| |
| height:56px;
| |
|
| |
| border-radius:16px;
| |
|
| |
| background:#ecfff7;
| |
|
| |
| display:flex;
| |
|
| |
| align-items:center;
| |
|
| |
| justify-content:center;
| |
|
| |
| color:#00c97b;
| |
|
| |
| font-size:22px;
| |
|
| |
| margin-bottom:15px;
| |
|
| |
| transition:.35s;
| |
|
| |
| }
| |
|
| |
| .stat-card:hover .icon{
| |
|
| |
| background:#00c97b;
| |
|
| |
| color:#fff;
| |
|
| |
| transform:rotate(-8deg);
| |
|
| |
| }
| |
|
| |
| /*==================================================
| |
| TEXT
| |
| ==================================================*/
| |
|
| |
| .stat-card h3{
| |
|
| |
| font-size:28px;
| |
|
| |
| color:#00b96b;
| |
|
| |
| font-weight:800;
| |
|
| |
| margin-bottom:6px;
| |
|
| |
| line-height:1;
| |
|
| |
| }
| |
|
| |
| .stat-card p{
| |
|
| |
| font-size:13px;
| |
|
| |
| color:#666;
| |
|
| |
| white-space:nowrap;
| |
|
| |
| overflow:hidden;
| |
|
| |
| text-overflow:ellipsis;
| |
|
| |
| }
| |
| /*==================================================
| |
| SHADOW
| |
| ==================================================*/
| |
|
| |
| .stats-shadow{
| |
|
| |
| position:absolute;
| |
|
| |
| left:50%;
| |
| top:50%;
| |
|
| |
| transform:translate(-50%,-50%);
| |
|
| |
| width:92%;
| |
| height:92%;
| |
|
| |
| background:rgba(0,0,0,.08);
| |
|
| |
| filter:blur(55px);
| |
|
| |
| border-radius:45px;
| |
|
| |
| opacity:.55;
| |
|
| |
| z-index:-1;
| |
|
| |
| }
| |
|
| |
| /*==================================================
| |
| FLOATING EFFECT
| |
| ==================================================*/
| |
|
| |
| .stat-card:nth-child(2),
| |
| .stat-card:nth-child(4){
| |
|
| |
| margin-top:30px;
| |
|
| |
| }
| |
|
| |
| /*==================================================
| |
| BACKGROUND SHAPES
| |
| ==================================================*/
| |
|
| |
| .stats-wrapper::before{
| |
|
| |
| content:"";
| |
|
| |
| position:absolute;
| |
|
| |
| width:170px;
| |
| height:170px;
| |
|
| |
| right:-60px;
| |
| top:-60px;
| |
|
| |
| border-radius:50%;
| |
|
| |
| background:#00c97b15;
| |
|
| |
| filter:blur(40px);
| |
|
| |
| z-index:-2;
| |
|
| |
| }
| |
|
| |
| .stats-wrapper::after{
| |
|
| |
| content:"";
| |
|
| |
| position:absolute;
| |
|
| |
| width:170px;
| |
| height:170px;
| |
|
| |
| left:-60px;
| |
| bottom:-60px;
| |
|
| |
| border-radius:50%;
| |
|
| |
| background:#00c97b10;
| |
|
| |
| filter:blur(45px);
| |
|
| |
| z-index:-2;
| |
|
| |
| }
| |
|
| |
| /*==================================================
| |
| RESPONSIVE
| |
| ==================================================*/
| |
|
| |
| @media(max-width:1100px){
| |
|
| |
| .about-cafenet .container{
| |
|
| |
| gap:45px;
| |
|
| |
| }
| |
|
| |
| .about-content h2{
| |
|
| |
| font-size:34px;
| |
|
| |
| }
| |
|
| |
| }
| |
|
| |
| @media(max-width:992px){
| |
|
| |
| .about-cafenet{
| |
|
| |
| padding:70px 0;
| |
|
| |
| }
| |
|
| |
| .about-cafenet .container{
| |
|
| |
| grid-template-columns:1fr;
| |
|
| |
| }
| |
|
| |
| .stats-wrapper{
| |
|
| |
| order:1;
| |
| max-width:650px;
| |
| margin:auto;
| |
|
| |
| }
| |
|
| |
| .about-content{
| |
|
| |
| order:2;
| |
| text-align:center;
| |
|
| |
| }
| |
|
| |
| .about-content p{
| |
|
| |
| text-align:center;
| |
|
| |
| }
| |
|
| |
| .main-btn{
| |
|
| |
| justify-content:center;
| |
|
| |
| }
| |
|
| |
| }
| |
|
| |
| @media(max-width:768px){
| |
|
| |
| .about-cafenet{
| |
|
| |
| padding:60px 0;
| |
|
| |
| }
| |
|
| |
| .about-content h2{
| |
|
| |
| font-size:28px;
| |
|
| |
| }
| |
|
| |
| .about-content p{
| |
|
| |
| font-size:14px;
| |
|
| |
| }
| |
|
| |
| .stats-wrapper{
| |
|
| |
| grid-template-columns:1fr;
| |
|
| |
| gap:16px;
| |
|
| |
| }
| |
|
| |
| .stat-card:nth-child(2),
| |
| .stat-card:nth-child(4){
| |
|
| |
| margin-top:0;
| |
|
| |
| }
| |
|
| |
| .stat-card{
| |
|
| |
| padding:22px 18px;
| |
|
| |
| }
| |
|
| |
| .stat-card .icon{
| |
|
| |
| width:52px;
| |
| height:52px;
| |
|
| |
| font-size:20px;
| |
|
| |
| }
| |
|
| |
| .stat-card h3{
| |
|
| |
| font-size:24px;
| |
|
| |
| }
| |
|
| |
| .stat-card p{
| |
|
| |
| font-size:13px;
| |
|
| |
| }
| |
|
| |
| .main-btn{
| |
|
| |
| width:100%;
| |
| justify-content:center;
| |
|
| |
| }
| |
|
| |
| .stats-shadow{
| |
|
| |
| width:100%;
| |
| height:100%;
| |
|
| |
| filter:blur(35px);
| |
|
| |
| }
| |
|
| |
| }
| |
|
| |
| @media(max-width:480px){
| |
|
| |
| .container{
| |
|
| |
| width:94%;
| |
|
| |
| }
| |
|
| |
| .about-content h2{
| |
|
| |
| font-size:24px;
| |
|
| |
| }
| |
|
| |
| .section-subtitle{
| |
|
| |
| font-size:13px;
| |
|
| |
| }
| |
|
| |
| .about-content p{
| |
|
| |
| font-size:13px;
| |
|
| |
| }
| |
|
| |
| .stat-card{
| |
|
| |
| border-radius:16px;
| |
|
| |
| }
| |
|
| |
| }
| |
|
| |
| /*==================================================
| |
| PERFORMANCE
| |
| ==================================================*/
| |
|
| |
| .stat-card,
| |
| .main-btn,
| |
| .icon{
| |
|
| |
| will-change:transform;
| |
|
| |
| }
| |
|
| |
| .about-content,
| |
| .stats-wrapper{
| |
|
| |
| position:relative;
| |
|
| |
| z-index:2;
| |
|
| |
| }
| |
| </style>
| |
|
| |
|
| |
|
| |
| <head> | | <head> |
|
| |
|