#codevember -14 Coffee
How do I make an #codevember -14 coffee?
CSS coffee cup. Pick a coffee or water! :) . What is a #codevember -14 coffee? How do you make a #codevember -14 coffee? This script and codes were developed by Sasha on 12 June 2022, Sunday.
#codevember -14 Coffee - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>#codevember -14 Coffee</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="saucer"> <div class="inner"> </div> <div class="cup"> <div class="coffee"> <div class="shine"> </div> <div class="shine left"> </div> <div class="foam"> </div> </div> <div class="holder"></div> </div> </div> <div class="choices"> <button id="latte"> Latte </button> <button id="amuricano"> Americano </button> <button id="cappu"> Cappucino </button> <button id="water"> Water </button> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
#codevember -14 Coffee - Script Codes CSS Codes
body { background-color: #FB9F89;
}
.container { position: absolute; top: 30px; left: 200px;
}
.saucer { position: absolute; top: 50px; left: 40px; width: 200px; height: 200px; border-radius: 100%; background-color: #FFF; box-shadow: 5px 1px 30px #948296; border: 5px solid #FFF;
}
.cup { position: absolute; top: 34px; left: 45px; width: 100px; height: 100px; border-radius: 100%; border: 10px solid #FFF; box-shadow: 0 10px 30px #948296;
}
.inner { position: absolute; top: 50px; left: 45px; width: 100px; height: 80px; border-radius: 100%; box-shadow: -10px 10px 60px #948296;
}
.holder { position: absolute; top: 30px; left: -30px; width: 30px; height: 30px; background-color: #FFF; border-radius: 30%;
}
.coffee { width: 100px; height: 100px; border-radius: 100%;
}
.americano { width: 100px; height: 100px; border-radius: 100%; background-color: #685044; box-shadow: inset 0 0 10px #000;
}
.latte { background-color: #C3B299; width: 100px; height: 100px; border-radius: 100%;
}
.cappu { background-color: #FC9E4F;
}
.water { background-color: #47A8BD; opacity: 0.5;
}
.shine { width: 30px; height: 10px; background-color: #FFF; opacity: 0.3; border-radius: 100%;; position: absolute; top: 10px; left: 53px; transform: rotate(30deg);
}
.foam { position: absolute; top: 3px; left: 3px; background-color: #FFF; width: 90px; height: 90px; border-radius: 100%; opacity: 0.7; filter: blur(10px); visibility: hidden;
}
button { width: 110px; height: 25px; border: none; background-color: #FFF; border-radius: 10px; font-size: 12px; outline: none; cursor: pointer;
}
button:hover{ opacity: 0.9;
}
.choices { margin-left: -70px;
}
#codevember -14 Coffee - Script Codes JS Codes
$(document).ready(function(){ $('.coffee').addClass('americano');
})
$('#amuricano').on('click', function(){ $('.foam').css('visibility', 'hidden'); $('.coffee').removeClass('water americano latte cappu foam'); $('.coffee').addClass('americano');
});
$('#latte').on('click', function(){ $('.foam').css('visibility', 'hidden'); $('.coffee').removeClass('water americano cappu latte'); $('.coffee').addClass('latte');
});
$('#cappu').on('click', function(){ $('.coffee').removeClass('water americano latte').addClass('cappu') $('.foam').css('visibility', 'visible');
});
$('#water').on('click', function(){ $('.coffee').removeClass('water americano latte cappi'); $('.foam').css('visibility', 'hidden'); $('.coffee').addClass('water');
});
Developer | Sasha |
Username | sashatran |
Uploaded | June 12, 2022 |
Rating | 4.5 |
Size | 2,385 Kb |
Views | 133,584 |
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!
Name | Size |
CSS Girl | 3,535 Kb |
Pages of 2017 | 3,411 Kb |
VueJS Todo List | 2,158 Kb |
Animated CSS Tooltip | 2,818 Kb |
Flexgrow illustration | 3,503 Kb |
Button with Hover Effect | 2,698 Kb |
Input UI Animation | 3,234 Kb |
Subscribe Button | 2,991 Kb |
CSS Shop | 3,473 Kb |
Google Inspired Floating Action Button | 2,967 Kb |
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!
Name | Username | Size |
JQuery exercise | Brian-baum | 3,780 Kb |
Out of the blue | Giaco | 2,537 Kb |
Drill-down Map | Good886 | 8,484 Kb |
Electric worm | Jeffibacache | 2,377 Kb |
A cube | KyleDavidE | 18,627 Kb |
Pictos font library from CodePen | Jstam | 3,790 Kb |
Board Site | IndianaLuft | 10,542 Kb |
Image Hover | Johnheiner | 3,409 Kb |
Hello People | Danburrows | 2,365 Kb |
Bootstrap Responsive Menu Drawer | JesseGlacken | 3,777 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!