In the page that follows I have 3 styles that won’t display and I’ve cleaned up all but one error that doesn’t make sense from Vlad the Validator. 
They’re all at the bottom of the page. I would so appreciate anyone helping me figure out what the problem is. The styles are .here, .thanks and .ques.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<title>semicodin recommends</title>
<style>
body {
width: 1080px;
font-family: 'crete round', serif;
font-size: 1.25rem;
line-height: 1.02;
font-weight: bold;
color: crimson;
background-color: #ffffee; /* ivory */
}
#counter {
margin-top: 2.5rem;
text-align: center;
position: absolute;
bottom: 0;
max-width: 100%;
}
.ssz1 {
margin-top: 3.13rem;
text-align: center;
font-family: 'crete round';
font-size: 2rem;
line-height: 2.25rem;
font-weight: bold;
color: black;
}
.ssz2 {
text-align: center;
margin-bottom: 1.75rem;
font-family: 'crete round';
font-size: 1.75rem;
line-height: 2rem;
font-weight: bold;
color: crimson;
}
.henpen {
text-align: center;
color: black;
margin-top: 3.13rem;
font-size: 3.75rem;
line-height: 3.88rem;
font-weight: 700;
font-family: 'Henny Penny', cursive;
}
.rec {
color: black;
text-align: justify;
background-color: #ffffee; /* ivory */
width: 90%;
margin: 3.13rem 5% 6.25rem 5%;
font-family: 'roboto slab', serif;
font-size: 2.5rem;
line-height: 1.02;
font-weight: bold;
}
/* ━━━━━━━━ TABLE 1 ━━━━━━━━ */
.table1 {
width: 80%;
margin: 0rem 10% 0rem 10%;
border: 1.25rem groove silver;
border-collapse: collapse;
font-family: 'roboto slab', serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: bold;
color: black;
}
.table1 tbody tr:nth-child( odd ) {
background-color: white;
border-bottom: .19rem solid black;
}
.table1 tbody tr:nth-child( even ) {
background-color: #eeeeee; /* STRIPE LIGHT GREY */
border-bottom: .19rem solid black;
}
.table1 tbody tr td:nth-of-type(1) {
border-right: .19rem solid black;
text-align: center;
}
.table1 tbody tr td:nth-of-type(2) {
border-right: .19rem solid black;
text-align: left;
}
/* ━━━━━━━━━━ COLORS ━━━━━━━━━━━ */
.blu {color: blue}
.blub {color: blue; font-weight: bold;}
.fusch {color: #ca009b}
.fuschb {color: #ca009b; font-weight: bold}
.fuschi {color: #ca009b; font-style: italic}
.crim {color: crimson}
.crimb {color: crimson; font-weight: bold}
.crimi {color: crimson; font-style: italic}
.grey {color: grey}
.green {color: #248900} /* green */
.greenb {color: #248900; font-weight: bold}
/* ━━━━━━━━━ LINKS ━━━━━━━━━━━ */
.redlink a:link {color: crimson}
.redlink a:visited {color: crimson}
.plink a:link {
color: #ffe5fe; /* pink */
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 400;
}
.plink a:visited {
color: #ffe5fe;
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 400;
}
.wlink a:link {
color: #ffffff; /* cyan */
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 400;
}
.wlink a:visited {
color: #ffffff;
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 400;
}
.glink a:link {
color: #56ff00; /* neon green */
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 400;
}
.glink a:visited {
color: #56ff00;
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 400;
}
.bnlink a:link {
padding-bottom: 10px;
color: #bbac86; /* BROWN */
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 700;
}
.bnlink a:visited {
padding-bottom: 10px;
color: #bbac86; /* BROWN */
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 700;
}
.ctr {text-align: center}
.undr {text-decoration: underline}
.clambk {
color: black;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 2.69rem;
font-weight: 900;
}
.clamcr {
color: crimson;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 2.69rem;
font-weight: 900;
}
.clambu {
color: blue;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 3rem;
font-weight: 900;
}
.warn {
font-family: 'roboto slab', serif;
font-size: 2.5rem;
line-height: 2.63rem;
font-weight: 900;
text-decoration: underline;
.here {
color: black;
text-align: center;
margin: 2rem 0 1rem 0;
font-family: 'roboto slab', serif;
font-size: 4rem;
line-height: 4.23rem;
font-weight: 700;
}
.tiny {
color: #888888;
text-align: center;
margin: 1rem 4rem 1rem 4rem;
font-family: 'courier prime', monospace;
font-size: 1rem;
line-height: 1.13rem;
font-weight: bold;
}
.thanks {
color: black;
text-align: center;
margin: 1rem 4rem 1rem 4rem;
font-family: 'courier prime', monospace;
font-size: 2rem;
line-height: 2.13rem;
font-weight: bold;
}
.ques {
color: black;
text-align: center;
margin: 2.25rem 2rem 2.25rem 2rem;
font-size: 3rem;
line-height: 3.13rem;
font-weight: 700;
font-family: 'roboto slab', serif;
}
a:active {color: black}
a:hover {color: crimson}
a:link {color: crimson}
a:visited {color: black}
/* ▬▬▬▬▬▬ END CSS ▬▬▬▬▬▬ */
</style>
</head>
<body>
<div class="ssz1">
This Is A Small Screen Zone*</div>
<div class="ssz2">
*Designed and built for SmartPhones<span class="clamcr">!</span>
</div>
<div class="henpen">semicodin recommends</div>
<table class="table1">
<tr>
<td><span class="crim">SITEPOINT FORUMS</span></td>
</tr>
<tr>
<td>ANDROID APP <span class="blu">PURE BROWSER</span></td>
</tr>
<tr>
<td>ANDROID APP <span class="blu">QUICK EDIT PRO</span></td>
</tr>
<tr>
<td>ANDROID APP <span class="blu">X-PLORE FILE MANAGER</span></td>
</tr>
<tr>
<td>ONLINE <span class="crim">W3 VALIDATOR</span> ERROR CHECKING ENGINE<br>
<a href="https://www.validator.w3.org">https://www.validator.w3.org</a>
</td>
</tr>
<tr>
<td>ONLINE <span class="crim">GOOGLE PHOTOS</span> LINK CONVERSIONS<br>
<a href="https://www.labnol.org/embed/google/photos/">https://www.labnol.org/embed/google/photos/</a>
</td>
</tr>
</table>
<div class="rec">
I like to code HTML. It relaxes me.<br>
<br>
I don’t have access to a desktop computer at the present time so I do all of my coding on an Android SmartPhone. There are a few indispensable tools I keep at my disposal to write HTML and I’d like to share them with you. In addition to Sitepoint for help in coding (anything) I test my code on the Android browser <a href="https://play.google.com/store/apps/details?id=pure.lite.browser" target="_blank">Pure Browser</a>. This browser has a distinct advantage over other browsers in that you can open HTML files “locally.” By locally I mean you can open your HTML files directly from within any file manager — I recommend
<a href="https://play.google.com/store/apps/details?id=com.lonelycatgames.Xplore" target="_blank">X-Plore</a> — that has an “OPEN WITH” command, with no need for an internet connection! <span class="warn">Only use Pure Browser for <span class="crim">testing your code</span>, not for daily browsing</span>: Chrome doesn’t like it and you may get security errors if you use it for browsing. Still, you’re going to need to <i>see</i> what your code actually looks like so check out Pure Browser. You can perform a long (full page) screenshot of your page output, and even rip it to a .PDF. A free, <span class="warn">powerful</span> little browser.
<br>
<br>
As important, you’ll need a text editor that is robust enough to handle coding. I recommend the Android App <a href="https://play.google.com/store/apps/details?id=com.rhmsoft.edit.pro" target="_blank">Quick Edit Pro</a>. Get the license — it’s about $4.00 and well worth it to be rid of the ads that will <i>bombard</i> you in the free version. What sets QE Pro apart is their engineering of the text SELECT function. You’ll come to realize how badly other apps handle this vital aspect of text editing and appreciate the developer’s engineering of a small “gutter” in your left margin. Trust me, this one innovation is worth five times the price of the license because it makes the selection of text a comfortable transaction instead of the nail-biting ordeal it usually is for large-handed folk like me struggling with the keyboard of a SmartPhone! QE Pro has themes, line numbering and even a Preview of how your page will look!<br>
<br>
No discussion about coding on a SmartPhone can be complete without mentioning the <a href="https://validator.w3.org">W3 Validator</a>. <span class="crim">When you’re coding on a SmartPhone you are coding in an extremely <i>volatile</i> environment</span>. Just <i>lightly brushing</i> the phone can insert characters that will break the page. So before you consider your page “Final” make a pit stop at the Validator and run your code through their error-checking engine. You can choose to just paste in your code; nothing could be easier! You’d be amazed at how many errors fly right under your radar and you’ll be more confident in uploading your pages that all errors have been resolved. <span class="crim">I error check my code <span class="undr">frequently</span> — sometimes 10-20 times in a day!</span><br>
<br>
Finally, a word about GRAPHICS. You have a generous 15GB of storage with <span class="crimb">GOOGLE PHOTOS</span> and Google made it impossible to link any of these assets to a website. This is why programmers created <a href="https://labnol.org/embed/google/photos/" target="_blank">LABNOL</a>: a free site for converting website assets uploaded to Google Photos into <i>LINKABLE images, graphics and photos.</i> Follow the easy instructions and see all your images — large and small — appear in your HTML pages just as if you were paying for their hosting! Note this doesn’t work with DRIVE.<br>
<br>
</div>
<div class="here">
<a href="https://semicodin.nekoweb.org/vault/about.zip" target="_blank">Code here.</a>
</div>
<div class="thanks">
This code courtesy of Paul O’Brien<br>
at the Sitepoint Forums
</div>
<div class="ques">
Got Questions? You can PM me at<br>
<a href="https://sitepoint.com/community/u/semicodin/activity">the Sitepoint Forums</a><span class="clamcr">!</span>
</div>
CLICK HERE TO PROCEED<br>
<a href="https://semicodin.nekoweb.org/toc.html">
TO THE TABLE OF CONTENTS</a>
