smart section header code example

Example: smart section header

<!--
	Designer: Farhan Ellahi
    Organization: Nanosoft
    Website: thenanosoft.com
-->
<!DOCTYPE html>
<html>
<head>
	<title>smart section header</title>
    <style>
    	.section-header {
          border-bottom:2px solid #fcba03;
          box-sizing:border-box;
          display:block;
          font-family: "roboto",sans-serif;
          font-size: 14px;
          line-height: 1.5;
          color: #333;
        }

        .section-header-title {
          display:inline-block;
          margin:0;
          padding:5px 20px;
          text-align:left;
          color: #fff;
          box-sizing: border-box;
        }
    </style>
</head>

<body>
  <div class="section-header" style="border-color:#1c588a;">
    <p class="section-header-title" style="background-color:#1c588a">Technology</p>
  </div>

  <p>----</p>

  <div class="section-header" style="border-color:#fcba03;">
    <p class="section-header-title" style="background-color:#fcba03">Business</p>
  </div>
</body>
</html>

Tags:

Misc Example

Recent Posts