1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<div class="featured-mode featured-boxes featured-boxes-style-3">
    <div class="row">
        <div class="col-md-3">
            <div class="featured-box featured-box-primary style-outline featured-box-effect">
                <div class="th-iconbox-icon">
                    <em class="icon-featured fas fa-star"></em>
                </div>
                <h4>Primary Color</h4>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-secondary style-outline featured-box-effect">
                <div class="th-iconbox-icon">
                    <em class="icon-featured fas fa-star"></em>
                </div>
                <h4>Secondary Color</h4>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-tertiary style-outline featured-box-effect">
                <div class="th-iconbox-icon">
                    <em class="icon-featured fas fa-star"></em>
                </div>
                <h4>Tertiary Color</h4>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-quaternary style-outline featured-box-effect">
                <div class="th-iconbox-icon">
                    <em class="icon-featured fas fa-star"></em>
                </div>
                <h4>Quaternary Color</h4>
            </div>
        </div>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<div class="featured-mode featured-boxes featured-box-flat">
    <div class="row">
        <div class="col-md-3">
            <div class="featured-box featured-box-primary style-circle featured-box-effect-3">
                <div class="th-iconbox-icon">
                    <em class="icon-featured fas fa-star"></em>
                </div>
                <h4>Primary Color</h4>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-secondary style-circle featured-box-effect-3">
                <div class="th-iconbox-icon">
                    <em class="icon-featured fas fa-star"></em>
                </div>
                <h4>Secondary Color</h4>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-tertiary style-circle featured-box-effect-3">
                <div class="th-iconbox-icon">
                    <em class="icon-featured fas fa-star"></em>
                </div>
                <h4>Tertiary Color</h4>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-quaternary style-circle featured-box-effect-3">
                <div class="th-iconbox-icon">
                    <em class="icon-featured fas fa-star"></em>
                </div>
                <h4>Quaternary Color</h4>
            </div>
        </div>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<div class="featured-mode-custom featured-boxes featured-boxes-style-3">
    <div class="row">
        <div class="col-md-3">
            <div class="featured-box featured-box-primary style-outline">
                <div class="th-iconbox-icon">
                    <em class="icon-featured fab fa-whatsapp"></em>
                </div>
                <h4>Primary Color</h4>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-secondary style-outline">
                <div class="th-iconbox-icon">
                    <em class="icon-featured fas fa-cube"></em>
                </div>
                <h4>Secondary Color</h4>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-tertiary style-outline">
                <div class="th-iconbox-icon">
                    <em class="icon-featured fas fa-ship"></em>
                </div>
                <h4>Tertiary Color</h4>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-quaternary style-outline">
                <div class="th-iconbox-icon">
                    <em class="icon-featured fas fa-subway"></em>
                </div>
                <h4>Quaternary Color</h4>
            </div>
        </div>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<div class="row">
    <div class="col-md-3">
        <div class="featured-box featured-box-primary">
            <em class="icon-featured fas fa-star"></em>
            <h4>Primary Color</h4>
        </div>
    </div>
    <div class="col-md-3">
        <div class="featured-box featured-box-secondary">
            <em class="icon-featured fas fa-star"></em>
            <h4>Secondary Color</h4>
        </div>
    </div>
    <div class="col-md-3">
        <div class="featured-box featured-box-tertiary">
            <em class="icon-featured fas fa-star"></em>
            <h4>Tertiary Color</h4>
        </div>
    </div>
    <div class="col-md-3">
        <div class="featured-box featured-box-quaternary">
            <em class="icon-featured fas fa-star"></em>
            <h4>Quaternary Color</h4>
        </div>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<div class="featured-boxes">
    <div class="row">
        <div class="col-md-3">
            <div class="featured-box featured-box-primary featured-box-effect-4">
                <em class="icon-featured far fa-gem"></em>
                <h4>Primary Color</h4>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-secondary featured-box-effect-4">
                <em class="icon-featured fas fa-cog"></em>
                <h4>Secondary Color</h4>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-tertiary featured-box-effect-4">
                <em class="icon-featured fas fa-comments"></em>
                <h4>Tertiary Color</h4>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-quaternary featured-box-effect-4">
                <em class="icon-featured fas fa-cloud"></em>
                <h4>Quaternary Color</h4>
            </div>
        </div>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<div class="row">
    <div class="col-md-4">
        <div class="featured-box featured-box-primary style-default featured-box-effect-3">
            <div class="th-iconbox-icon mb-xl">
                <em class="text-color-primary fas fa-check-square"></em>
            </div>
            <h4>Top Icon Position</h4>
            <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
        </div>
    </div>
    <div class="col-md-4">
        <div class="featured-mode-custom featured-boxes featured-boxes-style-3">
            <div class="featured-box featured-box-primary style-outline">
                <em class="icon-featured fab fa-whatsapp"></em>
                <h4>Top Icon Position</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="featured-mode-custom featured-boxes">
            <div class="featured-box featured-box-primary">
                <em class="icon-featured far fa-gem"></em>
                <h4>Top Icon Position</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<div class="row">
    <div class="col-md-4">
        <div class="featured-mode-custom feature-box feature-box-style-2">
            <div class="feature-box-icon">
                <em class="fas fa-check-square"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="featured-mode-custom feature-box feature-box-style-3">
            <div class="feature-box-icon">
                <em class="fab fa-whatsapp"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="featured-mode-custom feature-box">
            <div class="feature-box-icon">
                <em class="far fa-gem"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<div class="row">
    <div class="col-md-2">
        <div class="featured-mode-size">
            <div class="featured-box featured-box-primary featured-box-effect-3">
                <div class="ic-size-xs mb-xl">
                    <em class="fas fa-star"></em>
                </div>
                <h4>20px Size</h4>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="featured-mode-size">
            <div class="featured-box featured-box-primary featured-box-effect-3">
                <div class="ic-size-sm mb-xl">
                    <em class="fas fa-star"></em>
                </div>
                <h4>30px Size</h4>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="featured-mode-size">
            <div class="featured-box featured-box-primary featured-box-effect-3">
                <div class="ic-size-md mb-xl">
                    <em class="fas fa-star"></em>
                </div>
                <h4>40px Size</h4>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="featured-mode-size">
            <div class="featured-box featured-box-primary featured-box-effect-3">
                <div class="ic-size-lg mb-xl">
                    <em class="fas fa-star"></em>
                </div>
                <h4>50px Size</h4>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="featured-mode-size">
            <div class="featured-box featured-box-primary featured-box-effect-3">
                <div class="ic-size-xlg mb-xl">
                    <em class="fas fa-star"></em>
                </div>
                <h4>60px Size</h4>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="featured-mode-size">
            <div class="featured-box featured-box-primary featured-box-effect-3">
                <div class="ic-size-xxl mb-xl">
                    <em class="fas fa-star"></em>
                </div>
                <h4>70px Size</h4>
            </div>
        </div>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<div class="featured-mode-size">
    <div class="row">
        <div class="col-md-2">
            <div class="featured-box featured-box-primary">
                <div class="ic-size-xs">
                    <em class="ic-iconbox fas fa-star"></em>
                </div>
                <h4>20px Size</h4>
            </div>
        </div>
        <div class="col-md-2">
            <div class="featured-box featured-box-primary">
                <div class="ic-size-sm">
                    <em class="ic-iconbox fas fa-star"></em>
                </div>
                <h4>30px Size</h4>
            </div>
        </div>
        <div class="col-md-2">
            <div class="featured-box featured-box-primary">
                <div class="ic-size-md">
                    <em class="ic-iconbox fas fa-star"></em>
                </div>
                <h4>40px Size</h4>
            </div>
        </div>
        <div class="col-md-2">
            <div class="featured-box featured-box-primary">
                <div class="ic-size-lg">
                    <em class="ic-iconbox fas fa-star"></em>
                </div>
                <h4>50px Size</h4>
            </div>
        </div>
        <div class="col-md-2">
            <div class="featured-box featured-box-primary">
                <div class="ic-size-xlg">
                    <em class="ic-iconbox fas fa-star"></em>
                </div>
                <h4>60px Size</h4>
            </div>
        </div>
        <div class="col-md-2">
            <div class="featured-box featured-box-primary">
                <div class="ic-size-xxl">
                    <em class="ic-iconbox fas fa-star"></em>
                </div>
                <h4>70px Size</h4>
            </div>
        </div>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<div class="featured-boxes featured-boxes-style-7">
    <div class="row">
        <div class="col-md-3">
            <div class="featured-box featured-box-primary featured-box-effect-7">
                <div class="box-content">
                    <em class="icon-featured fas fa-user"></em>
                    <h4>Loved by Customers</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-secondary featured-box-effect-7">
                <div class="box-content">
                    <em class="icon-featured fas fa-book"></em>
                    <h4>Well Documented</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-tertiary featured-box-effect-7">
                <div class="box-content">
                    <em class="icon-featured fas fa-trophy"></em>
                    <h4>Winner</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-quaternary featured-box-effect-7">
                <div class="box-content">
                    <em class="icon-featured fas fa-cogs"></em>
                    <h4>Customizable</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<div class="square-design">
    <section class="square-about">
        <div class="about-content">
            <div class="row">
                <div class="col-md-4 col-sm-4">
                    <div class="about-box wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
                        <div class="icon-box"><em class="fas fa-star-half-alt"></em></div>
                        <h3 class="about-title">MODERN DESIGN</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, perferendis, soluta! Quae iurecum ab sit rerum praesentium</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-4">
                    <div class="about-box wow fadeInUp" data-wow-delay="0.3s" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInUp;">
                        <div class="icon-box"><em class="fas fa-asterisk"></em></div>
                        <h3 class="about-title">Awesome Feature</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, perferendis, soluta! Quae iurecum ab sit rerum praesentium</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-4">
                    <div class="about-box wow fadeInUp" data-wow-delay="0.4s" style="visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp;">
                        <div class="icon-box"><em class="fas fa-certificate"></em></div>
                        <h3 class="about-title">Clean Code</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, perferendis, soluta! Quae iurecum ab sit rerum praesentium</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<div class="round-design">
    <div class="round-item">
        <div class="row">
            <div class="col-md-4 col-xs-12">
                <div class="service wow fadeInUp" data-wow-duration="0.5s" data-wow-delay="0.4s" style="visibility: visible; animation-duration: 0.5s; animation-delay: 0.4s; animation-name: fadeInUp;">
                    <div class="icon-box featured-box-primary">
                        <div class="icon-overlay icon-featured"></div>
                        <em class="fas fa-adjust"></em>
                    </div>
                    <div class="service_content">
                        <h3 class="title heading-primary">Creative Design</h3>
                        <p>
                            Contrary to popular belief, Lorem Ipsum is not<br />
                            simply random text. It has roots in a piece of<br />
                            classical Latin literature
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-xs-12">
                <div class="service wow fadeInUp" data-wow-duration="0.5s" data-wow-delay="0.4s" style="visibility: visible; animation-duration: 0.5s; animation-delay: 0.4s; animation-name: fadeInUp;">
                    <div class="icon-box featured-box-primary">
                        <div class="icon-overlay icon-featured"></div>
                        <em class="far fa-clock"></em>
                    </div>
                    <div class="service_content">
                        <h3 class="title heading-primary">Professional Code</h3>
                        <p>
                            Contrary to popular belief, Lorem Ipsum is not<br />
                            simply random text. It has roots in a piece of<br />
                            classical Latin literature
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-xs-12">
                <div class="service wow fadeInUp" data-wow-duration="0.5s" data-wow-delay="0.4s" style="visibility: visible; animation-duration: 0.5s; animation-delay: 0.4s; animation-name: fadeInUp;">
                    <div class="icon-box featured-box-primary">
                        <div class="icon-overlay icon-featured"></div>
                        <em class="fas fa-cog"></em>
                    </div>
                    <div class="service_content">
                        <h3 class="title heading-primary">Easy to Customize</h3>
                        <p>
                            Contrary to popular belief, Lorem Ipsum is not<br />
                            simply random text. It has roots in a piece of<br />
                            classical Latin literature
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<div class="featured-boxes featured-boxes-style-8">
    <div class="featured-box featured-box-primary featured-box-text-left">
        <div class="box-content">
            <div class="row">
                <div class="col-md-9">
                    <h2>Loved by Customers</h2>
                </div>
                <div class="col-md-3">
                    <div class="align-right">
                        <em class="icon-featured fas fa-user"></em>
                    </div>
                </div>
            </div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet. Quisque rutrum pellentesque imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum
                pellentesque imperdiet.
            </p>
            <button type="button" class="btn btn-lg btn-primary mr-xs mb-lg">Learn More</button>
        </div>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<div class="featured-boxes featured-boxes-style-8">
    <div class="featured-box featured-box-secondary featured-box-text-left">
        <div class="box-content">
            <div class="row">
                <div class="col-md-12">
                    <em class="icon-featured fas fa-book pull-left mr-lg"></em>
                    <h2>Well Documented</h2>
                </div>
            </div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet. Quisque rutrum pellentesque imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum
                pellentesque imperdiet.
            </p>
            <button type="button" class="btn btn-lg btn-secondary mr-xs mb-lg">Learn More</button>
        </div>
    </div>
</div>