ミュージックフェスサイト
クレジット
デザイナー
HTML,CSS
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>れもんミュージックフェス2020in京都</title>
<style type="text/css">
p, h1, h2, h3, ul, body {
padding: 0px;
margin: 0px;
}
img {
border: none;
vertical-align: bottom;
}
header {
margin-top: -0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
padding: 0px auto;
z-index: 2;
}
header img {
width: 100%;
height: auto;
z-index: 2;
}
nav {
margin-right: auto;
margin-left: auto;
margin-bottom: 20px;
width: 750px;
/* [disabled]height: auto; */
background-color: blue;
z-index: 10;
position: relative;
top: -35px;
}
nav ul {
margin: 0px auto;
width: auto;
height: auto;
z-index: 10;
}
nav li {
float: left;
margin-top: 5px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 5px;
list-style-type: none;
overflow: hidden;
width: auto;
height: auto;
z-index: 10;
}
nav li:nth-child(even) {
padding-top: 30px;
}
.about {
clear: both;
padding-top: 70px;
padding-bottom: 100px;
text-align: center;
position: relative;
}
.about h2 {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 50px;
color: #09334F;
}
.about p {
color: #09334F;
line-height: 32px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
}
#deco1 {
position: absolute;
top: 40px;
left: 100px;
}
#deco2 {
position: absolute;
right: 130px;
top: 200px;
}
#deco3 {
position: absolute;
left: 130px;
bottom: 10px;
right: auto;
}
#deco4 {
position: absolute;
right: 100px;
bottom: -150px;
left: auto;
}
.info {
padding-top: 30px;
padding-right: 0;
padding-left: 0;
position: relative;
margin-top: 200px;
margin-right: 0;
margin-left: 0;
background-image: url(img/backimg-info.png);
height: auto;
width: 100%;
padding-bottom: 100px;
background-repeat: no-repeat;
}
.info h2 {
color: #09334F;
text-align: center;
padding-top: 120px;
padding-bottom: 50px;
}
.info p {
color: #09334F;
text-align: center;
font-size: 15px;
line-height: 35px;
font-family: Arial, Helvetica, sans-serif;
}
#deco5 {
position: absolute;
right: 50px;
/* [disabled]top: 300px; */
bottom: -190px;
}
#deco6 {
position: absolute;
left: 50px;
bottom: -20px;
}
.topic {
margin: 50px 0px;
opacity: 1;
padding-top: 100px;
}
.topic h2 {
color: #09334F;
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
}
.topic .box {
text-align: center;
padding-top: 20px;
/* [disabled]padding-right: 20px; */
/* [disabled]padding-left: 20px; */
padding-bottom: 20px;
display: block;
margin-left: auto;
margin-right: auto;
width: 1000px;
}
.topic .box p {
margin-top: 6px;
/* [disabled]margin-right: 6px; */
/* [disabled]margin-left: 6px; */
margin-bottom: 20px;
float: left;
text-align: center;
}
.boxphoto3 {
float: right;
padding-left: 26px;
}
.gotop {
clear: both;
padding-top: 100px;
padding-right: 50px;
padding-left: 0px;
padding-bottom: 30px;
text-align: right;
}
footer {
background-color: #1D8F0F;
clear: both;
}
footer p {
color: #FFFFFF;
}
.fooertitle {
float: left;
margin: 20px;
font-size: 20px;
font-weight: bold;
line-height: 1.4;
font-family: Arial, Helvetica, sans-serif;
}
.fooertitle p {
color: #FFE500;
}
.footernav {
margin-left: 30px;
float: left;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Arial, Helvetica, sans-serif;
}
.footernav a {
color: #FFFFFF;
text-decoration: none;
}
.footernav a:hover {
color: #F7EE00;
}
.footernav p {
font-size: 15px;
color: #FFFFFF;
text-decoration: none;
line-height: 1.5;
}
.footersns {
float: right;
margin-top: 20px;
margin-right: 50px;
margin-left: 20px;
margin-bottom: 20px;
padding: 0px out;
display: block;
}
.footersns p {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.footersns img {
margin-top: 10px;
margin-right: 12px;
margin-left: 12px;
margin-bottom: 10px;
float: left;
}
.bottom {
clear: both;
text-align: right;
padding: 20px;
height: 20px;
font-size: 13px;
}
.under {
background: linear-gradient(transparent 50%, #F9DF0D 50%);
}
.underwhite {
background: linear-gradient(transparent 50%, #FFFFFF 50%);
}
</style>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=ai)&&x.oSrc;i++) x.src=x.oSrc; }
function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.framesn.substring(p+1).document; n=n.substring(0,p);} if(!(x=dn)&&d.all) x=d.alln; for (i=0;!x&&i<d.forms.length;i++) x=d.formsi; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layersi.document); if(!x && d.getElementById) x=d.getElementById(n); return x; }
function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(ai))!=null){document.MM_srj++=x; if(!x.oSrc) x.oSrc=x.src; x.src=ai+2;} } </script>
</head><body onLoad="MM_preloadImages('img/btn-home-on.png','img/btn-live-on.png','img/btn-goods-on.png','img/btn-foods-on.png','img/btn-ticket-on.png','img/btn-acess-on.png')"> <div id="all"> <header> <h1><img src="img/header2.jpg" width="1200" height="450" alt=""/></h1> </header> <nav> <ul> <li><a href="index.html"><img src="img/btn-home.png" alt="btn1" width="116" height="116" id="btn1" onMouseOver="MM_swapImage('btn1','','img/btn-home-on.png',1)" onMouseOut="MM_swapImgRestore()"/></a></li> <li><a href="live.html"><img src="img/btn-live.png" alt="" width="112" height="101" id="bn2" onMouseOver="MM_swapImage('bn2','','img/btn-live-on.png',1)" onMouseOut="MM_swapImgRestore()"/></a></li> <li><a href="goodsfoods.html"><img src="img/btn-goods.png" alt="" width="116" height="116" id="btn3" onMouseOver="MM_swapImage('btn3','','img/btn-goods-on.png',1)" onMouseOut="MM_swapImgRestore()"/></a></li> <li><a href="goodsfoods.html#foods"><img src="img/btn-foods.png" alt="" width="112" height="101" id="btn4" onMouseOver="MM_swapImage('btn4','','img/btn-foods-on.png',1)" onMouseOut="MM_swapImgRestore()"/></a></li> <li><a href="ticketsaccess.html"><img src="img/btn-ticket.png" alt="" width="116" height="116" id="btn5" onMouseOver="MM_swapImage('btn5','','img/btn-ticket-on.png',1)" onMouseOut="MM_swapImgRestore()"/></a></li> <li><a href="ticketsaccess.html#access"><img src="img/btn-acess.png" alt="" width="112" height="101" id="btn6" onMouseOver="MM_swapImage('btn6','','img/btn-acess-on.png',1)" onMouseOut="MM_swapImgRestore()"/></a></li> </ul> </nav> <main> <section class="about"> <h2> <span class="under">ABOUT</span> </h2> <p>――それをそのままにしておいて私は、 <br> なに喰くわぬ顔をして外へ出る。――<br> 私は変にくすぐったい気持がした。<br> 「出て行こうかなあ。そうだ出て行こう」<br> そして私はすたすた出て行った。<br> 変にくすぐったい気持が街の上の私を微笑ほほえませた。<br> 丸善の棚へ黄金色に輝く恐ろしい爆弾を仕掛けて来た奇怪な悪漢が私で、<br> もう十分後にはあの丸善が美術の棚を中心として<br> 大爆発をするのだったらどんなにおもしろいだろう。<br> 私はこの想像を熱心に追求した。<br> 「そうしたらあの気詰まりな丸善も粉葉こっぱみじんだろう」</p> <p id="deco1"><img src="img/deco1.png" alt="" width="89" height="165"/></p> <p id="deco2"><img src="img/deco2.png" width="63" height="102" alt=""/></p> <p id="deco3"><img src="img/deco3.png" width="99" height="153" alt=""/></p> <p id="deco4"><img src="img/deco4.png" width="123" height="152" alt=""/></p> </section> <section class="info"> <h2> <span class="underwhite"> information</span> </h2> <p>2020.02.14--【第二弾出演アーティスト追加発表！】<br> 2020.02.01--キャンプエリア付きチケット発売開始！2.20(火)10:00~<br> 2020.02.01--グッズブース販売店舗を更新しました<br> 2020.01.26--「rock'in kyoto2月号」にて特集記事にて掲載されました<br> 2020.01.22--check mate friendの来日中止のお知らせ</p> <p id="deco5"><img src="img/deco5.png" width="95" height="99" alt=""/></p> <p id="deco6"><img src="img/deco6.png" alt="" width="103" height="103"/></p> </section> <section class="topic"> <h2> <span class="under">topic</span> </h2> <div class="box"> <p><img src="img/index-live .jpg" width="1000" height="400" alt=""/></p> <p><img src="img/index-goods.jpg" width="488" height="400" alt=""/></p> <p class="boxphoto3"><img src="img/index-foods.jpg" width="486" height="400" alt=""/></p> </div> </section> <p class="gotop"><a href="#all"><img src="img/gotop.png" width="109" height="86" alt=""/></a></p> </main> <footer> <div class="fooertitle"> <p>れもん<br> ミュージックフェス2020<br> in京都</p> </div> <div class="footernav"> <p><a href="index.html">ABOUT</a><br> <a href="live.html">LIVE</a></p> <p><a href="goodsfoods.html">GOODS</a><br> <a href="goodsfoods.html">FOODS</a><br> </p> <p><a href="#">TICKETS</a></p> <p><a href="ticketsaccess.html">ACESS</a><br> </p> </div> <div class="footersns"> <p>最新情報はコチラ！</p> <p><a href="#"><img src="img/logo-instagram.png" width="43" height="42" alt=""/></a></p> <p><a href="#"><img src="img/logo-facebook.png" width="43" height="42" alt=""/></a></p> </div> <p class="bottom">©れもんミュージックフェス2020実行委員会</p> </footer> </div> </body> </html>
fori.io/
fori.io/