DeadBlood
Пользователь
- Регистрация
- 12.09.12
- Сообщения
- 21
- Реакции
- 7
- Баллы
- 3
- Возраст
- 32
Объясните дураку плиз
html
Код:
<!doctype html>
<html lang="en">
<head> <meta charset="UTF-8"> <link rel="stylesheet" href="style/style.css"> <title>Test</title>
</head>
<body> <header> <h1>Клонцак Ярина</h1><h2>Постановка весільних танців</h2> <nav> <ul> <li><a href="#about">Про весільний танець</a></li> <li><a href="#music">Як підібрати музику?</a></li> <li><a href="#hore">В чому моя роль?</a></li> <li><a href="">Приклади мого навчання</a></li> <li><a href="">Про мене</a></li> <li><a href="">Відгуки</a></li> </ul> </nav> </header>
<a name="about"></a> <article class="main-slide">
<h3><span class="colortext">Перший весільний танець</span> — перший танець молодого подружжя, що слугує своєрідним переходом між першим застілля та танцями. </h3> </article><br>
<article class="slide2"><br><a name="music"></a>
<div class="music-before">
<h4></h4></div>
</article>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="script/script.js"></script>
</body>
</html>
CSS
Код:
html,body { margin:0; padding: 0; font-stretch: condensed ; font-family: Arial; height: 100%; border:0px; word-wrap: break-word;
}
html { background-color: rgb(250,250,250); overflow-y: hidden;
}
body { overflow-x: hidden;
}
header { width:100%; height: 60px; border:1px solid white; margin:-2px auto; border-top:1px solid grey; border-radius: 2px; background-color: white; position: fixed; z-index: 9999; border-bottom:2px solid red;
}
h1 { margin-top: 3px; margin-left: 15px; font-size: 25px; font-style: italic; font-weight: normal;
}
h2 { font-size: 14px; margin-top:-23px; margin-left: 150px; font-style: italic; font-weight: normal;
}
nav { margin:-37px 0 0 320px;
}
nav li { display: inline-block; color:black; margin:0 0 0 10px;
}
nav a { text-decoration: none; color:grey;
}
.wrapper { margin:0px 0 0 0;
}
.main-slide { position: relative; color:white; width:100%; height:100%; margin:0px auto; background-image: url(../img/1.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; border-bottom: 3px solid red;
}
.slide2 { width:100%; height:100%; margin:-19px auto; background-color:rgb(250,250,250); background-image: url(../img/music.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center;
}
h3 { position: absolute; display:block; padding: 70px; color:rgb(220,220,220); font-size: 30px; bottom: 0; background-color: rgba(0,0,0,0.3); text-shadow: 0px 0px 10px black;
}
.colortext { color:rgb(249,76,98);
}
.music-before { padding: 30px; width: 700px; margin:100px auto; font-size: 20px; background-color: white; border:1px solid rgb(200,200,200); color:grey; border-radius:5px; cursor: pointer;
}
h4 { width: 800px; margin:0 auto; color:grey; padding: 20px; background-color: white; border:1px solid rgb(230,230,230); border-radius: 10px;
}
Script
Код:
$(document).ready(function(){
$('h4').hide(); $('.music-before').click(function(){ if ($('h4').is(':hidden')){ $('h4').fadeIn();} else { $('h4').show(); } }
); $('a[href^="#"]').click(function(){
var target = $(this).attr('href');
$('html, body').animate({scrollTop:$(target).offset().top}, 800);
return false;
});
});