なんだかあまいものがたべたいなぁ

●カワイイフォントがあったのでそれを利用したくて作ってみました。かわいい～～！
●トップのストライプはｃｓｓで作っています。css内のカラーコードをいじれば好きなように色を変えられます。
●色違いはこちら

●自分のPCとスマホで位置調整しているので、デザイン崩れがあれば適宜調整した方が良いかもしれません。
通常リンクとボックスリンク

HEAD

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP|Ultra|ZCOOL+KuaiLe" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Playball" rel="stylesheet">
<style type="text/css">
@font-face{
font-family:Fontpoにほんご;
src:url('https://cdn.leafscape.be/nihongo/FontopoNIHONGO_web.woff')
format("woff");
}

body{
background-color:#fdf5e6;
  color : #8b4513;
  font-size:12px;
 letter-spacing:2.4px;
 line-height:2;
font-family: 'ZCOOL KuaiLe', Fontpoにほんご,Meiryo,メイリオ, sans-serif;
text-align:center;
}


h1{color: #f08080;
font-size: 60px;
font-family: 'Playball', cursive;
position : absolute;
  top : 100px;
  left : 270px;
  width : 580px;
  padding : 10px;
 }

h2{color: #f08080;
font-size: 40px;
font-family: 'Playball', cursive;
position:  absolute;
padding:  10px;
left:  0px;
top: 102px;}

a{
text-decoration:none;
color:#f08080;
}
a:hover{
text-decoration:none;
color:#8b4513;;
}

.cp_link {
	display: inline-block;
	perspective: 1000px;
	perspective-origin: 50% 50%;
	vertical-align: bottom;
	overflow: hidden;
}
.cp_link span {
	display: inline-block;
	position: relative;
	padding: 0.1em 0.3em;
	transition: .4s;
	transform-origin: 50% 0%;
	transform-style: preserve-3d;
}
.cp_link span:after {
	display: inline-block;
	position: absolute;
	padding: 0.1em 0.3em;
	left: 0;
	top: 0;
	content: attr(data-text);
	color: #f08080;
	background-color: #fdf5e6;
	transform-origin: 50% 0%;
	transform: translate3d(0, 105%, 0) rotateX(-90deg);
}
.cp_link:hover span {
	background-color: #fdf5e6;
	transform: translate3d(0, 0, -30px) rotateX(90deg);
}

hr { 
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #fdf5e6;
  border-top: 2px dotted #8b4513;
}


 /* --- ストライプ背景 ------------------------------------- */
.box {
  margin     : auto;
  max-width  : 500px;
  height     : 200px;
                                  /* ストライプパターンのCSS */
  background : repeating-linear-gradient(315deg,
                                         #fdf5e6,
                                        #fdf5e6 21px,
                                         #8b4513 0,
                                         #8b4513 41px);
}

.box2 {
  margin     : auto;
  max-width  : 300px;
  height     : 10px;
                                  /* ストライプパターンのCSS */
  background : repeating-linear-gradient(315deg,
                                         #fdf5e6,
                                         #fdf5e6 21px,
                                         #8b4513 0,
                                         #8b4513 41px);
}


.pc { display: block !important; }
.sp { display: none !important; }
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

.TextLeft{
    text-align:left;
}

.wrp {
    max-width: 500px;
    margin: 50px auto 10px;
}

textarea{
background:#f08080;
color:#222;
width:98%;
padding:1%;
display;block;
height:40px;
font-family:'Expletus Sans',Fontpoにほんご,Meiryo,メイリオ, sans-serif;
border:none;
border-radius:3px;
letter-spacing:1px;
line-height:1.5;
}
</style>

HTML

Stripe chocolate

chocolate