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

<!-- Fixed navbar -->
<!-- <nav class="navbar navbar-fixed-top"> -->
<nav class="navbar navbar-fixed-top ">
  <div class="container-fluid">
    <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>
  </div>
</nav>

<!-- background image -->
<div id="main-content" class="bg container-fluid img-responsive">
  <img src='https://s31.postimg.org/6zkw8xo57/hi_peaks.png' class="bg">

  <div class="container-fluid">
    <!-- text animations -->
    <div class="animation-text col-xs-10">
      <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>
</div>

<div id="main-content" class="container-fluid col-xs-12">
  <div id="portfolio">
    <div class="row">
      <h1 class="section-padding col-xs-12">Portfolio</h1>
      <div class="well col-xs-4">
        <h3>Group 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat voluptatem quo earum tenetur ipsam recusandae doloribus perferendis repellat sint suscipit et aliquid aspernatur eligendi aperiam cumque quae accusantium, cupiditate reiciendis.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat voluptatem quo earum tenetur ipsam recusandae doloribus perferendis repellat sint suscipit et aliquid aspernatur eligendi aperiam cumque quae accusantium, cupiditate reiciendis.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat voluptatem quo earum tenetur ipsam recusandae doloribus perferendis repellat sint suscipit et aliquid aspernatur eligendi aperiam cumque quae accusantium, cupiditate reiciendis.</p>
      </div>
      <div class="well col-xs-4">
        <h3>Group 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat voluptatem quo earum tenetur ipsam recusandae doloribus perferendis repellat sint suscipit et aliquid aspernatur eligendi aperiam cumque quae accusantium, cupiditate reiciendis.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat voluptatem quo earum tenetur ipsam recusandae doloribus perferendis repellat sint suscipit et aliquid aspernatur eligendi aperiam cumque quae accusantium, cupiditate reiciendis.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat voluptatem quo earum tenetur ipsam recusandae doloribus perferendis repellat sint suscipit et aliquid aspernatur eligendi aperiam cumque quae accusantium, cupiditate reiciendis.</p>
      </div>
      <div class="well col-xs-4">
        <h3>Group 3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat voluptatem quo earum tenetur ipsam recusandae doloribus perferendis repellat sint suscipit et aliquid aspernatur eligendi aperiam cumque quae accusantium, cupiditate reiciendis.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat voluptatem quo earum tenetur ipsam recusandae doloribus perferendis repellat sint suscipit et aliquid aspernatur eligendi aperiam cumque quae accusantium, cupiditate reiciendis.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat voluptatem quo earum tenetur ipsam recusandae doloribus perferendis repellat sint suscipit et aliquid aspernatur eligendi aperiam cumque quae accusantium, cupiditate reiciendis.</p>
      </div>
    </div>
  </div>
  <!-- end portfolio -->

  <!-- about section -->
  <div id="about" class="row">
      <h1 class="section-padding style=" text-align: center>High Peaks Design Philosophy: Design > Build >  Release > Track > Support</h1>
      </br>
      <div class="container-fluid col-xs-4">
        <img 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="row col-xs-4">
        <img 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="container-fluid col-xs-4">
        <img 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 id="message" class="well container col-xs-9 col-xs-offset-1">
      <p>You have a great story to tell. And over time, as your organization grows, that story will change. We'll be there by your side all the way.</p>
    </div>
  <!-- end about -->

    <!-- dummy div to add space and link above contact form .well class below-->
    <div id="contact" class="container-fluid">
      <div class="row">
      </div>
    </div>

  <!-- contact form -->
  <div id="contact" class="well container-fluid ">
      <!-- vertically stacked social icons -->
      <div class="col-xs-1" style="padding-top: 65px">
        <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 -->

      <h1 class="col-xs-offset-2 col-xs-8">Contact Us</h1>
      <div class="row col-xs-8 col-xs-offset-2">
        <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>

<div id="copyright">
  </br>
  <p style="text-align: center; color: gray">&copy2016 High Peaks Design Group, Inc.</p>
</div>
<!-- main content -->

<script src="validator.js"></script>
<script src="contact.js"></script>
            
          
!
            
              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 {
  font-family: Marcellus;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}
#main-content {
  padding-bottom: 800px; 
  background-color: white;
}

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

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

.section-padding {
  margin-top: 1.75em;
}

/*  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;
}





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

Console