Tell us what’s happening:
You should have the same number of .nav-link and .main-section elements.
Each .nav-link should have an href attribute that links to its corresponding .main-section (e.g. If you click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id).
Your Technical Documentation project should use at least one media query.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
</head>
<main id="main-doc">
<nav id="navbar"><header id="nav-bar"><a class="nav-link">Main Menu</header>
<ul><a class="nav-link" href="Create_an_Account">Create an Account</a>
<a class="nav-link" href="Gallery">Gallery</a>
<a class="nav-link" href="Meet_Our_Stylists">Meet Our Stylists</a>
<a class="nav-link" href="Book_an_Appointment">Book an Appointment</a>
<a class="nav-link" href="Contact_Us">Contact Us</a>
</ul>
</nav>
<section class="main-section" id="Create_an_Account"><header>Create an Account</header>
<li>Schedule a time with us!</li>
<p>Create an account with us today in order to book an appointment.</p>
<p> Plus, you will gain access to exclusive promotions.</p>
<code>Account</code>
</section>
<section class="main-section" id="Gallery"><header>Gallery</header>
<li>Take a look at our salon!</li>
<p><image id="salon" src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.nickellebeauty.com%2F&psig=AOvVaw1f5IU1j4kqh87ltKOnWp3i&ust=1666274898576000&source=images&cd=vfe&ved=0CAwQjRxqFwoTCMDf4e277PoCFQAAAAAdAAAAABAE" alt="Our Salon"></image></p>
<p><image id="hair" src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.thetrendspotter.net%2Flong-hairstyles-for-women%2F&psig=AOvVaw0fi9KnJY2-mitP8pmZpwMo&ust=1666274973924000&source=images&cd=vfe&ved=0CAwQjRxqFwoTCKD535G87PoCFQAAAAAdAAAAABAF" alt="Hair Model"></image></p>
<code>Picture</code>
</section>
<section class="main-section" id="Meet_Our_Stylists" ><header>Meet Our Stylists</header>
<li>Our top stylists</li>
<p>Yolis is our founder and master hair colorist. </p>
<p>Nico is our haircut expert.</p>
<code> Our Stylists</code>
</section>
<section class="main-section" id="Book_an_Appointment"><header>Book an Appointment</header>
<li>Let us make you feel beautiful!</li>
<p>Click on the Calender to view available appointments.</p>
<p>Select your stylist from the available time slots</p>
<code>Appointment</code>
</section>
<section class="main-section" id="Contact_Us"><header>Contact Us</header>
<li>You can contact us throught the following methods:
<p>Our phone number is 555-6849</p>
<p>Email us at colorexpertsbeautysalon@gmail.com</p>
<code>Contact Us</code>
</section>
</main>
</html>
/* file: styles.css */
h1 {
font-weight: bold;
}
p{
}
@media (max-width:1576px){
#navbar {width: 375px}
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge:
