<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> <!------ Include the above in your HEAD tag ----------> <div class="header-background-color"> <div class="ui vertical center aligned segment"> <div class="ui container"> <!-- navbar --> <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> <!-- end navbar --> <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>

.header-background-color { height: 350px; background-color: black; } .header-text { padding-top: 50px; }