/* header css style started*/
/*MayilRangoli Youtube channel follow
https://www.youtube.com/@ForgetForgive/shorts
https://www.youtube.com/@MayilRangoli/videos */
.header{
width:960px;
margin:0px auto;
}
.header h1{
text-align:center;
margin:0;
font-size:50px;
font-family:sans-serif;
font-style: italic;
padding-bottom:50px;
}
.header h1 span{
color:red;
}
/* header css style ended*/
/* heart shape css style started*/
.heart-shape{
position:relative;
width:200px;
height:200px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background-color: rgb(255, 0, 0);
margin:60px 0 0 150px;
}
.heart-shape:before,
.heart-shape:after{
position:absolute;
content:'';
width:200px;
height:200px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: rgb(255, 0, 0);
}
.heart-shape:before{
bottom:0px;
left:-100px;
}
.heart-shape:after{
top:-100px;
right:0px;
}
/*heart shape css style ended*/

styles.doc

  • 1.
    /* header cssstyle started*/ /*MayilRangoli Youtube channel follow https://www.youtube.com/@ForgetForgive/shorts https://www.youtube.com/@MayilRangoli/videos */ .header{ width:960px; margin:0px auto; } .header h1{ text-align:center; margin:0; font-size:50px; font-family:sans-serif; font-style: italic; padding-bottom:50px; } .header h1 span{ color:red; } /* header css style ended*/ /* heart shape css style started*/ .heart-shape{ position:relative; width:200px; height:200px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); background-color: rgb(255, 0, 0); margin:60px 0 0 150px; } .heart-shape:before, .heart-shape:after{ position:absolute; content:''; width:200px; height:200px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background-color: rgb(255, 0, 0); } .heart-shape:before{ bottom:0px; left:-100px; } .heart-shape:after{ top:-100px;
  • 2.