<!DOCTYPE html>
<
html
>
<
head
>
<
link
href
=
rel
=
"stylesheet"
/>
<
style
>
.container {
margin-left: 15px;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color: green"
>GeeksforGeeks</
h1
>
<
strong
>Semantic UI Header Variations</
strong
>
<
br
><
br
>
</
center
>
<
div
class
=
"container"
>
<
strong
>Floated Header:</
strong
>
<
div
class
=
"ui clearing segment"
>
<
h4
class
=
"ui right floated header"
>
Next Class
</
h4
>
<
h4
class
=
"ui left floated header"
>
Previous Class
</
h4
>
</
div
>
<
strong
>Text-alignment Header:</
strong
>
<
div
class
=
"ui segment"
>
<
h4
class
=
"ui right aligned header"
>
GeeksforGeeks
</
h4
>
<
h4
class
=
"ui left aligned header"
>
GeeksforGeeks
</
h4
>
<
h4
class
=
"ui justified header"
>
GeeksforGeeks: A Computer Science portal
</
h4
>
<
h4
class
=
"ui center aligned header"
>
Geeksforgeeks
</
h4
>
</
div
>
<
strong
>Colored Header:</
strong
>
<
h4
class
=
"ui green header"
>Geeksforgeeks:</
h4
>
<
span
class
=
"ui red header"
>A</
span
>
<
span
class
=
"ui orange header"
>Computer</
span
>
<
span
class
=
"ui yellow header"
>Science</
span
>
<
span
class
=
"ui olive header"
>Portal</
span
>
<
span
class
=
"ui purple header"
>for</
span
>
<
span
class
=
"ui teal header"
>Geeks</
span
>
<
strong
>Inverted Header:</
strong
>
<
div
class
=
"ui inverted segment"
>
<
h4
class
=
"ui green header"
>Geeksforgeeks:</
h4
>
<
span
class
=
"ui red header"
>A</
span
>
<
span
class
=
"ui orange header"
>Computer</
span
>
<
span
class
=
"ui yellow header"
>Science</
span
>
<
span
class
=
"ui olive header"
>Portal</
span
>
<
span
class
=
"ui purple header"
>for</
span
>
<
span
class
=
"ui teal header"
>Geeks</
span
>
</
div
>
</
div
>
</
body
>
</
html
>