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.

            
              <!DOCTYPE html>
<html lang="en">

<head>
  <title>B's Product Landing Page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">

</head>

<body>
  <header id="header">
    <nav id="nav-bar">
      <img id="header-img" src="https://png.icons8.com/doodle/50/000000/steak.png" alt="steak icon from icons8.com" />
      <div id="logo">
        <h4>Great Steaks</h4>
      </div>
      <ul>
        <li><a href="#pricing" class="nav-link">Pricing</a></li>
        <li><a href="#recipe" class="nav-link">Recipe</a></li>
        <li><a href="#company" class="nav-link">Our Company</a></li>
      </ul>
    </nav>
  </header>
  <form id="form" action="https://www.freecodecamp.com/email-submit" method="get">
    <div class="container">
      <h2>The BEST steaks in the universe!</h2>
      <input id="email" type="email" name="email" placeholder="Enter your email" required></input>
      <input id="submit" type="submit" class="button button5"></input>
    </div>
    <section id="company">
      <div class="second-container">
        <div id="d1">
          <img src="https://png.icons8.com/dusk/80/000000/food-and-wine.png" alt="wine and cheese icon from icons8.com" />
        </div>
        <div id="d2">
          <img src="https://png.icons8.com/dusk/80/000000/natural-food.png" alt="icon from icons8.com" />
        </div>
        <div id="d3">
          <img src="https://png.icons8.com/office/80/000000/cow.png" alt="cow icon from icons8.com" />
        </div>
        <div id="d4">
          <h3>Pairs Great with Wine & Cheese</h3>
          <p>Duis non ex at dui congue malesuada vitae sit amet ligula. Fusce in augue a nulla iaculis aliquam ut ut dui. Suspendisse eleifend dolor urna, at pharetra arcu condimentum posuere.</p>
        </div>
        <div id="d5">
          <h3>100% USDA Organic</h3>
          <p>Proin pharetra ultricies tortor, ac dapibus nisi molestie ac. Nulla eget lorem tellus. Nulla ut mi ex. Morbi id tortor accumsan odio sagittis maximus et ut ipsum.</p>
        </div>
        <div id="d6">
          <h3>Farm Raised Cows</h3>
          <p>Nullam euismod ut diam in ullamcorper. In semper eros ac consectetur facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin quam orci, gravida id dui vel, dapibus aliquam enim. Sed ut tempus
            nibh, a porttitor tortor.</p>
        </div>
      </div>
    </section>

    <section id="recipe">
      <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/kbpIYAnt-7k" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </section>

    <section id="pricing">
      <div id="prices">
        <div id="boxed">
          <h2>Large Order</h2>
          <h3>$49.99</h3>
          <p>Vestibulum ante ipsum primis in faucibus orci luctus et</p>
          <br>
          <br>
          <button class="button button5">Select</button>
        </div>
        <div id="boxed">
          <h2>Medium Order</h2>
          <h3>$39.99</h3>
          <p>Vestibulum ante ipsum primis in faucibus orci luctus et</p>
          <br>
          <br>
          <button class="button button5">Select</button>
        </div>
        <div id="boxed">
          <h2>Small Order</h2>
          <h3>$29.99</h3>
          <p>Vestibulum ante ipsum primis in faucibus orci luctus et</p>
          <br>
          <br>
          <button class="button button5">Select</button>
        </div>
      </div>
    </section>

</body>

</html>
            
          
!
            
              #nav-bar {
  width: 100%;
  padding: 0;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  position: fixed;
  background-color: #455a64;
  border-bottom: 1px solid #212121;
  display: flex;
}

#nav-bar ul {
  list-style: none;
  margin: auto;
  margin-right: 10px;
}

#nav-bar li {
  float: right;
}

#nav-bar li a {
  display: inline-block;
  padding: 10px 30px;
  text-decoration: none;
  color: #fafafa;
  transition: 0.3s;
}
@media screen and (max-width: 600px) {
  #nav-bar li a {
    float: none;
    width: 100%;
  }
}

#nav-bar li a:hover {
  color: #9e9e9e;
}

#header-img {
  display: flex;
  flex-direction: row;
  width: 50px;
  height: 50px;
  background-size: 100%;
}

#logo {
  display: flex;
  flex-direction: row;
  padding-left: 6px;
  height: 50px;
  width: 150px;
  place-items: center;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-family: "Pacifico", cursive;
  font-size: 24px;
}

input[type="email"] {
  max-width: 250px;
  width: 100%;
  padding: 3px;
}

input[type="submit"] {
  max-width: 110px;
  width: 100%;
  height: 28px;
}
.button {
  border: none;
  color: #212121;
  padding: 6px 18px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  margin: 8px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}
.button5 {
  background-color: #212121;
  color: white;
  border: 1px solid #212121;
}
.button5:hover {
  background-color: #555555;
  color: white;
}

.container {
  padding: 100px 0 25px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.second-container {
  display: grid;
  /* Auto for the icon and the rest for the text */
  grid-template-columns: auto 1fr;
  /* Just to show you don't really need the rows, but it's not bad to be explicit */
  /* Not sure about this */
  justify-items: start;
  /* Vertically centering */
  align-items: center;
  /* Give the grid items some space you can use grid-gap for both columns and rows or grid-column-gap and grid-row-gap */
  grid-gap: 1rem;
  grid-template-areas:
    "icon1 text1"
    "icon2 text2"
    "icon3 text3";
  /* Make the text wrap-able */
  max-width: 55em;
  height: 31em;
  margin: 0 auto;
  /* Give the grid some padding on each side so it doesn't bump up against the edged on small screens */
  padding: 0 4rem;
}

#d1 {
  grid-area: icon1;
}
#d2 {
  grid-area: icon2;
}
#d3 {
  grid-area: icon3;
}
#d4 {
  grid-area: text1;
}
#d5 {
  grid-area: text2;
}
#d6 {
  grid-area: text3;
}

body {
  background: linear-gradient(-90deg, #90a4ae, #bdbdbd);
  font-family: "Montserrat", sans-serif;
  margin: 0;
  padding-bottom: 100px;
}

#video {
  display: block;
  margin: 0 auto;
  padding-bottom: 70px;
}

#prices {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 600px;
  height: 380px;
  margin: 0 auto;
}

#boxed {
  text-align: center;
  width: 180px;
  border: 2px solid black;
  background-color: white;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
}

            
          
!
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