<?php include 'header.php'; ?>

<style>
    .web-app-top-bar {
        display: none !important
    }

    @media (min-width: 1200px) {
        .container {
            max-width: 1600px;
        }
    }

</style>

<div class="page default-layout page-name">

    <div class="ds-section">

        <div class="ds-title">
            <h1 class="text-center"> Typography </h1>
        </div>

        <div class="container">

            <div class="d-flex justify-content-between align-items-center mb-5">
                <div class="display-4"> Family <br /> <span class="bold"> Alexandria </span> </div>
                <div class="display-4 text-right"> عائلة خط <br /> <span class="bold"> الأسكنــــــدرية </span> </div>
            </div>

            <div class="ds-sub-section mb-4">

                <h1 class="text-left"> Heading 1 ( 32px ) </h1>

                <div class="row h1">
                    <div class="col font-weight-bold"> Heading Bold <br /> 600 </div>
                    <div class="col font-weight-medium"> Heading Medium <br /> 500 </div>
                    <div class="col font-weight-regular"> Heading Regular <br /> 400 </div>
                    <div class="col font-weight-light"> هيدنج لايت <br /> 300 </div>
                    <div class="col font-weight-extra-light"> هيدنج إكسترالايت <br /> 200 </div>
                </div>

            </div> <!-- ds-sub-section -->


            <div class="ds-sub-section mb-4">

                <h2 class="text-left"> Heading 2 ( 28px ) </h2>

                <div class="row h2">
                    <div class="col font-weight-bold"> Heading Bold <br /> 600 </div>
                    <div class="col font-weight-medium"> Heading Medium <br /> 500 </div>
                    <div class="col font-weight-regular"> Heading Regular <br /> 400 </div>
                    <div class="col font-weight-light"> هيدنج لايت <br /> 300 </div>
                    <div class="col font-weight-extra-light"> هيدنج إكسترالايت <br /> 200 </div>
                </div>

            </div> <!-- ds-sub-section -->



            <div class="ds-sub-section mb-4">

                <h3 class="text-left"> Heading 3 ( 25px ) </h3>

                <div class="row h3">
                    <div class="col font-weight-bold"> Heading Bold <br /> 600 </div>
                    <div class="col font-weight-medium"> Heading Medium <br /> 500 </div>
                    <div class="col font-weight-regular"> Heading Regular <br /> 400 </div>
                    <div class="col font-weight-light"> هيدنج لايت <br /> 300 </div>
                    <div class="col font-weight-extra-light"> هيدنج إكسترالايت <br /> 200 </div>
                </div>

            </div> <!-- ds-sub-section -->



            <div class="ds-sub-section mb-4">

                <h4 class="text-left"> Heading 4 ( 22px ) </h4>

                <div class="row h4">
                    <div class="col font-weight-bold"> Heading Bold <br /> 600 </div>
                    <div class="col font-weight-medium"> Heading Medium <br /> 500 </div>
                    <div class="col font-weight-regular"> Heading Regular <br /> 400 </div>
                    <div class="col font-weight-light"> هيدنج لايت <br /> 300 </div>
                    <div class="col font-weight-extra-light"> هيدنج إكسترالايت <br /> 200 </div>
                </div>

            </div> <!-- ds-sub-section -->





            <div class="ds-sub-section mb-4">

                <h5 class="text-left"> Heading 5 ( 20px ) </h5>

                <div class="row h5">
                    <div class="col font-weight-bold"> Heading Bold <br /> 600 </div>
                    <div class="col font-weight-medium"> Heading Medium <br /> 500 </div>
                    <div class="col font-weight-regular"> Heading Regular <br /> 400 </div>
                    <div class="col font-weight-light"> هيدنج لايت <br /> 300 </div>
                    <div class="col font-weight-extra-light"> هيدنج إكسترالايت <br /> 200 </div>
                </div>

            </div> <!-- ds-sub-section -->


            <div class="ds-sub-section mb-4">

                <h6 class="text-left"> Heading 6 ( 18px ) </h6>

                <div class="row h6">
                    <div class="col font-weight-bold"> Heading Bold <br /> 600 </div>
                    <div class="col font-weight-medium"> Heading Medium <br /> 500 </div>
                    <div class="col font-weight-regular"> Heading Regular <br /> 400 </div>
                    <div class="col font-weight-light"> هيدنج لايت <br /> 300 </div>
                    <div class="col font-weight-extra-light"> هيدنج إكسترالايت <br /> 200 </div>
                </div>

            </div> <!-- ds-sub-section -->


            <div class="ds-sub-section mb-4">

                <p class="font-size-large"> large ( 16px ) </p>

                <div class="row font-size-large">
                    <div class="col font-weight-bold"> large Bold <br /> 600 </div>
                    <div class="col font-weight-medium"> large Medium <br /> 500 </div>
                    <div class="col font-weight-regular"> large Regular <br /> 400 </div>
                    <div class="col font-weight-light"> لارج لايت <br /> 300 </div>
                    <div class="col font-weight-extra-light"> لارج إكسترالايت <br /> 200 </div>
                </div>

            </div> <!-- ds-sub-section -->



            <div class="ds-sub-section mb-4">

                <p class="font-size-base"> large ( 14px ) </p>

                <div class="row font-size-base">
                    <div class="col font-weight-bold"> large Bold <br /> 600 </div>
                    <div class="col font-weight-medium"> large Medium <br /> 500 </div>
                    <div class="col font-weight-regular"> large Regular <br /> 400 </div>
                    <div class="col font-weight-light"> لارج لايت <br /> 300 </div>
                    <div class="col font-weight-extra-light"> لارج إكسترالايت <br /> 200 </div>
                </div>

            </div> <!-- ds-sub-section -->


            <div class="ds-sub-section mb-4">

                <p class="font-size-small"> large ( 12px ) </p>

                <div class="row font-size-small">
                    <div class="col font-weight-bold"> large Bold <br /> 600 </div>
                    <div class="col font-weight-medium"> large Medium <br /> 500 </div>
                    <div class="col font-weight-regular"> large Regular <br /> 400 </div>
                    <div class="col font-weight-light"> لارج لايت <br /> 300 </div>
                    <div class="col font-weight-extra-light"> لارج إكسترالايت <br /> 200 </div>
                </div>

            </div> <!-- ds-sub-section -->







            <hr>


            <h1> Exmaple title for heading 1</h1>

            <p> Exmaple paragraph base font size : Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p>


        </div> <!-- container -->

    </div> <!-- ds-section -->

</div> <!-- page -->

<?php include 'footer.php'; ?>