-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
143 lines (134 loc) · 7.28 KB
/
index.html
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
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Oceania Countries</title>
<!-- Meta Tags required for Progressive Web App -->
<meta name="apple-mobile-web-app-status-bar" content="#1e87f0">
<meta name="theme-color" content="#1e87f0">
<!-- Manifest File link for Progressive Web App -->
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="css/uikit.min.css" />
<link rel="stylesheet" href="css/flags32-both.css" />
<link rel="stylesheet" href="css/styles.css" />
<script src="js/uikit.min.js"></script>
<script src="js/uikit-icons.min.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-VPDF71R072"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-VPDF71R072');
</script>
</head>
<body>
<!-- header -->
<header>
<div uk-sticky="media: 640" class="uk-background-primary uk-light uk-margin-large-bottom uk-sticky">
<div class="uk-container uk-container-expand">
<nav class="uk-navbar">
<div class="uk-navbar-left"><a href="./" class="uk-navbar-item uk-logo">Oceania
</a></div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav uk-visible@m">
<li class="uk-active"><a href="./">Home</a></li>
<li><a href="./maps.html">Maps</a></li>
<li><a href="./australia.html">Australia</a></li>
<li><a href="./new-zealand.html">New Zealand</a></li>
</ul>
<a uk-navbar-toggle-icon="" href="#offcanvas" uk-toggle="" class="uk-navbar-toggle uk-hidden@m uk-icon uk-navbar-toggle-icon" aria-expanded="false">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<rect y="9" width="20" height="2"></rect>
<rect y="3" width="20" height="2"></rect>
<rect y="15" width="20" height="2"></rect>
</svg>
</a>
</div>
</nav>
</div>
</div>
<!-- mobile nav -->
<div id="offcanvas" uk-offcanvas="mode: push; overlay: true">
<div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close" type="button" uk-close></button>
<h3>Menu</h3>
<p><a href="./" class="uk-button uk-button-text">Home</a></p>
<p><a href="./maps.html" class="uk-button uk-button-text">Maps</a></p>
<p><a href="./australia.html" class="uk-button uk-button-text">Australia</a></p>
<p><a href="./new-zealand.html" class="uk-button uk-button-text">New Zealand</a></p>
</div>
</div>
</header>
<!-- content -->
<div class="uk-section-small uk-padding-remove-vertical">
<div class="uk-container uk-container-xlarge">
<div class="uk-margin-large-bottom">
<h2 class="uk-heading-small">Oceania Countries</h2>
<p class="uk-text-default">Oceania is a geographical region that includes Australasia, Melanesia, Micronesia, and Polynesia. Spanning the Eastern and Western hemispheres, Oceania is estimated to have a land area of
8,525,989 square kilometres and a population of over 41 million. Australia and New Zealand are two of the largest countries on the continent, with populations of 24.7 million and 4.7 million, respectively.
However, the island nation of Papua New Guinea is actually more populous than New Zealand, with 8.4 million inhabitants.</p>
</div>
<div id="country-lists" class="data-lists uk-grid-small uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l" uk-grid uk-height-match="target: > div > .uk-card"
uk-scrollspy="target: > div; cls: uk-animation-slide-bottom-small; delay: 100">
<div>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="min-height: 280; max-height: 280; animation: pull; autoplay-interval: 3000; autoplay: true">
<ul class="uk-slideshow-items">
<li>
<img src="img/hs-1.jpg" alt="" uk-cover>
</li>
<li>
<img src="img/hs-2.jpg" alt="" uk-cover>
</li>
<li>
<img src="img/hs-3.jpg" alt="" uk-cover>
</li>
<li>
<img src="img/hs-4.jpg" alt="" uk-cover>
</li>
<li>
<img src="img/hs-5.jpg" alt="" uk-cover>
</li>
<li>
<img src="img/hs-6.jpg" alt="" uk-cover>
</li>
<li>
<img src="img/hs-7.jpg" alt="" uk-cover>
</li>
<li>
<img src="img/hs-8.jpg" alt="" uk-cover>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
</div>
</div>
</div>
</div>
<!-- to top -->
<div class="uk-position-fixed uk-position-z-index uk-position-bottom-right">
<a href="#" class="uk-padding" uk-totop uk-scroll></a>
</div>
<!-- modal -->
<div id="country-modal-full" class="uk-modal-full" uk-modal>
<div class="uk-modal-dialog">
<button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>
<div class="uk-grid-collapse uk-child-width-1-2@m uk-flex-middle" uk-grid>
<div class="uk-background-cover uk-visible@m" style="background-image: url('img/mp-1.jpg');" uk-height-viewport></div>
<div class="uk-padding-large modal-content f32"></div>
</div>
</div>
</div>
<!-- footer -->
<footer class="footer uk-margin-xlarge-top uk-padding">
<div class="uk-container uk-text-center uk-text-small">
<span>© Build with ❤ by <span uk-icon="github"></span> <a href="https://github.com/afif-dev" target="_blank">afif-dev</a>
| deploy by <a href="https://www.netlify.com/?utm_source=github.com/afif-dev" target="_blank">Netlify</a>
</span>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>