Technical documentation page

index.html

<nav id="navbar">
  <header> New iPhone SE 2020</header>
  <ul>
    <li><a class="nav-link" href=#Introduction>Price and release date</a></li>
    <li><a class="nav-link" href=#Camera>Camera</a></li>
    <li><a class="nav-link" href=#Design>Designs, color and water resistance</a></li>
    <li><a class="nav-link" href=#Touch>Touch ID</a></li>
    <li><a class="nav-link" href=#Battery>Battery.</a></li>
    <li><a class="nav-link" href=#Features>Features</a></li>
  </ul>
</nav>

<main id="main-doc">
  <section class="main-section" id="Introduction">
    <header>Price and release date</header>
    <article>
      <p>The iPhone SE costs $399/£419 and is currently available for pre-order; the phone arrives on April 24. The iPhone SE starts with 64GB of storage for $399, but you can upgrade to 128GB of storage for $449/£469 and to 256GB for $549/£569.</p>
      <code> 
        <ol>
          <li>64GB: $399</li><br>
          <li>128GB: $499</li><br>
          <li>256GB: $549</li>
        </ol>
          </code>
    </article>
  </section>
  
  <section class="main-section" id="Camera">
    <header>Camera</header>
    <article>
      <p>The iPhone SE 2020’s camera is so good that you’d be hard pressed to tell the difference between it and the iPhone 11 in many cases. The one exception is Night mode, which the iPhone SE simply does not have.

iPhone SE 2020 review(Image credit: Tom's Guide)
Like the iPhone 8, the iPhone SE features a single 12-megapixel rear camera and a 7MP front camera. You don’t get a ultra-wide angle lens like the iPhone 11 or a telephoto lens with optical zoom like the iPhone 11 Pro. But the A13 Bionic chip boosts the camera performance of the iPhone SE in several ways.</p>
      
      <p>For instance, you can take portraits using both the back and front camera on the iPhone SE, complete with Portrait Lighting effects and the ability to control the depth of field. The iPhone SE also benefits from Smart HDR for bringing out the highlights in faces.</p>
      </artcle>
  </section>
  
  <section class="main-section" id="Design">
    <header> Desgns, color and water resistance</header>
    <article>
      <ul>
        <li>Design:</li>
        <p>I generally like the iPhone SE’s design — with one exception. On the plus side, it’s a very well made handset with the same sturdy glass-and-aluminum design of the iPhone 8</p>
        <li>Color:</li>
        <p>There are three color options for the iPhone SE: black, white and (Product)Red. I like how the aluminum band is color matched with the back of the device.</p>
        <li>Water resistance:</li>
        <p>iPhone SE 2020’s design has IP67 water resistance, which means it can be submerged in 1 meter of water for up to 30 minutes. You also shouldn’t have to worry about coffee or soda spills with this phone.</p>
      </ul>
      <code>The iPhone SE measures 5.45 x 2.65 x 0.29 inches and weighs 5.22 ounces, which is smaller and narrower than the Google Pixel 3a but about the same weight.</code>
    </article>
    </secton>
  
  <section class="main-section" id="Touch">
    <header>Touch ID</header>
    <article>
      <p>
      Although Apple has offered Face ID on all of its newer phones for the past couple of years, the new iPhone SE 2020 uses a Touch ID sensor underneath the display for unlocking the device. This same sensor can be used for authorizing App Store downloads, Apple Pay and entering passwords.</p>
      <p>The Touch ID button has a very important — and unexpected — benefit right now as many are being ordered to wear face masks in public. You can still easily unlock your iPhone SE without having to take off your mask. Face ID won’t work with masks.</p>
    </article>
  </section>
  
  <section class="main-section" id="Battery">
    <header>Battery</header>
    <article>
      <p>The iPhone SE is rated for less battery life than the the iPhone 11, so you shouldn't expect the longest endurance. For instance, Apple says that the iPhone SE delivers 13 hours of video playback, versus 17 hours for the iPhone 11.</p><br>
      <p>Unfortunately, the iPhone SE comes with Apple’s standard 5-watt Lightning charger. And with that you can expect to get to just 29% power in 30 minutes, based on our testing. If you want to be able to juice this phone to 50% in 30 minutes, you’re going to have to pay extra for an 18W charger from Apple. It’s $29 for the power brick and another $19 for the USB C to Lightning cable.</p><br>
      <code>If you want to go wireless, the iPhone SE supports 7.5W wireless charging and supports the Qi standard. Check out all the best wireless chargers to pair with this phone.</code>
    </article>
  </section>
  
  <section class="main-secton" id="Features">
    <header><marquee>Features</marquee></header>
    <ul>
      <li>4.7-inch display</li>
      <li>A13 Bionic chip</li>
      <li>iPhone 8 design</l>
    <li>Touch ID</li>
    <li>Single-lens rear camera</li>
    <fieldset>
    <code>3GB RAM</code><br>
    <code>Red, white and black colors</code><br>
    <code>$399 starting price</code><br>
    </fieldset>
    
    </ul>
  </section>

<section class="Footer">
  <header>Refrence</header>
  <a href="https://www.tomsguide.com/reviews/iphone-se-2020"
     target= "_blank">
    More about new iphone se</a>
</section>
</main>

    
    
        

style.css

html,
body{
  min-width: 290px;
  color: #2F4F4F;
  background-color: #FAEBD7;
  font-family: 'Manrope', sans-serif;
  line-height: 1.5;
}

#navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  border-color: rgba(0, 22, 22, 0.4);
}

header {
  color: #228B22;
  margin: 10px;
  text-align: center;
  font-size: 1.8em;
}

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

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

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

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

#main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  margin-bottom: 110px;
}

section article {
  color: #4d4e53;
  margin: 15px;
  font-size: 0.96em;
}

section li {
  margin: 15px 0px 0px 20px;
}

code {
  display: block;
  text-align: left;
  white-space: pre;
  position: relative;
  word-break: normal;
  word-wrap: normal;
  line-height: 2;
  background-color: #f7f7f7;
  padding: 10px;
  margin: 10px;
  border-radius: 2px;
}

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

  #navbar {
    background-color: white;
    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;
  }
}

technical-documentation-page.markdown

Technical documentation page

A Pen by Subodh Khadka on CodePen.

License.