diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..485dee6 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..b2db5e1 Binary files /dev/null and b/favicon.ico differ diff --git a/img/Tien.png b/img/Tien.png new file mode 100644 index 0000000..200a39f Binary files /dev/null and b/img/Tien.png differ diff --git a/img/TienNM99.svg b/img/TienNM99.svg new file mode 100644 index 0000000..0fade1e --- /dev/null +++ b/img/TienNM99.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/Vy.jpg b/img/Vy.jpg new file mode 100644 index 0000000..b5dd294 Binary files /dev/null and b/img/Vy.jpg differ diff --git a/img/VyNNT99.svg b/img/VyNNT99.svg new file mode 100644 index 0000000..277f5a0 --- /dev/null +++ b/img/VyNNT99.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/broken-heart.gif b/img/broken-heart.gif new file mode 100644 index 0000000..ac5fb39 Binary files /dev/null and b/img/broken-heart.gif differ diff --git a/img/broken-heart.png b/img/broken-heart.png new file mode 100644 index 0000000..8c186ce Binary files /dev/null and b/img/broken-heart.png differ diff --git a/img/heart.png b/img/heart.png new file mode 100644 index 0000000..8a6ac3f Binary files /dev/null and b/img/heart.png differ diff --git a/img/hearts.svg b/img/hearts.svg new file mode 100644 index 0000000..3749e08 --- /dev/null +++ b/img/hearts.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..67b1c3f --- /dev/null +++ b/index.html @@ -0,0 +1,55 @@ + + + + + + + + + + + Tiến 💔 Vy + + + + +

Đếm ngày xa em

+
+ +
+
+ Tien +
+

Nguyễn Minh Tiến

+

26/10/1999

+
+
+ +
+ +
+ +
+ Vy +
+

Nguyễn Ngọc Tường Vy

+

12/02/1999

+
+
+
+ +
+

00 DAYS

+

+ 10:20:16 +

+
+ +

Cảm ơn em vì tất cả!

+
+ + + + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..73e3786 --- /dev/null +++ b/main.js @@ -0,0 +1,22 @@ +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(2022, 9, 8); + 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/music/Dem-Ngay-Xa-Em-OnlyC-Lou-Hoang.mp3 b/music/Dem-Ngay-Xa-Em-OnlyC-Lou-Hoang.mp3 new file mode 100644 index 0000000..4a3b970 Binary files /dev/null and b/music/Dem-Ngay-Xa-Em-OnlyC-Lou-Hoang.mp3 differ diff --git a/music/silence.mp3 b/music/silence.mp3 new file mode 100644 index 0000000..e75b0bc Binary files /dev/null and b/music/silence.mp3 differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..60c4458 --- /dev/null +++ b/style.css @@ -0,0 +1,189 @@ +@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 .2px .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, .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; + height: 70px; + border-radius: 50%; + vertical-align: middle; +} + +.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: .8; + margin-bottom: 0; +} + +.title { + opacity: .7; +} + +.heart { + position: absolute; + top: calc(50% - 25px); + left: calc(50% - 25px); + width: 50px; + transform-origin: 50% 50%; + opacity: .8; + animation: heartBeat 1s ease-in-out infinite; +} + +/*@keyframes heartBeat {*/ +/* 0% {*/ +/* transform: scale(.9);*/ +/* }*/ + +/* 45% {*/ +/* transform: scale(1.1);*/ +/* }*/ + +/* 70% {*/ +/* transform: scale(.9);*/ +/* }*/ + +/* 100% {*/ +/* transform: scale(.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: .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; + } +}