Video Tutorial For HTML Responsive In Bangla

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML  Responsive </title>
</head>
<body>
<div class="container">
<!--Header-->
	<header>
	  <h1>The Beautiful Bangladesh</h1>
	</header>

<!--For Tablets-and-Mobiles-->
<div class="menu_mobile">
  <span title="Visit By Places" class="left_icon" onclick="toggleVisibility('left_sidebar');">☰</span>
  <span title="Visit By District"  class="right_icon" onclick="toggleVisibility('top_bar');">☰</span>
</div>

<!--Navigation-->
 <ul class="Navigation" id="top_bar">
    <li><a class="active" href="#">Dhaka</a></li>
    <li><a href="#">Chittagong</a></li>
    <li><a href="#">Cox’s Bazar</a></li>
    <li><a href="#">Sylhet</a></li>
    <li><a href="#">Bandarban</a></li>
    <li><a href="#">Rajshahi</a></li>
    <li><a href="#">Bogra</a></li>
    <li class="hide853"><a href="#">Mymensingh</a></li>
    <li class="hide853"><a href="#">Khulna</a></li>
 </ul>

<!--Sidebar-->
 <aside id="left_sidebar">
  <h3>Tourist Spot Of Bangladesh</h3>
	<ul>
	    <li><a href="#">Ahsan Manzil</a></li>
	    <li><a href="#">Amazon of Bangladesh</a></li>
	    <li><a href="#">Dhanmondi Lake</a></li>
	    <li><a href="#">Heritage</a></li>
	    <li><a href="#">Moulovibazar</a></li>
	    <li><a href="#">Parki Sea Beach</a></li>
	    <li><a href="#">Safari Park</a></li>
	    <li><a href="#">Chittagong Sea Beach</a></li>
	    <li><a href="#">Srimangal</a></li>
	    <li><a href="#">Swamp Forest</a></li>
	    <li><a href="#">Tea Garden</a></li>
	</ul>
 </aside>

<!--Main Section-->
 <section>
   <h1>Dhaka</h1>
      <div id="image"><img src="images/Hatirjheel.jpg" alt="Dhaka Hatirjheel"/></div>
	<p>
	The capital of Bangladesh is Dhaka with its exciting history and rich culture, known the world over as the city of mosques and muslin; it has attracted travelers from far and nearer throughout in all the ages. It has a history dating back to earliest time. But the exact  date of its foundation is not known.<span class="mobiles"> However, according to recorded history it was founded in 1608 A.D. as the seat of the imperial Mughal Viceroy of Bengal. Dhaka as the capital of Bangladesh has grown into a busy city of about eleven million people with an area of about 815 sq. km. Having a happy blending of old and new architectural trends, Dhaka has been developing fast as a modern city and is throbbing with activities in all spheres of life. It is the centre of industrial commercial, cultural, educational and political activities for Bangladesh. At Tongi, Tejgaon, Demra, Pagla, kanchpur, the industrial establishments turn - out daily necessities. Motijheel is the main commercial area of the city. <span class="tablets">Dhaka's major waterfront Sadarghat is on the bank of the river Buriganga and is crowded with all kinds of river craft, batches, country boats, motor launches, paddle-steamers, fishermen's boats all bustling with activity. Colourful rickshaws (tricycle) on the city streets are common attractions for the visitors.</span>... <a href="#" id="read_more">Read More</a></p>
 </section>

 <!--Footer-->
 <footer>© www.beautifulbangladesh.com</footer>
</div><!--end of container-->
<script type="text/javascript" src="show_hide.js"></script>
</body>
</html>

* {
	padding: 0;
	margin: 0;
}

body {
	background-color: Aliceblue;
	font-family: Verdana, Helvetica, Arial, Sans-serif;
}

/*container Styles*/
.container {
	width: 90%;
	height: auto;
	margin: 0 auto;
	background-color: white;
}

/*header and footer Styles*/
header,
footer {
	padding: 20px;
	color: white;
	background-color: Green;
	clear: left;
	text-align: center;
	clear: both;
}

header h1 {
	font-size: 4vw;
}


/*mobile menu style*/
.menu_mobile {
	height: 40px;
	display: none;
	position: relative;
	background: DarkRed;
}

.left_icon {
	height: 38px;
	width: 40px;
	position: absolute;
	left: 0px;
	border: 1px solid #ccc;
	color: #FFFFFF;
	font-size: 30px;
	font-weight: 800;
	text-align: center;
	line-height: 33px;
	top: 1px;
	cursor: pointer;
	background-color: green;
}

.right_icon {
	height: 38px;
	width: 40px;
	position: absolute;
	right: 0px;
	border: 1px solid #ccc;
	color: #FFFFFF;
	font-size: 30px;
	font-weight: 800;
	text-align: center;
	line-height: 33px;
	top: 1px;
	cursor: pointer;
	background-color: green;
}

.left_icon:hover,
.right_icon:hover {
	background-color: DarkRed;
}


/*Top Navigation Styles*/

.Navigation {
	list-style-type: none;
	background-color: DarkRed;
	height: 40px;
}

.Navigation li {
	float: left;
	height: 40px;
}

.Navigation li a {
	text-decoration: none;
	height: 40px;
	display: block;
	line-height: 40px;
	color: white;
	padding: 0 15px;
	border-right: 1px solid Green;
}

.Navigation li:last-child a {
	border: none;
}

.Navigation li a:hover,
.Navigation li a.active {
	color: green;
	background-color: #00ff00;
}


/*Sidebar Styles*/

aside {
	float: left;
	width: 320px;
	margin: 0;
	padding: 10px;
	border-right: 1px solid #ddd;
	background: #FFFFFF;
}

aside h3 {
	border-bottom: 1px solid #ddd;
	padding: 10px 0px;
	color: #454545;
	text-align: center;
}

aside ul {
	list-style-type: none;
	padding: 0;
}

aside ul li {
	padding: 0;
	margin: 15px 10px;
}

aside ul li a {
	text-decoration: none;
	padding: 3px;
	color: DarkGreen;
}

aside ul a:hover {
	color: red;
}


/*Section Styles*/

section {
	padding: 1em 2em;
	overflow: hidden;
	clear: right;
}

section h1 {
	color: #454545;
	padding-bottom: 12px;
}

section #image {
	float: left;
	width: 350px;
	height: 195px;
	margin: 0px 10px 0px 0px;
	border: 2px solid Green;
}

section #image img {
	width: 100%;
	height: 100%;
}

section p {
	color: #343434;
	line-height: 28px;
	font-size: 16px;
	text-align: justify;
}

section #read_more {
	font-size: 16px;
	font-weight: bold;
}

section #read_more:hover {
	color:red;
}

/* media-screen*/
@media (min-width: 320px) and (max-width: 1280px) {
.container{width:100%;}
}

@media (min-width: 769px) and (max-width: 900px){
section #image{
 width:100%;
}
.hide853{display:none;}
}

@media (min-width: 320px) and (max-width: 598px) {
section #image{
 width:100%;
}
}

@media screen and (max-width: 768px) {
.menu_mobile{
 display:block;
 }

.Navigation{
  height:auto;
  z-index:999;
  position:absolute;
  box-shadow:0px 6px 12px rgba(0,0,0,0.6);
  opacity:0.9;
  display:none;
  }

.Navigation li{
  margin:0;
  margin-bottom:1px;
  width:100%;
  }

.Navigation li a{
  background:darkred;
  padding-left:12px;
  }

aside{
 border:none;
 position:absolute;
 display:none;
 width:100%;
 box-shadow:0px 6px 12px rgba(0,0,0,0.6);
 }

}

@media screen and (max-width: 600px){
.tablets{display:none;}
}

@media screen and (max-width:414px){
.mobiles{display:none;}

section img{
 margin:0px 0px 15px 0px;
 width:335px;
 }

 section p{
 padding:0px 10px 0px 0px;
 }
 footer{font-size:15px;}
}

Result

HTML Tutorial For Beginners → 24 HTML Responsive ♣ এইচটিএমএল রেস্পন্সিভ

HTML Tutorial For Beginners → 24
HTML Responsive ♣ এইচটিএমএল রেস্পন্সিভ