Scribd
Upload
20 views6 pages

Example

Uploaded by

ananyadash1018
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
20 views6 pages

Example

Uploaded by

ananyadash1018
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="exampl.css"
</head>
<body>

<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>

</body>
</html>

body {
background:
linear-gradient(#0007, #0000),
#123;
margin: 0;
height: 100vh;
overflow: hidden;
}
@keyframes firework {
0% { transform: translate(var(--x), var(--initialY)); width: var(--initialSize); opacity: 1; }
50% { width: 0.5vmin; opacity: 1; }
100% { width: var(--finalSize); opacity: 0; }
}
/* @keyframes fireworkPseudo {
0% { transform: translate(-50%, -50%); width: var(--initialSize); opacity: 1; }
50% { width: 0.5vmin; opacity: 1; }
100% { width: var(--finalSize); opacity: 0; }
}
*/
.firework,
.firework::before,
.firework::after
{
--initialSize: 0.5vmin;
--finalSize: 45vmin;
--particleSize: 0.2vmin;
--color1: yellow;
--color2: khaki;
--color3: white;
--color4: lime;
--color5: gold;
--color6: mediumseagreen;
--y: -30vmin;
--x: -50%;
--initialY: 60vmin;
content: "";
animation: firework 2s infinite;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, var(--y));
width: var(--initialSize);
aspect-ratio: 1;
background:
/*
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 0%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 0%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 100%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 100%,
*/
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 50% 0%,
radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 50%,
radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 50% 100%,
radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 0% 50%,
/* bottom right */
radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 80% 90%,
radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 95% 90%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 90% 70%,
radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 60%,
radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 55% 80%,
radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 70% 77%,
/* bottom left */
radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 22% 90%,
radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 45% 90%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 70%,
radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 10% 60%,
radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 31% 80%,
radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 28% 77%,
radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 13% 72%,
/* top left */
radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 80% 10%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 95% 14%,
radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 90% 23%,
radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 100% 43%,
radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 85% 27%,
radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 77% 37%,
radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 60% 7%,
/* top right */
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 22% 14%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 45% 20%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 34%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 10% 29%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 31% 37%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 28% 7%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 13% 42%
;
background-size: var(--initialSize) var(--initialSize);
background-repeat: no-repeat;
}
.firework::before {
--x: -50%;
--y: -50%;
--initialY: -50%;
/* transform: translate(-20vmin, -2vmin) rotate(40deg) scale(1.3) rotateY(40deg); */
transform: translate(-50%, -50%) rotate(40deg) scale(1.3) rotateY(40deg);
/* animation: fireworkPseudo 2s infinite; */
}
.firework::after {
--x: -50%;
--y: -50%;
--initialY: -50%;
/* transform: translate(44vmin, -50%) rotate(170deg) scale(1.15) rotateY(-30deg); */
transform: translate(-50%, -50%) rotate(170deg) scale(1.15) rotateY(-30deg);
/* animation: fireworkPseudo 2s infinite; */
}
.firework:nth-child(2) {
--x: 30vmin;
}
.firework:nth-child(2),
.firework:nth-child(2)::before,
.firework:nth-child(2)::after {
--color1: pink;
--color2: violet;
--color3: fuchsia;
--color4: orchid;
--color5: plum;
--color6: lavender;
--finalSize: 40vmin;
left: 30%;
top: 60%;
animation-delay: -0.25s;
}
.firework:nth-child(3) {
--x: -30vmin;
--y: -50vmin;
}
.firework:nth-child(3),
.firework:nth-child(3)::before,
.firework:nth-child(3)::after {
--color1: cyan;
--color2: lightcyan;
--color3: lightblue;
--color4: PaleTurquoise;
--color5: SkyBlue;
--color6: lavender;
--finalSize: 35vmin;
left: 70%;
top: 60%;
animation-delay: -0.4s;
}

example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-image: linear-gradient(to right top, #1f0537, #380c60, #55108c, #7413bb, #9612eb);
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}

.card {
position: relative;
width: 300px;
height: 425px;
border: 10px solid #9612eb;
margin: 60px auto 0 auto;
box-shadow: inset 15px 0px 20px 0px rgba(0, 0, 0, 0.5);
background-image: linear-gradient(to bottom, rgba(255, 255, 255), rgba(255, 255, 255, 0.10)), url("");

background-position: center; /* Center the image */


background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover;
background-color: #e6f0e6;
}
.card .text-container {
width: 80%;
height: 80%;
margin: auto;

}
.strikethrough {
text-decoration: line-through;
}
.card .text-container #head {
font-family: 'Nobile', sans-serif;
font-size: 1.5em;
margin: 60px auto 60px auto;
}
.card p {
font-size: 1.1em;
line-height: 1.4;
font-family: 'Nobile';
color: #331717;
font-style: italic;
text-align: center;
margin: 30px auto 0px auto;
}
.card .front {
position: absolute;
width: 100%;
height: 100%;
margin: -10px 0px 0px -10px;
border: 10px solid #9612eb;
backface-visibility: hidden;
background-color: #9612eb;
/* background-image: url($cover-image);
*/
background-size: contain;
transform-style: preserve-3d;
transform-origin: 0% 50%;
transform: perspective(800px) rotateY(0deg);
transition: all 0.8s ease-in-out;
}
.card:hover .front {
transform: perspective(800px) rotateY(-170deg);
background-color: #41718d;
}
.card:hover .back {
transform: perspective(800px) rotateY(-170deg);
box-shadow: 7px 0px 5px 0px rgba(0, 0, 0, 0.3), inset 2px 0px 15px 0px rgba(0, 0, 0, 0.1);
background-color: #d2dcd2;
}
.card .back {
position: absolute;
width: 100%;
height: 100%;
border: 10px solid #9612eb;
margin: -10px 0px 0px -10px;
backface-visibility: visible;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, .5));
transform-style: preserve-3d;
transform-origin: 0% 50%;
transform: perspective(800px) rotateY(0deg);
transition: all 0.8s ease-in-out;
background-color: #e6f0e6;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
}

.imgset
{
position: relative;
z-index: 1;
margin-bottom: -215px;
}
.imgset img
{
box-shadow: 0px 6px 11px 7px rgba(0, 0, 0, 0.22);
border-radius: 5px;
}
.card .back{
background-image: linear-gradient(to bottom, rgba(255, 255, 255), rgba(255, 255, 255, 0.20)),
url("./brother.jpeg");

background-position: center;
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover;
background-color:#fcfffc;
box-shadow: 10px 6px 11px 7px rgba(225, 255, 0, 0.22);
}
</style>
</head>
<body>
<div class="card">
<div class="back"></div>
<div class="front">
<div class="imgset">
<img width="100%"
src="https://us-east-1-blow-web.s3.amazonaws.com/49/c47cfca6864ece847e412463723d69/thumb.jpg">
</div>
</div>
<div class="text-container">
<p id="head"><i><u><b>congratulation</b></u></i></p>
<p>to a beautiful couple wishing you a wonderful journey as you build your new life together!</p>
<p>Hope your day goes grat!<br>All the best</p>
<p style="color: red;"><i>Biswajee & Baishali</i></p>
</div>
</div>
</body>
</html>

You might also like