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">
  <header>Nokia 6200 User Manual</header>
  <ul>
    <li><a class="nav-link" href="#Overview_of_functions">Overview of functions</a></li>
    <li><a class="nav-link" href="#Welcome_and_quick_guide">Welcome and quick guide</a></li>
    <li><a class="nav-link" href="#Basic_operations">Basic operations</a></li>
    <li><a class="nav-link" href="#Text_entry">Text entry</a></li>
    <li><a class="nav-link" href="#Manage_phone_security">Manage phone security</a></li>
    <li><a class="nav-link" href="#Contacts">Contacts</a></li>
    <li><a class="nav-link" href="#Reference_Information">Reference information</a></li>
  </ul>
</nav>

<main id="main-doc">

  <section class="main-section" id="Overview_of_functions">
    <header>
      <h4>Overview of functions</h4>
    </header>
    <ul>
      <li>
        <h4>MULTIMEDIA MESSAGING SERVICE (MMS)</h4>
        <p>
          Your phone can send and receive multimedia messages made up of textand pictures. You can also save pictures and ringing tones to personalizeyour phone.
          You may also be able to receive polyphonic ringing tones.
          <code>Important: This feature uses shared memory.</code>
        </p>
      </li>
      <li>
        <h4>POLYPHONIC SOUND (MIDI)</h4>
        <p>
          Polyphonic sounds are used in ringing tones and message alert tones.They consist of several sound components played at the same time,
          likean actual melody through a speaker. Your phone has sound components from over 40 instruments that can be used for polyphonic sounds
          and thephone can play up to eight instruments simultaneously. The phone supportsscalable polyphonic MIDI (SP-MIDI) format.<br>
          You can receive polyphonic ringing tones via multimedia service , or download them via thegallery menu.
        </p>
      </li>
      <li>
        <h4>(E)GPRS AND EDGE</h4>
        <p>
          General packet radio service (GPRS) and enhanced general packet radioservice (EGPRS), also known as enhanced data rates for global evolution(EDGE),
          technology allows mobile phones to send and receive data over a mobile network.<br>
          Applications such as xHTML, MMS, text messaging, and Java use (E)GPRS/EDGE. Your phone supports up to three simultaneous (E)GPRS/EDGE connections.<br>
          Before using (E)GPRS technology:
        </p>
        <ul>
          <li>
            Contact your network operator or service provider for availability and subscription to the (E)GPRS service.
          </li>
          <li>
            Save the (E)GPRS settings for each of the applications used over (E)GPRS.
          </li>
        </ul>
      </li>
      <li>
        <h4>SPEAKERPHONE</h4>
        <p>
          You can use your phone as a speakerphone during a call. Do not hold thephone to your ear during speakerphone operation.
        </p>
        <ul>
          <li>
            To activate the speakerphone, press Loudsp.
          </li>
          <li>
            To deactivate the speakerphone during a call, press Handset.
          </li>
        </ul>
        <p>
          The speakerphone deactivates automatically when you end the call, attempt to make a new call, or when you connect a headset.
        </p>
      </li>
      <li>
        <h4>JAVA TM APPLICATIONS</h4>
        <p>
          Your phone supports Java TM and includes some Java applications and gameshat have been specially designed for mobile phones.
          You may be able to download new applications and games to your phone from a PC with Java installer software or from some mobile Internet services.
          <code>Important: This feature uses shared memory.</code>
        </p>
      </li>
      <li>
        <h4>FM RADIO</h4>
        <p>
          Your phone has an FM radio. You can listen to the radio through a headsetor the handsfree speaker (with the headset attached).
        </p>
      </li>
    </ul>
  </section>

  <section class="main-section" id="Welcome_and_quick_guide">
    <header>
      <h4>Welcome and quick guide</h4>
    </header>
    <p>
      Congratulations on your purchase of the Nokia 6200 mobile phone. Your phone provides many functions which are practical for daily use,
      such as a calendar, radio, alarm clock, calculator, voice recorder, speakerphone and more. Your phone can also connect to a PC,
      laptop, or other deviceusing the data cable or built-in IR port.
    </p>
    <ul>
      <li>
        <h4>GET THE MOST OUT OF THIS GUIDE</h4>
        <p>
          The following tips can help you get the most from this guide as you learn to use your phone:
        </p>
        <ul>
          <li>
            <p>
              Learn text conventions.<br>
              This user guide provides text clues to help make instructions clear andeasy to follow. These clues are called conventions.
            </p>
          </li>
          <li>
            <p>
              Follow graphic clues.<br>
              This guide uses certain icons to alert you to important information.
            </p>
          </li>
          <li>
            <p>
              Look for updates.<br>
              From time to time, Nokia updates this guide to reflect changes.
              The latestversion may be available at <a href="https://www.nokia.com/" target="_blank">www.nokia.com.</a>.
            </p>
          </li>
        </ul>
      </li>
      <li>
        <h4>UNDERSTAND WIRELESS NETWORK SERVICES</h4>
        <p>
          A number of features in this guide are called network services. These arespecial services that you arrange through your wireless service provider.
          Before you can take advantage of any of these network services, you must subscribe to them through your wireless provider
          and obtain instructions for their use from your service provider.
        </p>
      </li>
      <li>
        <h4>REGISTER YOUR PHONE</h4>
        <p>
          Make sure to register your phone at 1-888-NOKIA-2U (1-888-665-4228) so that we can serve your needs better
          if you should need to call the center or have your phone repaired.
        </p>
        <p>
          When you register your phone, you can sign up for Nokia's e-newsletter,Nokia Connections, if you would like.
          You will receive tips and tricks onusing your phone, enhancement information, and special offers.
        </p>
      </li>
      <li>
        <h4>LEARN ABOUT ACCESSIBILITY SOLUTIONS</h4>
        <p>
          Nokia is committed to making mobile phones easy to use for all individuals, including those with disabilities.
          Nokia maintains an internet site that is dedicated to accessibility solutions.
          For more information about phone features, enhancements, alternate formatuser guides, and other Nokia products designed with your needsin mind,
          visit the website or call 1-888-665-4228 for more information.
        </p>
      </li>
    </ul>
  </section>

  <section class="main-section" id="Basic_operations">
    <header>
      <h4>Basic operations</h4>
    </header>
    <ul>
      <li>
        <h4>SWITCH YOUR PHONE ON OR OFF</h4>
        <p>
          <code>Warning: Do not switch the phone on when wireless phone use isprohibited or when it may cause interference or danger.</code>
        </p>
        <ul>
          <li>
            <p>
              To turn your phone on or off, press and hold the power key 4 seconds until the display light comes on.<br>
              If the phone displays <b>Insert SIM card</b> even though the SIM card is properly inserted, or <b>SIM card not supported</b>, contact your wireless provider.
            </p>
          </li>
          <li>
            <p>
              Enter the PIN code if necessary and press OK.
            </p>
          </li>
          <li>
            <p>
              Enter the security code if necessary and press OK.
              <code>Note: If the language that appears in your display is not correct, see "Set the display language"</code>
            </p>
          </li>
        </ul>
      </li>
      <li>
        <h4>MAKE AND ANSWER CALLS</h4>
        <code>
          Note: Your phone must be switched on to use this function. Do not switch the phone on when wireless phone use is prohibited or when
          it may cause interference or danger.
        </code>
        <ul>
          <li>
            <p>
              Use the keypad.
            </p>
          </li>
          <li>
            <p>
              Use the contacts list.
            </p>
          </li>
          <li>
            <p>
              Answer or reject an incoming call.
              <code>Tip: If the HDB-4 or HDS-3 headset is connected, you can answeror end a call by pressing the key on the headset.</code>
            </p>
          </li>
          <li>
            <p>
              Answer a call with the keypad locked.
              <code>Note: When the phone is locked, calls may be possible to theemergency number programmed into your phone (for example,911).</code>
            </p>
          </li>
          <li>
            <p>
              Redial the last number.
            </p>
          </li>
          <li>
            <p>
              Adjust the earpiece volume.
            </p>
          </li>
          <li>
            <p>
              Make a conference call.
            </p>
          </li>
        </ul>
      </li>
      <li>
        <h4>BROWSE PHONE MENUS</h4>
        <p>
          Your phone features are grouped according to function and are accessed through the main menus.
          Each main menu contains sub menus and lists from which you can select or view items and customize phone features.
          You can access these menus and submenus by using the scroll method orby using a shortcut.
          <code>Note: Some features may not be available, depending on yournetwork. For more information, contact your wireless provider.</code>
        </p>
        <ul>
          <li>
            <p>
              Use the scroll method.
            </p>
          </li>
          <li>
            <p>
              Check in-phone help.
            </p>
          </li>
          <li>
            <p>
              Use a shortcut.
            </p>
          </li>
        </ul>
      </li>
    </ul>
  </section>

  <section class="main-section" id="Text_entry">
    <header>
      <h4>Text entry</h4>
    </header>
    <p>
      You can use two methods for entering text and numbers.
    </p>
    <ul>
      <li>
        <h4>STANDARD MODE</h4>
        <p>
          The standard mode is the only way to enter names into the contactslist or rename caller groups.
        </p>
        <ul>
          <li>
            <p>
              Enter text (Abc).
            </p>
          </li>
          <li>
            <p>
              Enter numbers (123).
            </p>
          </li>
          <li>
            <p>
              Enter punctuation and special characters.
            </p>
          </li>
          <li>
            <p>
              Use four-way scrolling.
            </p>
          </li>
        </ul>
      </li>
      <li>
        <h4>PREDICTIVE TEXT INPUT</h4>
        <p>
          Predictive text allows you to quickly write messages using your keypadand the built-in dictionary.
          It is much faster than using the traditional"multi-tap" method.
          For each letter of the word that you are spelling, you only need to press the corresponding key on your keypad once.
          You can use predictive text to write messages, create calendar notes, make to-do lists, and more.
        </p>
        <ul>
          <li>
            <p>
              Activate/deactivate predictive text.
            </p>
          </li>
        </ul>
      </li>
      <li>
        <h4>WRITE WITH PREDICTIVE TEXT</h4>
        <p>
          For example, to write Nokia with the English dictionary selected, press each of the following keys only once: (with predictive text on).
        </p>
        <ul>
          <li>
            <p>
              Add new words to the dictionary.
            </p>
          </li>
        </ul>
      </li>
    </ul>
  </section>

  <section class="main-section" id="Manage_phone_security">
    <header>
      <h4>Manage phone security</h4>
    </header>
    <p>
      Remember to lock your phone keypad to prevent accidental calls. If the keypad is locked, it unlocks when you receive a call.
      After the call, the lock automatically reactivates.
      <code>Important: When the phone is locked, calls may be possible toemergency numbers (for example, 911).</code>
    </p>
    <ul>
      <li>
        <h4>SECURITY LEVELS</h4>
        <p>
          The security level determines your access to features when a "nonowner"SIM card is used.
          A nonowner SIM card is one (other than the original) that is inserted after you power off the phone.
        </p>
        <ul>
          <li>
            <p>
              Set your security level.
            </p>
          </li>
        </ul>
      </li>
      <li>
        <h4>FIXED DIALING</h4>
        <p>
          Once you setup and activate a fixed dialing list, your phone can make calls only to those numbers that you have defined in the fixed dialing list.
          Fixed dialing is a network feature and must be supported by your wireless provider.
          <code>Note: When fixed dialing is set on, calls may be possible to certain emergency numbers in some networks
            (for example, 911 or other official emergency number
          </code>
        </p>
        <ul>
          <li>
            <p>
              Set up and activate a fixed dialing list.
            </p>
          </li>
          <li>
            <p>
              View or edit the fixed dialing list.
            </p>
          </li>
          <li>
            <p>
              Notes about fixed dialing.
            </p>
          </li>
          <li>
            <p>
              Closed user groups.
            </p>
          </li>
        </ul>
      </li>
      <li>
        <h4>ACCESS CODES</h4>
        <p>
          Use access codes to change your security code, PIN code, and PIN2 code.
        </p>
        <ul>
          <li>
            <p>
              Security code.
            </p>
          </li>
          <li>
            <p>
              PIN code.
            </p>
          </li>
          <li>
            <p>
              PIN2 code.
            </p>
          </li>
          <li>
            <p>
              Personal unblocking key (PUK) codes.
            </p>
          </li>
        </ul>
      </li>
    </ul>
  </section>

  <section class="main-section" id="Contacts">
    <header>
      <h4>Contacts</h4>
    </header>
    <p>
      Your contacts list can save up to 500 names, with multiple numbers and text notes for each name.
      The amount of numbers and text entries that you can save may vary, depending on their length and the total number of entries in the contacts list.
      <code>Note: This feature uses shared memory.</code>
    </p>
    <ul>
      <li>
        <h4>VEW THE CONTACTS LIST.</h4>
        <ul>
          <li>
            <p>
              At the Start screen, press the right selection key. The menu items appear in the display.
              <code>Note: If you have changed the function of the right selection key on your phone, <b>Go to</b> is on the Start screen.</code>
            </p>
          </li>
          <li>
            <p>
              Scroll to an item, and press Select to activate the feature or enterits submenu.
            </p>
          </li>
        </ul>
      </li>
      <li>
        <h4>SAVE CONTACTS</h4>
        <p>
          You can save contacts to phone memory or to SIM card memory.
        </p>
        <ul>
          <li>
            <p>
              Quickly save a contact (name and number).
            </p>
          </li>
          <li>
            <p>
              Quickly save a number only.
            </p>
          </li>
        </ul>
      </li>
      <li>
        <h4>COPY CONTACT LIST ENTRIES</h4>
        <ul>
          <li>
            <p>
              At the Start screen, press Contacts, scroll to Copy, and press Select.
            </p>
          </li>
          <li>
            <p>
              Scroll to "From phone to SIM card" or "From SIM card to phone" and press Select.
            </p>
          </li>
          <li>
            <p>
              Scroll to the copy method of your choice and press Select.
            </p>
          </li>
          <li>
            <p>
              Scroll to the entry you wish to copy and press Copy.
            </p>
          </li>
          <li>
            <p>
              Scroll to Keep original or Move original and press Select. The entryis copied and you are returned to the list of contact list entries.
            </p>
          </li>
          <li>
            <p>
              If you selected All or Primary numbers in Step 3, scroll to Keep original or Move original and press Select.
              <code>Caution: Select Keep original if you are unsure of which copy method to use.</code>
            </p>
          </li>
          <li>
            <p>
              Press OK to confirm your choice. All entries are copied to the selecteddestination.
            </p>
          </li>
          <li>
            <p>
              Press Back to return to the list of contact list entries.
            </p>
          </li>
        </ul>
      </li>
    </ul>
  </section>

  <section class="main-section" id="Reference_Information">
    <header>
      <h4>Reference Information</h4>
    </header>

    <ul>
      <li>
        All the documentation in this page is taken from
        <a href="https://www.manualslib.com/manual/112122/Nokia-6200.html?page=168#manual" target="_blank">Nokia 6200 User Manual</a>
      </li>
    </ul>
    <h3>
      Message from the CTIA(Cellular Telecommunications& Internet Association) to allusers of mobile phones:
    </h3>

    <div id="reference_footer">
      © 2001 Cellular Telecommunications & Internet Association. All Rights Reserved.1250 Connecticut Avenue, NW Suite 800, Washington, DC 20036.Phone: (202) 785-0081
    </div>
  </section>
</main>
              
            
!

CSS

              
                body {
  min-width: 290px;
  color: #9c9893;
  background-color: #0a1425;
  font-family: Tahoma, Geneva, sans-serif;
  line-height: 1.6;
  font-size: 16px;
}

h4 {
  color: #ffcc00;
  font-weight: normal;
}

header h4 {
  color: #fdee00;
  font-weight: normal;
}

a,
a:link,
a:visited {
  color: #f9b507;
  font-weight: normal;
  text-decoration: underline;
  font-size: 18px;
}

a:hover {
  text-decoration: none;
}

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

header {
  color: #ffcc00;
  margin-top: 20px;
  text-align: center;
  font-size: 1.8em;
  font-weight: normal;
}

#main-doc header {
  text-align: left;
  margin: 0px;
}

#navbar ul {
  height: 88%;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#navbar li {
  border-top: 1px solid #fada5e;
  border-bottom: 1px solid #fada5e;
  list-style: none;
  position: relative;
  width: 100%;
}

#navbar a {
  display: block;
  padding: 10px 30px;
  color: #fdee00;
  text-decoration: none;
  cursor: pointer;
}

#main-doc {
  position: absolute;
  margin-left: 300px;
  padding: 30px;
}

section li {
  margin: 10px auto;
}

code {
  display: block;
  text-align: left;
  color: #e5b73b;
  line-height: 0.8;
  background-color: #514658;
  padding: 10px;
  margin: 5px;
  border-radius: 8px;
}

@media only screen and (max-width: 815px) {
  /* For mobile phones: */
  #navbar ul {
    border: 1px solid;
    height: 207px;
  }

  #navbar {
    background-color: #0c1f3f;
    position: absolute;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    max-height: 275px;
    border: none;
    z-index: 1;
    border-bottom: 2px solid;
  }

  #main-doc {
    position: relative;
    margin-left: 0px;
    margin-top: 270px;
  }
}

@media only screen and (max-width: 400px) {
  #main-doc {
    margin-left: -10px;
  }

  code {
    margin-left: -20px;
    width: 100%;
    padding: 15px;
    padding-left: 10px;
    padding-right: 45px;
    min-width: 233px;
  }
}

#reference_footer {
  width: 960px;
  padding: 20px 14px;
  text-align: center;
  color: #e6e200;
  margin: 0 auto;
}

#Reference_Information h3 {
  text-align: center;
  color: #e6e200;
  font-weight: normal;
}

              
            
!

JS

              
                
              
            
!
999px

Console