diff options
Diffstat (limited to 'rannak/mangud/uliopilane/tSark')
| -rw-r--r-- | rannak/mangud/uliopilane/tSark/index.html | 49 | ||||
| -rw-r--r-- | rannak/mangud/uliopilane/tSark/style.css | 28 |
2 files changed, 72 insertions, 5 deletions
diff --git a/rannak/mangud/uliopilane/tSark/index.html b/rannak/mangud/uliopilane/tSark/index.html index 382c382..dc2aafb 100644 --- a/rannak/mangud/uliopilane/tSark/index.html +++ b/rannak/mangud/uliopilane/tSark/index.html @@ -3,16 +3,14 @@ <title>Särgi Kujundus</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="style.css" rel="stylesheet"/> - <!-- + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> - --> </head> <body> <div class="containeraa"> - <!-- Tshirt SVG --> <svg viewBox="0 0 512 512"> <g transform="translate(0,448)"> @@ -23,6 +21,45 @@ + <!-- 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> + + + + + + + <!-- Side panel stuff--> <div class="side"> @@ -38,6 +75,12 @@ <button class="checkMoveOn">Kontrolli, kas särk valmis</button> <button class="moveOn" disabled>Liigu Edasi</button> + <!-- Button trigger modal --> + <button type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal"> + Sissejuhatus + </button> + + <div class="messageBox"> </div> </div> diff --git a/rannak/mangud/uliopilane/tSark/style.css b/rannak/mangud/uliopilane/tSark/style.css index 0bac36a..99f5fd8 100644 --- a/rannak/mangud/uliopilane/tSark/style.css +++ b/rannak/mangud/uliopilane/tSark/style.css @@ -1,5 +1,5 @@ body{ - background-color: #E3D4AD; + background-color: #fffcc9 !important; box-sizing: border-box; margin: 0; padding: 0; @@ -18,7 +18,7 @@ body{ width: 50%; height: 100vh; text-align: center; - background-color: #D3BC8D; + background-color: #B3B07B; } @@ -54,6 +54,30 @@ button:disabled{ +/* Modal Stuff */ + +.closeModalButton { + border-radius: 50px; +} + +.modalButton{ + padding: 5px !important; + margin-left: 60px !important; + 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; + font-size: 1.1rem !important; +} + +.modalButton:hover{ + background-color: rgba(0,136,169,0.8) !important; +} + + + + /* Svg stuff*/ svg { |