css pseudo class colour attribute is not working - html

this is HTMl and css code i used to run a sample project and im unable to understand why my css styling is different from the online compiler and the IDE(virtual studio code) so please help me in this
li:first-child {
color: blue;
font-weight: bold;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>the Basic Language of the Web: HTML</title>
</head>
<body>
<header class="main-header">
<h1>📘 The Code Magazine</h1>
<nav>
Blog
Challenges
Flexbox
CSS Grid
</nav>
<p>test text</p>
</header>
<h3>Why should you learn HTML?</h3>
<p>
There are countless reasons for learning the fundamental language of the
web. Here are 5 of them:
</p>
<ul>
<li>
<p>To be able to use the fundamental web dev language</p>
</li>
<li>
To hand-craft beautiful websites instead of relying on tools like
Worpress or Wix
</li>
<li>To build web applications</li>
<li>To impress friends To have fun 😃</li>
</ul>
<p>Hopefully you learned something new here. See you next time!</p>
</article>
<aside>
<h4>Related posts</h4>
<ul class="related">
<li>
<img
src="img/related-1.jpg"
alt="related 1 image"
width="75"
,height="75"
/> How to Learn Web Bevelopment
<p class="related-author">By Jonas Schmedtmann</p>
</li>
<li>
<img
src="img/related-2.jpg"
alt="related-2 image"
width="75"
height="75"
/>
The Unknown Powers of CSS
<p class="related-author">By Jim Dillon</p>
</li>
<li>
<img
src="img/related-3.jpg"
alt="related-3 image"
height="75"
,width="75"
/>
Why JavaScript is Awesome
<p class="related-author">By Matilda</p>
</li>
</ul>
</aside>
</li>
<li>
<img
src="img/related-3.jpg"
alt="related-3 image"
height="75"
,width="75"
/>
Why JavaScript is Awesome
<p class="related-author">By Matilda</p>
</li>
</ul>
Here I used a pseudo class to change the attribute of the first child of the li tag. In .related, the color changes in the online compiler but when I run in VSCode the color attribute is not changing but font weight and font style attributes are changing.
thanks for helping me
here is my screenshot run in VS code


The color is changing to blue without any issues. However that is a link that you're styling. Once it's clicked, its color changes to purple.
To force the purple to be blue, or any other color, you also need to style the link using another psuedo class.
li a:visited {
color: blue;
}
EDIT:
If you have given the class .related-author a color it will override your li:first-child style since it has a higher specificity level.
Look here for eg:
.related-author {
color: grey;
}
li:first-child {
color: blue;
font-weight: bold;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>the Basic Language of the Web: HTML</title>
</head>
<body>
<header class="main-header">
<h1>📘 The Code Magazine</h1>
<nav>
Blog
Challenges
Flexbox
CSS Grid
</nav>
<p>test text</p>
</header>
<h3>Why should you learn HTML?</h3>
<p>
There are countless reasons for learning the fundamental language of the web. Here are 5 of them:
</p>
<ul>
<li>
<p>To be able to use the fundamental web dev language</p>
</li>
<li>
To hand-craft beautiful websites instead of relying on tools like Worpress or Wix
</li>
<li>To build web applications</li>
<li>To impress friends To have fun 😃</li>
</ul>
<p>Hopefully you learned something new here. See you next time!</p>
</article>
<aside>
<h4>Related posts</h4>
<ul class="related">
<li>
<img src="img/related-1.jpg" alt="related 1 image" width="75" ,height="75" /> How to Learn Web Bevelopment
<p class="related-author">By Jonas Schmedtmann</p>
</li>
<li>
<img src="img/related-2.jpg" alt="related-2 image" width="75" height="75" />
The Unknown Powers of CSS
<p class="related-author">By Jim Dillon</p>
</li>
<li>
<img src="img/related-3.jpg" alt="related-3 image" height="75" ,width="75" />
Why JavaScript is Awesome
<p class="related-author">By Matilda</p>
</li>
</ul>
</aside>
</li>
<li>
<img src="img/related-3.jpg" alt="related-3 image" height="75" ,width="75" />
Why JavaScript is Awesome
<p class="related-author">By Matilda</p>
</li>
</ul>
To solve this, use :
.related-author {
color: grey;
}
li:first-child > * {
color: blue;
font-weight: bold;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>the Basic Language of the Web: HTML</title>
</head>
<body>
<header class="main-header">
<h1>📘 The Code Magazine</h1>
<nav>
Blog
Challenges
Flexbox
CSS Grid
</nav>
<p>test text</p>
</header>
<h3>Why should you learn HTML?</h3>
<p>
There are countless reasons for learning the fundamental language of the web. Here are 5 of them:
</p>
<ul>
<li>
<p>To be able to use the fundamental web dev language</p>
</li>
<li>
To hand-craft beautiful websites instead of relying on tools like Worpress or Wix
</li>
<li>To build web applications</li>
<li>To impress friends To have fun 😃</li>
</ul>
<p>Hopefully you learned something new here. See you next time!</p>
</article>
<aside>
<h4>Related posts</h4>
<ul class="related">
<li>
<img src="img/related-1.jpg" alt="related 1 image" width="75" ,height="75" /> How to Learn Web Bevelopment
<p class="related-author">By Jonas Schmedtmann</p>
</li>
<li>
<img src="img/related-2.jpg" alt="related-2 image" width="75" height="75" />
The Unknown Powers of CSS
<p class="related-author">By Jim Dillon</p>
</li>
<li>
<img src="img/related-3.jpg" alt="related-3 image" height="75" ,width="75" />
Why JavaScript is Awesome
<p class="related-author">By Matilda</p>
</li>
</ul>
</aside>
</li>
<li>
<img src="img/related-3.jpg" alt="related-3 image" height="75" ,width="75" />
Why JavaScript is Awesome
<p class="related-author">By Matilda</p>
</li>
</ul>

Related

<h1></h1> tag only partly responsive

The first h1 tag I use in my code works for me with the styling I'm going for but the second and third ones don't. The second one does not become a heading at all (just plain small text) and the third is too big.
h1 {
color: #2B2B2B;
white-space: normal;
word-break: break-all;
font-family: Georgia;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="Logo.png" alt:"">
<div class="container">
<nav>
<ul>
<li>About Us</li>
<li>Services</li>
<li>Continuing Education Courses</li>
<li>Support Groups & Workshops</li>
<li>First Appointment & Fees Insurance</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<hr>
<div class="profile-box">
<img src="Group 1.png" alt="" align="center" width="300px" height="100px">
<main>
<section>
<h1>Grounding and Resourcing Technique Giveaway</h1>
<h2>
Being a mental health clinician can be such an empowering and rewarding role. You can change,
help, and nourish so many of those struggling with everyday life. Through the responsibilities
you take on while helping others, it’s so important to practice grounding and resourcing
techniques with your clients.
</h2>
</section>
<div class="child-one child" <h1>Bill Maceus, Co-Founder of XYZ is giving away a FREE handout for
grounding and resourcing methods.</h1>
<img src="Rectangle 817.png" alt="" align="left">
<h2>
Learn ways to keep your client grounded by establishing comfortability, learning breathing and
body awareness techniques, object-based resourcing, and so much more. This handout will help you
overcome some of those challenges you face daily as a mental health clinician while working with
clients.
</h2>
<hr>
<h1>Simply fill out the form below to download.</h1>
<h2>You will be sent a copy to your email.</h2>
</div>
</main>
</div>
</div>
</body>

There's a syntax error in your HTML. The following line is incomplete:
<div class="child-one child"
Anything that comes after that line may produce unexpected results. You need to complete the opening div tag (and also close it somewhere, if that is your complete code).
<div class="child-one child">

Use <style> tag to enclose the css.
<style>
h1 {
color: #999999;
white-space:normal;
word-break: break-all;
font-family: Georgia;
text-align:center;
}
</style>
You also forgot the closing tag for div, though not entirely sure where you want the placement for closing tag would be.
<div class="child-one child"></div>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="Logo.png" alt:"">
<div class= "container">
<nav>
<ul>
<li>About Us</li>
<li>Services</li>
<li>Continuing Education Courses</li>
<li>Support Groups & Workshops</li>
<li>First Appointment & Fees Insurance</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<hr>
<div class="profile-box">
<img src="Group 1.png" alt="" align="center" width="300px" height="100px">
<main>
<h1>Grounding and Resourcing Technique Giveaway</h1>
<section>
<h2>
Being a mental health clinician can be such an empowering and rewarding role. You can change,
help, and nourish so many of those struggling with everyday life. Through the responsibilities you take on while helping others, it’s so important to practice grounding and resourcing techniques with your clients.
</h2>
</section>
<div class="child-one child">
<h1>Bill Maceus, Co-Founder of XYZ is giving away a FREE handout for grounding and resourcing methods.</h1>
<img src="Rectangle 817.png" alt="" align="left">
<h2>
Learn ways to keep your client grounded by establishing comfortability, learning breathing and body awareness techniques, object-based resourcing, and so much more. This handout will help you overcome some of those challenges you face daily as a mental health clinician while working with clients.
</h2>
<hr>
<h1>Simply fill out the form below to download.</h1>
<h2>You will be sent a copy to your email.</h2>
</div>
<style>
h1 {
color: #2B2B2B;
white-space:normal;
word-break: break-all;
font-family: Georgia;
text-align:center;
}
</style>
</body>
You had a lot of errors such as no closing body or div tags, and now all of them are the same size.

You leave a closing tag on div class
<div class="child-one child"
<h1>Bill Maceus, Co-Founder of XYZ is giving away a FREE handout for grounding and resourcing methods.</h1>
Please complete the code to be:
<div class="child-one child">

If you are using VS Code editor, install Auto Close Tag extension if you haven't yet to avoid this kind of problem and Prettier extension as well is a big help for you to looks your code organize and easy to see what is wrong.
Links:
Auto Close Tag extension - https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Prettier extension - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

In Brackets my end </body> is red, what seems to be the causing this? What is left opened?

<a href="Services.html">
<button type="button"class="btn">Book Now!</button>
<div id="contact">
<p> <b> Contact us: </b> CapitalExplorers#Wellington.com</p>
</div>
</body>
Trying to find out what is causing the </body> to be red. I believe it has something to do with the <a href part but not sure. Any ideas on a potential fix?

Remember to close your tag:
<head>
...
</head>
You're missing the closing tag of the first list.
<body>
<ul id="navigation">
<li>FAQ</li>
<li>Bookings</li>
<li> Services </li>
<li>Home</li>
</ul> <!-- Include here a closing tag -->
The <a> tag also needs to be closed.
<a href="Services.html">
<button type="button"class="btn">Book Now!</button>
</a> <!-- For example, if you want the link only in the button (even if it is not a good practice) -->
<div id="contact">
<p><b>Contact us:</b> CapitalExplorers#Wellington.com</p>
</div>
</body>

looking at the provided snippet. i think this is what your html should look like. added some closing tags and removed some spaces.
<!DOCTYPE html>
<html>
<head>
<title>Capital Explorers- Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Arvo:wght#700&family=Chelsea+Market&family=IBM+Plex+Sans:wght#400;600&family=Lato:wght#300&family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<ul id="navigation">
<li>FAQ</li>
<li>Bookings</li>
<li> Services </li>
<li>Home</li>
</ul>
<h1>Capital <span> Explorers </span></h1>
<div id="header">
<h2>Explore Wellington.</h2>
</div>
<div id="paragraph">
<p> At Capital Explorers, our mission is to provide Fun, Adventurous and <span> Eco-friendly </span> Tours of Wellington City and beyond.
</p>
</div>
<div id="SubPara">
<p> <b>- Maori</b> culture and history, Te Papa, The Cable Car and many more!
<br>
<b>- Travel on</b> foot, with scooters or bicycles, and also electric vehicles.
<br>
<b> - Family </b> owned and operated, with over 15 years of experience in the tourism industry.
<button type="button"class="btn">Book Now!</button>
</div>
<div id="contact">
<p> <b> Contact us:</b> CapitalExplorers#Wellington.com</p>
</div>
</body>
</html>

Title and image not lined up to ul list?

Hello I'm having trouble centering my ul list to my title and main image using css. If you run the code the ul list is a bit to the left of the centered image and title. Also if I type in text-align: center; to the ul list it looks unorganized and the bullets aren't aligned to the left. Here is the code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>McDonalds Tribute Page</title>
<link rel="stylesheet" type="text/css" href="tribute.css">
</head>
<body>
<div id="main">
<header id="title">
<h1>
McDonalds Tribute Page
</h1>
</header>
<div id="main-image">
<!-- <img src="https://i.imgur.com/2YsKZFI.png" alt="McDonalds Golden Arches" /> -->
</div>
<div id="tribute-info">
<body>
<h3 class="color-text">A timeline of all things McDonalds</h3>
<ul id=list-info>
<li>
<strong>1953</strong> - McDonalds opens first franchise in Phoenix
</li>
<li>
<strong>1954</strong> - Ray Kroc approaches McDonald Brothers about opening first franchise outside of CA and AZ
</li>
<li>
<strong>1958</strong> - McDonalds has sold 100 million burgers
</li>
<li>
<strong>1958</strong> - McDonalds spreads to the East Coast
</li>
<li>
<strong>1961</strong> - McDonald Brothers sold business rights to Ray Kroc for $2.7 million
</li>
<li>
<strong>1963</strong> - 1 Billion burgers sold
</li>
<li>
<strong>1968</strong> - The Big Mac was introduced to McDonalds
</li>
<li>
<strong>1980</strong> - Chicken McNuggets are introduced
</li>
<li>
<strong>2015</strong> - All day breakfast introduced
</li>
</ul>
</body>
</div>
<!-- <div class="img-gallery">
<section>
<img src="https://i.imgur.com/2IkFLba.jpg" alt="big mac" />
<img src="https://i.imgur.com/EZ58bYY.jpg" alt="chicken nugget" />
<img src="https://i.imgur.com/EC9zcIT.png" alt="filet o fish" />
<img src="https://i.imgur.com/17piAkN.jpg" alt="McFlurry" />
<img src="https://i.imgur.com/hUog2df.jpg" alt="burger king" />
<img src="https://i.imgur.com/WiDJfLM.jpg" alt="mcdonalds logo" />
</section>
</div> -->
<body>
</body>
</div>
</body>
</html>
and my css
#main {
display: grid;
}
#title {
text-align: center;
}
#main-image {
display: block;
margin-left: auto;
margin-right: auto;
}
#tribute-info {
margin-left: auto;
margin-right: auto;
}
I can't post images so I commented out the picture

Your UL is being centered, but you just need to give the wrapping div a width else it takes up 100%:
#main {
display: grid;
}
#title {
text-align: center;
}
#main-image {
display: block;
margin-left: auto;
margin-right: auto;
}
#tribute-info {
margin-left: auto;
margin-right: auto;
width: 300px;
}
ul {
padding: 0;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>McDonalds Tribute Page</title>
<link rel="stylesheet" type="text/css" href="tribute.css">
</head>
<body>
<div id="main">
<header id="title">
<h1>
McDonalds Tribute Page
</h1>
</header>
<div id="main-image">
<!-- <img src="https://i.imgur.com/2YsKZFI.png" alt="McDonalds Golden Arches" /> -->
</div>
<div id="tribute-info">
<h3 class="color-text">A timeline of all things McDonalds</h3>
<ul id=list-info>
<li>
<strong>1953</strong> - McDonalds opens first franchise in Phoenix
</li>
<li>
<strong>1954</strong> - Ray Kroc approaches McDonald Brothers about opening first franchise outside of CA and AZ
</li>
<li>
<strong>1958</strong> - McDonalds has sold 100 million burgers
</li>
<li>
<strong>1958</strong> - McDonalds spreads to the East Coast
</li>
<li>
<strong>1961</strong> - McDonald Brothers sold business rights to Ray Kroc for $2.7 million
</li>
<li>
<strong>1963</strong> - 1 Billion burgers sold
</li>
<li>
<strong>1968</strong> - The Big Mac was introduced to McDonalds
</li>
<li>
<strong>1980</strong> - Chicken McNuggets are introduced
</li>
<li>
<strong>2015</strong> - All day breakfast introduced
</li>
</ul>
</div>
<!-- <div class="img-gallery">
<section>
<img src="https://i.imgur.com/2IkFLba.jpg" alt="big mac" />
<img src="https://i.imgur.com/EZ58bYY.jpg" alt="chicken nugget" />
<img src="https://i.imgur.com/EC9zcIT.png" alt="filet o fish" />
<img src="https://i.imgur.com/17piAkN.jpg" alt="McFlurry" />
<img src="https://i.imgur.com/hUog2df.jpg" alt="burger king" />
<img src="https://i.imgur.com/WiDJfLM.jpg" alt="mcdonalds logo" />
</section>
</div> -->
<body>
</body>
</div>
</body>
</html>

<a href> on whole page instead of inside <nav>

I tried making menu with 4 links but one of them can be clicked anywhere on the whole page. I tried looking for unclosed tags but can't seem to find anything. I also tried to use sites that check for code errors and they say that there is unclosed tag but either I'm blind or there are no unclosed tags... :/
I know it's noob question but I'm trying for 20 minutes now to find the unclosed tag? that I can't find.
Edit: about.html opens if I click anywhere on the page
I don't know how to upload files so I'm just pasting code below (I also have some css code but I don't think that CSS is the issue):
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta name="description" content="opis strony" />
<link href="https://fonts.googleapis.com/css?family=Patrick+Hand&subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="Style.css">
<title> Kurs HTML i CSS3</title>
</head>
<body>
<div class="container">
<header>
<div class="title">
<h1>Kurs HTML5 i CSS3</h1>
</div>
<nav>
<ul>
<li><a href="index.html">Start</li>
<li><a href="html5.html">HTML5</li>
<li><a href="css3.html">CSS3</li>
<li><a href="about.html">O mnie</li>
</ul>
</nav>
</header>
<div class="content">
<div class="main-content">
<section>
<article id="html5">
<h2>Artykuł o HTML5</h2>
<figure>
<img src="html5.png">
<figcaption>Logo HTML5</figcaption>
</figure>
<p>Witaj na mojej stronie poświęconej HTML5 i CSS3</p>
</article>
<article id="css3">
<h2>Artykuł o CSS3</h2>
<figure>
<img src="css3.png">
<figcaption>Logo CSS3</figcaption>
</figure>
<p>
Przykładowa treść 1 <br>
Przykładowa treść 2
</p>
</article>
</section>
</div>
<div class="sidebar">
<aside>
<h2>JavaScript</h2>
<p>Warto wiedzieć, że do tworzenia stron internetowych często wykorzystuje się również język JavaScript.
Pozwala on na zaprojektowanie interaktywnych stron internetowych poprzez reagowanie na zdarzenia.</p>
</aside>
</div>
</div>
<footer>Wszelkie prawa zastrzeżone &copy</footer>
</div>
</body>

The problem is here:
<nav>
<ul>
<li><a href="index.html">Start</li>
<li><a href="html5.html">HTML5</li>
<li><a href="css3.html">CSS3</li>
<li><a href="about.html">O mnie</li>
</ul>
</nav>
You should close the element after the text of link in this way:
<nav>
<ul>
<li>Start</li>
<li>HTML5</li>
<li>CSS3</li>
<li>O mnie</li>
</ul>
</nav>
If you don't close it everything that comes after the a element is "inside" the anchor element

Part of my HTML is not displaying in Chrome

The top third of my page, including a graphic and headline, shows up just fine in Firefox and Explorer, but does not appear in Chrome when accessed from my server. It does appear in Chrome when viewing the page as a file.
The graphic is defined in the CSS file as:
/** adbox **/
#adbox {
background: #020a13 url(../images/bg-adbox.jpg) no-repeat center top;
font-family: Georgia, "Times New Roman", Times, serif;
min-height: 433px;
margin: -56px 0 22px;
And the HTML file is:
<!DOCTYPE html>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>donfiler.net - web design </title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="header">
<div class="wrapper clearfix">
<div id="logo">
<img src="images/logo.png" alt="LOGO">
</div>
<ul id="navigation">
<li class="selected">
Home
</li>
<li>
About
</li>
<li>
Blog
</li>
<li>
Gallery
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
<div id="contents">
<div id="adbox">
<div class="wrapper clearfix"><p></p><p></p>
<div class="info">
<h1>Web Design & Social Media Marketing</h1>
<p>
Proven Consultant, Author | Helping Companies Translate Their Business Goals to Reality.
</p>
</div>
</div>
<div class="highlight">
<h2>707-217-8457 if you want a mobile friendly web site.</h2>
</div>
</div>
<div class="body clearfix">
<div class="click-here">
<h1>Impact Marketing</h1>
Click Here!
</div>
<p style="font-size:12px;">
Proven Consultant, Author | Helping Companies Translate Their Business Goals to Reality. We design web sites with dynamic database interaction; deliver computer based training; create comprehensive marketing campaigns; specialize in hand coding HTML, CSS, PHP, Mysql and JavaScript to customize web design and user interface.
</p>
</div>
</div>
<div id="footer">
<ul id="featured" class="wrapper clearfix">
<li>
<img src="images/THUMBNAIL_IMAGE4.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
Memories of growing up in Europe during the Cold War. The first book in a series about Don's life.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE3.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
A catchy tune by the Beach Boys in the mid-sixties, the lyrics of "Be True to Your School" hit many highlights of high school in that era.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE2.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
College Years and Rock Band Entrepreneur. The third book in a series about Don's life.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE1.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
Contributing to others is the highest form of success you can achieve and I wanted to impart what I have learned over the years working for a living.
</p>
</li>
</ul>
<div class="body">
<div class="wrapper clearfix">
<div id="links">
<div>
<h4>Social</h4>
<ul>
<li>
Google +
</li>
<li>
Facebook
</li>
<li>
Youtube
</li>
</ul>
</div>
<div>
<h4>Blogs</h4>
<ul>
<li>
Blogspot
</li>
<li>
Marketing Blog
</li>
<li>
Web Design Blog
</li>
</ul>
</div>
</div>
<div id="newsletter">
<h4>Newsletter</h4>
<p>
Sign up for Our Newsletter
</p>
<form action="https://donfiler.us/newsletter" method="post">
<!--<input type="text" value="">-->
<input type="submit" value="Sign Up!">
</form>
</div>
<p class="footnote">
© Copyright © 2016 Don Filer all rights reserved.
</p>
</div>
</div>
</div>
</body>
</html>

The Google Chrome extension AdBlock is blocking that element for me, because its ID is adbox. Check if you have that extension enabled, as well.
In general, try avoiding the word "ad" when naming HTML elements.

From the start, I can see a major flaw in the code- you named an element adbox. Most ad-blocking extensions work this way- they scan for ads, and that element will be perceived as an ad, simply because of it's name.
To quote CapitalQ,
In general, try avoiding the word "ad" when naming HTML elements.
Check if you have an ad-blocking extension turned on, and if so, try the site without that extension. Also, rename that element ASAP!