テンプレート
https://themewagon.com/thank-you-for-downloading/?item_id=278&dl=JTA1aCVDNVpZXyVGRCVDNCVBNSUxQyVDNiVERCUwQSVBOSUxNzIlMUUlQTcyJUM2JUFGVCVEQUYlMDclOUYlOUIlQkMlMjlxJTJDJTA4RSVCMDUlOThyJThGJUI2JTAzQyUwRSVBRCVGNzRBJUQ5JTgzJTg5JUJCJUI2JUYxNyUwRiVDOCVCNCUyMiVENiVBNCUwOHg4JTBEJUE2
https://1drv.ms/f/s!AhE3SW0O2HaUg05Jn9Tup42mEVzM
office
index.html
<!doctype html>
<html lang="en">
<head>
<!-- meta data & title -->
<meta charset="utf-8">
<title>Office</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<!-- CSS -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300">
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<style type="text/css">
img {
position:relative; bottom: 10px; right: 10px;
}
a.other {
color: white;
}
</style>
</head>
<body>
<!-- Header -->
<nav id="navbar-section" class="navbar navbar-default navbar-static-top navbar-sticky" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--ここに旅行サイト名-->
<!--<a class="navbar-brand wow fadeInDownBig" href="index.html"><img class="office-logo" src="assets/img/slider/Office.png" alt="Office"></a>-->
</div>
<div id="navbar-spy" class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav pull-right">
<li>
<a href="about.html">ツアー</a>
</li>
<li>
<a href="blog.html">予約確認</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Header -->
<!-- Begin #carousel-section -->
<section id="carousel-section" class="section-global-wrapper">
<div class="container-fluid-kamn">
<div class="row">
<div id="carousel-1" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators visible-lg">
<li data-target="#carousel-1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- Begin Slide 1 -->
<div class="item active">
<img src="assets/img/slider/slide2.jpg" height="400" alt="Image of first carousel">
<div class="carousel-caption">
<h3 class="carousel-title hidden-xs">最高級の旅行をもっと手軽に</h3>
</div>
</div>
<!-- End Slide 1 -->
<!-- Begin Slide 2 -->
<div class="item">
<img src="assets/img/slider/slide4.jpg" height="400" alt="Image of second carousel">
<div class="carousel-caption">
<h3 class="carousel-title hidden-xs">最高級の旅行をもっと手軽に</h3>
</div>
</div>
<!-- End Slide 2 -->
<!-- Begin Slide 3 -->
<div class="item">
<img src="assets/img/slider/slide2.jpg" height="400" alt="Image of third carousel">
<div class="carousel-caption">
<h3 class="carousel-title hidden-xs">最高級の旅行をもっと手軽に</h3>
</div>
</div>
<!-- End Slide 3 -->
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-1" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-1" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</section>
<!-- End #carousel-section -->
<!-- Begin #services-section -->
<section id="services" class="services-section section-global-wrapper">
<div class="container">
<div class="row">
<div class="services-header">
<p class="services-header-body">人気の都市・国</p><hr>
</div>
</div>
<!-- Begin Services Row 1 -->
<div class="row services-row services-row-head services-row-1">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="services-group wow animated fadeInLeft" data-wow-offset="40">
<a href="#" class="other">
<img src="img/indo.jpg" width="360" height="300" alt="Image of second carousel">
<h4 class="services-title">インド</h4>
<p class="services-body">強烈な個性をもつ国「インド」で<br>魅力的な伝統と文化に出会う</p>
</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="services-group wow animated zoomIn" data-wow-offset="40">
<a href="#" class="other">
<img src="img/guam.jpg" width="360" height="300" alt="Image of second carousel">
<h4 class="services-title">グアム</h4>
<p class="services-body">3時間で行ける<br>魅力溢れるビーチリゾート</p>
</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="services-group wow animated fadeInRight" data-wow-offset="40">
<a href="#" class="other">
<img src="img/hawaii.jpg" width="360" height="300" alt="Image of second carousel">
<h4 class="services-title">ハワイ</h4>
<p class="services-body">豊かな自然にショッピングなど<br>見どころ満載</p>
</a>
</div>
</div>
</div>
<!-- End Serivces Row 1 -->
<!-- Begin Services Row 2 -->
<div class="row services-row services-row-tail services-row-2">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="services-group wow animated fadeInLeft" data-wow-offset="40">
<a href="#" class="other">
<img src="img/taiwan.png" width="360" height="300" alt="Image of second carousel">
<h4 class="services-title">台湾</h4>
<p class="services-body">高級料理から夜市の屋台まで<br>多彩なグルメ</p>
</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="services-group wow animated zoomIn" data-wow-offset="40">
<a href="#" class="other">
<img src="img/italy.jpg" width="360" height="300" alt="Image of second carousel">
<h4 class="services-title">イタリア</h4>
<p class="services-body">世界遺産観光や名物料理など<br>ヨーロッパの中でも人気のイタリア</p>
</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="services-group wow animated fadeInRight" data-wow-offset="40">
<a href="#" class="other">
<img src="img/guam.jpg" width="360" height="300" alt="Image of second carousel">
<h4 class="services-title">スペイン</h4>
<p class="services-body">多彩な文化と美しい芸術に彩られた<br>太陽と情熱の国</p>
</a>
</div>
</div>
</div>
<!-- End Serivces Row 2 -->
</div>
</section>
<!-- End #services-section -->
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<h3><i class="fa fa-map-marker"></i> Contact:</h3>
<p class="footer-contact">
Via Ludovisi 39-45, Rome, 54267, Italy<br>
Phone: 1.800.245.356 Fax: 1.800.245.357<br>
Email: hello@LawOffice.org<br>
</p>
</div>
<div class="col-md-4">
<h3><i class="fa fa-external-link"></i> Links</h3>
<p> <a href="#"> About ( Who we are )</a></p>
<p> <a href="#"> Services ( What we do )</a></p>
<p> <a href="#"> Contact ( Feel free to contact )</a></p>
<p> <a href="#"> Blog ( Write to us )</a></p>
<p> <a href="#"> Team ( Meet the Team )</a></p>
</div>
<div class="col-md-4">
<h3><i class="fa fa-heart"></i> Socialize</h3>
<div id="social-icons">
<a href="#" class="btn-group google-plus">
<i class="fa fa-google-plus"></i>
</a>
<a href="#" class="btn-group linkedin">
<i class="fa fa-linkedin-square"></i>
</a>
<a href="#" class="btn-group twitter">
<i class="fa fa-twitter"></i>
</a>
<a href="#" class="btn-group facebook">
<i class="fa fa-facebook"></i>
</a>
</div>
</div>
</div>
</div>
</footer>
<div class="copyright text center">
<p>© Copyright 2014, <a href="#">Your Website Link</a>. Theme by <a href="https://themewagon.com/" target="_blank">ThemeWagon</a></p>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>
modern-business
menu.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>テンプレート</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<%@ include file="header.jsp" %>
<!-- Page Content -->
<div class="container">
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © M. Kishimoto</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Controller?action=#">システム名</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="Controller?action=#">メニュー1</a>
</li>
<li>
<a href="Controller?action=#">メニュー2</a>
</li>
<li>
<a href="Controller?action=#">メニュー3</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">メニュー4<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="Controller?action=#">ドロップ1</a>
</li>
<li>
<a href="Controller?action=#">ドロップ2</a>
</li>
<li>
<a href="Controller?action=#">ドロップ3</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Leading page
menu.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>サンプル</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/landing-page.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<%@ include file="header.jsp" %>
<!-- Page Content -->
<%@ include file="footer.jsp" %>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="Controller?action=#">システム名</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="Controller?action=#">メニュー1</a>
</li>
<li>
<a href="Controller?action=#">メニュー2</a>
</li>
<li>
<a href="Controller?action=#">メニュー3</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="list-inline">
<li>
<a href="#">Home</a>
</li>
<li class="footer-menu-divider">⋅</li>
<li>
<a href="Controller?action=#">メニュー1</a>
</li>
<li class="footer-menu-divider">⋅</li>
<li>
<a href="Controller?action=#">メニュー2</a>
</li>
<li class="footer-menu-divider">⋅</li>
<li>
<a href="Controller?action=#t">メニュー3</a>
</li>
</ul>
<p class="copyright text-muted small">Copyright © M. Kishimoto</p>
</div>
</div>
</div>
</footer>
Bootstrap