I don’t want to quit!
I have not made any progress getting around these:
(1) Failed: Each .nav-link element should have an href attribute.
All five work.
(2) Failed: Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element’s id. e.g. #footer).
Clicking on any moves the focus to that section.
(3) Your #nav-bar should always be at the top of the viewport.
It was inside the header, and does not move!
position: fixed; top: 0px; Now it is fixed alone.
(4) Failed: Your Product Landing Page should use at least one media query.
it does and it works. changing the display width changes the color.
(5) Failed: Your Product Landing Page should use CSS Flexbox at least once.
Thank you for your time and knowledge.
– Fred
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
<!-- landing-01 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Landing Page</title>
<!-- <link rel="stylesheet" href="./styles.css"> -->
<link rel="stylesheet" href="./styles-01.css">
</head>
<body>
<section id="page-wrapper"><div id="Home"></div></div>
<header id="header">
<nav id="nav-bar">
<ul class="nav_wrapper">
<li class="nav-link">
<a href="#Home">Home</a>
</li>
<li class="nav-link">
<a href="#Development">Development</a>
</li>
<li class="nav-link">
<a href="#Shipping">Shipping</a>
</li>
<li class="nav-link">
<a href="#Price">Price</a>
</li>
<li class="nav-link">
<a href="#Contact">Contact</a>
</li>
</ul>
</nav>
<div id="logo">
<img id="header-img" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.ULZgSYFFmL20g_YxZGJZ1wHaG0%26pid%3DApi&f=1&ipt=9938aff657a4a653691a8bf01f5cef746e4d2e90cd8517bf7dc10c2be441baab&ipo=images" alt="Happy Book" height = 78; width = 78; ;>
</div>
<h1>Hodgepodge of Miscellany!</h1>
<!--
<nav id="nav-bar">
<ul class="nav_wrapper">
<li class="nav-link">
<a href="#Home">Home</a>
</li>
<li class="nav-link">
<a href="#Development">Development</a>
</li>
<li class="nav-link">
<a href="#Shipping">Shipping</a>
</li>
<li class="nav-link">
<a href="#Price">Price</a>
</li>
<li class="nav-link">
<a href="#Contact">Contact</a>
</li>
</ul>
</nav>
-->
</header>
<main>
<hr id="Home">
<section id="Intro">
<h2>Answers, Memories, and More</h2>
<!-- Top of the page's body -->
<!-- wrap text ==> toWard the required video -->
<div id="video-box">
<p>
<IFRAME id="video" SRC="https://www.youtube.com/embed/qFZKK7K52uQ" title="Relax Music for Stress Relief" overflow:auto; border-style:solid; border-width:2px; border-color:#000000
style="float: right;">
</IFRAME>
Albert Einstein said something similar to this: The opportunity to learn liberates the spirit and provides joy when it profits the community to which you belong. <br><br>
<b>Parts Without a Whole</b><br><br>
This page is being built with two purposes in mind. The first is to meet the requirements of freecodecamp.com to "Build a Product Landing Page". The second is to build a page that may be incorporated into my Hodgepodge. This section will disappear when this is incorporated into my pages.
<br>
<br><sup>Video from Mindful Kids, MindfulKidsCommunity.org, pioneering resources for social, emotional, spiritual, and energetic learning for children of all ages. </sup>
</p>
</div>
</section>
<section id="Introduction" >
<h3>Introduction</h3>
<p>This site was built to answer many questions from several people. Here you may learn how it came together. Some of this information may be old. Old as in outdated. Old as in not new to you. Moreover, old as in I had fallen behind the changes in technogy and had to learn again.</p>
</section>
<section class="container">
<section id="Development">
<div class="grid">
<div class="icon">
<img class="x" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.0QfNCt1VRz2ipTn4565v5AHaHX%26pid%3DApi&f=1&ipt=2828929f593418a39ffc8219f01272bddd66aaf01ef894aaa7b84eb1a1837d4b&ipo=images" style="width: 60px; height: 60px;">
</img>
</div>
<div class="desc">
<h3>Graphene and Tissue Paper </h3>
<p>Penn State researchers have devoleped a device powered by the movements of the person wearing it. The energy is stored as electrical energy in micro-super capacitors. They designed a wearable sensor for detecting blood pressure and movement using a small skin patch made of tissue paper. The paper was dipped into conductive material to become a sensor that sticks to the skin. </p>
</div>
</div>
</section>
<section id="Shipping">
<div class="grid">
<div class="icon">
<img class="x" src="https://cdn0.iconfinder.com/data/icons/delivery-46/48/Delivery_expand-06-512.png" style="width: 60px; height: 60px;">
</img>
</div>
<div class="desc">
<h3>Fast, Free Shipping </h3>
<p>To help save the earth, we only use recycled eletrons. With these, it takes a few microseconds to prepare the product. Once assembeled, we send it out to you at a speed of 186,000 miles per second. Whe they arrive, it may be advisable to stand to one side of your display. I don't want anyone to get hurt. It is a wonder that the electrons are able to stay within the circuts as they round so many corners.</p>
</div>
</div>
</section>
<section id="Price">
<div class="grid">
<div class="icon">
<img class="x" src="https://cdn2.iconfinder.com/data/icons/whcompare-servers-web-hosting/50/free-trial-1024.png" style="width: 60px; height: 60px;">
</img>
</div>
<div class="desc">
<h3>One Price Fits All </h3>
<p><img src="https://cdn.vectorstock.com/i/1000x1000/71/55/special-offer-10-off-label-or-sticker-vector-20547155.webp" alt="ten percent off" style="width: 60px; height: 60px; float: right;"> Bring your own container. Like a Dollar Store, we charge the same for every item. <b>Guarentee:</b> We are so confident that our products are better than any other simular items on the market that well give you <b>TEN TIMES your MONEY BACK!</b> This special offer expires at midnight yesterday.</p>
</div>
</div>
</section>
</section>
<hr>
<section class="grid-row">
<section class="items">
<div id="off-bit" class="item">
<div class="item-header">Off Bit<br> <br> </div>
<h2 class="product-h2">$0.00</h2>
<div class="item-desc">
When not set, represents zero
</div>
</div>
</section>
<section class="items">
<div id="off-bit" class="item">
<div class="item-header">On Bit <br> <br> </div>
<h2 class="product-h2">0¢</h2>
<div class="item-desc">
Indicates "one" when on
</div>
</div>
</section>
<section class="items">
<div id="empty-bite" class="item">
<div class="item-header">Empty Byte<br> <br> </div>
<h2 class="product-h2">€00</h2>
<div class="item-desc">
Contains "0000"<br>
</div>
</div>
</section>
<section class="items">
<div id="full-bite" class="item">
<div class="item-header">Full Byte<br> <br> </div>
<h2 class="product-h2">¥00</h2>
<div class="item-desc">
"1111" for 255<br>
</div>
</div>
</section>
<section class="items">
<div id="full-bite" class="item">
<div class="item-header">Oct 31<br>=<br>Dec 25 </div>
<h2 class="product-h2">¥00</h2>
<div class="item-desc">
Also Hex 19 00011001
</div>
</div>
</section>
</section>
<hr>
<section id="Contact">
<form id="form" action="https://www.freecodecamp.com/email-submit" method="POST">
<table>
<tr>
<td><textarea id="message" type="text" value="" rows="6" cols="40">Your comment, please.</textarea>
</td>
<td align="center">
<label for="email"> Email:
<input id="email" name="email" type="email" placeholder="Your e-address is required" size="40" required>
</label><br><br>
<input id="submit" class="button" type="submit" value="Send"><br><br>
Or use your email to <a href="mailto:fklusmann@aol.com?subject=Mailed from the landing page">send me email</a>.
</td>
</tr>
</table>
</form>
</section>
</main>
<footer></footer>
</section>
</body>
</html>
-------------------------------------------------------------------css follows
/* styles-01.css for landing-01.html */
/* change to styles.css for test */
/* border adound each object */
/* * { border: 1px solid black; } */
body {
background-color: paleturquoise;
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#page-wrapper {
position: relative;
width: 90%;
margin-left: auto;
margin-right: auto;
}
header {
position: fixed;
top: 0;
width: 40%;
min-height: 75px;
padding: 0px 10px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: yellowgreen
}
#logo {width: 78px;
height: 78px;
display: flex;
justify-content: center;
margin-left: 5PX;
background-color: transparent;
}
h1 {
color: blue;
}
nav > ul {
display: flex;
list-style: none;
}
a {
text-decoration: none;
color: #222;
}
#nav-bar{
position: fixed;
top: 0;
right: 0;
background-color: yellowgreen
}
.nav-link a {
border-right: 1px solid blue;
display: block;
padding: 1.2rem 1rem;
color: blue;
}
main {
margin-top: 80px;
}
hr {
width: 85%;
height: 4px;
border-width:0;
color: blue;
background-color:blue;
}
#video-box {
display: flex;
margin-left: 10px;
padding-left: 10px;
/*/ border: 3px solid red; */
}
.grid {
display: flex
}
.grid-row {
display: flex;
justify-content: space-around;
align-items: center;
}
.item {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 150px;
height: 175px;
margin: 20px;
border: 2px solid blue;
border-radius: 3px;
max-width: fit-content;
justify-content: center;
background-color: blanchedalmond;
border: 3px solid green;
}
.item-header {
background-color: rgb(44, 192, 192);
color: white;
text-align: center;
letter-spacing: 2px;
padding: 5px 10px;
margin-top: 0;
border-top: 0;
text-transform: uppercase;
font-weight: 700;
}
.item > h2 {
text-align: center;
}
.item-desc {
text-align: center;
}
table {
align-items: center;
margin-left: auto;
margin-right: auto;
}
td {
align-items: center;
margin-left: auto;
margin-right: auto;
}
/* for snartphones are 450 */
@media (max-width: 450px) {
body {
background-color: coral;
}
}
/* for tablets */
@media (max-width: 800px) and (min-width: 451px) {
body {
background-color: yellow;
}
}
/* See https://www.makeuseof.com/how-to-use-media-queries-in-html-and-css-to-create-responsive-websites/
for an understanding of this. Also, see it work by changing the width of the screen. */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge: