Build a Technical Documentation Page

I have passed the certification, but my page looks messy and NOTHING like the example that was shown to us.

In the mean time, I have been trying to get my navbar on the left side of the page, and the content on the right side of the page…but to no avail.

I don’t remember learning how to do this, but maybe I did and I just forgot.

Help PLEASE!!

And maybe I’m tired, but I can’t even figure out how to include my code in this request.
AAAAAAARGH!!

Thank you for that.
As you can see, I’m really reaching for straws, here.
Any insights will be much appreciated.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>JS Documentation</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"></link>
</head>
  <body></body>
<main id="main-doc">
  <nav id="navbar"><div class="boxed" id="container">
    <header><div =id"become-a">Become a</div><div =id"professional-balloon-artist">Professional Balloon Artist</div>
    </header>
    <hr class"solid">
    <a class="nav-link" href="#Introduction">Introduction</a></hr>
    <hr class"solid"><a class="nav-link" href="#make_a_balloon_dog">Make a balloon dog</a></hr>
    <hr class"solid"><a class="nav-link" href="#make_a_balloon_cat">Make a balloon cat</a></hr>
    <hr class"solid"><a class="nav-link" href="#make_a_balloon_mouse">Make a balloon mouse</a></hr>
    <hr class"solid"><a class="nav-link" href="#make_a_balloon_turkey">Make a balloon turkey</a></hr>
    <hr class"solid"><a class="nav-link" href="#make_a_balloon_snake">Make a balloon snake</a>
  </hr></div></nav>
  <section class="main-section" id="Introduction">
    <header>Introduction</header>
    <p>Ha</p>
    <code></code>
    <li></li>
  </section>
  <section class="main-section" id="make_a_balloon_dog">
    <header>Make a balloon dog</header>
    <p>Blow</p>
    <p>Twist</p>
    <code></code>
    <li></li>
  </section>
  <section class="main-section" id="make_a_balloon_cat">
    <header>Make a balloon cat</header>
    <p>Blow</p>
    <p>Twist</p>
    <code></code>
    <li></li>
  </section>
  <section class="main-section" id="make_a_balloon_mouse">
    <header>Make a balloon mouse</header>
    <p>Blow</p>
    <p>Twist</p>
    <code></code>
    <li></li>
  </section>
  <section class="main-section" id="make_a_balloon_turkey">
    <header>Make a balloon turkey</header>
    <p>Blow</p>
    <p>Twist</p>
    <code></code>
    <li></li>
  </section>
  <section class="main-section" id="make_a_balloon_snake">
    <header>Make a balloon snake</header>
    <p>Blow</p>
    <p>Don't Twist</p>
    <code></code>
    <li></li>
  </section>
</main>
</body>
</html>
* {
  margin: 0px;
  padding: 0px;
  text-align: center;
  background-color: lightgray;
        }

.boxed {
  border: 1px solid green ;
  padding: auto;
  box-size: 700px;
  width: 220px;
  height: 700px;
}

p {
  float: right;
	margin: 30px 0 50px 0;
	font-family: 'Roboto', sans-serif;
	list-style-type: none;
  box-radius: 5%;
  margin: 25;
  padding: 10;
  width: 150px;
  background-color: lightgray;
}

hr, .solid {
  border-top: 2px solid gray;
}

@media {
  
}

a {
	float: left;
	margin: 30px 0 50px 0;
	font-family: 'Roboto', sans-serif;
	list-style-type: none;
  box-radius: 5%;
  margin: 25;
  padding: 10;
  width: 150px;
  background-color: lightgray;
}

#body {
  display: flex;
  flex-direction: column;
}

#navbar {
  width: 30%;
  height: 1000px;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.main-section {
  width: 65%;
  align: left;
  display: flex;
  justify-content: flex-end;
  align-items: left;
  padding: 30px 10%;
  text-align: left;
}


@SFrank Congrats :confetti_ball: on passing the challenge!
Can you please specificy a little more how you would like the layout of your page?

1 Like

Navbar on the left, content on the right…like the example they gave us:
https://product-landing-page.freecodecamp.rocks/

1 Like

Oops, wrong one…this one:
https://technical-documentation-page.freecodecamp.rocks/

@SFrank The link is blocked for me, sorry. I could try to help you if you add a screenshot of the page.
@anon42932716 read my edit.

1 Like

The screen shots are starting at the top of the page and then scrolling down. I still have a lot of work to do, but I want to figure out the navbar situation first.

Thanks for your patience and your help.



1 Like

Sorry, you misunderstood. I meant a screenshot of the free code camps example technical document because I haven’t any access to it. I already copied and pasted your code earlier so that I can view your project but I wasn’t sure exactly what you wanted it to look like. Don’t worry about it, I’m sorry for the inconvenience Id be thrilled to help you succeed in solving this issue my projects also needed a lot of work and I got lots of help from the fcc forum :smile:.

1 Like

Thank you for your patience…and thank you for sticking with me.

Here again, just in case, is the link to the page:

https://technical-documentation-page.freecodecamp.rocks

and here are the screen shots:





The navbar stays to the left, locked in place, and the document content that the navbar links to is on the right. I can NOT figure out how to get that content to the right of the navbar.

If you have any insights, I would be eternally grateful!

First I would add the position:fixed property to your #navbar element. Now that the navbar is floating on your left give your main section a margin-left property of 20% so that the navbar will not cover its contents as it is fixed in that position and won’t be bothered if it overlaps your content.
I also noticed that you have a spare </body> closing tag.

thanks for the insights…those did help

but now the right hand content does not want to go to the top of the page

Grrrrrr!!

Still working on it.

wait a minute…it worked.

it’s amazing what happens when one learns how to spell correctly.

thanks again for your help

YOU ARE MY HERO!!

But wait! I’m not quite done.
My page is doing what it’s suppose to be doing, but when I try to fix the prompt that says, “Your #navbar should always be on the left edge of the window,” then my page doesn’t work anymore.

Very frustrated…

<html lang="en">
<head>
  <title>JS Documentation</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"></link>
</head>
  <body>
<main id="main-doc">
  <nav id="navbar"><div class="boxed" id="container">
    <header>
      <ul>
      <div id="become-a"><h5>Become a</h5></div><div =id"professional-balloon-artist"><h5>Professional Balloon Artist</h5></div></header>
    <hr class"solid">
    <br></br>
    <a class="nav-link" href="#Introduction">Introduction</a></hr>
    <br></br>
    <hr class"solid"><br></br><a class="nav-link" href="#make_a_balloon_dog">Make a balloon dog</a></hr>
    <br></br>
    <hr class"solid">
    <br></br><a class="nav-link" href="#make_a_balloon_cat">Make a balloon cat</a></hr>
    <br></br>
    <hr class"solid"><br></br><a class="nav-link" href="#make_a_balloon_mouse">Make a balloon mouse</a></hr>
    <br></br>
    <hr class"solid"><br></br><a class="nav-link" href="#make_a_balloon_giraffe">Make a balloon giraffe</a></hr>
    <br></br>
    <hr class"solid"><br></br><a class="nav-link" href="#make_a_balloon_snake">Make a balloon snake</a>
  </hr></div></nav></ul>
  <div class="table-wrap">
  <section class="main-section" id="Introduction">
    <header><h1>Introduction</h1></header>
    <p>The art of balloon twisting, particularly in the creation of intricate animal sculptures, embodies a harmonious blend of technical expertise and creative brilliance.</p> 
    <p>Balloon artists, through their mastery of balloon properties, customization abilities, interactive entertainment, and entrepreneurial acumen, contribute significantly to the success of events while reaping the rewards of a thriving industry. Their skillful hands and imaginative minds continue to shape not just balloons but also the experiences of those who encounter their enchanting creations, making balloon artistry an indispensable and lucrative profession in the modern world.</p>
<p></p>
    <ul class="intro"></ul>
    <li id="intro">
      A Few Things
    </li>
    <ol class="a-few-things">
      <li class="blowing" id="blowing">Blowing up the balloon</li>
      <h6>There are a couple of ways to blow up a balloon.</h6>
      <p></p>
      <ol id="blowing-types" type="A" class="custom-indent">
        <li id="mouth">By mouth</li>
          <p>Choose a Balloon: Select a balloon in good condition. Check for any holes or leaks before you start.
            <br></br>
Stretch the Balloon: Gently stretch the balloon by pulling on the opening with your fingers. This makes it easier to inflate.
<br></br>
Take a Deep Breath: Inhale deeply through your nose to fill your lungs with air.
<br></br>
Seal the Balloon: Hold the neck of the balloon tightly between your thumb and forefinger, ensuring no air can escape.
<br></br>
Exhale into the Balloon: Slowly exhale the air from your lungs into the balloon through your mouth. Use a steady and controlled breath to avoid overinflating the balloon or bursting it. You can regulate the air flow by adjusting the distance between your lips and the balloon's opening.</p>
        <li id="pump">By pump</li>
          <p>Blowing up a balloon with a pump is a much easier and controlled method compared to using your mouth. Here's how you can do it:
<br></br>
Balloon
Balloon pump (hand pump or electric pump)
<br></br>
Stretch the Balloon:
Gently stretch the balloon a few times by pulling on the opening. This helps the balloon inflate more easily.
<br></br>
Attach the Balloon to the Pump:
If you're using a hand pump, attach the balloon to the nozzle of the pump. If you're using an electric pump, make sure it has an appropriate attachment for inflating balloons. Most electric pumps come with a balloon-filling attachment.
<br></br>
Start Pumping:
Begin pumping air into the balloon using the pump. If you're using a hand pump, push the pump handle down and then pull it up to draw air into the balloon. If you're using an electric pump, turn it on and it will automatically inflate the balloon.
<p></p>
</p>
      </ol>
      <li id="tying">Tying the knot</li>
      <p>Tie the Balloon:
Once the balloon is inflated to your desired size, carefully remove it from the pump's nozzle. Hold the neck of the balloon tightly between your fingers to keep the air from escaping. Twist the opening a few times to seal the air inside and then tie a knot to secure the balloon.</p>
<p></p>
      <li id="talking">Patter</li>
      <p>Keep it Light and Fun:
Choose jokes that are light-hearted and suitable for all ages. Avoid jokes that could be offensive or inappropriate for your audience.
<br></br>
Practice Timing:
Timing is crucial in comedy. Pause between creating balloon animals to deliver your jokes. Give your audience a moment to react before continuing with your balloon twisting.
<br></br>
Use Balloon-Related Humor:
Craft jokes that relate to balloons or the process of making balloon animals. For example, you could say, "Why don't balloons ever get lost? Because they always know which way is up!"
<br></br>
Relate Jokes to the Animals:
Tailor your jokes to the specific animal you're making. For instance, if you're making a dog, you could say, "Why did the dog sit in the shade? Because he didn't want to be a hot dog!"
<br></br>
Engage with Your Audience:
Make eye contact and engage with your audience. Ask them simple questions related to the balloon animals you're making. For example, "What sound does a giraffe make?" This can lead to playful interactions and more jokes.
<br></br>
Use Puns and Wordplay:
Puns and wordplay can be amusing. Create jokes around balloon-related words or animal names. For instance, "I used to be a baker, but I couldn't make enough dough. Now I'm a balloon artist, and I'm on a roll!"
<br></br>
Be Enthusiastic:
Your enthusiasm and energy can make even simple jokes more enjoyable. Smile, use expressive gestures, and show that you're having fun. Your positive energy will be contagious.
<br></br>
Rehearse, rehearse, rehearse:
Practice your jokes and observe how your audience responds. Adjust your delivery based on the reactions you receive. Experiment with different jokes to see which ones work best for your audience.
Remember, the key is to have fun and be playful. When you enjoy the process, your audience is likely to have a great time too!
</p>
    <li id="size">Size, length, and science.</li>
    <ol id="size" type="A" class="custom-indent">
      <li id="size"></li>
        <p id="size">Though this is a short section, it is imperitive that you know bubble sizes, how much to blow up the balloon, and a little bit of the science of twisting.</p>
        <ol id="size" type="i" class="custom-indent">
          <li id="twisting"></li>
<p id="twisting">First of all, when you are twisting, after you make a twist, you have to make sure it doesn not come undone. This is done by putting one of your free fingers around the twist you just made. Intriguingly enough, every twist you make <strong>after</strong> that will not come undone as long as you hold that first twist...until you twist the first twist with your final twist in the link.</li>
   <li id="science"></li>
      <p id="science">Next, you should know that when you blow up the balloon, every time you make a twist, it forces the air in the balloon down towards the end of the part of the balloon that you haven't blown all the way up. If you blow it all the way up from the start, there will be no place for the air to go when you start twisting.</p></li>
      <li id="size"></li>
      <p id="size">Finally, I hope you are good at math, because the only way your animals or figures are going to turn out nice looking, is if you keep your bubbles somewhat uniform. So when I tell you to make a .5" bubble...make sure it is the same as all of the .5" bubbles that you make. Or the 2" bubbles, or 4", etc., etc., etc.</p></li>
    </ol>
    <p id="summary">And as you get better and better, there will be a lot more tricks that you can learn. But for now, let's get started.</p>
  </section>
  <section class="main-section" id="make_a_balloon_dog">
    <header><h2>Make a balloon dog</h2></header>
    <p><u><em>Blow up the balloon half way</em></u></p>
    <p>Twist a 1" bubble and hold it. Now a .75", .5", and .75". Twist <strong>that</strong> twist with the first twist you made. That is the head.
    Now make a 1.5" bubble...that will be the neck. Hold the twist then make a 1.5", .5", .5", and a 1.5". Twist those together. These are the front legs. Make a 3" bubble for the body. Hold the twist. The back legs are exactly the same as the front legs...so just repeat and twist. Make sure everything is aligned so it looks like what you wanted to make. And...</p>
    <code></code>
    <li>Ta-da...you just made a poodle!</li>
  </section>
  </section>
  <section class="main-section" id="make_a_balloon_cat">
    <header><h2>Make a balloon cat</h2></header><p><u><em>Blow up the balloon half way</em></u></p>
    <p>Twist a 1" bubble and hold it. Now a .75", .5", and .75". Twist <strong>that</strong> twist with the first twist you made. That is the head.
    Now make a 1.5" bubble...that will be the neck. Hold the twist then make a 1.5", .5", .5", and a 1.5". Twist those together. These are the front legs. Make a 3" bubble for the body. Hold the twist. The back legs are exactly the same as the front legs...so just repeat and twist. Make sure everything is aligned so it looks like what you wanted to make. And...</p>
    <code></code>
    <li>Ta-da...you just made a cat!</li>
  </section>
  <section class="main-section" id="make_a_balloon_mouse">
    <header><h2>Make a balloon mouse</h2></header><p><u><em>Blow up the balloon half way</em></u></p>
    <p>Twist a 1" bubble and hold it. Now a .75", .5", and .75". Twist <strong>that</strong> twist with the first twist you made. That is the head.
    Now make a 1.5" bubble...that will be the neck. Hold the twist then make a 1.5", .5", .5", and a 1.5". Twist those together. These are the front legs. Make a 3" bubble for the body. Hold the twist. The back legs are exactly the same as the front legs...so just repeat and twist. Make sure everything is aligned so it looks like what you wanted to make. And...</p>
    <code></code>
    <li>Ta-da...you just made a mouse!</li>
  </section>
  <section class="main-section" id="make_a_balloon_giraffe">
    <header><h2>Make a balloon giraffe</h2></header><p><u><em>Blow up the balloon half way</em></u></p>
    <p>Twist a 1" bubble and hold it. Now a .75", .5", and .75". Twist <strong>that</strong> twist with the first twist you made. That is the head.
    Now make a 1.5" bubble...that will be the neck. Hold the twist then make a 1.5", .5", .5", and a 1.5". Twist those together. These are the front legs. Make a 3" bubble for the body. Hold the twist. The back legs are exactly the same as the front legs...so just repeat and twist. Make sure everything is aligned so it looks like what you wanted to make. And...</p>
    <code></code>
    <li>Ta-da...you just made a giraffe!</li>
  </section>
  <section class="main-section" id="make_a_balloon_snake">
    <header><h2>Make a balloon snake</h2></header><p><u><em>Blow up the balloon all the way</em></u></p>
    <p>Don't twist it at all...just kind of wrap it around your arm a couple of times. And...</p>
    <code></code>
    <li>Ta-da...you just made a snake!</li>
  </section>
  </table>
</main>
<footer>
  <p>Now check out some<a target="_blank" a href="https://www.happizzazz.com">music</a>stuff that will </p><p>make you laugh and will make you smarter.</p>
</footer>
</body>
</html>
* {
  margin: 5px;
  padding: 0px;
  text-align: left;
  background-color: white;
        }

p {
  font-size: 14px;
  margin: 0px -200px 0 0;
}

ul {
  margin: 0 -10 0 -10;
  color: green;
}

.nav-link {
  text-align: center;
  color: black;
  padding: 0 0 0 0;
  margin: 0;
}

li, .intro {
  width: 100%
}

li, .blowing {
  width: 500px;
}

li, .size {
  width: 500px;
}



@media {
  
}

a {
	margin: 50px 3px 50px 3px;
	font-family: 'Times New Roman', sans-serif;
  padding: 10px 0 0 0;
  width: 150px;
  background-color: white;
}

.navbar a:hover {
  color: #1c87c9;
}

.main-section {
  width: 25%;
  align: right;
  padding: 10px 300px;
}

header, .main-section {
  font-size: 20px;
}

h1{
  width: 200px;
  font-size: 24px;
  text-align: left;
}

h2{
  width: 200px;
  font-size: 18px;
  text-align: center;
  border: 3px solid yellow;
}

h3{
  font-size: 16px;
  align: left;
  border: 100%;
}

h5 {
  font-size: 18;
  text-align: center;
}

h6 {
  font-size: 16;
  text-align: left;
  width: 500px;
}

li {
  font-size: 24px;

}

.custom-indent {
  padding-left: 25px;
}

p, .main-section {
  font-size: 18px;
}

#navbar {
  overflow: hidden;
  position: fixed;
  top: 0; 
  width: 25%;
  height: 600px;
  font-size: 12px;
  text-align: left;
  color: black;
  padding: 0 0 0 0;
  border: 2px solid red;
}

footer {
  width: 100%;
  text-align: center;
  color: red;
  margin: 0px 300
}

footer, p {
  padding: 0px 0px 0px 0px;
}

Add position: fixed to your #navbar element with a left property of zero. Thus will cause your navbar to stick to the left edge of your window and not move even when you scroll.
BTW it would be cool if you change the color of the link that’s clicked on so that the user can see where he was directed to.
Tell me how it goes & good luck!!!

1 Like

You are brilliant…thank you again!

But now that you asked about the link color, I got it most of the way, but I can’t make the active link stick.

Otherwise…thank you again for relieving my stress!!

<!DOCTYPE html>
<html lang="en">
<head>
  <title>JS Documentation</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"></link>
</head>
  <body>
<main id="main-doc">
  <nav id="navbar"><div class="boxed" id="container">
    <header>
      <ul>
      <div id="become-a"><h5>Become a</h5></div><div =id"professional-balloon-artist"><h5>Professional Balloon Artist</h5></div></header>
    <hr class"solid">
    <br></br>
    <a class="nav-link" href="#Introduction">Introduction</a></hr>
    <br></br>
    <hr class"solid"><br></br><a class="nav-link" href="#make_a_balloon_dog">Make a balloon dog</a></hr>
    <br></br>
    <hr class"solid">
    <br></br><a class="nav-link" href="#make_a_balloon_cat">Make a balloon cat</a></hr>
    <br></br>
    <hr class"solid"><br></br><a class="nav-link" href="#make_a_balloon_mouse">Make a balloon mouse</a></hr>
    <br></br>
    <hr class"solid"><br></br><a class="nav-link" href="#make_a_balloon_giraffe">Make a balloon giraffe</a></hr>
    <br></br>
    <hr class"solid"><br></br><a class="nav-link" href="#make_a_balloon_snake">Make a balloon snake</a>
  </hr></div></nav></ul>
  <div class="table-wrap">
  <section class="main-section" id="Introduction">
    <header><h1>Introduction</h1></header>
    <p>The art of balloon twisting, particularly in the creation of intricate animal sculptures, embodies a harmonious blend of technical expertise and creative brilliance.</p> 
    <p>Balloon artists, through their mastery of balloon properties, customization abilities, interactive entertainment, and entrepreneurial acumen, contribute significantly to the success of events while reaping the rewards of a thriving industry. Their skillful hands and imaginative minds continue to shape not just balloons but also the experiences of those who encounter their enchanting creations, making balloon artistry an indispensable and lucrative profession in the modern world.</p>
<p></p>
    <ul class="intro"></ul>
    <li id="intro">
      A Few Things
    </li>
    <ol class="a-few-things">
      <li class="blowing" id="blowing">Blowing up the balloon</li>
      <h6>There are a couple of ways to blow up a balloon.</h6>
      <p></p>
      <ol id="blowing-types" type="A" class="custom-indent">
        <li id="mouth">By mouth</li>
          <p>Choose a Balloon: Select a balloon in good condition. Check for any holes or leaks before you start.
            <br></br>
Stretch the Balloon: Gently stretch the balloon by pulling on the opening with your fingers. This makes it easier to inflate.
<br></br>
Take a Deep Breath: Inhale deeply through your nose to fill your lungs with air.
<br></br>
Seal the Balloon: Hold the neck of the balloon tightly between your thumb and forefinger, ensuring no air can escape.
<br></br>
Exhale into the Balloon: Slowly exhale the air from your lungs into the balloon through your mouth. Use a steady and controlled breath to avoid overinflating the balloon or bursting it. You can regulate the air flow by adjusting the distance between your lips and the balloon's opening.</p>
        <li id="pump">By pump</li>
          <p>Blowing up a balloon with a pump is a much easier and controlled method compared to using your mouth. Here's how you can do it:
<br></br>
Balloon
Balloon pump (hand pump or electric pump)
<br></br>
Stretch the Balloon:
Gently stretch the balloon a few times by pulling on the opening. This helps the balloon inflate more easily.
<br></br>
Attach the Balloon to the Pump:
If you're using a hand pump, attach the balloon to the nozzle of the pump. If you're using an electric pump, make sure it has an appropriate attachment for inflating balloons. Most electric pumps come with a balloon-filling attachment.
<br></br>
Start Pumping:
Begin pumping air into the balloon using the pump. If you're using a hand pump, push the pump handle down and then pull it up to draw air into the balloon. If you're using an electric pump, turn it on and it will automatically inflate the balloon.
<p></p>
</p>
      </ol>
      <li id="tying">Tying the knot</li>
      <p>Tie the Balloon:
Once the balloon is inflated to your desired size, carefully remove it from the pump's nozzle. Hold the neck of the balloon tightly between your fingers to keep the air from escaping. Twist the opening a few times to seal the air inside and then tie a knot to secure the balloon.</p>
<p></p>
      <li id="talking">Patter</li>
      <p>Keep it Light and Fun:
Choose jokes that are light-hearted and suitable for all ages. Avoid jokes that could be offensive or inappropriate for your audience.
<br></br>
Practice Timing:
Timing is crucial in comedy. Pause between creating balloon animals to deliver your jokes. Give your audience a moment to react before continuing with your balloon twisting.
<br></br>
Use Balloon-Related Humor:
Craft jokes that relate to balloons or the process of making balloon animals. For example, you could say, "Why don't balloons ever get lost? Because they always know which way is up!"
<br></br>
Relate Jokes to the Animals:
Tailor your jokes to the specific animal you're making. For instance, if you're making a dog, you could say, "Why did the dog sit in the shade? Because he didn't want to be a hot dog!"
<br></br>
Engage with Your Audience:
Make eye contact and engage with your audience. Ask them simple questions related to the balloon animals you're making. For example, "What sound does a giraffe make?" This can lead to playful interactions and more jokes.
<br></br>
Use Puns and Wordplay:
Puns and wordplay can be amusing. Create jokes around balloon-related words or animal names. For instance, "I used to be a baker, but I couldn't make enough dough. Now I'm a balloon artist, and I'm on a roll!"
<br></br>
Be Enthusiastic:
Your enthusiasm and energy can make even simple jokes more enjoyable. Smile, use expressive gestures, and show that you're having fun. Your positive energy will be contagious.
<br></br>
Rehearse, rehearse, rehearse:
Practice your jokes and observe how your audience responds. Adjust your delivery based on the reactions you receive. Experiment with different jokes to see which ones work best for your audience.
Remember, the key is to have fun and be playful. When you enjoy the process, your audience is likely to have a great time too!
</p>
    <li id="size">Size, length, and science.</li>
    <ol id="size" type="A" class="custom-indent">
      <li id="size"></li>
        <p id="size">Though this is a short section, it is imperitive that you know bubble sizes, how much to blow up the balloon, and a little bit of the science of twisting.</p>
        <ol id="size" type="i" class="custom-indent">
          <li id="twisting"></li>
<p id="twisting">First of all, when you are twisting, after you make a twist, you have to make sure it doesn not come undone. This is done by putting one of your free fingers around the twist you just made. Intriguingly enough, every twist you make <strong>after</strong> that will not come undone as long as you hold that first twist...until you twist the first twist with your final twist in the link.</li>
   <li id="science"></li>
      <p id="science">Next, you should know that when you blow up the balloon, every time you make a twist, it forces the air in the balloon down towards the end of the part of the balloon that you haven't blown all the way up. If you blow it all the way up from the start, there will be no place for the air to go when you start twisting.</p></li>
      <li id="size"></li>
      <p id="size">Finally, I hope you are good at math, because the only way your animals or figures are going to turn out nice looking, is if you keep your bubbles somewhat uniform. So when I tell you to make a .5" bubble...make sure it is the same as all of the .5" bubbles that you make. Or the 2" bubbles, or 4", etc., etc., etc.</p></li>
    </ol>
    <p id="summary">And as you get better and better, there will be a lot more tricks that you can learn. But for now, let's get started.</p>
  </section>
  <section class="main-section" id="make_a_balloon_dog">
    <header><h2>Make a balloon dog</h2></header>
    <p><u><em>Blow up the balloon half way</em></u></p>
    <p>Twist a 1" bubble and hold it. Now a .75", .5", and .75". Twist <strong>that</strong> twist with the first twist you made. That is the head.
    Now make a 1.5" bubble...that will be the neck. Hold the twist then make a 1.5", .5", .5", and a 1.5". Twist those together. These are the front legs. Make a 3" bubble for the body. Hold the twist. The back legs are exactly the same as the front legs...so just repeat and twist. Make sure everything is aligned so it looks like what you wanted to make. And...</p>
    <code></code>
    <li>Ta-da...you just made a poodle!</li>
  </section>
  </section>
  <section class="main-section" id="make_a_balloon_cat">
    <header><h2>Make a balloon cat</h2></header><p><u><em>Blow up the balloon half way</em></u></p>
    <p>Twist a 1" bubble and hold it. Now a .75", .5", and .75". Twist <strong>that</strong> twist with the first twist you made. That is the head.
    Now make a 1.5" bubble...that will be the neck. Hold the twist then make a 1.5", .5", .5", and a 1.5". Twist those together. These are the front legs. Make a 3" bubble for the body. Hold the twist. The back legs are exactly the same as the front legs...so just repeat and twist. Make sure everything is aligned so it looks like what you wanted to make. And...</p>
    <code></code>
    <li>Ta-da...you just made a cat!</li>
  </section>
  <section class="main-section" id="make_a_balloon_mouse">
    <header><h2>Make a balloon mouse</h2></header><p><u><em>Blow up the balloon half way</em></u></p>
    <p>Twist a 1" bubble and hold it. Now a .75", .5", and .75". Twist <strong>that</strong> twist with the first twist you made. That is the head.
    Now make a 1.5" bubble...that will be the neck. Hold the twist then make a 1.5", .5", .5", and a 1.5". Twist those together. These are the front legs. Make a 3" bubble for the body. Hold the twist. The back legs are exactly the same as the front legs...so just repeat and twist. Make sure everything is aligned so it looks like what you wanted to make. And...</p>
    <code></code>
    <li>Ta-da...you just made a mouse!</li>
  </section>
  <section class="main-section" id="make_a_balloon_giraffe">
    <header><h2>Make a balloon giraffe</h2></header><p><u><em>Blow up the balloon half way</em></u></p>
    <p>Twist a 1" bubble and hold it. Now a .75", .5", and .75". Twist <strong>that</strong> twist with the first twist you made. That is the head.
    Now make a 1.5" bubble...that will be the neck. Hold the twist then make a 1.5", .5", .5", and a 1.5". Twist those together. These are the front legs. Make a 3" bubble for the body. Hold the twist. The back legs are exactly the same as the front legs...so just repeat and twist. Make sure everything is aligned so it looks like what you wanted to make. And...</p>
    <code></code>
    <li>Ta-da...you just made a giraffe!</li>
  </section>
  <section class="main-section" id="make_a_balloon_snake">
    <header><h2>Make a balloon snake</h2></header><p><u><em>Blow up the balloon all the way</em></u></p>
    <p>Don't twist it at all...just kind of wrap it around your arm a couple of times. And...</p>
    <code></code>
    <li>Ta-da...you just made a snake!</li>
  </section>
  </table>
</main>
<footer>
  <p>Now check out some<a target="_blank" a href="https://www.happizzazz.com">music</a>stuff that will </p><p>make you laugh and will make you smarter.</p>
</footer>
</body>
</html>
* {
  margin: 5px;
  padding: 0px;
  text-align: left;
  background-color: white;
        }

p {
  font-size: 14px;
  margin: 0px -200px 0 0;
}

ul {
  margin: 0 -10 0 -10;
  color: green;
}

li, .intro {
  width: 100%
}

li, .blowing {
  width: 500px;
}

li, .size {
  width: 500px;
}

a:link {
  color: blue;
  background-color: transparent;
  text-decoration: none;
  font-size: 18;
  text-align: center;
}

.nav-link:visited {
  color: red;
  background-color: transparent;
  text-decoration: none;
}

.nav-link:hover {
  color: orange;
  background-color: transparent;
  text-decoration: underline;
}

.nav-link:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}

@media {
  
}

a {
	margin: 50px 3px 50px 3px;
	font-family: 'Times New Roman', sans-serif;
  padding: 10px 0 0 0;
  width: 150px;
  background-color: white;
}

.main-section {
  width: 25%;
  align: right;
  padding: 10px 300px;
}

header, .main-section {
  font-size: 20px;
}

h1{
  width: 200px;
  font-size: 24px;
  text-align: left;
}

h2{
  width: 200px;
  font-size: 18px;
  text-align: center;
  border: 3px solid yellow;
}

h3{
  font-size: 16px;
  align: left;
  border: 100%;
}

h5 {
  font-size: 18;
  text-align: center;
}

h6 {
  font-size: 16;
  text-align: left;
  width: 500px;
}

li {
  font-size: 24px;

}

.custom-indent {
  padding-left: 25px;
}

p, .main-section {
  font-size: 18px;
}

#navbar {
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0; 
  width: 25%;
  height: 600px;
  font-size: 12px;
  text-align: left;
  color: black;
  padding: 0 0 0 0;
  border: 2px solid blue;
}

footer {
  width: 100%;
  text-align: center;
  color: red;
  margin: 0px 300
}

footer, p {
  padding: 0px 0px 0px 0px;
}

Not quite sure what you mean by stick.
Like change a color?

1 Like

As in when I click on a link, the link should be a different color while I am in that link. It isn’t doing that. I’m at a place where this is just extra frills, but I am glad that you put me up to it. So now I want it to work.
And according to the way I set it up, unvisited links should be blue, visited links should be red, hovered over links should be orange, and active links should be yellow.
Thanks for taking time to indulge me in this :slight_smile: .

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.