Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Xaiadh
Xaiadh authored Dec 12, 2023
1 parent e894552 commit 89c43d0
Show file tree
Hide file tree
Showing 4 changed files with 375 additions and 16 deletions.
105 changes: 105 additions & 0 deletions bootstrap.html
View file
Original file line number Diff line number Diff line change
@@ -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>
57 changes: 57 additions & 0 deletions bootstrap_stylesheet.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}

130 changes: 114 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,118 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>index.hmtl</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Minun kurssitehtävien palautussivu</h1>
<p>Teemu Hamunen R0244-3028</p>
<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ärooli&shy;pelaamisesta</h1>
<nav>
<h2>Valikko</h2>
<ul>
<li><a href="harjoitus.html">Harjoitussivu</a></li>
<li><a href="projekti/index.html">Projekti</a></li>
<li><a href="https://xaiadh.github.io/">Etusivu</a></li>
<li><a href="bootstrap.html">Bootstrap-sivu</a></li>
</ul>
</body>
</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>



99 changes: 99 additions & 0 deletions stylesheet.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
:root {
--spacing: 20px;
}

@media screen and (min-width: 800px) {
:root {
--spacing: 4em;
}
}

body {
font-family: 'Arial', sans-serif;
background-color: hsl(156, 96%, 72%);
color: hsl(209, 95%, 17%);
margin: 0;
line-height: 1.3em;
}

/* Header */

header {
box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.4);
}

header h1 {
margin: 0;
font-size: 3em;
top: 0;
color: hsl(96, 86%, 47%);
font-family: 'Georgia', sans-serif;
line-height: 1.2em;
}
header nav {
margin-top: 40px;
}
header nav a {
color: hsl(101, 83.5%, 45.3%);
}
header nav h2 {
color: hsl(106, 86.6%, 46.9%);
}

/* Elements */

footer,
section {
background-color: hsl(0, 0%, 50%);
color: hsl(225, 100%, 12%);
}


header,
footer,
article,
section {
padding: var(--spacing);
}

figure {
margin: 0 0 0 calc( -1 * var(--spacing));
}

figure img {
width: 100vw;
height: auto;
}

@media screen and (min-width: 640px) {
figure {
float: right;
margin-left: var(--spacing);
}
figure img {
width: 400px;
}
}

h2 {
line-height: 1.2em;
}

/* Classes */

.button {
display: inline-block;
padding: 10px 20px;
text-align: center;
text-decoration: none;
border-radius: 4px;
background-color: hsl(240, 32%, 66%);
color: black;
font-weight: bold;
transition: all 0.3s ease;
cursor: pointer;
}
.button:hover {
background-color: hsl(240, 32%, 36%);
color: white;
}

0 comments on commit 89c43d0

Please sign in to comment.