Add files via upload

Xaiadh · Dec 11, 2023 · e894552 · e894552
1 parent 53c8fbe
commit e894552
Show file tree

Hide file tree

Showing 10 changed files with 367 additions and 2 deletions.
diff --git a/boostrap/index.html b/boostrap/index.html
@@ -12,7 +12,7 @@
         <header>
         <div class="container">
             <div class="row">
-            </div class="col-md-12">
+            <div class="col-md-12">
             <h1>Boostrap harjoite eri osioiden mukaisesti</h1>
             </div>
         </div>

diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@ <h1>Minun kurssitehtävien palautussivu</h1>
         <p>Teemu Hamunen R0244-3028</p>
         <ul>
             <li><a href="harjoitus.html">Harjoitussivu</a></li>
-            <li><a href="Projekti.html">Projekti</a></li> 
+            <li><a href="projekti/index.html">Projekti</a></li> 
         </ul>
     </body>
 </html>

diff --git a/projekti/bootstrap.html b/projekti/bootstrap.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="fi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bootstrap-sivu</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <link rel="stylesheet" href="bootstrap_stylesheet.css">
+</head>
+<body>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+
+    <header>
+        <div class="container">
+            <div class="row">
+                <div class="col-md-12">
+                    <h1>Roolipeli-sisältöä ja triviaa</h1>
+                </div>
+            </div>
+        </div>
+    </header>
+    <nav>
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6">
+                    <nav class="nav">
+                        <a href="https://xaiadh.github.io/" class="nav-link active">Kotisivu</a>
+                    </nav>
+                </div>
+                <div class="col-md-6">
+                    <nav class="nav">
+                        <a href="index.html" class="nav-link active">Takaisin etusivulle</a>
+                    </nav>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <main>
+        <article>
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-4">
+                        <h3>Roolipelien vaikutus kulttuuriin</h3>
+                        <p> Roolipelit eivät ole vain pelejä, vaan ne ovat vaikuttaneet laajasti populaarikulttuuriin, kuten kirjallisuuteen, elokuviin ja videopeleihin.</p>
+                    </div>
+                    <div class="col-md-4">
+                        <h3>Suosittuja roolipelejä</h3>
+                        <p>D&D:n lisäksi muita suosittuja roolipelejä ovat esimerkiksi Vampire: The Masquerade, Call of Cthulhu, Shadowrun, Pathfinder ja World of Darkness -sarja.</p>
+                    </div>
+                    <div class="col-md-4">
+                        <h3>Pelimekaniikka</h3>  
+                        <p>Jokaisella roolipelillä on omat sääntönsä ja mekaniikkansa, jotka määrittelevät, miten peliä pelataan. Näihin kuuluu esimerkiksi noppien heittelyä,
+                        tilastojen käyttöä hahmojen kyvyissä ja päätöksenteossa sekä tarinankerrontaa.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-3">
+                        <h3>Pelien monimuotoisuus ja inklusiivisuus</h3>
+                        <p>Nykyään roolipelit pyrkivät olemaan monimuotoisempia ja inklusiivisempia, tarjoten mahdollisuuksia erilaisille
+                         pelaajille ja edustaen moninaisia kulttuureja, sukupuolia, seksuaalisuuksia ja taustoja.</p>
+                    </div>
+                    <div class="col-md-3">
+                        <h3>Pelimaailman rakentaminen</h3>
+                        <p>Useimmat roolipelit tapahtuvat omassa maailmassaan tai universumissaan, joka on usein DM:n luoma.
+                         Maailmanrakentaminen voi sisältää karttojen piirtämistä, historian luomista, erilaisten hahmojen suunnittelua ja erilaisten kulttuurien kehittämistä.</p>
+                    </div>
+                    <div class="col-md-3">
+                        <h3>Immersio ja vuorovaikutus</h3>  
+                        <p>Roolipelit tarjoavat pelaajille mahdollisuuden uppoutua pelimaailmaan ja toimia hahmonsa kautta. Vuorovaikutus muiden pelaajien ja DM:n kanssa on keskeinen osa pelikokemusta.</p>
+                    </div>
+                    <div class="col-md-3">
+                        <h3>Kampanjat ja yksittäiset seikkailut</h3>
+                        <p>Roolipelit voivat olla joko pidempiä kampanjoita, jotka kestävät useita pelikertoja ja seikkailuja, tai lyhyempiä yksittäisiä seikkailuja, jotka voidaan suorittaa yhdessä pelikerrassa.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-6">
+                        <img src="img/c3fde469-fa7e-48e4-9084-23960371f69c.jpg" alt="lohikäärme" class="image-fluid" style="max-width: 600px; max-height: 400px;">
+                    </div>
+                    <div class="row">
+                    </div>
+                        <div class="col-md-6">
+                    </div>
+                </div>
+            </div>
+        </article>
+        <section>
+            <div class="container mt-4">
+                <div class="card" style="width: 18rem;">
+                  <img src="img/9d2fc626-a874-4640-920f-baedc6206d4a.jpg" class="card-img-top" alt="Placeholder Image">
+                  <div class="card-body">
+                    <h5 class="card-title">esimerkki taidetta</h5>
+                    <p class="card-text">AI-generaattori on todella hyvä keino tehdä sessioihin taidetta tai kuvailla hahmoja</p>
+                    <a href="https://deepai.org/machine-learning-model/text2img" class="btn btn-primary">kokeille itse tällä sivustolla</a>
+                  </div>
+                </div>
+              </div>
+        </section>
+    </main>
+</body>
+</html>
diff --git a/projekti/bootstrap_stylesheet.css b/projekti/bootstrap_stylesheet.css
@@ -0,0 +1,57 @@
+
+header h1 {
+    margin: 0;
+    font-size: 3em;
+    top: 0;
+    padding: 20px;
+    color: rgb(175, 5, 5);
+    font-family: 'Georgia', sans-serif;
+    background-color: #818080;
+}
+
+nav {
+    padding: 20px;
+    background-color: #73FCC6;
+}
+
+
+nav a {
+    color: rgb(80, 212, 19);
+}
+
+nav h2 {
+    color: rgb(64, 223, 16);
+
+}
+
+
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #73FCC6;
+    color: #022D55;
+
+}
+
+article {
+    background-color:#73FCC6;
+    color: #00103E
+    ;
+}
+
+footer {
+    background-color: #818080;
+    color: #00103E;
+}
+
+article {
+    padding:  20px;
+    border: 1px;
+    transition: width 2s, height 2s, transform 2s;
+    background-color: #818080;
+}
+
+section {
+    padding: 20px;
+    border: 1px;
+}
+
diff --git a/projekti/img/9d2fc626-a874-4640-920f-baedc6206d4a.jpg b/projekti/img/9d2fc626-a874-4640-920f-baedc6206d4a.jpg
diff --git a/projekti/img/c3fde469-fa7e-48e4-9084-23960371f69c.jpg b/projekti/img/c3fde469-fa7e-48e4-9084-23960371f69c.jpg
diff --git a/projekti/img/d20picture.jpg b/projekti/img/d20picture.jpg
diff --git a/projekti/img/scenery.jpg b/projekti/img/scenery.jpg
diff --git a/projekti/index.html b/projekti/index.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="fi">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Projekti</title>
+    <link rel="stylesheet" href="stylesheet.css">
+<style>
+    header {
+  background-image: url(img/scenery.jpg);
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size:cover;
+    }
+
+
+[class*="col-"] {
+  width: 100%;
+}
+
+@media only screen and (min-width: 600px) {
+
+  .col-s-1 {width: 8.33%;}
+  .col-s-2 {width: 16.66%;}
+  .col-s-3 {width: 25%;}
+  .col-s-4 {width: 33.33%;}
+  .col-s-5 {width: 41.66%;}
+  .col-s-6 {width: 50%;}
+  .col-s-7 {width: 58.33%;}
+  .col-s-8 {width: 66.66%;}
+  .col-s-9 {width: 75%;}
+  .col-s-10 {width: 83.33%;}
+  .col-s-11 {width: 91.66%;}
+  .col-s-12 {width: 100%;}
+}
+
+@media only screen and (min-width: 768px) {
+
+  .col-1 {width: 8.33%;}
+  .col-2 {width: 16.66%;}
+  .col-3 {width: 25%;}
+  .col-4 {width: 33.33%;}
+  .col-5 {width: 41.66%;}
+  .col-6 {width: 50%;}
+  .col-7 {width: 58.33%;}
+  .col-8 {width: 66.66%;}
+  .col-9 {width: 75%;}
+  .col-10 {width: 83.33%;}
+  .col-11 {width: 91.66%;}
+  .col-12 {width: 100%;}
+}
+
+</style>
+</head>
+<body class="body">
+<header class="header">
+    <h1>Tietoa pöytäroolipelaamisesta</h1>
+    <nav>
+        <h2>Valikko</h2>
+        <ul>
+            <li><a href="https://xaiadh.github.io/">Etusivu</a></li>
+            <li><a href="bootstrap.html">Bootstrap-sivu</a></li>
+        </ul>
+    </nav>
+</header>
+<main class="main">
+<article>
+    <h2>Pöytäroolipelaamisen historiaa</h2>
+    <p>Roolipelien historia alkaa 1900 luvulta. Monet teatteriesitykset ja kirjat sisälsivät rooleja ja rooleihin eläytymistä, johon katsoja ja lukija pääsi osaksi.
+        Myös sen ajan simulaatio ja strategiset sotapelit sisälsivät mekaniikkoja jotka tulisivat myöhemmin osaksi roolipelejä.
+        Roolipelien varsinainen synty tapahtui 1974, kun Dungeons and Dragons julkaistiin. Se oli ensinmäinen painettu roolipeliteos, joka toi harrastuksen yleisön eteen ja loi syvän harrastuksen maailmanlaajuisesti.</p>
+        <figure>
+            <img src="img/d20picture.jpg" alt="pelipyötä">
+        </figure>
+    <p>Dungeons and Dragonsissta syntyi jättimäinen kysyntä roolipeleille, ja pian monet eri yritykset ja talot alkoivat tuottamaan omia pelejä ja systeemejä. Tämä suosio kesti 90-luvulle, jonka jälkeen sen suosio
+        väistyi videopelien ja kotikonsolien suosion myötä, mutta harrastusyhteisö eli ja uusia systeemejä ja pelejä julkaistiin. 2010-luku herätti harrastuksen taas ihmisten näkyvyyteen. Streemaus ja internetin
+        tarjoamien palveluiden avulla pöytäroolipelaamisesta on tullut helpompaa päästä sisään. Nykyään voit löytää podcasteja, livestriimejä ja oppaita peleistä, hahmojen luonnista, sekä eläytymisestä aina historiaan ja
+        omien tarinoiden kirjoittamiseen.</p>
+</article>
+<article>
+    <h2>Pöytäroolipelaamisen aloittaminen</h2>
+    <p>Ensinmäinen osa harrastuksessa on valita miljöö ja tyyli, jota halutaan pelata. Pöytäroolipelit tarjoavat asetelmia ja pelimaailmoja aina synkästä goottisesta kauhusta, aina iloisen pirteään fantasiaan.
+       On tärkeää miettiä tarkkaan millaista pelia haluavat pelinjohtaja vetää ja pelaajat pelata, jotta ryhmäharmonia säilyy hengissä. Seuraava vaihe on löytää ryhmä ystäviä tai tuttavia, joiden kanssa pelata.
+       Yleensä hyvä määrä on pelinjohtaja ja kolme pelaajaa, mutta voit itse valita haluatko vähemmän vai enemmän pelaajia. Sen jälkeen valitaan roolit ja ryhmän toiveet, jonka jälkeen luodaan hahmot ja luodaan
+       alustava pelimaailma, ja aletaan pelaamaan. Mikäli et tunne ketään kuka olisi kiinnostunut pelaamaan, internet on täynnä forumeja, sivustoja ja yhteisöjä, joista varmana löytyy ihmisiä, mikäli kielimuuria
+       ei ole.</p>   
+</article>   
+<section>
+<h2>Sivustoja</h2>
+<p>Ajattelin tähän osioon lisätä muutamia sivustoja, jotka voisivat olla hyviä paikkoja tutustua taikka löytää materiaaleja tutkittavaksi, painikkeilla pääsee käymään sivustoissa.</p>
+<a href="https://preview.drivethrurpg.com/en/" target="_blank" class="button">
+     drivethrurpg
+</a>
+<p>drivethrurpg tarjoaa katalogin pöytäroolipelejä laillisesti. Täältä pystyt etsimään ja ostamaan pdf-tiedostona roolipelikirjoja ja muuta kirjallisuutta.</p>
+<a href="https://www.reddit.com/" target="_blank" class="button">
+    reddit
+</a>
+ <p>reddit on maineestaan huolimatta yksi parhaimpia yhteisöjä, jossa roolipelaajia löytää. Sieltä saa apua pelinjohtamiseen, systeemeihin ja sääntöihin. Yhteisöt ovat avoimia ja mielellään neuvovat uusia tulokkaita.</p>   
+<figure>
+    <img src="img/scenery.jpg" alt="Miljöö">
+</figure>
+</section>    
+<article>
+    <h3>Tekniikat</h3>
+    <p>Tämän sivun teossa on käytetty seuraavia tekniikoita:</p>
+    <ul>
+        <li>1. Css-transition</li>
+        <li>2. Css-taustakuva</li>
+        <li>3. css-boxshadow</li>
+    </ul>
+</article>
+<footer>
+    <br>
+    <p>Tehnyt: Teemu Hamunen </p>
+</footer>
+</main>
+</body>
+</html>
diff --git a/projekti/stylesheet.css b/projekti/stylesheet.css
@@ -0,0 +1,85 @@
+nav a {
+    color: rgb(80, 212, 19);
+}
+
+header h1 {
+    margin: 0;
+    font-size: 3em;
+    top: 0;
+    padding: 20px;
+    color: rgb(99, 221, 17);
+    font-family: 'Georgia', sans-serif;
+}
+
+nav h2 {
+    color: rgb(64, 223, 16);
+
+}
+
+nav {
+    padding: 20px;
+
+}
+
+
+
+img {
+    width: 400px;
+    height: auto;
+}
+
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #73FCC6;
+    color: #022D55;
+
+}
+
+section {
+    background-color: #818080;
+    color: #00103E
+    ;
+}
+
+footer {
+    background-color: #818080;
+    color: #00103E;
+}
+
+.button {
+    display: inline-block;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+    border: 1px;
+    border-radius: 4px;
+    background-color: rgb(141, 141, 196);
+    color: black;
+    font-weight: bold;
+    transition: background-color 0.3s ease, color 0.3 ease;
+    cursor: pointer;
+}
+
+header {
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+
+
+}
+
+
+article {
+    padding:  20px;
+    border: 1px;
+    transition: width 2s, height 2s, transform 2s;
+}
+
+section {
+    padding: 20px;
+    border: 1px;
+}
+
+
+
+figure {
+    float: right;
+}