Pen Settings

HTML

CSS

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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

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

<nav id="navbar">
  <ul>
    <li><a href="#welcome-section"> Welcome</a></li>
    <li><a href="#projects"> Projects</a></li>
    <li><a href="#contact"> Contact</a></li>
  </ul>
</nav>

<div id="welcome-section" class="bienvenida">
  <div>
  <h1>Hello i´m Nety.</h1>
  <p>a web developer</p>
  </div>
</div>
    
<div id="projects" class="trabajos">
  <h2 >Those are some of my projects</h2>
  <div class="projects-container">
  <figure>
    <div class="project">
    
      <a href="https://s.codepen.io/nety97/debug/LaEaoP/ZoMBaKOPjbDk" target="_blank" class="project-tile">  <p>Tribute page</p>
        <img class="img-projects" src="https://github.com/Nety97/tribute-page/blob/master/tributepage.jpg.png?raw=true" alt="Tribute-page">
        
       </a>   
    </div>
        </figure>
    <figure>
    <div class="project">
    
      <a href="https://s.codepen.io/nety97/debug/ZPaRBR/PBrNWNLBGaXA" target="_blank" class="documentation">  <p>Technical Documentation Page</p>
        <img class="img-projects" src="https://github.com/Nety97/tribute-page/blob/master/documentation.jpg.png?raw=true" alt="Documentation-page">
       </a>   
    </div>
       </figure>
       </div>
  <div class="projects-container2">
    <figure>
    <div class="project">
    
      <a href="https://s.codepen.io/nety97/debug/gEPrve/VGAWNwgKQEer" target="_blank" class="form">  <p>Survey Form</p>
        <img class="img-projects" src="https://github.com/Nety97/tribute-page/blob/master/survey-form.jpg.png?raw=true" alt="Surve-form">
       </a>   
    </div>
        </figure>
    
    <figure>
    <div class="project">
    
      <a href="https://s.codepen.io/nety97/debug/KEXXyG/yYMyLOxqYPRk" target="_blank" class="landing-page">                                               <p>Product Landing Page</p>
        <img class="img-projects" src="https://github.com/Nety97/tribute-page/blob/master/product.jpg.png?raw=true" alt="Product-landing-page">
       </a>   
    </div>
        </figure>
  
            </div>
               </div>
    
    <div id="contact" class="final">
      <h3>Let's get in contact<h2>
        <div class="details">
         <a id="profile-link" href="https://codepen.io/nety97/" target="_blank" >
         <img class="details-img" src="data:image/png;base64,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" alt="Codepen"> </a>
          
          <a  href="https://github.com/Nety97" target="_blank">
          <img class="details-img" src="data:image/png;base64,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" alt="github"> </a>
    
          <a href="mailto:netanielw@gmail.com">
          <img class="details-img" src="data:image/png;base64,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"> </a>          
          
          
          
        </div>
    <footer>
        </div>
    


              
            
!

CSS

              
                html {
  scroll-behavior: smooth;
}
body{
  margin: 0;
}
nav{
  width: 100vw;
  position: fixed;
  left: 0px;
  background-color: yellow;
  top: 0px;
  height: 70px;
    }
nav li{
  display: inline;
  margin: 30px;
  font-size: 25px;
  left: ;
}
@media screen and (max-width: 500px){
  nav{
    display:  none;
  }
}
a{
  text-decoration: none;
  color: green;
}
h1{
  color: purple;
}
.bienvenida{
  height: 100vh;
  width: 100%;
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center; 
}
.bienvenida p{
  text-align: center;
}
.trabajos{
  width: 100%;
  background-color: orange;
  display: grid;
  overflow-x: hidden;
 
}
.trabajos h2{
  color: purple;
  margin-top: 40px;
  text-align: center;  
  font-size: 30px;
}
.trabajos a{
  text-decoration: none;
  color: purple;
  font-size: 25px;
  
}


.img-projects{
  width: 460px;
  border-radius: 10px;
  border: 3px solid yellow;
}
@media screen and (max-width: 500px){
  .img-projects{
    width: 300px;
    border: 0px; 
  }
}
.projects-container{
  width: 100vw; 
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 80px;
}
.projects-container2{
  width: 100vw; 
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
.project{
  margin-right: 20px;
  width: 460px; 
  text-align: center;
  
}
.final{
  width: 100%;
  background-color: purple;
  display: grid;
}
.final h3{
  font-size: 30px;
  text-align: center;
  margin-top: 30px;
  color: white;
}
.details-img{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 60px;
}
.details{
  display: flex;
  justify-content: center;
}
              
            
!

JS

              
                
              
            
!
999px

Console