DUO - Ikkaku

-HIGH COOLING-

煙草のパッケージをhtmlとcssで再現してみよう第五弾。
今回はバージニア・エス・デュオです。パッケージが細身で片手で持てるので、ネイル映えするパッケージだと思います。(細身感表現できているとよいのですが…)
メニューリンク以外のリンクはこうなります。

▲

-SOURCE&CODE-

背景画像はパブリックドメインのものを加工しているのでこちらから保存してください。
DUOという名の通りバージニアは２種類のパッケージがあります。２種類用意しておりますのでどちらかを選んでどうぞ。pink green
ヘッダー部分のドットの画像はこちら
自動改行は「しない」で作成しています。

head

@media screen and (min-width:401px){
.wrp{
width:300px;
margin:0 auto;}
}

@media screen and (max-width:400px){
.wrp{
width:80%;
margin:0 auto;}
}

.box{
max-width:350px;
margin:0 auto;
overflow:hidden;}

.box:before,.box:after{
content: "";
display:table;}

.box:after{clear:both;}

.menu{
text-transform:uppercase;
letter-spacing:2px;
line-height:180%;
margin:50px 10px 0;
overflow:hidden;}

.menu a{
color:#fff;
padding:1px 5px;
background:rgba(0,0,0,.5);
border:none;}

.menu a:hover{
color:#000;
background:none;
border:none;}

.top{
margin:50px 20px 20px;
padding:10px;
background:rgba(255,255,255,0.8);
border: 1px solid #1a2930;}

.con{
  margin: 0;
  padding: 15px;
text-align:left;
  position: relative;
 
}

.con-title{
  position: absolute;
  top: -0.5em;
  left: -1em;
  font-size: 1.5em;
padding: 10px 15px;

}

.title-box1 p{
  margin: 0;
  padding: 0;
}

header{
background:#222222;
margin:0;
padding:20px;}

strong{
background:#c5c1c0;
font-weight:normal;
padding:0 2px;
margin:0 2px;}

h1{
color:#000;
font-family: 'Marcellus', serif;
font-size:42px;
letter-spacing:5px;
text-align:center;
}

h2{
font-family: 'Marcellus', serif;
color: #000;
	font-size: 14px;
margin:10px 40px;
	line-height: 10px;
	padding: 5px;
	}

h3{
font-weight:bold;
font-size:14px;
padding:2px 5px;
background-color:#1a2930;
color:#fff;
}

a{
color:#1a2930;
text-decoration:none;
padding:0 3px;
border-bottom:solid 1px #c5c1c0;}

a:hover{border-bottom:solid 1px #8f9239;}

textarea{
font-family: 'Sawarabi Mincho', sans-serif;
background:rgba(255,255,255,.3);
color:#222;
width:98%;
padding:1%;
display;block;
height:40px;
border:none;
border-radius:3px;
letter-spacing:1px;
line-height:1.5;
}

.str{ 
 text-align      : center;         /* 文章を真ん中寄せ     */
letter-spacing  : .1em;         /* 文字間隔         */
  line-height     : 1.3;          /* 行間隔（1行高さ）*/
  -ms-writing-mode: tb-rl;        /* 縦書き（IE用）   */
  writing-mode    : vertical-rl;  /* 縦書き           */
}
 /* --- 段落の先頭は1文字下げ ----------------------- */
.str p {
  text-indent     : 1em;
}
 /* --- 見出しは文字を大きく中央に表示 -------------- */
.str .midashi {
  text-indent     : 0;
  font-size       : 120%;
  text-align      : center;
  font-weight     : bold;
}
 /* --- 後書きは文字を下詰めに表示 ------------------ */
.str .ato {
  text-align      : right;
}
 /* --- リンクのアンダーバーは左に付ける ------------ */
.str a {
  text-decoration : overline;   /* 縦書きは左側となる */
}
</style>

html

▲