How to make a water bottle using the HTML code?
How to make a water bottle using the HTML code?
Here is the Question How to make a water bottle using the HTML code ,Now I'm sharing How to water bottle using HTML and CSS code So,that you can got your idea about How to make water bottle using HTML code .in this three water bottle source code is here
<html>
<style>
body
{
margin:10% 10%;
}
li.water-bottle
{
float:left;
margin-right:15px;
}
ul
{
list-style-type:none;
}
.bottle
{
background: #ddd;
width:100px;
border-radius:30px 30px 6px 6px;
height:200px;
padding:6px;
box-shadow: 3px 3px 3px #efefef;
margin-bottom:4px;
}
.bottle:hover
{
background: #eee;
box-shadow: 2px 2px 2px #efefef;
}
.cap
{
background: #ddd;
margin:0 25px;
width:60px;
border-radius:8px 8px 10px 12px;
height:35px;
border-top:1px solid #ddd;
border-bottom:2px dotted #efefef;
}
.cap-top
{
background:#ededed;
height:6px;
border-radius:10px 10px 0 0;
}
.cap-seal
{
margin-top:20px;
background:#ccc;
height:6px;
border-radius: 0 0 10px 10px;
}
.water-full
{
background: lightblue ;
width:100px;
margin-top:10px;
height:190px;
z-index:1;
border-radius:28px 28px 10px 10px;
}
.water-medium
{
background: lightblue;
width:100px;
height:120px;
margin-top:80px;
z-index:1;
border-radius:28px 28px 10px 10px;
}
.water-low
{
background: lightblue ;
width:100px;
height:75px;
margin-top:125px;
z-index:1;
border-radius:28px 28px 10px 10px;
}
.water-empty
{
background: lightblue ;
width:100px;
height:15px;
margin-top:185px;
z-index:1;
border-radius:28px 28px 10px 10px;
}
</style>
<body>
<ul>
<li class="water-bottle">
<div class="cap">
<div class="cap-top">
</div>
<div class="cap-seal">
</div>
</div>
<div class="bottle">
<div class="water-empty"> </div>
</div>
</li>
<li class="water-bottle">
<div class="cap">
<div class="cap-top">
</div>
<div class="cap-seal">
</div>
</div>
<div class="bottle">
<div class="water-low"> </div>
</div>
</li>
<li class="water-bottle">
<div class="cap">
<div class="cap-top">
</div>
<div class="cap-seal">
</div>
</div>
<div class="bottle">
<div class="water-medium"> </div>
</div>
</li>
<li class="water-bottle">
<div class="cap">
<div class="cap-top">
</div>
<div class="cap-seal">
</div>
</div>
<div class="bottle">
<div class="water-full"> </div>
</div>
</li>
</ul>
</body>
</html>
Comments
Post a Comment