-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
213 lines (194 loc) · 14.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css">
<link rel="canonical" href="https://worldsinn.net/">
<link rel="stylesheet" href="./style/app.css">
<title>World's Inn, la taverna dei mondi.</title>
<meta name="robots" content="index, follow" max-snippet:[100]="">
<meta name="googlebot" content="index, follow" max-snippet:[100]="" max-image-preview:[standard]="">
<meta name="description" content="Una grande taverna in cui entrare e riposarsi al termine id un'avventura, in cui scambiare 4 chiacchiere con gente sempre diversa. Se ti affacci potrai vedere i vari mondi che collega: giochi di ruolo, narrativa, cocktai. Il tutto avvolto dalla magi del fantasy.">
<meta name="keywords" content="WorldsInn, Yggdrasill, mitologia norrena, gdr, giochi di ruolo, D&D, dnd, Dungeons and Dragons, dungeons and dragons, wizard of the coast, fantasy, videogioch ">
<meta name="author" content="Federico Calò">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!--<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;1,100;1,300;1,400;1,700&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">-->
<!-- <script type="module" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.js"></script>-->
<link rel="icon" type="img/webp" href="./img/favicon.webp"/>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9556331893712433"
crossorigin="anonymous"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XVVRB11ZLS"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XVVRB11ZLS');
</script>
</head>
<body>
<header>
<a href="/" class="logo">Worlds' Inn</a>
<div class="navigation">
<ul class="menu">
<div class="close-btn"><i class="fas fa-times fa-2x"></i></div>
<li class="menu-item closeLink"><a href="#">Home</a></li>
<li class="menu-item closeProgetto"><a href="#progetto">Il progetto</a></li>
<li class="menu-item">
<a class="sub-btn">RPG <i class="fas fa-angle-down"></i></a>
<ul class="sub-menu">
<li class="sub-item closeDnd"><a href="dnd.html">D&D</a></li>
</ul>
</li>
</ul>
</div>
<div class="menu-btn"><i class="fas fa-bars fa-2x"></i></div>
</header>
<section class="section-home" >
<h1>Worlds' Inn</h1>
</section>
<section class="section-two" id="progetto">
<h1>Benvenuto a World’s Inn, la locanda al centro di Yggdrasill !</h1>
<p>Qui cerchiamo di far incontrare i giocatori e le varie ambientazioni GDR, che tu venga da un verdeggiante mondo Fantasy, da un anarchico universo Cyberpunk o da un tetro mondo post apocalittico questo è il posto giusto per te, incontrati con i tuoi amici o fai nuove conoscenze e lanciati all’avventura!
Ma se vuoi prenderti una pausa dalle avventure e fare una chiacchierata, rilassati pure e prendi qualcosa da bere. Occhio alle tue tasche però, ai Goblin piace rovistare nelle cose altrui.
Buon divertimento!
</p>
</section>
<section class="section-two" id="progetto">
<h1>La locanda</h1>
<p>Appena entri in locanda senti aria di festa. Ci sono Bardi che ballano sui tavoli, Ricettatori di Night City che fanno affari con Nani dei monti Yehimal, Pirati che bevono birra accanto a Vampiri che bevono “vino” e Automi di ogni forma e dimensione. Come puoi ben vedere la locanda è affollata e il locandiere ha il suo bel daffare, ma se vuoi aiutarlo con una mancia, anche se piccola, di sicuro lo renderai felice e chissà, magari vedrai comparire qualche servizio in più all’interno della tua locanda tra i mondi di fiducia.</p>
</section>
<section class="section-two figure-sezioni">
<h1>Sezioni</h1>
<p>Qui troverai le sezioni del sito che verranno man mano aggiunte e aggiornate. Vieni a scoprirle e divertiti insieme a noi!!</p>
<div class="sezioni-figure">
<div class="figure figure1">
<div class="container">
<img src="./img/dnd_card.webp" alt="immagine relativa alla carta di Dungeons and Dragons">
</div>
<div class="dettagli">
<h3>Dungeons and Dragons</h3>
<p>Scopri il fantastisco mondo di Dungeons and Dragons, un famoso gdr nato negli USA e diffuso in italia sin dai primi anni 2000. Divertiti con il materiale homebrew che mettiamo a disposizione e trova un gruppo per iniziare a giocare.</p>
<a href="dnd.html">Visita la sezione</a>
</div>
</div>
</div>
</section>
<section class="section-two team-section" id="collaborazioni">
<h1>Collaborazioni</h1>
<p>L'universo è molto vasto, pieno di luoghi ancora inesplorati. Qui troverai le nostre alleanze, uniamo le nostre forze, esploriamo insieme le terre inesplorate. <a href="#contatti">Unisciti</a> a noi e diventa più forte.</p>
<div class="container-coll">
<div class="team-card">
<div class="card">
<div class="image-section">
<img src="img/dietroloschermo.webp" alt="Logo Dietro Lo Schermo">
</div>
<div class="content">
<h3> <a href="https://dietroschermo.wordpress.com/" target="_blank">Dietro lo schermo</a> </h3>
<p>Lo scopo di questo blog è fornire strumenti utili a qualunque <a href="https://dietroschermo.wordpress.com/conoscenza/glossario/diemme/" target="_blank"> Diemme</a> di <a href="https://dietroschermo.wordpress.com/conoscenza/glossario/dd/" target="_blank"> D&D </a> per imparare a costruire e gestire il proprio gioco.</p>
</div>
</div>
<div class="card">
<div class="image-section">
<img src="img/gdranonimi.webp" alt="Logo pagina instagram GDR anonimi">
</div>
<div class="content">
<h3> <a href="https://instagram.com/gdr_anonimi?utm_medium=copy_link" target="_blank">GDR anonimi</a> </h3>
<p>Pagina Instagram dedita alla diffusione dei giochi di ruolo attraverso traduzioni, homebrew e meme. Il loro motto è: "Party con la fantasia insieme a noi. Perché limitarsi quando si può vivere un sogno?
"</p>
</div>
</div>
<div class="card">
<div class="image-section">
<img src="img/Dalla_Parte_Del_Topo.webp" alt="Logo pagina telegram dalla parte del topo">
</div>
<div class="content">
<h3> <a href="https://t.me/s/DallaParteDelTopo" target="_blank">Dalla parte del topo</a> </h3>
<p>Dalla Parte del Topo è un canale che si pone l'obiettivo di far conoscere Master e giochi di ruolo presenti principalmente sulla piattaforma di telegram, ma anche su altre, tramite interviste e messaggi pubblicitari, insieme a vari e propri concorsi, come se fosse un'emittente televisiva.</p>
</div>
</div>
<div class="card">
<div class="image-section">
<img src="img/nerdcoledi.webp" alt="Logo sito web nerdcoledi">
</div>
<div class="content">
<h3> <a href="https://www.nerdcoledi.it/" target="_blank">Nerdcoledì</a> </h3>
<p>Blog con cadenza settimanale dedicato ai giochi di ruolo, in particolare D&D e Pathfinder. Lo ringrazio anche perchè ci ha dedicato un'intervista in <a href="https://www.nerdcoledi.it/2022/04/13/worlds-inn-progetto-di-federico-calo/" target="_blank"> questo articolo.</a></p>
</div>
</div>
</div>
</div>
</section>
<section class="section-two team-section">
<h1>Associazioni</h1>
<p style="margin-bottom: 15px;">In Italia sono presenti molte associazioni che lavorano in ambito video-ludico a stretto contatto con i GDR. Per questo abbiamo deciso di incorporare questa mappa dove poter segnalare la vostra associazione. Inoltre, se avete un'attività che lavora nel settore, per esempio una fumetteria che vende prodotti specializzati, siete liberi di segnalarla nella mappa.</p>
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1i4DmcWjxU1Q38G7S_foedaHRO8Thik8-&ehbc=2E312F" width="100%" height="500px"></iframe><p>Per aggiungere la tua associazione o la tua attività, premi <a href="https://www.google.com/maps/d/u/0/edit?mid=1i4DmcWjxU1Q38G7S_foedaHRO8Thik8-&usp=sharing" style="text-decoration: underline; color:#44d800;" target="_blank">qui.</a> (Devi accedere con un account google)</p>
</section>
<section class="faqs">
<div class="container">
<h1>F.A.Q.</h1>
<div class="accordion">
<div class="accordion-item faq">
<h3> Ho un'associazione/attività legata ai gdr, come possiamo collaborare? <i class="fas fa-sort-down"></i> </h3>
<div class="answer"> <p> Contattaci al bot <a href="https://t.me/worldsinnassistenzabot" style="color: #44d800" target="_blank"> @worldsinnassistenzabot </a> raccontandoci chi siete e cosa fate, vi contatteremo il prima possibile. </p></div>
</div>
<div class="accordion-item faq">
<h3> Quali saranno i futuri sviluppi del progetto? <i class="fas fa-sort-down"></i></h3>
<div class="answer"> <p>Gli sviluppi del progetto sono in continuo cambiamento, tieni d'occhio questo elenco per scoprire cosa succederà. <br> Attualmente abbiamo previsto di:
<ul>
<li>Permettere agli utenti di creare degli account con una sezione relativa alla ricerca di giocatori</li>
<li>Sezione chat degli iscritti al sito per organizzarsi sulle sessioni</li>
<li>Newsletter</li>
<li>Collaborazioni con associazioni che organizzano eventi a tema GDR</li>
<li>Uno shop per vendere materiale homebrew</li>
</ul>
</p></div>
</div>
<div class="accordion-item faq">
<h3> E' obbligatorio avere un account Telegram? A cosa serve? <i class="fas fa-sort-down"></i></h3>
<div class="answer"> <p> Essendo un progetto amatoriale, per ridurre i costi al minimo, ci basiamo su Telegram per la condivisione del materiale e intrattenre i rapporti con i diversi collaboratori </p></div>
</div>
<!--<div class="accordion-item faq">
<h3> L'usurname di Telegram corrisponde al nome utente di Telgram? <i class="fas fa-sort-down"></i></h3>
<div class="answer"> <p> No, nome utente e usurname di Telegram sono due cose differenti. Nelle impostazioni di Telegram, nella sezione relativa all\'account potrete impostarne uno. </p></div>
</div>-->
</div>
</div>
</section>
<!--
<section class="contattaci section-two" id="contatti">
<div class="container">
<h1>Contattaci</h1>
<form action="" class="bg-white rounded px-8 pt-6 pb-8 mb-4" >
<div class="formWord">
<span class="block text-sm font-bol mb-2">Nome e Cognome</span>
<input id="name" name="name" type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-4" required>
<br>
<span class="block text-sm font-bol mb-2">Oggetto</span>
<input id="oggetto" name="oggetto" type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-4" required>
<br>
<span class="block text-sm font-bol mb-2">Email</span>
<input id="email" name="email" type="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-4" required>
<div class="formWord">
<span>Message</span>
<br>
<textarea id="message" name="message" cols="30" rows="10" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-4" required></textarea>
<input type="submit" value="Invia" class="submit-btn">
</div>
</div>
</form>
</div>
</section>-->
<footer>
<a href="#" class="logo">Worlds' Inn</a>
<div class="realizzato">
<p>Sito realizzato da <a href="https://www.federicocalo.it"target="_blank">Federico Calò</a></p>
</div>
</footer>
<script src="./script/app.js"></script>
</body>
</html>