Coffee

Developer
Rahul Kumar
Size
2,681 Kb
Views
20,240
  1. Coffee Previews
  2. Coffee HTML Codes
  3. Coffee CSS Codes
  4. Coffee JS Codes

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
IQ Test

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
You
Shake it
By Rahul
Smile
-
Hmmm...
For you
Hey
A Pen by Rahul Kumar
HeartIt
Create amazing captions 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!