鮮やかに、ヴィヴィッド

●ストライプ別カラー。ソースはほぼ一緒で、配色だけ変えています。
●全体的に目に痛い配色なので、色とかも好きなように変えてください。
他の色→

●区切り線＜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★