diff options
Diffstat (limited to 'lehed/rollid/index.html')
| -rw-r--r-- | lehed/rollid/index.html | 194 |
1 files changed, 194 insertions, 0 deletions
diff --git a/lehed/rollid/index.html b/lehed/rollid/index.html new file mode 100644 index 0000000..0955dfe --- /dev/null +++ b/lehed/rollid/index.html @@ -0,0 +1,194 @@ +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Rollid</title> + + <link rel="stylesheet" href="styles.css"> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@300&display=swap" rel="stylesheet"> + <!-- Bootstrap - CSS only --> + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> +</head> + +<body class="bg-dark"> + + <!-- navbar --> + <nav class="navbar navbar-expand-md navbar-dark pt-4 pb-2"> + <div class="container fs-5"> + <!-- navbar brand / title --> + <a class="navbar-brand" href="../../index.html#intro"> + <span class="text-secondary fw-bold"> + Digirännak + </span> + </a> + <!-- toggle button for mobile nav --> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + + <!-- navbar links --> + <div class="collapse navbar-collapse justify-content-end align-center" id="main-nav"> + <ul class="navbar-nav"> + <li class="nav-item"> + <a class="nav-link" href="../sissejuhatus/index.html">Sissejuhatus</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="../../index.html#juhend">Juhend</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="../oppematerjalid/index.html">Õppematerjalid</a> + </li> + <li class="nav-item d-md-none"> + <a class="nav-link" href="../rollid/index.html">Rollid</a> + </li> + <li class="nav-item ms-2 d-none d-md-inline"> + <a class="btn btn-secondary" href="../rollid/index.html">Rollid</a> + </li> + </ul> + </div> + </div> + </nav> + + + <!-- Rollid --> + + + <div class="container bg-dark justify-content-center"> + <h1 class="text-center text-white pb-3">Rollid</h1> + + <div class="container my-3"> + <nav> + <div class="nav nav-tabs" id="nav-tab" role="tablist"> + + <button class="nav-link active" id="nav-opilane-tab" data-bs-toggle="tab" data-bs-target="#nav-opilane" type="button" role="tab" aria-controls="nav-opilane" aria-selected="true"> + Üliõpilane + </button> + + <button class="nav-link" id="nav-partorg-tab" data-bs-toggle="tab" data-bs-target="#nav-partorg" type="button" role="tab" aria-controls="nav-partorg" aria-selected="false"> + Partorg + </button> + + <button class="nav-link" id="nav-arimees-tab" data-bs-toggle="tab" data-bs-target="#nav-arimees" type="button" role="tab" aria-controls="nav-arimees" aria-selected="false"> + Ärimees + </button> + + <button class="nav-link" id="nav-perenaine-tab" data-bs-toggle="tab" data-bs-target="#nav-perenaine" type="button" role="tab" aria-controls="nav-perenaine" aria-selected="false"> + Perenaine + </button> + + <button class="nav-link" id="nav-kaitseliitlane-tab" data-bs-toggle="tab" data-bs-target="#nav-kaitseliitlane" type="button" role="tab" aria-controls="nav-kaitseliitlane" aria-selected="false"> + Kaitseliitlane + </button> + + <button class="nav-link" id="nav-direktor-tab" data-bs-toggle="tab" data-bs-target="#nav-direktor" type="button" role="tab" aria-controls="nav-direktor" aria-selected="false"> + Kooli Direktor + </button> + + </div> + </nav> + + <div class="tab-content" id="nav-tabContent"> + + + <div class="tab-pane fade show active p-3 text-white" id="nav-opilane" role="tabpanel" aria-labelledby="nav-opilane-tab"> + <div class="row"> + <div class="col-lg-8"> + <h2>Üliõpilane</h2> + <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio provident corporis aut, ipsa tenetur vel illo excepturi voluptate molestiae magnam, totam est id alias dicta a assumenda corrupti et repellat.</p> + <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio provident corporis aut, ipsa tenetur vel illo excepturi voluptate molestiae magnam, totam est id alias dicta a assumenda corrupti et repellat.</p> + </div> + + <div class="col-lg-4"> + <img src="pildid/opilane.jpg" alt="must-valge õpilane" class="img-fluid"> + </div> + </div> + </div> + + <div class="tab-pane fade p-3 text-white" id="nav-partorg" role="tabpanel" aria-labelledby="nav-partorg-tab"> + <div class="row"> + <div class="col-lg-8"> + <h2>Partorg</h2> + <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio provident corporis aut, ipsa tenetur vel illo excepturi voluptate molestiae magnam, totam est id alias dicta a assumenda corrupti et repellat.</p> + <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio provident corporis aut, ipsa tenetur vel illo excepturi voluptate molestiae magnam, totam est id alias dicta a assumenda corrupti et repellat.</p> + </div> + + <div class="col-lg-4"> + <img src="pildid/partorg.jpg" alt="must-valge partorg" class="img-fluid"> + </div> + </div> + </div> + + <div class="tab-pane fade p-3 text-white" id="nav-arimees" role="tabpanel" aria-labelledby="nav-arimees-tab"> + <div class="row"> + <div class="col-lg-8"> + <h2>Ärimees</h2> + <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio provident corporis aut, ipsa tenetur vel illo excepturi voluptate molestiae magnam, totam est id alias dicta a assumenda corrupti et repellat.</p> + <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio provident corporis aut, ipsa tenetur vel illo excepturi voluptate molestiae magnam, totam est id alias dicta a assumenda corrupti et repellat.</p> + </div> + + <div class="col-lg-4"> + <img src="pildid/arimees.jpg" alt="must-valge ärimees" class="img-fluid"> + </div> + </div> + </div> + + <div class="tab-pane fade p-3 text-white" id="nav-perenaine" role="tabpanel" aria-labelledby="nav-perenaine-tab"> + <div class="row"> + <div class="col-lg-8"> + <h2>Perenaine</h2> + <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio provident corporis aut, ipsa tenetur vel illo excepturi voluptate molestiae magnam, totam est id alias dicta a assumenda corrupti et repellat.</p> + <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio provident corporis aut, ipsa tenetur vel illo excepturi voluptate molestiae magnam, totam est id alias dicta a assumenda corrupti et repellat.</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam provident dignissimos ad, culpa corporis tempora ipsa eaque placeat saepe, quod nam? Voluptate ex nulla nemo.</p> + <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui, tempore!</p> + <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio quasi temporibus ad deserunt qui ratione!</p> + <p>Lorem ipsum dolor sit amet.</p> + </div> + + <div class="col-lg-4"> + <img src="pildid/perenaine.jpg" alt="must-valge perenaine" class="img-fluid"> + </div> + </div> + </div> + + <div class="tab-pane fade p-3 text-white" id="nav-kaitseliitlane" role="tabpanel" aria-labelledby="nav-kaitseliitlane-tab"> + <div class="row"> + <div class="col-lg-8"> + <h2>Kaitseliitlane</h2> + <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio provident corporis aut, ipsa tenetur vel illo excepturi voluptate molestiae magnam, totam est id alias dicta a assumenda corrupti et repellat.</p> + <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio provident corporis aut, ipsa tenetur vel illo excepturi voluptate molestiae magnam, totam est id alias dicta a assumenda corrupti et repellat.</p> + <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio provident corporis aut, ipsa tenetur vel illo excepturi voluptate molestiae magnam, totam est id alias dicta a assumenda corrupti et repellat.</p> + <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, quaerat.</p> + </div> + + <div class="col-lg-4"> + <img src="pildid/kaitseliitlane.jpg" alt="must-valge kaitseliitlane" class="img-fluid"> + </div> + </div> + </div> + + <div class="tab-pane fade p-3 text-white" id="nav-direktor" role="tabpanel" aria-labelledby="nav-direktor-tab"> + <div class="row"> + <div class="col-lg-8"> + <h2>direktor</h2> + <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio provident corporis aut, ipsa tenetur vel illo excepturi voluptate molestiae magnam, totam est id alias dicta a assumenda corrupti et repellat.</p> + <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio provident corporis aut, ipsa tenetur vel illo excepturi voluptate molestiae magnam, totam est id alias dicta a assumenda corrupti et repellat.</p> + </div> + + <div class="col-lg-4"> + <img src="pildid/direktor.jpg" alt="must-valge kooli direktor" class="img-fluid"> + </div> + </div> + </div> + + + </div> + </div> + + </div> + <!-- JavaScript Bundle with Popper --> + <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script> +</body> +</html>
\ No newline at end of file |