Drodzy Mirkowie Webdeveloperzy, mam problemik. Robię stronkę z 4 pods... (@TheLaw)

Drodzy Mirkowie Webdeveloperzy, mam problemik.

Robię stronkę z 4 podstronami o zainteresowaniach na zajęcia z tworzenia stron.

Stronę główną zrobiłem jak na screenie (kliknięcie w obrazek przenosi do podstrony), ale nauczyciel zaproponował mi stworzenie jakiegoś menu. Znalazłem więc gotowca działającego na jQuery. Dodałem więc i odpowiednio zmodyfikowałem kod z przykładu i jest wszystko pięknie fajnie, ale chciałbym żebym ten pasek menu przewijał się wraz ze scrollowaniem

Załączam kod strony głównej



Moje zainteresowania

Moje zainteresowania

```<br/>
 p {<br/>
 font-family: Comfortaa;<br/>
 src: url('Comfortaa-Regular.ttf');<br/>
 color: white;<br/>
 text-shadow: #<a href="#">000</a> 0px 0px 2px, #<a href="#">000</a> 0px 0px 2px, #<a href="#">000</a> 0px 0px 2px,<br/>
 #<a href="#">000</a> 0px 0px 2px, #<a href="#">000</a> 0px 0px 2px, #<a href="#">000</a> 0px 0px 2px;<br/>
 }<br/>
 body {<br/>
 background-image: url(background.jpg);<br/>
 background-position: center;<br/>
 background-attachment: fixed;<br/>
 background-repeat: no-repeat;<br/>
 -moz-background-size: cover;<br/>
 }<br/>
 div {<br/>
 font-family: Comfortaa;<br/>
 src: url('Comfortaa-Regular.ttf');<br/>
 font-size:48px;<br/>
 color: white;<br/>
 text-shadow: #<a href="#">000</a> 0px 0px 2px, #<a href="#">000</a> 0px 0px 2px, #<a href="#">000</a> 0px 0px 2px,<br/>
 #<a href="#">000</a> 0px 0px 2px, #<a href="#">000</a> 0px 0px 2px, #<a href="#">000</a> 0px 0px 2px;<br/>
<br/>
 }<br/>
 .synth {<br/>
 width:320px;<br/>
 height:230px;<br/>
 margin-left: 7cm;<br/>
 border-color: #<a href="#">000000</a>;<br/>
 border-style: solid;<br/>
 border-width: 5px;<br/>
 }<br/>
 .indie {<br/>
 width: 320px;<br/>
 height: 230px;<br/>
 float: right;<br/>
 margin-right: 8cm;<br/>
 border-color: #<a href="#">000000</a>;<br/>
 border-style: solid;<br/>
 border-width: 5px;<br/>
 }<br/>
 body, html {<br/>
 height: 100%;<br/>
 margin: 0;<br/>
 overflow:hidden;<br/>
 font-family: helvetica;<br/>
 font-weight: 100;<br/>
 }<br/>
 .container {<br/>
 position: relative;<br/>
 height: 100%;<br/>
 width: 100%;<br/>
 left: 0;<br/>
 -webkit-transition: left 0.4s ease-in-out;<br/>
 -moz-transition: left 0.4s ease-in-out;<br/>
 -ms-transition: left 0.4s ease-in-out;<br/>
 -o-transition: left 0.4s ease-in-out;<br/>
 transition: left 0.4s ease-in-out;<br/>
 }<br/>
 .container.open-sidebar {<br/>
 left: 240px;<br/>
 }<br/>
<br/>
 .swipe-area {<br/>
 position: absolute;<br/>
 width: 50px;<br/>
 left: 0;<br/>
 top: 0;<br/>
 height: 100%;<br/>
 background: #<a href="#">f3f3f3</a>;<br/>
 z-index: 0;<br/>
 }<br/>
 #<a href="#">sidebar</a> {<br/>
 background: #<a href="#">df314d</a>;<br/>
 position: absolute;<br/>
 width: 240px;<br/>
 height: 100%;<br/>
 left: -240px;<br/>
 box-sizing: border-box;<br/>
 -moz-box-sizing: border-box;<br/>
 }<br/>
 #<a href="#">sidebar</a> ul {<br/>
 margin: 0;<br/>
 padding: 0;<br/>
 list-style: none;<br/>
 }<br/>
 #<a href="#">sidebar</a> ul li {<br/>
 margin: 0;<br/>
 }<br/>
 #<a href="#">sidebar</a> ul li a {<br/>
 padding: 15px 20px;<br/>
 font-size: 16px;<br/>
 font-weight: 100;<br/>
 color: white;<br/>
 text-decoration: none;<br/>
 display: block;<br/>
 border-bottom: 1px solid #<a href="#">c9223d</a>;<br/>
 -webkit-transition: background 0.3s ease-in-out;<br/>
 -moz-transition: background 0.3s ease-in-out;<br/>
 -ms-transition: background 0.3s ease-in-out;<br/>
 -o-transition: background 0.3s ease-in-out;<br/>
 transition: background 0.3s ease-in-out;<br/>
 }<br/>
 #<a href="#">sidebar</a> ul li:hover a {<br/>
 background: #<a href="#">c9223d</a>;<br/>
 }<br/>
 .main-content {<br/>
 width: 100%;<br/>
 height: 100%;<br/>
 padding: 10px;<br/>
 box-sizing: border-box;<br/>
 -moz-box-sizing: border-box;<br/>
 position: relative;<br/>
 }<br/>
 .main-content .content{<br/>
 box-sizing: border-box;<br/>
 -moz-box-sizing: border-box;<br/>
 padding-left: 60px;<br/>
 width: 100%;<br/>
 }<br/>
 .main-content .content h1{<br/>
 font-weight: 100;<br/>
 }<br/>
 .main-content .content p{<br/>
 width: 100%;<br/>
 line-height: 160%;<br/>
 }<br/>
 .main-content #<a href="#">sidebar</a>-toggle {<br/>
 background: #<a href="#">df314d</a>;<br/>
 border-radius: 3px;<br/>
 display: block;<br/>
 position: relative;<br/>
 padding: 10px 7px;<br/>
 float: left;<br/>
 }<br/>
 .main-content #<a href="#">sidebar</a>-toggle .bar{<br/>
 display: block;<br/>
 width: 18px;<br/>
 margin-bottom: 3px;<br/>
 height: 2px;<br/>
 background-color: #<a href="#">fff</a>;<br/>
 border-radius: 1px; <br/>
 }<br/>
 .main-content #<a href="#">sidebar</a>-toggle .bar:last-child{<br/>
 margin-bottom: 0; <br/>
 }<br/><br/>
 $(window).load(function(){<br/>
 $("[data-toggle]").click(function() {<br/>
 var toggle_el = $(this).data("toggle");<br/>
 $(toggle_el).toggleClass("open-sidebar");<br/>
 });<br/>
 $(".swipe-area").swipe({<br/>
 swipeStatus:function(event, phase, direction, distance, duration, fingers)<br/>
 {<br/>
 if (phase=="move" && direction =="right") {<br/>
 $(".container").addClass("open-sidebar");<br/>
 return false;<br/>
 }<br/>
 if (phase=="move" && direction =="left") {<br/>
 $(".container").removeClass("open-sidebar");<br/>
 return false;<br/>
 }<br/>
 }<br/>
 }); <br/>
 });<br/>
<br/>```

* Home

* Muzyka elektroniczna, syntezatory

* Gry niezależne (indie)

* Grafika komputerowa

* Bezpieczeństwo

Moje zainteresowania

![](synthesizers.jpg)

![](indie.jpg)

Co trzeba by było dorobić, by osiągnąć zamierzony efekt. Żeby nie było jestem początkujący w HTML i CSS

#webdev #webdesign #css #jquery #programowanie #html #pytanie #technikinformatyk