Responsive2

Developer
Nugroho Indra Utomo
Size
7,059 Kb
Views
16,192
  1. Responsive2 Previews
  2. Responsive2 HTML Codes
  3. Responsive2 CSS Codes

How do I make an responsive2?

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

Responsive2 Previews
IQ Test

Responsive2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>responsive2</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>beat.</title>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta name="viewport" content="maximum-scale=1">
<meta name="description" content="Digital Marketing">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Transcosmos Indonesia">
<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-lvl-2.css" rel="stylesheet" type="text/css">
<link href="css/common.css" rel="stylesheet" type="text/css">
<link href="css/parts-lvl-2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrap">	<div id="wrapInner">	<div id="headerArea">	<div class="fixedHeader"> <div class="headerTop"> <div class="logo floatLeft">	<a href="#" title="Home"><img src="images/cmn_logo_001.png" alt="logo"/></a> </div> <div class="menuTopA01 floatRight"> <div class="sosmedBlockA01 floatRight"> <a href="www.twitter.com" title="twitter"><img src="images/cmn_ico_001.png" width="19" height="16" alt="twitter"/></a> <a href="www.facebook.com" title="facebook"><img src="images/cmn_ico_002.png" width="9" height="16" alt="facebook"/></a> <a href="www.youtube.com" title="youtube"><img src="images/cmn_ico_003.png" width="22" height="16" alt="youtube"/></a> </div> <div class="menuTopA02 clear"> <div class="nav floatLeft"> <ul> <li><a href="#" title="beranda">Beranda</a></li> <li><a href="#" title="terbaru">Terbaru</a></li> <li><a href="#" title="populer">Populer</a></li> <li><a href="#" title="rekomendasi">Rekomendasi</a></li> </ul> </div> <div class="searchForm floatRight"> <form> <input type="text" placeholder="Search.."> <input type="submit" value=""> </form> </div> </div> </div> </div> <div id="gnavAreaTop">	<div id="toggleMenu">Menu</div> <ul> <li><a href="#" title="lifestyle">lifestyle</a></li> <li><a href="#" title="fashion &amp; beauty">fashion &amp; beauty</a></li> <li><a href="#" title="techno">techno</a></li> <li><a href="#" title="creativity">creativity</a></li> <li><a href="#" title="finance">finance</a></li> <li><a href="#" title="entertainment">entertainment</a></li> <li><a href="#" title="sport">sport</a></li> <li><a href="#" title="Health">Health</a></li> </ul> </div> </div> <div class="headerBnr">	<a href="#" title="adds"><img src="images/cmn_bnr_001.png" alt="bnr"/></a> </div> <div id="gnavAreaBottom">	<ul> <li><span>#TrendingTopic</span></li> <li><a href="#" title="Christmas">#Christmas</a></li> <li><a href="#" title="HijabStyle">#HijabStyle</a></li> <li><a href="#" title="SamsungNote4">#SamsungNote4</a></li> <li><a href="#" title="KyuHyun">#KyuHyun</a></li> <li><a href="#" title="DigitalMarketing">#DigitalMarketing</a></li> </ul> </div> </div> <!-- / #headerArea --> <!-- #mainArea --> <div id="mainArea">	<div id="contentArea"> <div id="dirPathArea">	<div class="dirPathBlockB01">	<p>Home <span>> </span>Tekno <span>> </span>Gadget</p>	</div>	<!-- dirPathLBlockB01 --> </div>	<!-- /.dirPathArea -->	<section class="highlightBlockC01">	<h2>CATEGORY NAME</h2>	<div class="subBlockA01">	<ul>	<li><a href="">Sub Category 1</a></li>	<li><a href="">Sub Category 2</a></li>	<li><a href="">Sub Category 3</a></li>	<li><a href="">Sub Category 4</a></li>	</ul>	</div>	<div class="gambarBlockC01">	<img src="images/rusa-terbang.jpg" alt="rusa terbang"/>	</div>	<!-- /. width="637" height="320" -->	<!-- /.gambarBlockC01 -->	<div class="judulBlockC01">	<h1>JUDUL BERITA</h1>	</div>	<!-- /.judulBlockC01 -->	<div class="tanggalBlockC01">	<p>01 Desember 2014</p>	</div>	<!-- /.tanggalBlockC01 -->	<div class="artikelBlockC01">	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>	<a href="#">Baca Selengkapnya</a> </div>	<!-- /.artikelBlockC01 -->	</section>	<!-- /.highlightBlockC01 -->	<section class="fiturBlockD01">	<div class="judulBlockD01"><img src="images/kuning-item.jpg" width="22" height="36" alt="kuning hitam"/>	<h3>Featured</h3>	<img src="images/judul-fitur-abu.jpg" alt="judul fitur abu-abu"/>	</div>	<!-- /.judulBlockD01 -->	<div class="colGambarBlockD01">	<div class="gambarBlockD01"><img src="images/gambar-fitur.png" alt="gambar fitur"/>	<h4>News Title Here News Title Here News Title Here News Title Here</h4>	</div>	<!-- /.gambarBlockD01 -->	<div class="gambarBlockD02"><img src="images/gambar-fitur.png" alt="gambar fitur"/>	<h4>News Title Here News Title Here News Title Here News Title Here</h4>	</div>	<!-- /.gambarBlockD02 -->	</div>	<!-- /.colGambarBlockD01 -->	<div class="colGambarBlockD01">	<div class="gambarBlockD01"><img src="images/gambar-fitur.png" alt="gambar fitur"/>	<h4>News Title Here News Title Here News Title Here News Title Here</h4>	</div>	<!-- /.gambarBlockD01 -->	<div class="gambarBlockD02"><img src="images/gambar-fitur.png" alt="gambar fitur"/>	<h4>News Title Here News Title Here News Title Here News Title Here</h4>	</div>	<!-- /.gambarBlockD02 -->	</div>	<!-- /.colGambarBlockD01 -->	<div class="judulBlockD01"><img src="images/kuning-item.jpg" width="22" height="36" alt="kuning hitam"/>	<h3>Featured</h3>	<img src="images/judul-fitur-abu.jpg" alt="judul fitur abu-abu"/>	</div>	<!-- /.judulBlockD01 -->	<div class="colGambarBlockD01">	<div class="gambarBlockD01"><img src="images/gambar-fitur.png" alt="gambar fitur"/>	<h4>News Title Here News Title Here News Title Here News Title Here</h4>	</div>	<!-- /.gambarBlockD01 -->	<div class="gambarBlockD02"><img src="images/gambar-fitur.png" alt="gambar fitur"/>	<h4>News Title Here News Title Here News Title Here News Title Here</h4>	</div>	<!-- /.gambarBlockD02 -->	</div>	<!-- /.colGambarBlockD01 -->	<div class="colGambarBlockD01">	<div class="gambarBlockD01"><img src="images/gambar-fitur.png" alt="gambar fitur"/>	<h4>News Title Here News Title Here News Title Here News Title Here</h4>	</div>	<!-- /.gambarBlockD01 -->	<div class="gambarBlockD02"><img src="images/gambar-fitur.png" alt="gambar fitur"/>	<h4>News Title Here News Title Here News Title Here News Title Here</h4>	</div>	<!-- /.gambarBlockD02 -->	</div>	<!-- /.colGambarBlockD01 -->	<div class="judulBlockD01"><img src="images/kuning-item.jpg" width="22" height="36" alt="kuning hitam"/>	<h3>Featured</h3>	<img src="images/judul-fitur-abu.jpg" alt="judul fitur abu-abu"/>	</div>	<!-- /.judulBlockD01 -->	<div class="colGambarBlockD01">	<div class="gambarBlockD01"><img src="images/gambar-fitur.png" alt="gambar fitur"/>	<h4>News Title Here News Title Here News Title Here News Title Here</h4>	</div>	<!-- /.gambarBlockD01 -->	<div class="gambarBlockD02"><img src="images/gambar-fitur.png" alt="gambar fitur"/>	<h4>News Title Here News Title Here News Title Here News Title Here</h4>	</div>	<!-- /.gambarBlockD02 -->	</div>	<!-- /.colGambarBlockD01 -->	<div class="colGambarBlockD01">	<div class="gambarBlockD01"><img src="images/gambar-fitur.png" alt="gambar fitur"/>	<h4>News Title Here News Title Here News Title Here News Title Here</h4>	</div>	<!-- /.gambarBlockD01 -->	<div class="gambarBlockD02"><img src="images/gambar-fitur.png" alt="gambar fitur"/>	<h4>News Title Here News Title Here News Title Here News Title Here</h4>	</div>	<!-- /.gambarBlockD02 -->	</div>	<!-- /.colGambarBlockD01 -->	<div class="judulBlockD01"><img src="images/kuning-item.jpg" width="22" height="36" alt="kuning hitam"/>	<h3>Featured</h3>	<img src="images/judul-fitur-abu.jpg" alt="judul fitur abu-abu"/>	</div>	<!-- /.judulBlockD01 -->	<div class="colGambarBlockD01">	<div class="gambarBlockD01"><img src="images/gambar-fitur.png" alt="gambar fitur"/>	<h4>News Title Here News Title Here News Title Here News Title Here</h4>	</div>	<!-- /.gambarBlockD01 -->	<div class="gambarBlockD02"><img src="images/gambar-fitur.png" alt="gambar fitur"/>	<h4>News Title Here News Title Here News Title Here News Title Here</h4>	</div>	<!-- /.gambarBlockD02 -->	</div>	<!-- /.colGambarBlockD01 -->	<div class="colGambarBlockD01">	<div class="gambarBlockD01"><img src="images/gambar-fitur.png" alt="gambar fitur"/>	<h4>News Title Here News Title Here News Title Here News Title Here</h4>	</div>	<!-- /.gambarBlockD01 -->	<div class="gambarBlockD02"><img src="images/gambar-fitur.png" alt="gambar fitur"/>	<h4>News Title Here News Title Here News Title Here News Title Here</h4>	</div>	<!-- /.gambarBlockD02 -->	</div>	<!-- /.colGambarBlockD01 -->	</section>	<!-- /.fiturBlockD01 -->	<!--<h1>CATEGORY NAME</h1>-->	</div> <!-- / #contentArea --> <div id="sideArea">	<div class="iklanBlockA01">	<img src="images/side_img_010.png" alt="kurs" title="kurs" width="279" height="229" />	</div>	<div class="headingBlockB01">	<div class="trendBlockA01">	<h4>TECHNO</h4>	</div>	</div>	<div class="contentBlockA01">	<div class="imageLeftBlockA01">	<img src="images/side_img_002.png" alt="bola" title="bola" width="112" height="90" />	</div>	<div class="textRightBlockA01">	<a href="#"><p>Indonesia VS Vietnam </p></a>	</div>	</div>	<div class="contentBlockA01">	<div class="imageLeftBlockA01">	<img src="images/side_img_003.png" alt="aff" title="aff" width="112" height="90" />	</div>	<div class="textRightBlockA01">	<a href="#"><p>Piala AFF 2014</p></a>	</div>	</div>	<div class="contentBlockA01">	<div class="imageLeftBlockA01">	<img src="images/side_img_004.png" alt="dena rahman" title="dena rahmna" width="112" height="90" />	</div>	<div class="textRightBlockA01">	<a href="#"><p>Dena Rachman, Semakin Mantap</p></a>	</div>	</div>	<div class="contentBlockA01">	<div class="imageLeftBlockA01">	<img src="images/side_img_005.png" alt="sri wahyuni" title="sri wahyuni" width="112" height="90" />	</div>	<div class="textRightBlockA01">	<a href="#"><p> Kisah Akhir Sri Wahyuni</p></a>	</div>	</div>	<div class="contentBlockA01">	<div class="imageLeftBlockA01">	<img src="images/side_img_006.png" alt="mocking jay" title="mocking jay" width="112" height="90" /> </div>	<div class="textRightBlockA01">	<a href="#"><p> Gaya Keren di Premiere The Mockingjay </p></a>	</div>	</div>	<div class="contentBlockA01">	<div class="imageLeftBlockA01">	<img src="images/side_img_007.png" alt="bella sofie" title="bella sofie" width="112" height="90" />	</div>	<div class="textRightBlockA01">	<a href="#"><p>Kasus Bella Shofie</p></a>	</div>	</div>	<div class="contentBlockA01">	<div class="imageLeftBlockA01">	<img src="images/side_img_008.png" alt="bob sadino" title="bob sadino" width="112" height="90" />	</div>	<div class="textRightBlockA01">	<a href="#"><p> Bob Sadino Dirawat di Rumah Sakit</p></a>	</div>	</div>	<div class="contentBlockA01">	<div class="imageLeftBlockA01">	<img src="images/side_img_009.png" alt="color run" title="color run" width="112" height="90" />	</div>	<div class="textRightBlockA01">	<a href="#"><p>The Color Run 2014</p></a>	</div>	</div>	<div class="clear"></div>	<div class="fromBlockA01">	<img src="images/side_img_011.png" title="subscription" />	</div>	<div class="adspaceBlockA01">	<img src="images/side_bnr_002_hover.png" alt="adspace" />	</div>	<div class="adspaceBlockA02">	<img src="images/side_bnr_003.png" />	</div>	<div class="sosmedBlockA03">	<img src="images/side_img_012.png" alt="twitter" title="twitter" />	</div>	<div class="JobBlockA01">	<img src="images/side_img_013.png" alt="find your job" title="find your job" />	</div> </div> <!-- / #sideArea --> </div> <!-- / #mainArea --> <div id="footerArea">	<div class="footerBnr">	<a href="#" title="adds"><img src="images/cmn_bnr_002.png" alt="bnr"/></a> </div> <div class="descBnr font12"> <p>Transcosmos has a long history of over 45 years experience in outsourced services. Originally established in Japan, and since then we’ve expanded throughout Southeast Asia and the rest of the world. We currently have 102 operating centers across 14 countries, supporting 23 languages and over 800 clients worldwide. Our solutions cover 31 countries, including Japan, China, South Korea, North America, Western Europe, and the ASEAN region. </div> <div class="footerAreaLink font12"> <div class="link01 floatLeft"> <h3>lifestyle</h3> <ul> <li><a href="#" title="daily tips">Daily Tips</a></li> <li><a href="#" title="culture">Culture</a></li> <li><a href="#" title="relationship">Relationship</a></li> <li><a href="#" title="leisure &amp; travel">Leisure &amp; Travel</a></li> <li><a href="#" title="foods">Foods</a></li> <li><a href="#" title="hangouts">Hangouts</a></li> <li><a href="#" title="events">Events</a></li> <li><a href="#" title="career Life">Career Life</a></li> <li><a href="#" title="ask The Experts">Ask The Experts</a></li> </ul> </div> <div class="link01 floatLeft"> <h3>fashion &amp; beauty</h3> <ul> <li><a href="#" title="fashion">Fashion</a></li> <li><a href="#" title="make Up">Make Up</a></li> <li><a href="#" title="beauty Places">Beauty Places</a></li> <li><a href="#" title="ask The Experts">Ask The Experts</a></li> </ul> </div> <div class="link01 floatLeft"> <h3>techno</h3> <ul> <li><a href="#" title="gadget">Gadget</a></li> <li><a href="#" title="science">Science</a></li> <li><a href="#" title="multimedia">Multimedia</a></li> <li><a href="#" title="digital">Digital</a></li> </ul> </div> <div class="link01 floatLeft"> <h3>creativity</h3> <ul> <li><a href="#" title="gift ideas">Gift Ideas</a></li> <li><a href="#" title="do-it-yourself">Do-It-Yourself</a></li> <li><a href="#" title="interior">Interior</a></li> <li><a href="#" title="architecture">Architecture</a></li> </ul> </div> <div class="link01 floatLeft"> <h3>finance</h3> <ul> <li><a href="#" title="investment">Investment</a></li> <li><a href="#" title="property">Property</a></li> <li><a href="#" title="ask The Experts">Ask The Experts</a></li> </ul> </div> <div class="link01 floatLeft"> <h3>entertainment</h3> <ul> <li><a href="#" title="movies">Movies</a></li> <li><a href="#" title="music">Music</a></li> <li><a href="#" title="celebrities">Celebrities</a></li> <li><a href="#" title="tv">TV</a></li> </ul> </div> <div class="link01 floatLeft"> <h3>sport</h3> <ul> <li><a href="#" title="soccer">Soccer</a></li> <li><a href="#" title="badminton">Badminton</a></li> <li><a href="#" title="basketball">Basketball</a></li> <li><a href="#" title="running">Running</a></li> </ul> </div> <div class="link01 floatLeft"> <h3>health</h3> <ul> <li><a href="#" title="diet">Diet</a></li> <li><a href="#" title="herbal">Herbal</a></li> <li><a href="#" title="maternity">Maternity</a></li> <li><a href="#" title="ask The Experts">Ask The Experts</a></li> </ul> </div> <div class="sosmedBlockB01 floatRight"> <a href="www.twitter.com" title="twitter"><img src="images/cmn_ico_001.png" width="19" height="16" alt="twitter"/></a> <a href="www.facebook.com" title="facebook"><img src="images/cmn_ico_002.png" width="9" height="16" alt="facebook"/></a> <a href="www.youtube.com" title="youtube"><img src="images/cmn_ico_003.png" width="22" height="16" alt="youtube"/></a> </div> <div class="clear"></div> </div> </div> <!-- / #footerArea --> </div> <div class="footerText">	<p>&copy; 2014, beat. - All rights reserved <a href="#" title="kontak">Kontak</a>	<a href="" title="karier">Karier</a></p> </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<script src="js/jquery.nicescroll.plus.js"></script>
<script>
$(document).ready(function() {	$("html").niceScroll({	styler:"fb",cursorcolor:"#000000"	}); //detect the width on page load $(document).ready(function(){	var current_width = $(window).width(); //do something with the width value here! $('#gnavAreaTop ul').show();	if(current_width < 500){ $('#gnavAreaTop ul').hide();	} }); //update the width value when the browser is resized (useful for devices which switch from portrait to landscape) $(window).resize(function(){	var current_width = $(window).width(); //do something with the width value here!	$('#gnavAreaTop ul').show();	if(current_width < 500){ $('#gnavAreaTop ul').hide();	} });	$('#toggleMenu').click(function() {	$('#gnavAreaTop ul').slideToggle();	});	var stickyOffset = $('.fixedHeader').offset().top;	$(window).scroll(function(){ var scrollTop = $(window).scrollTop();	if (scrollTop > 10) {	if (scrollTop > 160) {	$('#gnavAreaTop').addClass('fixedStyleGnavAreaTop');	}else{	$('.sosmedBlockA01').addClass('fixedStyleHide');	$('.logo').addClass('fixedStyleLogo');	$('.fixedStyleLogo').removeClass('logo');	$('.headerTop').addClass('fixedStyleHeaderTop');	$('.fixedStyleHeaderTop').removeClass('headerTop');	$('.menuTopA02').addClass('fixedStyleMenuTopA02');	$('.fixedStyleMenuTopA02').removeClass('menuTopA02');	$('#gnavAreaTop').addClass('fixedStyledropShadow');	$('#gnavAreaTop').removeClass('fixedStyleGnavAreaTop');	$('.nav').addClass('fixedStyleNav');	$('.fixedStyleNav').removeClass('nav');	} }else {	$('.sosmedBlockA01').removeClass('fixedStyleHide');	$('.fixedStyleLogo').addClass('logo');	$('.logo').removeClass('fixedStyleLogo');	$('.fixedStyleHeaderTop').addClass('headerTop');	$('.headerTop').removeClass('fixedStyleHeaderTop');	$('.fixedStyleMenuTopA02').addClass('menuTopA02');	$('.menuTopA02').removeClass('fixedStyleMenuTopA02');	$('.fixedStyleMenuTopA02').addClass('menuTopA02');	$('.menuTopA02').removeClass('fixedStyleMenuTopA02');	$('#gnavAreaTop').removeClass('fixedStyledropShadow');	$('#gnavAreaTop').removeClass('fixedStyleGnavAreaTop');	$('.fixedStyleNav').addClass('nav');	$('.nav').removeClass('fixedStyleNav'); } });	});
</script>
</body>
</html>
</body>
</html>

Responsive2 - Script Codes CSS Codes

@charset "utf-8";
/*===============
contain : construct page layout like page background,
header, footer, global navigation and so on =====*/
/*----- contents -------
create by:Nugie
----------------------*/
/*
===== local style ===========================*/
/*
===== local part ============================*/
#wrap {	margin:0;	padding:0;
}
#wrap #wrapInner #mainArea {	width:940px;	height:auto;	margin:0 auto;
}
#wrap #wrapInner #dirPathArea {	width:285px;	height:28px;	position:relative;	color:#424242;	font-size:12px;	font-family: "Trebuchet MS";
}
#wrap #wrapInner #dirPathArea ul {
}
#wrap #wrapInner #dirPathArea ul li {	float:left;	margin-right:25px;
}
#wrap #wrapInner #dirPathArea:after {	content:'';	background-image:url(../images/content_ico_001.png);	position:absolute;	width:9px;	height:11px;	left:37px;	bottom:14px;
}
/*
===== contentArea ===========================*/
#wrap #wrapInner #mainArea #contentArea {	width: 637px;	height: auto;	float: left;
}
#wrap #wrapInner #mainArea #contentArea #dirPathArea {	font-family: "Trebuchet MS";	margin-bottom: 25px;
}
#wrap #wrapInner #mainArea #contentArea #dirPathArea .dirPathBlockB01 {	margin-bottom: 25px;
}
#wrap #wrapInner #mainArea #contentArea #dirPathArea .dirPathBlockB01 p {	font-size: 12px;	color: #424242;
}
#wrap #wrapInner #mainArea #contentArea #dirPathArea .dirPathBlockB01 p span {	font-size: 20px;	color: #00ccd6;	font-weight: bold;
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 {	margin-bottom: 50px;
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 .subBlockA01 {	width:637px;	height:35px;	background-color:#f0f0f0;
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 .subBlockA01 {	margin:20px 0 20px 0;
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 .subBlockA01 ul {
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 .subBlockA01 ul li {	display:inline-block;	margin-right:25px;	padding:10px 0 0 10px;
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 .subBlockA01 ul li a {	color:#424242;	font-size:14px;	font-family: "Trebuchet MS";	text-decoration:none;
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 .gambarBlockC01 {	margin-bottom: 18px;
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 .gambarBlockC01 img {	width: 100%;	height: auto;
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 .judulBlockC01 {	font-family: "Myriad Pro";	color: #424242;
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 .tanggalBlockC01 {	font-family: "Calibri";	font-size: 14px;	color: #5f6262;	margin-bottom: 23px;
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 .artikelBlockC01{	margin-bottom:63px;
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 .artikelBlockC01 p { font-family:"Myriad Pro;" font-size:16px;	color: #333333;	margin-bottom: 12px;
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 .artikelBlockC01 a {	font-family: "Calibri";	font-size: 18px;	color: #00ccd6;	font-weight: bold;
}
#wrap #wrapInner #mainArea #contentArea .fiturBlockD01 {
}
#wrap #wrapInner #mainArea #contentArea .fiturBlockD01 .judulBlockD01 {	height: 36px;	margin-bottom: 9px;
}
#wrap #wrapInner #mainArea #contentArea .fiturBlockD01 .judulBlockD01 h3 {	font-family: "Trebuchet MS";	color: #333333;	margin: 5px 15px 0px 10px;	float: left;
}
#wrap #wrapInner #mainArea #contentArea .fiturBlockD01 .judulBlockD01 img {	float: left;
}
#wrap #wrapInner #mainArea #contentArea .fiturBlockD01 .judulBlockD01 img:last-child {	width: 509px;	height: 36px;
}
#wrap #wrapInner #mainArea #contentArea .fiturBlockD01 .colGambarBlockD01 {	margin-bottom: 40px;	height: 182px;	width:100%;
}
#wrap #wrapInner #mainArea #contentArea .fiturBlockD01 .colGambarBlockD01 .gambarBlockD01 {	margin-right: 21px;	width: 48%;	float: left;
}
#wrap #wrapInner #mainArea #contentArea .fiturBlockD01 .colGambarBlockD01 .gambarBlockD02 {	margin-right: 0px;	width: 48%;	float: left;
}
#wrap #wrapInner #mainArea #contentArea .fiturBlockD01 .colGambarBlockD01 .gambarBlockD01 img, #wrap #wrapInner #mainArea #contentArea .fiturBlockD01 .colGambarBlockD01 .gambarBlockD02 img {	width: 100%;	height: auto;
}
#wrap #wrapInner #mainArea #contentArea .fiturBlockD01 .colGambarBlockD01 .gambarBlockD01 h4, #wrap #wrapInner #mainArea #contentArea .fiturBlockD01 .colGambarBlockD01 .gambarBlockD02 h4 {	font-family: "Trebuchet MS";	color: #868686;
}
/*----- sideArea -------
--------------------*/
#wrap #wrapInner #mainArea #sideArea {	width:285px;	height:auto;	background-color:#ffffff;	float:left;	margin-left:15px;
}
#wrap #wrapInner #mainArea #sideArea .iklanBlockA01 {	width:283px;	height:238px;
}
#wrap #wrapInner #mainArea #sideArea .headingBlockB01 {	width:280px;	height:60px;	margin-top:8px;	margin-bottom:30px;
}
#wrap #wrapInner #mainArea #sideArea .headingBlockB01 .trendBlockA01 {	width:280px;	height:63px;	float:left;	background-image:url(../images/side_bg_005.png);	background-repeat:no-repeat;
}
#wrap #wrapInner #mainArea #sideArea .contentBlockA01 {	width:255px;	height:90px;
}
#wrap #wrapInner #mainArea #sideArea .contentBlockA01 .imageLeftBlockA01 {	float:left;	width:112px;	height:90px;	background-color:red;
}
#wrap #wrapInner #mainArea #sideArea .contentBlockA01 .textRightBlockA01 {	float:left;	width:142px;	height:90px;	margin-bottom:20px;
}
#wrap #wrapInner #mainArea #sideArea .contentBlockA01 .textRightBlockA01 a {	text-decoration:none;
}
#wrap #wrapInner #mainArea #sideArea .fromBlockA01 {	width:285px;	height:118px;
}
#wrap #wrapInner #mainArea #sideArea .adspaceBlockA01 {	width:285px;	height:237px;	margin-top:20px;
}
#wrap #wrapInner #mainArea #sideArea .adspaceBlockA02 {	width:285px;	height:325px;	margin-top:20px;
}
#wrap #wrapInner #mainArea #sideArea .sosmedBlockA03 {	width:285px;	height:306px;	margin-top:20px;
}
#wrap #wrapInner #mainArea #sideArea .JobBlockA01 {	width:283px;	height:392px;	margin-top:120px;	margin-bottom:40px;
}
.clear {	clear:both;
}
/*========================== 768(Potrait) ========================== */
@media screen and (min-width: 768px) and (max-width: 768px), (min-device-width: 768px) and (max-device-width: 768px) and (orientation : portrait) {
/*#wrap #wrapInner {	width: 750px !important;	height: auto;	margin: 0 auto;	padding-left:10px;
}*/
#wrap #wrapInner #mainArea {	width: 750px !important;	height: auto;
}
#wrap #wrapInner #mainArea #contentArea {	width: 750px;
}
#wrap #wrapInner #dirPathArea {	width: 750px;	margin: 0px auto;	height: auto;
}
#wrap #wrapInner #mainArea #contentArea .fiturBlockD01 {	width: 750px;
}
#wrap #wrapInner #mainArea #contentArea .fiturBlockD01 .judulBlockD01 img:last-child {	width: 628px;
}
#wrap #wrapInner #mainArea #contentArea .fiturBlockD01 .judulBlockD01 img:last-child {	width: 628px;
}
#wrap #wrapInner #mainArea #sideArea {	/*display:none;*/	width:750px !important;
}
#wrap #wrapInner #mainArea #sideArea .iklanBlockA01 {	width:283px;	height:238px;	border:1px solid pink;	display:none;
}
#wrap #wrapInner #mainArea #sideArea .headingBlockB01 {	width:280px;	height:60px;	margin-top:8px;	margin-bottom:30px;
}
#wrap #wrapInner #mainArea #sideArea .headingBlockB01 .trendBlockA01 {	float:left;	width:280px;	height:63px;	float:left;	background-image:url(../images/side_bg_005.png);	background-repeat:no-repeat;
}
#wrap #wrapInner #mainArea #sideArea .contentBlockA01 {	width:300px;	height:90px;	float:left;	margin:0 85px 20px 0px;
}
#wrap #wrapInner #mainArea #sideArea .contentBlockA01 .imageLeftBlockA01 {	float:left;	width:112px;	height:90px;
}
#wrap #wrapInner #mainArea #sideArea .contentBlockA01 .textRightBlockA01 {	float:left;	width:188px;	height:90px;
}
#wrap #wrapInner #mainArea #sideArea .contentBlockA01 .textRightBlockA01 {	margin-bottom:20px;
}
#wrap #wrapInner #mainArea #sideArea .fromBlockA01 {	width:285px;	height:118px;	float:left;
}
#wrap #wrapInner #mainArea #sideArea .adspaceBlockA01 {	width:285px;	height:237px;	margin:0 125px 0 0;	float:right;
}
#wrap #wrapInner #mainArea #sideArea .adspaceBlockA02 {	width:285px;	height:155px;	margin-top:20px;	float:left;
}
#wrap #wrapInner #mainArea #sideArea .sosmedBlockA03 {	width:285px;	height:306px;	float:right;	margin-right:125px;
}
#wrap #wrapInner #mainArea #sideArea .JobBlockA01 {	width:283px;	height:392px;	margin-top:40px !important;	float:left;
}
}
/*========================== End of 768*1024 potrait======================== */
/*========================== 320x480 (landscape) ========================== */
@media screen and (min-width: 320px) and (max-width: 480px), (min-device-width: 320px) and (max-device-width: 480px) and (orientation : landscape) {
#wrap #wrapInner #mainArea {	width: 470px !important;	height: auto !important;	margin: 0 auto !important;
}
#wrap #wrapInner #mainArea #contentArea {	width: 470px !important;	height: auto !important;
}
#wrap #wrapInner #dirPathArea {	width: 470px !important;	height: auto !important;	margin: 0px auto !important;
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 {
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 .subBlockA01 {	width:470px;
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 .subBlockA01 {	margin:20px 0 20px 0;
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 .subBlockA01 ul {
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 .subBlockA01 ul li {	display:inline-block;	margin-right:10px;	padding:10px 0 0 10px;
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 .gambarBlockC01 img {	width: 100%;	height: auto;
}
#wrap #wrapInner #mainArea #contentArea .fiturBlockD01 .judulBlockD01 img:last-child {	width: 345px;
}
#wrap #wrapInner #mainArea #contentArea .fiturBlockD01 {	width: 466px;	margin: 0px auto;
}
#wrap #wrapInner #mainArea #contentArea .fiturBlockD01 .colGambarBlockD01 .gambarBlockD01{	margin-right:17px;
}
#wrap #wrapInner #mainArea #sideArea {	margin-left:0px !important;
}
#wrap #wrapInner #mainArea #sideArea .iklanBlockA01 {	width:283px;	height:238px;	border:1px solid pink;	display:none;
}
#wrap #wrapInner #mainArea #sideArea .headingBlockA01 {	width:280px;	height:60px;	margin-top:8px;	margin-bottom:30px;
}
#wrap #wrapInner #mainArea #sideArea .headingBlockA01:after {	content:'';	position:absolute;	background-image:url(../images/main_bg_001.jpg);	background-repeat:no-repeat;	width:36px;	height:55px;	margin-left:5px;
}
#wrap #wrapInner #mainArea #sideArea .headingBlockA01 .trendBlockA01 {	width:238px;	height:36px;	background-color:#00ccd6;	float:left;
}
#wrap #wrapInner #mainArea #sideArea .contentBlockA01 {	width:470px !important;	height:35px !important;	float:left;	margin:0 40px 20px 0px;	border-bottom:1px dashed;
}
#wrap #wrapInner #mainArea #sideArea .contentBlockA01 .textRightBlockA01 {	width:470px !important;	height:auto;
}
#wrap #wrapInner #mainArea #sideArea .contentBlockA01 .imageLeftBlockA01 {	float:left;	width:112px;	height:50px;	display:none;
}
#wrap #wrapInner #mainArea #sideArea .adspaceBlockA01 {	display:none;
}
#wrap #wrapInner #mainArea #sideArea .sosmedBlockA03 {	display:none;
}
#wrap #wrapInner #mainArea #sideArea .fromBlockA01 {	width:285px;	height:118px;	float:left;
}
#wrap #wrapInner #mainArea #sideArea .adspaceBlockA01 {	width:285px;	height:237px;	margin:0 125px 0 0;	float:left;
}
#wrap #wrapInner #mainArea #sideArea .adspaceBlockA02 {	width:285px;	height:155px;	float:left;	margin-top:40px;
}
#wrap #wrapInner #mainArea #sideArea .sosmedBlockA03 {	width:285px;	height:306px;	float:left;	margin-top:200px;
}
#wrap #wrapInner #mainArea #sideArea .JobBlockA01 {	width:283px;	height:392px;	float:left;	margin-bottom:20px;
}
}
/*-------------------------- 320x480 potrait --------------------------*/
@media screen and (min-width: 320px) and (max-width: 320px), (min-device-width: 320px) and (max-device-width: 320px) and (orientation : portrait) {
#wrap #wrapInner #mainArea {	width: 310px !important;	height: auto;	margin: 0 auto;
}
#wrap #wrapInner #mainArea #contentArea {	width: 310px !important;	height: auto;
}
#wrap #wrapInner #dirPathArea {	width: 310px;	height: auto;	margin: 0 auto;
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 .subBlockA01 {	width:310px;	height:50px;
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 .subBlockA01 {
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 .subBlockA01 ul {
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 .subBlockA01 ul li {	display:inline-block;	margin-right:20px;	padding:5px 0 0 20px;
}
#wrap #wrapInner #mainArea #contentArea .highlightBlockC01 .gambarBlockC01 img {	width: 100%;	height: auto;
}
#wrap #wrapInner #mainArea #contentArea .fiturBlockD01 .judulBlockD01 img:last-child {	width: 185px;
}
#wrap #wrapInner #mainArea #contentArea .fiturBlockD01 {	width: 100%;/*306px;*/	margin: 0px auto;
}
#wrap #wrapInner #mainArea #contentArea .fiturBlockD01 .colGambarBlockD01 .gambarBlockD01{	margin-right: 12px;
}
#wrap #wrapInner #mainArea #sideArea {	margin-left:0px !important;
}
#wrap #wrapInner #mainArea #sideArea .contentBlockA01 {	width:300px !important;	height:35px !important;	float:left;	margin:0 40px 20px 0px;	border-bottom:1px dashed;
}
#wrap #wrapInner #mainArea #sideArea .contentBlockA01 .imageLeftBlockA01 {	width:300px !important;	height:35px !important;
}
#wrap #wrapInner #mainArea #sideArea .contentBlockA01 .textRightBlockA01 {	width:300px !important;	height:35px !important;
}
#wrap #wrapInner #mainArea #sideArea .adspaceBlockA01 {	display:none;
}
#wrap #wrapInner #mainArea #sideArea .sosmedBlockA03 {	display:none;
}
}
/* ================== end of 320 potrait =========================== */
Responsive2 - Script Codes
Responsive2 - Script Codes
Home Page Home
Developer Nugroho Indra Utomo
Username indra_z85
Uploaded October 17, 2022
Rating 3
Size 7,059 Kb
Views 16,192
Do you need developer help for Responsive2?

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
Parents
JQuery Dropdown Menu
A Pen by nugroho indra utomo
Javascript2
Slider hover
Jquery effect
Js form
Club t
Template
Javascript only
Create amazing video scripts 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!