blur-admin/src/app/components/msgCenter/msgCenter.html

<ul class="al-msg-center clearfix">
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
      <i class="fa fa-bell-o"></i><span>5</span>

      <div class="notification-ring"></div>
    </a>

    <div class="dropdown-menu top-dropdown-menu">
      <i class="dropdown-arr"></i>

      <div class="header clearfix">
        <strong>Notifications</strong>
        <a href="javascript:void(0)">Mark All as Read</a>
        <a href="javascript:void(0)">Settings</a>
      </div>
      <div class="msg-list">
        <a href="javascript:void(0)" class="clearfix">
          <div class="img-area"><img src="release/img/02.png"></div>
          <div class="msg-area">
            <div>Today is <strong>John Doe</strong>'s birthday.</div>
            <span>1 min ago</span>
          </div>
        </a>
        <a href="javascript:void(0)" class="clearfix">
          <div class="img-area">
            <div class="comments"><i class="fa fa-comments-o"></i></div>
          </div>
          <div class="msg-area">
            <div>New comments on your post.</div>
            <span>2 hrs ago</span>
          </div>
        </a>
        <a href="javascript:void(0)" class="clearfix">
          <div class="img-area"><img src="release/img/01.png"></div>
          <div class="msg-area">
            <div><strong>Carrol Black</strong> changed her name to <strong>Carrol White</strong>.</div>
            <span>10 hrs ago</span>
          </div>
        </a>
        <a href="javascript:void(0)" class="clearfix">
          <div class="img-area"><img src="release/img/08.png"></div>
          <div class="msg-area">
            <div><strong>Bob Taylor</strong> posted in Startup Hub.</div>
            <span>1 day ago</span>
          </div>
        </a>
        <a href="javascript:void(0)" class="clearfix">
          <div class="img-area">
            <div class="orders"><i class="fa fa-shopping-cart"></i></div>
          </div>
          <div class="msg-area">
            <div>New orders received.</div>
            <span>5 mins ago</span>
          </div>
        </a>
        <a href="javascript:void(0)" class="clearfix">
          <div class="img-area"><img src="release/img/04.png"></div>
          <div class="msg-area">
            <div>Add <strong>Anna Smith</strong> as contact?</div>
            <span>2 days ago</span>
          </div>
        </a>
        <a href="javascript:void(0)" class="clearfix">
          <div class="img-area"><img src="release/img/07.png"></div>
          <div class="msg-area">
            <div><strong>Helen Jonhnson</strong> invited you to join the event.</div>
            <span>1 week ago</span>
          </div>
        </a>
      </div>
      <a href="javascript:void(0)">See all notifications</a>
    </div>
  </li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="msg dropdown-toggle" data-toggle="dropdown">
      <i class="fa fa-envelope-o"></i><span>5</span>

      <div class="notification-ring"></div>
    </a>

    <div class="dropdown-menu top-dropdown-menu">
      <i class="dropdown-arr"></i>

      <div class="header clearfix">
        <strong>Messages</strong>
        <a href="javascript:void(0)">Mark All as Read</a>
        <a href="javascript:void(0)">Settings</a>
      </div>
      <div class="msg-list">
        <a href="javascript:void(0)" class="clearfix">
          <div class="img-area"><img src="release/img/02.png"></div>
          <div class="msg-area">
            <div><strong>John Doe:</strong> After you get up and running, you can place Font Awesome icons just about...
            </div>
            <span>1 min ago</span>
          </div>
        </a>
        <a href="javascript:void(0)" class="clearfix">
          <div class="img-area"><img src="release/img/09.png"></div>
          <div class="msg-area">
            <div>You asked, Font Awesome delivers with 40 shiny new icons in version 4.2.</div>
            <span>2 hrs ago</span>
          </div>
        </a>
        <a href="javascript:void(0)" class="clearfix">
          <div class="img-area"><img src="release/img/01.png"></div>
          <div class="msg-area">
            <div>Want to request new icons? Here's how. Need vectors or want to use on the...</div>
            <span>10 hrs ago</span>
          </div>
        </a>
        <a href="javascript:void(0)" class="clearfix">
          <div class="img-area"><img src="release/img/08.png"></div>
          <div class="msg-area">
            <div>Explore your passions and discover new ones by getting involved. Stretch your...</div>
            <span>1 day ago</span>
          </div>
        </a>
        <a href="javascript:void(0)" class="clearfix">
          <div class="img-area"><img src="release/img/03.png"></div>
          <div class="msg-area">
            <div>Get to know who we are - from the inside out. From our history and culture, to the...</div>
            <span>5 mins ago</span>
          </div>
        </a>
        <a href="javascript:void(0)" class="clearfix">
          <div class="img-area"><img src="release/img/04.png"></div>
          <div class="msg-area">
            <div>Need some support to reach your goals? Apply for scholarships across a variety of...</div>
            <span>2 days ago</span>
          </div>
        </a>
        <a href="javascript:void(0)" class="clearfix">
          <div class="img-area"><img src="release/img/07.png"></div>
          <div class="msg-area">
            <div>Wrap the dropdown's trigger and the dropdown menu within .dropdown, or...</div>
            <span>1 week ago</span>
          </div>
        </a>
      </div>
      <a href="javascript:void(0)">See all messages</a>
    </div>
  </li>
</ul>