@extends('layouts.master')

@section('main-content')
    <div class="breadcrumb">
                <h1>تایپوگرافی</h1>
                <ul>
                    <li><a href="">ابزار های طراحی</a></li>
                    <li>تایپوگرافی</li>
                </ul>
            </div>

            <div class="separator-breadcrumb border-top"></div>

            <!-- begin::typography -->
            <section class="typography">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                <!-- left-content -->
                                <div class="col-md-6">
                                    <!-- begin::headings -->
                                    <div class="card mt-4 mt-4">
                                        <div class="card-header bg-transparent ">
                                            <h3 class="card-title">عناوین</h3>
                                        </div>
                                        <div class="card-body">

                                            <div class="card-title">
                                                <span class="section-info">
                                                    همه HTML عناوین, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code>, در دسترس
                                                </span>

                                                <div class="row mt-4 mb-4">
                                                    <div class="col-md-6 ">
                                                        <h1 class="heading">h1. عناوین 1</h1>
                                                        <div class="br"></div>
                                                        <h2 class="heading">h2. عناوین 2</h2>
                                                        <div class="br"></div>
                                                        <h3 class="heading">h3. عناوین 3</h3>
                                                        <div class="br"></div>
                                                        <h3 class="heading">h3. عناوین 3</h3>
                                                        <div class="br"></div>
                                                        <h4 class="heading">h4. عناوین 4</h4>
                                                        <div class="br"></div>
                                                        <h5 class="heading">h5. عناوین 5</h5>
                                                        <div class="br"></div>
                                                        <h6 class="heading">h6. عناوین 6</h6>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <h1 class="heading text-primary">h1. عناوین 1</h1>
                                                        <div class="card-title"></div>
                                                        <h2 class="heading text-secondary">h2. عناوین 2</h2>
                                                        <div class="br"></div>
                                                        <h3 class="heading text-success">h3. عناوین 3</h3>
                                                        <div class="br"></div>
                                                        <h3 class="heading text-danger">h3. عناوین 3</h3>
                                                        <div class="br"></div>
                                                        <h4 class="heading text-warning">h4. عناوین 4</h4>
                                                        <div class="br"></div>
                                                        <h5 class="heading text-info">h5. عناوین 5</h5>
                                                        <div class="br"></div>
                                                        <h6 class="heading text-info">h6. عناوین 6</h6>
                                                    </div>
                                                </div>

                                                <div class="br"></div>

                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <span class="section-info">
                                                        از کلاسهای برنامه شامل استفاده کنید تا متن عنوان ثانویه کوچک را از نو بسازید.
                                                        </span>

                                                        <div class="br"></div>
                                                        <h3 class="heading">عنوان صفحه نمایش فانتزی
                                                            <small class="text-mute">با متن ثانویه محو شده</small>
                                                        </h3>

                                                        <span class="section-info">
                                                        سبک های عنوان بزرگتر ، کمی بیشتر مورد نظر.
                                                        </span>


                                                        <div class="display-content">
                                                            <h3 class="heading display-1">نمایش دادن 1</h3>
                                                            <h3 class="heading display-2">نمایش دادن 2</h3>
                                                            <h3 class="heading display-3">نمایش دادن 3</h3>
                                                        </div>

                                                        <div class="br"></div>

                                                        <span class="section-info">
                                                        یک پاراگراف را با اضافه کردن مشخص کنید <code>.lead</code>
                                                        </span>


                                                        <div class="content-section">
                                                            <p class="lead text-mute">
                                                                Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end::headings -->

                                    <!-- begin:general -->
                                    <div class="card mt-4 mt-4">
                                        <div class="card-header bg-transparent ">
                                            <h3 class="card-title">عمومی</h3>
                                        </div>
                                        <div class="card-body">

                                            <div class="card-title">
                                                <span class="section-info">
                                                طراحی عناصر HTML5 درون خطی مشترک:
                                                    </span>

                                                <div class="row mt-4 mb-4">
                                                    <div class="col-md-12">
                                                        <p>می توانید از برچسب مارک استفاده کنید <mark>برجسته</mark> متن.</p>
                                                        <div class="br"></div>
                                                        <p><del>این خط از متن به عنوان متن حذف شده رفتار می شود.</del></p>
                                                        <div class="br"></div>
                                                        <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
                                                        <div class="br"></div>
                                                        <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
                                                        <div class="br"></div>
                                                        <p><u>This line of text will render as underlined</u></p>
                                                        <div class="br"></div>
                                                        <p><small>This line of text is meant to be treated as fine print.</small></p>
                                                        <div class="br"></div>
                                                        <p><strong>This line rendered as bold text.</strong></p>
                                                        <div class="br"></div>
                                                        <p><em>This line rendered as italicized text.</em></p>
                                                    </div>

                                                </div>

                                                <span class="section-info">
                                                        Stylized abbreviations implementation of HTML’s <code>&lt;abbr&gt;</code> element:
                                                    </span>

                                                <div class="section-content">
                                                    <p><abbr title="attribute">attr</abbr></p>
                                                    <p><abbr title="HyperText Markup Language">HTML</abbr></p>
                                                </div>

                                                <div class="br"></div>


                                                <span class="section-info mb-4">
                                                نقل قول از محتوا:
                                                    </span>

                                                <div class="br"></div>

                                                <blockquote class="blockquote">
                                                    <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                                    <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                                </blockquote>


                                                <blockquote class="blockquote">
                                                    <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                                    <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                                </blockquote>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end:general -->
                                </div>

                                <!-- end::left-content -->

                                <!-- right-content -->
                                <div class="col-md-6 ">
                                    <!-- begin::Text -->
                                    <div class="card mt-4 mt-4">
                                        <div class="card-header bg-transparent ">
                                            <h3 class="card-title">متن</h3>
                                        </div>
                                        <div class="card-body">

                                            <div class="card-title">
                                                <span class="section-info">
                                                مثال های متن اصلی:
                                                    </span>

                                                <div class="row mt-4 mb-4">
                                                    <div class="col-md-12">
                                                        <p><span>متن نمونه</span></p>
                                                        <div class="br"></div>
                                                        <p><span class="t-font-bold">مثال متن جسورانه</span></p>
                                                        <div class="br"></div>
                                                        <p><span class="t-font-bolder">به عنوان مثال متن ضخیم تر</span></p>
                                                        <div class="br"></div>
                                                        <p><span class="t-font-boldest">به عنوان مثال متن بلندترین متن</span></p>
                                                        <div class="br"></div>
                                                        <p><span class="t-font-u">مثال متن بزرگ</span></p>
                                                    </div>

                                                </div>


                                                <span class="section-info">
                                                          حالت رنگ ها:
                                                        </span>

                                                <div class="row mt-4 mb-4">
                                                    <div class="col-md-12">

                                                        <p><span class="text-success">متن حالت موفقیت آمیز</span></p>
                                                        <div class="br"></div>
                                                        <p><span class="text-warning">متن حالت هشدار دهنده</span></p>
                                                        <div class="br"></div>
                                                        <p><span class="text-info">متن حالت اطلاعات</span></p>
                                                        <div class="br"></div>
                                                        <p><span class="text-danger">متن حالت خطر</span></p>
                                                        <div class="br"></div>
                                                        <p><span class="text-primary">متن حالت اولیه</span></p>
                                                    </div>

                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <!-- end::text -->

                                    <!-- begin::links -->
                                    <div class="card mt-4 mt-4">
                                        <div class="card-header bg-transparent ">
                                            <h3 class="card-title">لینک</h3>
                                        </div>
                                        <div class="card-body">

                                            <div class="card-title">
                                                <span class="section-info">
                                                مثالهای پیوند اصلی:
                                                        </span>

                                                <div class="row mt-4 mb-4">
                                                    <div class="col-md-12">
                                                        <p><a href="" class="typo_link text-primary">متن نمونه</a></p>
                                                        <div class="br"></div>
                                                        <p><a href="" class="typo_link text-primary t-font-bold">مثال متن bold</a></p>
                                                        <div class="br"></div>
                                                        <p><a href="" class="typo_link text-primary t-font-bolder">به عنوان مثال متن ضخیم تر</a></p>
                                                        <div class="br"></div>
                                                        <p><a href="" class="typo_link text-primary t-font-boldest">به عنوان مثال متن ضخیم ترین</a></p>
                                                        <div class="br"></div>
                                                        <p><a href="" class="typo_link text-primary t-font-u">مثال متن بزرگ</a></p>
                                                    </div>

                                                </div>


                                                <span class="section-info">
                                                                حالت رنگ ها:
                                                            </span>

                                                <div class="row mt-4 mb-4">
                                                    <div class="col-md-12">
                                                        <p><a href="" class="typo_link text-success">متن حالت موفقیت آمیز</a></p>
                                                        <div class="br"></div>
                                                        <p><a href="" class="typo_link text-warning">متن حالت هشدار دهنده</a></p>
                                                        <div class="br"></div>
                                                        <p><a href="" class="typo_link text-info">متن حالت اطلاعات</a></p>
                                                        <div class="br"></div>
                                                        <p><a href="" class="typo_link text-danger">متن حالت خطر</a></p>
                                                        <div class="br"></div>
                                                        <p><a href="" class="typo_link text-primary">متن حالت اولیه</a></p>
                                                    </div>

                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <!-- end::links -->

                                    <!-- divider -->
                                    <div class="card mt-4 mt-4">
                                        <div class="card-header bg-transparent ">
                                            <h3 class="card-title">تقسیم کننده</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="divider">
                                                <span></span>
                                                <span>یا</span>
                                                <span></span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end::divider -->
                                </div>
                                <!-- end::right-content -->


                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- end::typography -->


@endsection

@section('page-js')

@endsection
