diff options
| -rw-r--r-- | rannak/mangud/kaitseliitlane/kuulsused/index.html | 42 | ||||
| -rw-r--r-- | rannak/mangud/kaitseliitlane/kuulsused/styles.css | 37 |
2 files changed, 79 insertions, 0 deletions
diff --git a/rannak/mangud/kaitseliitlane/kuulsused/index.html b/rannak/mangud/kaitseliitlane/kuulsused/index.html index 05faef1..9944db7 100644 --- a/rannak/mangud/kaitseliitlane/kuulsused/index.html +++ b/rannak/mangud/kaitseliitlane/kuulsused/index.html @@ -19,10 +19,52 @@ <div> <button class="moveOn" disabled>Liigu Edasi</button> </div> + </div> + <!-- Button trigger modal --> + <button type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal"> + Sissejuhatus + </button> + + </div> + + <!-- Modal --> + <div class="modal fade text-black" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + + <div class="modal-header"> + <h5 class="modal-title" id="myModalLabel">Sissejuhatav info Kuulsuste Mängule</h5> + <button type="button" class="closeModalButton" data-bs-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + + <div class="modal-body"> + Odio eu feugiat pretium, nibh ipsum consequat nisl, vel pretium lectus quam id leo? + Arcu non odio euismod lacinia at quis risus sed vulputate odio. Nullam non nisi est, + sit amet facilisis magna etiam tempor, orci eu lobortis elementum, + nibh tellus molestie nunc, non blandit massa enim nec dui nunc. + <br/> + Odio eu feugiat pretium, nibh ipsum consequat nisl, vel pretium lectus quam id leo? + Arcu non odio euismod lacinia at quis risus sed vulputate odio. Nullam non nisi est, + sit amet facilisis magna etiam tempor, orci eu lobortis elementum, + nibh tellus molestie nunc, non blandit massa enim nec dui nunc. + <br/> + odio eu feugiat pretium, nibh ipsum consequat nisl, vel pretium lectus quam id leo? + arcu non odio euismod lacinia at quis risus sed vulputate odio. nullam non nisi est, + sit amet facilisis magna etiam tempor, orci eu lobortis elementum, + nibh tellus molestie nunc, non blandit massa enim nec dui nunc. + </div> + + </div> + </div> + </div> + + <!-- Esimene rida --> <div class="lists"> <div class="row"> diff --git a/rannak/mangud/kaitseliitlane/kuulsused/styles.css b/rannak/mangud/kaitseliitlane/kuulsused/styles.css index 1969116..857c4c8 100644 --- a/rannak/mangud/kaitseliitlane/kuulsused/styles.css +++ b/rannak/mangud/kaitseliitlane/kuulsused/styles.css @@ -52,3 +52,40 @@ img { height: 100% !important; min-height: 2rem; } + + +/* Modal Stuff */ + +/* +.modalButton { + position: fixed; + top: 0; + right: 0; + padding: 6px; + color: #fff; + margin: 3%; +} +*/ + +.closeModalButton { + border-radius: 50px; +} + +.modalButton{ + position: fixed; + top: 0; + right: 0; + padding: 6px; + padding: 9px 25px; + background-color: rgba(0,136,169,1) !important; + border: none !important; + border-radius: 50px !important; + cursor: pointer !important; + transition: all 0.3 ease 0 !important; + margin: 3% !important; + font-size: 1.2rem !important; +} + +.modalButton:hover{ + background-color: rgba(0,136,169,0.8) !important; +} |