Skip to content

Instantly share code, notes, and snippets.

@NotPerr

NotPerr/coffee-cup.markdown

Created October 25, 2021 15:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save NotPerr/9f19b9cf320642f1d2016b3e5399852c to your computer and use it in GitHub Desktop.
Save NotPerr/9f19b9cf320642f1d2016b3e5399852c to your computer and use it in GitHub Desktop.
Download ZIP
coffee cup
Raw
index.html
<div class="picture">
<div class="handle">
<div class="handle2"></div>
</div>
<div class="cup">
<div class="coffee1">濃縮咖啡</div>
</div>
<div class="plate"></div>
<div class="plate2"></div>
<div class="name">濃縮咖啡</div>
</div> <!-- 濃縮咖啡 -->
<div class="picture">
<div class="handle">
<div class="handle2"></div>
</div>
<div class="cup">
<div class="puff">奶泡</div>
<div class="coffee1">濃縮咖啡</div>
</div>
<div class="plate"></div>
<div class="plate2"></div>
<div class="name">瑪琪雅朵</div>
</div> <!--瑪琪雅朵 -->
<div class="picture">
<div class="handle">
<div class="handle2"></div>
</div>
<div class="cup">
<div class="water">水</div>
<div class="coffee1">濃縮咖啡</div>
</div>
<div class="plate"></div>
<div class="plate2"></div>
<div class="name">美式咖啡</div>
</div> <!--美式咖啡 -->
<div class="picture">
<div class="handle">
<div class="handle2"></div>
</div>
<div class="cup">
<div class="milk">牛奶</div>
<div class="coffee1">濃縮咖啡</div>
</div>
<div class="plate"></div>
<div class="plate2"></div>
<div class="name">白咖啡</div>
</div> <!-- 白咖啡 -->
<div class="picture">
<div class="handle">
<div class="handle2"></div>
</div>
<div class="cup">
<div class="puff1">奶泡</div>
<div class="milk">牛奶</div>
<div class="coffee1">濃縮咖啡</div>
</div>
<div class="plate"></div>
<div class="plate2"></div>
<div class="name">拿鐵</div>
</div> <!-- 拿鐵 -->
<div class="picture">
<div class="handle">
<div class="handle2"></div>
</div>
<div class="cup">
<div class="cream">鮮奶油</div>
<div class="coffee1">濃縮咖啡</div>
</div>
<div class="plate"></div>
<div class="plate2"></div>
<div class="name">康寶藍</div>
</div> <!--康寶藍 -->
<div class="picture">
<div class="handle">
<div class="handle2"></div>
</div>
<div class="cup">
<div class="puff1">奶泡</div>
<div class="milk">半牛奶半奶油</div>
<div class="coffee1">濃縮咖啡</div>
</div>
<div class="plate"></div>
<div class="plate2"></div>
<div class="name">布雷衛/半拿鐵</div>
</div> <!--布雷衛/半拿鐵 -->
<div class="picture">
<div class="handle">
<div class="handle2"></div>
</div>
<div class="cup">
<div class="puff2">奶泡</div>
<div class="milk1">牛奶</div>
<div class="coffee1">濃縮咖啡</div>
</div>
<div class="plate"></div>
<div class="plate2"></div>
<div class="name">卡布奇諾</div>
</div> <!--卡布奇諾 -->
<div class="picture">
<div class="handle">
<div class="handle2"></div>
</div>
<div class="cup">
<div class="cream1">鮮奶油</div>
<div class="milk2">牛奶</div>
<div class="coco">巧克力糖漿</div>
<div class="coffee1">濃縮咖啡</div>
</div>
<div class="plate"></div>
<div class="plate2"></div>
<div class="name">摩卡</div>
</div> <!--摩卡 -->
<div class="picture">
<div class="handle">
<div class="handle2"></div>
</div>
<div class="cup">
<div class="caramel">焦糖</div>
<div class="milkPlusSugar">奶泡＋糖漿</div>
<div class="coffee1">濃縮咖啡</div>
</div>
<div class="plate"></div>
<div class="plate2"></div>
<div class="name">焦糖瑪奇朵</div>
</div> <!--焦糖瑪奇朵 -->
<div class="picture">
<div class="handle">
<div class="handle2"></div>
</div>
<div class="cup">
<div class="cream2">鮮奶油</div>
<div class="whis">愛爾蘭威士忌</div>
<div class="coffee1">濃縮咖啡</div>
</div>
<div class="plate"></div>
<div class="plate2"></div>
<div class="name">愛爾蘭咖啡</div>
</div> <!--愛爾蘭咖啡 -->
<div class="picture">
<div class="handle">
<div class="handle2"></div>
</div>
<div class="cup">
<div class="cream2">鮮奶油</div>
<div class="coco">巧克力糖漿</div>
<div class="coffee1">濃縮咖啡</div>
</div>
<div class="plate"></div>
<div class="plate2"></div>
<div class="name">維也納咖啡</div>
</div> <!--維也納咖啡 -->
Raw
style.css
.picture {
width: 300px;
height: 200px;
display: inline-block;
margin: 1em;
}
.cup {
width: 200px;
height: 150px;
background-color: #b1aaa5;
border-radius: 0 0 30px 30px;
margin-left: 30px;
position: absolute;
}
.handle {
width: 100px;
height: 100px;
background-color: #000;
border-radius: 0 30px 30px 0;
position: absolute;
margin-left: 180px;
}
.handle2 {
width: 80px;
height: 70px;
background-color: #FFF;
border-radius: 0 20px 20px 0;
margin-top: 15px;
position: absolute;
}
.plate {
position: absolute;
width: 250px;
height: 10px;
background-color: #b1aaa5;
margin-top: 150px;
margin-left: 10px;
border-radius: 0 0 10px 10px;
}
.plate2 {
position: absolute;
width: 200px;
height: 10px;
background-color: #b1aaa5;
margin-top: 158px;
margin-left: 30px;
border-radius: 0 0 5px 5px;
}
.name {
position: absolute;
width: 200px;
margin-left: 30px;
margin-top: 168px;
text-align: center;
font-weight: bold;
}
.coffee1 {
position: absolute;
background-color: #6e4a30;
width: 180px;
height: 30px;
border-radius: 0 0 30px 30px;
color: #FFF;
text-align: center;
margin-left: 10px;
margin-top: 115px;
}
.puff {
position: absolute;
text-align: center;
background-color: #fff;
width: 180px;
height: 30px;
margin-left: 10px;
margin-top: 85px;
font-weight: bold;
}
.puff1 {
position: absolute;
text-align: center;
background-color: #fff;
width: 180px;
height: 30px;
margin-left: 10px;
margin-top: 30px;
font-weight: bold;
}
.puff2 {
position: absolute;
text-align: center;
background-color: #fff;
width: 180px;
height: 60px;
margin-left: 10px;
margin-top: 25px;
font-weight: bold;
}
.water {
position: absolute;
text-align: center;
background-color: #4287f5;
width: 180px;
height: 110px;
margin-left: 10px;
margin-top: 5px;
color: #fff;
}
.milk {
position: absolute;
text-align: center;
background-color: #fff8d1;
width: 180px;
height: 60px;
margin-left: 10px;
margin-top: 60px;
font-weight: bold;
}
.milk1 {
position: absolute;
text-align: center;
width: 180px;
height: 30px;
margin-left: 10px;
margin-top: 85px;
font-weight: bold;
background-color: #fff8d1;
}
.milk2 {
position: absolute;
text-align: center;
width: 180px;
height: 30px;
margin-left: 10px;
margin-top: 55px;
font-weight: bold;
background-color: #fff8d1;
}
.cream {
position: absolute;
text-align: center;
background-color: #f9a302;
width: 180px;
height: 30px;
margin-left: 10px;
margin-top: 85px;
font-weight: bold;
}
.cream1 {
position: absolute;
text-align: center;
background-color: #f9a302;
width: 180px;
height: 30px;
margin-left: 10px;
margin-top: 25px;
font-weight: bold;
}
.cream2 {
position: absolute;
text-align: center;
background-color: #f9a302;
width: 180px;
height: 30px;
margin-left: 10px;
margin-top: 55px;
font-weight: bold;
}
.coco {
position: absolute;
text-align: center;
background-color: #261c0b;
width: 180px;
height: 30px;
margin-left: 10px;
margin-top: 85px;
font-weight: bold;
color: #fff;
}
.milkPlusSugar {
position: absolute;
text-align: center;
background-color: #ffbfff;
width: 180px;
height: 90px;
margin-left: 10px;
margin-top: 30px;
font-weight: bold;
}
.caramel {
position: absolute;
text-align: center;
background-color: #c68400;
width: 180px;
height: 30px;
margin-left: 10px;
margin-top: 5px;
font-weight: bold;
}
.whis {
position: absolute;
text-align: center;
width: 180px;
height: 30px;
margin-left: 10px;
margin-top: 85px;
font-weight: bold;
background-color: #c81cdb;
color: #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment