Untitled

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="author" content="Simon Willover">
    <title>Bottle Overlay</title>
    <style>
*{
  padding:0px;
  border:0px;
  box-sizing:border-box;
  background-color:transparent;
  border:none;
}
div{
  display:block;
  font-family:'Arial',Sans-Serif;
}
#right,#left{
  position:absolute;
  height:100%;
  padding-top:12%;
  padding-left:12%;
}
#left{
  background-color:#111111;
  width:60%;
}
#right{
  background-color:white;
  left:60%;
  width:40%;
}
#right div,#left div{
  left:0%;
  width:75%;
  padding:0px;
  margin-top:10px;
}
.a{
  position:absolute;
}
.r{
  position:relative;
}
.small-round-icon{
  display:inline-block;
  width:30px !important;
  height:30px;
  font-size:14px;
  padding-top:6px !important;
  border-radius:15px;
  box-shadow:1px 0px 2px rgba(200,200,200,0.6),0px -1px 2px rgba(200,200,200,0.6),0px 2px 2px rgba(200,200,200,0.6),0px 1px 2px rgba(100,100,100,0.6);;
  text-align:center;
}
.header{
  font-size:28px;
  font-weight:bold;
}
.yellow{
  color:#da2;
}
.white{
  color:white;
}
.white-back{
  background-color:white;
}
.yellow-border{
  border:3px solid #da2;
}
.bold{
  font-weight:bold;
}
.list-colon{
  font-weight:bold;
  padding-left:5px;
  padding-right:5px;
}
.auto-heighy{
  height:auto;
}
.inline-b{
  display:inline-block;
  width:30% !important;
  padding:10px !important;
}
.under-border{
  padding-bottom:8px !important;
  border-bottom:3px solid black;
}
.no-wrap{
  height:40px;
  width:220px !important;
}
#bottle{
  position:absolute;
  top:30%;
  left:50%;
  color:red;
}
#bottle-shadow{
  position:absolute;
  top:32%;
  left:56%;
  color:red;
}
.shadow{
  filter:grayscale(100%) blur(2px);
  opacity:35%;
}
    </style>
  </head>
  <body>

<!--
<div class="a"><div class="r">

-->
<div id="left" class="a">
  <div class="yellow header">THE SPECIAL ONE</div>
  <div class="white auto-height">Jvnce cjvnrufnejd ejvnrf edrnvjr fne dejvnrjf ejd ejvrnjvr dnecjnrvjr fne djrvnjrf 3jdwskqjss qjsqmskqmskf jrf ejv tjvemdlq swhv rdw curv ejc ejve j  ghecnem</div>
  <div class="auto-height">
    <div class="white-back inline-b bold">800ML</div>
    <div class="white-back inline-b bold">70% AV</div>
    <div class="white-back inline-b bold">TASTY!</div>
  </div>
  <div class="auto-height yellow-border white">Buy it now</div>
</div>
<div id="right" class="a">
  <div class="header">Ratings</div>
  <div>
    <div class="no-wrap">
      <div class="small-round-icon">A</div>
      <div class="small-round-icon">B</div>
      <div class="small-round-icon">C</div>
      <div class="small-round-icon">D</div>
      <div class="small-round-icon">E</div>
    </div>
    <div class="no-wrap">
      <div class="small-round-icon">F</div>
      <div class="small-round-icon">G</div>
      <div class="small-round-icon">H</div>
      <div class="small-round-icon">I</div>
      <div class="small-round-icon">J</div>
    </div>
    <div class="no-wrap">
      <div class="small-round-icon">K</div>
      <div class="small-round-icon">L</div>
      <div class="small-round-icon">M</div>
      <div class="small-round-icon">O</div>
      <div class="small-round-icon">P</div>
    </div>
  </div>
  <div class="header under-border">Details</div>
</div>
<div id="bottle">
  <img src="/bottle.png" alt="The bottle">
</div>
<div id="bottle-shadow">
  <img src="/bottle.png" class="shadow" alt="shadow of The bottle">
</div>


  </body>
</html>