<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Semantic UI - Step Attached Variation</
title
>
<
link
rel
=
"stylesheet"
href
=
<
style
>
.ui.container {
text-align: center;
}
h3 {
margin-top: 0px;
}
.ui.top.steps {
margin-top: 30px !important;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"ui container"
>
<
div
>
<
h1
style
=
"ui header green"
>GeeksforGeeks</
h1
>
<
h3
>Semantic-UI - Step Attached Variation</
h3
>
</
div
>
<
div
class
=
"ui three top attached steps"
>
<
div
class
=
"step"
>
<
i
class
=
"user icon"
></
i
>
<
div
class
=
"content"
>
<
div
class
=
"title"
>Profile</
div
>
<
div
class
=
"description"
>Complete Your Profile</
div
>
</
div
>
</
div
>
<
div
class
=
"active step"
>
<
i
class
=
"payment icon"
></
i
>
<
div
class
=
"content"
>
<
div
class
=
"title"
>Billing</
div
>
<
div
class
=
"description"
>
Enter the Billing Information
</
div
>
</
div
>
</
div
>
<
div
class
=
"disabled step"
>
<
i
class
=
"info icon"
></
i
>
<
div
class
=
"content"
>
<
div
class
=
"title"
>OTP Verification</
div
>
<
div
class
=
"description"
>Verify Yourself</
div
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"ui attached segment"
>
<
p
>GeeksforGeeks is Awesome.</
p
>
</
div
>
<
div
class
=
"ui three bottom attached steps"
>
<
div
class
=
"step"
>
<
i
class
=
"user icon"
></
i
>
<
div
class
=
"content"
>
<
div
class
=
"title"
>Profile</
div
>
<
div
class
=
"description"
>Complete Your Profile</
div
>
</
div
>
</
div
>
<
div
class
=
"active step"
>
<
i
class
=
"payment icon"
></
i
>
<
div
class
=
"content"
>
<
div
class
=
"title"
>Billing</
div
>
<
div
class
=
"description"
>
Enter the Billing Information
</
div
>
</
div
>
</
div
>
<
div
class
=
"disabled step"
>
<
i
class
=
"info icon"
></
i
>
<
div
class
=
"content"
>
<
div
class
=
"title"
>OTP Verification</
div
>
<
div
class
=
"description"
>Verify Yourself</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>