<!DOCTYPE html>
<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">
    <meta name="description" content="The worlds leading Dungeons & Dragons Roleplaying website">
    <title>Dungeons & Dragons - Roleplay / TTRPG Tabletop | DungeonsNDragons.com</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="javascript/script.js"></script>
</head>
<body class="body">
    <header>
        <picture>
            <source media="(min-width: 1024px)" srcset="img/Banner.jpg">
            <source media="(min-width: 500px)" srcset="img/Banner_Mobile_1200px.jpg">
            <img src="img/Banner_Mobile_400px.jpg" alt="Dungeons & Dragons Banner">
        </picture>
    </header>
    <div class="MobileNav">
        <div id="burgerMenu" class="class" onclick="this.classList.toggle('On');">
        </div>
        <nav class="Mobile" id="Mobile">
            <ul>
                <li onclick="this.classList.toggle('On');">
                    <a href="index.html">Forside</a>
                </li>
                <li onclick="this.classList.toggle('On');">
                    <a href="#">Classes</a>
                    <div class="dropdown-dropdown-content">
                        <a href="classes/barbarian.html">Barbarian</a>
                        <a href="classes/cleric.html">Cleric</a>
                        <a href="classes/fighter.html">Fighter</a>
                        <a href="classes/sorcerer.html">Sorcerer</a>
                    </div>
                </li>
                <li onclick="this.classList.toggle('On');">
                    <a href="#">Races</a>
                    <div class="dropdown-dropdown-content">
                        <a href="races/dwarf.html">Dwarf</a>
                        <a href="races/elf.html">Elf</a>
                        <a href="races/human.html">Human</a>
                    </div>
                </li>
                <li onclick="this.classList.toggle('On');">
                    <a href="#">Spells</a>
                    <div class="dropdown-dropdown-content">
                        <a href="spells/abjuration.html">Abjuration</a>
                        <a href="spells/conjuration.html">Conjuration</a>
                        <a href="spells/divination.html">Divination</a>
                        <a href="spells/enchantment.html">Enchantment</a>
                        <a href="spells/evocation.html">Evocation</a>
                        <a href="spells/illusion.html">Illusion</a>
                        <a href="spells/necromancy.html">Necromancy</a>
                        <a href="spells/transmutation.html">Transmutation</a>
                    </div>
                </li>
                <li>
                    <a href="kontaktOs.html">Contact Us</a>
                </li>
                <li class="cta">
                    <a href="shop.html">Shop</a>
                </li>
            </ul>
        </nav>
    </div>
    <nav class="Desktop">
        <ul>
            <li><a href="index.html">Forside</a></li>
            <li class="dropdown">
                <a href="" class="dropbtn">Classes</a>
                <div class="dropdown-content">
                    <a href="classes/barbarian.html">Barbarian</a>
                    <a href="classes/cleric.html">Cleric</a>
                    <a href="classes/fighter.html">Fighter</a>
                    <a href="classes/sorcerer.html">Sorcerer</a>
                </div>
            </li>
            <li class="dropdown">
                <a href="" class="dropbtn">Races</a>
                <div class="dropdown-content">
                    <a href="races/dwarf.html">Dwarf</a>
                    <a href="races/elf.html">Elf</a>
                    <a href="races/human.html">Human</a>
                </div>
            </li>
            <li class="dropdown">
                <a href="" class="dropbtn">Spells</a>
                <div class="dropdown-content">
                    <a href="spells/abjuration.html">Abjuration</a>
                    <a href="spells/conjuration.html">Conjuration</a>
                    <a href="spells/divination.html">Divination</a>
                    <a href="spells/enchantment.html">Enchantment</a>
                    <a href="spells/evocation.html">Evocation</a>
                    <a href="spells/illusion.html">Illusion</a>
                    <a href="spells/necromancy.html">Necromancy</a>
                    <a href="spells/transmutation.html">Transmutation</a>
                </div>
            </li>
            <li>
                <a href="kontaktOs.html">Contact Us</a>
            </li>
            <li class="cta">
                <a href="shop.html">Visit our shop</a>
            </li>
        </ul>
    </nav>
    <section class="first">
        <article>
            <h1>Dungeons & Dragons</h1>
            <p>The Dungeons & Dragons roleplaying ttrpg tabletop game is about storytelling in worlds of swords 
            and sorcery. It shares elements with childhood games of make-believe. Like those
            games, Dungeons & Dragons is driven by imagination. It's about picturing the towering castle
            beneath the stormy night sky and imagining how a fantasy adventurer might react
            to the challenges that scene presents. Unlike a game of make-believe, Dungeons & Dragons gives
            structure to the stories, a way of determining the consequences of the adventurers'
            action. Players roll dice to resolve whether their attacks hit or miss or whether
            their adventurers can scale a cliff, roll away from the strike of a magical
            lightning bolt, or pull off some other dangerous task. Anything is possible,
            but the dice make some outcomes more probable than others.</p>
            <img class="Forside" srcset="img/DnD-Banner1-400px.jpg 400w,
                img/DnD-banner1-1200px.jpg 1200w,
                img/DnD-banner1-1920px.jpg 1920w"
                sizes="(max-width: 500px) 400px, (max-width: 1400) 1200px, 1920px" 
                src="img/DnD-banner1-1920px.jpg"
                alt="Dungeons & Dragons Banner 1"    
            >
            <p>In the Dungeons & Dragons game, each player creates an adventurer
            (also called a character) and teams up with other adventurers (played by friends). 
            Working together, the group might explore a dark dungeon, a ruined city, a 
            haunted castle, a lost temple deep in a jungle, or a lava-filled cavern beneath 
            a mysterious mountain. The adventurers can solve puzzles, talk with other characters, 
            battle fantastic monsters, and discover fabulous magic items and other treasure.
            One player, however, takes on the role of the Dungeon Master (DM), the game's 
            lead storyteller and referee. The DM creates adventures for the characters, 
            who navigate its hazards and decide which paths to explore. Because the DM can 
            improvise to react to anything the players attempt, Dungeons & Dragons is infinitely flexible, 
            and each adventure can be exciting and unexpected. The game has no real end; 
            when one story or quest wraps up, another one can begin, creating an ongoing 
            story called a campaign. Many people who play the game keep their campaigns 
            going for months or years, meeting with their friends every week or so to pick 
            up the story where they left off. The adventurers grow in might as the campaign 
            continues. Each monster defeated, each adventure completed, and each treasure 
            recovered not only adds to the continuing story, but also earns the adventurers 
            new capabilities. This increase in power is reflected by an adventurer's level.</p>
        </article>
    </section>
    <section>
        <article>
            <img class="Forside" srcset="img/DnD-Banner2-400px.jpg 400w,
                img/DnD-banner2-1200px.jpg 1200w,
                img/DnD-banner2-1920px.jpg 1920w"
                sizes="(max-width: 500px) 400px, (max-width: 1400) 1200px, 1920px" 
                src="img/DnD-banner2-1920px.jpg"
                alt="Dungeons & Dragons Banner 2"    
            >
            <h2>Worlds of Adventure</h2>
            <p>The many worlds of the Dungeons & Dragons game are places of magic and monsters, 
            of brave warriors and spectacular adventures. They begin with a foundation of 
            medieval fantasy and then add the creatures, places, and magic that make 
            these worlds unique. The worlds of the Dungeons & Dragons game exist within 
            a vast cosmos called the multiverse, connected in strange and mysterious ways 
            to one another and to other planes of existence, such as the Elemental Plane 
            of Fire and the Infinite Depths of the Abyss. Within this multiverse are an 
            endless variety of worlds. Many of them have been published as official settings 
            for the D&D game. The legends of the Forgotten Realms, Dragonlance, Greyhawk, 
            Dark Sun, Mystara, and Eberron settings are woven together in the fabric of 
            the multiverse. Alongside these worlds are hundreds of thousands more, created 
            by generations of D&D players for their own games. And amid all the richness 
            of the multiverse, you might create a world of your own.</p>
        </article>
    </section>
    <section>
        <article class="indexClasses">
            <a href="classes/barbarian.html"><img src="img/Barbarian-icon.jpg" alt="Dungeons & Dragons Barbarian icon"></a>
            <a href="classes/cleric.html"><img src="img/Cleric-icon.jpg" alt="Dungeons & Dragons Cleric icon"></a>
            <a href="classes/fighter.html"><img src="img/Fighter-icon.jpg" alt="Dungeons & Dragons Fighter icon"></a>
            <a href="classes/sorcerer.html"><img src="img/Sorcerer-icon.jpg" alt="Dungeons & Dragons Sorcerer icon"></a>
        </article>
    </section>
    <footer>
        © DnD V1 AspIT 2022
    </footer>
</body>
</html>