83 lines
No EOL
3.5 KiB
PHP
Executable file
83 lines
No EOL
3.5 KiB
PHP
Executable file
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||
<title>Pets at Home</title>
|
||
<meta name="description" content="Pets at Home">
|
||
<link rel="stylesheet" href="assets/css/style.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
|
||
<?php include('header.php'); ?>
|
||
|
||
<div class="body-container">
|
||
|
||
<div class="pets-text-logo"></div>
|
||
|
||
<div class="title1">My Pet Love Song.</div>
|
||
|
||
<img class="dog-record" src="assets/images/dog-record.png" alt="Dog Record" />
|
||
|
||
<!--<div class="heart1-icon">
|
||
<img class="red-heart-1" src="assets/images/heart-red.png" alt="Red Heart" />
|
||
</div>
|
||
|
||
<div class="heart1-icon">
|
||
<img class="red-heart-2" src="assets/images/heart-red.png" alt="Red Heart" />
|
||
</div>-->
|
||
|
||
<div class="song-lyrics">Woke up early, 6am sharp I was whining, <br/>playing my part.</div>
|
||
|
||
<div class="song-control">
|
||
<span id="toggle-song-icon" class="song-play"></span>
|
||
</div>
|
||
|
||
<div class="share-container">
|
||
<div class="share-title">Share the love.</div>
|
||
<div class="share-icons">
|
||
<img class="tiktok" src="assets/images/tiktok.png" alt="Tiktok" />
|
||
<img class="instagram" src="assets/images/instagram.png" alt="Instagram" />
|
||
<img class="facebook" src="assets/images/facebook.png" alt="Facebook" />
|
||
</div>
|
||
<button class="download-song-btn">Download your song</button>
|
||
<button class="copy-btn">Copy URL</button>
|
||
<div class="share-text">Download, share and don’t forget to tag us @PetsatHome with #PetLoveSongs so we can celebrate your love too.</div>
|
||
</div>
|
||
|
||
<button class="make-another-song-btn">Need another song</button>
|
||
|
||
<div class="banner1-container">
|
||
<img id="banner1-mb" class="banner1" src="assets/images/head-tails-btn.png" alt="Fall head over tails" />
|
||
<img id="banner1-dt" class="banner1" src="assets/images/head-tails-btn-dt.png" alt="Fall head over tails" />
|
||
</div>
|
||
|
||
<div class="banner2-container">
|
||
<img id="banner2-mb" class="banner2" src="assets/images/club-member.png" alt="Not a Pets Club member" />
|
||
<img id="banner2-dt" class="banner2" src="assets/images/club-member-dt.png" alt="Not a Pets Club member" />
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<?php include('footer.php'); ?>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
const icon = document.getElementById('toggle-song-icon');
|
||
icon.addEventListener('click', () => {
|
||
if (icon.classList.contains('song-play')) {
|
||
icon.classList.remove('song-play');
|
||
icon.classList.add('song-pause');
|
||
} else {
|
||
icon.classList.remove('song-pause');
|
||
icon.classList.add('song-play');
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|