html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DeepLove. Valentine Day Code</title>
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@2.1.0/dist/iconify-icon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div class="page">
<h3>Find Your Perfect <span>Love<iconify-icon icon="material-symbols:ecg-heart"></iconify-icon></span> With Us!</h3>
<img src="https://static.vecteezy.com/system/resources/previews/036/278/079/non_2x/3d-promo-discount-coupon-or-voucher-code-with-love-icon-illustration-for-ui-ux-web-mobile-apps-social-media-ads-free-png.png?hl=en-US" alt="heart"/>
<p>A place where you can find your code Love.</p>
<button onclick="next()">Continue with DeepLove.</button>
</div>
<div class="page2">
<header>
<iconify-icon onclick="side()" icon="fluent:grid-circles-24-regular" ></iconify-icon>
<p>DeepLove</p>
<iconify-icon onclick="quote()" icon="stash:heart" ></iconify-icon>
</header>
<main>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@import url(https://fonts.bunny.net/css?family=amarante:400|montserrat:400,500,600,700,800,900);
@import url('https://fonts.googleapis.com/css?family=Rajdhani');
/* Root Variables */
:root {
/*Background Colors*/
--bg-1: hsl(343, 100%,93%);
--bg-2: hsl(337,100%,98%);
--gradient: linear-gradient(to bottom, #FFF6F9, #F7F6FC, #EBD9F3 );
--grad: linear-gradient(135deg, var(--cursor), var(--active));
--hover: hsl(312,28%,93%);
--cursor:hsl(348, 98%,78%);
/*Text colors*/
--color: #FFF;
--color-2: hsl(185,52%,20%);
--active:hsl(342, 99%,65%);
--font-family: Montserrat, sans-serif;
--box-shadow: 0 2px 8px var(--bg-1);
--shadow: 0 2px 4px hsl(0, 4%, 50%);
--transition-speed: 0.3s;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.onload = function() {
document.querySelector('.page2').style.display = 'none';
document.querySelector('.page3').style.display = 'none';
document.querySelector('.page4').style.display = 'none';
document.querySelector('.sidebar').style.display = 'none';
document.querySelector('.quotes').style.display = 'none';
document.querySelector('#container').style.display = 'none';
document.querySelector('.toast').style.display = 'none';
};
function next(){
$(".page").hide();
$(".page2").show();
$(".page3").hide();
$(".page4").hide();
$(".sidebar").hide();
$("#container").hide();
}
function sec(){
$(".page").hide();
$(".page2").hide();
$(".page3").show();
$(".page4").hide();
$(".sidebar").hide();
$("#container").hide();
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run