flexbox-practice/flex-modal.html at master · abinofbrooklyn/flexbox-practice · 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
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<!--[if lte IE 6]><html class="preIE7 preIE8 preIE9"><![endif]-->
<!--[if IE 7]><html class="preIE8 preIE9"><![endif]-->
<!--[if IE 8]><html class="preIE9"><![endif]-->
<!--[if gte IE 9]><!--><html><!--<![endif]-->
  <head>
    <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>title</title>
  <meta name="author" content="name">
  <meta name="description" content="description here">
  <meta name="keywords" content="keywords,here">
  <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=font1|font2|etc" type="text/css">
  <link rel="stylesheet" href="styles/flex-modal.css" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h1>Flexbox Modals</h1>
      <p>
        Lorem Khaled Ipsum is a major key to success. Mogul talk. Wraith talk. We don’t see them,
        we will never see them. To be successful you’ve got to work hard, to make history, simple,
        you’ve got to make it. The ladies always say Khaled you smell good, I use no cologne.
        Cocoa butter is the key. They don’t want us to eat. It’s important to use cocoa butter.
        It’s the key to more success, why not live smooth? Why live rough? You should never complain,
        complaining is a weak emotion, you got life, we breathing, we blessed.
      </p>
      <button class="btn btn-modal">Click Here</button>
      <p>
        They will try to close the door on you, just open it. Major key, don’t
        fall for the trap, stay focused. It’s the ones closest to you that want to
        see you fail. You see that bamboo behind me though, you see that bamboo? Ain’t
        nothin’ like bamboo. Bless up. The key to success is to keep your head above the
        water, never give up. In life there will be road blocks but we will over come it.
        Learning is cool, but knowing is better, and I know the key to success.
        You smart, you loyal, you a genius.
      </p>
      <p>
        They will try to close the door on you, just open it. Major key, don’t
        fall for the trap, stay focused. It’s the ones closest to you that want to
        see you fail. You see that bamboo behind me though, you see that bamboo? Ain’t
        nothin’ like bamboo. Bless up. The key to success is to keep your head above the
        water, never give up. In life there will be road blocks but we will over come it.
        Learning is cool, but knowing is better, and I know the key to success.
        You smart, you loyal, you a genius.
      </p>
      <p>
        They will try to close the door on you, just open it. Major key, don’t
        fall for the trap, stay focused. It’s the ones closest to you that want to
        see you fail. You see that bamboo behind me though, you see that bamboo? Ain’t
        nothin’ like bamboo. Bless up. The key to success is to keep your head above the
        water, never give up. In life there will be road blocks but we will over come it.
        Learning is cool, but knowing is better, and I know the key to success.
        You smart, you loyal, you a genius.
      </p>
    </div>

    <div class="modal-container">
      <div class="modal">
        <h2>Modal Heading</h2>
        <div class="modal-body">
          <p>Eliptical talk. The key to more success is to have a lot of pillows.
            The key to success is to keep your head above the water, never give up.
            Find peace, life is like a water fall, you’ve gotta flow. Hammock talk
            come soon. The weather is amazing, walk with me through the pathway of
            more success. Take this journey with me, Lion! You should never complain,
            complaining is a weak emotion, you got life, we breathing, we blessed. You
            smart, you loyal, you a genius. A major key, never panic. Don’t panic,
            when it gets crazy and rough, don’t panic, stay calm.
          </p>
        </div >
      </div>
    </div>
    <script src="javascript/modal-jquery.js" type="text/javascript"></script>
  </body>
</html>