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 rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
<main id="main-doc">
  <nav id="navbar">
    <header id="title">Security Officer Orientation</header>
    <img id="header-img" src="https://www.thespecialistsltd.com/sites/default/files/Security_Officer_Badge.jpg" alt="badge">
    <ul>
      <li><a class="nav-link" href="#Introduction">Introduction</a></li>
      <li><a class="nav-link" href="#Mental_Preparedness">Mental Preparedness</a></li>
      <li><a class="nav-link" href="#Physical_Demands">Physical Demands</a></li>
      <li><a class="nav-link" href="#Tools_of_the_Trade">Tools of the Trade</a></li>
      <li><a class="nav-link" href="#Requirements">Requirements</a></li>
      <li><a class="nav-link" href="#What_to_Expect">What to Expect</a></li>
    </ul>
  </nav>
  <div></div>
  <section class="main-section" id="Introduction">

    <header>Introduction</header>
    <img id="intro-img" src="https://hainesagency.com/wp-content/uploads/2014/12/Haines-staff.jpg" alt="badge">
    <p>My name is <code>Scott</code>, I've spent several years in the security field from entry level officer to supervisor to area manager. I've worked in armed and unarmed positions, inside and outside positions, days as well as nights, at desks and on beats. In this tutorial I'll walk you through many of the situations I've encountered and explain, as best I can, how I handle dangerous or unpredictable circumstances.</p>
  </section>
  <section class="main-section" id="Mental_Preparedness">

    <header>Mental Preparedness</header>
    <img id="mp-img" src="https://th.bing.com/th/id/OIP.NVr2kM-YPKrAXgPOxE_jYAAAAA?pid=Api&rs=1" alt="security officer">
    <p>Sometimes it may seem difficult to keep your composure while you stand by and let a stranger curse and spit at you but this is part of the mental hurdles you must overcome.</p>
    <ol>
      <li>Those who are rude for no apparent reason</li>
      <li>Those who are angry for no apparent reason</li>
      <li>Those who are angered by the rules you were hired to enforce</li>
      <li>Those who were angered or frusterated by circumstances beyond your control</li>
      <li>Those who intend to do harm to you or the patrons of the establishments under your charge</li>
    </ol>
    <p>Some of these situations may seem unlikely but, in fact, you will probably face at least one, if not more, on a daily basis.</p>
    <p><code>Situational awareness</code> is probably your best mental tool to be ready for most circumstances you may face. Siruational awareness is more than 'spotting dangers', being aware of the people around you, listening for harsh language that could excalate into arguements or even fights are examples of situational awareness. One of my favorite sayings is "It's best to put out a grass fire than to wait until it sets the forest ablaze". If you hear a disturbance, its always best to approach in a helpful manner instead of a confrontational manner. "Can I help you" will alway's be received better than "HEY!!, Whats going on?". How your patrons receive you on their initial encounter will serve you well in any situation.</p>
    <p>Another important mental tool is <code>respect</code>. If you can't show respect to patrons who disrespect you, Security may not be the feild for you. Patrons will push you just to get a reaction out of you and how you react determines your effectiveness as an official representing your customer and your future employment with them. Always stay in control of your emotions!</p>
  </section>
  <section class="main-section" id="Physical_Demands">

    <header>Physical Demands</header>
    <img id="pd-img" src="https://th.bing.com/th/id/OIP.Wj1bh-B7eYAwfIkJ2C0SyQHaEL?pid=Api&rs=1" alt="security officer">
    <ol>
      <li>Walking</li>
      <li>Standing</li>
      <li>Sitting</li>
      <li>Stooping</li>
    </ol>
    <p><code>Walking</code> 4/5 miles per shift isnt an uncommon occurance. In fact, I've walked up to 11 miles in a normal shift on a daily basis. Comfortable shoes is a must. Staying situationally aware while sitting for 8 or 9 hours isn't uncommon either. Watching patrons come and go while visually inspecting them for any weapons is a common task no matter your working posture.</p>
    <p>You may also be assigned to watching CCTV for hours on end. Be sure to bring plenty of coffee, catching a nap while the boss is gone isn't an option!!</p>
  </section>
  <section class="main-section" id="Tools_of_the_Trade">

    <header>Tools of the Trade</header>
    <img id="tools-img" src="https://officerd.files.wordpress.com/2014/07/multi-tool9.jpg" alt="security officer">
    <p>There are many Security jobs and almost as many tool requirements, both <code>mental</code> tools and <code>physical</code> tools. ain this section we will go over a few os the more common tools you may need for any job in the Security field.</p>
    <ol>
      <li>Flashlight</li>
      <li>Uniform</li>
      <li>Gun</li>
      <li>Defensive Weapons</li>
      <li>Honesty</li>
    </ol>
    <p>Your <code>flashlight</code> is one of your most common tools. A flashlight may seem innocuous but this is a very important tool for many unarmed positions. Being in good working order may go without saying but often times batteries loose power so slowly you may not recognize the lose of light. Another use for a simple flashight is it's ability to be used for defensive measures. It's best to "Walk softly and carry a big stick" as the saying goes and as accordiing to your employer's requirements a large flashlight may be the only thing between you and an intruder, so when you buy a flashlight keep this in mind.</p>
    <p>Your <code>uniform</code> may not be your typical tool but it distinguishes you as an official representing the establishment the patrons are visiting. Keep your uniforms wrinkle free and clean. "Look like you belong" and most will treat you with a certain amount of respect for that reason alone.</p>
    <p>If your customer requires you to carry a <code>gun</code> this means your in a dangerous area. Your gun may be the only thing between an armed intruder and your going home to your family. Always keep you, your gun and your holster in tip-top shape. When you are in an armed position you will be the first person someone intent on harm will target so extra vigilance and a calm mindset is as important as efficiency with your weapon.</p>
    <p>Defensive weapons can include <code>arms, legs, feet, head, mind, or anything</code> else you have your hands on that could prevent bodily injury, but non are more important than your mind. Bringing Mental preparedness back into the picture you must always have a plan for any "just in case" sitituations you may face.</p>
    <p><code>Honesty</code> is one of the most important of the tools you'll ever carry. If your employer, your customer and their partons cant trust the security officer who can they trust. You must give everyone who enter equal treatment and be no respecter of the personhood of any individual.</p>
  </section>
  <section class="main-section" id="Requirements">

    <header>Requirements</header>
    <img id="req-img" src="https://photos.demandstudios.com/getty/article/110/25/86512177.jpg" alt="security officer">
    <p>Different states have different requiremnts in as far as qualifications. Most require at least a high school diploma or G.E.D., a clean background and no drug use. Below are a few of the more common requirements for most states.</p>
    <ol>
      <li>U.S. Citizen</li>
      <li>18 Years of age(21 if an armed post)</li>
      <li>No Drug or Assault offenses</li>
      <li>Mental and Physical fitness</li>
    </ol>
    <p>Your potential employer will inform you of the specific requirements for your particular job. Many security jobs require additional training, such as graduation from a police academy or other such specialized training. Any further questions regarding requirements in your state should be directed to the agency governing security officers in your area</p>
  </section>
  <section class="main-section" id="What_to_Expect">
    <header>What to Expect</header>
    <img id="exp-img" src="https://photos.demandstudios.com/getty/article/110/25/86512177.jpg" alt="security officer">
    <p>The average Security officer should expect a rewarding carreer, as often he is the 'go-to' guy whenever someone needs someone. Below are a few things in addition you should expect from a security carreer;</p>
    <ol>
      <li>Long Hours</li>
      <li>Low Pay</li>
      <li>Thankless Days</li>
      <li>Sore Feet</li>
    </ol>
    <p>Behind a Police offecer a Security officer is one of the most important jobs at any facilty. You are counted on from everything from securing the grounds to making everyone around you feel safe and well treated. Noone ever got rich by 'walking the beat' so unless you get into the rare upper end of personnel security field or enter the management of security where it becomes more about the bottom line than the people be ready for self gradification instead of monetary gradification.</p>
  </section>
  <footer id="footer">
    <h5>Website designed and developed by TSRinc&copy for FCC.</h5>
    <ul>
      <li>Scott@tsrinc.cmm</li>
      <li>(555)555-5555</li>
      <li>TSRinc<br>1234 Main st.<br>mainville, AL. 12345</li>
    </ul>
  </footer>
    
</main>
              
            
!

CSS

              
                body {
  font-family: montserrat;
  font-size: 18px;
  max-width: 80%;
  margin-left: 10%;
  background-color: #c38e63;
}
#header-img {
  width: 50%;
  opacity: 0.5;
  margin-top: 20px;
}
#intro-img {
  height: 100px;
}
#mp-img {
  height: 100px;
}
#pd-img {
  height: 100px;
}
#tools-img {
  height: 100px;
}
#req-img {
  height: 100px;
}
#exp-img {
  height: 100px;
}
#navbar header {
  font-size: 35px;
}

#navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  background-color: #c38e63;
}

#navbar ul {
  margin-top: 100px;
  text-align: right;
  margin-right: 10px;
}
#navbar li {
  border: 1px solid;
  list-style: none;
  position: relative;
  width: 100%;
}
section {
  border: 2px solid maroon;
  margin-bottom: 20px;
  margin-left: 290px;
  background-color: rgb(255, 224, 189);
}
header {
  text-align: center;
}
ol {
  text-align: center;
}
ol li {
  border: 1px solid maroon;
  margin-right: 10%;
}
section header {
  border-bottom: 3px double maroon;
}
#footer h5 {
  text-align: center;
}
#footer ul {
  display: flex;
  justify-content: space-around;
  font-size: 10px;
  list-style: none
}
#footer {
  background-color: rgb(255, 224, 189);
  border: 5px double maroon;
}
@media only screen and (max-width: 800px) {
  #navbar ul {
    height: 207px;
    margin-left: 290px;
    margin-right: 2px;
    margin-top: -165px;
  }

  #navbar {
    position: relative;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 250px;
    border: none;
    border-bottom: 2px solid;
  }
  section {
    margin-left: 0;
  }
  #main-doc {
    position: relative;
    margin-left: 0px;
  }
}

@media (max-width: 400px) {
  code {
    margin-left: -20px;
    width: 100%;
    padding: 15px;
    padding-left: 10px;
    padding-right: 45px;
    min-width: 233px;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console