Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="row" >
- <div class="row-equal-height" >
- <div class="p_column text-center">
- <div class="border-4 border-gray-400 rounded-full w-16 h-16 flex justify-center items-center text-2xl font-bold">
- 1
- </div>
- <h4>
- Dial Short-code.
- </h4><br/>
- <p>
- Dial *389*0# on your mobile phone
- </p>
- </div>
- <div class=" p_column text-center ">
- <div class="border-4 border-gray-400 rounded-full w-16 h-16 flex justify-center items-center text-2xl font-bold">
- 2
- </div>
- <h4>
- Enter MOMO Card Number.
- </h4><br/>
- <p>
- Enter the 16 digits number on the card
- </p>
- </div>
- <div class=" p_column text-center ">
- <div class="border-4 border-gray-400 rounded-full w-16 h-16 flex justify-center items-center text-2xl font-bold">
- 3
- </div>
- <h4>
- Enter Personal Information.
- </h4><br/>
- <p>
- Enter your first name..
- </p>
- </div>
- <div class=" p_column text-center ">
- <div class="border-4 border-gray-400 rounded-full w-16 h-16 flex justify-center items-center text-2xl font-bold">
- 4
- </div>
- <h4>
- Key in Security Pin.
- </h4><br/>
- <p>
- Key in your preferred four-digit PIN and confirm the same PIN.
- </p>
- </div>
- <div class=" p_column text-center ">
- <div class="border-4 border-gray-400 rounded-full w-16 h-16 flex justify-center items-center text-2xl font-bold">
- 5
- </div>
- <h4>
- SMS Confirmation.
- </h4><br/>
- <p>
- An SMS message is received indicating card will be active within 48hrs.
- </p>
- </div>
- </div>
- </div>
- .row-equal-height {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- }
- .p_column {
- background: #fff;
- color: #000;
- font-size: 22px;
- font-weight: 500;
- margin: 5px 15px 0;
- padding: 30px 15px;
- border: solid 1px #d4d4d4;
- box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.08);
- border-radius: 2px;
- position: relative;
- -webkit-transition: 0.4s;
- -o-transition: 0.4s;
- transition: 0.4s;
- width: 100%;
- }
- .p_column:first-child {
- background: #c81f56;
- color: #fff;
- border: solid 1px #c81f56;
- }
- /*Code for arrow*/
- .p_column:before,
- .p_column:after {
- content: "";
- position: absolute;
- width: 0;
- height: 0;
- top: 42%;
- bottom: 86px;
- border-style: solid;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- -webkit-transition: 0.4s;
- -o-transition: 0.4s;
- transition: 0.4s;
- }
- /* Stroke */
- .p_column:before {
- right: -30px;
- border-left-color: #d4d4d4;
- border-width: 15px;
- }
- /* Fill */
- .p_column:after {
- right: -29px;
- border-left-color: #fff;
- border-width: 15px;
- }
- .p_column p {
- font-size: 16px;
- line-height: 24px;
- margin-bottom: 0
- }
- .p_column:first-child:before {
- border-left-color: #c81f56;
- }
- .p_column:first-child:after {
- border-left-color: #c81f56;
- }
- .p_column:last-child:before,
- .p_column:last-child:after {
- display: none
- }
- /*color change hover*/
- .p_column:hover {
- background: #b0b9c1;
- color: #fff;
- border: solid 1px #b0b9c1;
- }
- .p_column:hover:before {
- border-left-color: #b0b9c1;
- }
- .p_column:hover:after {
- border-left-color: #b0b9c1;
- }
- @media screen and (max-width: 424px) {
- .steps-responsive: max-width: 100% !important;
- }
- @media screen and (min-width: 425px) and (max-width: 768px){
- .steps-responsive: max-width: 50% !important;
- }
- @media screen and (min-width: 1024px){
- .steps-responsive: max-width: 16.66% !important;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement