|
| 1 | +--- |
| 2 | +layout: default |
| 3 | +title: "サンプル" |
| 4 | +thumbnail: /img/exhibition/1.jpg |
| 5 | +permalink: /expo/1 |
| 6 | +description: サンプルです |
| 7 | +--- |
| 8 | +<h1 style="padding-top: 150px; padding-bottom: 30px; text-align: center; font-weight: bold;">サンプル</h1> |
| 9 | +<div class="main_content"> |
| 10 | + <a href="https://example.com" target="_blank" rel="noopener" > |
| 11 | + <img class='top-img lazyload' loading='lazy' alt='サムネイル画像' |
| 12 | + style='margin-bottom: 10px; border-radius: 6px;width: 100%;' |
| 13 | + src='/img/exhibition/1.jpg' /> |
| 14 | + </a> |
| 15 | + <p> |
| 16 | + 作者: サンプル |
| 17 | + <small>(CoderDojo <a href='https://vtmacs003b.github.io/maebashi.jp/'>前橋</a>)</small> |
| 18 | + </p> |
| 19 | + |
| 20 | + <div class="contents"> |
| 21 | + <div class="box"> |
| 22 | + <h5>作品の説明</h5> |
| 23 | + <p>サンプルです</p> |
| 24 | + </div> |
| 25 | + |
| 26 | + <div class="box"> |
| 27 | + <h5>参考・参照元、工夫したところ</h5> |
| 28 | + <p>サンプルです</p> |
| 29 | + </div> |
| 30 | + </div> |
| 31 | +</div> |
| 32 | + |
| 33 | +<div> |
| 34 | + <a href="https://example.com" target="_blank" rel="noopener" class="button"> |
| 35 | + <i class="fas fa-scroll"></i> |
| 36 | + 作品を見る |
| 37 | + </a> |
| 38 | + <a href="https://twitter.com/intent/tweet?text={{ page.title | replace: '&', '%26' }}+%7C+ニンジャ大博覧会&hashtags=DojoConJapan,CoderDojo&url={{ site.url }}/expo/1&lang=jp&related=DojoConJapan" target="_blank" rel="noopener" class="button" style="margin: 50px auto;"> |
| 39 | + <i class="fab fa-twitter"></i> |
| 40 | + 作品を共有する |
| 41 | + </a> |
| 42 | + <a href="https://www.facebook.com/share.php?u={{ site.url }}/expo/1" target="_blank" rel="noopener" class="button"> |
| 43 | + <i class="fab fa-facebook"></i> |
| 44 | + 作品を共有する |
| 45 | + </a> |
| 46 | +</div> |
| 47 | + |
| 48 | +<div class="content main_content"> |
| 49 | + <a href="/exhibition" class="back-to-top text-left" style="margin: 50px auto;"> |
| 50 | + <i class="fas fa-chevron-circle-left"></i> |
| 51 | + 作品一覧に戻る |
| 52 | + </a> |
| 53 | +</div> |
| 54 | + |
| 55 | +<div class="article-navigation" style="margin-bottom: 100px;"> |
| 56 | + <a href="/expo/1" title="サンプル" style="margin-right: 20px;"> |
| 57 | + <i class="fas fa-arrow-left"></i> |
| 58 | + 前の作品へ<br> |
| 59 | + <span style="font-size: 8px;">サンプル</span> |
| 60 | + </a> |
| 61 | + <a href="/expo/1" title="サンプル" style="margin-left: 20px;"> |
| 62 | + 次の作品へ |
| 63 | + <i class="fas fa-arrow-right"></i><br> |
| 64 | + <span style="font-size: 8px;">サンプル</span> |
| 65 | + </a> |
| 66 | +</div> |
| 67 | + |
| 68 | +<style type="text/css"> |
| 69 | + /* 作品説明などのスタイル */ |
| 70 | + .box { width:auto; margin: 50px auto 30px; } |
| 71 | + .box h5 { text-align: left; } |
| 72 | + .box p { text-align: left; } |
| 73 | + .contents { |
| 74 | + width: auto; |
| 75 | + margin: 0 auto; |
| 76 | + padding: 5px; |
| 77 | + } |
| 78 | + .main_content a { color: #7e2639; } |
| 79 | + .main_content{ |
| 80 | + display: block; |
| 81 | + margin: 0 auto 12px; |
| 82 | + text-align: center; |
| 83 | + text-decoration: none; |
| 84 | + width: 40%; |
| 85 | + } |
| 86 | + @media screen and (max-width: 1000px) { |
| 87 | + .main_content { |
| 88 | + padding: 8px 0; |
| 89 | + width: 80%; |
| 90 | + } |
| 91 | + } |
| 92 | + |
| 93 | + /* 前後の作品へのナビゲーションバー */ |
| 94 | + .article-navigation { |
| 95 | + text-align: center; |
| 96 | + margin: 20px 0; |
| 97 | + } |
| 98 | + .article-navigation a { |
| 99 | + display: inline-block; |
| 100 | + padding: 10px 20px; |
| 101 | + background-color: #7e2639; |
| 102 | + color: white; |
| 103 | + text-decoration: none; |
| 104 | + border-radius: 5px; |
| 105 | + margin: 0 10px; |
| 106 | + } |
| 107 | + .article-navigation a:hover { |
| 108 | + text-decoration: underline; |
| 109 | + } |
| 110 | +</style> |
0 commit comments