<!DOCTYPE html>
<html>
<head>
<style>
<!-- image container -->
.image .main {
width:100%;
position: fixed;
z-index:-1;
background-color:gray;
text-align: center;
}
<!-- image -->
.image .main img {
opacity: 0.8;
}
<!-- the shapes in top of page -->
.shapes{
text-align: center;
}
<!-- the container for three blocks -->
.mom
{
text-align: center;
}
<!-- three blocks -->
.container {
background-color: rgba(255,255,255, 0.5);
width: 400px;
overflow: scroll;
display: inline-block;
}
<!-- the single pre block -->
.display
{
background-color: rgba(255,255,255, 0.5);
max-width:163px;
display: block;
}
<!-- the block quote at bottom of the page -->
blockquote {
color: white;
}
</style>
<title>Jared Gilmore is Lovely</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Jared Gilmore</h1>
<hr>
<div class="shapes">
<pre>♥ ♠ ♥ ♠ ♥ ♠ ♥ ♠ ♥ ♠ ♥ ♠ ♥ ♠ ♥ ♠ ♥ ♠ ♥ ♠ ♥ ♠ ♥ ♠ ♥ ♠ ♥ ♠ ♥ </pre>
</div>
<hr>
<pre>
Jared Gilmore is amazing
talented
and amazing
</pre>
<div class="image main">
<img title="Jared Gilmore is happy!" src="..\images\DciZZIsXkAA1bYw.jpg" alt="Jared Gilmore with body guards"/>
</div>
<div class="mom">
<div class="container">
<h2>About Jared Gilmore </h2>
<h4>Personal life</h4>
<h4>Carrier Life</h4>
</div>
<div class="container">
<h2><mark>About Jared Gilmore</mark></h2>
<h4>Personal life</h4>
<h4>Carrier Life</h4>
</div>
<div class="container">
<h2>About Jared Gilmore </h2>
<h4>Personal life</h4>
<h4>Carrier Life</h4>
</div>
</div>
<br>
<pre class="display">
jhgbjjjbhm
mmmmkkkkkkkkkkkk
0kkkkkkkkkkkk
kkkkkkkkkkkk
kkkkkkbbbggyy
ydceddddddddddd
dddddddddddddd
dddddddddddd
ddddddddddddddddddd
ddddddddddddddd
dddddddd
ddddddddd
dddddddddddddd
ddddddddd
ddddddddddddddd
dddddddddddddd
dddddddddddddd
ddddddddddddddd
dddddddddddddddd
dddddddddddddd
ddddddddd
dddddddd
dddddddddddddd
dddddddd
dddddddd
dddddddddd
ddddddddddd
ddddddddddddd
ddddddddd
ddddddddddddd
ddddddddddddd
dddddddddddddddd
ddddddddddddddd
ddddddddddddddd
dddddddddddd
ddddddddddd
dddddddd
dddddd
</pre>
<blockquote>Creativity takes <abbr title="work hard for it">courage</abbr><br><cite>-Matisse</cite></blockquote>
</body>
</html>
Incorrect use of <abbr></abbr>. Use <span></span> instead.
<blockquote> takes a cite attribute which value is the URL of the quoted source.
Character set encoding makes better sense at the top of the head, followed immediately by the title so it is visible to user agents, especially search engines.
<pre></pre> is intended for preformatted text, and has very low importance from the perspective of SEO.
Using <mark></mark> in a heading is redundant. The <h2></h2> gives it importance.
Most critical is this…
That combinator is a descendant selector.
class="image main"
These are co-classes that apply to the same element. Use either one or the other in your selector rule, or,
.image.main
with no space between.
Thanks so much ! It got fixed ! Very useful information.
But the way I fixed it was either changing the positions of elements or removing comments from CSS or both.
Is that kind of comment allowed in CSS?
Not sure I follow your question…
I think the way I used "comments" in my "<style></style>" section caused the problem.
I used :
<!-- comment goes here --> html commenting
instead of:
/*comment goes here */ CSS commenting
1 Like
Ah, yes. I was going to mention that but concluded you would discover it on your own. Good job.
Lol it was the stupidest mistake that could ever happen! haha
1 Like
Mistakes are not stupid, just oversights. We depend upon them to reinforce learning.
1 Like
It was right in front of my eyes 
1 Like
Give yourself a gentle pat on the back for discovering it, and then move on. Relish in mistakes for what they teach.
1 Like
Thanks so much…I’m on my way 
1 Like
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.