GourmetRoastersProject/gallery.html at main · JohnGinnane/GourmetRoastersProject · 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
<!-- Author: John, Soorya -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Gourmet Roasters Gallery">
    <title>Gallery</title>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

    <!-- Tiny Colour -->
    <script src="lib/tinycolor.js"></script>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="media/bootstrap-icons-1.11.3/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="lib/bootstrap-5.3/css/bootstrap.css">
    <script src= "lib/bootstrap-5.3/js/bootstrap.js"></script>

    <!-- Spotlight -->
    <script src="lib/spotlight/spotlight.bundle.js"></script>

    <!--favicon-->
    <link rel="icon" href="media/favicon/favicon.ico">

    <script src="js/gallery.js"></script>

	<!-- Google Font Heading -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">

	<!-- Google Font Paragraph -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Madimi+One&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">

	<!-- Google Font Fancy -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap" rel="stylesheet">

    <!-- Load our style first -->
    <link rel="stylesheet" href="styles/style.css">

    <!-- https://stackoverflow.com/a/76120965 -->
    <!-- How to load header.html into each page -->
    <script>
      $(function() {
        $('#header').load('header.html', function() {
          // After loading in the header set the appropriate navbar selection
          let navbarItems = document.querySelectorAll("#navbarNav>ul>li>a");

          for (let navbarItem of navbarItems) {
            if (navbarItem.innerHTML.toLowerCase() == "gallery") {
              navbarItem.style.fontWeight = "bold";
            }
          }
        });

        $('#footer').load('footer.html');
      });
    </script>
</head>
<body>
    <svg class="svg-bean"
         height="32"
         width="32"
         style="display: none;"

         viewBox="0 0 350 200"
         xmlns="http://www.w3.org/2000/svg">
        <g xmlns="http://www.w3.org/2000/svg"
           transform="translate(-195.46875,-106.375)">
            <path d="m 536.89608,160.39748 c 0,0 -7.07107,-20.70812 -32.32488,-31.31473 -25.25381,-10.6066 -107.58125,-19.19289 -152.53303,-11.61675 -44.95179,7.57614 -110.10663,23.73858 -128.28938,48.9924 -18.18274,25.25381 -29.29442,34.34518 -14.64721,82.32743 14.64721,47.98225 106.06602,63.13453 106.06602,63.13453 0,0 82.32743,10.10153 144.95689,-23.2335 62.62946,-33.33504 74.24621,-56.06347 74.24621,-56.06347 0,0 15.65736,-16.66752 16.16244,-38.89087 0.50508,-22.22336 -13.63706,-28.28427 -13.63706,-28.28427 0,0 -15.65736,-13.13199 -35.35534,-7.57615 -19.69797,5.55584 -19.69797,6.06092 -28.78935,7.57615 -9.09137,1.51522 -19.69797,-2.02031 -30.30457,0 -10.6066,2.0203 -59.599,23.73858 -105.56094,29.7995 -45.96194,6.06091 -65.65992,2.52538 -78.28682,6.06091 -12.62691,3.53554 -19.1929,11.11168 -24.24367,6.06092 -5.05076,-5.05077 8.08122,-19.1929 24.74874,-21.71828 16.66752,-2.52538 18.68782,1.01015 40.91118,0.50507 22.22336,-0.50507 77.78175,-29.7995 142.93658,-35.86041 65.15484,-6.06092 93.94419,10.10152 93.94419,10.10152 z"
                  style="fill:#000000; stroke:none"/>
        </g>
    </svg>

    <div id="header" class="container-fluid"></div>
    <div id="body" class="container-fluid h-100">
        <div id='gallery-bean-background'></div>

        <div class="row flex-grow-1 h-100 d-flex flex-column align-items-center">
            <div class="col-md-8">
                <div class="row gallery-row">
                    <a href="media/images/cafe-table.jpg" class="col-sm-4 spotlight">
                        <img src="media/images/thumbnail-cafe-table.webp" class="img-fluid img-thumbnail" alt="A crowded table at the cafe">
                    </a>
                    <a href="media/images/coffee-bar.jpg" class="col-sm-4 spotlight">
                        <img src="media/images/thumbnail-coffee-bar.webp" class="img-fluid img-thumbnail" alt="Our cafe bar with menu on the wall">
                    </a>
                    <a href="media/images/coffee-filters.jpg" class="col-sm-4 spotlight">
                        <img src="media/images/thumbnail-coffee-filters.webp" class="img-fluid img-thumbnail" alt="A collage of coffee filters placed on top of glass containers">
                    </a>
                </div>
                <div class="row gallery-row">
                    <a href="media/images/coffee-on-table-2.jpg" class="col-sm-4 spotlight">
                        <img src="media/images/thumbnail-coffee-on-table-2.webp" class="img-fluid img-thumbnail" alt="A fresh cup of coffee with a floral pattern">
                    </a>
                    <a href="media/images/coffee-on-table-3.jpg" class="col-sm-4 spotlight">
                        <img src="media/images/thumbnail-coffee-on-table-3.webp" class="img-fluid img-thumbnail" alt="Fresh baked cookie with two cups of lattes on a table">
                    </a>
                    <a href="media/images/coffee-on-table-4.jpg" class="col-sm-4 spotlight">
                        <img src="media/images/thumbnail-coffee-on-table-4.webp" class="img-fluid img-thumbnail" alt="Two cups of coffee with a slice of cake in the background">
                    </a>
                </div>
                <div class="row gallery-row">
                    <a href="media/images/cafe-table-2.jpeg" class="col-sm-4 spotlight">
                        <img src="media/images/thumbnail-cafe-table-2.webp" class="img-fluid img-thumbnail" alt="A busy table with mugs of coffee, soup and some fruit">
                    </a>
                    <a href="media/images/cafe-table-flower.jpeg" class="col-sm-4 spotlight">
                        <img src="media/images/thumbnail-cafe-table-flower.webp" class="img-fluid img-thumbnail" alt="Two cups of coffee on a table with a glass vase, containing some herbs">
                    </a>
                    <a href="media/images/coffee-city-view.jpg" class="col-sm-4 spotlight">
                        <img src="media/images/thumbnail-coffee-city-view.webp" class="img-fluid img-thumbnail" alt="An espresso with a book, phone, and notebook on a table overlooking the city">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="position-fixed bottom-50 end-0">
        <a class="btn fw-bold scroll-to-top" href="gallery.html"  aria-label="homepage link">
            <i class="bi bi-arrow-up-circle "></i>
        </a>
    </div>

    <footer id="footer" class="container-fluid fixed-bottom"></footer>
</body>
</html>