赤マル - Ikkaku

※喫煙はあなたにとって肺がんの原因のひとつとなり肺気腫を悪化させる危険性を高めます。
※未成年の喫煙は法律で禁止されています。などなど。

△

煙草のパッケージをイメージしたアレ。第一弾はみんな大好き赤マル。かわいいデザインですよね。
完全に趣味のやつですが、なかなかいい感じでは無いでしょうか。
配色を変えるとメンソールにできますね。
タイトルはマールボロフォント変換で制作しました。
自動改行は「しない」で作りました。

ソース

html

<section id="top"><div class="all"><center><div class="box"></div>
<div class="triangle"></div></center><article><center>
<img src="https://fontmeme.com/permalink/190705/c5b73f4bdbb03dfba73d255c61d922e6.png" alt="font-marlboro" border="0"></center><br>
<nav><a href="#">1st</a> <a href="#">2nd</a> <a href="#">3rd</a></nav>
<hr>
煙草のパッケージをイメージしたアレ。
第一弾はみんな大好き赤マル。かわいいデザインですよね。<br>
完全に趣味のやつですが、なかなかいい感じでは無いでしょうか。<br>
<h2>見出し2ABCabc123</h2>
<h3>見出し3ABCabc123</h3>
<h4>見出し4ABCabc123</h4>
<br>
タイトルは<a href="https://fontmeme.com/ja/font-marlboro/">マールボロフォント変換</a>で制作しました。<br>
<hr>
※喫煙はあなたにとって肺がんの原因のひとつとなり肺気腫を悪化させる危険性を高めます。<br>
※未成年の喫煙は法律で禁止されています。などなど。<br>
<hr></article><center><a href="#top">△</a></center>
</div>

head

<link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great|Sawarabi+Mincho&display=swap" rel="stylesheet">
	
<style type="text/css">

body,h1,h2,h3,h4,p{
 margin: 0;
 padding: 0;}

body{font-family: 'Sawarabi Mincho', sans-serif;

background:#fff;
color: #222222;
 font-size: 13px;
 line-height: 1.6;
 word-wrap : break-word;}

a{
 color: #000;
 -webkit-tap-highlight-color: rgba(0,0,0,0);
 tap-highlight-color: rgba(0,0,0,0);}

a:hover{
 text-decoration: none;
 color: #a44;}

a:active{ color: #a44;}

.all{
 max-width: 500px;
 margin: auto;
padding: 25px 15px 0 15px;
 margin-top: 30px;
}
.top{ text-align: center;}

h1,h2,h3,h4{
 font-family: 'Sawarabi Mincho', sans-serif; ProN W3','ＭＳ Ｐ明朝',serif;
 letter-spacing: 1px;}

h1{color:#fff;
 font-size: 42px;
 text-align: center;
 position: relative;
 top: 15px;
 display: inline;
font-family: 'marlbororegular';
 padding: 0 2%;}

h2{
 font-size: 150%;
 color: #ccc;
 text-align: center;
 margin-bottom: 12px;}

h3{
 font-size: 120%;
 color: #fff;
 background-color: #b9181f;

 padding-left: 13px;
 margin-bottom: 6px;}

h4{color:#fff;
display:inline-block;
margin:.3em 0; padding:.3em .7em .2em .8em;
background:#2c2c2c; font-size:90%;}

hr{border-top:1px solid #000;}

nav{
 letter-spacing: 1px;
 text-align: center;
 padding: 24px 0;
}

nav a{
 display: inline-block;
margin:.3em 0; padding:.3em .3em .2em .3em;
 width: 20%;
 margin: 0 3px;
background:#000;
 color: #fff;
 text-decoration: none;}

nav a:hover{
 background-color :#933;
 color: #fff;}

article{ margin-bottom: 26px;
padding: 10px 10px;
font-weight:bold;
background:#fff;}

}

.footer{ text-align: center;}

.footer a{ padding: 0 3px;}

p{ padding: 3px 0;
font-weight:normal;}

.color{ color: #a44;}


.box{background:#b9181f;
width:330px;
height:50px;
}

.triangle{
  width: 0;
  height: 0;
  border-left: 165px solid #b9181f;
  border-right: 165px solid #b9181f;
  border-bottom: 165px solid transparent;
}

--></style>