Null JS

Hero UI

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

Example 1:

 

Lorem ipsum dolor sit amet consectetur unde

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis autem voluptatem ullam minima recusandae assumenda accusamus molestias, ad, odit sed corrupti accusantium iure maxime aliquam in mollitia, unde quas. Laborum.

HTML | 
<!-- Start null hero-->

<section class="null-hero hero-example-1 null-position-relative">

    <div class="null-hero-image-container">
        
        <img src="" alt=""/>

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

    <div class="null-hero-overlay null-position-absolute"></div><!--End null-hero-overlay-->

    <div class="null-hero-content-container null-position-absolute null-color-white null-display-flex null-justify-content-flex-end">

        <div class="null-hero-content-size">
            <h1 class="null-hero-content-title null-font-size-25 null-font-weight-bold">Lorem ipsum dolor sit amet consectetur unde</h1>
            <p class="null-hero-content-description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Perferendis autem voluptatem ullam minima recusandae assumenda accusamus molestias, ad, odit sed
                corrupti accusantium iure maxime aliquam in mollitia, unde quas. Laborum.</p>
        </div><!--End null-hero-content-size-->

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

</section><!--End null-hero-->



<!-- End null hero-->
CSS | 
/* Start Hero Example 1 */


.hero-example-1 .null-hero-image-container {
height: 500px;
width: 100%;
}

.hero-example-1 .null-hero-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}

.hero-example-1 .null-hero-overlay {
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0 0 0 / 20%);
}


.hero-example-1 .null-hero-content-container {
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 50%;
padding: 50px 50px;
background-color: rgb(64 85 236 / 50%);
}

.null-rtl .hero-example-1 .null-hero-content-container {
right: 0;
}

.hero-example-1 .null-hero-content-size {
max-width: 600px;
}

@media (max-width:800px) {
.hero-example-1 .null-hero-content-container {
    width: 100%;
    padding: 30px !important;
    }
}


/* End Hero Example 1 */

Example 2:

 

Lorem ipsum dolor sit ametdte

 Read More
HTML | 
<!-- Start null hero-->

<section class="null-hero hero-example-2 null-position-relative">

    <div class="null-hero-image-container">

        <img src="" alt="" />

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

    <div class="null-hero-overlay null-position-absolute"></div><!--End null-hero-overlay-->

    <div class="null-hero-content-container null-position-absolute null-color-white null-flex null-text-align-center">
        
        <div class="null-hero-content-size">

            <h1 class="null-hero-content-title null-font-weight-bold">
                Lorem ipsum dolor sit ametdte
            </h1><!--End null-hero-content-title-->

            <a class="null-button null-color-white null-margin-top-20" href="#" >
                Read More
            </a><!--End null-button-->

        </div><!--End null-hero-content-size-->

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

</section><!--End null-hero-->

<!-- End null hero-->
CSS | 
/* Start Hero Example 2 */

.hero-example-2 .null-hero-image-container {
height: 488px;
width: 100%;
}

.hero-example-2 .null-hero-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}

.hero-example-2 .null-hero-overlay {
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(64, 57, 103, .7);
}


.hero-example-2 .null-hero-content-container {
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
padding: 50px 50px;
}

.hero-example-2 .null-hero-content-container h1 {
font-size: 50px;
}

.hero-example-2 .null-hero-content-container .null-button {
background-color: transparent;
border-color: var(--null-color-white);
width: 150px;
padding:15px;
}

.hero-example-2 .null-hero-content-size {
max-width: 700px;
}

@media (max-width:800px) {
    .hero-example-2 .null-hero-content-container {
        width: 100%;
        padding: 30px !important;
    }

    .hero-example-2 .null-hero-content-container h1 {
        font-size:25px;
    }
}

/* End Hero Example 2 */

Example 3:

 

Lorem ipsum dolor sit ametdte!

Take a tour Read More
HTML | 
<!-- Start null hero-->

<section class="null-hero hero-example-3 null-position-relative">

    <div class="null-hero-image-container">

        <img src="" alt="" />

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

    <div class="null-hero-overlay null-position-absolute"></div><!--End null-hero-overlay-->

    <div class="null-hero-content-container null-position-absolute null-color-white null-flex null-text-align-center">
        
        <div class="null-hero-content-size">

            <h1 class="null-hero-content-title null-font-weight-bold null-margin-bottom-20">
                Lorem ipsum dolor sit ametdte!
            </h1><!--End null-hero-content-title-->

            <div class="null-margin-top-20 null-flex null-gap-20">

                <a class="null-color-white null-font-weight-bold" href="#">
                    Take a tour
                </a><!--End null-color-white-->
                
                <a class="null-button null-color-white" href="#">
                    Read More
                </a><!--End null-button-->

            </div><!--End null-margin-top-20-->

        </div><!--End null-hero-content-size-->

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

</section><!--End null-hero-->

<!-- End null hero-->
CSS | 
/* Start Hero Example 3 */

.hero-example-3 .null-hero-image-container {
height: 488px;
width: 100%;
}

.hero-example-3 .null-hero-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}

.hero-example-3 .null-hero-overlay {
left: 0;
top: 0;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(135deg, rgb(13 88 132 / 88%), rgb(74 72 228 / 31%))
}

.hero-example-3 .null-hero-content-container {
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
padding: 50px 50px;
}

.hero-example-3 .null-hero-content-container h1 {
font-size: 50px;
}

.hero-example-3 .null-hero-content-container .null-button {
background-color: transparent;
border-color: var(--null-color-white);
width: 150px;
padding:15px;
}

.hero-example-3 .null-hero-content-size {
max-width: 900px;
}

@media (max-width:800px) {
    .hero-example-3 .null-hero-content-container {
        width: 100%;
        padding: 30px !important;
    }

    .hero-example-3 .null-hero-content-container h1 {
        font-size:25px;
    }
}

/* End Hero Example 3 */

Example 4:

 

Lorem ipsum dolor ametdte!

Try the Null 10 images/month plan for free.

HTML | 
<!-- Start null hero-->

<section class="null-hero hero-example-4 null-position-relative">

    <div class="null-hero-image-container">

        <img src="" alt="" />

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

    <div class="null-hero-overlay null-position-absolute"></div><!--End null-hero-overlay-->

    <div class="null-hero-content-container null-position-absolute null-color-white null-flex null-text-align-center">
        
        <div class="null-hero-content-size">

            <h1 class="null-hero-content-title null-font-weight-bold">
                Lorem ipsum dolor ametdte!
            </h1><!--End null-hero-content-title-->

            <p class="null-hero-content-description null-font-size-18">
                Try the Null 10 images/month plan for free.
            </p><!--End null-hero-content-description-->

            <div class="null-search-bar-container null-margin-top-30">

                <div class="null-search-bar null-margin-bottom-20">

                    <form class="null-display-flex null-align-items-center null-position-relative">

                        <input class="null-search-bar-input null-background-light-grey null-border-radius" type="text" name="search" placeholder="Search" />
                        
                        <button class="null-button null-button-primary">Search</button>

                    </form><!--End null-display-flex-->

                </div><!--Endnull-search-bar-->

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

        </div><!--End null-hero-content-size-->

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

</section><!--End null-hero-->

<!-- End null hero-->
CSS | 
/* Start Hero Example 4 */

.hero-example-4 .null-hero-image-container {
height: 488px;
width: 100%;
}

.hero-example-4 .null-hero-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}

.hero-example-4 .null-hero-overlay {
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color:rgba(0, 0, 0, .5);
}

.hero-example-4 .null-hero-content-container {
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
padding: 50px 50px;
}

.hero-example-4 .null-hero-content-container h1 {
font-size: 50px;
}

.hero-example-4 .null-hero-content-size {
max-width: 900px;
}

@media (max-width:800px) {
    .hero-example-4 .null-hero-content-container {
        width: 100%;
        padding: 30px !important;
    }

    .hero-example-4 .null-hero-content-container h1 {
        font-size:25px;
    }
}

/* End Hero Example 4 */

Example 5:

 

Lorem ipsum dolor sit amet co nsec tetur adipi sicing

HTML | 
<!-- Start null hero-->

<section class="null-hero hero-example-5 null-position-relative">

    <div class="null-hero-image-container">

        <img src="" alt="" />

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

    <div class="null-hero-overlay null-position-absolute"></div><!--End null-hero-overlay-->

    <div class="null-hero-content-container null-position-absolute null-color-white null-flex null-text-align-center">
        
        <div class="null-container">

            <h1 class="null-hero-content-title null-font-weight-bold">
                Lorem ipsum dolor sit amet co nsec tetur adipi sicing 
            </h1><!--End null-hero-content-title-->

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

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

</section><!--End null-hero-->

<!-- End null hero-->
CSS | 
/* Start Hero Example 5 */

.hero-example-5 .null-hero-image-container {
height: 488px;
width: 100%;
}

.hero-example-5 .null-hero-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}

.hero-example-5 .null-hero-overlay {
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color:rgb(15 116 143 / 70%);
}

.hero-example-5 .null-hero-content-container {
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
padding: 50px 50px;
}

.hero-example-5 .null-hero-content-container h1 {
font-size: 50px;
}

@media (max-width:800px) {
    .hero-example-5 .null-hero-content-container {
        padding: 30px !important;
    }

    .hero-example-5 .null-hero-content-container h1 {
        font-size: 25px;
    }

}

/* End Hero Example 5 */

Example 6:

 

Lorem ipsum dolor sit amet consectetur unde

HTML | 
<!-- Start null hero-->

<section class="null-hero hero-example-6 null-position-relative">

    <div class="null-hero-image-container">

        <img src="" alt="" />

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

    <div class="null-hero-overlay null-position-absolute"></div><!--End null-hero-overlay-->

    <div class="null-hero-content-container null-position-absolute null-color-white null-display-flex null-justify-content-flex-end">

        <div class="null-hero-content-size">

            <h1 class="null-hero-content-title null-font-weight-bold">
                Lorem ipsum dolor sit amet consectetur unde
            </h1><!--End null-hero-content-title-->

        </div><!--End null-hero-content-size-->

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

</section><!--End null-hero-->

<!-- End null hero-->
CSS | 
/* Start Hero Example 6 */

.hero-example-6 .null-hero-image-container {
height: 488px;
width: 100%;
}

.hero-example-6 .null-hero-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}

.hero-example-6 .null-hero-overlay {
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0 0 0 / 20%);
}

.hero-example-6 .null-hero-content-container {
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 50%;
padding: 50px 50px;
background-color: rgb(29 107 37 / 50%);
}

.hero-example-6 .null-hero-content-container h1 {
font-size: 40px;
}

.null-rtl .hero-example-6 .null-hero-content-container {
right: 0;
}

.hero-example-6 .null-hero-content-size {
max-width: 600px;
}

@media (max-width:800px) {
    .hero-example-6.null-hero-content-container {
        width: 100%;
        padding: 30px !important;
    }

    .hero-example-6 .null-hero-content-container h1 {
        font-size: 25px;
    }
}

/* End Hero Example 6 */

Example 7:

 

Lorem ipsum

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus nihil hic temporibus itaque rem, possimus nemo ipsum ducimus ex quasi cum non nulla exercita.

Learn More

Request a Demo

Send

 

HTML | 
<!-- Start null hero-->

<section class="null-hero hero-example-7 null-position-relative null-color-white">

    <div class="null-hero-image-container">

        <img src="" alt=""/>

        <div class="null-hero-image-overlay null-position-absolute"></div>

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

<div class="null-hero-container">

    <div class="null-container">

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

            <div class="null-hero-content-container">

                <div class="null-hero-content">

                    <h1 class="null-hero-content-title null-font-weight-bold null-margin-top-20">
                        Lorem ipsum
                    </h1><!--End null-hero-content-title-->

                    <p class="null-hero-content-description">
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus nihil hic temporibus itaque rem, possimus nemo ipsum ducimus ex quasi cum non 
                         nulla exercita.
                    </p><!--End null-hero-content-description-->

                    <a class="null-button null-button-secondary" href="#" >
                        Learn More
                    </a><!--End null-button-->

                </div><!--End null-hero-content-->

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

            <div class="null-hero-form-container null-background-white null-color-grey null-border-radius null-box-shadow null-margin-10 null-position-relative null-padding-40">

                <h2 class="null-hero-form-title">Request a Demo</h2>

                <form class="null-hero-form" method="" action="">

                    <input type="text" name="name" placeholder="Name">

                    <input type="text" name="company_name" placeholder="Company Name">

                    <input type="email" name="email" placeholder="Email">

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

                </form><!--End null-hero-form-->

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

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

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

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

</section><!--End null-hero -->

<!-- End null hero-->
CSS | 
/* Start Hero Example 7 */

.hero-example-7 .null-hero-image-container {
position: relative;
overflow: hidden;
height: 400px;
}

.hero-example-7 .null-hero-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
transform: skewY(-3deg);
transform-origin: top left;
}

.hero-example-7 .null-hero-image-container::before {
content: '';
position: absolute;
height: 100px;
bottom: -70px;
right: 0;
left: 0;
background: var(--null-color-white);
transform: skewY(-3deg);
-webkit-transform: skewY(-3deg);
-moz-transform: skewY(-3deg);
-ms-transform: skewY(-3deg);
}

.hero-example-7 .null-hero-image-overlay {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(64, 57, 103, .7);
-webkit-transform: skewY(-3deg);
    -ms-transform: skewY(-3deg);
    transform: skewY(-3deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}

.hero-example-7 .null-hero-container {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}

.hero-example-7 .null-hero-content-title {
font-size: 40px;
}

.hero-example-7 .null-hero-form-container {
width: 400px;
height: 350px;
z-index: 100;
top: 45px;
-ms-grid-column-align: center;
justify-self: center;
}

.hero-example-7 .null-hero-form-container input {
border: 0;
border-bottom: 1px solid #b4becb;
width: 100%;
padding: 3px;
margin: 20px 0;
}

.hero-example-7 .null-hero-form-container input:focus {
outline: none;
}

@media (max-width:992px) {
.hero-example-7 .null-hero {
        height: auto;
    }

.hero-example-7 .null-hero-form-container {
        top: 5px;
        width: 100%;
        margin: 0;
    }

.hero-example-7 .null-hero-content-title{
    font-size: 25px;
}    

}

/* End Hero Example 7 */

Example 8:

 

Lorem ipsum, dolor sit amet consectetur adipisicing elit

4
Lorem ipsum
4
Lorem ipsum
4
Lorem ipsum

 

HTML| 
<!-- Start null hero-->

<section class="null-hero hero-example-8 null-position-relative">

    <div class="null-hero-image-container">
    
        <img src="" alt="" />
    
    </div><!--End null-hero-image-container-->

    <div class="null-hero-overlay"></div><!--End null-hero-overlay-->

    <div class="null-hero-content-container null-position-relative">

        <div class="null-hero-content">

            <h1 class="null-hero-content-title null-font-weight-bold null-text-align-center null-padding-top-50 null-padding-bottom-40 null-color-white">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit
            </h1><!--End null-hero-content-title-->


            <div class="null-hero-boxes-container null-display-flex null-justify-content-space-around null-flex-wrap-wrap null-position-absolute">

                <div class="null-hero-box-container null-margin-top-10 null-text-align-center null-background-white null-color-black null-padding-20 null-border-radius null-box-shadow null-cursor-pointer">
                        
                    <a href="javascript:void(null)" class="">

                        <div class="null-hero-box-image-container">
                            <img class="null-hero-box-image" src="">
                        </div><!--End null-hero-box-image-container-->

                        <div class="null-hero-box-number null-font-size-25 null-font-weight-bold null-margin-top-10">
                                4
                        </div><!--End null-hero-box-number-->

                        <div class="null-hero-box-title null-font-size-20 null-margin-top-10">
                                Lorem ipsum
                        </div><!--End null-hero-box-title-->
                            
                    </a>

                </div><!--Endnull-hero-box-container-->

                <div class="null-hero-box-container null-margin-top-10 null-text-align-center null-background-white null-color-black null-padding-20 null-border-radius null-box-shadow null-cursor-pointer">
                
                    <a href="javascript:void(null)" class="">
                
                        <div class="null-hero-box-image-container">
                            <img class="null-hero-box-image" src="">
                        </div><!--End null-hero-box-image-container-->
                
                        <div class="null-hero-box-number null-font-size-25 null-font-weight-bold null-margin-top-10">
                            4
                        </div><!--End null-hero-box-number-->
                
                        <div class="null-hero-box-title null-font-size-20 null-margin-top-10">
                            Lorem ipsum
                        </div><!--End null-hero-box-title-->
                
                    </a>
                
                </div><!--Endnull-hero-box-container-->


                <div class="null-hero-box-container null-margin-top-10 null-text-align-center null-background-white null-color-black null-padding-20 null-border-radius null-box-shadow null-cursor-pointer">
                
                    <a href="javascript:void(null)" class="">
                
                        <div class="null-hero-box-image-container">
                            <img class="null-hero-box-image" src="">
                        </div><!--End null-hero-box-image-container-->
                
                        <div class="null-hero-box-number null-font-size-25 null-font-weight-bold null-margin-top-10">
                            4
                        </div><!--End null-hero-box-number-->
                
                        <div class="null-hero-box-title null-font-size-20 null-margin-top-10">
                            Lorem ipsum
                        </div><!--End null-hero-box-title-->
                
                    </a>
                
                </div><!--Endnull-hero-box-container-->


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


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

</section><!--End null-hero -->

<!-- End null hero-->
CSS | 
/* Start Hero Example 8 */

.hero-example-8 {
position: relative;
height: 400px;
}

.hero-example-8 .null-hero-image-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}

.hero-example-8 .null-hero-image-container img {
object-fit: cover;
width: 100%;
height: 100%;
}

.hero-example-8 .null-hero-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgb(78 5 32);
opacity: 0.5;
z-index: 2;
}

.hero-example-8 .null-hero-content-container {
z-index: 2;
}

.hero-example-8 .null-hero-content-title {
font-size: 50px;
max-width: 70%;
margin: auto;
}

.hero-example-8 .null-hero-boxes-container {
width: 100%;
}

.hero-example-8 .null-hero-box-container {
width: 18%;
}

.null-hero-box-image {
width: 70px;
height: 70px;
margin: auto;
}

@media (max-width:767px) {

.null-hero {
    height: auto;
    padding: 0;
}

.hero-example-8  .null-hero-boxes-container {
    margin-bottom: 20px;
    position: relative !important;
}

.hero-example-8  .null-hero-box-container {
    width: 40%;
}

.hero-example-8  .null-hero-box-title {
    font-size: 22px;
}

.hero-example-8  .null-hero-box-image {
    width: 50px;
    height: 50px;
}

}

@media (max-width:992px) {
.hero-example-8  .null-hero-content-title {
    font-size: 43px;
}

}

/* End Hero Example 8 */
Box UI
Input