|
|
| (۸ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) |
| خط ۱: |
خط ۱: |
| | | <html> |
| <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> |
| | | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> |
| <meta charset="UTF-8">
| |
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
| | |
| <title>همراه شما در تمامی خدمات کافی نت</title>
| |
| | |
| <meta name="description" content="ارائه خدمات حرفهای کافی نت شامل ثبت نام، خدمات دولت الکترونیک، امور بانکی، ترجمه، ثبت شرکت، مالیات، بیمه، رزرو بلیط و صدها خدمت آنلاین دیگر.">
| |
| | |
| <meta name="keywords" content="کافی نت، خدمات کافی نت، کافی نت آنلاین، ثبت نام، خدمات اینترنتی، خدمات اداری">
| |
| | |
| <meta name="robots" content="index,follow">
| |
| | |
| <link rel="preconnect" href="https://fonts.googleapis.com">
| |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
| |
| | |
| <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
| |
| | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"> | |
| | |
| <link rel="stylesheet" href="style.css">
| |
| | |
| </head> | | </head> |
| | <section class="stats-section"> |
| | <div class="container"> |
| | <div class="text-side"> |
| | <h2>همراه و در کنار شماییم</h2> |
| | <p>با کافی نت من به بیش از صدها خدمات اینترنتی بصورت کاملاً غیرحضوری دسترسی دارین. فقط با چند کلیک ساده سفارش شما در دستان شما قرار دارد.</p> |
| | </div> |
|
| |
|
| <body>
| | |
| | | <article class="stat-card"> |
| | | <i class="icon fa fa-check-circle"></i> |
| <section class="about-cafenet">
| | |
| | | <span class="number">+50k</span> |
| <div class="container"> | | |
| | | </div> |
| | | </article> |
| <!-- متن سمت چپ -->
| | <article class="stat-card"> |
| | | <i class="icon fa fa-users"></i> |
| <div class="about-content">
| | |
| | | <span class="number">+500k</span> |
| <span class="section-subtitle"> | | |
| خدمات حرفهای کافی نت
| | </div> |
| </span>
| | </article> |
| | | <article class="stat-card"> |
| <h2>
| | <i class="icon fa fa-smile"></i> |
| همراه مطمئن شما در انجام خدمات اینترنتی و اداری
| | |
| </h2>
| | <span class="number">100%</span> |
| | | |
| <p>
| | </div> |
| | | </article> |
| کافی نت ما با ارائه صدها خدمت آنلاین، انجام امور اینترنتی و اداری را برای شما سریع، آسان و بدون دردسر کرده است. از ثبتنامهای مختلف گرفته تا خدمات بانکی، مالیاتی، بیمه، دانشگاهی، سامانههای دولتی، ترجمه مدارک، رزرو بلیط و بسیاری خدمات دیگر، همه را با بالاترین دقت و در کوتاهترین زمان انجام میدهیم.
| | <article class="stat-card"> |
| | | <i class="icon fa fa-calendar-alt"></i> |
| </p>
| | |
| | | <span class="number">+2000</span> |
| <a href="/services" class="main-btn">
| | |
| مشاهده تمامی خدمات
| | </div> |
| <i class="fa-solid fa-arrow-left"></i> | | </article> |
| </a>
| | </div> |
| | | </div> |
| </div>
| |
| | |
| | |
| | |
| <!-- کارت های آماری -->
| |
| | |
| <div class="stats-wrapper">
| |
| | |
| <div class="stats-shadow"></div> | |
| | |
| | |
| <article class="stat-card">
| |
| | |
| <div class="icon"> | |
| <i class="fa-solid fa-file-circle-check"></i>
| |
| </div>
| |
| | |
| <h3>+۵۰ هزار</h3>
| |
| | |
| <p>خدمت انجام شده</p> | |
| | |
| </article> | |
| | |
| | |
| | |
| <article class="stat-card"> | |
| | |
| <div class="icon"> | |
| <i class="fa-solid fa-users"></i>
| |
| </div> | |
| | |
| <h3>+۵ هزار</h3> | |
| | |
| <p>کاربر دائمی</p> | |
| | |
| </article> | |
| | |
| | |
| | |
| <article class="stat-card"> | |
| | |
| <div class="icon"> | |
| <i class="fa-solid fa-face-smile"></i>
| |
| </div> | |
| | |
| <h3>۹۹٪</h3> | |
| | |
| <p>رضایت مشتریان</p> | |
| | |
| </article> | |
| | |
| | |
| | |
| <article class="stat-card"> | |
| | |
| <div class="icon"> | |
| <i class="fa-solid fa-calendar-check"></i>
| |
| </div> | |
| | |
| <h3>+۱۰ سال</h3> | |
| | |
| <p>سابقه فعالیت</p> | |
| | |
| </article> | |
| | |
| </div> | |
| | |
| </div> | |
| | |
| </section> | | </section> |
|
| |
| </body>
| |
|
| |
|
| </html> | | </html> |