css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

            
              <body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">  <div class="container">
         <!--  <nav class="navbar fixed-top  navbar-expand-sm navbar-default">-->

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid" id="myNavbar">
    <div class="navbar-header">
<button type="button" class="navbar-toggle " data-toggle="collapse" data-target="#navToggle" aria-expanded="false">
  <span class="sr-only">Toggle navigation</span>

        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
           <a class="navbar-brand" href="#">LC Crafted</a>
         </div>
    <div class="navbar-toggleable-xs collapse navbar-collapse" id="navToggle">
    <ul class="nav navbar-nav navbar-right">
            <li class="nav"><a href="#myPage">ABOUT</a></li>
            <li  class="nav"><a href="#portfolio">PORTFOLIO</a></li>
            <li  class="nav"><a href="#contact">CONTACT</a></li>
</ul>
    </div>
  </div>
</nav>

  <div class="jumbotron" id="about">
    <div class="row" >
       <h2>Front End Developer - Webmaster - Social Media Maven</h2>
        <hr>
      <div class="col-sm-8">
       
        <p>Web designer and game designer, webmaster, WordPress developer. Interests include technology, music, travel, games, art, fashion, and video</p>
        <br>
 <ul class="nav">
          <li><a title="Facebook" href="https://www.facebook.com/porcupiny" target="_blank"><i class="fab fa-facebook"></i>

</a></li>
          <li><a title="Twitter" href="https://twitter.com/porcupiny" target="_blank"><i class="fab fa-twitter"></i>

</a></li>
          <li><a title="Google" href="https://plus.google.com/+LianeChan/" target="_blank"><i class="fab fa-google"></i>

</a></li>
          <li><a title="Linkedin" href="https://www.linkedin.com/in/lianechan" target="_blank"><i class="fab fa-linkedin-in"></i>

</a></li>
          <li><a title="Instagram" href="https://www.instagram.com/porcupiny/" target="_blank"><i class="fab fa-instagram"></i>

</a></li>
          <li><a title="Pinterest" href="https://www.pinterest.com/porcupiny/" target="_blank"><i class="fab fa-pinterest"></i>

</a></li>
          <li><a title="Youtube" href="https://www.youtube.com/user/lianeirene" target="_blank"><i class="fab fa-youtube"></i>

</a></li>
        </ul>
      </div>
      <div class="col-sm-4">
        <img src="https://scontent-lax3-1.xx.fbcdn.net/v/t1.0-9/31206132_10156155004581953_3551501857194264260_n.jpg?_nc_cat=0&oh=cf6369ceb508c3dd3bb09c9b4703c3d1&oe=5B913D05" alt="Liane at Amoeba SF" style="width:250px; height:250px; border-radius: 50%; float: right;">
        </p>
      </div>
    </div>
  </div>
  <div id="portfolio" class="container-fluid bg-grey text-center">
    <br><br>
    <h2>Portfolio</h2>
    <hr><br>
    <!--<h4>What I have created</h4>-->
    <div class="row text-center">
      <div class="col">
        <div class="thumbnail">
         <a "rel="gallery" href="https://i0.wp.com/lianechan.com/portfolio/wp-content/uploads/2013/12/KencoDesigns1.jpg"  data-fancybox="gallery" data-caption="Kenco Designs"  alt="Kenco" ><img class="fancybox" rel="gallery" src="https://i0.wp.com/lianechan.com/portfolio/wp-content/uploads/2013/12/KencoDesigns1.jpg" ></a>
          <!--<p><strong>Paris</strong></p>
        <p>Yes, we built Paris</p>-->
        </div>
      </div>
      <div class="col">
        <div class="thumbnail fancybox" >
          <a  data-fancybox="gallery" data-trigger="gallery"  data-caption="Siouxsie Sioux Tribute page"   href="https://lianechan.com/portfolio/wp-content/uploads/2018/05/CodePen_SiouxsieSioux_Tribute_page.jpg"><img rel="gallery"  src="https://lianechan.com/portfolio/wp-content/uploads/2018/05/CodePen_SiouxsieSioux_Tribute_page.jpg" alt="Siouxsie Sioux tribute"></a>
          <!--<p><strong>San Francisco</strong></p>
        <p>Yes, San Fran is ours</p>-->
        </div>
      </div>
    </div>
    <div class="col">

      <div class="row text-center">
        <div class="col">
          <div class="thumbnail fancybox"   >
            <a data-fancybox="gallery" data-trigger="gallery"  data-caption="Random Quotes on Design"  href="https://lianechan.com/portfolio/wp-content/uploads/2018/05/CodePen_Random_Quotes_on_Design.jpg" target="_blank"><img rel="gallery" src="https://lianechan.com/portfolio/wp-content/uploads/2018/05/CodePen_Random_Quotes_on_Design.jpg" alt="Random Quotes on Design"></a>
            <!--<p><strong>San Francisco</strong></p>
        <p>Yes, San Fran is ours</p>-->
          </div>
        </div>
        <div class="col"> <div class="thumbnail fancybox"    ><a data-fancybox="gallery" data-trigger="gallery" href="https://lianechan.com/portfolio/wp-content/uploads/2018/05/CodePen-Free-Code-Camp-Local-Weather-app.jpg"  data-caption="Local Weather App" ><img  rel="gallery" src="https://lianechan.com/portfolio/wp-content/uploads/2018/05/CodePen-Free-Code-Camp-Local-Weather-app.jpg" alt="Local Wather App for FreeCodeCamp"></a>
          
            <!--<p><strong>Paris</strong></p>
        <p>Yes, we built Paris</p>-->
          </div>
        </div>
      </div>
      <div class="row text-center">

        <div class="col">
          <div class="thumbnail fancybox"><a href="https://i1.wp.com/lianechan.com/portfolio/wp-content/uploads/2013/12/SeaBreeze1.jpg" alt="Sea Breeze Landscaping"   data-caption="Sea Breeze Landscaping" data-fancybox="gallery" data-trigger="gallery" href="javascript:;">
            <img  src="https://i1.wp.com/lianechan.com/portfolio/wp-content/uploads/2013/12/SeaBreeze1.jpg" alt="Sea Breeze Landscaping" rel="gallery"></a>
            <!--<p><strong>New York</strong></p>
<p>We built New York</p>-->
          </div>
        </div>
        <div class="col">
         <div class="thumbnail fancybox" >
<a href="https://i0.wp.com/lianechan.com/portfolio/wp-content/uploads/2013/12/LC-Crafted4.jpg" href="javascript:;" data-caption="LC Crafted" data-fancybox="gallery" data-trigger="gallery" ><img src="https://i0.wp.com/lianechan.com/portfolio/wp-content/uploads/2013/12/LC-Crafted4.jpg" alt="LC Crafted"></a>
            <!--<p><strong>New York</strong></p>
        <p>We built New York</p>-->
          </div>
        </div>
      </div>
    </div>
  </div> 
  
  <div id="contact" class="container-fluid bg-grey text-center">
    <h2 class="text-center">Contact</h2>
    <hr><br>
    <div class="row">
      <div class="col-sm-5">
        <p>Contact me and I'll get back to you within 24 hours.</p>
        <p><span class="glyphicon glyphicon-map-marker"></span> Buena Park, CA, US</p>
        <p><span class="glyphicon glyphicon-phone"></span> +714 348 6924</p>
        <p><span class="glyphicon glyphicon-envelope"></span> liane.chan@gmail.com</p>
      </div>
      <div class="col-sm-7">
        <div class="row">
          <div class="col-sm-6 form-group"><form action="mailto:liane.chan@gmail.com" method="post" enctype="text/plain">
            <input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
          </div>
          <div class="col-sm-6 form-group">
            <input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
          </div>
        </div>
        <textarea class="form-control" id="comments" name="comments" placeholder="Comment" cols="5" rows="5"></textarea><br>
        <div class="row">
          <div class="col-sm-12 form-group">
                                           <button class="btn btn-default pull-right" type="submit">Send</button></form>
          </div>
      </div> 
    </div>
  </div>
  </div></div>
  <footer class="navbar-fixed-bottom text-center">
    <a class="up-arrow" href="#myPage" data-toggle="tooltip" title="TO TOP">
    <span class="glyphicon glyphicon-chevron-up"></span>
      </a><br><br>
    <div class="row" id="social">
      <div class="col text-center">
        <p>ABOUT THIS PAGE</p>
        <p>made by with <span class="glyphicon glyphicon-heart" </span></p>
        <p>by <a href="https://lianechan.com" target="_blank">Liane Chan</a></p>
      </div>
      <div class="col text-center">
          <ul id="menu-socials" class="nav top-bar-nav  ">
            <li><a title="Facebook" href="https://www.facebook.com/porcupiny" target="_blank"><i class="fab fa-facebook"></i>

</a></li>
            <li><a title="Twitter" href="https://twitter.com/porcupiny" target="_blank"><i class="fab fa-twitter"></i>

</a></li>
            <li><a title="Google" href="https://plus.google.com/+LianeChan/" target="_blank"><i class="fab fa-google"></i>

</a></li>
            <li><a title="Linkedin" href="https://www.linkedin.com/in/lianechan" target="_blank"><i class="fab fa-linkedin-in"></i>

</a></li>
            <li><a title="Instagram" href="https://www.instagram.com/porcupiny/" target="_blank"><i class="fab fa-instagram"></i>

</a></li>
            <li><a title="Pinterest" href="https://www.pinterest.com/porcupiny/" target="_blank"><i class="fab fa-pinterest"></i>

</a></li>
            <li><a title="Youtube" href="https://www.youtube.com/user/lianeirene" target="_blank"><i class="fab fa-youtube"></i>

</a></li>
          </ul>
      </div>

      <div>

  </footer>

  <div class="container-fluid bg-grey text-center" id="copyright">
    Liane Chan © 2018.
  </div>
  <script>
    $(document).ready(function() {
      // Initialize Tooltip
      $('[data-toggle="tooltip"]').tooltip();
    })
  </script>
<script>$(function($){
        var addToAll = true;
        var gallery = true;
        var titlePosition = 'inside';
        $(addToAll ? 'img' : 'img.fancybox').each(function(){
            var $this = $(this);
            var title = $this.attr('title');
            var src = $this.attr('data-big') || $this.attr('src');
            var a = $('<a href="#" class="fancybox"></a>').attr('href', src).attr('title', title);
            $this.wrap(a);
        });
        if (gallery)
            $('a.fancybox').attr('rel', 'fancyboxgallery');
        $('a.fancybox').fancybox({
            titlePosition: titlePosition
        });
    });
  $.noConflict();</script>

            
          
!
            
              body {
  background-color: #666666;
  font-family: sans-serif;
  font-size: 14px;
  font: 400 15px Lato, sans-serif;
  line-height: 1.8;
  color: #818181;
}

a.fancybox img {
        border: none;
        box-shadow: 0 1px 7px rgba(0,0,0,0.6);
        -o-transform: scale(1,1); -ms-transform: scale(1,1); -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
    } 
a.fancybox:hover img {
        position: relative; z-index: 999; -o-transform: scale(1.03,1.03); -ms-transform: scale(1.03,1.03); -moz-transform: scale(1.03,1.03); -webkit-transform: scale(1.03,1.03); transform: scale(1.03,1.03);
    }

.jumbotron {
  font-family: Montserrat, sans-serif;
  margin-top: 60px;
}

.bg-grey {
    background-color: #f6f6f6;
}
h2 {
  font-size: 24px;
  text-transform: uppercase;
  color: #303030;
  font-weight: 600;
  margin-bottom: 30px;
}
/**gallery margins**/  
div.thumbnail{    
margin-left: 3vw;     
margin-right:3vw; 
align:top;
}  

/**To keep upscaled images visible on mobile, 
increase left & right margins a bit**/  
@media only screen and (max-width: 768px) {   
div.fancybox {      
/*margin-left: 15vw;       
margin-right: 15vw;*/
vertical-align: top;
}

/**TIP: Easy escape for touch screens,
give gallery's parent container a cursor: pointer.**/
.DivName {cursor: pointer}
}

#about {
  margin-top: 80px;
  border: 10px dashed black;
  padding: 30px;
  background: lightblue;
}
.navbar-brand {
  font-size: 20px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#myNavbar {
  display: inline;
}
.navbar ul {    
  display: inline;
}
/* Add a dark background color with a little bit see-through */
.navbar {
  margin-bottom: 0;
  background-color: #2d2d30;
  border: 0;
  font-size: 11px !important;
  letter-spacing: 4px;
  opacity: 0.9;
  font-family: Montserrat, sans-serif;
}
.navbar-fixed-top {
  position: fixed;
}

/* Add a gray color to all navbar links */
.navbar li a, .navbar .navbar-brand { 
    color: #d5d5d5 !important;
}

/* On hover, the links will turn white */
.navbar-nav li a:hover {
    color: #fff !important;
}

/* The active link */
.navbar-nav li.active a {
    color: #fff !important;
    background-color:#29292c !important;
}

/* Remove border color from the collapsible button */
.navbar-default .navbar-toggle {
    border-color: transparent;
}


#portfolio {
  padding: 20px;
  margin-top: 40px;
}

#contact {
  font-size: 16px;
  padding: 30px;
  width: 100%;
  border: 0;
  letter-spacing: 4px;
  opacity: 0.9;
  color: #000;
}
/* Remove border and add padding to thumbnails */
.thumbnail {
    padding: 0;
    border: none;
    border-radius: 0;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
}

/* Black buttons with extra padding and without rounded borders */
.btn {
    padding: 10px 20px;
    background-color: #333;
    color: #f1f1f1;
    border-radius: 0;
    transition: .2s;
}

/* On hover, the color of .btn will transition to white with black text */
.btn:hover, .btn:focus {
    border: 1px solid #333;
    background-color: #fff;
    color: #000;
}
/* Overwrite default styles of h3 and h4 */
h3,
h4 {
  margin: 10px 0 30px 0;
  letter-spacing: 10px;
  font-size: 20px;
  color: #111;
}

/* Remove rounded borders on input fields */
.form-control {
  border-radius: 0;
}

/* Disable the ability to resize textareas */
textarea {
  resize: none;
}
footer {
  background-color: #2d2d30;
  color: #f5f5f5;
  padding: 40px;
  font-size: 14px;
}

footer a {
  color: #f5f5f5;
}

footer a:hover {
  color: #777;
  text-decoration: none;
}

#menu-socials {
  float: right;
  padding: 15px;
  margin-right: 40px;
}
.navbar-fixed-bottom {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: auto;
}
            
          
!
            
              $(document).ready(function() {
  // Add smooth scrolling to all links in navbar + footer link
  $(".navbar a, footer a[href='#myPage']").on("click", function(event) {
    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
      $("html, body").animate(
        {
          scrollTop: $(hash).offset().top
        },
        900,
        function() {
          // Add hash (#) to URL when done scrolling (default click behavior)
          window.location.hash = hash;
        }
      );
    } // End if
  });
});


            
          
!
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.
Loading ..................

Console