Club t

Developer

Size

8,583 Kb

Views

26,312

Club t Previews
Club t HTML Codes
Club t CSS Codes

How do I make an club t?

What is a club t? How do you make a club t? This script and codes were developed by Nugroho Indra Utomo on 17 October 2022, Monday.

Club t Previews

Club t - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>club t</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Untitled Document</title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/parts.css" rel="stylesheet" type="text/css">
<link href="css/base.css" rel="stylesheet" type="text/css">
<link href="css/easy-responsive-tabs.css" type="text/css">
<script src="js/easyResponsiveTabs.js"></script>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<script src="js/jquery.min.js"></script>
<!-- ID tab for responsive -->
<script type="text/javascript"> $(document).ready(function () { $('#horizontalTab').easyResponsiveTabs({ type: 'default', //Types: default, vertical, accordion width: 'auto', //auto or any width like 600px fit: true, // 100% fit in a container closed: 'accordion', // Start closed if in accordion view activate: function(event) { // Callback function if tab is switched var $tab = $(this); var $info = $('#tabInfo'); var $name = $('span', $info); $name.text($tab.text()); $info.show(); } }); $('#verticalTab').easyResponsiveTabs({ type: 'vertical', width: 'auto', fit: true }); });
</script>
<script>
$(document).ready(	function() {	$("html").niceScroll({	autohidemode:true,	cursorcolor:"#000000"	});	}
);
</script>
</head>
<body>
<div id="wrap">	<div id="wrapInner">	<div id="headerArea">	<div id="headerTop">	<div id="headerTopInner" class="clear">	<div id="navHeader">	<ul class="clear">	<li class="rool"><a href=""><img src="images/header_hnav_101.gif"> </a></li> <li class="rool"><a href=""><img src="images/header_hnav_102.gif"> </a></li> <li class="roll mr20"><a href=""><img src="images/header_hnav_103.gif"> </a></li> <li class="roll mt00 mr05"><a href=""><img src="images/header_btn_007.gif"> </a></li> <li class="roll mt00"><a href=""><img src="images/header_btn_008.gif"> </a></li> <li id="headerSearch">	<form id="AccelaBizSearchASPForm">	<span>	<input type="text" id="search" placeholder="キーワードで検索"> </span>	<!--<input type="image" id="site-search-submit" src="images/header_btn_101.gif">-->	</form> </li> </ul> </div> <!-- navHeader --> </div> <!-- headerTopInner --> </div> <!--/#headerTop --> <div id="headerMain">	<div id="headerLogo" class="clear">	<p id="site-logo"></p>	<a href=""><img src="images/header_logo_102.jpg" /></a> <img src="images/header_bg_001.png" /> <div id="headerMapWrapper">	<ul class="clear">	<li><img src="images/header_unav_105.gif" /></li> <li><a href=""><img src="images/header_unav_104.gif" /></a></li> </ul> </div> </div> <!-- headerLogo --> <div id="nav-utility"> <div class="clear"></div>	<div class="headerUnav"> <ul> <li> <a href=""><img src="images/header_unav_101.gif" /></a></li> <li><a href=""><img src="images/header_unav_102.gif" /></a></li> </ul> </div> <!-- headerUnav --> <div class="headerSwitcher">	<uL>	<li class="text1"><img src="images/header_unav_103_001.gif" width="57" height="26" /> <li><a title="文字サイズを「普通」にします。" href="small"><img src="images/header_unav_103_002.gif" width="32" height="26" /></a></li> <li><a title="文字サイズを「普通」にします。" href="small"><img src="images/header_unav_103_003_o.gif" width="32" height="26" /></a></li> <li><a title="文字サイズを「普通」にします。" href="small"><img src="images/header_unav_103_004.gif" width="32" height="26" /></a></li> <li><img src="images/header_unav_103_005.gif" width="40" height="21"/></a> </li> </uL> </div> <!-- /.headerSwitcher --> <form id="searchTour">	<span class="input1">	<input class="input01" type="text"> </span> <span class="minus"> - </span> <span class="input2">	<input class="input02" type="text"> </span> <span class="input2">	<img class="input03" src="images/header_btn_009.gif" /> </span> </form> </div> <!-- /#nav-Utility -->	</div> <!-- /#headerMain --> <div class="clear"></div> <div id="nav-global">	<ul class="clear">	<li class="roll"><a href=""><img src="images/header_gnv_107_o.gif" width="145" height="52"></a></li> <li class="roll"><a href=""><img src="images/header_gnv_109.gif" width="145" height="52" /></a></li> <li class="roll"><a href=""><img src="images/header_gnv_110.gif" width="145" height="52" /></a></li> <li class="roll"><a href=""><img src="images/header_gnv_111.gif" width="145" height="52"/></a></li> <li class="roll"><a href=""><img src="images/header_gnv_112_o.gif" width="120" height="52" /></a></li> <li class="roll"><a href=""><img src="images/header_gnv_113.gif" width="120" height="52" /></a></li> <li class="roll"><a href=""><img src="images/header_gnv_114.gif" width="120" height="52" /></a></li> </ul> </div>	</div> <!-- / Header Area --> <div id="mainArea">	<div id="dirPath">	<p class="dirLeft">	<a href="">クラブツーリズム TOP ></a> <a href="">クルーズ</a> </p> <p class="dirRight">	<a href="">クルーズ旅行・ツアーなら、クラブツーリズム！</a> </p>" </div> <!--/# dirPath --> <div class="clear"></div> <!-- / Content Area --> <div class="bannerArea">	<img src="images/banner01.png" width="960" height="241"/> <img class="map" src="images/map_japan.png" /> <div class="mapArea01">	<ul>	<li class="text1"><a href=""><img src="images/txt-main-map-01.gif" /></a></li> <li class="text2"><a href=""><img src="images/txt-main-map-02.gif" /></a></li> <li class="text3"><a href=""><img src="images/txt-main-map-03.gif" /></a></li> <li class="text17"><a href=""><img src="images/txt-main-map-17.gif" /></a></li> <li class="text4"><a href=""><img src="images/txt-main-map-04.gif" /></a></li> </ul> </div> <div class="mapArea02">	<ul>	<li class="text1"><a href=""><img src="images/txt-main-map-05.gif" /></a></li> <li class="text2"><a href=""><img src="images/txt-main-map-16.gif" /></a></li> <li class="text3"><a href=""><img src="images/txt-main-map-06.gif" /></a></li> </ul> </div> <div class="mapArea03">	<ul>	<li class="text1"><a href=""><img src="images/txt-main-map-07.gif" /></a></li> <li class="text2"><a href=""><img src="images/txt-main-map-09.gif" /></a></li> <li class="text3"><a href=""><img src="images/txt-main-map-10.gif" /></a></li> <li class="text4"><a href=""><img src="images/txt-main-map-11.gif" /></a></li> <li class="text8"><a href=""><img src="images/txt-main-map-08.gif" /></a></li> </ul> </div> <div class="mapArea04">	<ul>	<li class="text1"><a href=""><img src="images/txt-main-map-12.gif" /></a></li>	<li class="text1"><a href=""><img src="images/txt-main-map-14.gif" /></a></li> <li class="text13"><a href=""><img src="images/txt-main-map-13.gif" /></a></li> </ul> </div> </div> <!-- /.BannerArea --> <div class="anchorBlock">	<ul>	<li><a href=""><img src="images/navi_01_o.gif" /></a></li> <li><a href=""><img src="images/navi_02.gif" /></a></li> <li><a href=""><img src="images/navi_03.gif" /></a></li> <li><a href=""><img src="images/navi_04.gif" /></a></li> <li><a href=""><img src="images/navi_05.gif" /></a></li> <li><a href=""><img src="images/navi_06.gif" /></a></li> <li><a href=""><img src="images/navi_07.gif" /></a></li> </ul> </div> <div class="contentWrap">	<div class="contentArea">	<div class="content1">	<div class="latestContent">	<div class="innerLatestContent">	<ul>	<li class="imageLeft"><img src="images/latest.gif" /></li> <li class="imageRight"><!--<img src="images/arrow_01.gif" />-->クラブログをもっとみる</li> </ul> </div> <div class="clear"></div> <p>クルーズの旅に精通したスタッフからの最新情報や添乗員からの添乗レポートをお送りしています。</p> <div class="news">	<ul>	<li> <b>10/24</b> <a href="">【クルーズ】にっぽん丸新コース</a> </li> <li> <b>10/24</b> <a href="">【クルーズ】カリブ海クルーズ新コースのご紹介♪</a> </li> <li> <b>10/24</b> <a href="">【クルーズ】カリブ海クルーズ新コースのご紹介♪</a> </li> <li> <b>10/24</b> <a href="">【クルーズ】エーゲ海・アドリア海クルーズ　新商品発表･･･</a> </li> </ul> </div> </div> <!-- /.latestContest --> <div class="movie">	<img src="images/btn_movie.jpg" width="206" height="195" alt="movie" title="movie"/> </div> </div> <!-- /.content1 --> <div class="clear"></div> <div class="content2"> <div id="horizontalTab"> <ul class="resp-tabs-list"> <li><img src="images/tab-01_o.jpg" /></li> <li><img src="images/tab-02.jpg" /></li> <li><img src="images/tab-03.jpg" /></li> </ul> <div class="resp-tabs-container"> <div> <h2><img src="images/hdg-index-h2-01.jpg" /></h2> <div class="contentTab01"> <img src="images/bnr-princess-cruise-01-257x138.jpg" /> <img src="images/bnr-asuka2-05-257x138.jpg"/> </div> <!-- .contentTab02 --> <div class="contentTab02"> <div class="TabBorder">	<div class="TabBorder01">	<a href="#"><img src="images/bnr-caribbean-sea-58x73.jpg"/></a> </div>	<div class="TabBorder02"> <ul> <li> <a href="#"><img src="images/contents_bnr_icon_001.png"/>常夏のカリブ海クルーズ</a> <p>世界有数のリゾート・カリブ海を憧れのクルーズで</p> </li> </ul> </div> </div> <!-- .TabBorder --> <div class="TabBorder">	<div class="TabBorder01">	<a href="#"><img src="images/bnr-004_cruise-58x73.jpg"/></a> </div>	<div class="TabBorder02"> <ul> <li> <a href="#"><img src="images/contents_bnr_icon_001.png" />担当者おすすめクルーズの旅</a> <p>まだ間に合う！出発決定ツアー！</p> </li> </ul> </div> </div> <!-- /.TabBorder --> <!-- .TabBorder --> <div class="TabBorder">	<div class="TabBorder01">	<img src="images/bnr-asuka2-01-58x73.jpg"> </div>	<div class="TabBorder02"> <ul> <li> <a href="#"><img src="images/contents_bnr_icon_001.png">飛鳥II 紅葉チャータークルーズ</a> <p>11月24日限定出発！京都・奈良の紅葉めぐりへ</p> </li> </ul> </div> </div> <!-- /.TabBorder --> <!-- .TabBorder --> <div class="TabBorder">	<div class="TabBorder01">	<img src="images/bnr-platinum_cruise-58x73.jpg" width="58" height="73" /> </div>	<div class="TabBorder02"> <ul> <li> <a href="#"><img src="images/contents_bnr_icon_001.png">憧れのタヒチ5島めぐりクルーズ</a> <p>ポール・ゴーギャンでめぐる南太平洋の楽園</p> </li> </ul> </div> </div> <!-- /.TabBorder --> <!-- .TabBorder --> <div class="TabBorder">	<div class="TabBorder01">	<img src="images/bnr-europe-cruise-58x73.jpg"/> </div>	<div class="TabBorder02"> <ul> <li> <a href="#"><img src="images/contents_bnr_icon_001.png">ヨーロッパクルーズ</a> <p>地中海・エーゲ海・北欧とヨーロッパ周遊の旅</p> </li> </ul> </div> </div> <!-- /.TabBorder --> <!-- .TabBorder --> <div class="TabBorder">	<div class="TabBorder01">	<img src="images/bnr-spgroup-feature-japan-021_christmascruise-58x73.jpg" /> </div>	<div class="TabBorder02"> <ul> <li> <a href="#"><img src="images/contents_bnr_icon_001.png">日本船クリスマスクルーズ</a> <p>洋上でクリスマスを過ごしてみませんか？</p> </li> </ul> </div> </div> <!-- /.TabBorder --> <div class="clearfix"></div> <div class="tabbottom"> <ul>	<li><a href="#"><img src="images/bnr-queenelizabeth-220x70.jpg"/></a></li> <li><a href="#"><img src="images/bnr-crystal-cruise-220x70.jpg" /></a></li> </ul> </div> <div class="clearfix"></div> </div> <!-- /.contentTab02 --> <div class="backTop">	<a href="#"><img src="images/nav-page-top.gif" /></a> </div> <div class="clearfix"></div> </div> <!--<div> <p>This tab has icon in consectetur adipiscing eliconse consectetur adipiscing elit. Vestibulum nibh urna, ctetur adipiscing elit. Vestibulum nibh urna, t.consectetur adipiscing elit. Vestibulum nibh urna, Vestibulum nibh urna,it.</p> </div>--> <!--<div> <p>Suspendisse blandit velit Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravid urna gravid eget erat suscipit in malesuada odio venenatis.</p> </div>--> </div> </div> <!-- /#horizontal tab --> </div> <!-- /.content2 --> <div class="content3">	<h2>	<img src="images/h_recommend_02.gif" /> </h2> <div class="content3Wrap">	<div class="content03Link">	<div class="content3Label">	<img src="images/dt_foreign.gif" /> </div> <div class="content3Anchor">	<ul>	<li> <img src="images/arrow_01.png" /> <a href="">おすすめツアー</a> </li> <li>	<img src="images/arrow_01.png" /> <a href="">最上級クルーズの旅 プラチナクルーズで行く外国船クルーズ</a> </li> <li>	<img src="images/arrow_01.png" /> <a href="">ビジネスクラスまたはプレミアムエコノミーで行くツアー</a> </li> </ul> </div> <!-- /.content3Anchor --> </div> <!-- /.content03Link --> <div class="clear"></div>	<div class="content03Link"> <div class="content3Label"> <img src="images/dt_japan.gif"/> </div> <div class="content3Anchor"> <ul> <li> <img src="images/arrow_02.png" /> <a href="">おすすめツアー</a> </li> <li> <img src="images/arrow_02.png" /> <a href="">最上級クルーズの旅 プラチナクルーズで行く外国船クルーズ</a> </li> <li> <img src="images/arrow_02.png" /> <a href="">ビジネスクラスまたはプレミアムエコノミーで行くツアー</a> </li> </ul> </div> <!-- /.content3Anchor -->	</div> <!-- /.content3Anchor --> </div> <!-- /.content3Wrap --> </div> <!-- content3 --> <div class="clear"></div>	<div class="backTop3">	<img src="images/nav-page-top.gif" />	</div> <div class="content4">	<h2>	<img src="images/hdg-index-h2-04.jpg" /> </h2> <div class="content4BlockA01">	<p>ご家族やご友人同士で気軽に楽しめるカジュアル船から、落ち着いた大人の雰囲気を味わいたい方におすすめのプレミアム船、極上のクルーズを演出するラグジュアリー船など様々な客船をご用意しています。</p> </div> <div class="content4BlockA02">	<img src="images/thumbs_foreign.jpg" width="162" height="105"/> </div> <div class="clear"></div> <div class="content4BlockA03">	<img src="images/h_ranking_foreign.gif" /> </div> <div class="columnBlockA01">	<h3>	<img src="images/hdg-index-h4-01.jpg" /> </h3> <div class="borderBrown">	<div class="borderLeft01">	<a href="">２２万トン客船で航くカリブ海クルーズ１１日間　日本航空プレミアムエコノミー利用</a>	<p>368,000円 〜 738,000円</p> </div> <div class="borderRight01">	<img src="images/web_ImageView3.aspx.jpg" width="96" height="64"/> <p>内側客室（イメージ）</p> </div> <div class="clear"></div> <div class="textBottom01">	<p>宿泊</p> <p>[出発地] 東京</p> <p>[出発月] 2014年11月,12月,2015年1月,2月,3月,4月,5月,6月,7月,8月,9月</p> </div> </div> </div> <!-- /.columnBlockA01 --> <div class="columnBlockA01">	<h3>	<img src="images/hdg-index-h4-02.jpg" /> </h3> <div class="borderBlue">	<div class="borderLeft01">	<a href="">２２万トン客船で航くカリブ海クルーズ１１日間　日本航空プレミアムエコノミー利用</a>	<p>368,000円 〜 738,000円</p> </div> <div class="borderRight01">	<img src="images/web_ImageView3.aspx.jpg" width="96" height="64"/> <P>ノルウェージャン・ジェム（イメージ）</P> </div> <div class="clear"></div> <div class="textBottom01">	<p>宿泊</p> <p>[出発地] 東京</p> <p>[出発月] 2014年11月,12月,2015年1月,2月,3月,4月,5月,6月,7月,8月,9月</p> </div> </div> </div> <!-- /.columnBlockA01 --> <div class="columnBlockA01">	<h3>	<img src="images/hdg-index-h4-03.jpg" /> </h3> <div class="borderBronze">	<div class="borderLeft01">	<a href="">２２万トン客船で航くカリブ海クルーズ１１日間　日本航空プレミアムエコノミー利用</a>	<p>368,000円 〜 738,000円</p> </div> <div class="borderRight01">	<img src="images/web_ImageView3.aspx.jpg" width="96" height="64"/> <P>フリースタイルの『ノルウェージャン・スピリット』（イメージ）</P> </div> <div class="clear"></div> <div class="textBottom01">	<p>宿泊</p> <p>[出発地] 東京</p> <p>[出発月] 2014年11月,12月,2015年1月,2月,3月,4月,5月,6月,7月,8月,9月</p> </div> </div> <div class="banner04">	<img src="images/more_foreign.gif" /> </div> </div> <!-- /.columnBlockA01 --> </div> <!-- /.content4 --> <div class="clear"></div> <div class="backTop4">	<img src="images/nav-page-top.gif" /> </div> <div class="content5">	<h3><img src="images/h_platinum.gif" /></h3> <p>プラチナクルーズは、プレミアム船・ラグジュアリー船を中心としたワンランク上のクルーズと観光・食事・宿泊・移動、すべて上級にこだわったクルーズ旅行の最上級ブランドです </p> <div class="columnBlockB01"> </div> </div> <!-- /.content5 --> </div> <!-- /.contentArea --> <div class="sideArea">	trestgdgsdg </div> </div> <!-- contentWrap --> </div> <!-- / Main Area --> <div id="footerArea"> </div> <!-- / Footer Area -->	</div> <!-- wrapInner -->
</div>
<!-- wrap -->
</body>
</html>
</body>
</html>

Club t - Script Codes CSS Codes

@charset "utf-8";
/*===============
contain : construct page layout like page background,
header, footer, global navigation and so on =====*/
/*----- contents -------	1: Wrap Section	2: Header Area	: gnavArea	3: Main Area	: contentArea	: sideArea	4: Footer Area
----------------------*/
/*
===== 1: Wrap Section ===========================*/
#wrap {	margin: 0px;	padding: 0px;
}
#wrap #wrapInner {	width: 100%;	height: auto;	margin: 0px auto;
}
/*
===== 2: Header Area ============================*/
#wrap #wrapInner #headerArea {	width:100%;	height:auto;	margin:0 auto;	overflow:hidden;
}
#wrap #wrapInner #headerArea #headerTop {	margin: 0px auto;	padding: 0px 0px 8px;	width:100%;	border-bottom: 1px solid #DEDEDE;
}
#wrap #wrapInner #headerArea #headerTop #headerTopInner {	width:962px;	height:auto;	margin:0 auto;	clear:both;
}
.clear:after {	content: ".";	visibility: hidden;	height: 0px;	clear: both;	display: block;	background-color: blue;
}
#wrap #wrapInner #headerArea #headerTop #headerTopInner #navHeader {	float:right;
}
#wrap #wrapInner #headerArea #headerTop #headerTopInner #navHeader ul {	display:block;
}
#wrap #wrapInner #headerArea #headerTop #headerTopInner #navHeader ul li {	display:inline-block;	margin:4px 10px 0px 0px;
}
#wrap #wrapInner #headerArea #headerTop #headerTopInner #navHeader ul li #headerSearch {	margin:0 0 0 0;
}
#wrap #wrapInner #headerArea #headerTop #headerTopInner #navHeader ul li #search {	width:162px;	height:26px;
}
#wrap #wrapInner #headerArea #headerTop #headerTopInner #navHeader ul li #site-search-submit {	position:absolute;	top:11px;	right:653px;
}
#wrap #wrapInner #headerArea #headerTop #headerTopInner #navHeader ul li input {	width:962px;	height:auto;	margin:0 auto;
}
/* headerMain
----------------------------*/
#wrap #wrapInner #headerArea #headerMain {	width:962px;	height:85px;	margin:0 auto;	/*border:1px solid black;*/
}
#wrap #wrapInner #headerArea #headerMain #headerLogo {	width:560px;	height:77px;
}
#wrap #wrapInner #headerArea #headerMain #headerLogo #headerMapWrapper {	background-repeat:no-repeat;	background-position:bottom;	float:right;
}
#wrap #wrapInner #headerArea #headerMain #headerLogo #headerMapWrapper ul {	display:block;	background-color:#5A5757;	margin:-45px 2px 0 0;	padding:4px 6px 4px 0px;
}
#wrap #wrapInner #headerArea #headerMain #headerLogo #headerMapWrapper ul li {	display:inline-block;
}
#wrap #wrapInner #headerArea #headerMain #nav-utility {	float:right;	width:392px;	height:86px;	position:absolute;	top:49px;	right:478px;	/*border:1px solid red;*/
}
#wrap #wrapInner #headerArea #headerMain #nav-utility .headerUnav ul {	display:block;	margin:15px 0 0 30px;
}
#wrap #wrapInner #headerArea #headerMain #nav-utility .headerUnav ul li {	display:inline-block;	margin:0 2px 0 0;
}
#wrap #wrapInner #headerArea #headerMain #nav-utility .headerSwitcher {	float:left;
}
#wrap #wrapInner #headerArea #headerMain #nav-utility .headerSwitcher ul {	margin:10px 0 0 0;	display:block;
}
#wrap #wrapInner #headerArea #headerMain #nav-utility .headerSwitcher ul li {	display:inline-block;	margin:0 0 0 2px;
}
#wrap #wrapInner #headerArea #headerMain #nav-utility .headerSwitcher ul li.text1 {	margin-right:5px;
}
.input01 {	width:50px;	height:20px;	margin:10px 0px 3px 6px;	border:1px solid #d9d9d9;
}
.input02 {	width:37px;	height:20px;	margin:5px 0 0 0;	border:1px solid #d9d9d9;
}
.input03 {	margin:9px 0 0 2px;
}
/* nav-global
----------------------------*/
#wrap #wrapInner #headerArea #nav-global {	width:100%;	height:auto;	margin:0 auto;	background-image:url(../images/header_bg_101.gif);	background-repeat:repeat-x;	background-position:bottom;	padding-bottom:19px;
}
#wrap #wrapInner #headerArea #nav-global ul {	display:block;	width:962px;	margin:0 auto;
}
#wrap #wrapInner #headerArea #nav-global ul li {	display:inline-block;	float:left;	opacity:0.5;
}
#wrap #wrapInner #headerArea #nav-global ul li:hover {	opacity:1;
}
/*
===== 3: Main Area ===============================*/
#wrap #wrapInner #mainArea {	width:1360px;	margin:0 auto;	background-image:url(../images/bg-main-06.png);	background-repeat:no-repeat;	background-position:center top;	overflow:hidden;
}
#wrap #wrapInner #mainArea #dirPath {	width: 962px;	height: 25px;	margin: 0px auto;	padding-top: 15px;	font-size: 12px;	border-bottom: 1px dotted #000;
}
#wrap #wrapInner #mainArea #dirPath .dirLeft {	float:left;
}
#wrap #wrapInner #mainArea #dirPath .dirRight {	float:right;
}
/* bannerArea
----------------------------*/
#wrap #wrapInner #mainArea .bannerArea {	width:962px;	margin:0 auto;	background-color:#afd9ff;	position:relative;	z-index:1;
}
#wrap #wrapInner #mainArea .bannerArea img.map {	position:absolute;	left:459px;	bottom:16px;
}
/* mapArea01
----------------------------*/
#wrap #wrapInner #mainArea .bannerArea .mapArea01 {	width:155px;	height:93px;	position:absolute;	z-index:4;	left: 453px;	top: 48px;	background-image:url(../images/map_area_01.png);
}
#wrap #wrapInner #mainArea .bannerArea .mapArea01 ul {
}
#wrap #wrapInner #mainArea .bannerArea .mapArea01 ul li {	margin:2px 0 0 12px;
}
#wrap #wrapInner #mainArea .bannerArea .mapArea01 ul li.text1 {	margin-top:31px;
}
#wrap #wrapInner #mainArea .bannerArea .mapArea01 ul li.text17 {	position: absolute;	top: 29px;	left: 67px;
}
#wrap #wrapInner #mainArea .bannerArea .mapArea01 ul li.text4 {	position: absolute;	top: 67px;	left: 67px;
}
/* mapArea02
----------------------------*/
#wrap #wrapInner #mainArea .bannerArea .mapArea02 {	width:156px;	height:90px;	position:absolute;	z-index:4;	left:624px;	top:11px;	background-image:url(../images/map_area_02.png);
}
#wrap #wrapInner #mainArea .bannerArea .mapArea02 ul {	margin-top: 31px;	margin-left: 12px;
}
#wrap #wrapInner #mainArea .bannerArea .mapArea02 ul li {
}
/* mapArea03
----------------------------*/
#wrap #wrapInner #mainArea .bannerArea .mapArea03 {	width:155px;	height:112px;	position:absolute;	z-index:4;	left:799px;	top:11px;	background-image:url(../images/map_area_03.png);
}
#wrap #wrapInner #mainArea .bannerArea .mapArea03 ul {	margin:28px 0px 0px 7px;
}
#wrap #wrapInner #mainArea .bannerArea .mapArea03 ul li {	margin:0 0 2px 0;
}
#wrap #wrapInner #mainArea .bannerArea .mapArea03 ul li.text8 {	position:absolute;	bottom: 65px; left: 82px;
}
/* mapArea04
----------------------------*/
#wrap #wrapInner #mainArea .bannerArea .mapArea04 {	width:155px;	height:86px;	position:absolute;	z-index:4;	left:707px;	top:142px;	background-image:url(../images/map_area_04.png);
}
#wrap #wrapInner #mainArea .bannerArea .mapArea04 ul {	margin:34px 0px 0px 7px;
}
#wrap #wrapInner #mainArea .bannerArea .mapArea04 ul li {
}
#wrap #wrapInner #mainArea .bannerArea .mapArea04 ul li.text13 {	position:absolute;	bottom: 36px; left: 58px;
}
/* anchorBlock
----------------------------*/
#wrap #wrapInner #mainArea .anchorBlock {	width:962px;	margin:0 auto;	background-color:#025fa8;
}
#wrap #wrapInner #mainArea .anchorBlock ul {	margin:0 0 0 0;	padding:4px 0 0 4px;
}
#wrap #wrapInner #mainArea .anchorBlock ul li {	display:inline;	padding-left:2px;	opacity:0.8;
}
#wrap #wrapInner #mainArea .anchorBlock ul li:hover {	opacity:1;
}
/* contentWrap
----------------------------*/
#wrap #wrapInner .contentWrap {	width:962px;	margin:0 auto;	height:5500px; /*EDITABLEAREA */	background-color:#FFF;	padding-top:10px;
}
#wrap #wrapInner .contentArea {	width:735px;	height:800px; /* EDITABLE AREA */	margin:0 auto;	float:left;	padding-left:10px;	/*background-color:red;*/
}
/* content1
----------------------------*/
#wrap #wrapInner .contentArea .content1 {
}
/* latestContent
----------------------------*/
#wrap #wrapInner .contentArea .content1 .latestContent {	width:500px;	border:1px solid #d9d9d9;	float:left;	padding-left:10px;	padding-top:10px;	height:183px; /*EDITABLE AREA BASE FOR THE PAGE*/
}
#wrap #wrapInner .contentArea .content1 .latestContent .innerLatestContent {	width:450px;
}
#wrap #wrapInner .contentArea .content1 .latestContent .innerLatestContent ul {
}
#wrap #wrapInner .contentArea .content1 .latestContent .innerLatestContent ul li.imageLeft {	float:left;
}
#wrap #wrapInner .contentArea .content1 .latestContent .innerLatestContent ul li {
}
#wrap #wrapInner .contentArea .content1 .latestContent .innerLatestContent ul li.imageRight {	float:right;	margin:0 0 0 0;	padding:0 0 0 14px;	background-image:url(../images/arrow_01.gif);	background-repeat:no-repeat;	background-position:left;
}
#wrap #wrapInner .contentArea .content1 .latestContent .innerLatestContent ul li.imageRight img {	position:absolute
}
#wrap #wrapInner .contentArea .content1 .movie {	float:left;	padding-left:10px;
}
#wrap #wrapInner .sideArea {	width:208px;	height:800px; /*EDITABLE AREA */	margin:0 auto;	float:right;	background-color:blue;
}
/* content2
----------------------------*/
#wrap #wrapInner .contentArea .content2 {	width:735px;	height:auto;
}
#wrap #wrapInner .contentArea .content2 #horizontalTab ul {	display:block;	margin-bottom:10px;
}
#wrap #wrapInner .contentArea .content2 #horizontalTab ul li {	display:inline-block;
}
#wrap #wrapInner .contentArea .content2 #horizontalTab .resp-tabs-container h2 img {	margin-bottom:10px;
}
.contentTab01 {	float:left;	width:255px;
}
.contentTab02 {	float: left;	width: 450px;	padding-left: 5px;
}
.contentTab02 .TabBorder
{	float:left;	width:210px;	margin-left: 5px;	margin-top: 5px;	border:1px solid #929292;
}
.contentTab02 .TabBorder01
{	float:left;
}
.contentTab02 .TabBorder01:hover
{	opacity:0.8;
}
.contentTab02 .TabBorder02
{	float:left;	width:150px;
}
.contentTab02 .TabBorder02 a
{	font-size:10px;
}
.contentTab02 .TabBorder02 p
{	font-size:10px;
}
.contentTab02 .tabbottom
{	margin-top:5px;
}
.contentTab02 .tabbottom ul li
{	float:left;	margin-left:5px;
}
.backTop
{	width:715px;	text-align:right;
}
/* content3
----------------------------*/
#wrap #wrapInner .contentArea .content3 {	width:717px;	height:150px;	/*background-color:red;*/	margin:15px 0 0 0;	border: 1px solid #26B5E3;
}
#wrap #wrapInner .contentArea .content3 .content3Wrap {	width:735px;	height:auto;	/*border: 1px solid #26B5E3;*/	margin-bottom: 5px;	padding-bottom: 10px;	height:auto;
}
#wrap #wrapInner .contentArea .content3 .content3Wrap .content03Link {	margin:5px 0 0 0;
}
#wrap #wrapInner .contentArea .content3 .content3Wrap .content03Link .content3Label {	float:left;	width:60px;
}
#wrap #wrapInner .contentArea .content3 .content3Wrap .content03Link .content3Anchor {	float:left;
}
.backTop3 {	margin:8px 20px 18px 0;	float:right;	text-align:right;
}
/* content4
----------------------------*/
#wrap #wrapInner .contentArea .content4 {	width:735px;
}
#wrap #wrapInner .contentArea .content4 .content4BlockA01 {	width:735px;
}
#wrap #wrapInner .contentArea .content4 .content4BlockA01 {	width:523px;	float:left;	padding-top:7px;
}
#wrap #wrapInner .contentArea .content4 .content4BlockA02 {	width:165px;	float:left;	padding-top:7px;
}
#wrap #wrapInner .contentArea .content4 .content4BlockA03 {	text-align:center;
}
#wrap #wrapInner .contentArea .content4 .content4BlockA03 img {	margin-top:14px;
}
#wrap #wrapInner .contentArea .content4 .columnBlockA01 {	width:234px;	height:300px;	float:left;	margin:7px 0 0 7px;
}
#wrap #wrapInner .contentArea .content4 .columnBlockA01:first-child {	margin-left:0px;
}
#wrap #wrapInner .contentArea .content4 .columnBlockA01 .borderBrown {	border:1px solid#C99F3A;
}
.borderBlue {	border:1px solid#8998A8;
}
.borderBronze {	border:1px solid#DE957A;
}
#wrap #wrapInner .contentArea .content4 .columnBlockA01 .borderBrown .borderLeft01 {	width:110px;	height:140px;	float:left;
}
#wrap #wrapInner .contentArea .content4 .columnBlockA01 .borderBlue .borderLeft01 {	width:110px;	height:140px;	float:left;
}
#wrap #wrapInner .contentArea .content4 .columnBlockA01 .borderBronze .borderLeft01 {	width:110px;	height:140px;	float:left;
}
#wrap #wrapInner .contentArea .content4 .columnBlockA01 .borderBrown .borderRight01 {	width:96px;	height:64px;	float:right;
}
#wrap #wrapInner .contentArea .content4 .columnBlockA01 .borderBlue .borderRight01 {	width:96px;	height:64px;	float:right;
}
#wrap #wrapInner .contentArea .content4 .columnBlockA01 .borderBronze .borderRight01 {	width:96px;	height:64px;	float:right;
}
#wrap #wrapInner .contentArea .content4 .columnBlockA01 .banner04 img {	float:right;	margin:23px 0 0 0;
}
.backTop4 {	margin:27px 15px 16px 0;	float:right;	text-align:right;
}
/* content5
----------------------------*/
#wrap #wrapInner .contentArea .content5 {	width:735px;	height:200px;	clear:both;
}
/* sideArea
----------------------------*/
#mainArea #sideArea {
}
/*
===== 3: Footer Area =============================*/
#footerArea {
}
.clear {	clear: both;
}

Home Page	Home
Developer	Nugroho Indra Utomo
Username	indra_z85
Uploaded	October 17, 2022
Rating	3
Size	8,583 Kb
Views	26,312

Do you need developer help for Club t?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nugroho Indra Utomo (indra_z85) Script Codes

Name	Size
Parents	3,676 Kb
Task	5,383 Kb
Meiji	8,051 Kb
Fancy box effect	19,982 Kb
Track2	10,828 Kb
JQuery Dropdown Menu	3,726 Kb
A Pen by nugroho indra utomo	7,925 Kb
Slider hover	2,000 Kb
Responsive2	7,059 Kb
Template	2,323 Kb

Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
A Pen by Moeid Saleem	Moeidsaleem	1,862 Kb
Tab panels	Accessibility	0 Kb
Template	Indra_z85	2,323 Kb
Simple animated hover effect	Pobee-norris	3,044 Kb
Materializecss input form	Jasonchan	1,443 Kb
Text Looping Transition	Agelber	5,619 Kb
Border-radius animation	Yukulele	2,480 Kb
Website Concept	Sagoza	3,104 Kb
Slide In Panel	Vikvarg	2,811 Kb
Navier Stoke Fluid Simulation	Esimov	8,584 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!