html-css-ui-components/modal-13/index.html at main · ColorlibHQ/html-css-ui-components · GitHub

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
63
64
65
66
67
68
69
70
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Modal #3</title>
  	<link rel="stylesheet" href="css/style.css">
</head>
  <body>

    <div class="cl-container content">
      <div class="cl-row cl-align-items-center content">

        <div class="cl-col-12 cl-text-center">
          <h3 class="cl-mb-4">Modal #3</h3>
        <button type="button" class="cl-btn cl-btn-secondary cl-px-4 cl-py-3" data-toggle="modal" data-target="#exampleModalCenter">
          Launch modal
        </button>
      </div>
      </div>
    </div>

    <!-- Modal -->
    <div class="cl-modal cl-fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="cl-modal-dialog cl-modal-dialog-centered" role="document">
        <div class="cl-modal-content cl-rounded-0">
          <div class="cl-modal-body cl-bg-3">

            <div class="cl-px-3 to-front">
              <div class="cl-row cl-align-items-center">
                <div class="cl-col cl-text-right">
                  <a href="#" class="close-btn" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><span class="icon-close2"><svg class="cl-icon" viewBox="0 0 1024 1024" style="vertical-align:-0.0625em" aria-hidden="true" focusable="false"><g transform="translate(0,960) scale(1,-1)"><path d="M810 665 572 427 810 189 750 129 512 367 274 129 214 189 452 427 214 665 274 725 512 487 750 725Z"/></g></svg></span></span>
                  </a>
                </div>
              </div>
            </div>
            <div class="cl-p-4 to-front">
              <div class="cl-text-center">
                <div class="logo">
                  <img src="images/instagram-2-1.svg" alt="Image" class="cl-img-fluid cl-mb-4">
                </div>
                <h3>Exclusives offer from Instagram</h3>
                <p class="cl-mb-4">All their equipment and instruments are alive. The sky was cloudless and of a deep dark blue. </p>
                <form action="#" class="cl-mb-4">
                  <div class="cl-form-group">
                    <input type="email" class="cl-form-control cl-w-100 cl-mr-3" placeholder="Enter your email address">
                  </div>
                  <div class="cl-row">
                    <div class="cl-col-6">
                      <button class="cl-btn cl-btn-secondary cl-btn-block" data-dismiss="modal">No, thanks</button>
                    </div>
                    <div class="cl-col-6">
                      <button class="cl-btn cl-btn-primary  cl-btn-block">Subscribe</button>
                    </div>
                  </div>
                </form>
                <p class="cl-mb-0 cancel"><small>The sky was cloudless and of a deep dark blue. </small></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    	<script src="js/snippet.js"></script>
</body>
</html>