Mercurial > hgrepos > hgweb.cgi > skipweb
changeset 533:43c7b7079039
test
| author | MURAKAMI Masaki <c112124@h.koeki-u.ac.jp> |
|---|---|
| date | Sun, 29 Jun 2014 22:03:17 +0900 |
| parents | 33fd5934e87e |
| children | cd8e213026b3 |
| files | staff/border-s.png staff/border.png staff/mizutama.png staff/papar.png staff/want.css staff/want.html |
| diffstat | 6 files changed, 114 insertions(+), 24 deletions(-) [+] |
line wrap: on
line diff
--- a/staff/want.css Sat Jun 28 22:41:25 2014 +0900 +++ b/staff/want.css Sun Jun 29 22:03:17 2014 +0900 @@ -1,12 +1,77 @@ body { - background-image: url("img/bable.png"); - background-color: #fff123; + background-image: url("border-s.png"); + background-color: #ffffff; + background-attachment: fixed; + margin-top: 20px; +} + +/* ------------------------------------------- +div.header { + position: fixed !important; + position: absolute; + height: 30px; + background: rgba(255,150,75,0.9); +} +--------------------------------------------- */ + +div.flame { + border: 15px dashed rgba(179,126,46,0.7); + width: 720px; + margin-right: auto; + margin-left: auto; + border-radius: 51px; + position: relative; + top: -10px; } div.main { - background: rgba(0,0,0,0.5); - width: 720px; - margin-right: auto; - margin-left: auto; + background: rgba(179,126,46,0.7); + width: 680px; + margin-left:0 auto; + margin-right:0 auto; padding: 2px 20px 2px 20px; + border-radius: 30px; } + +div.inner { + background: rgba(255,255,255,0.95); + padding: 2px 10px 10px 10px; + margin: 10px; +} + +div.outflame { + position: relative; + +} + +div img { + position: absolute; + left: 280px; + top: -15px; + z-index: 1; + opacity: 0.78; + transform: rotate(-10deg); + +} + +div.section { + border: thin solid rgba(255,200,200,0.8); + position: relative; + padding: 5px; + background: white; + border-bottom-right-radius: 30px; + box-shadow: 2px 2px rgba(255,210,210,0.8); +} + +div.corner{ + width: 25px; + height: 25px; + border: thin solid rgba(255,200,200,0.8); + border-right: none; + border-bottom: none; + position: absolute; + right:0; + bottom:0; + z-index: 1; + transform: skew(-10deg,-10deg); +}
--- a/staff/want.html Sat Jun 28 22:41:25 2014 +0900 +++ b/staff/want.html Sun Jun 29 22:03:17 2014 +0900 @@ -3,33 +3,57 @@ <html> <head> <title>Welcome To SKIP</title> -<style type="text/css"> +<link rel="stylesheet" type="text/css" href="want.css" id="cssstyle"> +<script type="text/javascript"> <!-- - ---> -</style> -<link rel="stylesheet" type="text/css" href="want.css"> +function changesytle(cssfile) { +document.getElementById('cssstyle').href = cssfile; +} +// --> +</script> </head> - <body> +<div class="header"> +</div> +<div class="flame"> <div class="main"> +<div class="inner"> <h1>Welcome To SKIP</h1> +<div class="cssstyle"> +<p> +<input type="radio" name="cstyle" value="want.css" onchange="changesytle(value);">want.css +<input type="radio" name="cstyle" value="no" onchange="changesytle(value);">no css style +</p> +</div> + <h3>応募要件</h3> -<p> +<div class="outflame"> +<img src="mizutama.png" alt="100x30(647bytes)" width="100" height="30"> +<div class="section"> <ul> <li>最低でも1回は顔合わせができる場所に住んでいる方</li> <li>自分の住む地域を盛りあげたいと思っている方、又はそのような活動に興 味のある方</li> </ul> -</p> +<div class="corner"></div> +</div> +</div> <h3>申し込み方法</h3> -<p> +<div class="outflame"> +<img src="mizutama.png" alt="100x30(647bytes)" width="100" height="30"> +<div class="section"> +<ul> +<li> skip@e.koeki-u.ac.jp 宛てにメールでお申し込み下さい! メールには以下の内容を書いて下さい。 +</li> <ol> <li>氏名</li> </ol> +</ul> +</div> +</div> <p> * 注意 *<br> 返信は「@h.koeki-u.ac.jp」または「@e.koeki-u.ac.jp」で行うので、前述の2 @@ -41,13 +65,15 @@ * その他連絡先 *<br> <p> <a href="https://twitter.com/share" class="twitter-share-button" data-via="SKIPkoeki" data-size="large">Tweet</a> -<script>!function(d,s,id){var -js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> -</p> +<script> +!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script', 'twitter-wjs'); +</script> </p> </p> <h3>活動内容</h3> -<p> +<div class="outflame"> +<img src="mizutama.png" alt="100x30(647bytes)" width="100" height="30"> +<div class="section"> <ul> <li>みなとオアシス祭で行われるスタンプラリーの「ストーリー作成」、「キャラ作 成」、「広報活動」、「まつり当日の案内役」などのうちできそうなもの。 @@ -55,11 +81,10 @@ <li>スタンプラリー以外にも庄内の魅力を発掘して発信する取材活動</li> <li>Webデザインなどについての学習</li> </ul> -</p> +</div> +</div> </div> -<p></p> - -<address>c112124@h.koeki-u.ac.jp</address> - +</div> +</div> </body> </html>
