diff --git a/dental-visit/favicon.ico b/dental-visit/favicon.ico new file mode 100644 index 0000000..e6ea50f Binary files /dev/null and b/dental-visit/favicon.ico differ diff --git a/dental-visit/img/heart.png b/dental-visit/img/heart.png new file mode 100644 index 0000000..8a6ac3f Binary files /dev/null and b/dental-visit/img/heart.png differ diff --git a/dental-visit/img/hearts.svg b/dental-visit/img/hearts.svg new file mode 100644 index 0000000..3749e08 --- /dev/null +++ b/dental-visit/img/hearts.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dental-visit/img/tobi.png b/dental-visit/img/tobi.png new file mode 100644 index 0000000..0dbb906 Binary files /dev/null and b/dental-visit/img/tobi.png differ diff --git a/dental-visit/index.html b/dental-visit/index.html new file mode 100644 index 0000000..98dcab3 --- /dev/null +++ b/dental-visit/index.html @@ -0,0 +1,49 @@ + + + + + + + + + + 🦷 Tobi 🦷 + + + +

🦷 Đếm ngày bé răng tốt nghiệp 🦷

+
+
+
+ +
+

Tobi

+

xx.xx.xxxx

+
+
+ +
+ +
+ +
+ +
+

Tobi

+

yy.yy.yyyy

+
+
+
+ +
+

00 ngày

+ +
+ +

🦷 Bé răng đang hóng được gặp lại nha sĩ đó :v 🦷

+
+ + diff --git a/dental-visit/main.js b/dental-visit/main.js new file mode 100644 index 0000000..f3e6794 --- /dev/null +++ b/dental-visit/main.js @@ -0,0 +1,24 @@ +document.addEventListener( + "DOMContentLoaded", + function () { + var days = document.querySelector(".days span"); + // var hour = document.querySelector(".hour"); + // var min = document.querySelector(".min"); + // var second = document.querySelector(".second"); + + var startDate = new Date(2017, 9, 4); + days.innerText = Math.abs(Math.floor((new Date() - startDate) / 86400000)); + // countTime(); + + // function countTime() { + // let today = new Date(); + // let ms = (today - startDate) % 86400000; + // hour.innerText = Math.floor(ms / 3600000); + // min.innerText = Math.floor((ms % 3600000) / 60000); + // second.innerText = Math.floor(((ms % 3600000) % 60000) / 1000); + // } + + // setInterval(countTime, 1000); + }, + false +); diff --git a/dental-visit/style.css b/dental-visit/style.css new file mode 100644 index 0000000..c6b0b79 --- /dev/null +++ b/dental-visit/style.css @@ -0,0 +1,188 @@ +@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400&subset=vietnamese"); + +body { + margin: 0; + padding: 0; + font-family: "Roboto", sans-serif; + background-color: #f8f8f8; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + min-height: 100vh; + color: rgba(0, 0, 0, 0.653); + background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%); + text-shadow: 0 0.2px 0.3px rgba(0, 0, 0, 0.353); + background-size: cover; +} + +img { + max-width: 100%; +} + +.box { + background-color: white; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); + padding: 1rem; + width: 60%; + border-radius: 26px; +} + +.about { + display: flex; + align-items: center; + padding: 0 1rem; + margin-bottom: 3rem; + margin-top: 10px; + position: relative; +} + +.info:first-child { + flex-grow: 1; +} + +.info { + display: flex; + align-items: center; +} + +.info:last-child .avatar { + order: 2; +} + +.info:last-child .details { + text-align: right; +} + +.avatar { + width: 70px; + border-radius: 5%; +} + +.info .details { + margin: 0 1rem; +} + +.info .details p { + margin: 4px; +} + +.name { + font-size: 15px; + text-transform: uppercase; +} + +.born { + font-weight: 300; +} + +.time { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.time h2, +.time p { + margin: 0; + margin-bottom: 4px; +} + +.time h2 { + font-size: 2.8rem; +} + +.time p { + font-size: 1.5rem; +} + +.sup-time { + font-weight: 300; +} + +.say-thank { + text-align: center; + margin-top: 6rem; + font-weight: 100; + color: tomato; + opacity: 0.8; + margin-bottom: 0; +} + +.title { + opacity: 0.7; +} + +.heart { + position: absolute; + top: calc(50% - 25px); + left: calc(50% - 25px); + width: 50px; + transform-origin: 50% 50%; + opacity: 0.8; + animation: heartBeat 1s ease-in-out infinite; +} + +@keyframes heartBeat { + 0% { + transform: scale(0.9); + } + + 45% { + transform: scale(1.1); + } + + 70% { + transform: scale(0.9); + } + + 100% { + transform: scale(0.9); + } +} + +@media (max-width: 997px) { + .box { + width: 84%; + margin-bottom: 2rem; + } + + .title { + margin: 2rem 0 1rem 0; + font-size: 18px; + } + + .about { + flex-direction: column; + /* align-items: flex-start; */ + padding: 0; + } + + .info { + flex-direction: column; + } + + .avatar { + margin-bottom: 0.5rem; + } + + .info p { + text-align: center; + margin: 10px 0 0 0; + font-size: 13px; + } + + .info:last-child .avatar { + order: 0; + } + + .heart { + position: relative; + margin: 1.4rem 0; + } + + .say-thank { + margin-top: 2rem; + } +}