userinterface3/parties.html at master · buildpartyplanner/userinterface3 · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Party Planner: Parties We Made Possible</title>
    <link rel="stylesheet" type="text/css" media="screen" href="./CSS/index.css" />
</head>
<body>
    <script defer="defer" src="./components/tabs/tabs.js"></script>
    <script defer="defer" src="./components/tabs/navtabs.js"></script>
    <header class="navigation">
        <h1>PARTY PLANNER</h1>
        <nav class="nav-header">
            <a href="index.html">About</a>
            <a href="parties.html" class="nav-a-selected">Our Parties</a>
            <a href="team.html">Our Team</a>
            <a class = "login" href="#">Login</a>
        </nav>
    </header>

    <div class="container">

        <div class="stories-intro">
            <h2>These awesome parties were made possible by PARTY PLANNER!</h2>
        </div>

        <div class="party-stories">
            <div class="tab-row">
                <h3>Party Organizers</h3>
                <div class="tab tab-selected" data-tab="Mad Hatter">Mad Hatter</div>
                <div class="tab" data-tab="Le Chevalier de Mirval">Le Chevalier de Mirval</div>
                <div class="tab" data-tab="Trimalchio">Trimalchio</div>
                <div class="tab" data-tab="Brigata">Florence Youth Brigade</div>
            </div>
            <div class="tab-content">
                <div class="party-story party-story-selected" data-tab="Mad Hatter">
                    <h3>Mad Hatter's Tea Party</h3>
                    <img src="./assets/images/tenniel_alice_teaparty.png" alt="Tea Party">
                    <p>"I had no idea whatsoever what I was going to do for my party, but luckily Party Planner came to the rescue, and the shindig went off without hitch. We even had enough tea and biscuits to serve some poor lost English girl. 10/10" - The Mad Hatter</p>
                </div>
                <div class="party-story" data-tab="Le Chevalier de Mirval">
                    <h3>A Philosphic Evening with the Chevalier</h3>
                    <img src="./assets/images/pexels-masquerade-896354.jpeg" alt="">
                    <p>"I was in quite dire straits as my wine and honey supplies were running dangerously low, and I had naught but a fortnight to plan a sumptuous philosophical evening from my more experienced friends. Party Planner helped me get it all sorted. 13/10!"- Le Chevalier de Mirval.</p>
                </div>
                <div class="party-story" data-tab="Trimalchio">
                    <h3>Trimalchio's Feast to End All Feasts</h3>
                    <img src="./assets/images/pexels-mysteryparty-787961.jpeg" alt="">
                    <p> "I had a dozen guests coming over, but I wasn't afraid. It was not that I had the courage and cunning to pull it off. What I had was PARTY PLANNER. X/X"- Trimalchio</p>
                </div>
                <div class="party-story" data-tab="Brigata">
                    <h3>A Plague of Tales in a Time of Plagues</h3>
                    <img src="./assets/images/pexels-aerial_florence-1575367.jpg" alt="Florence on Foggy Day">
                    <p>"We had to organize a ten-day storytelling jam and plan for a lot of funerals. Party Planner really saved the day. Everything really felt so spontaneous and hassle-free with PARTY PLANNER!" - Florence Youth Brigade</p>
                </div>
            </div>
        </div>
    </div>
    <footer>
            <p class="copyright">Copyright Party Planners 2019</p>
    </footer>
</body>
</html>