Free Animated Bootstrap Modal and Popups

1<link rel='stylesheet' href='https://d33wubrfki0l68.cloudfront.net/css/68818763319cf667ed141dc03e654e8db3424772/assets/css/animate.min.css'/>
2<link href="https://fonts.googleapis.com/css?family=Work+Sans:600" rel="stylesheet">
3<link href="https://fonts.googleapis.com/css?family=Overpass:300,400,600,700,800,900" rel="stylesheet">
4    
5<header class="text-white" style="background-color: #28304e">
6    <div class="container">
7        <div class="row m-h-100">
8            <div class="col-md-6 my-auto">
9                <h1 class="display-4 animated bounceIn font-worksans">Modal Animation using Animate.css</h1>
10                <p class="animated fadeIn">You can use animate.css to create awesome animations for modal just add .animated with .animation-name to .modal-dialog </p>
11                <p><a href="#" data-bs-toggle="modal" data-bs-target="#demoModal" class="btn animated fadeIn btn-cta btn-cstm-light">open modal</a></p>
12            </div>
13            <div class="text-center m-auto col-md-6 animated zoomIn">
14                <p>
15                    <img class="mw-100" src="https://d33wubrfki0l68.cloudfront.net/45878c3fb0aed0317f92b2c2a5c9b708c52905e0/c0bcf/assets/img/cherry-done.png" alt="">
16                </p>
17            </div>
18        </div>
19    </div>
20</header>
21<!-- Modal -->
22<div class="modal fade auto-off"  id="demoModal"  tabindex="-1" role="dialog"
23     aria-labelledby="demoModal" aria-hidden="true">
24    <div class="modal-dialog animated zoomInDown modal-dialog-centered" role="document">
25        <div class="modal-content">
26
27            <div class="container-fluid">
28                <button type="button" class="close" data-bs-dismiss="modal"
29                        aria-label="Close">
30                    <span aria-hidden="true">&times;</span>
31                </button>
32                <div class="row">
33                    <div class="col-md-12 m-h-20 bg-img rounded-start" style="background-image: url('https://images.unsplash.com/photo-1525097596740-cb2a70e07e3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80')"></div>
34                    <div class="col-md-12 text-center py-5 px-sm-5 ">
35                        <h2>Animated Modal using animate.css</h2>
36                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
37                        <form>
38                            <button type="submit" class="btn btn-cstm-dark w-100 btn-cta" data-bs-dismiss="modal" aria-label="Close">btn-close modal</button>
39                        </form>
40                    </div>
41                </div>
42            </div>
43        </div>
44    </div>
45</div>
46<!-- Modal Ends -->
47
48