diff --git a/apart/favicon.ico b/apart/favicon.ico new file mode 100644 index 0000000..e6ea50f Binary files /dev/null and b/apart/favicon.ico differ diff --git a/apart/img/heart.png b/apart/img/heart.png new file mode 100644 index 0000000..8a6ac3f Binary files /dev/null and b/apart/img/heart.png differ diff --git a/apart/img/hearts.svg b/apart/img/hearts.svg new file mode 100644 index 0000000..3749e08 --- /dev/null +++ b/apart/img/hearts.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apart/img/sugercubs_01-160x160.png b/apart/img/sugercubs_01-160x160.png new file mode 100644 index 0000000..ec7a27e Binary files /dev/null and b/apart/img/sugercubs_01-160x160.png differ diff --git a/apart/img/sugercubs_02-160x160.png b/apart/img/sugercubs_02-160x160.png new file mode 100644 index 0000000..9cf9ddf Binary files /dev/null and b/apart/img/sugercubs_02-160x160.png differ diff --git a/apart/img/sugercubs_03-160x160.png b/apart/img/sugercubs_03-160x160.png new file mode 100644 index 0000000..9f2df55 Binary files /dev/null and b/apart/img/sugercubs_03-160x160.png differ diff --git a/apart/index.html b/apart/index.html new file mode 100644 index 0000000..aa97e7a --- /dev/null +++ b/apart/index.html @@ -0,0 +1,56 @@ + + + + + + + + + + Mocha ❤️ Latte + + + +

Xa nhau... bao nhiêu lâu rùi...?

+
+
+
+ +
+

Mocha

+

xx.xx.xxxx

+
+
+ +
+ +
+ +
+ +
+

Latte

+

yy.yy.yyyy

+
+
+
+ +
+

00 ngày

+

+ 00 giờ 20 phút + 00 giây +

+
+ +

Xa Vy, anh nhớ anh đếm từng giây đó hiuhiu...

+
+ + + + diff --git a/apart/main.js b/apart/main.js new file mode 100644 index 0000000..09aa532 --- /dev/null +++ b/apart/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(2021, 4, 19); + days.innerText = 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/apart/music/Alone.m4a b/apart/music/Alone.m4a new file mode 100644 index 0000000..4823167 Binary files /dev/null and b/apart/music/Alone.m4a differ diff --git a/apart/music/silence.mp3 b/apart/music/silence.mp3 new file mode 100644 index 0000000..e75b0bc Binary files /dev/null and b/apart/music/silence.mp3 differ diff --git a/apart/style.css b/apart/style.css new file mode 100644 index 0000000..c6b0b79 --- /dev/null +++ b/apart/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; + } +}