فراغیب

تست: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<html lang="fa" dir="rtl">
<html lang="fa" dir="rtl">


خط ۲۲: خط ۲۱:


<style>
<style>
section {
        padding: 20px 0 !important; /* این خط باعث می‌شود فاصله بین تمام بخش‌ها بسیار کم شود */
        margin: 0 auto;
    }
    /* اگر از کلاس‌های خاصی برای فاصله‌ها استفاده کرده‌اید، این را هم اضافه کنید */
    .container, .row {
        margin-bottom: 0 !important;
    }


/* =========================================================
/* =========================================================
خط ۸۰: خط ۶۸:


     margin:0;
     margin:0;
    text-align:right;


     font-family:
     font-family:
خط ۴۹۰: خط ۴۸۰:
     position:relative;
     position:relative;


     padding:30px 0;
     padding:55px 0;


     min-height:100vh;
     min-height:auto;


     display:flex;
     display:flex;
خط ۵۱۷: خط ۵۰۷:
     width:100%;
     width:100%;


     text-align:center;
     text-align:right;


     margin-bottom:50px;
     margin-bottom:28px;


}
}
خط ۵۵۶: خط ۵۴۶:
     max-width:650px;
     max-width:650px;


     margin:12px auto 0;
     margin:12px 0 0;


     color:var(--muted);
     color:var(--muted);
خط ۵۸۵: خط ۵۷۵:
.hero-inner{
.hero-inner{


     max-width:850px;
     max-width:900px;


     margin:auto;
     margin:auto;


     text-align:center;
     text-align:right;


}
}
خط ۶۷۸: خط ۶۶۸:
     display:flex;
     display:flex;


     justify-content:center;
     justify-content:flex-start;


     flex-wrap:wrap;
     flex-wrap:wrap;
خط ۷۶۰: خط ۷۵۰:


     grid-template-columns:
     grid-template-columns:
         repeat(4,1fr);
         repeat(5,1fr);


     gap:12px;
     gap:12px;
خط ۹۲۱: خط ۹۱۱:


     grid-template-columns:
     grid-template-columns:
         repeat(4,1fr);
         repeat(6,1fr);


     gap:15px;
     gap:12px;


}
}
خط ۹۷۷: خط ۹۶۷:
.skills-grid{
.skills-grid{


     max-width:900px;
     max-width:1050px;


     margin:auto;
     margin:auto;
خط ۹۸۶: خط ۹۷۶:
         repeat(2,1fr);
         repeat(2,1fr);


     gap:18px 35px;
     gap:22px 28px;


}
}
خط ۹۹۲: خط ۹۸۲:
.skill{
.skill{


     padding:19px;
     padding:24px;


     background:#111;
     background:#111;
خط ۹۹۹: خط ۹۸۹:
         1px solid rgba(255,255,255,.07);
         1px solid rgba(255,255,255,.07);


    border-radius:18px;
    min-height:230px;
    text-align:right;
}
.skill-image{
    width:100%;
    height:135px;
    margin-bottom:18px;
    overflow:hidden;
     border-radius:14px;
     border-radius:14px;
    background:#181818;
    border:1px solid rgba(255,255,255,.06);
}


.skill-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}
}


خط ۱٬۳۲۲: خط ۱٬۳۳۲:
}
}


.testimonial-person img{
.testimonial-avatar{
 
    width:52px;
     width:45px;
     height:52px;
 
    flex:0 0 52px;
     height:45px;
     display:grid;
 
    place-items:center;
     border-radius:50%;
     border-radius:50%;
 
    background:var(--gold-light);
     object-fit:cover;
    border:1px solid rgba(244,185,66,.2);
 
    color:var(--gold);
     font-size:1.25rem;
}
}


خط ۱٬۷۰۶: خط ۱٬۷۱۷:
     .section{
     .section{


         padding:75px 0;
         padding:45px 0;


     }
     }
خط ۱٬۷۶۳: خط ۱٬۷۷۴:
     .section{
     .section{


         min-height:100vh;
         min-height:auto;


         padding:15px 0;
         padding:35px 0;


     }
     }
خط ۱٬۸۴۲: خط ۱٬۸۵۳:
         grid-template-columns:1fr;
         grid-template-columns:1fr;


    }
    .skill-image{
        height:155px;
     }
     }


خط ۱٬۸۹۶: خط ۱٬۹۱۱:
     .section-title{
     .section-title{


         margin-bottom:10px;
         margin-bottom:20px;


     }
     }
خط ۱٬۹۴۹: خط ۱٬۹۶۴:




/* =========================================================
.card-content,
  REDUCED MOTION
.contact-item > div:last-child,
========================================================= */
.form-group label,
.form-group input,
.form-group textarea{
    text-align:right;
}


@media(prefers-reduced-motion:reduce){
.footer{
    text-align:center;
}


    *,
.skill-image + .skill-title{
     *::before,
     margin-top:0;
    *::after{
}


        scroll-behavior:auto !important;
/* =========================================================
  FINAL ALIGNMENT & SPACING
========================================================= */


        transition:none !important;
.section > .container{
 
    width:min(calc(100% - 50px),1180px);
        animation:none !important;
    margin-inline:auto;
 
}
    }


.section-title,
.about-content,
.card,
.skill,
.timeline,
.contact-list,
.contact-form{
    text-align:right;
}
}


</style>
.hero-inner,
.hero-info,
.about-grid,
.skills-grid,
.cards-grid,
.timeline,
.contact-grid,
.cta-inner{
    margin-inline:auto;
}


</head>
.about-grid{
    max-width:1080px;
}


.cards-grid{
    max-width:1180px;
}


<body>
@media(max-width:900px){
    .section > .container{
        width:min(calc(100% - 40px),720px);
    }


<div class="page">
    .counter-grid{
        grid-template-columns:repeat(3,1fr);
    }
}


@media(max-width:600px){
    .section > .container{
        width:calc(100% - 28px);
    }


<!-- =====================================================
    .hero-buttons{
    LEFT ICON MENU
        justify-content:stretch;
===================================================== -->
    }


<aside class="left-sidebar">
    .cards-grid{
        gap:15px;
    }
}


/* =========================================================
  REDUCED MOTION
========================================================= */


    <div class="sidebar-logo">
@media(prefers-reduced-motion:reduce){


        <div class="logo-circle">
    *,
    *::before,
    *::after{


             <i class="fa-solid fa-user"></i>
        scroll-behavior:auto !important;
 
        transition:none !important;
 
        animation:none !important;
 
    }
 
}
 
</style>
 
</head>
 
 
<body>
 
<div class="page">
 
 
<!-- =====================================================
    LEFT ICON MENU
===================================================== -->
 
<aside class="left-sidebar">
 
 
    <div class="sidebar-logo">
 
        <div class="logo-circle">
 
             <i class="fa-solid fa-user"></i>


         </div>
         </div>
خط ۲٬۳۰۷: خط ۲٬۴۰۰:
                 </div>
                 </div>


                <div class="hero-info-box">


            </div>
                    <i class="fa-solid fa-bullseye"></i>


         </div>
                    <strong>
                        تمرکز
                    </strong>
 
                    <span>
                        هدفمندی بیشتر
                    </span>
 
                </div>
 
 
            </div>
 
         </div>


     </div>
     </div>
خط ۲٬۴۱۴: خط ۲٬۵۲۱:
===================================================== -->
===================================================== -->


<section class="section">
<section class="section counters">


     <div>
     <div class="container">


         <div class="counter-grid">
         <div class="counter-grid">
خط ۲٬۴۷۶: خط ۲٬۵۸۳:
                 <span>
                 <span>
                     رضایت
                     رضایت
                </span>
            </div>
            <div class="counter">
                <i class="fa-solid fa-chalkboard-user"></i>
                <strong>
                    50+
                </strong>
                <span>
                    کارگاه آموزشی
                </span>
            </div>
            <div class="counter">
                <i class="fa-solid fa-award"></i>
                <strong>
                    10+
                </strong>
                <span>
                    سال تجربه
                 </span>
                 </span>


خط ۲٬۵۱۴: خط ۲٬۶۴۹:


             <div class="skill">
             <div class="skill">
                <div class="skill-image">
                    <img src="https://dl.faraghaib.ir/m/260021-01/260021-01-01.jpg"
                        alt="تصویر حوزه تخصصی خودشناسی"
                        loading="lazy">
                </div>


                 <div class="skill-title">
                 <div class="skill-title">
خط ۲٬۵۳۷: خط ۲٬۶۷۸:


             <div class="skill">
             <div class="skill">
                <div class="skill-image">
                    <img src="https://dl.faraghaib.ir/m/260021-01/260021-01-01.jpg"
                        alt="تصویر حوزه تخصصی خودشناسی"
                        loading="lazy">
                </div>


                 <div class="skill-title">
                 <div class="skill-title">
خط ۲٬۵۶۰: خط ۲٬۷۰۷:


             <div class="skill">
             <div class="skill">
                <div class="skill-image">
                    <img src="https://dl.faraghaib.ir/m/260021-01/260021-01-01.jpg"
                        alt="تصویر حوزه تخصصی خودشناسی"
                        loading="lazy">
                </div>


                 <div class="skill-title">
                 <div class="skill-title">
خط ۲٬۵۸۳: خط ۲٬۷۳۶:


             <div class="skill">
             <div class="skill">
                <div class="skill-image">
                    <img src="https://dl.faraghaib.ir/m/260021-01/260021-01-01.jpg"
                        alt="تصویر حوزه تخصصی خودشناسی"
                        loading="lazy">
                </div>


                 <div class="skill-title">
                 <div class="skill-title">
خط ۲٬۸۷۰: خط ۳٬۰۲۹:
                     </p>
                     </p>


                </div>
            </article>
            <article class="card course-card">
                <div class="card-image">
                    <img
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-01.jpg"
                    alt="دوره مهارت‌های فردی"
                    loading="lazy">
                </div>
                <div class="card-content">
                    <span class="card-tag">مهارت فردی</span>
                    <h3>تقویت مهارت‌های فردی</h3>
                    <p>
                        تمرین مهارت‌های کاربردی برای
                        ارتباط بهتر با خود و دیگران.
                    </p>
                </div>
            </article>
            <article class="card course-card">
                <div class="card-image">
                    <img
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-01.jpg"
                    alt="دوره آگاهی فردی"
                    loading="lazy">
                </div>
                <div class="card-content">
                    <span class="card-tag">آگاهی</span>
                    <h3>افزایش آگاهی فردی</h3>
                    <p>
                        شناخت الگوهای ذهنی و ایجاد
                        انتخاب‌های آگاهانه‌تر در زندگی.
                    </p>
                </div>
            </article>
            <article class="card course-card">
                <div class="card-image">
                    <img
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-01.jpg"
                    alt="کارگاه رشد فردی"
                    loading="lazy">
                </div>
                <div class="card-content">
                    <span class="card-tag">رشد فردی</span>
                    <h3>کارگاه مسیر رشد</h3>
                    <p>
                        بررسی موانع رشد و ساختن مسیر
                        عملی برای پیشرفت شخصی.
                    </p>
                 </div>
                 </div>


خط ۳٬۰۰۶: خط ۳٬۲۳۲:
                 <div class="testimonial-person">
                 <div class="testimonial-person">


                     <img
                     <div class="testimonial-avatar" aria-label="کارکتر خانم">
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-01.jpg"
                        <i class="fa-solid fa-person-dress"></i>
                     alt="شرکت کننده دوره">
                     </div>


                     <div>
                     <div>
خط ۳٬۰۴۰: خط ۳٬۲۶۶:
                 <div class="testimonial-person">
                 <div class="testimonial-person">


                     <img
                     <div class="testimonial-avatar" aria-label="کارکتر آقا">
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-01.jpg"
                        <i class="fa-solid fa-person"></i>
                    alt="شرکت کننده کارگاه">
                    </div>


                     <div>
                     <div>
خط ۳٬۰۷۴: خط ۳٬۳۰۰:
                 <div class="testimonial-person">
                 <div class="testimonial-person">


                     <img
                     <div class="testimonial-avatar" aria-label="کارکتر خانم">
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-01.jpg"
                        <i class="fa-solid fa-person-dress"></i>
                     alt="شرکت کننده دوره">
                     </div>


                     <div>
                     <div>
برگرفته از «https://fa.faraghaib.ir/wiki/تست»