123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

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.

            
              <head>
  <title>RB Designs</title>
  <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
  <link href="/normalize.css" rel="stylesheet">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

<body>
  <div class='container-fluid'>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="navbar-header">
        <a class="navbar-brand" href="#Home">Rebecca Bunz</a>
      </div>
      <div>
        <ul class="nav navbar-nav navbar-right" id="nav-links">
          <button><i class="fa fa-bars"></i></button>
          <li><a href="#Home">Home</a></li>
          <li><a href="#About">About</a></li>
          <li><a href="#Portfolio">Portfolio</a></li>
          <li><a href="#Contact">Contact</a></li>
        </ul>
      </div>
    </nav>
  </div>

  <div class='container-fluid'>
    <div class="jumbotron text-center">
      <a class="anchor1" name="Home"></a>
      <div class="row">
        <div class="col-md-5">
          <h1 id="RB">RB</h1></div>
        <div class="col-md-6">
          <h1 id="Designs">Designs</h1></div>
      </div>
      <h1 id="description">Web and App Designs for every business.</h1> </br>
      <div class="line"></div>
    </div>
  </div>

  <div class="container-fluid" id="contact-buttons">
    <a class="btn" href='https://plus.google.com/114895886096116068106/posts' target='_blank' role="button"><i class="fa fa-google-plus"></i> Google Account</a>
    <a class="btn" href='https://www.linkedin.com/pub/rebecca-bunz/92/14b/169' target='_blank' role="button"><i class="fa fa-linkedin"></i> LinkedIn</a>
    <a class="btn" href='https://github.com/rbunz08' target='_blank' role="button"><i class="fa fa-github"></i> GitHub</a>
    <a class="btn" href='https://www.freecodecamp.com/map' target='_blank' role="button"><i class="fa fa-fire"></i> FreeCodeCamp</a>
  </div>

  <div class="container-fluid">
    <div class="row" id="about-block">
      <div class="col-xs-8">
        <h2 id="title">						<a class="anchor2" name = "About"></a>About RB Designs					</h2>
        <p2>
          I'm a <span class="highlight"> self taught </span> web and applications designer and developer based in Canada. <span class="highlight">RB Designs</span> is an up and coming web and mobile applications design company for everyday bussinesses.
          </br>
          </br>
          <span class="highlight">Competences:</span> Languages and Frameworks: Javascript, HTML, CSS, jQuery, Bootstrap, Angular.js </br>
          </br>
          <span class="highlight">Tools & Expertise:</span> Git, Responsive Web Design, Personalised Webpages</br>
          </br>
        </p2>
      </div>
      <div class="col-xs-4">
        <img class='img-responsive center-block' id="profile-picture" src="https://i.imgur.com/rfmxE6R.jpg">
      </div>
    </div>
  </div>


  <div class=" container-fluid" id="portfolio-block">
    <h2><a class="anchor2" name="Portfolio">						</a>Portfolio					</h2>
    <p2>Click on each picture to see some of my recent work.</p2>
    </br>
    </br>
    <table style="width:100%" id="portfolio-table">
      <tr>
        <td>
          <a href="http://www.sewon-sewon.com/" target="_blank"><img class='img-responsive center-block' id="portfolio-picture" src="https://i.imgur.com/Did3N7f.png"></a>
        </td>
        <td>
          <a href="https://codepen.io/rbunz08/full/rOewNL/" target="_blank"><img class='img-responsive center-block' id="portfolio-picture" src="https://i.imgur.com/fovtSlv.png"></a>
        </td>
        <td>
          <a href="https://output.jsbin.com/xehava" target="_blank"><img class='img-responsive center-block' id="portfolio-picture" src="https://i.imgur.com/ARRPMdi.pngg"></a>
        </td>
      </tr>
      <tr>
        <td>A Webpage for a small bussiness.</br><i>HTML, CSS</i></td>
        <td>Front page of a personal webpage.</br><i>Responsive Design</i></td>
        <td>Page from a Quiz</br><i>Javascript</i></td>
      </tr>
    </table>
  </div>
  <div class="container-fluid" id="contact-block">
    <h2><a class="anchor2" name="Contact"></a>						Contact RB Designs</h2>
    <table style="width:80%" id="contact-table">
      <td>
        <form action="contact.php" method="post">
          <p2>Your name</p2>
          </br>
          <input type="text" name="cf_name">
          </br>
          </br>
          <p2>Your email</p2>
          </br>
          <input type="text" name="cf_email">
          </br>
          </br>
          <p2>Message</p2>
          </br>
          <textarea name="cf_message"></textarea>
          </br>
          <input type="submit" value="Send">
          <input type="reset" value="Clear">
        </form>
      </td>
      <td>
        <img class='img-responsive' id="contact-picture" src="https://i.imgur.com/3hegkQB.jpg?1">
      </td>
    </table>
  </div>
</body>
            
          
!
            
              /* background image */

body {
  background: url('https://i.imgur.com/PaayEYc.png')no-repeat center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-top: -40px;
}
/* navigation bar styles*/

.navbar-default {
  /* styles for the whole navigation bar */
  
  background-color: #000000;
  opacity: 0.8;
  border: none;
  margin-top: 5px;
}

.navbar-header a.navbar-brand {
  /* styles for the name in the navigation bar */
  
  color: white;
  font-family: 'Droid Serif', serif;
  font-size: 20px;
}

.navbar-header a.navbar-brand:hover,
/* if you hover over the name in the navigation bar it will change color */

.navbar-header a.navbar-brand:focus {
  background: rgba(255, 255, 255, 0.5);
  color: black;
}

.nav.navbar-nav.navbar-right li a {
  /* styles for the links in the navigation bar */
  
  color: white;
  font-family: 'Droid Serif', serif;
  font-size: 20px;
}

#nav-links {
  /* styles for the ul in the navigation bar */
  
  margin-right: 10px;
}

.nav.navbar-nav.navbar-right button {
  /* hidding the navigation button */
  
  display: none;
}

#nav-links li a:hover,
/* if you hover over the links in the navigation bar it will change color */

#nav-links li a:focus {
  background: rgba(250, 250, 250, 1);
  color: black;
}
/* navigation bar styles for small screen */

@media (max-width: 770px) {
  .navbar-default {
    /* styles for the whole navigation bar */
    
    height: 20px;
  }
  .nav.navbar-nav.navbar-right li {
    /* styles for the list in the navigation bar */
    
    display: none;
    width: 20%;
    float: right;
    clear: both;
    text-align: right;
    border: none;
    top: -8px;
    right: -10px;
    padding: 0px 0px 5px 0px;
    background-color: #000000;
  }
  .nav.navbar-nav.navbar-right li a {
    /* styles for the links in the navigation bar */
    
    display: none;
    float: left;
    /* makes the text react to the width given */
    
    width: 100%
    /* makes them the same length as the li box */
  }
  .nav.navbar-nav.navbar-right button {
    /* styles for the button in the navigation bar */
    
    display: inline;
    position: absolute;
    bottom: 15px;
    right: 10px;
  }
}
/* style for anchor tags */

.anchor1 {
  padding-top: 80px;
  /* bring the anchor to top of writing */
  
  maring-top: -80px;
  /* bring the writing back to the top of the div box */
  
  display: inline-block;
}

.anchor2 {
  padding-top: 100px;
  margin-top: -100px;
  display: inline-block;
}
/* Header styles*/

.jumbotron {
  /* the whole header div */
  
  background: 0;
  color: black;
  opacity: 0.9;
  text-shadow: 3px 2px 4px #FFF;
  margin-bottom: 30px;
  font-weight: 700;
}

#RB {
  font-family: 'Great Vibes', cursive;
  font-size: 13vw;
  font-weight: 900;
  letter-spacing: 20px;
  margin-bottom: -10px;
}

#Designs {
  font-family: 'Lobster', cursive;
  font-size: 10vw;
  /* vw is % of viewport width */
  
  letter-spacing: 10px;
}

#description {
  /* the header description*/
  
  font-family: 'Droid Serif', serif;
  font-size: 3.9vw;
  /* vw is % of viewport width */
  
  font-weight: 700;
}
/* Header styles for small screen */

@media (max-width: 770px) {
  #Designs {
    margin: -10px;
    font-size: 9vw;
  }
  #description {
    font-size: 5vw;
  }
}
/*line under the header*/

.line {
  margin: auto;
  height: 3px;
  background: black;
  -webkit-box-shadow: 0px 2px 5px 1px rgba(255, 255, 255, 1);
  -moz-box-shadow: 0px 2px 5px 1px rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 5px 1px rgba(255, 255, 255, 1);
}
/*Buttons under the header */

#contact-buttons {
  /* the whole div the buttons are in */
  text-align: center;
  margin-top: -40px;
}

#contact-buttons a {
  /* styles for the button themselves */
  
  -webkit-box-shadow: 6px 6px 6px 2px rgba(50, 50, 50, 1);
  -moz-box-shadow: 6px 6px 6px 2px rgba(50, 50, 50, 1);
  box-shadow: 6px 6px 6px 2px rgba(50, 50, 50, 1);
  font-family: 'Lobster', cursive;
  font-size: 2.4vw;
  margin: 5px;
  background: white;
  color: black;
  opacity: 0.8;
}

#contact-buttons a:hover,
/* if you hover over the buttons they will change color */

#contact-buttons a:focus {
  background: rgba(0, 0, 0, 0.8);
  color: white;
}
/* button style for small screen */

@media (max-width: 770px) {
  #contact-buttons a {
    font-size: 3.5vw;
  }
}
/* About Section Styles */

#about-block {
  /*styles for the whole section*/
  
  background: url('https://i.imgur.com/ZJIkgCW.jpg')no-repeat center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-top: 40px;
  color: black;
  font-family: 'Droid Serif', serif;
  font-weight: 600;
}

h2 {
  /*styles for the title*/
  
  font-size: 40px;
  font-weight: bold;
}

p2 {
  /*styles for the paragraph*/
  
  font-size: 20px;
}

.highlight {
  /*styles for the highlighted words*/
  
  font-style: italic;
  font-weight: 1000;
  font-size: 22px;
  text-decoration: underline;
}

#profile-picture {
  display: block;
  width: 300px;
  margin-top: 30px;
  border: 3px solid rgba(0, 0, 0, 0.8);
  border-radius: 200px;
}
/* about page style for small screen */

@media (max-width: 770px) {
  h2 {
    font-size: 5vw;
  }
  p2 {
    font-size: 3vw;
  }
  .highlight {
    font-size: 3.2vw;
  }
}

/* Sty;es for Portfolio Block */
#portfolio-block { 
background: url('https://i.imgur.com/uJifrWe.jpg')no-repeat center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: black;
  font-family: 'Droid Serif', serif;
  font-weight: 600;
}
#portfolio-picture {
  height: 20vw;
  width: 35vw;
  padding: 0px 5px 0px 5px;
}
#portfolio-table {
  text-align: center;
  font-size: 1.8vw;
}
/* portfoilio page on a small screen */
@media (max-width: 770px) {
#portfolio-table{
  font-size: 3vw;
} 
}

/* contact block styles */
#contact-block {
  color: black;
  font-family: 'Droid Serif', serif;
  font-weight: 600;
}
#contact-picture {
  width: 300px;
  border: 3px solid rgba(0, 0, 0, 0.8);
  border-radius: 300px;
}
#contact-table{
  margin: 0px auto 40px auto;
}
form {
  height: 300px;
  font-size: 2vw;
  margin: 20px;
}

/* contact form style for small screen */
@media (max-width: 770px) {
form{
  font-size: 3vw;
} 
}


            
          
!
            
              // check if screen is < 770px
if ($(window).width() <= 770) {
  smallScreen();
};

// recognise if the window changes size
$(window).resize(function() {
  if ($(window).width() <= 770) {
    smallScreen();
  };
  if ($(window).width() > 770) {
    original();
  };
});

// if the screen is <770px then toggle the navigation
function smallScreen() {
  $('.nav.navbar-nav.navbar-right button').on('click', function() {
    $('.nav.navbar-nav.navbar-right li').toggle();
    $('.nav.navbar-nav.navbar-right li a').toggle();
  });
  //once navigation linked is clicked navigation disappears to toggle again
$('.nav.navbar-nav.navbar-right li').on('click', function() {
   $('.nav.navbar-nav.navbar-right li').toggle();
   $('.nav.navbar-nav.navbar-right li a').toggle();
});
};

// if the screen changes to >770px then show the navigation as normal
function original() {
  $('.nav.navbar-nav.navbar-right li').show();
  $('.nav.navbar-nav.navbar-right li a').show();
};

// I do not yet know how to get the email form to actually work
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console