Utilize our about us examples to effortlessly design your website, make sure that "null-components" CSS file is included in your project.

Example 1: 

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti reiciendis aut consequuntur a amet, adipisci inventore aspernatur corporis id! Corporis accusamus sed quidem. Officiis assumenda fuga voluptatem, totam tempora sequi rerum. Cum voluptate inventore aut explicabo, animi tempora accusamus neque esse voluptatem deleniti accusantium, illo sunt molestias, ad suscipit nihil quod eaque impedit facilis. Voluptatem similique provident a voluptatum ab ut unde enim nobis, ipsum consequatur! Deleniti dicta eum magni aperiam odio ullam aspernatur, ipsum odit quisquam ratione fugit qui ab eaque voluptatum autem eveniet modi voluptas pariatur sed laboriosam veniam dolore deserunt? Id assumenda earum neque unde odit atque!

Lorem

    <section class="null-about-us-section about-us-example-1 null-padding-top-50 null-padding-bottom-50">

        <div class="null-container">
    
            <div class="null-display-grid null-container-grid-2 null-position-relative null-about-us-grid">
    
                <div class="null-about-us-content-container">

                    <h2 class="null-about-us-content-title">
                        Lorem ipsum
                    </h2><!--End null-about-us-content-title-->

                    <p class="null-about-us-content-description null-text-align-justify null-margin-bottom-20">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti reiciendis aut consequuntur a amet,
                        adipisci inventore aspernatur corporis id! Corporis accusamus
                        sed quidem. Officiis assumenda fuga voluptatem, totam tempora sequi rerum. Cum voluptate inventore aut explicabo, animi tempora accusamus neque
                        esse voluptatem deleniti accusantium, illo sunt molestias, ad suscipit nihil quod eaque impedit facilis. Voluptatem similique provident a voluptatum ab ut unde
                        enim nobis, ipsum consequatur! Deleniti dicta eum magni aperiam odio ullam aspernatur, ipsum odit quisquam ratione fugit qui ab eaque
                        voluptatum autem eveniet modi voluptas pariatur sed laboriosam veniam dolore deserunt? Id assumenda earum neque unde odit atque!
                    </p><!--End null-about-us-content-description-->

                    <a  class="null-button null-button-secondary" href="javascript:void(null)">
                        Lorem 
                    </a><!--End null-button-->

                </div><!--End null-about-us-content-container-->
        
        
        
                <div class="null-display-grid null-container-grid-2">
        
                    <div class="null-about-us-images-container null-display-flex">
        
                        <img class="null-about-us-images-image-one null-position-relative null-border-radius" alt="Null Iamge" src="" />
                        <img class="null-about-us-images-image-two null-position-relative null-border-radius" alt="Null Iamge" src="" />
        
                    </div><!--End null-about-us-images-container-->
        
                </div><!--End null-container-grid-2-->
    
            </div><!--End null-display-grid -->

        </div><!--End null-container-->


    </section><!--End null-about-us-section-->

/* Start About Us Example 1 */

.about-us-example-1 .null-about-us-images-image-one {
    z-index: 1;
    left: 70px;
}

.null-rtl .about-us-example-1 .null-about-us-images-image-one {
    left: -70px;
}

.about-us-example-1 .null-about-us-images-image-two {
    top: 60px;
}

@media screen and (max-width: 768px) {

    .about-us-example-1 .null-about-us-images-container {
        width: 65%;
        margin: auto;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .about-us-example-1 .null-about-us-images-image-two {
        right: 70px;
    }

    .null-rtl .about-us-example-1 .null-about-us-images-image-two {
        right: -70px;
    }

}


@media screen and (max-width: 992px) {

    .null-about-us-images-container {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    .about-us-example-1 .null-about-us-grid {
        -ms-grid-columns: 1fr;
        grid-template-columns: repeat(1, 1fr);
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 0;
    }

}

/* End About Us Example 1 */

Example 2:

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, libero nostrum dicta voluptate provident architecto modi animi esse, iure tempora odio numquam ipsam a temporibus rerum facere beatae at! Quod id autem sint molestias hic corporis sapiente fugiat ut odio deleniti veniam quae possimus, repellendus reiciendis corrupti eius. Similique nam est impedit quos ad ducimus laudantium commodi in ipsa voluptatibus officia, ex enim incidunt magni illum numquam libero perferendis repellat quis nihil earum qui? Alias, quia magnam magni neque error tempora atque eum necessitatibus nulla consequuntur unde? Vero est, eveniet accusamus ipsum excepturi dicta id nam sunt in fugiat? Saepe aliquam omnis

Lorem

<section class="null-about-us-section about-us-example-2 null-padding-top-50 null-padding-bottom-50">

    <div class="null-container">

        <div class="null-display-grid null-container-grid-2 null-gap-20">


        <div class="null-about-us-content-container null-text-align-justify">

            <h2 class="null-about-us-content-title">
                Lorem ipsum
            </h2><!--End null-about-us-content-title-->

            <p class="null-about-us-content-description null-margin-bottom-20">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, libero nostrum dicta voluptate provident architecto modi animi esse, iure
                tempora odio numquam ipsam a temporibus rerum facere beatae at! Quod id autem sint molestias hic corporis sapiente fugiat ut odio deleniti
                veniam quae possimus, repellendus reiciendis corrupti eius. Similique nam est impedit quos ad ducimus laudantium commodi in ipsa voluptatibus
                officia, ex enim incidunt magni illum numquam libero perferendis repellat quis nihil earum qui? Alias, quia magnam magni neque error tempora
                atque eum necessitatibus nulla consequuntur unde? Vero est, eveniet accusamus ipsum excepturi dicta id nam sunt in fugiat? Saepe aliquam omnis
            </p><!--End null-about-us-content-description-->

            <a class="null-button null-button-primary" href="javascript:void(null)" >
                Lorem
            </a><!--End null-button-->

        </div><!--End null-about-us-content-container-->


        <div class="null-about-us-images-container null-flex null-gap-20">

            <div class="null-about-us-image-container">
                <img src="" alt="Null Image" class="null-about-us-image-one">
            </div><!--End null-about-us-image-container-->

            <div class="null-about-us-image-container">
                <img src="" alt="Null Image" class="null-about-us-image-two">
            </div><!--End null-about-us-image-container-->

        </div><!--End null-about-us-images-container-->


        </div><!--End null-display-grid-->
    </div><!--End null-container-->

</section>

/* Start About Us Example 2 */

.about-us-example-2 .null-about-us-image-container {
    overflow: hidden;
    border-radius: var(--null-border-radius);
}

.about-us-example-2 .null-about-us-image-one {
    width: 130px;
}

.about-us-example-2 .null-about-us-image-two {
    width: 180px;
}

.about-us-example-2 .null-about-us-image-one,
.about-us-example-2 .null-about-us-image-two {
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.about-us-example-2 .null-about-us-image-one:hover,
.about-us-example-2 .null-about-us-image-two:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

@media screen and (min-width: 1024px) {
    
    .about-us-example-2 .null-about-us-image-one {
        width: 230px;
    }

    .about-us-example-2 .null-about-us-image-two {
        width: 290px;
    }

}

/* End About Us Example 2 */

Example 3:

<section class="null-about-us-section about-us-example-3 null-padding-20 null-background-light-grey">

    <div class="null-container">


        <div class="null-about-us-title-container">

            <h2 class="null-about-us-title">
                Lorem ipsum
            </h2><!--End null-about-us-title-->

        </div><!--End null-about-us-title-container-->


        <div class="null-about-us-content-container">
        
            <p class="null-about-us-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. At, quisquam repellendus vero velit laboriosam enim molestias, temporibus soluta debitis libero,
                eum nemo inventore consequuntur tempora earum excepturi ad eligendi magnam accusamus. Dicta libero, rerum sequi numquam veniam, dolores, reprehenderit a
                minima perspiciatis cumque molestiae pariatur aliquam officia maxime aut! Est ullam ipsam harum accusantium voluptatem fugit illo quod eos molestiae? Nulla
                quisquam excepturi molestiae adipisci totam. Quod ab quia repellat officiis animi quis enim recusandae commodi aperiam reiciendis iure fugiat ea, eveniet,
            </p><!--End null-about-us-content-->
        
        </div><!--End null-about-us-content-title-container-->


        <div class="null-about-us-button-container">
            <a href="#" class="null-button null-button-primary">Lorem</a>
        </div><!--End null-about-us-button-container-->


    </div><!--End null-container-->

</section>

/* Start About Us Example 3 */

.about-us-example-3 .null-about-us-title {
content: '';
-webkit-border-start: 5px solid var(--null-color-main);
border-inline-start: 5px solid var(--null-color-main);
padding: 0 5px;
}

/* End About Us Example 3 */

Example 4:

About Us

Suscipit quisquam libero dolores saepe rem perferendis hic at et, eligendi quo cupiditate perspiciatis aspernatur labore sed architecto reprehenderit recusandae voluptates itaque harum, ipsum obcaecati pariatur soluta. Quas, repudiandae similique. Iste voluptatum amet consectetur optio quia perspiciatis.

    <section class="null-about-us-section about-us-example-4 null-padding-top-50 null-padding-bottom-50">

        <div class="null-container">

            <h2 class="null-text-align-center null-color-main">Lorem</h2>
            <p class="null-margin-bottom-20">Lorem</p>
    
            <div class="null-display-grid null-container-grid-2 null-position-relative null-about-us-grid">
    
                <div class="null-display-grid null-container-grid-2">
                
                    <div class="null-about-us-images-container null-display-flex">
                
                        <img class="null-about-us-images-image-one null-position-relative null-border-radius" alt="Null Iamge"
                            src="" />
                        <img class="null-about-us-images-image-two null-position-relative null-border-radius" alt="Null Iamge"
                            src="" />
                
                    </div><!--End null-about-us-images-container-->
                
                </div><!--End null-container-grid-2-->
        
        
        
                <div class="null-display-grid null-container-grid-2">
        
                    <div class="null-about-us-images-container null-display-flex">
        
                        <img class="null-about-us-images-image-one null-position-relative null-border-radius" alt="Null Iamge" src="" />
                        <img class="null-about-us-images-image-two null-position-relative null-border-radius" alt="Null Iamge" src="" />
        
                    </div><!--End null-about-us-images-container-->
        
                </div><!--End null-container-grid-2-->
    
            </div><!--End null-display-grid -->

        </div><!--End null-container-->


    </section><!--End null-about-us-section-->

/* Start About Us Example 4 */

.about-us-example-4 .null-about-us-images-image-one {
    z-index: 1;
    left: 70px;
}

.null-rtl .about-us-example-4 .null-about-us-images-image-one {
    left: -70px;
}

.about-us-example-4 .null-about-us-images-image-two {
    top: 60px;
}

@media screen and (max-width: 768px) {

    .about-us-example-4 .null-about-us-images-container {
        width: 65%;
        margin: auto;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .about-us-example-4 .null-about-us-images-image-two {
        right: 70px;
    }

    .null-rtl .about-us-example-4 .null-about-us-images-image-two {
        right: -70px;
    }

}


@media screen and (max-width: 992px) {

    .null-about-us-images-container{
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    .about-us-example-4 .null-about-us-grid {
        -ms-grid-columns: 1fr;
        grid-template-columns: repeat(1, 1fr);
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 0;
    }

}

/* End About Us Example 4 */