broadpeter.github.io/index.html at main · broadpeter/broadpeter.github.io · 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
<!--
  Using tutorial from here
  https://www.codeguage.com/tutorials/lazy-loading/ -->


<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8" />
<!-- Primary Meta Tags -->
  <title>Peter Broad</title>
  <meta name="title" content="Peter Broad">
  <meta name="description" content="My homepage">

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://broadpeter.github.io/index.html">
  <meta property="og:title" content="Peter Broad">
  <meta property="og:description" content="My homepage">
  <meta property="og:image" content="exportimages/split-sarajevo-landscape-2-_0007">
  <link rel="icon" href="bike-icon.png">
  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="https://broadpeter.github.io/index.html">
  <meta property="twitter:title" content="Peter Broad">
  <meta property="twitter:description" content="My homepage">
  <meta property="twitter:image" content="exportimages/split-sarajevo-landscape-2-_0007">


  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <link rel="stylesheet" href="style.css">


    <!-- /* .div1{

    overflow: scroll;
  height: 100vh;
  scroll-snap-type: y mandatory;
} */


    /* .image{

     scroll-snap-align: start;
}
*/


    /*
For horiztontal scroll

.image{
    display:inline-block;

}


 .full-wrapper{
    overflow-x: scroll;
    overflow-y: hidden;
    height: 100vh;
    white-space:nowrap;
} */ -->
  </style>
</head>

<body>
  <div class="page-div" >
  <div class="header">Photos</div>
  <div class="menu-container">
<div class="menu-div">
<!-- <p>Photos</p> -->
  <!-- <div class="full-wrapper" style="display: table; height: 100vh; overflow: hidden;"> -->
    <!-- <div class= style="display: table-cell; vertical-align: middle;"> -->
<br>
<a href="/split-sarajevo.html">Split to Sarajevo</a>

<br>

<a href="/tirana-pristina.html">Tirana to Pristina</a>

    <!-- <a href="/split-sarajevo.html">Other link</a> -->
<!-- <br>Split to Sarajevo -->
</div>
</div>
      <!-- </div> -->
</body>


<!-- adds class based on image dimensions
   <script>
  $('.image').each(function () {
    $(this).addClass(this.width > this.height ? 'image landscape' : 'image portrait');
  });
</script> -->