cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <!doctype html>
<html lang="pl">
<head>
    <meta charset="utf-8">
    <title>Nasz Pierwszy Blog</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <nav>
        <a href="#" class="menu-icon"><i class="fa fa-bars"></i></a>
      
        <ul class="menu">
            <li><a href="/">Strona główna</a></li>
            <li><a href="#">Strona X</a></li>
            <li><a href="#">Strona Y</a></li>
            <li><a href="#">Strona Z</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>

    <header>
        <h1>Nasz Pierwszy Blog</h1>
        <p>Blog, który zrobiliśmy od podstaw</p>
    </header>

    <div id="content">
        <section>
            <article>
                <header>
                    <h2>Przykładowy post</h2>
                    <p>15 Lutego 2017, <span>Rafał</span></p>
                </header>

                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis dignissim metus vitae suscipit. Proin mattis sapien non magna tincidunt,
                    sed pellentesque nulla cursus. Praesent accumsan malesuada ex, sit amet aliquam augue scelerisque eu. Nunc mollis, diam ut tempus molestie,
                    leo odio molestie enim, sit amet volutpat ex mi consequat quam. Maecenas justo libero, aliquam quis nunc at, volutpat fringilla quam.
                    Nulla a sem sed leo imperdiet eleifend in quis nulla. Sed hendrerit, sapien eu finibus pharetra, nisi eros posuere nulla, eget lacinia ex
                    nisi vel ipsum. Pellentesque sit amet tortor massa. Donec a commodo quam, at congue tortor. Ut ornare eros nec urna commodo laoreet.
                    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur dictum erat in neque efficitur consectetur.
                </p>
            </article>
          <article>
                <header>
                    <h2>Przykładowy post</h2>
                    <p>15 Lutego 2017, <span>Rafał</span></p>
                </header>

                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis dignissim metus vitae suscipit. Proin mattis sapien non magna tincidunt,
                    sed pellentesque nulla cursus. Praesent accumsan malesuada ex, sit amet aliquam augue scelerisque eu. Nunc mollis, diam ut tempus molestie,
                    leo odio molestie enim, sit amet volutpat ex mi consequat quam. Maecenas justo libero, aliquam quis nunc at, volutpat fringilla quam.
                    Nulla a sem sed leo imperdiet eleifend in quis nulla. Sed hendrerit, sapien eu finibus pharetra, nisi eros posuere nulla, eget lacinia ex
                    nisi vel ipsum. Pellentesque sit amet tortor massa. Donec a commodo quam, at congue tortor. Ut ornare eros nec urna commodo laoreet.
                    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur dictum erat in neque efficitur consectetur.
                </p>
            </article>
        </section>

        <aside>
            <section>
                <h3>Archiwum</h3>

                <ul>
                    <li><a href="#">Luty 2017 (1)</a></li>
                    <li><a href="#">Styczeń 2017 (7)</a></li>
                    <li><a href="#">Grudzień 2016 (5)</a></li>
                </ul>
            </section>

            <section>
                <h3>Tagi</h3>

                <ul>
                    <li><a href="#">blog</a></li>
                    <li><a href="#">tagX</a></li>
                    <li><a href="#">tagY</a></li>
                </ul>
            </section>
        </aside>
    </div>

    <footer>
        <p>Blog stworzony przez czytelników bloga <a href="http://devblog.eu">DevBlog.eu</a> &copy; 2017</p>
        <p><a href="#">na górę</a></p>
    </footer>
  
    <script>
  			var button = document.getElementsByClassName("menu-icon")[0];
      
      	button.onclick = function() {
          	document.getElementsByClassName("menu")[0].classList.toggle("show");
          
          	return false;
        }
  	</script>
</body>
</html>
            
          
!
            
              html, body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: Roboto, sans-serif;
  color: #373a3c;
}

#content {
  display: flex;
  flex: 1 0 auto;
}

aside {
  min-width: 100px;
  flex: 0 0 25%;
}


/* Menu */
nav {
  background-color: #7d8488;
  box-shadow: 0 2px 5px 2px rgba(0,0,0,.16), 0 2px 10px 2px rgba(0,0,0,.12);
  z-index: 1;
}

nav ul {
  list-style: none;
}

nav ul.show {
  display: block;
}

nav > ul > li {
  display: inline-block;
  padding: 5px 10px;
}

nav .menu-icon {
  display: none;
  margin: 15px 50px;
  font-size: 22px;
}

nav li a, 
nav .menu-icon {
  color: white;
  text-decoration: none;
  transition: 0.3s;
}

nav li:hover a, 
nav .menu-icon:hover {
  color: #c1c1c1;
}

body > header {
  text-align: center;
  margin: 30px;
}

body > header h1, body > header p {
  margin: 0;
}

body > header h1 {
  font-size: 3rem;
}

body > footer {
  background-color: #7d8488;
  color: white;
  text-align: center;
  padding: 0 15px;
}

body > footer a {
  color: #c1c1c1;
  text-decoration: none;
}

/* Posty */
article {
  margin: 0 20px;
}

article header {
  padding: 20px;
  box-shadow: 0 8px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19);
}

article header * {
  margin: 0;
}

article header h2 {
  margin-bottom: 5px;
}

article > p {
  padding: 20px;
  line-height: 24px;
}

article:not(:last-of-type) {
  border-bottom: 1px solid rgba(0,0,0,.1);
  margin-bottom: 50px;
}


@media (max-width: 600px) {
  nav ul {
    display: none;
  }
  
  nav ul li {
    display: block;
  }
  
  nav .menu-icon {
    display: inline-block;
  }
}

@media (max-width: 500px) {
  body > header {
    margin: 15px;
  }
  
  body > header h1 {
    font-size: 2rem;
  }
}



#content > aside {
  background: #c2b2a2;
}
            
          
!
999px
Loading ..................

Console