Scribd
Upload
10 views7 pages

Rose coding

The document contains HTML and CSS code for a rose-themed design, featuring elements like petals, thorns, and sparkles. The CSS defines various styles using CSS variables for colors and layout properties. The structure is organized in a grid layout with a focus on visual effects and transitions.

Uploaded by

Alfonso Cambaliza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views7 pages

Rose coding

The document contains HTML and CSS code for a rose-themed design, featuring elements like petals, thorns, and sparkles. The CSS defines various styles using CSS variables for colors and layout properties. The structure is organized in a grid layout with a focus on visual effects and transitions.

Uploaded by

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

Code for rose

Html

<!DOCTYPE html>

<html>

<head>

<title>Rose</title>

<link rel=”stylesheet” type=”text/css” href=”rose.css”>

</head>

<body>

<div class=”container”>

<div class=”glass”></div>

<div class=”thorns”>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

<div class=”glow”></div>

<div class=”rose-leaves”>

<div></div>

<div></div>

</div>

<div class=”rose-petals”>

<div></div>

<div></div>

<div></div>

<div></div>
<div></div>

<div></div>

<div></div>

</div>

<div class=”sparkles”>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

</div>

</body>

</html>

CSS

:root{

--primary: #fff;

--bg-color: rgb(5, 53, 61);

--bg-envelope-color: #f5edd1;

--envelope-tab: #ecdeb8;

--envelope-cover: #e6cfa7;
--shadow-color: rgba(0, 0, 0, 0.2);

--txt-color: #444;

--heart-color: rgb(252, 8, 231);

Body{

Margin: 0;

Padding: 0;

Box-sizing: border-box;

Background: var(--bg-color);

Display: flex;

Align-items: center;

Justify-content: center;

.container {

Height: 100vh;

Display: grid;

Place-items: center;

.container > .envelope-wrapper {

Background: var(--bg-envelope-color);

Box-shadow: 0 0 40px var(--shadow-color);

.envelope-wrapper > .envelope {

Position: relative;

Width: 300px;

Height: 230px;

}
.envelope-wrapper > .envelope::before {

Content: “”;

Position: absolute;

Top: 0;

z-index: 2;

border-top: 130px solid var(--envelope-tab);

border-right: 150px solid transparent;

border-left: 150px solid transparent;

transform-origin: top;

transition: all 0.5s ease-in-out 0.7s;

.envelope-wrapper > .envelope::after {

Content: “”;

Position: absolute;

z-index: 2;

width: 0px;

height: 0px;

border-top: 130px solid transparent;

border-right: 150px solid var(--envelope-cover);

border-bottom: 100px solid var(--envelope-cover);

border-left: 150px solid var(--envelope-cover);

.envelope > .letter {

Position: absolute;

Right: 20%;

Bottom: 0;

Width: 54%;
Height: 80%;

Background: var(--primary);

Text-align: center;

Transition: all 1s ease-in-out;

Box-shadow: 0 0 5px var(--shadow-color);

Padding: 20px 10px;

.envelope > .letter > .text {

Font-family: ‘Gill Sans’, ‘Gill Sans MT’, Calibri, ‘Trebuchet MS’, sans-serif;

Color: var(--txt-color);

Text-align: left;

Font-size: 10px;

.heart {

Position: absolute;

Top: 50%;

Left: 50%;

Width: 15px;

Height: 15px;

Background: var(--heart-color);

z-index: 4;

transform: translate(-50%, -20%) rotate(45deg);

transition: transform 0.5s ease-in-out 1s;

box-shadow: 0 1px 6px var(--shadow-color);

cursor: pointer;

}
.heart:before,

.heart:after {

Content: “”;

Position: absolute;

Width: 15px;

Height: 15px;

Background-color: var(--heart-color);

Border-radius: 50%;

.heart:before {

Top: -7.5px;

.heart:after {

Right: 7.5px;

.flap > .envelope:before {

Transform: rotateX(180deg);

z-index: 0;

.flap > .envelope > .letter {

Bottom: 100px;

Transform: scale(1.5);

Transition-delay: 1s;

.flap > .heart {

Transform: rotate(90deg);

Transition-delay: 0.4s;
}

You might also like