Develop Reference

I want to add a section under a video section but it doesn't align perfectly under the first section. How can I solve this?

I am trying to include a section under a previous section but it doesn't show and align the way I want it to be. The first section is a text section with video background but the next section added doesn't show in the preview. Even in the stack overflow snippet the "about us" section is behind the video section. How can I solve this problem?
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle
{
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active
{
background: url(https://i.ibb.co/rt3HybH/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase
{
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #000000;
transition: 0.5s;
color: #ffff;
z-index: 2;
}
.showcase.active
{
right: 300px;
}
.showcase video
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.overlay
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0394f4;
mix-blend-mode: overlay;
color: #001540;
}
.text
{
position: relative;
z-index: 10;
}
.text h2
{
font-size: 2.5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.text h3
{
font-size: 5em;
font-weight: 700;
color: #64A8F0;
line-height: 1em;
text-transform: uppercase;
}
.text p
{
font-size: 1.1em;
color: #fff;
margin: 20px 0;
font-weight: 400;
max-width: 700px;
}
.text a
{
display: inline-block;
font-size: 1em;
background: #fff;
padding: 10px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
.text a:hover
{
letter-spacing: 6px;
}
.social
{
position: absolute;
z-index: 10;
bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.social li
{
list-style: none;
}
.social li a
{
display: inline-block;
margin-right: 20px;
filter: invert(1);
transform: scale(0.5);
transition: 0.5s;
}
.social li a:hover
{
transform: scale(0.5) translateY(-15px);
}
.menu
{
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000026;
}
.menu ul
{
position: relative;
}
.menu ul li
{
list-style: none;
}
.menu ul li a
{
text-decoration: none;
font-size: 24px;
color: #ffff;
}
.menu ul li a:hover
{
color: #64A8F0;
}
.section{
width: 100%;
min-height: 100vh;
background-color: #ddd;
}
.container{
width: 80%;
display: block;
margin:auto;
padding-top: 100px;
}
.content-section{
float: left;
width: 55%;
}
.image-section{
float: right;
width: 40%;
}
.image-section img{
width: 100%;
height: auto;
}
.content-section .title{
text-transform: uppercase;
font-size: 28px;
}
.content-section .content h3{
margin-top: 20px;
color:#5d5d5d;
font-size: 21px;
}
.content-section .content p{
margin-top: 10px;
font-family: sans-serif;
font-size: 18px;
line-height: 1.5;
}
.content-section .content .button{
margin-top: 30px;
}
.content-section .content .button a{
background-color: #3d3d3d;
padding:12px 40px;
text-decoration: none;
color:#fff;
font-size: 25px;
letter-spacing: 1.5px;
}
.content-section .content .button a:hover{
background-color: #a52a2a;
color:#fff;
}
.content-section .social{
margin: 40px 40px;
}
.content-section .social i{
color:#a52a2a;
font-size: 30px;
padding:0px 10px;
}
.content-section .social i:hover{
color:#3d3d3d;
}
#media screen and (max-width: 768px){
.container{
width: 80%;
display: block;
margin:auto;
padding-top:50px;
}
.content-section{
float:none;
width:100%;
display: block;
margin:auto;
}
.image-section{
float:none;
width:100%;
}
.image-section img{
width: 100%;
height: auto;
display: block;
margin:auto;
}
.content-section .title{
text-align: center;
font-size: 19px;
}
.content-section .content .button{
text-align: center;
}
.content-section .content .button a{
padding:9px 30px;
}
.content-section .social{
text-align: center;
}
#media (max-width: 991px)
{
.showcase,
.showcase header
{
padding: 40px;
}
.text h2
{
font-size: 1.5em;
}
.text h3
{
font-size: 3em;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<title>Think Tank</title>
</html>
<head>
</head>
<body>
<style>
#import url('styles.css');
</style>
<section class="showcase">
<header>
<h2 class="logo"></h2>
<div class="toggle"></div>
</header>
<video src="webasset.mov" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>Willkommen auf </h2>
<h3>Think Tank</h3>
<p>Beispiel.</p>
THINK kaufen
</div>
<ul class="social">
<li><img src="https://i.ibb.co/x7P24fL/facebook.png"></li>
<li><img src="https://i.ibb.co/Wnxq2Nq/twitter.png"></li>
<li><img src="https://i.ibb.co/ySwtH4B/instagram.png"></li>
</ul>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>Unser Token</li>
<li>NFT (COMING SOON)</li>
<li>Das Team</li>
<li>Kontakt</li>
</ul>
</div>
<div class="section">
<div class="container">
<div class="content-section">
<div class="title">
<h1>About Us</h1>
</div>
<div class="content">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<div class="button">
Read More
</div>
</div>
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="image-section">
<img src="image/img one.jpg">
</div>
</div>
</div>
<!--===== MAIN JS =====-->
<script src="main.js"></script>
</body>
</html>

.showcase {
position: relative;
}
Replace the 'position:absolute' property to 'position:relative' for above section. I will make your next section visible.

--> Always use "Position:relation" on parent div after give "position:absolute" to child div.
--> i add "hero-section-wrapper" div for solve this issue & add some css for it.
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.hero-section-wrapper {
position: relative;
height: 100vh;
display: table;
width: 100%;
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle
{
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active
{
background: url(https://i.ibb.co/rt3HybH/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase
{
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #000000;
transition: 0.5s;
color: #ffff;
z-index: 2;
}
.showcase.active
{
right: 300px;
}
.showcase video
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.overlay
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0394f4;
mix-blend-mode: overlay;
color: #001540;
}
.text
{
position: relative;
z-index: 10;
}
.text h2
{
font-size: 2.5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.text h3
{
font-size: 5em;
font-weight: 700;
color: #64A8F0;
line-height: 1em;
text-transform: uppercase;
}
.text p
{
font-size: 1.1em;
color: #fff;
margin: 20px 0;
font-weight: 400;
max-width: 700px;
}
.text a
{
display: inline-block;
font-size: 1em;
background: #fff;
padding: 10px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
.text a:hover
{
letter-spacing: 6px;
}
.social
{
position: absolute;
z-index: 10;
bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.social li
{
list-style: none;
}
.social li a
{
display: inline-block;
margin-right: 20px;
filter: invert(1);
transform: scale(0.5);
transition: 0.5s;
}
.social li a:hover
{
transform: scale(0.5) translateY(-15px);
}
.menu
{
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000026;
}
.menu ul
{
position: relative;
}
.menu ul li
{
list-style: none;
}
.menu ul li a
{
text-decoration: none;
font-size: 24px;
color: #ffff;
}
.menu ul li a:hover
{
color: #64A8F0;
}
.section{
width: 100%;
min-height: 100vh;
background-color: #ddd;
}
.container{
width: 80%;
display: block;
margin:auto;
padding-top: 100px;
}
.content-section{
float: left;
width: 55%;
}
.image-section{
float: right;
width: 40%;
}
.image-section img{
width: 100%;
height: auto;
}
.content-section .title{
text-transform: uppercase;
font-size: 28px;
}
.content-section .content h3{
margin-top: 20px;
color:#5d5d5d;
font-size: 21px;
}
.content-section .content p{
margin-top: 10px;
font-family: sans-serif;
font-size: 18px;
line-height: 1.5;
}
.content-section .content .button{
margin-top: 30px;
}
.content-section .content .button a{
background-color: #3d3d3d;
padding:12px 40px;
text-decoration: none;
color:#fff;
font-size: 25px;
letter-spacing: 1.5px;
}
.content-section .content .button a:hover{
background-color: #a52a2a;
color:#fff;
}
.content-section .social{
margin: 40px 40px;
}
.content-section .social i{
color:#a52a2a;
font-size: 30px;
padding:0px 10px;
}
.content-section .social i:hover{
color:#3d3d3d;
}
#media screen and (max-width: 768px){
.container{
width: 80%;
display: block;
margin:auto;
padding-top:50px;
}
.content-section{
float:none;
width:100%;
display: block;
margin:auto;
}
.image-section{
float:none;
width:100%;
}
.image-section img{
width: 100%;
height: auto;
display: block;
margin:auto;
}
.content-section .title{
text-align: center;
font-size: 19px;
}
.content-section .content .button{
text-align: center;
}
.content-section .content .button a{
padding:9px 30px;
}
.content-section .social{
text-align: center;
}
#media (max-width: 991px)
{
.showcase,
.showcase header
{
padding: 40px;
}
.text h2
{
font-size: 1.5em;
}
.text h3
{
font-size: 3em;
}
<div class="hero-section-wrapper">
<section class="showcase">
<header>
<h2 class="logo"></h2>
<div class="toggle"></div>
</header>
<video src="Video/video.mp4" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>Willkommen auf </h2>
<h3>Think Tank</h3>
<p>Beispiel.</p>
THINK kaufen
</div>
<ul class="social">
<li><img src="https://i.ibb.co/x7P24fL/facebook.png"></li>
<li><img src="https://i.ibb.co/Wnxq2Nq/twitter.png"></li>
<li><img src="https://i.ibb.co/ySwtH4B/instagram.png"></li>
</ul>
</section>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Unser Token</li>
<li>NFT (COMING SOON)</li>
<li>Das Team</li>
<li>Kontakt</li>
</ul>
</div>
<div class="section">
<div class="container">
<div class="content-section">
<div class="title">
<h1>About Us</h1>
</div>
<div class="content">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<div class="button">
Read More
</div>
</div>
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="image-section">
<img src="https://images.unsplash.com/photo-1640525999004-42b645dd3dee?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80">
</div>
</div>
</div>

GTM Invalid HTML, CSS, or JavaScript found in template

I am using GTM's "Custom HTML Tag" option with the my below code but it is giving me the following error when I try to publish it: Invalid HTML, CSS, or JavaScript found in template.
I've seen other threads where it looks like GTM doesn't support or recognize certain tag attributes. I have tested my code, and no error prompts show up in the console either. It is a standard bootstrap modal:
function myFunction() {
var copyText = document.getElementById("myInput");
navigator.clipboard.writeText(copyText.innerHTML);
var testtip = document.getElementById("myTooltip");
testtip.innerHTML = "Copied: " + copyText.innerHTML;
}
function outFunc() {
var testtip = document.getElementById("myTooltip");
testtip.innerHTML = "Copy";
}
$("#myModal").modal();
body {
font-family: 'Varela Round', sans-serif
}
.modal-login {
color: #636363;
max-width: 850px;
width: 100%;
margin: 30px auto;
background-image: none!important
}
.modal-login .modal-content {
padding: 20px;
min-height: 586px;
border-radius: 5px;
margin: 1rem;
background-color: #eaebeb;
background-image: url(https://media-services.dcm-inc.com/couponsites/static/resources/img/festival.png);
background-size: 100%;
background-repeat: no-repeat
}
.modal-login .modal-header {
border-bottom: none;
position: relative;
justify-content: center;
margin-top: 130px
}
.modal-login img {
display: block;
height: 100%;
margin-left: auto;
margin-right: auto;
width: 40%
}
.modal-login .form-group {
position: relative
}
.modal-login h4 {
text-align: center;
font-size: 20px;
width: 80%;
display: block;
margin-left: auto;
margin-right: auto
}
.modal-login i {
position: absolute;
left: 13px;
top: 11px;
font-size: 18px
}
.modal-login .form-control {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%
}
#media screen and (max-width:600px) {
.modal-login .form-control {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%
}
}
.modal-login .form-control:focus {
border-color: #fcda7b
}
.modal-login .btn,
.modal-login .form-control {
min-height: 40px;
border-radius: 30px
}
.modal-login .hint-text {
text-align: center;
padding-top: 10px
}
.modal-login .close {
position: absolute;
top: -5px;
right: -5px
}
.button,
.modal-login .btn {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%);
border: none;
line-height: normal
}
.modal-login .custom {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%
}
#media screen and (max-width:600px) {
.modal-login .custom {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%
}
}
.modal-login .custom-social {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%
}
.modal-login .btn:focus,
.modal-login .btn:hover {
opacity: .7
}
.trigger-btn {
display: inline-block;
margin: 100px auto
}
.contest-social {
padding: 10px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%
}
.modal-login .fa:hover {
opacity: .7
}
.modal-login .contest-social-facebook {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-twitter {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-youtube {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-instagram {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.flexC {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
-webkit-flex-flow: row wrap
}
.modal-title img {
margin: 1rem;
max-width: 100px;
border-radius: 10px;
box-shadow: 0 0 3px 3px #ddd
}
.modal-title p {
font-size: 20px;
font-weight: 500;
max-width: 300px;
color: #000
}
.ccme {
color: #fd5c88
}
.codelinkbox {
margin: 0;
position: relative;
text-align: center;
width: auto;
position: relative
}
.codeValue {
border: 2px dashed currentColor;
font-size: 28px;
height: 50px;
line-height: 48px;
padding: 0 15px;
border-right: none;
border-radius: 0;
display: inline-block;
white-space: nowrap;
cursor: pointer;
border-radius: 6px 0 0 6px!important;
font-weight: 700;
color: #000
}
.buttonBtn.copy {
background-color: currentColor;
cursor: pointer;
font-size: 16px;
height: 50px;
line-height: 42px;
margin: 0;
padding: 0 15px;
position: relative;
text-transform: capitalize;
overflow: hidden;
min-width: 0;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
border-radius: 0 6px 6px 0
}
.buttonBtn.copy:hover {
background: #6ba62c;
color: #fff
}
.copy span {
color: #fff
}
.m1 {
margin: 1rem auto
}
.txtC {
text-align: center
}
.buttonBtn {
position: relative;
cursor: pointer;
font-size: 15px;
left: 0;
top: 0;
margin: 0;
height: 54px;
min-width: 180px;
border: 0;
outline: 0;
padding: 0 15px;
border-radius: 10px;
line-height: 54px
}
.arrRight {
color: #fff;
font-weight: 700
}
.arrRight:after {
content: '\2192';
display: inline-block;
color: #fff
}
.emailIcon {
width: 24px;
max-width: 24px;
margin: 0 5px
}
.termsto {
margin: 3rem 0
}
.sendemail {
font-size: 13px;
margin: 10px 0
}
#media all and (max-width:540px) {
.modal-title {
text-align: center
}
.modal-login .modal-header {
margin-top: 40px
}
}
.testtip {
position: relative;
display: inline-block;
}
.testtip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 120%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.testtip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.testtip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<link href="https://fonts.googleapis.com/css?family=Roboto%7CVarela+Round" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-login border">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
<div class="flexC">
<img src="https://res.cloudinary.com/csnetworkco/image/upload/c_scale,h_150,w_150/csnimages/Noon_568012.jpg" alt="Noon Discount Code" title="Noon Discount Code" width="150" height="150" loading="lazy">
<p>Up To 70% Off Sale + 10% Off Using Noon Coupon Code</p>
</div>
</div>
<div class="modal-body">
<div class="codelinkbox flexC m1">
<div id="myInput" class="codeValue">YB26</div>
<div class="testtip">
<button class="buttonBtn copy ccme" onclick="myFunction()" onmouseout="outFunc()"><span id="myTooltip">Copy</span></button>
</div>
</div>
</div>
<div class="row termsto">
<div class="col-sm-8">
<p><strong>Things to remember:</strong></p>
<ul>
<li>Don't forget to paste the code in the checkout during the purchase</li>
<li>Get 10% Off for New Customers & 5% Off for Returning Customers. </li>
<li>Code Usage: 2 times per customer.</li>
<li>Always contact our customer support team if there is any issues</li>
<li>You can always share the code</li>
</ul>
</div>
<div class="col-sm-4 txtC ">
<button class="buttonBtn ccme button" id=""><span class="arrRight">VISIT SITE </span></button>
</div>
</div>
</div>
</div>
</div>
</div>

I found what the issue was, in the img tag I was adding an attribute loading="lazy" due to which the invalid HTML CSS or JS error was being thrown
They really need to highlight what part of the code is the problem
I removed the above mentioned attribute and am now able to publish the tag

When to click form input the background is changing weirdly and after clicking page is not loading correctly on the phone

When I click the input the page is going crazy on the phone. There is not problem on the desktop. I believe the problem is because of the CSS but couldn't figure it out. I am a beginner designer and I am working on responsive web designers. When I click the input the background changes and page is not loading correctly.
This is the HTML of the site
body {
font-family: 'Playfair Display', serif;
position: relative;
background-image: url("pop-zebra-4q3Ogm3Kt44-unsplash.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100vh;
}
body::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
background-color: rgba(0, 0, 0, 0.8)
}
#all {
position: absolute;
right: 50%;
bottom: 50%;
transform: translate(50%, 50%);
padding: 3rem;
z-index: 1;
color: #fff;
}
.showcase-top {
text-align: center;
margin-right: 2rem;
}
.showcase-top h1 {
font-size: 3rem;
font-weight: 900;
margin-bottom: 0.8rem;
}
.showcase-top p {
font-size: 1.1rem;
letter-spacing: 5px
}
#second {
margin-top: 0.2rem
}
.tabs {
display: flex;
text-align: center;
padding: 2rem;
}
.tab {
width: 100px;
height: 100px;
text-align: center;
border: 1px solid rgba(166, 151, 7, 0.8);
border-radius: 50%;
margin-right: 2rem;
}
.tabs .tab h1 {
margin-top: 0.9rem;
}
.form {
padding: 0.5rem 5rem;
text-align: center;
margin-right: 2.5rem;
width: 90%;
max-width: 900px;
padding: 10px 50px;
margin-left: 0.6rem;
}
.form input {
width: 70%;
padding: 0.8rem;
border: none;
border-radius: 1.5rem;
margin-right: 0.5rem;
outline: none;
}
.form button {
width: 25%;
padding: 0.8rem;
border-radius: 1.5rem;
border: none;
background-color: #a69802;
color: #edece1;
cursor: pointer;
outline: none;
}
.footer {
color: rgba(255, 255, 255, 0.6);
width: 100%;
font-size: 6px;
position: absolute;
bottom: 10%;
left: 50%;
transform: translate(-10%, 51%);
letter-spacing: 1px
}
#media screen and (max-width:768px) {
.tabs {
flex-direction: column;
width: 100%;
align-items: center;
justify-content: center;
margin-left: 0.6rem;
}
.tab {
margin-bottom: 1rem;
height: 90px;
width: 90px;
}
.form {
display: inline-block;
margin-right: 1rem;
margin-left: 1rem;
margin-top: -3rem;
width: 100%;
}
.form button {
width: 100px;
}
.showcase-top {
width: 500px;
margin-left: 1rem;
}
.showcase-top h1 {
font-size: 2rem;
}
.showcase-top p {
font-size: 1rem;
letter-spacing: 3px;
}
}
#media screen and (min-width:320px) and (max-width:480px) {
.form {
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
}
.form input {
width: 65%;
}
.form button {
width: 40%;
margin-top: 1rem;
}
.showcase-top p {
font-size: 0.7rem
}
.tabs {
padding: 0;
padding-top: 1.2rem
}
.tab {
height: 90px;
width: 90px;
}
.footer {
bottom: 15%;
left: 23%
}
}
<body>
<showcase id="all">
<div class="showcase-top">
<h1>Coming Soon</h1>
<p>My website is under construction</p>
<p id="second">Follow us now!</p>
</div>
<section class="tabs">
<div class="tab">
<h1 id="day">na</h1>
<p>Days</p>
</div>
<div class="tab">
<h1 id="hour">na</h1>
<p>Hours</p>
</div>
<div class="tab">
<h1 id="min">na</h1>
<p>Minutes</p>
</div>
<div class="tab">
<h1 id="sec">na</h1>
<p>Seconds</p>
</div>
</section>
<form class="form">
<input type="email" placeholder="Enter Email...">
<button type="submit">Subscribe</button>
</form>
</showcase>
<footer class="footer">
<h1>Designed by Cag | Copyright © 2021</h1>
</footer>

Moving a button in the navbar, best Practices?

I have shifted my CTA "subscribe" button in the navbar to the far right using margin. But I am wondering if there is a better way to write this code-wise?
Prior to using the margin, I couldn't get the button to move at all, it was originally located beside the other navbar link items.
I have attached the code I am using below.
* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
height: 100%;
display: block
}
.header-logo img {
height:150px;
margin-top: 10px;
float: left;
margin-right: 5px;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
padding-top: 50px;
}
header nav ul li {
display: inline-flex;
float: left;
list-style: none;
padding: 0px 15px;
}
header nav ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-transform: uppercase;
}
.sub {
margin: 0px 1300px;
float: right;
height: auto;
position: relative;
z-index: 1000;
}
ul li a:hover {
color: firebrick;
}
#media only screen and (min-width: 1000px){
header .header-logo {
float: left;
padding: 15px 15px;
height: 0px;
max-width: 220px;
display: table;
}
header nav ul {
margin: 20px 0px 0px 20px;
float: left;
}
header nav ul li a {
line-height: 50px;
}
header .sub {
display: block;
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-transform: uppercase;
line-height: 40px;
border: 2px solid #111;
float: right;
margin-right: 40px;
margin-top: 5px;
padding: 0 20px;
}
}
/*INDEX*/
.index-banner {
margin: 0 auto;
width: 100%;
height:calc(100vh - 100px);
background-image: url('img/road_trip.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: table;
}
.index-banner h1 {
font-family:'Karma', serif;
font-size: 60px;
font-weight: 100;
line-height: 70px;
color: #fff;
text-align: center;
text-shadow: 2px 2px 8px #111;
}
.verticial-center {
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}
.footer {
font-family:'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
margin: 0px 330px;
padding: 15px;;
}
.hero-section {
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
}
.hero-section {
font-family:'Karma', serif;
font-size: 40px;
color: #111;
text-align: center;
padding: 25px;
}
.hero-paragraph {
margin: 0 auto;
width: 1895px;
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-align: center;
padding: 25px;
}
#media only screen and (min-width: 1000px){
.wrapper {
width: 2000px;
margin:0 auto;
}
.index-banner {
height:500px;
}
.hero-paragraph {
width: 2000px;
margin:0 auto;
}
.hero-section {
width: 2000px;
margin:0 auto;
}
}
/* FOOTER*/
footer {
width: calc(100% - 80px);
padding: 40px 40px;
margin-top: 20px;
background-color: #111;
overflow: hidden;
}
footer ul {
width: fit-content;
float: left;
padding-left: 20px;
}
footer ul li {
display: block;
list-style: none;
}
footer ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 18px;
color: #fff;
line-height: 40px;
}
.footer-sm {
width: 50px;
float: right;
}
.footer-sm img {
width: 100%;
margin-bottom: 10px;
display: block;
}
#media only screen and (min-width: 1000px){
footer ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 18px;
color: #fff;
line-height: 40px;
}
}
</head>
<body>
<header>
<div class="header-logo">
<img src="img/Milestonehackers.jpg" alt="Milestonehackers logo">
</div>
<nav>
<ul>
<li>Home</li>
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
<div class="sub">
<li>Subscribe</li>
</div>
</ul>
</nav>
</header>
<main>
<section class="index-banner">
<div class="verticial-center">
<h1>Milestonehackers Podcast & Newsletter</h1>
</div>
</section>
<div class="wrapper">
<section class="hero-section">
<h2>What Can you Expect From our Podcast</h2>
<p class="hero-paragraph">A host (meee, Paolo) interviewing various types of entrepreneurs or founders both technical and non-technical. Each entrepreneur has their own unique story that resulted in learning or experiencing something that can benefit our audience who may want to go down the entrepreneurial path!</p>
</section>
</div>
</main>
<div class="wrapper">
<footer>
<ul>
<li>Home</li>
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div class="footer-sm">
<a href="https://twitter.com/Milestonehacker">
<img src="img/twitter.png" alt="twiiter icon">
<a href="https://open.spotify.com/show/2ZiIxv5Mr83seTtNsg3LD9">
<img src="img/spotify.png" alt="spotify icon">
<img src="img/rss.png" alt="rss icon">
</a>
</div>
<p class="footer">Copyright © 2019; All Rights Reserved</p>
</footer>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-database.js"></script>
<script src="app.js"></script>
</div>
</body>
</html>

You can achieve that by removing float from ul element and add display flex. Also, remove float and margin from .sub element. Then by adding margin-left: auto to .sub the element will move to the far right.
One more note: your hero-section and some other elements have a width of 2000px which is not ideal for many screens. You can add max-width: 100% so it fits the screen if it is bigger than the screen.
See this code:
* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
height: 100%;
display: block
}
.header-logo img {
height:150px;
margin-top: 10px;
float: left;
margin-right: 5px;
}
header nav ul {
display: block;
margin: 0 auto;
width: 100%;
padding-top: 50px;
padding: 0;
}
header nav ul li {
display: inline-flex;
float: left;
list-style: none;
padding: 0px 15px;
}
header nav ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-transform: uppercase;
}
.sub {
/* Add margin-left: auto */
margin-left: auto;
/* float: right;*/
height: auto;
position: relative;
z-index: 1000;
}
ul li a:hover {
color: firebrick;
}
#media only screen and (min-width: 1000px){
header .header-logo {
float: left;
padding: 15px 15px;
height: 0px;
max-width: 220px;
display: table;
}
header nav ul {
margin: 20px 0px 0px 20px;
float: left;
}
header nav ul li a {
line-height: 50px;
}
header .sub {
display: block;
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-transform: uppercase;
line-height: 40px;
border: 2px solid #111;
float: right;
margin-right: 40px;
margin-top: 5px;
padding: 0 20px;
}
}
/*INDEX*/
.index-banner {
margin: 0 auto;
width: 100%;
height:calc(100vh - 100px);
background-image: url('img/road_trip.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: table;
}
.index-banner h1 {
font-family:'Karma', serif;
font-size: 60px;
font-weight: 100;
line-height: 70px;
color: #fff;
text-align: center;
text-shadow: 2px 2px 8px #111;
}
.verticial-center {
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}
.footer {
font-family:'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
margin: 0px 330px;
padding: 15px;;
}
.hero-section {
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
}
.hero-section {
font-family:'Karma', serif;
font-size: 40px;
color: #111;
text-align: center;
padding: 25px;
}
.hero-paragraph {
margin: 0 auto;
width: 1895px;
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-align: center;
padding: 25px;
}
#media only screen and (min-width: 1000px){
.wrapper {
width: 2000px;
margin:0 auto;
}
.index-banner {
height:500px;
}
.hero-paragraph {
width: 2000px;
margin:0 auto;
}
.hero-section {
width: 2000px;
margin:0 auto;
}
}
/* FOOTER*/
footer {
width: calc(100% - 80px);
padding: 40px 40px;
margin-top: 20px;
background-color: #111;
overflow: hidden;
}
footer ul {
width: fit-content;
float: left;
padding-left: 20px;
}
footer ul li {
display: block;
list-style: none;
}
footer ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 18px;
color: #fff;
line-height: 40px;
}
.footer-sm {
width: 50px;
float: right;
}
.footer-sm img {
width: 100%;
margin-bottom: 10px;
display: block;
}
#media only screen and (min-width: 1000px){
footer ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 18px;
color: #fff;
line-height: 40px;
}
}
<body>
<header>
<div class="header-logo">
<img src="img/Milestonehackers.jpg" alt="Milestonehackers logo">
</div>
<nav>
<ul>
<li>Home</li>
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
<div class="sub">
<li>Subscribe</li>
</div>
</ul>
</nav>
</header>
<main>
<section class="index-banner">
<div class="verticial-center">
<h1>Milestonehackers Podcast & Newsletter</h1>
</div>
</section>
<div class="wrapper">
<section class="hero-section">
<h2>What Can you Expect From our Podcast</h2>
<p class="hero-paragraph">A host (meee, Paolo) interviewing various types of entrepreneurs or founders both technical and non-technical. Each entrepreneur has their own unique story that resulted in learning or experiencing something that can benefit our audience who may want to go down the entrepreneurial path!</p>
</section>
</div>
</main>
<div class="wrapper">
<footer>
<ul>
<li>Home</li>
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div class="footer-sm">
<a href="https://twitter.com/Milestonehacker">
<img src="img/twitter.png" alt="twiiter icon">
<a href="https://open.spotify.com/show/2ZiIxv5Mr83seTtNsg3LD9">
<img src="img/spotify.png" alt="spotify icon">
<img src="img/rss.png" alt="rss icon">
</a>
</div>
<p class="footer">Copyright © 2019; All Rights Reserved</p>
</footer>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-database.js"></script>
<script src="app.js"></script>
</div>

Integrate Randomly Selected Photos into Web Page from a Specified Link

I've come across an issue when coding a site for a colleague of mine. He resells t-shirts that are given to him by a friend, and does so by listing them on his current eBay page. He asked me to code a site for him which would promote his t-shirts more, and wanted me to allow customers to click on the shirts from his website to be redirected to the corresponding eBay page. I want to be able to randomly generate images from his eBay page and have them show up on the website, and therefore be able to redirect users to his eBay page from the site.
EDIT: I have already included a script in my .html file for randomly selecting images. My main issue is being able to randomly select such images from eBay itself.
Here is the HTML for the page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ADARA Enterprises</title>
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
</head>
<script type="text/javascript">
var imageURLs = [
"http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
, "http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
, "http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
];
function getImageTag() {
var img = '<img src=\"';
var randomIndex = Math.floor(Math.random() * imageURLs.length);
img += imageURLs[randomIndex];
img += '\" alt=\"Some alt text\"/>';
return img;
}
</script>
</head>
<body>
<div id="background">
<div id="page">
<div id="header">
<span id="connect">
</span>
<!-- /#logo -->
<ul id="navigation">
<li>Home</li>
<li>About</li>
<!-- <li>Blog</li> -->
<li>Shop</li>
<li class="selected">Contact Us</li>
</ul>
</div> <!-- /#header -->
<div id="contents">
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
</p>
<address>
<span>Telephone numbers:</span>
555-5678901 to 555-5678902
<span>Email Address:</span>
adarasomething#whateverthehell.com
<span>Street Address:</span>
4th Lit Street, 73813 Yeet, CO
</address>
</div>
<div id="featured">
<ul>
<li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
<li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
<li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
<li class="last"><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
</ul>
shop here!
</div>
</div> <!-- /#contents -->
<div id="footer">
<div id="description">
<div>
<span>© Copyright © 2017. ADARA Enterprises All rights reserved</span>
</div>
<p>
This is just filler text. <br>
<br>
Filler text.
</p>
</div>
<div class="navigation">
Home|
About|
<!-- Yeet| -->
Shop|
Contact Us
</div>
</div> <!-- /#footer -->
</div> <!-- /#page -->
</div> <!-- /#background -->
</body>
</html>
And here is the CSS file associated with it:
html {
font-family: 'Trebuchet MS', sans-serif, Arial, Helvitica;
}
body {
background-color: #ffffff;
margin: 0;
// padding-top: 19px;
min-height: 100%;
}
#background {
background: url(https://static.pexels.com/photos/29724/pexels-photo-29724.jpg) repeat;
min-height: 100%;
//border-top: 1px solid #000000;
margin: 0;
}
#page {
width: 960px;
margin: 0 auto;
min-height: 100%;
height: 100%;
}
#font-face {
font-family: 'Arial Bold';
src: url('fonts/corben-bold-webfont.eot');
src: local('?'), url('fonts/corben-bold-webfont.woff') format('woff'),
url('fonts/corben-bold-webfont.ttf') format('truetype'),
url('fonts/corben-bold-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*
img {
border: 0;
}
*/
#connect .facebook, #connect .twitter, #connect .vimeo {
background: url(../images/icons.png) no-repeat;
}
/*------------------------------ HEADER ------------------------------*/
#header {
background: url(../images/bg-header.png) no-repeat center top;
min-height: 340px;
margin-bottom: 20px;
}
#connect {
float: left;
display: inline-block;
height: 30px;
width: 300px;
margin: 15px 0 15px 10px;
}
#connect a {
display: inline-block;
height: 30px;
margin: 0 10px;
padding: 0;
}
#connect .facebook {
background-position: 0 2px;
width: 27px;
}
#connect .twitter {
background-position: 0 -36px;
width: 36px;
}
/* #connect .vimeo {
background-position: 0 -74px; // Removed Vimeo Logo. Can implement any other logo here with matching dimensions
width: 32px; */
}
#infos {
float: right;
color: #ffe680 ;
display: inline-block;
height: 30px;
width: 200px;
margin: 15px 0;
}
#infos a {
color: #ffe680;
font-family: Arial;
font-size: 14px;
line-height: 30px;
margin: 0 5px;
text-decoration: none;
}
/** Logo **/
#logo {
clear: both;
display: block;
height: 217px;
width: 950px;
margin: 0 auto;
}
/** Navigation **/
#navigation {
height: 40px;
list-style-type: none;
margin: 0;
display: inline-block;
padding: 8px 20px 12px 84px;
}
#navigation li {
float: left;
font-family: 'Arial Black';
font-size: 22px;
font-weight: bold;
line-height: 40px;
width: 186px;
text-align: center;
}
#navigation a {
color: #ffe680;
text-decoration: none;
text-shadow: 1px 1px #C3A33B;
}
#navigation a:hover, #navigation li.selected a {
color: #FFFFAC;
text-shadow: 1px 1px 0 #C3A33B;
}
/*------------------------------ CONTENTS ------------------------------*/
#contents {
margin: 0 0 40px;
padding: 0 5px;
}
#main {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
margin: 0 0 30px;
padding: 0 0 30px;
}
#main p {
color: #ffe680;
font-size: 14px;
line-height: 20px;
margin: 0;
padding: 0 0 20px;
text-shadow: 1px 1px #C3A33B;
}
#main p a {
color: #ffe680;
text-shadow: 1px 1px #C3A33B;
}
#main address {
color: #FFFFAC;
font-style: normal;
width: 350px;
margin: 0 auto;
text-align: center;
text-shadow: 1px 1px #C3A33B;
}
#main address span {
color: #ffe680;
text-shadow: 1px 1px #C3A33B;
display: block;
font-family: 'Arial Black';
font-size: 18px;
line-height: 20px;
margin: 20px 0;
width: 350px;
}
/* #adbox {
background: #FFFFAC url(../images/bottom-shadow-headliner.jpg) no-repeat center bottom;
height: 371px;
width: 935px;
margin: 0 auto;
padding: 7px 7px 22px;
position: relative;
}
#adbox img {
height: 371px;
width: 935px;
margin: auto;
}
*/
#featured {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
padding: 0 0 42px;
position: relative;
}
#featured ul {
display: inline-block;
list-style-type: none;
margin: 0 auto;
padding: 0;
}
#featured ul li {
float: left;
background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
height: 253px;
width: 204px;
margin-right: 28px;
padding: 6px 6px 15px;
}
#featured ul li.last {
margin-right: 0;
}
#featured ul li img {
border: 1px solid #e4e0d1;
}
#featured a.button {
background: url(../images/bg-button.jpg) no-repeat;
color: #C3A33B;
display: block;
font-family: 'Arial Black';
font-size: 18px;
height: 30px;
line-height: 30px;
width: 144px;
padding: 4px 0 6px;
text-align: center;
text-decoration: none;
position: absolute;
bottom: -20px;
left: 403px;
}
/*------------------------------ Blog Page ------------------------------*/
#blogs {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
padding: 0 0 20px;
position: relative;
}
#blogs div {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
display: inline-block;
margin: 0 0 20px;
padding: 0 0 20px;
}
#blogs div.last {
background: none;
margin: 0;
}
#blogs span {
float: left;
background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
display: block;
height: 253px;
width: 204px;
margin-bottom: 6px;
margin-right: 40px;
padding: 6px 6px 15px;
}
#blogs span img {
border: 1px solid #e4e0d1;
}
#blogs h3 {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
line-height: 30px;
margin: 0 0 20px 258px;
padding: 0 0 10px;
}
#blogs p {
color: #ffe680;
max-height: 160px;
line-height: 20px;
margin: 0 0 20px 258px;
padding: 0 0 20px;
overflow: hidden;
text-shadow: 2px 2px #C3A33B;
}
#blogs p a {
color: #ffe680;
text-shadow: 2px 2px #C3A33B;
}
#blogs a.more {
color: #C3A33B;
font-style: italic;
text-decoration: none;
}
#blogs div.buttons, #blogs div.blog-entry-buttons {
background: none;
display: inline-block;
width: 328px;
margin: 0;
padding: 0;
position: absolute;
bottom: -20px;
left: 311px;
}
#blogs div.buttons a, #blogs div.blog-entry-buttons a {
float: left;
background: url(../images/bg-button.jpg) no-repeat;
color: #C3A33B;
display: block;
font-family: 'Arial Black';
font-size: 18px;
height: 30px;
line-height: 30px;
width: 144px;
margin-right: 20px;
padding: 4px 0 6px;
text-align: center;
text-decoration: none;
}
#blogs div.blog-entry-buttons {
width: 690px;
left: 258px;
}
#blogs div.blog-entry-buttons a.back {
float: right;
font-size: 16px;
margin-right: 0;
}
/*------------------------------ Shop Page ------------------------------*/
#shop {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
padding: 0 0 20px;
position: relavive;
}
#shop ul.items {
display: inline-block;
list-style-type: none;
margin: 0 auto 16px;
padding: 0;
}
#shop ul.items li {
float: left;
color: #ffe680;
height: 340px;
width: 216px;
margin-bottom: 20px;
margin-right: 28px;
}
#shop ul.items li span {
background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
display: block;
height: 253px;
width: 204px;
margin-bottom: 10px;
padding: 6px 6px 14px;
}
#shop ul.items li span img {
border: 1px solid #e4e0d1;
}
#shop ul.items li span.price {
float: right;
background: none;
color: #FFFFAC;
display: inine-block;
font-size: 17px;
height: 20px;
line-height: 20px;
width: 80px;
margin: 0;
padding: 0;
text-align: right;
}
#shop ul.items li a.buy {
background-color: #ffe680;
color: #C3A33B;
display: block;
font-family: 'Arial Black';
font-size: 14px;
height: 20px;
line-height: 20px;
width: 80px;
border-radius: 3px;
margin: 13px auto 0;
padding: 1px 0 4px;
text-align: center;
text-decoration: none;
}
#shop ul.items li.last {
margin-right: 0;
}
/*------------------------------ FOOTER ------------------------------*/
#footer {
padding: 0 5px;
}
#description {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
margin: 0 0 30px;
padding: 0 0 30px;
}
#description div {
float: left;
width: 180px;
margin-right: 50px;
}
/*#description div a.logo {
background: url(../images/logo-footer.gif) no-repeat;
display: block;
height: 30px;
width: 175px;
margin: 0 0 10px;
}
*/
#description div span {
padding-bottom: 5px;
color:#ffe680;
display: block;
font-size: 11px;
line-height: 20px;
text-shadow: 1px 1px #C3A33B;
}
#description div span a {
color: #ffe680;
text-decoration: none;
text-shadow: 1px 1px #C3A33B;
}
#description p {
color: #ffe680;
font-size: 13px;
line-height: 20px;
margin: 20px 0;
text-align: justify;
text-shadow: 1px 1px #C3A33B;
}
#description p a {
color: #ffe680;
text-shadow: 1px 1px #C3A33B;
}
#footer div.navigation {
color: #ffe680;
font-size: 14px;
line-height: 20px;
width: 338px;
margin: 0 auto 20px;
text-shadow: 0 1px 0 #C3A33B;
}
#footer div.navigation a {
color: #ffe680;
padding: 0 15px;
text-decoration: none;
text-shadow: 1px 1px 0 #C3A33B;
}
#footer div.navigation a:hover {
color: #FFFFAC;
}
/*------------------------------ For IE6 ------------------------------*/
#background {
_height: 1440px;
min-height: 100%;
}
#featured a.button {
_top: 299px;
}
#blogs {
_height: 620px;
}
#blogs div.buttons, #blogs div.blog-entry-buttons {
_top: 620px;
}
I know this is a lot, and I'm not asking for anyone to look through the entirety of the code and provide me with completely revamped code that I can use right off the bat. I could really just use some help figuring out an algorithm to put into place for creating these randomly generated images on the page.
Any help that can be provided is very much appreciated! Thank you all!

I ended up creating an iframe and pulling the photos from E-bay's site regardless. Couldn't create live image pulls due to built-in security, so I had to go ahead and use images manually in a DB.
Also created an href redirect to the owner's ebay sales page, which worked out when it came to overall sales of the shirts / products, etc.