#dailycssimages Hamburger

In this example below you will see how to do a #dailycssimages Hamburger with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by BomberNastia, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright BomberNastia ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>#dailycssimages  Hamburger</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="box">
    <div class="upper-bread2"></div>
    <div class="bottom-bread1"></div>
    <div class="bottom-bread2">
        <div class="bottom-bread3"></div>
    </div>
    <div class="meat">
        <div class="meat1"></div>
        <div class="meat2"></div>
        <div class="cucumber"></div>
        <div class="cheese"></div>
        <div class="cheese1"></div>
        <div class="souse1"></div>
        <div class="souse2"></div>
    </div>
    <div class="upper-bread1"></div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/BomberNastia/dailycssimages-hamburger-ygWOxK */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.box {
    position: relative;
    height: 500px;
    width: 70%;
    margin: auto;
    margin-top: 8%;
    background: none;
}

@media screen and (max-width: 800px){
    .box {
        height: 350px;
    }
}
@media screen and (max-width: 500px){
    .box {
        height: 250px;
    }
}
.bottom-bread1, .bottom-bread2, .meat, .upper-bread1, .upper-bread2 {
    position: absolute;
    width: 100%;
    height: 45%;
    bottom: 12%;
    left: 0;
    background-color: #9c5315;
    border: 2px solid;
    border-color: transparent transparent black transparent;
    border-radius: 50%;
}
.bottom-bread2 {
    bottom: 25%;
    border: none;
    height: 35%;
    background-color: #f5deb6;
    box-shadow: 0 25px 0 #e9c782;
}
.bottom-bread3 {
    width: 100%;
    height: 20%;
    position: absolute;
    bottom: 50%;
    background: #f5deb6;
    border-radius: 40px 40px 0 0;
}
.meat {
    bottom: 28%;
    background-color: #6d402e;
    border: none;
}
.meat1 {
    position: absolute;
    width: 100%;
    height: 20%;
    background-color: #6d402e;
    bottom: 48%;
    left: 0;
    border-radius: 50px 50px 0 0;
}
.meat2 {
    position: absolute;
    width: 100%;
    height: 30%;
    background-color: #6d402e;
    bottom: 48%;
    left: 0;
    border-radius: 50px 50px 0 0;
}
.cucumber, .cheese, .cheese1, .souse1, .souse2 {
    position: absolute;
    bottom: 10%;
    left: 25%;
    width: 50%;
    height: 30%;
    background: #6e5f1a;
    border-radius: 50%;
    border: 25px solid;
    border-color: transparent transparent #6e5f1a transparent;
}
.cheese {
    bottom: 15%;
    width: 30%;
    left: 15%;
    border: 15px solid;
    background: yellow;
    border-color: transparent transparent yellow transparent;
}
.cheese1 {
    bottom: 20%;
    width: 40%;
    left: 50%;
    border: 15px solid;
    background: yellow;
    border-color: transparent transparent yellow transparent;
    border-radius: 50%;
}
.souse1 {
    bottom: 27%;
    width: 30%;
    height: 35%;
    left: 3%;
    border: 15px solid;
    background: red;
    border-color: transparent transparent red transparent;
}
.souse2 {
    bottom: 27%;
    width: 45%;
    left: 54%;
    height: 40%;
    border: 15px solid;
    background: red;
    border-color: transparent transparent red transparent;
}
.upper-bread1 {
    bottom: 42%;
    border: none;
    background: #eeb669;
}
.upper-bread2 {
    bottom: 35%;
    height: 70%;
    border: none;
    background: #eeb669;
}

Comments