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>

<link href="https://fonts.googleapis.com/css2?family=Bungee&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">

<main id="main-doc">
 <div id="top">
<nav id="nav-bar">
  <header id="header">
  <a class="nav-link" href="#cmt">Home</a>
  <a class="nav-link" href="#field">Field</a>
  <a class="nav-link" href="#laboratory">Laboratory</a>
  <a class="nav-link" href="#administration">Administration</a>
  <a class="nav-link" href="#engineering">Engineering</a>
  <a class="nav-link" href="#reporting">Reporting</a>
    </a></header></nav></div>
<section class="main-section">
  <div id="cmt">
    <img id="cmtphoto" src="https://res.cloudinary.com/dgxqbvbdv/image/upload/v1600864683/Fourth%20Project/escavation_ijlxdc.webp">
   <header id="cmtinfo">
    <h1 id="cmttitle">Construction Materials Testing</h1>
      <p id="cmttext">When beginning a construction project, many factors are put into play.  There is design, bidding, development and closing (among other things).  The contractor who is actually building the structure follows a Quality Control structure.  This is to assure the client that the work being performed is meeting State and City requirements and standards.  There is also Quality Assurance practices, which is an oversight view, coming from outside resources.  Thus, every construction project involves a number of testing and inspection.</p>
    </header></section></div>
  
<section class="main-section">
  <div id="field">
    <img id="fieldphoto" src="https://res.cloudinary.com/dgxqbvbdv/image/upload/v1600865724/Fourth%20Project/field_technician_vz0td3.jpg">
  <header id="fieldinfo">
    <h1 id="fieldtitle">Field</h1>
    <p id="fieldtext">Testing in the field can be divided into a couple different aspects.  There will be testing at time of placement.  This is primarily determining whether or not the material being used is meeting specificiations as required by the engineer during the development of project plans.  The other type of testing will be upon the structure being built, once it is finished.  Inspections, on the other hand, are typically taken during the entire duration of a project.  These activities involve mostly observations.  Ocassionally measurements will be made by inspectors, in order to clarify a structure meets plan design.  Mostly these inspections are recordings, through photos and dialogue.  If a requirement from the engineer is not being met, inspectors have the authority to halt construction until the descrepancy is reviewed and actions taken by all parties responsible.</p>
    </header></section></div>
   
<section class="main-section">
  <div id="laboratory">
    <img id="labphoto" src="https://res.cloudinary.com/dgxqbvbdv/image/upload/v1600866091/Fourth%20Project/laboratory_testing_qkygcd.jpg">
  <header id="laboratoryinfo">
    <h1 id="laboratorytitle">Laboratory</h1>
    <p id="laboratorytext">Materials used for construction will need more advanced testing that cannot be performed in the field.  This is when laboratories come in hand.  Similar to field testing, lab tests are mostly for checking material meets the standards as specified by the engineer.  There is also testing from field samples taken at time of placement.  Concrete cylinders and asphalt cores are specimens removed from field structures built.  Compression, shear and absorption procedures will be performed in the lab.  Reconstructed structures will also be made in a laboratory, under a much smaller scale.  These are tests to verify under what conditions materials must be in meeting optimum conditions.</p>
    </header></section></div>
    
<section class="main-section">
  <div id="administration">
    <img id="adminphoto" src="https://res.cloudinary.com/dgxqbvbdv/image/upload/v1600867581/Fourth%20Project/office_admin_a9miwu.jpg">
  <header id="administrationinfo">
    <h1 id="administrationtitle">Administration</h1>
    <p id="administrationtext">Different tests fall in separate billing costs.  Certain certifications are required of technicians and inspectors to peform test and observations.  There are also many types of meetings to organize amongst personell on a project.  This is where administration plays a big role.  Scheduling and roadmaps of organization are needed at a project level.  Timelines must be kept and deadlines have to be met, in order for the construction to continue at the expected rate.  Keeping records of activities performed and aligning training for new employees is also a big factor for office admins.  Paperwork is vital in reataining information needed for future reference.  Everything and everyone must be accounted for when playing fundamental roles of projects at this scale.</p>
    </header></section></div>
    
  <section class="main-section">
    <div id="engineering">
      <img id="engineerphoto" src="https://res.cloudinary.com/dgxqbvbdv/image/upload/v1600868838/Fourth%20Project/engineer_stamping_fkupfh.jpg">
  <header id="engineeringinfo">
    <h1 id="engineeringtitle">Engineering</h1>
    <p id="engineeringtext">Civil Engineers are the backbone of any construction project.  They are the ones who intially design the prints, according to what the client is needing.  The plan of what kind of testing, and how often it is to be performed is outlined by the engineer.  They are also responsible for approving results of the testing, by stamping it with their seal.  This may call for re-testing or removal of structure built.  That all depends on the contractor decisions, as it may affect the cost of project build.  Engineers also have the authority to halt construction, or re-design the plans, if certain aspects call for it.  They are the end-all and say-all for any construction project.</p>
      </header> </section></div>
  
  <section class="main-section">
    <div id="reporting">
      <img id="engineerphoto" src="https://res.cloudinary.com/dgxqbvbdv/image/upload/v1600869010/Fourth%20Project/filing_docs_r3e2wg.jpg">
  <header id="reportinginfo">
    <h1 id="reportingtitle">Reporting</h1>
    <p id="reportingtext">Paper trails are vital to any project for construction.  Every piece of equipment used must have documentation, verifying authenticity and frequency of calibrations.  Technicians and inspector are also required to be certified in the areas they perform work.  Testing results need to be accounted for, in order for all parties to determing what is causing failures.  Each lab must be accredited by outside organizations, in clarifying their compentency and effeciency in performing tests.  Billing is also a key factor when accumulating documents.  There must be records of all time, equipment and tests performed, in order for bidding items to be met by the client's request.</p>
      </header> </section></div>
  
  </main>
              
            
!

CSS

              
                *{
  margin: 0px;
}
#main-doc{
  width: 100%;
  height: 100vh;
}
#header{
  font-family: Bungee;
  color: black;
  }
#nav-bar {
  background-color: gray;
  overflow: hidden;
  float: left;
  color: white;
  text-align: left;
  color: red;
  display: inline;
  padding: 8px;
  font-size: 17px;
  position: fixed;
  top: 0;
  width: 100%;
}
#main-sction{
  
}
#cmt{
  
}
#cmttitle{
  font-family: Bungee;
  color: black;
  font-size: 27px;
}
#cmttext{
  background-color: #4CAF50;
  justify-content: center;
  padding: 40px 1200px 40px 40px;
  font-family: 'Fredoka One', cursive;
  color: black;
  font-size: 1.5rem;
}
#fieldtitle{
  font-family: Bungee;
  text-color: red;
  font-size: 27px;
}
#fieldtext{
  background-color: #4CAF50;
  justify-content: center;
  padding: 40px 1200px 40px 40px;
  font-family: 'Fredoka One', cursive;
  color: black;
  font-size: 1.5rem; 
}
#laboratorytitle{
  font-family: Bungee;
  color: black;
  font-size: 27px;
}
#laboratorytext{
  background-color: #4CAF50;
  justify-content: center;
  padding: 40px 1200px 40px 40px;
  font-family: 'Fredoka One', cursive;
  color: black;
  font-size: 1.5rem; 
}
#administrationtitle{
  font-family: Bungee;
  color: black;
  font-size: 27px;
}
#administrationtext{
  background-color: #4CAF50;
  justify-content: center;
  padding: 40px 1200px 40px 40px;
  font-family: 'Fredoka One', cursive;
  color: black;
  font-size: 1.5rem; 
}
#engineeringtitle{
  font-family: Bungee;
  text-color: black;
  font-size: 27px;
}
#engineeringtext{
  background-color: #4CAF50;
  justify-content: center;
  padding: 40px 1200px 40px 40px;
  font-family: 'Fredoka One', cursive;
  color: black;
  font-size: 1.5rem;
}
#reportingtitle{
  font-family: Bungee;
  color: black;
  font-size: 27px;
}
#reportingtext{
  background-color: #4CAF50;
  justify-content: center;
  padding: 40px 1200px 40px 40px;
  font-family: 'Fredoka One', cursive;
  color: black;
  font-size: 1.5rem;
}


              
            
!

JS

              
                
              
            
!
999px

Console