Message pop Up
Message Pop up :- are you waiting for Someone's Message ! Why are you Waiting. Why not you send him/her message firstly to make surprise.
Simple paste the Source Code in your Html Body tag
<div class="box">
<div class="circle">
<div class="msg-1">
<div class="right-triangle"></div>
</div>
<div class="msg-2">
<div class="left-triangle"></div>
<div class="eye-1"></div>
<div class="eye-2"></div>
<div class="wrapper"></div>
<div class="mouth"></div>
<div class="toungh"></div>
</div>
</div>
</div>
We have make a box of fixed Height & width and it's position is relative according to webpage. but all the content contains in under the box their position is absolute so in this way csn move the content freely
.box{
position: relative;
display: block;
margin: auto;
width: 600px;
height:440px;
margin-top:8%; }
.circle{
position: absolute;
width: 60%;
height: 82%;
top: 0.8%;
left:20%;
border-radius: 50%;
background: linear-gradient(to bottom right,#37A5E8, #0392EA); }
.msg-1{
position: absolute;
width: 55%;
height: 41%;
background:#9DD9FF;
top:22%;
right:17%;
border-radius: 15%; }
.right-triangle{
position: absolute;
height:30% ;
width:25% ;
background: #9DD9FF;
top:35%;
right:-12%;
transform:rotate(50deg);
border-top-right-radius: 15%; }
.msg-2{
position: absolute;
width: 55%;
height: 41%;
background: #ffffFF; bottom:25%;
left:17%;
border-radius: 15%; }
.left-triangle{
position: absolute;
height:30% ;
width:25% ;
top:35%;
left:-12%;
transform:rotate(50deg);
border-bottom-left-radius: 15%; }
.eye-1{
position: absolute;
height: 26%;
width: 19%;
top:32%;
left:21%;
border: 8px solid #0392EA;
border-radius:50%; }
.eye-2{
position: absolute;
height: 26%;
width: 19%;
top:33%;
right:21%;
border: 8px solid #0392EA;
border-radius:50%; }
.wrapper{
position: absolute;
height: 25%;
width: 70%;
top:43.5%;
left:15%;
background: #ffffff; }
.mouth{
position: absolute;
height: 30%;
width: 30% ;
top:53%;
left:35%;
background: #000;
transform: rotate(180deg);
-webkit-clip-path: circle(50% at 50% 100%);
clip-path: circle(50% at 50% 100%); }
.toungh{
position: absolute;
width:20%;
height:20%;
top:50.7%;
left:40%;
background:#F0B8BA;
-webkit-clip-path: circle(50% at 50% 100%);
clip-path: circle(50% at 50% 100%);
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%; }
/* media queries for responsive view */
we added some Media queries for making our webpage fully responsive. because we have a fixed size of box that's why we have to add some break point at a certain sizes so in this way our contet can adjust automatically according to their percentages.!!
@media screen and (max-width:615px){
.box{
width: 406px;
height:300px; }
.left-triangle{
top:36%;
left:-11%; }
.eye-1{
border: 5px solid #0392EA; }
.eye-2{
border: 5px solid #0392EA; }
}
@media screen and (max-width:430px){
.box{
width: 270px;
height:200px; }
.eye-1{
left:21%;
border: 3px solid #0392EA; }
.eye-2{
top:33%;
right:21%;
border: 3px solid #0392EA;
border-radius:50%; }
.toungh{
top:51.5%; }
.index-file{
width: 100%; }
}
all © rights reserved :2018