commit bbecc014d8ac03f82cb964237493b0cb7e6aef38 Author: TienNM Date: Mon Apr 12 21:15:06 2021 +0700 [Init] diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..e6ea50f Binary files /dev/null and b/favicon.ico 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/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/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..38ab4da --- /dev/null +++ b/img/hearts.svg @@ -0,0 +1,41 @@ + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..74d010e --- /dev/null +++ b/index.html @@ -0,0 +1,55 @@ + + + + + + + + + + + Rabbit ❤️ Carrot + + + + +

Been Together

+ +

Nguyễn Minh Tiến

26.10.1999

+ +

Nguyễn Ngọc Tường Vy

12.02.1999

+ +

00 DAYS

+ 10:20:16 +

+ +

Thank you for your love !

+ +

+ + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..dc88c6b --- /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(2019, 3, 11); + 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); \ No newline at end of file diff --git a/music/Endless_Love.mp3 b/music/Endless_Love.mp3 new file mode 100644 index 0000000..fda068f Binary files /dev/null and b/music/Endless_Love.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..112ea6c --- /dev/null +++ b/style.css @@ -0,0 +1,187 @@ +@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; + border-radius: 50%; +} + +.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; + } +} \ No newline at end of file