-3
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
@import 'https://fonts.googleapis.com/css?family=Pattaya';
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
@import url(https://fonts.googleapis.com/css?family=Dosis:400,300,200,500,600,700,800);
h1 {
font-family: 'Pattaya', sans-serif;
text-shadow:5px 5px 10px #663300;
}
h2 {
font-family: 'Open Sans Condensed', sans-serif;
}
p1 {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 20px;
}
p2 {
font-family: 'Indie Flower', cursive;
font-size: 15px;
}
p3 {
font-family: 'Indie Flower', cursive;
font-size: 15px;
}
p4 {
display: inline-block;
color: #FFF;
text-align: center;
padding: 9px 15px;
text-decoration: none;
transition: 0.3s;
font-size: 18px;
font-family: 'Open Sans Condensed', sans-serif;
}
li {
float: left;
border-right: 0px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 19px 10px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #112;
}
.active {
background-color: #990000;
}
body {
margin: 0;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
background-color: #333;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
ul.topnav li {
float: left;
}
ul.topnav li.right{
float: right;
}
ul.topnav li a {
display: inline-block;
color: #FFF;
text-align: center;
padding: 10.5px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
font-family: 'Dosis', sans-serif;
}
ul.topnav li a:hover {
background-color: #990000;
}
ul.topnav li active {
background-color: #990000;
}
ul.topnav li.icon {
display: none;
}
@media screen and (max-width: 680px) {
ul.topnav li:not(.mob) {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}
ul.topnav li.right{
float: none;
text-align: center;
}
}
@media screen and (max-width: 680px) {
ul.topnav.responsive {
position: fixed;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
ul.topnav.responsive li.right{
position: absolute;
top:0;
left: 50%;
transform: translate(-50%, 0);
}
}
.videoWrapperOuter {
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
.videoWrapperInner {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 50%;
padding-top: 25px;
height: 0;
}
.videoWrapperInner iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.container {
width: 100%;
max-width: 40.7em;
margin: 0 auto;
}
a:link {
text-decoration: none;
color:gray
}
a:visited {
text-decoration: none;
color:gray
}
a:hover {
text-decoration: none;
color: red
}
a:active {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meata charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Keywords" content="Beats,Hip-Hop,Rap,Stockholm,Sweden">
<title>Statos Productions</title>
</head>
<body>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<ul class="topnav" id="myTopnav">
<li class="active mob">
<a href="index.html">
<i class="fa fa-home" aria-hidden="true"></i>
</a>
</li>
<li><a href="beats.html">Beats</a>
</li>
<li><a href="history.html">History</a>
</li>
<li><a href="studio.html">Studio</a>
</li>
<li><a href="contact.html">Contact</a>
</li>
<li class="icon">
<a href="javascript:void(0);" style="font-size:17px;" onclick="myFunction()">
<i class="fa fa-bars" aria-hidden="true"></i>
</a>
</li>
<li class="right mob"><p4>Statos Productions</p4></li>
</ul>
<div style="padding:10px;margin-top:30px;background-color:#FFF;height:1500px;">
<h2>Confidence and Dj Technic made an track with the legendary Edo G!</h2>
<p3>4 of August, 2016</p3>
</br>
<p1>I only knew Dj Technic over the internet. He seem an nice dude. He and his friend Confidence, made an track togheter with G. Dot & Born. featuring the legendary rapper Edo G! First time I ever heard of Edo G, was his song "I got to have it",
way back in the 1991. So I was suprised that Dj Technic made skratches and Confidence on the beat, with there latest song "Makin' Tracks":
</p1>
</br>
</br>
<center>
<div class="videoWrapperOuter">
<div class="videoWrapperInner">
<iframe src="https://www.youtube.com/embed/F8McUSZkE5k"
frameborder="0" allowfullscreen></iframe>
</div>
</div>
</center>
<h2>I'm on a music video!</h2>
<p3>4 of August, 2016</p3>
</br>
<p1>Couple of months ago, Algato called me, to appering on a musicvideo that he casted, togheter with Critical. So I dressed up and he took the best part of me in the video! His song is "Mary" and you can see my face at 1:07.
</br>
</br>
</p1>
<center>
<div class="videoWrapperOuter">
<div class="videoWrapperInner">
<iframe src="https://www.youtube.com/embed/QMtS6EiccGo"
frameborder="0" allowfullscreen></iframe>
</div>
</div>
</center>
<h2>Im back!</h2>
<p3>3 of August, 2016</p3>
</br>
<p1>Its been a while. I was kind of lazy to promote my self into the net. But if you want to survive in this industry you must be self promoting, while you still can! Under these years, I have been workin some of my own projects and did some mastering to Pangaia Crew, who is an rapgroup from South of Stockholm. The results came out pretty good. Here is their video "Paradox":
</br>
</br>
</p1>
<center>
<div class="videoWrapperOuter">
<div class="videoWrapperInner">
<iframe src="https://www.youtube.com/embed/cppOsbK9vGg"
frameborder="0" allowfullscreen></iframe>
</div>
</div>
</center>
</br>
<p2><center><I>© Copyright Statos Productions 2016</I></p2>
</br>
<p1><a href="https://www.soundcloud.com/statos" target="_blank" alt="Soundcloud"><i class="fa fa-soundcloud"></i></a></p1>
</br>
</br>
</br>
</br>
</br>
</br>
</center>
</div>
</body>
</html>
的這是我創建的頁面。感謝這裏的一位成員,他解決了這個問題。
我的問題是現在,是進入引導代碼,但還不明白。
我想在這個頁面中有兩件事是一個headbanner,那裏我會把紅色背景的Statos Production。然後,我希望當你向下滾動時,頭部橫幅消失,但導航菜單仍然存在。當你向上滾動時,頭部橫幅正在消失。
然後我想要菜單上的顏色一樣,在底部,但在崩潰引導代碼。我一直在尋找YouTube,並嘗試將代碼實施到其中,但是我試過的是什麼,它的工作量很大。無論是導航欄的消除還是完全消失,因爲我在爲菜單編寫代碼之前忘記了放置代碼。在那裏,我會把facebook,谷歌+,soundcloud等鏈接。製作該網頁dymaninc。 (對不起我的語法,我有自閉症)
什麼我讀或看視頻,更多我嘗試,更多我destorying我的網頁。
你可以創建一個[MCVE]你不應該把你的整個網站粘貼在這裏,而只是將問題的一部分粘貼在這裏。 –