Hello could someone please help me out with this, been trying and can’t seem to pass the last few points.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
margin:0;
padding: 0;
font-size: 100%;
}
#main-doc {
width: 80%;
float:right;
}
.left {
width: 20%;
float: left;
}
nav {
margin:0;
padding:0;
list-style: none;
}
nav li {
margin: 1px 0;
border: 1px solid #999;
}
nav li a {
display: block;
line-height: 3em;
width: 100%;
text-decoration: none;
}
@media (max-width: 480px) {
p {
font-size: 18px;
}
}
</style>
</head>
<body>
<main id="main-doc">
<section class="main-section" id="Flexbox">
<header>Flexbox</header>
<p>
The Flexible Box Module, usually referred to as flexbox, was designed
as a one-dimensional layout model, and as a method that could offer
space distribution between items in an interface and powerful
alignment capabilities. This article gives an outline of the main
features of flexbox, which we will be exploring in more detail in the
rest of these guides.
</p>
<p>
When we describe flexbox as being one dimensional we are describing
the fact that flexbox deals with layout in one dimension at a time —
either as a row or as a column. This can be contrasted with the
two-dimensional model of CSS Grid Layout, which controls columns and
rows together.
</p>
<code>flex-direction: row; flex-wrap: wrap; </code>
</section>
<section class="main-section" id="Grid">
<header>Grid</header>
<p>
CSS Grid Layout introduces a two-dimensional grid system to CSS. Grids
can be used to lay out major page areas or small user interface
elements. This article introduces the CSS Grid Layout and the new
terminology that is part of the CSS Grid Layout Level 1 specification.
The features shown in this overview will then be explained in greater
detail in the rest of this guide.
</p>
<p>
You can create a grid with fixed track sizes using pixels for example.
This sets the grid to the specified pixel which fits to the layout you
desire. You can also create a grid using flexible sizes with
percentages or with the fr unit designed for this purpose.
</p>
<code
>.container { display: grid; grid-template-columns: 200px 200px 200px;
}
</code>
</section>
<section class="main-section" id="Box_Model">
<header>Box Model</header>
<p>
In CSS we broadly have two types of boxes — block boxes and inline
boxes. The type refers to how the box behaves in terms of page flow
and in relation to other boxes on the page.
</p>
<p>
Boxes have an inner display type and an outer display type. In
general, you can set various values for the display type using the
display property, which can have various values.
</p>
<code
>p, ul { border: 2px solid rebeccapurple; } span, li { border: 2px
solid blue; } ul { display: inline-flex; list-style: none; padding: 0;
} .inline { display: inline; }
</code>
</section>
<section class="main-section" id="Layouts">
<header>Layouts</header>
<ul>
<li>Normal flow</li>
<li>Flexbox</li>
<li>Grids</li>
<li>Floats</li>
<li>Positioning</li>
</ul>
<p>
At this point, we've looked at CSS fundamentals, how to style text,
and how to style and manipulate the boxes that your content sits
inside. Now it's time to look at how to correctly arrange your boxes
in relation to the viewport as well as to one another. We've covered
the necessary prerequisites, so let's dive deep into CSS layout,
looking at such various features as: different display settings,
positioning, modern layout tools like flexbox and CSS grid, and some
of the legacy techniques you might still want to know about.
</p>
<p>
For many of the elements on your page, the normal flow will create
exactly the layout you need. However, for more complex layouts you
will need to alter this default behavior using some of the tools
available to you in CSS. Starting with a well-structured HTML document
is very important because you can then work with the way things are
laid out by default rather than fighting against it.
</p>
<code
>.info-box li { float: left; list-style-type: none; width: 150px; }
.info-box li a { display: inline-block; text-decoration: none; width:
100%; line-height: 3; background-color: red; color: black; text-align:
center; }
</code>
</section>
<section class="main-section" id="Images">
<header>Images<header>
<p>
Images and video are described as replaced elements. This means that
CSS cannot affect the internal layout of these elements — only their
position on the page amongst other elements. As we will see however,
there are various things that CSS can do with an image.
</p>
<p>
Certain replaced elements, such as images and video, are also
described as having an aspect ratio. This means that it has a size in
both the horizontal (x) and vertical (y) dimensions, and will be
displayed using the intrinsic dimensions of the file by default.
</p>
<code>.box { width: 200px; } img { } </code>
</section>
</main>
<nav id="navbar">
<div class="left">
<header>CSS Documentation</h1></header>
<li><a class="nav-link" href="#Flexbox">Flexbox</a></li>
<li><a class="nav-link" href="#Grid">Grid</a></li>
<li><a class="nav-link" href="#Box_Model">Box Model</a></li>
<li><a class="nav-link" href="#Layouts">Layouts</a></li>
<li><a class="nav-link" href="#Images">Images</a></li>
</div>
</nav>
</body>
</html>
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Safari/605.1.15
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge:
