[Change] state to broken

beentogether/.gitignore

@@ -0,0 +1 @@
+.idea

beentogether/index.html

@@ -2,54 +2,55 @@
 <html lang="en">
 
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <link rel="stylesheet" href="style.css">
-  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
-  <script src="main.js"></script>
-  <title>Rabbit ❤️ Carrot</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
+    <script src="main.js"></script>
+    <title>Rabbit 💔 Carrot</title>
 </head>
 
 <body>
 
-  <h1 class="title">Been Together</h1>
-  <div class="box">
+<h1 class="title">Been Together</h1>
+<div class="box">
 
     <div class="about">
-      <div class="info">
-        <img src="img/TienNM99.svg" class="avatar">
-        <div class="details">
-          <p class="name">Nguyễn Minh Tiến</p>
-          <p class="born">26.10.1999</p>
+        <div class="info">
+            <img src="img/Tien.png" class="avatar" alt="Tien">
+            <div class="details">
+                <p class="name">Nguyễn Minh Tiến</p>
+                <p class="born">26/10/1999</p>
+            </div>
         </div>
-      </div>
 
-      <div class="heart-box">
-        <img src="img/hearts.svg" class="heart">
-      </div>
+        <div class="heart-box">
+            <img src="img/broken-heart.gif" class="heart">
+        </div>
 
-      <div class="info">
-        <img src="img/VyNNT99.svg" class="avatar">
-        <div class="details">
-          <p class="name">Nguyễn Ngọc Tường Vy</p>
-          <p class="born">12.02.1999</p>
+        <div class="info">
+            <img src="img/Vy.jpg" class="avatar" alt="Vy">
+            <div class="details">
+                <p class="name">Nguyễn Ngọc Tường Vy</p>
+                <p class="born">12/02/1999</p>
+            </div>
         </div>
-      </div>
     </div>
 
     <div class="time">
-      <h2 class="days"><span>00</span>&nbsp;DAYS</h2>
-      <p class="sup-time">
-        <span class="hour">10</span>:<span class="min">20</span>:<span class="second">16</span>
-      </p>
+        <h2 class="days"><span>00</span>&nbsp;DAYS</h2>
+        <p class="sup-time">
+            11/04/2019 - 08/10/2022
+<!--            <span class="hour">10</span>:<span class="min">20</span>:<span class="second">16</span>-->
+        </p>
     </div>
 
-    <p class="say-thank">Thank you for your love !</p>
-  </div>
-  <iframe src="music/silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
-  <audio src="music/Endless_Love.mp3" loop="true" autoplay="true"></audio>
+    <p class="say-thank">Cảm ơn VY vì tất cả!</p>
+</div>
+<!--<iframe src="music/silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>-->
+<audio src="music/Endless_Love.mp3" loop="true" autoplay="true"></audio>
 
 </body>
 
-</html>
+</html>

beentogether/main.js

@@ -6,7 +6,7 @@ document.addEventListener('DOMContentLoaded', function () {
   var second = document.querySelector('.second');
 
   var startDate = new Date(2019, 3, 11);
-  days.innerText = Math.floor((new Date - startDate) / 86400000);
+  days.innerText = Math.floor((new Date(2022, 9, 8) - startDate) / 86400000);
   countTime();
 
   function countTime() {
@@ -17,6 +17,6 @@ document.addEventListener('DOMContentLoaded', function () {
     second.innerText = Math.floor(ms % 3600000 % 60000 / 1000);
   }
 
-  setInterval(countTime, 1000);
+  // setInterval(countTime, 1000);
 
-}, false);
+}, false);

beentogether/style.css

@@ -56,7 +56,9 @@ img {
 
 .avatar {
   width: 70px;
+  height: 70px;
   border-radius: 50%;
+  vertical-align: middle;
 }
 
 .info .details {
@@ -123,23 +125,23 @@ img {
   animation: heartBeat 1s ease-in-out infinite;
 }
 
-@keyframes heartBeat {
-  0% {
-    transform: scale(.9);
-  }
+/*@keyframes heartBeat {*/
+/*  0% {*/
+/*    transform: scale(.9);*/
+/*  }*/
 
-  45% {
-    transform: scale(1.1);
-  }
+/*  45% {*/
+/*    transform: scale(1.1);*/
+/*  }*/
 
-  70% {
-    transform: scale(.9);
-  }
+/*  70% {*/
+/*    transform: scale(.9);*/
+/*  }*/
 
-  100% {
-    transform: scale(.9);
-  }
-}
+/*  100% {*/
+/*    transform: scale(.9);*/
+/*  }*/
+/*}*/
 
 @media (max-width: 997px) {
   .box {
@@ -184,4 +186,4 @@ img {
   .say-thank {
     margin-top: 2rem;
   }
-}
+}