diff options
Diffstat (limited to 'lehed/juhend')
| -rw-r--r-- | lehed/juhend/index.html | 164 | ||||
| -rw-r--r-- | lehed/juhend/styles.css | 38 |
2 files changed, 202 insertions, 0 deletions
diff --git a/lehed/juhend/index.html b/lehed/juhend/index.html new file mode 100644 index 0000000..47dd207 --- /dev/null +++ b/lehed/juhend/index.html @@ -0,0 +1,164 @@ +<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>Juhend</title> + + <!-- 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"> + <link rel="stylesheet" href="styles.css"> +</head> +<body> + + <!-- navbar --> + <nav class="navbar navbar-expand-md"> + <div class="container fs-5"> + <!-- navbar brand / title --> + <a class="navbar-brand" href="../../#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="../projekt">Projekt</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="../juhend">Juhend</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="../oppematerjalid">Õppematerjalid</a> + </li> + <li class="nav-item d-md-none"> + <a class="nav-link" href="../rollid">Rollid</a> + </li> + <li class="nav-item ms-2 d-none d-md-inline"> + <a class="btn btn-secondary" href="../rollid">Rollid</a> + </li> + </ul> + </div> + </div> + </nav> + + <!-- Sissejuhatus --> + <section id="sissejuhatus"> + <h1 class="text-center text-white pb-3">Juhend</h1> + </section> + + + <!-- juhend --> + <section id="juhend"> + <div class="container"> + + + <!-- accordion --> + <div class="accordion accordion-flush justify-content-center" id="accordionFlush"> + + <div class="accordion-item"> + <h2 class="accordion-header" id="flush-headingOne"> + <button class="accordion-button collapsed text-white fs-4" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne"> + Enne alustamist + </button> + </h2> + <div id="flush-collapseOne" class="accordion-collapse collapse show" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlush"> + <div class="accordion-body"> + <p> + Enne Rännakule asumist tutvu kindlasti + <a href="lehed/rollid">rollidega</a>. + <br/> + Kahjuks ei ole digirännak telefoniga läbitav. + </p> + <p> + Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit quae nesciunt vitae repellat quasi quibusdam minima? Quos dicta maxime dolore ab ex + perspiciatis veritatis recusandae molestiae repellendus. Officiis fugit, cumque delectus dignissimos non repellendus quo. + </p> + </div> + </div> + </div> + + <div class="accordion-item"> + <h2 class="accordion-header" id="flush-headingTwo"> + <button class="accordion-button collapsed text-white fs-4" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo"> + Rännaku ajal + </button> + </h2> + <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlush"> + <div class="accordion-body"> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, consequatur. Aliquam ea iste assumenda vel ipsa maiores ex distinctio temporibus autem quia. + Omnis ipsa tempore nihil porro qui aut magnam. Temporibus quasi quo dicta excepturi nam perferendis eum molestias accusamus.</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt ut provident delectus vel nemo eveniet ad saepe nobis sequi debitis?</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt ut provident delectus vel nemo eveniet ad saepe nobis sequi debitis?</p> + </div> + </div> + </div> + + <div class="accordion-item"> + <h2 class="accordion-header" id="flush-headingThree"> + <button class="accordion-button collapsed text-white fs-4" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree"> + Lõpetamine + </button> + </h2> + <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlush"> + <div class="accordion-body"> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt ut provident delectus vel nemo eveniet ad saepe nobis sequi debitis?</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt ut provident delectus vel nemo eveniet ad saepe nobis sequi debitis?</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt ut provident delectus vel nemo eveniet ad saepe nobis sequi debitis?</p> + </div> + </div> + + <div class="accordion-item"> + <h2 class="accordion-header" id="flush-headingFour"> + <button class="accordion-button collapsed text-white fs-4" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour"> + Lisaks veel + </button> + </h2> + <div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour" data-bs-parent="#accordionFlush"> + <div class="accordion-body"> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt ut provident delectus vel nemo eveniet ad saepe nobis sequi debitis?</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt ut provident delectus vel nemo eveniet ad saepe nobis sequi debitis?</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt ut provident delectus vel nemo eveniet ad saepe nobis sequi debitis?</p> + </div> + </div> + </div> + + <div class="accordion-item"> + <h2 class="accordion-header" id="flush-headingFive"> + <button class="accordion-button collapsed text-white fs-4" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive"> + Viimane Reegel + </button> + </h2> + <div id="flush-collapseFive" class="accordion-collapse collapse" aria-labelledby="flush-headingFive" data-bs-parent="#accordionFlush"> + <div class="accordion-body"> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt ut provident delectus vel nemo eveniet ad saepe nobis sequi debitis?</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt ut provident delectus vel nemo eveniet ad saepe nobis sequi debitis?</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt ut provident delectus vel nemo eveniet ad saepe nobis sequi debitis?</p> + </div> + </div> + </div> + + + </div> + </div> + </section> + + + + + + + + + + + <!-- 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> diff --git a/lehed/juhend/styles.css b/lehed/juhend/styles.css new file mode 100644 index 0000000..e19b377 --- /dev/null +++ b/lehed/juhend/styles.css @@ -0,0 +1,38 @@ +body{ + background-color: #43464b; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} + + +/* NavBar */ +.navbar{ + margin: 1.2rem; + margin-top: 0; + border-bottom: 2px solid white; +} + +.navbar span{ + font-weight: bold !important; + color: white !important; +} + +.navbar a:hover{ + color: snow; + font-weight: bolder; +} +.navbar a{ color: white; } + + + + + + + + + +/* Accordion */ +.accordion-item, .accordion-header, .accordion-button{ + background-color: transparent !important; + border: none !important; + text-decoration: none !important; +} |