160 lines
6.1 KiB
HTML
160 lines
6.1 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en" >
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>Travel</title>
|
|||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
|
|||
|
|
<link rel='stylesheet' href='css/https___raw_githubusercon.css'>
|
|||
|
|
<link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<!-- partial:index.partial.html -->
|
|||
|
|
<nav class="flex-nav">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="grid">
|
|||
|
|
<div class="column-xs-9 column-md-8">
|
|||
|
|
<p id="logo">Japan<span id="highlight">.</span></p>
|
|||
|
|
</div>
|
|||
|
|
<div class="column-xs-3 column-md-4">
|
|||
|
|
<a href="#" class="toggle-nav">Menu <i class="ion-navicon-round"></i></a>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="#">About</a></li>
|
|||
|
|
<li><a href="#">Discover</a></li>
|
|||
|
|
<li><a href="#">Plan Your Trip</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
<main class="intro-section">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="grid">
|
|||
|
|
<div class="column-xs-12">
|
|||
|
|
<ul class="slider">
|
|||
|
|
<li class="slider-item active">
|
|||
|
|
<div class="grid vertical">
|
|||
|
|
<div class="column-xs-12 column-md-2 hide-mobile">
|
|||
|
|
<div class="intro">
|
|||
|
|
<a href="#">
|
|||
|
|
<h1 class="title"><span class="underline">Explore Tokyo</span></h1>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="column-xs-12 column-md-10">
|
|||
|
|
<div class="image-holder">
|
|||
|
|
<img src="https://source.unsplash.com/cddaZDt6uRw">
|
|||
|
|
</div>
|
|||
|
|
<div class="grid">
|
|||
|
|
<div class="column-xs-12 column-md-9">
|
|||
|
|
<div class="intro show-mobile">
|
|||
|
|
<a href="#">
|
|||
|
|
<h1 class="title"><span class="underline">Explore Tokyo</span></h1>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<p class="description">Tokyo, Japan’s busy capital, mixes the ultramodern and the traditional, from neon-lit skyscrapers to historic temples.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="slider-item">
|
|||
|
|
<div class="grid vertical">
|
|||
|
|
<div class="column-xs-12 column-md-2 hide-mobile">
|
|||
|
|
<div class="intro">
|
|||
|
|
<a href="#">
|
|||
|
|
<h1 class="title"><span class="underline">Explore Kyoto</span></h1>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="column-xs-12 column-md-10">
|
|||
|
|
<div class="image-holder">
|
|||
|
|
<img src="https://source.unsplash.com/Pz3EHf-KJfc">
|
|||
|
|
</div>
|
|||
|
|
<div class="grid">
|
|||
|
|
<div class="column-xs-12 column-md-9">
|
|||
|
|
<div class="intro show-mobile">
|
|||
|
|
<a href="#">
|
|||
|
|
<h1 class="title"><span class="underline">Explore Kyoto</span></h1>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<p class="description">Kyoto is famous for its numerous classical Buddhist temples, gardens, imperial palaces, Shinto shrines and traditional wooden houses.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="slider-item">
|
|||
|
|
<div class="grid vertical">
|
|||
|
|
<div class="column-xs-12 column-md-2 hide-mobile">
|
|||
|
|
<div class="intro">
|
|||
|
|
<a href="#">
|
|||
|
|
<h1 class="title"><span class="underline">Explore Osaka</span></h1>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="column-xs-12 column-md-10">
|
|||
|
|
<div class="image-holder">
|
|||
|
|
<img src="https://source.unsplash.com/peYW3VwICpE">
|
|||
|
|
</div>
|
|||
|
|
<div class="grid">
|
|||
|
|
<div class="column-xs-12 column-md-9">
|
|||
|
|
<div class="intro show-mobile">
|
|||
|
|
<a href="#">
|
|||
|
|
<h1 class="title"><span class="underline">Explore Osaka</span></h1>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<p class="description">Osaka is a large port city and commercial center known for its modern architecture, nightlife and hearty street food.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="slider-item">
|
|||
|
|
<div class="grid vertical">
|
|||
|
|
<div class="column-xs-12 column-md-2 hide-mobile">
|
|||
|
|
<div class="intro">
|
|||
|
|
<a href="#">
|
|||
|
|
<h1 class="title"><span class="underline">Explore Hokkaido</span></h1>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="column-xs-12 column-md-10">
|
|||
|
|
<div class="image-holder">
|
|||
|
|
<img src="https://source.unsplash.com/VmeOZQjTVGE">
|
|||
|
|
</div>
|
|||
|
|
<div class="grid">
|
|||
|
|
<div class="column-xs-12 column-md-9">
|
|||
|
|
<div class="intro show-mobile">
|
|||
|
|
<a href="#">
|
|||
|
|
<h1 class="title"><span class="underline">Explore Hokkaido</span></h1>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<p class="description">Hokkaido, the northernmost of Japan’s main islands, is known for its volcanoes, natural hot springs ("onsen") and ski areas.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="grid">
|
|||
|
|
<div class="column-xs-12">
|
|||
|
|
<div class="controls">
|
|||
|
|
<button class="previous">
|
|||
|
|
<i class="ion-ios-arrow-thin-left"></i>
|
|||
|
|
</a>
|
|||
|
|
<button class="next">
|
|||
|
|
<i class="ion-ios-arrow-thin-right"></i>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</main>
|
|||
|
|
<!-- partial -->
|
|||
|
|
<script src="./script.js"></script>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|