バックナンバー完成でいいかな

backnumber.html

@@ -3,67 +3,61 @@
 </div>
 
 <article id="page-backnumber">
-  <p id="description">過去の高専祭サイトのリンクです。</p>
+  <p id="description">過去の高専祭サイトのページです。</p>
   <div id="backnumber-contents">
-    <div class="link">
-      <a href="#">
-        <img src="./image/backnumber_banner/2008_kousen_fes.png">
-      </a>
-      <p>2008年</p>
-    </div>
-    <div class="link">
-      <a href="#">
-        <img src="./image/backnumber_banner/2009_kousen_fes.png.jpg">
-      </a>
-      <p>2009年</p>
+    <div class="link-none">
+      <img src="./image/backnumber_banner/2017_kousen_fes.png">
+      <p>2017年</p>
     </div>
     <div class="link">
-      <a href="#">
-        <img src="./image/backnumber_banner/2010_kosen_fes.png">
+      <a href="http://www1.okinawa-ct.ac.jp/s-union/event/kousen_festival/2016/index.html">
+        <img src="./image/backnumber_banner/2016_kousen_fes_ver2.png">
       </a>
-      <p>2010年</p>
+      <p>2016年</p>
     </div>
     <div class="link">
-      <a href="#">
-        <img src="./image/backnumber_banner/2011_kosen_fes.png">
+      <a href="http://www1.okinawa-ct.ac.jp/s-union/event/kousen_festival/2015/">
+        <img src="./image/backnumber_banner/2015_kousen_fes_ver2.png">
       </a>
-      <p>2011年</p>
+      <p>2015年</p>
     </div>
     <div class="link">
-      <a href="#">
-        <img src="./image/backnumber_banner/2012_kousen_fes.png">
+      <a href="http://www1.okinawa-ct.ac.jp/s-union/event/kousen_festival/2014/index.html">
+        <img src="./image/backnumber_banner/2014_kosen_fes_ver2.png">
       </a>
-      <p>2012年</p>
+      <p>2014年</p>
     </div>
     <div class="link">
-      <a href="#">
+      <a href="http://www1.okinawa-ct.ac.jp/s-union/event/kousen_festival/2013/">
         <img src="./image/backnumber_banner/2013_kousen_fes.png">
       </a>
       <p>2013年</p>
     </div>
     <div class="link">
-      <a href="#">
-        <img src="./image/backnumber_banner/2014_kosen_fes.png">
+      <a href="http://www1.okinawa-ct.ac.jp/s-union/event/kousen_festival/2012/">
+        <img src="./image/backnumber_banner/2012_kousen_fes.png">
       </a>
-      <p>2014年</p>
+      <p>2012年</p>
     </div>
-    <div class="link">
-      <a href="#">
-        <img src="./image/backnumber_banner/2015_kousen_fes.png">
-      </a>
-      <p>2015年</p>
+    <div class="link-none">
+      <img src="./image/backnumber_banner/2011_kosen_fes.png">
+      <p>2011年</p>
+    </div>
+    <div class="link-none">
+      <img src="./image/backnumber_banner/2010_kosen_fes.png">
+      <p>2010年</p>
     </div>
     <div class="link">
-      <a href="#">
-        <img src="./image/backnumber_banner/2016_kousen_fes.png">
+      <a href="http://www1.okinawa-ct.ac.jp/s-union/event/kousen_festival/2009/">
+        <img src="./image/backnumber_banner/2009_kousen_fes.png.jpg">
       </a>
-      <p>2016年</p>
+      <p>2009年</p>
     </div>
     <div class="link">
-      <a href="#">
-        <img src="./image/backnumber_banner/2017_kousen_fes.png">
+      <a href="http://www1.okinawa-ct.ac.jp/s-union/event/kousen_festival/2008/">
+        <img src="./image/backnumber_banner/2008_kousen_fes.png">
       </a>
-      <p>2017年</p>
+      <p>2008年</p>
     </div>
   </div>
 </article>

css/backnumber.css

@@ -21,18 +21,33 @@
 #backnumber-contents {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-evenly;
+  justify-content: space-around;
+  width: 100%;
 }
 .link {
   margin: 2% 0;
   text-align: center;
 }
 .link a img {
-  background-color: #577342;
+  background-color: #f38524;
   box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
   border-radius: 5px;
 }
 .link p {
   margin: 0;
   font-size: small;
+}
+
+.link-none {
+  margin: 2% 0;
+  text-align: center;
+}
+.link-none img {
+  background-color: #ECE3D4;
+  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+  border-radius: 5px;
+}
+.link-none p {
+  margin: 0;
+  font-size: small;
 }