cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

            
              <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
      <title>Invocation by Rebekah Robson</title>
      <link rel="stylesheet" type="text/css"
            href="file:///Users/bexx/Documents/FCC%20Product%20Landing%20Page/css/main.css">
  </head>
  
  <body>
<!--Contains banner, logo/business name, and navigation buttons-->
    <header id="header">
      <nav id="nav-bar">
        <div id="banner">
          <img id="header-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2267257/Lemonwood%20Clock%20Logo.PNG">
          <h1>Lemonwood Clock</h1>
        </div>
        <div id="nav-buttons">
          <a href="#about" id="b1" class="nav-link">About the Artist</a>
          <a href="#video" id="b2" class="nav-link">Demo Video</a>
          <a href="#follow" id="b3" class="nav-link">Follow</a>
        </div>
      </nav>
    </header>
 
 <!--Creates the border around the main part of the page -->   
    <div id="main-border">
      
 <!--Contains images of the painting, information about the painting, 
purchase options -->     
      <div id="painting-main">
        <img id=large-view class="large-view" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2267257/invocation.jpg">
        <img id="thumb1" class="thumbnails" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2267257/invocation.jpg">
        <img id="thumb2" class="thumbnails" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2267257/IMG-8210.JPG">
        <img id="thumb3" class="thumbnails" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2267257/IMG-8209.JPG">
      
        <div id="painting-info">
          <h2>Invocation</h2>
          <p>Artist: Rebekah Robson</p>
          <p>10"x10". Acrylic on canvas.</p>
          <form id="form" action="https://www.freecodecamp.com/email-submit">
            <label id="painting-dropdown">
              Pricing and shipping options
            </label>
            <select id="dropdown-select" required>
              <option id="dd-placeholder" value="">
                Please select:
              <option value="1">
                Original Painting - $140 +shipping
              </option>
              <option value="1">
                10'x10' Print - $30 +shipping
              </option>
              
            <input id="email" type="email" name="email" placeholder="example@domain.com" required>
            <input id="submit" type="submit">               
        </form>
          </form>
        </div>
      </div>
    
<!--Contains time-lapse video of the creation of the painting. 
Copy and pasted YouTube Embed Video code and added ID
and made the static width and height responsive by changing px to 100%-->
      <div id="vid-border">
        <iframe id="video" width="100%" height="100%" 
              src="https://www.youtube.com/embed/k-lw7wmHWWA" 
              frameborder="0" allow="autoplay; encrypted-media" 
              allowfullscreen id="video">
        </iframe>
      </div>
 
 <!--Contains information about the artist and related images -->
      <div id="about">
        <h2>About The Artist<h2>
          <section id="about-content">
            <img id="portrait" class="aboutpic" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2267257/rebekahbluesweater%20copy.jpg">
            <img id="workpic" class="aboutpic" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2267257/workpic.png">
            <img id="">
            <p id="about-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod, magna eget porta condimentum, justo justo eleifend purus, at mollis nunc tellus ac urna. Duis tempor gravida massa eu interdum. Suspendisse eleifend arcu mi, ac lobortis felis tincidunt non. Sed sed pellentesque turpis. Sed vestibulum nulla id augue scelerisque, sed accumsan metus rutrum. Mauris tincidunt, mauris vel mattis convallis, nulla mi feugiat mi, sit amet pharetra neque elit quis sapien. Ut fermentum in metus ut venenatis. In aliquet nec arcu ut laoreet. In vel augue ut nibh auctor condimentum sit amet quis felis. Duis efficitur efficitur nisl, vitae molestie metus. Donec vulputate risus sit amet felis tristique facilisis.
            
          </section>
      </div>  
    
<!--Contains links to other ways to view the artist's work, get more information,
or contact the artist-->
      <div id="follow">
        <h3 id="social-media">
          Stay up to date on social media!  
        </h3> 
          <p>Blog: <a target="_blank" href="https://lemonwoodclock.wordpress.com/">
              https://lemonwoodclock.wordpress.com/</a>
            <br>
              Instagram: <a target="_blank" 
                            href="https://www.instagram.com/lemonwoodclock/?hl=en">
              @lemonwoodclock</a>  
            <br>
              Twitter: <a target="_blank" href="https://twitter.com/rsrobson?lang=en">
              @RSRobson</a>
            </p> 
      </div>
          
    </div>
  </body>
</html> 
            
          
!
            
              #nav-bar {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 25vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
  font-family: khmer mn, helvetica;
}

#banner {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2267257/weathered-wood-grain-texture2.jpg);
  background-size: cover;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#header-img {
  height: 12vw;
  align-self: center;
  border: 1px solid 	#FFE300;
  border-radius: 50%;
  background: 	#FEE800;
  box-shadow: 3px 3px 2vw #363739;
}

h1 {
  font-size: 10vw;
  margin-left: 1vw;
  padding-top: 10vw;
  color: 	#FEFDF9;
  text-shadow: 3px 3px 1.5vh #363739;
  align-self: center;
  white-space: nowrap;
}

#nav-buttons {
  background: 	#333132;
  display: grid;
  grid-template-columns: 150px 150px 150px;
  justify-content: center;
}

#nav-bar a {
  background: #53524F;
  color: #FEFDF9;
  text-decoration: none;
  margin: 3px 1.5px 3px 1.5px;
  border-radius: 5px;
  font-size: 20px;
  padding-top: 5px;
  height: 35px;
}

#main-border {
  border: 3px solid #53524F;
  margin: 2vw;
  font-family: helvetica;
}

#painting-main {
  display: grid;
  grid-template-columns: 16.5vw 16.5vw 16.5vw 50vw;
  grid-template-rows: 57vw 18vw;
  justify-items: top;
  margin-top: 22.5vw;
}

#large-view {
  width: 100%;
  margin: 2vw auto auto 2vw;
  border: 3px solid #53524F;
  padding: 2vw;
  grid-column: 1 / 4; 
}

.thumbnails {
  width: 20vw;
  margin-left: 4.5vw;
}

#thumb1 {
  grid-column: 1; 
  grid-row: 2 / 3; 
  width: 90%;
}

#thumb2 {
  grid-column: 2;
  grid-row: 2 / 3;
  width: 90%;
}

#thumb3 {
  grid-column: 3;
  grid-row: 2 / 3;
  width: 90%;
}

#painting-info {
  margin: 2vh auto auto 10vw;
  grid-column: 4 / 5;
  grid-row: 1; 
}

#form {
  display: flex;
  flex-direction: column;
}

#dropdown-select {
  margin-bottom: 1vw;
}

#email {
  margin-bottom: 1vw;
}

#submit {
  
}

/*For making iframes and its border responsively proportionate: 
I set iframes to 100% height and width in html, and in css, I 
set the width first and determined the height with: original
iframes height divided by original iframes width=x, x times 
#vid-border width. I used vw *not* vh for #vid-border height. */
#vid-border {
  border: 3px solid #53524F;
  margin: 5vw 15vw 5vw 15vw;
  padding: 2vw;
  width: 60vw;
  height: 33.75vw;
}

#about {
  margin: 0 2vw 5vw 2vw;
}

h2 {
  font-size: 4vw;
}

#about-content {
  display: grid;
  grid-template-columns: 25vw 65vw;
  grid-template-rows: 25vw 25vw;
  grid-gap: 1vw;
}

.aboutpic {
  width: 100%;
  border-radius: 50%;
}

#workpic {
  grid-column: 1 / 2;
}

#about-text {
  font-family: helvetica;
  font-size: 18px;
  font-weight: normal;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

#follow {
  margin: 0 2vw 5vw 2vw;
}

h3 {
  font-size: 3vw;
}

@media (max-width: 500px){
  #video {

  }
}
            
          
!
            
              /* This is code borrowed and adapted from 
https://codepen.io/crazyrohila/pen/kmpvg?editors=1010
I haven't started learning JavaScript yet, so I don't 
understand how this works, but I wanted to use multiple
product images for this project.
Original Code: 
var thumbs = $(".icon-images").find("img");
thumbs.click(function() {
  var src = $(this).attr("src");
  var dp = $(".display-img");
  dp.attr("src", src);
}); */

var thumbs = $(".thumbnails").find("img");
thumbs.click(function() {
  var src = $(this).attr("src");
  var dp = $(".large-view");
  dp.attr("src", src);
});
            
          
!
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