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.

            
              

<body>
  <header>
    <div class="container">
      <div id="branding">
        <h1>Fordyce Custom Carpentry</h1>
      </div>
      <nav>
        <ul>
          <li class="current"><a href="index.html">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Gallery</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>

  </header>
  <section id="showcase">
    <div class="container">
      <h1>Finish Carpentry at its finest in Santa Barbara</h1>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus quos quidem excepturi nostrum in, quas dignissimos non numquam a laboriosam!</p>
    </div>
  </section>
  
    
  
  <section id="boxes">
    <div class="container">
      <div class="box">
        <img src="./Images/Entry_Door.jpg" alt="">
        <h3>Custom Entryway</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad, id.</p>
      </div>
      <div class="box">
          <img src="./Images/cabinet.jpg" alt="">
        <h3>Cabinetry</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, nam!</p>
      </div>
      <div class="box">
          <img src="./Images/Deck.jpg" alt="">
        <h3>Deck and Railing</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, voluptatum voluptate!</p>
      </div>
    </div>
  </section>
  <section id="About">
    <div class="container" id="about">
      
      <h1>Fordyce Custom Carpentry</h1>
      <h3>Darin Fordyce</h3>
      <h5>-CEO</h5>
      <div class="owner">
        <img src="./Images/Darin Fordyce Carpenter.jpg" alt="">
      </div>
      <p id="firstP">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus at ex quas enim, perferendis sed accusantium officiis eveniet nostrum vel maiores qui molestiae dolorem rerum hic doloremque dolores, optio cupiditate quam, in nemo quasi distinctio vitae! Atque ab maxime aperiam vero quis distinctio ipsa quod, modi natus quaerat nam numquam reprehenderit, eveniet doloribus libero esse a? Vero nobis necessitatibus optio, magnam asperiores qui aperiam praesentium corrupti quisquam veritatis molestiae repellat vel reiciendis esse fugiat alias expedita neque amet rerum autem nostrum. Ipsum eos illo dolore odit eaque, dolorem exercitationem ex aspernatur commodi, perferendis eius iure deleniti aliquam corrupti deserunt maiores eveniet culpa. </p>
        <p>Aperiam nemo doloremque minima consectetur magnam ex corrupti nulla culpa, distinctio officiis. Reiciendis ea voluptas nam aut cupiditate eveniet neque illo cum, corporis, culpa at omnis nostrum qui? Similique debitis fugit aliquam iure recusandae exercitationem unde mollitia obcaecati repudiandae labore eveniet, error quia esse natus minima nesciunt nemo! Voluptatibus aut sed asperiores, ullam nostrum eum aperiam repellendus neque id, atque possimus illo! Tempore rerum dolorum explicabo consequuntur libero veniam fugiat cumque quisquam nemo nulla, sed aliquid? Neque voluptatem consectetur temporibus numquam eveniet hic nobis quo aperiam. Atque ipsa fugit voluptate quae ad dignissimos! Recusandae alias qui pariatur, provident, minima deserunt similique odit reprehenderit repellat incidunt suscipit, quas ab omnis consectetur! Atque iure distinctio dolor facilis nesciunt aperiam ut, vero velit itaque deserunt unde voluptate debitis temporibus nam minus aliquid, asperiores molestiae modi iste quae? Explicabo ipsam voluptatum in dolorem eaque aspernatur enim quam? Ipsum laborum error doloremque earum!</p>
    </div>
  </section>
  <section id="gallery">
    <div class="container" id="wrapper">
        <div class="main-img">
            <img src="./Images/temp1.jpg" id="current">
          </div>
      <div class="imgs">
        <img src="./Images/temp1.jpg" >
        <img src="./Images/temp2.jpg" >
        <img src="./Images/temp3.jpg" >
        <img src="./Images/temp4.jpg" >
        <img src="./Images/temp5.jpg" >
        <img src="./Images/temp6.jpg" >
    </div>
  </div>
</section>
  <section id="contact">
        <div class="container">
          <div class="footer">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem dicta id, ullam eos hic est in nobis veritatis inventore expedita dolore possimus reiciendis, modi aliquam. Similique dignissimos harum nesciunt repellendus at, modi, soluta optio voluptatum numquam temporibus ducimus libero dolorum exercitationem cupiditate alias? Magni aperiam ullam error consequuntur quod officia recusandae ipsum fugit, repudiandae placeat. Nesciunt nemo obcaecati, eius nostrum ratione quos quis debitis eaque exercitationem ex ab dolor aperiam ducimus dignissimos tenetur similique voluptate commodi voluptatem ad delectus necessitatibus nisi! Tempore, quos? Temporibus, delectus quidem? Quis ducimus cumque commodi labore dolorum blanditiis delectus facere fuga expedita, inventore suscipit eum quisquam harum consectetur sapiente repudiandae corporis recusandae aperiam consequuntur nihil incidunt ea, accusantium beatae maxime. Cumque accusamus porro fugit sapiente quia voluptates unde quis quos sed autem id eveniet quam molestiae dolor natus sint, quasi officia, commodi, nobis aspernatur rerum quae maiores odit. Eos rem maiores ea in ut ad, voluptas vel sequi ratione! Ut necessitatibus quidem vitae exercitationem dolor odio iusto, illo porro quos delectus. Cupiditate ex animi nostrum accusantium aspernatur autem quis illo veniam, quidem cumque error deserunt natus unde obcaecati eos impedit ut quisquam ipsam modi dolores? Excepturi beatae velit quia aliquam labore. Similique dolores laudantium delectus.</p>
          </div>
        </div>
  </section>
  
  <script src="main.js"></script>
</body>
</html>
            
          
!
            
              body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  padding:10px;
  margin:auto;
  max-width: 80%;
  
}

/* GLOBAL */
.container {
  width: 100%;
  margin:auto;
  overflow:hidden;
  
}

/* HEADER */
header {
  background: #431906;
  color: #337616;
  padding-top: 15px;
  min-height:50px;
  border-bottom:#337616 6px solid;
}

header a{
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size:16px;
  font-weight: bold;
}

header ul {
  margin:0;
  padding:0;
}

header li{
  
  display: inline;
  padding: 20px;
  margin-right: 20px;
}

header #branding {
  float:left;
}

header #branding h1 {
  margin:0;
  padding-left:20px;
}
header nav{
  float:right;
  margin-top: 10px;
}

header .highlight, header .current a{
  color: #46C211;
  font-weight: bold;
}

header a:hover{
  color:rgb(49, 53, 124);
  font-weight: bold;
}

/* SHOWCASE */

#showcase {
  min-height:840px;
  background: url('https://images.pexels.com/photos/175709/pexels-photo-175709.jpeg?cs=srgb&dl=arts-and-crafts-carpentry-wood-175709.jpg&fm=jpg') no-repeat 0 -10px;
  text-align: center;
  color:#f8f6f6;
  text-shadow: 2px 2px #103f1a;
  border-bottom:#337616 8px solid;
}


#showcase h1{
  margin-top:100px;
  font-size:55px;
  margin-bottom:10px;
}

#showcase p {
  font-size:20px;
  max-width: 70%;
  text-align: right;
  margin: auto;
}

#boxes {
  margin-top: 20px;
  min-height: 425px;
}

#boxes .box{
  float: left;
  width: 30%;
  text-align: center;
  padding: 10px;
  

}

#boxes .box img{
  max-height: 200px;
}

#boxes .box p {
  padding: 20px;
}

section #about {
  background-color: rgb(108, 155, 108);
}

section #about h5 {
  margin: -10px 0px 0px 0px;
}
section #about #firstP{
  padding-top: 70px;
}
.owner {
  float: left;
  
}
section #about img {
  padding: 15px;
  
}
section #gallery .container{
  float:clear;
  max-width: 100%;
  margin: auto;
}

#wrapper {
  width: 65%;
  
}

.main-img img{
  width: 100%;
  
}
.imgs img {
  width: 100%;
  margin: auto;
}

.imgs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  
}

/* Fade in animation */
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s ease-in 1 forwards;
}




            
          
!
            
              const current = document.querySelector("#current");
const imgs = document.querySelectorAll(".imgs img");
const opacity = 0.6;

// Set first img opacity
imgs[0].style.opacity = opacity;

imgs.forEach(img => img.addEventListener("click", imgClick));

function imgClick(e) {
  // Reset the opacity
  imgs.forEach(img => (img.style.opacity = 1));

  // Change current image to src of clicked image
  current.src = e.target.src;

  // Add fade in class
  current.classList.add("fade-in");

  // Remove fade-in class after .5 seconds
  setTimeout(() => current.classList.remove("fade-in"), 500);

  // Change the opacity to opacity var
  e.target.style.opacity = opacity;
}

            
          
!
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