Tell us what’s happening:
I have a few feedback that I need help to resolve:
- that main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with (_) for the id’s.
- Each .nav-link should have text that corresponds to the header text of its related section.
I tried to fix it and to the point I think I already match what the criteria asks for. Would you kindly help me please? Cause I’m still a begginer to this and I don’t know what to do
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lan="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width , initial-scale= 1.0" />
<link rel="stylesheet" href="./styles.css" />
<title>Fotografi</title>
</head>
<body>
<nav id="navbar">
<header>
<h1>All About Photography 101</h1>
</header>
<ul>
<li><a class="nav-link" href="#Etymology">Etymology</a></li>
<li><a class="nav-link" href="#Cameras_and_Lenses">Cameras and Lenses</a></li>
<li><a class="nav-link" href="#Photography_Technique">Photography Technique</a></li>
<li><a class="nav-link" href="#Colors_Theory">Colors Theory</a></li>
<li><a class="nav-link" href="#Lighting_Theory">Lighting Theory</a></li>
</ul>
</nav>
<main id="main-doc">
<section id="Etymology" class="main-section">
<header name="Etymology">
<h2 id="Etymology">Etymology</h2>
<p>The word "photography" was created from the Greek roots φωτός (phōtós), genitive of φῶς (phōs), "light" and γραφή (graphé) "representation by means of lines" or "drawing", together meaning "drawing with light".</p>
<p>The principle of photography is to focus light with the help of refraction so that it can burn the medium to capture light. The medium that has been burned with the right size of light luminance will produce a shadow that is identical to the light that enters the refraction medium (hereinafter referred to as the lens).</p>
<p>To produce the right light intensity to produce an image, a measuring tool in the form of a lightmeter is used. After getting the right lighting size, a photographer can adjust the light intensity by changing the combination of ISO/ASA (ISO Speed), diaphragm (Aperture), and shutter speed (speed). The combination of ISO, diaphragm & speed is called exposure.</p>
</header>
</section>
<section id="Cameras_and_Lenses" class="main-section">
<header name="Cameras_and_Lenses">
<h2 id="Cameras_and_Lenses">Cameras and Lenses</h2>
<p>There are a few kinds of cameras:</p>
<ul>
<li>Obscura Camera</li>
<li>Daguerreotype Camera</li>
<li>Collodion Dry Plate Camera</li>
<li>Kodak Camera</li>
<li>TLR and SLR Camera</li>
<li>DSLR Camera</li>
<li>Mirrorless Camera</li>
</ul>
<p>Also. there are a few kinds of lenses:</p>
<ul>
<li>Normal</li>
<li>Ultra-wide</li>
<li>Telephoto</li>
<li>Super Telephoto</li>
</ul>
</header>
</section>
<section id="Photography_Technique" class="main-section">
<header name="Photography_Technique">
<h2 id="Photography_Technique">Photography Technique</h2>
<p>One thing that allows a photographer to convey the meaning of his photo to the viewer is,
setting the focus. There are two ways to set the focus. By
using the camera's autofocus system, or by
manually selecting and adjusting Things to note.</p>
<p>Setting the focus is a basic skill in taking photos. There are two ways to set the focus. The first is through the operation of autofocus (AF) where the camera sets the focus automatically. The second is through the operation of manual focus (MF) where the photographer adjusts the focus using his hands.</p>
<p>Use the <code>ISO</code>, <code>Aperture</code>, and <code>Shutter Speed</code> combination to control exposure.</p>
<p>There are also few technique that needs to be master:</p>
<ul>
<li>Zooming</li>
<li>Freezing</li>
<li>Macro</li>
<li>Siluete</li>
</ul>
</header>
</section>
<section id="Colors_Theory" class="main-section">
<header name="Colors_Theory">
<h2 id="Colors_Theory">Colors Theory</h2>
<p>Discovered by Sir Isaac Newton, the color wheel and theory has been used in all aspects of life, such as clothing, design and photography, to enhance its visual appeal and aesthetics. Prepare yourself for a kaleidoscopic journey of harmony as we explain the five most common color harmonies of complementary, analogous, triad, split complementary and tetrad color combinations.</p>
<p>Have you ever produced a shot where a bright area of the sky looks completely white like a fireball, when in reality it’s not? That’s because the range of colors and tones that a camera captures (known as the “dynamic range”) is narrower than what the human eye can see.</p>
<p>You can also use the histogram in this case. If your camera has a Highlight Alert function, activate it. The blown out areas in your shot will flash black on the playback screen (which is why they are also called “blinkies” or “zebras”).</p>
<p>On camera models that do not have a “Highlight Alert” function, the blown out areas will also flash on the playback screen that displays the histogram. If most of your image is flashing black, it is a sign that you need to reshoot with darker lighting.</p>
</header>
</section>
<section id="Lighting_Theory" class="main-section">
<header name="Lighting_Theory">
<h2 id="Lighting_Theory">Lighting Theory</h2>
<p>Good lighting brings out the feel, detail and adds depth to portrait photography. If you’re new to photographing human subjects and are looking for tips and tricks to get amazing shots, knowing these 5 easy lighting patterns will help you. Download the easy-to-digest infographic below and read the full article where we share the characteristics of each lighting pattern, the mood it creates and simple settings for each. Good lighting brings out the feel, detail and adds depth to portrait photography. If you’re new to photographing human subjects and are looking for tips and tricks to get amazing shots, knowing these 5 easy lighting patterns will help you. Download the easy-to-digest infographic below and read the full article where we share the characteristics of each lighting pattern, the mood it creates and simple settings for each.</p>
<p>Reflectors are used to reflect sunlight to objects so that the reflection can become a good Fill in – Light and soft enough to give a good lighting effect to your photos.</p>
<p>Light is the main ingredient in photography. Other ingredientsare time, composition, objects, emotions, and your unique style in taking pictures, but light is what makes photography happen.We call light from nature natural light or available light, namely sunlight and moonlight. Light from sources other than these two celestial bodies is called artificial light.</p>
<p>Available light can generally be interpreted as the light that is available at the shooting location, without any additional light from Flash or Artificial Light. Available light is broadly divided into three, namely, Using Direct Sunlight outdoors, Maximizing sunlight from windows (Window light), and Using available lighting.</p>
<p>The term <code>Exposure</code> refers to the amount of light captured by the camera sensor. Adjust the <code>ISO</code>, <code>Aperture</code>, and <code>Shutter Speed</code> to achieve the desired effect.</p>
</header>
</section>
</main>
</body>
</html>
/* file: styles.css */
* {
scroll-behavior: smooth;
}
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
main {
padding-top: 50px;
}
section {
width: 80%;
margin: 0 auto 10px auto;
max-width: 600px;
}
h2, p {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
margin-top: 0px;
padding-top: 60px;
}
p {
text-align: center;
}
#navbar header h1 {
font-size: 18px;
color: white;
margin-bottom: 20px;
text-align: center;
}
#navbar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 200px;
background-color: blue;
padding: 20px;
color: white;
overflow-y: auto;
}
#navbar ul {
list-style: none;
padding: 0;
}
#navbar ul li {
margin-bottom: 10px;
}
main {
margin-left: 220px; /* Offset for the fixed navbar */
padding: 20px;
}
header h1, header h2 {
margin-bottom: 20px;
text-align: center;
color: blue;
}
@media (max-width: 768px) {
#navbar {
position: relative;
height: auto;
width: 100%;
margin-bottom: 20px;
background-color: #004080;
}
#navbar header h1 {
text-align: center;
margin-bottom: 10px;
}
#navbar ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#navbar ul li {
margin: 5px 10px;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 OPR/114.0.0.0
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page