leinster-trophy/gallery.html at master · MattBCoding/leinster-trophy · 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
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
<!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">
    <link rel="stylesheet" href="assets/css/style.css">
    <title>Leinster Trophy</title>
    <!-- Favicon links and meta code generated by https://realfavicongenerator.net-->
    <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
    <link rel="manifest" href="assets/favicon/site.webmanifest" crossorigin="use-credentials">
    <link rel="mask-icon" href="assets/favicon/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="shortcut icon" href="assets/favicon/favicon.ico">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="msapplication-config" content="assets/favicon/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
    <!-- End of Favicon imported links and meta code-->
</head>
<body>
<!-- Nav Bar and Logo-->
    <header>
        <a href="index.html">
            <i class="fas fa-trophy">
            </i>
        </a>
        <nav>
            <ul id="menu">
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="trophy.html">Trophy</a>
                </li>
                <li>
                    <a href="winners.html">Winners</a>
                </li>
                <li>
                    <a href="gallery.html" class="current-page">Gallery</a>
                </li>
                <li>
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
        </nav>
    </header>
<!-- Hero Image section-->
    <section class="hero-outer">
        <div class="hero-image"></div>
        <div class="hero-text">
            <h1>Leinster Trophy</h1>
            <h2>The Gallery</h2>
        </div>
    </section>
    <section class="main">
        <h2>Media Gallery</h2>
        <section>
            <h3>Video</h3>
            <div class="video">
            <div class="youtube-container">
                <!-- embedded youtube player code generated from youtube
                changes to generated code, added autoplay and mute -->
                <iframe width="875" height="492" src="https://www.youtube.com/embed/im1_CPxJU3Y/?autoplay=1&mute=1" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
                <!-- end of youtube generated code -->
            </div>
            </div>
        </section>
        <section class="photos">
            <h3>Photographs</h3>
            <div class=photo-container>
                <img src="assets/images/whiteformulathreecartesting.jpg" alt="White Formula Three car on track testing before the race">
                <img src="assets/images/twogreenracecarsontrack.jpg" alt="Two green racecars fighting for position on track">
                <img src="assets/images/redbullliverycartesting.jpg" alt="Redbull liveried racecar on track testing before the race">
                <img src="assets/images/pauloconnellformulathreetesting.jpg" alt="Formula Three racecar testing before the race">
                <img src="assets/images/palletstorageformularenault.jpg" alt="2019 Leinster Trophy winner Barry Rabbit on track driving his Formula Renault">
                <img src="assets/images/nathan-lepler-club-founder.jpg" alt="Nathan Lepler, founder of the Leinster Motor Club">
                <img src="assets/images/lotus-25-on-track.jpg" alt="Lotus 25 on track">
                <img src="assets/images/leinstertrophyonthegrid.jpg" alt="The Leinster Trophy placed on the starting grid before the race">
                <img src="assets/images/classicsilverracecarcornering.jpg" alt="A classic silver racecar cornering on track at speed">
                <img src="assets/images/classicracecarsilverontrack.jpg" alt="A classic silver racecar in action on track">
                <img src="assets/images/classicferrarif1carontrack.jpg" alt="A classic Ferrari Formula One car racing on track">
                <img src="assets/images/classicf1racecarontrack.jpg" alt="A classic Formula One car on track">
                <img src="assets/images/blueformulathreebossirelandcar.jpg" alt="A blue Formula Three car on track testing before the race">
                <img src="assets/images/ayrtonsennadasilvamondellopark1982.jpg" alt="1982 Leinster Trophy winner and three time Formula One World Champion Aryton Senna at Mondello Park">
            </div>
        </section>
    </section>
<!-- back to top shortcut -->
    <div class="bookmark">
        <a href="#menu" id="bookmark-icon" aria-label="return to the top of the current page">
            <i class="fas fa-chevron-up"><br>Top</i>
        </a>
    </div>
<!-- footer bar -->
    <footer>
        <div class="footer-top">
            <form method="GET" action="newsletter-submit.html" class="newsletter-container">
                <h2>Sign up for our newsletter</h2>
                <span class="email-form">
                    <label for="email" id="email-label">email:</label>
                    <input type="email" id="email" name="email_address" placeholder="myname@email.com" required>
                </span>
                <input class="sign-up-button" type="submit" value="Sign Up">
            </form>
        </div>
        <div class="footer-bottom">
            <ul class="social-channels">
                <li class="social-icons">
                    <a href="https://www.facebook.com" target="_blank" aria-label="Go to our Facebook page (opens in new tab)">
                        <i class="fab fa-facebook"></i>
                    </a>
                </li>
                <li class="social-icons">
                    <a href="https://www.instagram.com" target="_blank" aria-label="Go to our Instagram page (opens in new tab)">
                        <i class="fab fa-instagram"></i>
                    </a>
                </li>
                <li class="social-icons">
                    <a href="https://www.twitter.com" target="_blank" aria-label="Go to our Twitter page (opens in new tab)">
                        <i class="fab fa-twitter"></i>
                    </a>
                </li>
                <li class="social-icons">
                    <a href="https://www.youtube.com" target="_blank" aria-label="Go to our YouTube page (opens in new tab)">
                        <i class="fab fa-youtube"></i>
                    </a>
                </li>
            </ul>
            <p class="copyright">© 2021 Matthew Bodden</p>
        </div>
    </footer>
    <script src="https://kit.fontawesome.com/cd2a226592.js" crossorigin="anonymous"></script>
</body>
</html>