アタラクシアにはまだ遠い

https://alicex.jp/###/

info main source&code mail rank rank rank

12345

far-out "Ataraxia"

INFORMATION

ここは○○で××なサイトですなどサイトの説明をどうぞ。

夏らしい画像をお借りして作ってみました。
ページをゆっくりフェードインさせるアニメーションを設定してます。不要であればbody内のanimationの部分を消してください。
・おまけの強調
・おまけのマーカー
女の子の画像と空の画像はマグロノマルセイさま→「おはようからおやすみまで」より、リンクの背景画像と区切り線、強調などのテクスチャはすべて８４６。さまよりお借りしています。それぞれ該当サイトよりDLください。
ページソースは後述。

△

MAIN CONTENTS

text

鈴木：xxx/xxx/xxx
佐藤：xxx/xxx/xxx
田中：xxx/xxx/xxx

img

△

SOURCE CODE

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

<div class="article"><div class="section"> <section id="top">
<p><img src="##女の子の画像URL##" style="float:left;">
<h1>your site name</h1>
<p>http://サイトURL/</p>
<a href="#info">info</a> 
<a href="#main">main</a> 
<a href="#bkm">bkm</a> 
<a href="#">mail</a> 

<center><a href="#">rank</a> <a href="#">rank</a>  <a href="#">rank</a></p><br>
<img src="##空の画像URL##"><br>
#カウンタータグなど#<br>
<h3><span>YOUR SITE NAME</span></h3></center>
</div></div>
<div class="wrapper"><div class="section">  <section id="info">
<hr noshade>
<center><h2>INFORMATION</h2></center><br>
<p>ここは○○で××なサイトですなどサイトの説明をどうぞ。</p>
<strong>おまけの強調</strong><br>
・<marker>おまけのマーカー</marker><br>
<h3>見出し</h3>
<br><a href="#top">△</a><hr noshade><br>
<br></div>
 <div class="section"> <section id="main">
<center><h2>MAIN CONTENTS</h2></center><br>
<p>text</p>
鈴木：<a href="#">xxx</a>/<a href="#">xxx</a>/<a href="#">xxx</a><br>
佐藤：<a href="#">xxx</a>/<a href="#">xxx</a>/<a href="#">xxx</a><br>
田中：<a href="#">xxx</a>/<a href="#">xxx</a>/<a href="#">xxx</a><br><br>
<p>img</p>
<a href="#"><img src="##画像URL##" width="30" height="30" border="1"></a> <a href="#"><img src="##画像URL##" width="30" height="30" border="1"></a> <a href="#"><img src="##画像URL##" width="30" height="30" border="1"></a> <a href="#"><img src="##画像URL##" width="30" height="30" border="1"></a> <br>
<a href="#top">△</a>
<hr noshade>
</div>
</div></div>

HEAD

<link href="https://fonts.googleapis.com/css?family=Cinzel|Sawarabi+Mincho" rel="stylesheet">
<style type="text/css">

body{
background-color:#fff;
  color : #000;
  font-size:12px;
 letter-spacing:2.4px;
 line-height:2;
font-family: 'Cinzel', serif, cursive,'Sawarabi Mincho'; 
text-align:left;
 animation: fadeIn 5s ease 0s 1 normal;
    -webkit-animation: fadeIn 5s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

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

.article a {
    padding: 0 3px;
}

.wrapper {
    background: rgba(255,255,255,0.95);
    padding-bottom: 30px;
}

.section {
    width: 75%;
    max-width: 500px;
    margin: 0 auto;
    padding: 20px 0 0;
}


p{font size:8px;
 color:#5f9ea0;} 

a{color:#696969;
text-decoration:none;}
a:hover{color:#000;
background-image:url(##画像URL##);}

h1 {color:#696969;
font-size:14px; 
text-shadow: 1px 2px 3px #000000;
}


h2 {
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
}
h2:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
 background-color: black;
background-image:url(##画像URL##);center;
  border-radius: 2px;
}

h3 {font size:10px;
  position: relative;
  display: inline-block;
  padding: 0 55px;
}

h3:before, h3:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: black;
}

h3:before {
  left:0;
}
h3:after {
  right: 0;
}

strong{font size:16px;
color: #000 ;
background-color: #fff;
background-image: url(##強調用画像URL##);
}

hr{
height:6px;
background:url(##区切り用画像URL##) center;
border:none;
border-radius:6px;
margin:5px 0;
}
.cate{color:#06A9D4; margin:0 8px 0 10px;}
.con{margin:40px 0 20px;}
.tuiki{margin-top:10%; margin-left:10px; color:#06A9D4;}
.title{margin-bottom:10px;}

marker {
  color         :  #330033;            
  background    : linear-gradient(transparent 50%,  #00ffff 65%);  
}


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>

△