mirror of
https://github.com/tiennm99/beentogether.git
synced 2026-09-02 22:17:09 +00:00
[Init]
This commit is contained in:
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,66 @@
|
||||
<?xml version="1.0"?>
|
||||
<!-- Generated by SVGo -->
|
||||
<svg width="220" height="220"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<polygon points="44,36 12,54 44,72" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="172,36 204,54 172,72" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="12,54 44,72 12,90" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="204,54 172,72 204,90" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="44,72 12,90 44,108" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="172,72 204,90 172,108" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="12,90 44,108 12,126" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="204,90 172,108 204,126" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="44,108 12,126 44,144" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="172,108 204,126 172,144" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="12,126 44,144 12,162" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="204,126 172,144 204,162" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="44,144 12,162 44,180" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="172,144 204,162 172,180" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="12,162 44,180 12,198" style="fill:rgb(255,255,255); fill-opacity:0" />
|
||||
<polygon points="204,162 172,180 204,198" style="fill:rgb(255,255,255); fill-opacity:0" />
|
||||
<polygon points="44,0 76,18 44,36" style="fill:rgb(255,255,255); fill-opacity:0" />
|
||||
<polygon points="172,0 140,18 172,36" style="fill:rgb(255,255,255); fill-opacity:0" />
|
||||
<polygon points="76,18 44,36 76,54" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="140,18 172,36 140,54" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="44,36 76,54 44,72" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="172,36 140,54 172,72" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="76,54 44,72 76,90" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="140,54 172,72 140,90" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="44,72 76,90 44,108" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="172,72 140,90 172,108" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="76,90 44,108 76,126" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="140,90 172,108 140,126" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="44,108 76,126 44,144" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="172,108 140,126 172,144" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="76,126 44,144 76,162" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="140,126 172,144 140,162" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="44,144 76,162 44,180" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="172,144 140,162 172,180" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="76,162 44,180 76,198" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="140,162 172,180 140,198" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="108,0 76,18 108,36" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="108,0 140,18 108,36" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="76,18 108,36 76,54" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="140,18 108,36 140,54" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="108,36 76,54 108,72" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="108,36 140,54 108,72" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="76,54 108,72 76,90" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="140,54 108,72 140,90" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="108,72 76,90 108,108" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="108,72 140,90 108,108" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="76,90 108,108 76,126" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="140,90 108,108 140,126" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="108,108 76,126 108,144" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="108,108 140,126 108,144" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="76,126 108,144 76,162" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="140,126 108,144 140,162" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="108,144 76,162 108,180" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="108,144 140,162 108,180" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="76,162 108,180 76,198" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="140,162 108,180 140,198" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="108,180 76,198 108,216" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="108,180 140,198 108,216" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="76,198 108,216 76,234" style="fill:rgb(255,255,255); fill-opacity:0" />
|
||||
<polygon points="140,198 108,216 140,234" style="fill:rgb(255,255,255); fill-opacity:0" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
@@ -0,0 +1,66 @@
|
||||
<?xml version="1.0"?>
|
||||
<!-- Generated by SVGo -->
|
||||
<svg width="220" height="220"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<polygon points="44,36 12,54 44,72" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="172,36 204,54 172,72" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="12,54 44,72 12,90" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="204,54 172,72 204,90" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="44,72 12,90 44,108" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="172,72 204,90 172,108" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="12,90 44,108 12,126" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="204,90 172,108 204,126" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="44,108 12,126 44,144" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="172,108 204,126 172,144" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="12,126 44,144 12,162" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="204,126 172,144 204,162" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="44,144 12,162 44,180" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="172,144 204,162 172,180" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="12,162 44,180 12,198" style="fill:rgb(255,255,255); fill-opacity:0" />
|
||||
<polygon points="204,162 172,180 204,198" style="fill:rgb(255,255,255); fill-opacity:0" />
|
||||
<polygon points="44,0 76,18 44,36" style="fill:rgb(255,255,255); fill-opacity:0" />
|
||||
<polygon points="172,0 140,18 172,36" style="fill:rgb(255,255,255); fill-opacity:0" />
|
||||
<polygon points="76,18 44,36 76,54" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="140,18 172,36 140,54" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="44,36 76,54 44,72" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="172,36 140,54 172,72" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="76,54 44,72 76,90" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="140,54 172,72 140,90" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="44,72 76,90 44,108" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="172,72 140,90 172,108" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="76,90 44,108 76,126" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="140,90 172,108 140,126" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="44,108 76,126 44,144" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="172,108 140,126 172,144" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="76,126 44,144 76,162" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="140,126 172,144 140,162" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="44,144 76,162 44,180" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="172,144 140,162 172,180" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="76,162 44,180 76,198" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="140,162 172,180 140,198" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="108,0 76,18 108,36" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="108,0 140,18 108,36" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="76,18 108,36 76,54" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="140,18 108,36 140,54" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="108,36 76,54 108,72" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="108,36 140,54 108,72" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="76,54 108,72 76,90" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="140,54 108,72 140,90" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="108,72 76,90 108,108" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="108,72 140,90 108,108" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="76,90 108,108 76,126" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="140,90 108,108 140,126" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="108,108 76,126 108,144" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="108,108 140,126 108,144" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="76,126 108,144 76,162" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="140,126 108,144 140,162" style="fill:rgb(255,255,255)" />
|
||||
<polygon points="108,144 76,162 108,180" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="108,144 140,162 108,180" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="76,162 108,180 76,198" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="140,162 108,180 140,198" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="108,180 76,198 108,216" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="108,180 140,198 108,216" style="fill:rgb(0,0,0)" />
|
||||
<polygon points="76,198 108,216 76,234" style="fill:rgb(255,255,255); fill-opacity:0" />
|
||||
<polygon points="140,198 108,216 140,234" style="fill:rgb(255,255,255); fill-opacity:0" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 578 B |
@@ -0,0 +1,41 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 57.947 57.947" style="enable-background:new 0 0 57.947 57.947;" xml:space="preserve">
|
||||
<g>
|
||||
<path style="fill:#E64C3C;" d="M28.947,56.486c15.685-11.277,23.532-21.592,27.222-29.46c4.311-9.193,0.561-20.589-8.845-24.413
|
||||
C36.268-1.88,28.947,8.486,28.947,8.486S21.678-1.907,10.623,2.588C1.217,6.412-2.533,17.808,1.778,27.001
|
||||
C5.468,34.868,13.262,45.21,28.947,56.486z"/>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 934 B |
+55
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<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>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="heart-box">
|
||||
<img src="img/hearts.svg" 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="time">
|
||||
<h2 class="days"><span>00</span> DAYS</h2>
|
||||
<p class="sup-time">
|
||||
<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>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -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);
|
||||
Binary file not shown.
Binary file not shown.
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user