☺️Contacts Me (ok)
https://vi.wordpress.org/plugins/contact-me-on-zalo/ https://vi.wordpress.org/plugins/button-contact-vr/ https://wordpress.org/plugins/metu-tuy-bien-nut/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#metu .mmt-container {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 2147483646;
pointer-events: none;
box-sizing: border-box
}
#metu .mmt-container--fit {
text-align: center
}
#metu .mmt-container--fit .mmt-button__label {
white-space: nowrap
}
#metu .mmt-container--fit .mmt-app {
display: inline-flex;
border-radius: 4px 4px 0 0;
overflow: hidden
}
#metu .mmt-app {
position: relative;
display: flex;
justify-content: center;
box-sizing: border-box;
min-height: 56px;
transition: all .24s;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
}
#metu .mmt-app-rectangle {
flex-direction: row
}
#metu .mmt-app--circle {
height: 100vh;
width: 100% !important;
flex-direction: column;
padding: 8px
}
#metu .mmt-app--circle-top-left {
align-items: flex-start;
justify-content: flex-start
}
#metu .mmt-app--circle-top-right {
align-items: flex-end;
justify-content: flex-start
}
#metu .mmt-app--circle-middle-left {
align-items: flex-start;
justify-content: center
}
#metu .mmt-app--circle-middle-right {
align-items: flex-end;
justify-content: center
}
#metu .mmt-app--circle-bottom-left {
align-items: flex-start;
justify-content: flex-end
}
#metu .mmt-app--circle-bottom-right {
align-items: flex-end;
justify-content: flex-end
}
#metu .mmt-app.mmt-app--mobile {
justify-content: space-evenly;
height: 60px
}
#metu .mmt-app--hidden {
transform: translateY(160%)
}
#metu .mmt-button {
display: flex;
align-items: center;
align-self: stretch;
padding: 0 10px;
flex-direction: row;
cursor: pointer;
position: relative;
justify-content: flex-start;
border-radius: 3px;
height: 40px;
margin: 10px 5px
}
#metu .mmt-button.mmt-button--circle {
margin: 4px 5px !important;
border-radius: 20px !important
}
#metu .mmt-button.mmt-button--circle.mmt-button--square {
margin: 1px -8px !important;
border-radius: 4px 0 0 4px !important
}
#metu .mmt-button--circle .mmt-button__icon {
margin: 0;
transition: margin-right .25s cubic-bezier(.4, 0, .2, 1)
}
#metu .mmt-button--circle .mmt-button__label {
width: 0;
overflow: hidden;
transition: width .25s cubic-bezier(.4, 0, .2, 1);
white-space: nowrap;
text-overflow: clip
}
#metu .mmt-button--circle:hover .mmt-button__icon {
margin-right: 10px
}
#metu .mmt-button--circle:hover .mmt-button__label {
width: 168px
}
#metu .mmt-button {
background-color: hsla(0, 0%, 100%, .2)
}
#metu .mmt-button:hover {
background-color: rgba(27, 27, 27, .2)
}
#metu .mmt-button--circle,
#metu .mmt-button--circle:hover,
#metu .mmt-button--mobile,
#metu .mmt-button--mobile:hover {
background-color: transparent;
background-color: initial
}
#metu .mmt-button--mobile {
height: 60px;
justify-content: center;
margin: 0 !important
}
#metu .mmt-menu__item {
pointer-events: auto
}
#metu .mmt-menu__item--mobile {
flex: 1 1
}
#metu .mmt-menu__item--mobile:not(:first-child) {
border-left: 1px solid hsla(0, 0%, 100%, .2)
}
#metu .mmt-button--mobile {
flex-direction: column;
flex: 1 1
}
#metu .mmt-button--mobile .mmt-button__icon {
margin-right: 0;
margin-bottom: 4px
}
#metu .mmt-button__icon {
width: 20px;
height: 20px;
margin-right: 10px;
box-sizing: border-box
}
#metu .mmt-button__icon--motion {
animation: tada 1.2s infinite
}
#metu .mmt-button--mobile .mmt-button__label {
font-size: 12px;
line-height: 13px;
max-height: 26px;
text-align: center;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden
}
#metu .mmt-button__label {
font-size: 14px;
line-height: 20px
}
#metu .mtt-text-field--fullWith {
width: 100%
}
#metu .mmt-form-item:not(:last-of-type) {
margin-bottom: 16px
}
@keyframes tada {
0% {
transform: scaleX(1)
}
10%,
20% {
transform: scale3d(.9, .9, .9) rotate(-3deg)
}
30%,
50%,
70%,
90% {
transform: scale3d(1.3, 1.3, 1.3) rotate(3deg)
}
40%,
60%,
80% {
transform: scale3d(1.3, 1.3, 1.3) rotate(-3deg)
}
to {
transform: scaleX(1)
}
}
#metu .react-datepicker-wrapper {
display: block
}
#metu .react-datepicker__day--selected {
border-radius: 50%;
background-color: #58aff3
}
#metu .react-datepicker__time-list-item--selected {
background-color: #58aff3
}
.metu-banner {
background-color: #fff;
border-bottom: 1px solid rgba(0, 0, 0, .12);
display: flex;
box-sizing: border-box;
flex-shrink: 0;
position: relative;
width: 100%;
height: 52px
}
.metu-banner__content {
display: flex;
position: absolute;
min-height: 52px;
width: 720px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
max-width: 100%;
padding: 0 8px
}
.metu-banner__text {
align-self: center;
flex-grow: 1;
padding-top: 16px;
padding-bottom: 16px;
font-size: 16px;
letter-spacing: .25px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.metu-banner__actions {
align-self: center;
display: flex;
flex-shrink: 0;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 8px
}
</style>
</head>
<body>
<div id="metu">
<div style="position: fixed; top: 0px; left: 0px; right: 0px; z-index: 999999;"></div>
<div class="mmt-container">
<div class="mmt-app mmt-app-rectangle mmt-app--mobile">
<div
style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-color: #008c72; opacity: 1; color: rgb(255, 255, 255); pointer-events: none; z-index: -1;">
</div>
<span class="mmt-menu__item mmt-menu__item--mobile" style="display: flex;">
<span class="mmt-button mmt-button--mobile call">
<span></span><img alt="url"
src="https://media.metu.vn/fillcolor?url=https%3A%2F%2Fmedia.metu.vn%2Fimages%2Ficon_call_01.svg&color=%23ffffff"
class="mmt-button__icon mmt-button__icon--motion" />
<span class="mmt-button__label" style="color: rgb(255, 255, 255);">Gọi
ngay</span>
</span>
</span>
<span class="mmt-menu__item mmt-menu__item--mobile" style="display: flex;">
<span class="mmt-button mmt-button--mobile zalo">
<span></span><img alt="url"
src="https://media.metu.vn/fillcolor?url=https%3A%2F%2Fmedia.metu.vn%2Fimages%2Ficon_zalo_01.svg&color=%23ffffff"
class="mmt-button__icon mmt-button__icon--motion" />
<span class="mmt-button__label" style="color: rgb(255, 255, 255);">Zalo
Chat</span>
</span>
</span>
<span class="mmt-menu__item mmt-menu__item--mobile" style="display: flex;">
<span class="mmt-button mmt-button--mobile facebook">
<span></span><img alt="url"
src="https://media.metu.vn/fillcolor?url=https%3A%2F%2Fmedia.metu.vn%2Fimages%2Ficon_facebook_01.svg&color=%23ffffff"
class="mmt-button__icon" />
<span class="mmt-button__label" style="color: rgb(255, 255, 255);">Facebook
Chat</span>
</span>
</span>
<span class="mmt-menu__item mmt-menu__item--mobile" style="display: flex;">
<span class="mmt-button mmt-button--mobile package">
<span></span><img alt="url"
src="https://media.metu.vn/fillcolor?url=https%3A%2F%2Fmedia.metu.vn%2Fimages%2Ficon_package_01.svg&color=%23ffffff"
class="mmt-button__icon mmt-button__icon--motion" />
<span class="mmt-button__label" style="color: rgb(255, 255, 255);">Gói
dịch vụ</span>
</span>
</span>
</div>
</div>
</div>
</body>
</html>PreviousRemove an action from init in wordpress (ok)NextBedrock, WordPress boilerplate with Composer, easier configuration, and an improved folder structure
Last updated
