Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <main>
  <header class="col-xs-12 col-md-12 col-lg-12">
    <p><h1><b>Maciej Żelazo&nbsp&nbsp&nbsp </b>  <sup>future</sup>Fullstack webdeveloper</h1></p>
    <nav>
       <ul class="bmenu text-center col-xs-12 col-md-12 col-lg-12">
        <li><a href="#about" class="drop">About</a></li>
        <li><a href="#portfolio" class="drop">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <article>
      <div class="parallax img1"></div>
      <section id="about" class="well col-xs-12 col-md-12 col-lg-12">
        <h2 class="text-center">About me</h2><br>
        <div id="aboutme">
        <p class="text-left col-md-12 col-lg-offset-1 col-lg-10 col-lg-offset-1 ">My name is Maciek. I am young coder from Poland. My hobby and work comes down to one thing - <b>coding</b>. <br><br>The first contact I had with the code was in primary school. I was 12 years old then. Pretty soon I'll be out of Technical school in Poland. This school was focused on information technology profession and I'll end it with three certificates - E12, E13 and E14. E12 is about installation and operation of personal computers and peripheral devices - it's my big passion too - Building and tuning computer setups and my workplace is pleasure for me. E13 is about designing of local computer networks and administrating networks. These two certificates are already in my hand - I must face with the exams for E14 certificate and also, because it's secondary school - with <a href="https://en.wikipedia.org/wiki/Matura">Matura exam (Polish state examination)</a>. <br><br>
The source of my <b>knowledge</b> are documentations, books, <a href="https://www.w3schools.com/default.asp">w3schools</a>, <a href="https://www.codecademy.com/">Codecademy</a>, <a href="https://www.freecodecamp.com">FreeCodeCamp</a> and over a dozen smaller pages and blogs. I use HTML, CSS, BootStrap, Javascript with some jQuery, also MySQL and PHP and I am developing my skills in them. Although not yet finished school, I already earned the first few coins thanks to repairing problems, building setups and making websites. During education in Technical school, about one year ago, I won the work placement in Portugal with dozen people. I was there for one month and if you want - <a href="https://www.facebook.com/Młodzi-technicy-we-współczesnej-Europie-grupa-portugalska-613257948813691/?fref=ts">you can see the photos from it</a>. <br><br>I am a big fan of <a href="https://en.wikipedia.org/wiki/Calisthenics">calisthenics</a> and <a href="https://en.wikipedia.org/wiki/Street_workout">street workout</a>, but now I don't doing hard exercises because of injury. Also <b>I love the nature</b>, healthy lifestyle and I enjoy reading fantasy books - I am fan of Middle-Earth and Witcher universe.
        </p>
        </div>
      </section>

      <div class="parallax img1"></div> <div class="parallax img1"></div> 
    
    <section id="portfolio" class="well col-xs-12 col-md-12 col-lg-12">
        
    
        Velit scriptorem vel ea, viris officiis tincidunt his ne. Hinc liber vix ea, mea id rebum solet, eu pri suas postea semper. Everti percipitur id sit, voluptaria reprehendunt qui ut. Meis laudem prodesset ex sea. Ea per causae reprimique, nonumy phaedrum eum in, odio corrumpit philosophia ei sed. Sed ea stet aperiam prompta, justo splendide mea cu. Lorem iudico ex eos, eos ut dicat molestie.

Cu per dicit explicari voluptaria, ad nam feugait probatus inimicus. Veritus accusam ex vel, no mea altera virtute consetetur, pri te quem quot. In nam mazim affert. Has ut minimum accumsan, dolores referrentur ne nec. Saperet veritus efficiantur ad mel, pri nullam expetendis interesset in. At eos equidem phaedrum salutatus, sea at reque dicat patrioque.

Vix odio rebum ei, sed omnium delicata assueverit ea. Eu ius quas vocent ponderum, at per elit fabulas. Eum an nonumy aliquam. Duo an nonumy vidisse principes, vel lucilius dignissim no. Eos agam timeam tamquam te, vix laoreet voluptatum id. Vix ei essent facete vivendo, eu quas aperiri duo.

Paulo altera no eum, his eu luptatum voluptatibus. Est no eros insolens, his no vocent iisque assueverit, quot timeam explicari ne eum. Modus choro ius id, cu dolor postea interesset qui. Vix ne consul aliquam. Eros expetenda definitiones eam ex, illum admodum cu duo. Vix veri legere fierent cu, eum nonumes ceteros reformidans ut.

Ut doming molestie eleifend mei. Semper meliore hendrerit te nec. Volumus urbanitas mea ne, ad habemus accusamus eos. In cum civibus temporibus, qui esse graecis delicatissimi cu, minimum molestie et vim. Bonorum salutatus ex ius. An vim congue ridens appetere, regione salutatus dissentiet no sea.

Sumo populo principes vis in, sea ut tation ceteros referrentur. Ea nam forensibus posidonium, numquam atomorum senserit ius cu, brute libris audire per ea. Vide constituto qui ei. Pro id altera efficiendi, debet soluta eam at. Nam simul consul in, te fastidii honestatis mea. No ius iudico vocibus suscipit, ut cum errem appareat tincidunt.

Ex nec pertinacia theophrastus, ne vis ridens debitis. Sea id mazim disputationi. Ius vidit populo vulputate no, pro ex altera expetenda dignissim, vocent invenire per at. No fuisset accumsan neglegentur pro, esse case suscipiantur an ius. Vim an cibo facer malorum.

Malorum minimum sadipscing eu pro, vim ea soluta facilis, duo aeque menandri reprehendunt ut. Unum euismod postulant qui te. Et sint duis epicuri vim. In vim nostrud recusabo dissentiet, vitae deserunt accusamus mel no. Rebum incorrupte eu vis, his id tacimates inimicus.

Qui ei inani admodum dolores, ex delectus intellegebat nec. Mea te aperiri quaestio partiendo. Ei mel sale putent volutpat, mea animal molestie ei. Vis an appetere volutpat, nec case commune explicari ea, te mei tacimates intellegebat signiferumque. Qui errem equidem in.

Mea evertitur democritum necessitatibus te. Ne nec etiam putant, te aperiri nostrud sed, utamur perfecto qui in. Ne nam delenit commune sententiae. Altera aperiam nostrum et sea, eu facilisi accusata pericula qui.
    
    
    </section>
    
    <div class="parallax img1"></div> <div class="parallax img1"></div> 
    
    <section id="contact">
      
      Velit scriptorem vel ea, viris officiis tincidunt his ne. Hinc liber vix ea, mea id rebum solet, eu pri suas postea semper. Everti percipitur id sit, voluptaria reprehendunt qui ut. Meis laudem prodesset ex sea. Ea per causae reprimique, nonumy phaedrum eum in, odio corrumpit philosophia ei sed. Sed ea stet aperiam prompta, justo splendide mea cu. Lorem iudico ex eos, eos ut dicat molestie.Velit scriptorem vel ea, viris officiis tincidunt his ne. Hinc liber vix ea, mea id rebum solet, eu pri suas postea semper. Everti percipitur id sit, voluptaria reprehendunt qui ut. Meis laudem prodesset ex sea. Ea per causae reprimique, nonumy phaedrum eum in, odio corrumpit philosophia ei sed. Sed ea stet aperiam prompta, justo splendide mea cu. Lorem iudico ex eos, eos ut dicat molestie.Velit scriptorem vel ea, viris officiis tincidunt his ne. Hinc liber vix ea, mea id rebum solet, eu pri suas postea semper. Everti percipitur id sit, voluptaria reprehendunt qui ut. Meis laudem prodesset ex sea. Ea per causae reprimique, nonumy phaedrum eum in, odio corrumpit philosophia ei sed. Sed ea stet aperiam prompta, justo splendide mea cu. Lorem iudico ex eos, eos ut dicat molestie.

Cu per dicit explicari voluptaria, ad nam feugait probatus inimicus. Veritus accusam ex vel, no mea altera virtute consetetur, pri te quem quot. In nam mazim affert. Has ut minimum accumsan, dolores referrentur ne nec. Saperet veritus efficiantur ad mel, pri nullam expetendis interesset in. At eos equidem phaedrum salutatus, sea at reque dicat patrioque.

Vix odio rebum ei, sed omnium delicata assueverit ea. Eu ius quas vocent ponderum, at per elit fabulas. Eum an nonumy aliquam. Duo an nonumy vidisse principes, vel lucilius dignissim no. Eos agam timeam tamquam te, vix laoreet voluptatum id. Vix ei essent facete vivendo, eu quas aperiri duo.

Paulo altera no eum, his eu luptatum voluptatibus. Est no eros insolens, his no vocent iisque assueverit, quot timeam explicari ne eum. Modus choro ius id, cu dolor postea interesset qui. Vix ne consul aliquam. Eros expetenda definitiones eam ex, illum admodum cu duo. Vix veri legere fierent cu, eum nonumes ceteros reformidans ut.

Ut doming molestie eleifend mei. Semper meliore hendrerit te nec. Volumus urbanitas mea ne, ad habemus accusamus eos. In cum civibus temporibus, qui esse graecis delicatissimi cu, minimum molestie et vim. Bonorum salutatus ex ius. An vim congue ridens appetere, regione salutatus dissentiet no sea.

Sumo populo principes vis in, sea ut tation ceteros referrentur. Ea nam forensibus posidonium, numquam atomorum senserit ius cu, brute libris audire per ea. Vide constituto qui ei. Pro id altera efficiendi, debet soluta eam at. Nam simul consul in, te fastidii honestatis mea. No ius iudico vocibus suscipit, ut cum errem appareat tincidunt.

Ex nec pertinacia theophrastus, ne vis ridens debitis. Sea id mazim disputationi. Ius vidit populo vulputate no, pro ex altera expetenda dignissim, vocent invenire per at. No fuisset accumsan neglegentur pro, esse case suscipiantur an ius. Vim an cibo facer malorum.

Malorum minimum sadipscing eu pro, vim ea soluta facilis, duo aeque menandri reprehendunt ut. Unum euismod postulant qui te. Et sint duis epicuri vim. In vim nostrud recusabo dissentiet, vitae deserunt accusamus mel no. Rebum incorrupte eu vis, his id tacimates inimicus.

Qui ei inani admodum dolores, ex delectus intellegebat nec. Mea te aperiri quaestio partiendo. Ei mel sale putent volutpat, mea animal molestie ei. Vis an appetere volutpat, nec case commune explicari ea, te mei tacimates intellegebat signiferumque. Qui errem equidem in.

Mea evertitur democritum necessitatibus te. Ne nec etiam putant, te aperiri nostrud sed, utamur perfecto qui in. Ne nam delenit commune sententiae. Altera aperiam nostrum et sea, eu facilisi accusata pericula qui.
      
    </section>
</article>
</main>
              
            
!

CSS

              
                body {
  background-image: url("http://i64.tinypic.com/9hpdf9.jpg");
  background-attachment: scroll;
  background-repeat: repeat;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-family: 'Raleway', sans-serif;
}

header {
  background-color: white;
  width: 100%;
  text-align: center;
  height: auto;
}

header.sticky {
   position: fixed;
  font-size: 60%;
  width: 100%;
  height: auto;
  text-align: left;
  z-index: 9999;
  transition-duration:1ms;
  transition:0s; 
}

h1 {
  font-size: 1.5em;
  text-align: center;
}

header sup {
  color: black;
  letter-spacing:5px;
  font-size: 55%;
}

header p {
  color: red;
}

.drop {
  transition:2s;
  -webkit-transition: 2s;
	-moz-transition: 2s;
	-o-transition: 2s;
	-ms-transition: 2s;
	transition: 2s;
  transition-durations:1000ms;
}

article {
  height: 1500px;
  width: 100%;
}

.bmenu{
    padding: 0px;
    margin: 0 0 10px 0;
    position: relative;
}
.bmenu li{
    font-size: 1.5em;
    display: inline-block;
}

.bmenu li a{
	display: block;
	text-transform: uppercase;
	text-shadow: 0px 0px 2px white;
	color: white;
	padding: 2px 20px;
	margin: 2px;
	background: rgba(0,0,0,0.9);
	letter-spacing: 5px;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.bmenu:hover li a{
	text-shadow: 0px 0px 10px white;
	color: transparent;
	background: rgba(0,0,0,0.9);
}
.bmenu li a:hover{
	background: rgba(0,0,0,0.1);
	text-shadow: 0px 0px 1px white;
  text-decoration:none;
  color:black;
}
a:link, a:hover, a:active, a:visited {
    text-decoration:none;
}

.parallax {
    /* Full height */
    height: 30%; 
    width:100%;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


.img1 {
   background-image: url('https://i.imgur.com/HCBR0iC.jpg');
}

/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-device-width: 1100px) {
    .parallax {
        background-attachment: cover;
      background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    }
}

#about {
  height:auto;
  background-color:white;
  padding:20px 40px 50px 40px;
  border-radius:0px;
}


#aboutme {
  max-width:1500px;
  margin-left:auto;
  margin-right:auto;
  
}

#portfolio {
  height:auto;
  background-color:white;
  padding:20px 40px 50px 40px;
  border-radius:0px;
}

              
            
!

JS

              
                $('nav ul li a').click(function(){
    var $href = $(this).attr('href');
    var $anchor = $($href).offset().top - 150;
    $('html, body').animate({ scrollTop: $anchor }, 1000);
    return false;
});

$(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('header').addClass("sticky");
   }
  else{
    $('header').removeClass("sticky");
   
  }
});
              
            
!
999px

Console