THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Create Coffee Mug in CSS using Only One Div 🤯 | Advanced CSS

 

Create Coffee Mug in CSS using Only One Div 🤯 | Advanced CSS Challenge #2| Free Source Code




After working on CSS/CSS3 for so long, It's time to move our knowledge to more advanced part. Where we will see How to use the Logics and how to use CSS3 properties in our applications. We will go through each property line by line and understand the meaning and the output of it in a practically manner.

First, I highly recommend you to watch the video and then look for the code and try to do it by yourself. And use the code for reference.






Here is the complete code of my HTML file( Complete UI)



<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Thapa Technical Coffee Mug</title>

    <!-- OUR CSS STYLESHEET -->
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />
  </head>

  <body>
    <div class="coffe-mug"></div>
  </body>
</html>






Here is the complete code of my CSS file( Complete UI)


* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}

/* background-color: #3f2616; */
/* #442918 */

body {
  background: #9ffce0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -50px;
  margin-left: -50px;
}

.coffe-mug {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: #3f2616;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 10px #442918, 0 0 0 25px #3c2415, 0 0 0 44px #fe9407,
    0 0 0 65px #feaa3a, 0 120px 0 -20px #442918, 100px 70px 0 -25px #442918,
    80px 140px 0 -10px #442918, 0 210px 0 -55px #442918,
    20px 250px 0 -65px #442918;
}

.coffe-mug::before {
  content: "";
  position: absolute;
  width: 60px;
  height: 75px;
  background-color: #f79c25;
  top: -85px;
  right: -75px;
  transform: rotate(45deg);
}