Rainy day

√You’ll never find a rainbow if you’re looking down.
√If you want the rainbow, you gotta put up with the rain.

12345

説明など

√こちらで使っていた色をそのまま流用してサイトにも使えるようにしてみました。
リンク部分にホバーすると傾きます。
改変ご自由にどうぞ。
√アンブレラのアイコンはfontawesomeから。タグをいじればアイコン画像を変えたり色を変えたりできます。

別のアイコンを使ったり色を変える場合はその都度ｃｓｓをいじってください。
√背景画像は846。さまからお借りしています。そちらからダウンロードしてお使いください。

ソースコード

自動改行「しない」で製作しています。
HTML

HEAD

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
 
<link href="http://fonts.googleapis.com/css?family=Karma" rel="stylesheet" type="text/css">
<style type="text/css">
body{
background-color:#ffffff;
background-image:url(##背景画像URL##);background-position:left left;
  color : #2a5772;
  font-size:12px;
 letter-spacing:2.4px;
 line-height:2;
font-family:'Alegreya Sans',"Hannari","Sawarabi Mincho",Meiryo,Osaka,"MS ゴシック", sans-serif;
text-align:center;
}

.con{width:85%; max-width:450px; margin:30px auto;}

a{
display: inline-block;
color: #ff9800;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
a:hover {
color:#ff9800;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
.all{
text-align: center;
width: 300px;
margin: 0 auto;
margin-top: 60px; 
}
.menu{
margin-top: 10px; 
}

h1{
font-family: "游明朝";
}

.box01 {
    margin: 2em 0;
    background: #b0d7d5 ;
}
.box01 .box-title {
    font-size: 1.2em;
    background: #4790bb;
    padding: 4px;
    text-align: center;
    color: #2a5772;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box01 p {
    padding: 15px 20px;
    margin: 0;
}

.fa-blue:before
{
	color: #2a5772 ;
}

textarea {
    height: 50px;
    width: 50%;
    font-size: 12px;
    font-family: 'Antic Slab', 'STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif;
    line-height: 180%;
    letter-spacing: 2px;
    color: #333;
    background: rgba(255,255,255,.5);
    border: solid 1px rgba(255,255,255,.5);
        -webkit-appearance: none;
    border-radius: 0;
    box-shadow: none;
    margin: 3px 0;
    padding: 3px;
}

</style>