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.

            
              <head>
  <title>Bootstrap</title>
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Marcellus|Antic">
</head>

<!-- navbar -->
    <nav class="navbar navbar-fixed-top ">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <a id="logo" class="navbar-brand" href="#">High Peaks Design</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav pull-right menu-items">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
    </nav>
<!-- end navbar -->

<!-- background image and animations -->
<div id="main-content" class="bg img-responsive">
  <img src='https://s31.postimg.org/6zkw8xo57/hi_peaks.png' class="bg">
  <!-- text animations -->
  <div class="animation-text">
    <div class="text-animated-one">the results <span style="color: red">you need</span></div>
    <div class="text-animated-two">the design <span style="color: red">you want</span></div>
    <div class="text-animated-three">the on-time delivery <span style="color: red">you deserve</span></div>
  </div>
  <!-- end text animations -->
</div>
<!-- end background image & animations -->

<!-- main content section -->
<div id="main-content" class="container-fluid col-xs-12">

  <!-- portfolio section -->
  <div id="portfolio">
    <div class="row">
      <h1 class="section-padding">Portfolio</h1>

      <figure class="col-xs-4 col-xs-offset-2">
        <h4>Tribute Page Exercise</h4>
        <img class="img-responsive center-block panel-image" src="https://s32.postimg.org/w0egpbct1/image.png">
        <figcaption>
          Tribute website to Hachiko, revered as the world's most loyal dog
        </figcaption>
      </figure>
      <figure class="col-xs-4">
        <h4>First Portfolio Attempt</h4>
        <img class="img-responsive center-block panel-image" src="https://s31.postimg.org/tfslcohaj/image.png">
        <figcaption>
          First Portfolio attempt. Liked the effect but wasn't following instructions
        </figcaption>
      </figure>
    </div>
    <div class="row">
      <figure class="col-xs-4 col-xs-offset-2">
        <h4>Second Portfolio Attempt</h4>
        <img class="img-responsive center-block panel-image" src="https://s32.postimg.org/c094cdxc5/image.png">
        <figcaption>
          Good start but found it hard to design around that color scheme
        </figcaption>
      </figure>
      <figure class="col-xs-4">
        <h4>Final Portfolio Project</h4>
        <img class="img-responsive center-block panel-image" src="https://s31.postimg.org/6smkld5sr/image.png">
        <figcaption>
          After a rough start, completed this project&#8202;&mdash;&#8202and learned a lot
        </figcaption>
      </figure>
    </div>
  </div>
  <!-- end portfolio -->

  <!-- about section -->
  <div class="row">
    <div id="about">
      <h1 class="section-padding">Understand Requirements First. Then Design > Build >  Release > Track > Support with Unparralled Service</h1>
      </br>
      <div class="col-xs-4">
        <img id="resize" src="https://s31.postimg.org/4efbl78zf/vision.png" class="image-shadow">
        <h3>Expand Your Vision to What's Possible</h3>
        <h4>&nbsp&nbsp<span style="color: red">Get the design you want</span></h4>
        <ul>
          <li>Exhaustive Needs Analysis</li>
          <li>Concept & Design Deliverables</li>
          <li>European Design Disciplines</li>
          <li>Front-end Specialities</li>
          <li>Back-end Integration</li>
        </ul>
      </div>
      <div class="col-xs-4">
        <img id="resize" src="https://s31.postimg.org/sz5jknam3/speed.png" class="image-shadow">
        <h3>Speed to Market = Key Success Factor</h3>
        <h4>&nbsp&nbsp<span style="color: red">Get fast delivery you deserve</span></h4>
        <ul>
          <li>Full-service Shop</li>
          <li>Open 24/7 + Full Weekend Staff</li>
          <li>Dedicated Support Specialists</li>
          <li>Priority/Rush Delivery</li>
          <li>Online and at Your Location</li>
        </ul>
      </div>
      <div class="col-xs-4">
        <img id="resize" src="https://s31.postimg.org/x81jesnsb/target.png" class="image-shadow">
        <h3>Stay on Target by Measuring Results</h3>
        <h4>&nbsp&nbsp<span style="color: red">Get the results you want</span></h4>
        <ul>
          <li>Built in Metrics</li>
          <li>On-going SEO</li>
          <li>Real-time Tracking</li>
          <li>Online Dashboards</li>
          <li>Competitive Analysis</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="row">
    <div id="message" class="well col-xs-10 col-xs-offset-1">
      <p>You have a great story to tell.</p>
      </p>As your organization grows, that story will change.</p>
      <p>We'll be there by your side all the way.</p>
    </div>
  </div>
  <!-- end about section -->

  <!-- contact section -->
  <div class="row">
    <div id="contact">
      <h1 class="section-padding">Contact Us</h1>
      </br>
      </br>
      <!-- vertically stacked social icons -->
      <div class="col-xs-2 col-xs-offset-1" style="padding-top: 10px">
        <a href="" target="_blank" rel="nofollow">
          <div class="linkedin-hover social-slide"></div>
        </a>
        <a href="" target="_blank" rel="nofollow">
          <div class="facebook-hover social-slide"></div>
        </a>
        <a href="" target="_blank" rel="nofollow">
          <div class="google-hover social-slide"></div>
        </a>
        <a href="" target="_blank" rel="nofollow">
          <div class="instagram-hover social-slide"></div>
        </a>
      </div>

      <!-- vertically stacked social icons -->

      <div class="col-xs-7">
        <form id="contact-form" method="post" action="contact.php" role="form">
          <div class="messages"></div>
          <div class="controls">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="form_name">First name *</label>
                  <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
                  <div class="help-block with-errors"></div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="form_lastname">Last name *</label>
                  <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
                  <div class="help-block with-errors"></div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="form_email">Email *</label>
                  <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
                  <div class="help-block with-errors"></div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="form_phone">Phone</label>
                  <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone">
                  <div class="help-block with-errors"></div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="form_message">Message *</label>
                  <textarea id="form_message" name="message" class="form-control" placeholder="Message for High Peaks Design staff *" rows="4" required="required" data-error="Please,leave us a message."></textarea>
                  <div class="help-block with-errors"></div>
                </div>
              </div>
              <div class="col-md-12">
                <input type="submit" class="btn btn-success btn-send" value="Send message">
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <p class="text-muted"><strong>*</strong> Required fields</p>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
    <!-- end contact section -->
  </div>
  <!-- copyright -->
  <footer>
    <p>&copy2016 High Peaks Design Group, Inc.</p>
    <!-- next line ensures enough white spact to force
         page to top of screen when 'Contact' link is
         clicked. Without this, lower part of 'About'
         page shows at top of 'Contact' page. -->
    <p class="filler"></p>
  </footer>

  <!-- end copyright -->

</div>
<!-- end main content section -->
            
          
!
            
              img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

.lcassettai-navbar{
  transition: all ease 0.3s;
  z-index:999; // Don't need !important
  top:0px;
  left:0px;
  position:fixed;
  background: white; // Don't need important
  border-bottom:1px solid rgba(0,0,0,03);
  box-shadow: -2px 5px 19px -3px rgba(0,0,0,0.75);
}

#logo {
  font-family: Marcellus;
  font-size: 28px;
  color: black;
  font-weight: bold;
}

.menu-items {
  font-family: Marcellus;
  font-weight: bold;
}

#message {
  margin-top: 30px;
  font-family: Marcellus;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

#main-content {
  min-height: 1200px; 
  background-color: white;
}

.filler {
  min-height: 375px;
}


.image-shadow {
  box-shadow: 5px 5px 3px #aeaeae;
  border: 1px solid black;
  border-radius: 3px;
}

#portfolio, #about, #contact {
  font-family: Marcellus;
  padding: 3em;
}

figure {
  margin: 15px;
  border-style: solid;
  border-width: 1px;
  color: black;
  box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}

figcaption {
  text-align: center;
  padding: 7px;
/*   text-align: center; */
}
.section-padding {
  margin-top: 1.75em;
}

#resize {
  height: 100%;
  width: 100%;
}
/*  text animations */
@-webkit-keyframes fade-in {
    from{
        opacity:1;
        top: 0px;
    }
    to {
        opacity:0;
        top: -165px;
    }
}

.animation-text {
  font-family: Antic;
  font-size: 24px;
/*   font-weight: bold;  */
  text-align: center;
  color: #000080;  

}
.text-animated-one{
  position: relative;
  margin-top: 126px;
  -webkit-animation: fade-in 3s infinite;
}

.text-animated-two {
  opacity:0;
  position:relative;
  margin-top: 56px;
  -webkit-animation: fade-in 5s infinite;
  -webkit-animation-delay: 0.5s;
}

.text-animated-three {
  opacity:0;
  position:relative;
  margin-top: -56px;
  -webkit-animation:fade-in 7s infinite;
  -webkit-animation-delay:0.5s;
}
/* end text animations */

.social-slide {
	height: 48px;
	width: 48px;
	margin: 10px;
	float: left;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}

.social-slide:hover {
	background-position: 0px -48px;
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}

/* social images */
.linkedin-hover {
	background-image:
 url('https://s31.postimg.org/v8j3hyiaz/linkedin_hover.png');  
}
.facebook-hover {
	background-image:
 url('https://s31.postimg.org/c8v1nuedn/facebook_hover.png');  
}
.google-hover {
	background-image:
 url('https://s32.postimg.org/dj6oi7xol/google_hover.png');  
}
.instagram-hover {
	background-image:
 url('https://s31.postimg.org/4rsb24nor/instagram_hover.png');  
}

h1{
	color: #000;
	font-size: 28px;
	font-weight: bold;
/* 	text-transform: uppercase; */
	margin-bottom: 5px;
}

h2{
	font-weight: normal;
	font-size: 10px;
	text-transform:uppercase;
	color:#aaaaaa;
	margin-bottom:15px;
	border-bottom:1px solid #eeeeee;
	margin-bottom:15px;
	padding-bottom:10px;
}

footer {
  padding-top: 35px;
  text-align: center;
  color: gray;
}


            
          
!
            
                window.addEventListener('scroll', scrollDowmNav);
  
  function scrollDowmNav(){  
  scrollY = window.pageYOffset ;

  if(scrollY > 750 ){
    $('.navbar').addClass("lcassettai-navbar");
    }
    else if (scrollY < 700) {
      $('.navbar').removeClass("lcassettai-navbar");
    }
  }
            
          
!
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