仕様書

●カワイイフォントがあったのでそれを利用したくて作ってみました。かわいい～～！
●全体的に目に痛い配色なので、色とかも好きなように変えてください。 ●トップのストライプはｃｓｓで作っています。css内のカラーコードをいじれば好きなように色を変えられます。
●自分のPCとスマホで位置調整しているので、デザイン崩れがあれば適宜調整した方が良いかもしれません。
●区切り線＜hr＞はこちら

の画像で指定しているので、ダウンロードしてお使い下さい。(枠線はついてません)
通常リンクとボックスリンク

HEAD

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP|Ultra|ZCOOL+KuaiLe" 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:#ff1493;
  color : #000;
  font-size:12px;
 letter-spacing:2.4px;
 line-height:2;
font-family: 'ZCOOL KuaiLe', Fontpoにほんご,Meiryo,メイリオ, sans-serif;
text-align:center;
}


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

h2{color: #fff;
font-size: 40px;
font-family: 'Ultra', serif;
position:  absolute;
padding:  10px;
left:  0px;
top: 102px;}

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

.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: #fff;
	background-color: #ff1493;
	transform-origin: 50% 0%;
	transform: translate3d(0, 105%, 0) rotateX(-90deg);
}
.cp_link:hover span {
	background-color: #ff1493;
	transform: translate3d(0, 0, -30px) rotateX(90deg);
}

hr { 
  height: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: url(##区切り線画像URL##) repeat-x 0 0;
}


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

.box2 {
  margin     : auto;
  max-width  : 300px;
  height     : 10px;
                                  /* ストライプパターンのCSS */
  background : repeating-linear-gradient(315deg,
                                         #000000,
                                         #000000 21px,
                                         #ff1493 0,
                                         #ff1493 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:#00ff00;
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

Vivid★

Vivid★