<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="header-background-color">
<div class="ui vertical center aligned segment">
<div class="ui container">
<div class="ui secondary pointing menu inverted">
<a class="active item">
Home
</a>
<a class="item">
About
</a>
<a class=" right item">
Contact
</a>
</div>
<div class="ui text container header-text">
<h1 class="ui header huge teal"><span class="cursive huge">Lorem Ipsum</span></h1>
<div class="ui horizontal divider inverted">
<i class="heart icon"></i>
</div>
<h3 class="ui small header inverted">Ut enim ad minim veniam quis nostrud exercitation ullamco laboris</h3>
<br/>
<button class="ui inverted teal button">Click</button>
</div>
</div>
</div>
</div>
