Mangatur Padlock Dan My Account

Situs ini akan sangat baik dilihat ketika Anda menggunakan browser modern dengan JavaScript yang telah diaktifkan.

Mangatur Padlock Dan My Account

rangsolokdev

Hapus saja yang tidak penting, warna tinggal di sesuaikan
Untuk Penampakan silahkan di coba sendiri 😅

copykan kode berikut ini di
Editor>>Warna

ion-view[state=“padlock-view”] ion-content div.card.padlock > div.item.item-body.item-custom.text-center {
overflow: hidden;
background-image: url(alamat url logo atau gambar) !important;
background-size: cover;
background-repeat: no-repeat;
border: none;
border: 1;
visibility: visible !important;
margin: 0px;
width: 90%;
margin-left: 5%;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
margin-bottom: 0px !important;
display: block;
overflow: auto;
min-height: 20vh;
}

.card, .list-inset {
height: 80% }

ion-view[state=“padlock-view”] ion-content div.scroll div.card.padlock > div.item.item-text-wrap.item-custom {
order: 2;
text-align: center;
background-color: rgba(255, 200, 80, 1);
margin-left: 10px;
margin-right: 10px;
margin-top: 0px;
border: none;
padding-bottom: 0px;
}

ion-view[state=“padlock-view”] ion-content div.scroll div.card.padlock > div:nth-child(4) {
order: 3;
border: none;
margin: 0px 10px 10px 10px;
text-align: center;
background-color: rgba(255, 200, 80, 1);
text-transform: uppercase;
border-radius: 0px 0px 15px 15px;
font-weight: bold;
color: black;
padding-left: 16px;
}

i.icon.ion-ios-personadd-outline {
display: none;
}

ion-view[state=“padlock-view”] ion-content div.scroll div.card.padlock div.item.item-text-wrap.item-custom > h2 {
visibility: hidden;
text-size: 0px;
}

i.icon.ion-ios-person-outline {
display: none;
}

ion-view[state=“padlock-view”] ion-content div.scroll div.card.padlock > div:nth-child(5) {
padding-left: 16px;
text-align: center;
border: none;
text-transform: uppercase;
background-color: #ff6961;
margin-bottom: 10px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
color: black;
font-weight: bold;
}

ion-view[state=“padlock-view”] ion-content div.scroll div.card.padlock > div:nth-child(5):before {
content: “xxx”;
position: absolute;
z-index: -1;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 1px solid lightgrey;
background-color: lightgrey;
border-radius: 15px;
}

i.icon.ion-ios-paper-outline {
display: none;
}

ion-view[state=“padlock-view”] ion-content div.scroll div.card.padlock > div:nth-child(3) {
display: block;
}

ion-view[state=“padlock-view”] ion-content div.scroll div.card.padlock > div:nth-child(3) > div:nth-child(1) {
padding-left: 12px;
text-align: center;
background-color: rgba(255, 200, 80, 1);
margin: 0;
}

ion-view[state=“padlock-view”] ion-content div.scroll div.card.padlock > div:nth-child(3) > div.item.item-icon-left.item-custom.ng-binding {
padding-left: 12px;
width: 90%;
margin-left: 5%;
height: auto;
text-align: center;
background-color: rgba(255, 200, 80, 1);
border: none;
border-radius: 0px 25px 0px 25px;
text-transform: uppercase;
font-weight: 1000;
letter-spacing: 1px;
}

ion-view[state=“padlock-view”] ion-content div.scroll div.card.padlock > div:nth-child(3) > div.item.item-icon-left.item-custom.ng-binding:before {
content: “xxx”;
position: absolute;
z-index: -1;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border-radius: 15px;
}

ion-view[state=“padlock-view”] ion-content div.scroll > div.card.padlock {
display: absolute;
flex-direction: column;
height: 50%;
margin: 0px;
padding: 0px;
box-shadow: none;
}

ion-view[state=“padlock-view”] ion-content div.scroll div.card.padlock div.item.item-body.item-custom.text-center > i {
visibility: hidden;
}

ion-view[state=“padlock-view”] ion-content div.scroll div.card.padlock > div.item.item-text-wrap.item-custom {
visibility: hidden;}

/mengatur form pendaftaran dan akun saya/

ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up div > section.avatar.text-center.padding {
background-image: linear-gradient( rgba(255, 200, 80, 1), rgb(247, 201, 102));
border-radius: 0% 0% 50% 50% !important;
padding-bottom: 20px;
border-radius: 0px 0px 15px 15px;
}

ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up img {
border-radius: 0px;
clip-path: (25px, 25px, 25px, 25px);
padding: 0px;
width: 100px;
height: 100px;
}

ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up div > div.list {
width: 95%;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}

ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up div > div.list > div,
ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up div > div.list > label {
border: 1px #61a8ff solid;
margin-bottom: 10px;
border-radius: 8px;
text-align: left;
padding-left: 8px;
}

ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up div > div.list input {
padding-right: 8px;
color: black;
font-weight: bold;
}

ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up div > div.list label.checkbox-custom {
font-size: 14px;
text-align: center;
margin: auto;
margin-bottom: 10px;
border: none;
background-color: transparent;
color: white !important;
border-radius: 10px;
}

form[name=“accountForm”].slide-top > div:nth-child(2) div.item.item-custom.item-icon-left.ng-binding {
background-color: #eee;
color: white;
text-align: center;
border: none;
}

form[name=“accountForm”].slide-top > div:nth-child(2) label.checkbox-custom {
border: none;
background-color: transparent;
text-align: center;
}

form[name=“accountForm”].slide-top > div:nth-child(3) {
width: 95%;
margin: auto;
}

form[name=“accountForm”].slide-top > div:nth-child(3) div.item.item-divider.item-divider-custom {
display: none;
}

form[name=“accountForm”].slide-top > div:nth-child(3) div.item.item-custom.item-icon-left.ng-binding {
padding-left: 16px;
border: none;
border-radius: 8px;
background-color: grey;
color: white;
}

ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up button.button.button-positive.button-positive-custom.ng-binding.button-full {
border: none;
width: 90%;
margin: auto;
margin-top: 10px;
background-color: rgb(247, 201, 102);
border-radius: 8px;
color: black;
text-transform: uppercase;
margin-top: 0;
min-height: 30px;
}

ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up div.padding.text-center.ng-binding > span {
display: block;
content: “xxx”;
border: none;
width: 90%;
height: none;
margin: auto;
margin-top: 5px;
border-radius: 8px;
color: black;
text-transform: uppercase;
padding: 0px;
background-color: rgb(247, 201, 102);
}

ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up div > div.padding.text-right {
text-align: center;
}

ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up div.input-label.ng-binding {
font-weight: 400;
}

.card, .list-inset {
margin-top: 15px;
margin-bottom: -20px; }

.card .item.item-custom { background: none; }
.card, .list-inset {
margin-top: 1px;
margin-bottom: -20px;
width: 98% ;
margin-left: 1% ;
}

ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up div > div.list > div, ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up div > div.list > label {
border: 3px rgba(255, 200, 80, 1) solid}

.bar.bar-custom .title {
text-align: center; }