Coffee

Developer
Jon Ambas
Size
2,651 Kb
Views
16,192
  1. Coffee Previews
  2. Coffee HTML Codes
  3. Coffee CSS Codes

How do I make an coffee?

What is a coffee? How do you make a coffee? This script and codes were developed by Jon Ambas on 19 October 2022, Wednesday.

Coffee Previews
IQ Test

Coffee - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Coffee</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="coffee"> <div id="handle"></div> <div id="cup"></div> <div id="liquid"></div> <div id="shadow"></div>
</div>
</body>
</html>

Coffee - Script Codes CSS Codes

/* try changing this */
body { background-color: #e74b3d; padding-top: 50px;
}
#coffee { width: 300px; margin: 0 auto; position: relative;
}
#cup { position: relative; width: 300px; height: 300px; border-radius: 150px; background: #fff; border: 1px solid #ddd;
}
#cup:after { display: block; position: relative; background: #ddd; content: ""; width: 276px; height: 276px; border-radius: 138px; top: 12px; left: 12px; border: 1px solid #d9d9d9; box-shadow: inset 20px 0px 10px rgba(0, 0, 0, 0.1);
}
#handle { position: absolute; background: #fff; top: 120px; left: -90px; width: 120px; height: 60px; border-radius: 16px/30px;
}
#handle:before { content: ""; display: block; position: relative; background: #fff; top: -3px; left: 6px; width: 120px; height: 40px; border-radius: 16px/30px; z-index: -1; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg);
}
#handle:after { content: ""; display: block; position: relative; background: #fff; top: -17px; left: 6px; width: 120px; height: 40px; border-radius: 16px/30px; z-index: -1; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg);
}
#liquid { position: absolute; width: 240px; height: 240px; border-radius: 120px; top: 30px; left: 30px; background: #d15304; overflow: hidden;
}
#liquid:before { content: ""; display: block; position: relative; background: #fb7522; width: 264px; height: 264px; border-radius: 132px; top: -10px; left: 50px;
}
#shadow { position: absolute; top: 0; left: 150px; background-color: #e53a2b; height: 302px; width: 300px; border-radius: 0 150px 150px 0; z-index: -10;
}
Coffee - Script Codes
Coffee - Script Codes
Home Page Home
Developer Jon Ambas
Username jonambas
Uploaded October 19, 2022
Rating 4
Size 2,651 Kb
Views 16,192
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!

Jon Ambas (jonambas) Script Codes
Name
Polygons with clip-path
Bee Mine
Playing with SVGs
Cubes
A Pen by Jon Ambas
Drip Drop
Happy New Years
Sidebar Thing
Looping through a sprite sheet
Cell Focusing
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!