CSS Coffee cup with Coffee!

Developer
Nazmul Hasan Rupok
Size
2,044 Kb
Views
50,600
  1. CSS Coffee cup with Coffee! Previews
  2. CSS Coffee cup with Coffee! HTML Codes
  3. CSS Coffee cup with Coffee! CSS Codes

How do I make an css coffee cup with coffee!?

What is a css coffee cup with coffee!? How do you make a css coffee cup with coffee!? This script and codes were developed by Nazmul Hasan Rupok on 05 November 2022, Saturday.

CSS Coffee cup with Coffee! Previews
IQ Test

CSS Coffee cup with Coffee! - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Coffee cup with Coffee!</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='cup'> <div class='filled'></div>
</div>
<h1>Would you like some coffee at <a href="http://www.codetic.net" target="_blank">Codetic</a>?</h1>
</body>
</html>

CSS Coffee cup with Coffee! - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300);
* { box-sizing: border-box; -webkit-font-smoothing: antialiased;
}
html, body { width: 100%; height: 100%; margin: 0; padding: 0;
}
body { background: #ecf0f1; font-size: 1em;
}
h1 { font-family: "Yanone Kaffeesatz", Helvetica, sans-serif; text-align: center; font-size: 3.5em; margin: -1.5em auto; color: #262626; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8), 0 -1px 0 white;
}
.cup { /*position*/ margin: 10em auto; /*Style*/ width: 11.09017em; height: 11.09017em; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em;
}
.cup:before, .cup:after { content: ''; display: block; float: left; box-shadow: 0 0 0 1em #262626; position: absolute;
}
.cup:before { height: 6.8541em; width: 1.61803em; margin: 1.62232em 12.16886em; border-top-right-radius: 1em; border-bottom-right-radius: 1em;
}
.cup:after { height: 1em; width: 16.94427em; margin: 12.26884em -2.61803em; box-shadow: inset 0 1em 0 0.61803em #262626; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em;
}
.cup .filled { display: block; width: 101%; height: 100%; float: left; border-bottom-left-radius: 0.90909em; border-bottom-right-radius: 0.90909em; box-shadow: inset 0 0 0 0.23607em #ecf0f1, 0 0 0 1em #262626; margin-left: -1px; margin-right: 3px; background-image: -webkit-linear-gradient(top, #ecf0f1 25%, #643001 25%, #643001 50%, #532700 50%, #532700 75%, #3a1c00 75%); background-image: linear-gradient(to bottom, #ecf0f1 25%, #643001 25%, #643001 50%, #532700 50%, #532700 75%, #3a1c00 75%);
}
CSS Coffee cup with Coffee! - Script Codes
CSS Coffee cup with Coffee! - Script Codes
Home Page Home
Developer Nazmul Hasan Rupok
Username rupok
Uploaded November 05, 2022
Rating 3
Size 2,044 Kb
Views 50,600
Do you need developer help for CSS Coffee cup with 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!

Nazmul Hasan Rupok (rupok) Script Codes
Name
JQuery Smiley Slider
3D Pagination
Pull Menu for Mobile
CSS Lavalamp menu by
Responsive Pricing Table with Neat Hover States
CSS only Testimonial Slider
HEX Color Clock
Hex Pattern in HTML5 Canvas
Slide to unlock
Peity Chart
Create amazing blog posts 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!