Coffee

Developer
Size
2,681 Kb
Views
20,240

How do I make an coffee?

What is a coffee? How do you make a coffee? This script and codes were developed by Rahul Kumar on 14 October 2022, Friday.

Coffee Previews

Coffee - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Coffee</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Happy Valentines day Codepen! -->
<div class="bgoverlay"> <div class="container"> <span class="ico"> <span class="ico2"></span> <span class="title">Click Me</span> </span> <div class="endtext"> <span class="close" title="Restart"><i class="fa fa-times"></i></span>      <h1>You look Pretty</h1> <h2>Can we go for coffee?</h2> <h3>~Rahul</h3> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Coffee - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Pacifico);
body{ background: url(https://subtlepatterns.com/patterns/noise_lines.png); font-family: 'Pacifico', cursive; overflow: hidden; color: #fff;
}
.bgoverlay{ background: rgb(103,58,183); background: rgba(103,58,183,0.7); position: absolute; top:0; left:0; right:0; bottom:0;
}
.container{ position: relative; margin: 120px auto 0 auto; width: 320px;
}
.ico{ display: block; width: 320px; height: 320px;
}
.open .ico{ -webkit-animation: open 4s; animation: open 4s; -webkit-transform: scale(10); transform: scale(10);
}
.ico .title{ position: absolute; top: 50%; left: 50%; margin-left: -95px; margin-top: -73px; z-index: 4; font-size: 50px; font-family: 'Pacifico', cursive; color: #fff; cursor: pointer; text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}
.open .ico .title{ opacity: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; top:-100px;
}
.ico:before,
.ico:after,
.ico2:before,
.ico2:after{ position: absolute; top:0; left:0;
}
.ico:before,
.ico:after,
.ico2:before,
.ico2:after{ display: block; font-size: 20em; color: #ff4081; content: "\f004"; font-family: FontAwesome; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.ico2:before,
.ico2:after{ color: #e91e63;
}
.ico:before{ z-index: 3;
}
.ico:after{ -webkit-animation: explode 4s infinite; animation: explode 4s infinite;
}
.ico2:before{ -webkit-animation: explodeSmall 3s infinite; animation: explodeSmall 3s infinite;
}
.ico2:after{ -webkit-animation: explodeSmall 2s infinite; animation: explodeSmall 2s infinite;
}
.endtext{ opacity:0; position: absolute; top:-100px; width:100%;
}
.open .endtext{ top:0; opacity: 1; -webkit-animation: show 5s; animation: show 5s;
}
.endtext .close{ position: absolute; top: 0; right: 0; cursor: pointer; text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}
.endtext h1,
.endtext h2,
.endtext h3{ text-shadow: 2px 4px 3px rgba(0,0,0,0.3); text-align: center; font-weight: normal;
}
.endtext h1{ font-size: 50px;
}
.endtext h2{ font-size: 30px;
}
.endtext h3{ font-size: 20px;
}
@-webkit-keyframes explode { from { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } to { -webkit-transform: scale(1.6); transform: scale(1.6); opacity: 0; }
}
@keyframes explode { from { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } to { -webkit-transform: scale(1.6); transform: scale(1.6); opacity: 0; }
}
@-webkit-keyframes explodeSmall { from { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } to { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0; }
}
@keyframes explodeSmall { from { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } to { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0; }
}
@-webkit-keyframes open { from { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(10); transform: scale(10); }
}
@keyframes open { from { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(10); transform: scale(10); }
}
@-webkit-keyframes show { from { opacity: 0; top: -100px; } to { opacity: 1; top:0; }
}
@keyframes show { from { opacity: 0; top: -100px; } to { opacity: 1; top:0; }
}

Coffee - Script Codes JS Codes

$(document).ready(function(){ $('.title').click(function(){ $('.container').addClass('open'); }); $('.close').click(function(){ $('.container').removeClass('open'); });
});
Coffee - Script Codes
Coffee - Script Codes
Home Page Home
Developer Rahul Kumar
Username rk007
Uploaded October 14, 2022
Rating 3
Size 2,681 Kb
Views 20,240
Do you need developer help for Coffee?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rahul Kumar (rk007) Script Codes
Name
A Pen by Rahul Kumar
HeartIt
Chat
By Rahul
For you
-
Hey
Hmmm...
Smile
Shake it
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!