BLACK DEVIL

煙草のパッケージをCSSで以下略。
今回はブラックデビル。オランダの煙草で、黒い巻紙でフィルター部分に甘いシロップが塗ってあるのが特徴です。副流煙の煙も少し甘め。（オリジナルはココナッツミルク風味で煙こそ甘いもののフィルターは甘くないので注意。現在カカオ・モカバニラ・ミントバニラが販売されており、これらはフィルターが甘いです）今回はオリジナルver.ですが色を変えたりしていろんなパッケージを作ってみてください。

＜h1＞ですが本来のデザインは左寄せで下から上、左から右へ読みますがその指定（writing-mode: sideways-lr;）はfirefoxのみの表示の為、あまりブラウザ依存のしないwriting-mode: vertical-lr;の指定にしています。

日本語フォントが重かったら外してください。
メニュー以外のリンクはこうなります
強調はこんな感じ。

おまけのテキストページ

http://yoursiteURL.jp/
管理人は???です。同業者のみリンクフリー。
画像は本家を参考に自作。ここから保存してください。
好きな画像に変えてもいいかもしれません。CSSで丸くしているので、どんな画像でも大丈夫です。

>> head
<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light&display=swap" rel="stylesheet"> <style type="text/css"> @font-face { font-family: 切絵字; src: url('https://cdn.leafscape.be/kirieji/kirieji_web.woff2') format("woff2"); } body,h1,h2,h3,h4,p{ margin: 0; padding: 0;} body{ font-family: 切絵字,arial,sans-serif; background:#222; color: #ccc; font-size: 14px; line-height: 1.6; word-wrap : break-word;} ::selection { background: #dc143c; color: #c0c0c0; } //Firefox ::-moz-selection { background: #dc143c; color: #c0c0c0; } a{ color: #dc143c; -webkit-tap-highlight-color: rgba(0,0,0,0); tap-highlight-color: rgba(0,0,0,0);} a:hover{ text-decoration: none; color: #dc143c;} a:active{ color:#dc143c;} .all{ max-width: 500px; margin: auto; padding: 25px 15px 0 15px; margin-top: 30px; } .top{ text-align: left;} h1,h2,h3,h4{ letter-spacing: 1px;} h1{ font-family: 'Shadows Into Light', cursive; color:#dc143c; font-weight: bold; position :absolute; top : 10px; left : 0px; font-size : 70px; font-weight : normal; line-height : 1em; padding : 3px; z-index : -1; margin : 0px; -ms-writing-mode: bt-lr; writing-mode: vertical-lr; } .text-combine { -webkit-text-combine: horizontal; -ms-text-combine-horizontal: all; text-combine-upright: all; } h2{ font-size: 150%; color: #dc143c; text-align: center; margin-bottom: 12px; text-align:right;Vertical-align:top;} h3 { font-family: 'Shadows Into Light', cursive; position: relative; padding: 5px 5px 5px 42px; background: #dc143c; font-size: 16px; color: white; margin-left: -33px; line-height: 1.3; z-index:-1; } h3:before { position: absolute; content: ''; left: -2px; top: -2px; border: none; border-left: solid 40px #222; border-bottom: solid 79px transparent; z-index:-2 } h4{color:#ccc; font-size:15px; text-align:right;Vertical-align:top;} .container { display: table-cell; vertical-align: middle; text-align: center; max-width: 480px; } ul { list-style: none; margin: 0; padding: 0; } li { display: inline-block; padding: 0 20px; } .container ul li a { text-decoration: none; color: #c0c0c0; -webkit-tap-highlight-color: rgba(0,0,0,0); tap-highlight-color: rgba(0,0,0,0); } .container ul li a:hover { text-decoration: none; color: #c0c0c0; } span { position: relative; display: block; cursor: pointer; } span:before, span:after { content: ''; position: absolute; width: 0%; height: 1px; top: 50%; margin-top: -0.5px; background: #fff; } span:before { left: -2.5px; } span:after { right: 2.5px; background: #fff; transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); } span:hover:before { background: #fff; width: 100%; transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); } span:hover:after { background: transparent; width: 100%; transition: 0s; } article{ margin-bottom: 26px; padding: 10px 10px; background:#222;} text-align: left; } .color{ color: #a44;} .cp_hr01 { border-top: 1px solid #dc143c; border-bottom: 1px solid #dc143c; } .cp_hr02 { border-top: 1px solid #c0c0c0; border-bottom: 1px solid #c0c0c0; } em{ font-weight: bold; color: #dc143c; padding: 2px ; margin-right: 4px; } img { border-radius: 50%; width: 80px; height: 80px; margin:20px; padding: 5px; border: 10px solid #c0c0c0; } textarea{ font-family: 'Shadows Into Light', 切絵字,arial,sans-serif; border:0; padding:10px; font-size:10px; color:#000; border:solid 1px #ccc; margin:0 0 20px; width:200px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5); -webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5); box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);} --></style>

>> html
<hr class="cp_hr01" /><section id="top"><div class="all top"><p class="vertical"><h1>BLACK DEVIL</h1></p><h2>ORIGINAL</h2><h4>20 BLACK FILTER CIGARETTES</h4><br><div align="right"><img src="##画像ＵＲＬ##" ></div> <div class="container"> <ul> <li><span><a href="#">>> Info</a></span></li> <li><span><a href="#">>> Log</a></span></li> <li><span><a href="#">>>Bkm</a></span></li> </ul> </div><hr class="cp_hr02" /> 喫煙はあなたにとって肺気腫を悪化させる危険性を高めます。喫煙は20歳になってから。</div><br><br> <div class="all"> <h3>Information</h3><article><p>煙草のパッケージをｃｓｓで以下略。<br>今回はブラックデビル。これはオリジナルver.ですが色を変えたりしていろんなパッケージを作ってみてください。<br> 基本的にトップを作るのが目的なので、コンテンツに関しては似たり寄ったりになってしまうことご了承ください。<s>(人はそれを手抜きという)</s><br> ＜h1＞ですが本来のデザインは左寄せで下から上、左から右へ読みますがその指定（writing-mode: sideways-lr;）はfirefoxのみの表示の為、あまりブラウザ依存のしないwriting-mode: vertical-lr;の指定にしています。<br><br> 日本語フォントが重かったら外してください。<br> メニュー以外のリンクは<a href="#">こうなります</a><br> <em>強調はこんな感じ。</em><br><br></p></article> <h3>Link</h3><article> <p>http://yoursiteURL.jp/<br> 管理人は???です。同業者のみリンクフリー。<br> </p> </article> <h3>Bkm</h3><article> <p><a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a></p></article> </article> <hr class="cp_hr01" /></div>