html-panel.html
---------------------------------------
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>This is title</title>
<meta charset="utf-8">
<meta name="Keywords" content="HTML,CSS,JavaScript">
<meta name="Description" content="This is desciption">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="header1" class="bg-green">Basic Panel</h1>
<hr>
<h2>I'm h2</h2>
<hr>
<h1>Basic Pane3</h1>
<hr>
<div class="panel bg-green">
<div class="panel-header ">
<h2>Hello, world! 1</h3>
</div>
<div class="panel-content">
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
</div>
</div>
<div class="panel">
<div class="panel-header">
<h2>Hello, world! 2</h3>
</div>
<div class="panel-content">
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
</div>
</div>
<div class="panel">
<div class="panel-header">
<h2>Hello, world! 3</h3>
</div>
<div class="panel-content">
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
</div>
</div>
</body>
</html>
-------------------------------------------
style.css
-------------------------------------------
#header1{
color:yellow;
}
.panel{
background-color: #cff3ff;
border: 1px solid #236AB2;
margin:20px;
border-radius: 5px;
font-family: tahoma;
}
.panel-header{
background-color:#9FDAED;
border-bottom: 1px solid #236A82;
}
.panel-header h2 {
margin:0;
padding:10px;
}
.panel-content p {
margin:0;
padding:10px;
}
