Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
​
  <head>
​
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
​
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="javaScript.js"></script>
​
  </head>
​
  <body>
​
    <div id="head">
      <nav class="navbar navbar-inverse navbar-static-top">
        <div id="navbarButtons" class="container-fluid">
          <a href="#aboutMe" class="btn btn-default btn-lg" role="button">
            <span class="glyphicon glyphicon-search"></span>
          </a>
          <a href="#circVitae" class="btn btn-default btn-lg" role="button">
            <span class="glyphicon glyphicon-home"></span>
          </a>
          <a href="#contactMe" class="btn btn-default btn-lg" role="button">
            <span class="glyphicon glyphicon-envelope"></span>
          </a>
        </div>
      </nav>
    </div>
​
​
    <div id="body">
​
      <section class="module parallax parallax-1">
        <div class="container">
          <h1>Ibrahim</h1>
        </div>
      </section>
​
      <section class="module content">
        <div class="container">
          <div class="media">
            <div class="media-left media-middle">
              <a href="#">
                <img class="media-object" src="..." alt="...">
              </a>
            </div>
            <div class="media-body">
              <h2 class="media-heading">Middle aligned media</h2>
              <p>Let's see what happens now</p>
            </div>
            <div class="media">
              <div class="media-left media-middle">
                <a href="#">
                  <img class="media-object" src="..." alt="...">
                </a>
              </div>
              <div class="media-body">
                <h2 class="media-heading">Middle aligned media</h2>
                <p>Let's see what happens now</p>
              </div>
              <div class="media">
                <div class="media-left media-middle">
                  <a href="#">
                    <img class="media-object" src="..." alt="...">
                  </a>
                </div>
                <div class="media-body">
                  <h2 class="media-heading">Middle aligned media</h2>
                  <p>Let's see what happens now</p>
                </div>
              </div>
              <div class="media">
                <div class="media-left media-middle">
                  <a href="#">
                    <img class="media-object" src="..." alt="...">
                  </a>
                </div>
                <div class="media-body">
                  <h2 class="media-heading">Middle aligned media</h2>
                  <p>Let's see what happens now</p>
                </div>
                <div class="media">
                  <div class="media-left media-middle">
                    <a href="#">
                      <img class="media-object" src="..." alt="...">
                    </a>
                  </div>
                  <div class="media-body">
                    <h2 class="media-heading">Middle aligned media</h2>
                    <p>Let's see what happens now</p>
                  </div>
                </div>
      </section>
​
      <section class="module parallax parallax-2">
        <div class="container">
          <a name="aboutMe"></a>
          <h1>About Me</h1>
        </div>
      </section>
​
      <section class="module content">
        <div class="container">
          <h2>Lorem Ipsum Dolor</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        </div>
      </section>
​
      <section class="module parallax parallax-3">
        <a name="contactMe"></a>
        <div class="container">
        </div>
      </section>
​
      </div>
​
      <div id="bodyHobbies">
        <div class="intbox1"><p>1</p>
          <img src="foobar1.jpg" border="0" />
        </div>
        <div class="intbox2"><p>2</p>
          <img src="foobar.jpg" border="0" />
        </div>
        <div class="intbox3"><p>3</p>
          <img src="foobar.jpg" border="0" />
        </div>
        <div class="intbox4"><p>4</p>
          <img src="foobar.jpg" border="0" />
        </div>
      </div>
​
      <div id="footerBottom">
        <footer class="footer">
          <div class="container">
            <p class="text-muted"></p>
          </div>
        </footer>
      </div>
​
  </body>
​
</html>
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ibrahimsow1pro
0viewers