Another project. V2

This page contains a code sequence which creates a listing.

It begins with a CSS Code.

<center> <style type="text/css"> .hig { box-shadow:inset 0px 1px 0px 0px #ffffff; background-color:#ededed; border-radius:28px; border:1px solid #7C7B9E; display:inline-block; color:#242424; font-family:arial; font-size:18px; font-weight:normal; padding:1px 8px; text-decoration:none; white-space:nowrap; text-shadow:1px 1px 0px #ffffff; }.hig:hover { background-color:#BFBFFF; color:black} .hig:visited:hover {color:purple} .pagefive {background: rgba(214,225,245,0.72); width:87%; padding: 1px 3px 30px 3px;; border:solid rgba(73,64,87,1.0) 1px; color: rgba(138,124,134,0.0); border-radius:4px; margin-top:18px; font-size:23px;} .phil {padding:1.5px 5px; white-space:nowrap; color: rgba(10,8,0,1.0); font-size:18px; border:1px solid rgba(144,141,144,1.0); text-decoration: underline rgba(127,117,203,0.15); border-radius:7px; background: rgba(241,235,226,0.8); } .phil:visited {text-decoration: none; } .phil:link:hover {color: rgba(24,140,133,1.0); border:1px solid rgba(91,89,94,1.0); background: rgba(255,249,244,1.0); text-decoration: underline rgba(27,17,83,0.4);} .phil:visited:hover {text-decoration: underline rgba(227,227,227,0.15); color: rgba(24,20,213,1.0);} .third { background-color:#F5F7FF; border-radius:6px; border:2px solid #8a89b0; margin: 3; display:inline-block; color:#1e1e1e; font-family:arial; font-size:10px; font-weight:bold; padding:2px 8px; text-decoration:none; }.third:hover { background-color:#BFBFFF; color:#000000; text-decoration: underline dotted #8a79CF; border:solid #224F58 2px; }.third:active { top:1px; } .moony {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDKnNAufcR8Bul90lLN2KcxVSw0w4kg1kdH8biOKuY7CsxjKO-pgrNk3RzlVLypY4xXtkhJ_Zj8VCAH8anuCkJ-EaiY5BhYuOhUs1DuJgG8B9VDLyrk2FYBEOnpWI49bhwzyjhCEwlKM/s1500/Wallpaper-2018-11-10%25281%2529.jpg ); background-repeat: repeat; background-attachment: fixed; margin-bottom:20px} .bottom {background:rgba(0,0,0,1.0); margin:0px; padding:1px 0px 1px 0px; } .narrowit {border:solid rgba(79,96,95,0.5) 1px; padding:3px} </style>

Then, continues on with an HTML sequence:

<div class="pagefive"> <p> <div class="narrowit"> <!-- all links begins here --> <a href="https://www.amren.com/" target="_blank" class="hig" title="The First Link">Practice Link 1</a> <a href="https://redice.tv/" target="_blank" title="The Second Link" class="phil" >Practice Link #2</a> <!-- all links end here --> <br> <center> <a href="https://summit.news/" target="_blank" class="hig" title="The third Link">(3) Practice link #3</a> <a href="http://iqgo.blogspot.com/" target="_blank" title="The forth Link" class="phil" >(4) Practice link #4</a> </div></center></div> <div class="bottom"> <p> <center> <TABLE BORDER="0" style="border:2px solid #E6E6FA; padding: 6px; border-spacing: 8px; border-radius:23px; color:#282828; text-align: center; margin-top:18px; "> <td> <a href="https://www.voy.com/234000/" class="third" align="justify" title="Return to Home Page. {opens in Same Tab}" >Practice Home Page</a> </td> </TABLE> </center> <p><br>

Basically, this is the page which I'm attempting to emulate: Voy.com/ASMR 247450

Practice Link 1 Practice Link #2
(3) Practice link #3 (4) Practice link #4