我现在正在尝试在线研究，看看是否有可能结合我当前的项目，基本上让我的索引页面向下滚动到我的主页，然后滚动到我的联系人（如果该人也选择的话）或者他们可以使用“按钮” “在索引页中我仍在处理。
<!DOCTYPE HTML>
<html>
<head>
<link rel="icon" href="ghost.ico">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-137617043-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-137617043-2');
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PTZXGBD');</script>
<!-- End Google Tag Manager -->
<!--- Google Tag Manager -->
</head>
<main>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<section class="showcase">
<div class="video-container thick-green-border">
<video autoplay loop muted playsinline
class="video-background">
<source src="coiblue.m4v" type="video/mp4" alt="Gx0st"></video>
</div>
<div class="content">
<a href="home.html" class="btn">
<img class="smaller-image" src="wh.png" alt="GhostRobles Portfolio @GhostRobles">
</a>
</div>
</section>
<!-- Lets get mobile viewport -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="True" name="HandheldFriendly"/>
<meta id="viewport-tag" name="viewport"
content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
</main>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PTZXGBD"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<style>
.thick-green-border {
border-color: rgb(13, 214, 13);
border-width: 15px 5px 15px 5px;
border-style: dashed;
}
.smaller-image {
width: 150px;
}
@font-face
{font-family: 'vcr_osd_mono-webfont';
src: url('vcr_osd_mono-webfont.eot');
src: url('vcr_osd_mono-webfont.eot?#iefix') format('embedded-opentype'), url('vcr_osd_mono-webfont.woff2') format('woff2'), url('vcr_osd_mono-webfont.woff') format('woff'), url('vcr_osd_mono-webfont.ttf') format('truetype'), url('webfont.svg#svgFontname') format('svg');} * {
font-display: swap;
}
:root {
--primary-color: #000000;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "vcr_osd_mono-webfont";
line-height: 1.5;
cursor: url(https://cur.cursors-4u.net/toons/too-3/too297.cur), auto;
}
a {
font-size: 30px;
text-decoration: none;
color: var(--primary-color);
}
h1 {
font-weight: 300;
font-size: 60px;
line-height: 1.2;
margin-bottom: 15px;
-webkit-text-stroke: 1px rgb(255, 0, 0);
-webkit-text-fill-color: rgb(0, 0, 0);
}
.showcase {
height: 100vh; /* changes image top to bottom */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
padding: 0 20px;
}
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: var(--primary-color) url('behindit.m4v') no-repeat center
center/contain; /* changed from cover to contain */
}
.video-container video {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: contain;
}
.video-container:after {
content: '';
z-index: 1;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
position: static;
}
.content {
z-index: 2;
}
.btn {
display: inline-block;
padding: 10px 5px 5px 2px;
background: var(--primary-color);
color: rgb(255, 0, 0);
border-radius: 50%;
border: dashed rgb(255, 0, 0) 5px;
margin-left: auto;
opacity: 0.85;
margin-top: -450px;
box-shadow: 0px 0px 10px 20px black;
background-color: transparent;
}
.btn:hover {
transform: scale(1.2); /* this changes the button hover */
}
html, body {
height: 100%;
width: 100%;
overflow-x: hidden;
margin: 0; /* fixed, note, don't add another repository. */
}
</style>
</body>
</html><!DOCTYPE html>
<html>
<!-- START NAV -->
<head>
<link rel="icon" href="Bax.ico">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-137617043-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-137617043-2');
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PTZXGBD');</script>
<!-- End Google Tag Manager -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<nav id="menu" class="nav">
<div class="nav-list">
<a style="font-size: 25px" href="https://www.youtube.com/c/ghostrobles">Youtube</a>
<a style="font-size: 25px" href="https://www.twitch.tv/ghostrobless">Twitch</a>
<a style="font-size: 25px" href="contact.html">Contact</a>
</div>
</nav>
<!-- END NAV -->
<!-- Lets get mobile viewport -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="True" name="HandheldFriendly"/>
<meta id="viewport-tag" name="viewport"
content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
<!-- START WELCOME SECTION -->
<!-- Background Start -->
<section class="showcase">
<div class="video-container thin-red-border">
<video src="LTWS.m4v" autoplay playsinline muted loop></video>
</div> </section>
<section id="welcome-section" class="welcome-section">
<h1>Ghost Robles</h1>
</section> <!--- removing this will collapse it -->
<!-- Background End -->
<!-- END WELCOME SECTION -->
<!-- START PROJECTS SECTION -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PTZXGBD"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<section id="projects" class="projects-section">
<h2 class="projects-section-header">Files</h2>
<div class="projects-grid"> <!--- adding </div at the end will destroy the initial boxes of content-->
<!-- Luh tyler x SleazyWorld Go (Don't Get Ya Feelings In It Behind The Scenes by Ghost Robles) -->
<a
href="https://www.youtube.com/watch?v=F7tcVwjj5x0"
target="_self"
class="project project-tile"
>
<img
class="project project-tile"
src="quadrino.jpg"
alt="Funny Marco, King Cid, JWondr, Luh Tyler Chilling"/>
<p class="project-tile">
<span class="code"><</span>
Luh Tyler x SleazyWorld G0
<span class="code">/></span>
</p>
</a>
<!-- Luh tyler x SleazyWorld Go (Don't Get Ya Feelings In It Behind The Scenes by Ghost Robles) -->
<!-- Bad Trip by Lucius Arthur Directed By Katya Ganfeld -->
<a
href="https://www.youtube.com/watch?v=8kmrgKSGgN4"
target="_self"
class="project project-tile"
>
<img
class="project project-tile"
src="tablemafia.png"
alt="Lucius Arthur Music Video shot in Los Angeles California by Katya Ganfeld on Kodak Film"/>
<p class="project-tile">
<span class="code"><</span>
BAD TRIP by Lucius Arthur
<span class="code">/></span>
</p>
</a>
<!-- Bad Trip by Lucius Arthur Directed By Katya Ganfeld -->
<!-- DaBaby Shake Sumn' Official Music Video -->
<a
href="https://www.youtube.com/watch?v=9ZRWV3aW8pc"
target="_self"
class="project project-tile"
>
<img
class="project project-tile"
src="Ghost.jpg"
alt="I shot the Behind The Scenes for this Music Video and wanted to share the Official Music Video by DaBaby"/>
<p class="project-tile">
<span class="code"><</span>
Shake Sumn' by DaBaby
<span class="code">/></span>
</p>
</a>
<!-- DaBaby Shake Sumn' Official Music Video -->
<!-- DaBaby Selling Crack Ft. OFFSET from The Migos -->
<a
href="https://www.youtube.com/watch?v=I8DUHA0Lz60"
target="_self"
class="project project-tile"
>
<img
class="project project-tile"
src="let3mkn0w.jpg"
alt="DaBaby Productions with the Reel Goats and Offset from The Migos"/>
<p class="project-tile">
<span class="code"><</span>
SELLING CRACK ft. OFFS3T
<span class="code">/></span>
</p>
</a>
<!-- Brothel. Music Live at Los Globos in Los Angeles, CA -->
<a
href="https://youtu.be/g_5LIly8nVc"
target="_self"
class="project project-tile"
>
<img
class="project project-tile"
src="brothel.jpg"
alt="Brothel. Music Live in Los Angeles, CA at Los Globos filmed by Ghost Robles and Spicy Rico"/>
<p class="project-tile">
<span class="code"><</span>
Brothel.✱Los Globos
<span class="code">/></span>
</p>
</a>
<!-- Brothel. Music Live at Los Globos in Los Angeles, CA -->
<!-- Spicy Rico x Models Laguna Beach Visual -->
<a
href="https://www.youtube.com/watch?v=ihkOYtflnLQ&t=29s"
target="_self"
class="project project-tile"
>
<img
class="project project-tile"
src="Laguna Girl.jpg"
alt="Going to Laguna Beach and capturing a visual with my friend Spicy Rico"/>
<p class="project-tile">
<span class="code"><</span>
Models x Laguna Beach
<span class="code">/></span>
</p>
</a>
<!-- Laguna Beach Visual with Models -->
<!-- Nickmercs 500k Event in San Diego, California -->
<a
href="https://youtu.be/Dt1SwK-IjpM"
target="_self"
class="project project-tile"
>
<img
class="project project-tile"
src="NICKMERCS.jpg"
alt="NICKMERCS with a fan in San Diego California for his 500k Event for MFAM."/>
<p class="project-tile">
<span class="code"><</span>
Nickmercs 300k+ MFAM Event!
<span class="code">/></span>
</p>
</a>
<!-- Nickmercs 500k Event in San Diego, California -->
<!--- OhGeesy Live at The Observatory San Diego, California (Presented by Ghost Robles)-->
<a
href="https://youtu.be/rTkBNso_UtY"
target="_self"
class="project project-tile"
>
<!-- Using project project-tile instead of project-image creates a barrier look -->
<img
class="project project-tile"
src="OhGeesy.jpg"
alt="OhGeesy Live at The Observatory in San Diego, California. Presented by Ghost Robles."
/>
<p class="project-tile">
<span class="code"><</span>
OTXBOYZ OhGeesy
<span class="code">/></span>
</p>
</a>
<!--- OhGeesy Live at The Observatory San Diego, California (Presented by Ghost Robles)-->
<!--- Blueface and Desiigner Visual in Calabasas by Ghost Robles -->
<a
href="https://youtu.be/ASrD3c95MlI"
target="_self"
class="project project-tile"
>
<img
class="project project-tile"
src="Desiigner.jpg"
alt="Blueface and Desiigner Visual filmed in Calabasas by Ghost Robles"
/>
<p class="project-tile">
<span class="code"><</span>
Lifestyle 91301: Visual in Calabasas
<span class="code">/></span>
</p>
</a>
<!--- Blueface and Desiigner Visual -->
<!--- Coi Leray Anxiety Visual Behind the Scenes -->
<a
href="https://youtu.be/gGoQEMWxLFc"
target="_self"
class="project project-tile"
>
<img
class="project project-tile"
src="coicoi.jpg"
alt="Coi Leray Anxiety Behind-the-Scenes Visual by Ghost Robles"
/>
<p class="project-tile">
<span class="code"><</span>
Coi Leray "Anxiety"
<span class="code">/></span>
</p>
</a>
<!--- Coi Leray Anxiety Visual BTS -->
<!-- "Cold December" Visual in Malibu -->
<a
href="https://www.youtube.com/watch?v=a-QsWT9ZQ7o"
target="_self"
class="project project-tile"
>
<img
class="project project-tile"
src="reelgoats.jpg"
alt="Rod Wave Cold December Behind-the-Scenes Visual by Ghost Robles"
/>
<p class="project-tile">
<span class="code"><</span>
"Cold December" Visual in Malibu
<span class="code">/></span>
</p>
</a>
<!--- "Cold December" Visual in Malibu -->
<!-- OG 3Three (Visual by Ghost Robles) -->
<a
href="https://www.youtube.com/watch?v=JqsShaF12OA"
target="_self"
class="project project-tile"
>
<img
class="project project-tile"
src="3Three.jpg"
alt="NBA OG 3Three - Cardio Visual Behind-the-Scenes by Ghost Robles"
/>
<p class="project-tile">
<span class="code"><</span>
NBA OG 3Three
<span class="code">/></span>
</p>
</a>
<!-- OG 3Three (Visual by Ghost Robles) -->
<!-- Dip With My Chips -->
<a
href="https://youtu.be/hYuWfoO6RHE"
target="_self"
class="project project-tile"
>
<img
class="project project-tile"
src="dipwithmychips.jpg"
alt="Lil Tracy and Big Head Live at The House of Blues in San Diego, California presented by Ghost Robles"
/>
<p class="project-tile">
<span class="code"><</span>
Lil Tracy & Big Head
<span class="code">/></span>
</p>
</a>
<!--- Dip With My Chips -->
<!-- It Takes Time -->
<a
href="https://youtu.be/NzLmU4qtFoE"
target="_self"
class="project project-tile"
>
<img
class="project-image"
src="denisvibe.jpg"
alt="Atmosphere - Woes Visual Behind-the-Scenes by Ghost Robles"
/>
<p class="project-tile">
<span class="code"><</span>
It Takes Time
<span class="code">/></span>
</p>
</a>
<!-- It Takes Time -->
<!--- Blueface and Hardini --->
<a
href="https://youtu.be/CW999c2srPw"
target="_self"
class="project project-tile"
>
<img
class="project-image"
src="blueface.jpg"
alt="Blueface and Hardini Music Video Visual Behind-the-Scenes by Ghost Robles"
/>
<p class="project-title">
<span class="code"><</span>
Blueface and Hardini
<span class="code">/></span>
</p>
</a>
<!--- Blueface and Hardini --->
<!--- Se Va by Delian --->
<a
href="https://www.youtube.com/watch?v=pS1jRP3EnRo"
target="_self"
class="project project-tile"
>
<img
class="project-image"
src="SeVa.jpg"
alt="Delian Se Va Music Video Visual by Ghost Robles"
/>
<p class="project-title">
<span class="code"><</span>
Delian - Se Va
<span class="code">/></span>
</p>
</a>
<!--- Se Va by Delian --->
<!---- BLM Peaceful Protest --->
<a
href="https://www.youtube.com/watch?v=VCvm1xSX4zQ"
target="_self"
class="project project-tile"
>
<img
class="project-image"
src="BLMbalboa.jpg"
alt="BLM Peaceful Protest at Balboa Park in San Diego, California."
/>
<p class="project-title">
<span class="code"><</span>
BLM Peaceful Protest
<span class="code">/></span>
</p>
</a>
<!---- BLM Peaceful Protest --->
<!-- Day by Day -->
<a
href="https://www.youtube.com/watch?v=J7kirbxR_Is"
target="_self"
class="project project-tile"
>
<img
class="project-image"
src="daybyday.jpg"
alt="project"
/>
<p class="project-title">
<span class="code"><</span>
Day by Day (ft. Phaze Jones)
<span class="code">/></span>
</p>
</a>
<!-- Day by Day -->
</div> <!-- If you add div under section, it moves "Show All" for some reason-->
<a
href="https://www.youtube.com/channel/UCSM3fpzXloGLNL7N6qnjamA"
class="btn btn-show-all"
target="_self"> Show All </a>
</section>
<!-- END PROJECTS SECTION -->
<!-- START FOOTER SECTION -->
<footer>
<p>
Love Yourself
</p>
<p>
© Coded by
<a href="https://www.youtube.com/channel/UCSM3fpzXloGLNL7N6qnjamA" target="_blank"
>GhostRobles</a>
</p>
</footer>
</head>
<!-- END FOOTER SECTION -->
<body>
<style>
/* Stills */
/* Stills */
/* project hover */
a:hover {color: red;}
/* project hover */
/* Custom properties/variables */
:root {
--main-white: #ffffff;
--main-red: red;
--main-blue: #45567d;
--main-gray: #303841;
}
/* Base reset */
* {
margin: 0;
padding: 0;
}
/* box-sizing and font sizing */
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
/* Set font size for easy rem calculations
* default document font size = 16px, 1rem = 16px, 100% = 16px
* (100% / 16px) * 10 = 62.5%, 1rem = 10px, 62.5% = 10px
*/
font-size: 45.5%;
scroll-behavior: smooth;
}
/* A few media query to set some font sizes at different screen sizes.
* This helps automate a bit of responsiveness.
* The trick is to use the rem unit for size values, margin and padding.
* Because rem is relative to the document font size
* when we scale up or down the font size on the document
* it will affect all properties using rem units for the values.
*/
/* I am using the em unit for breakpoints
* The calculation is the following
* screen size divided by browser base font size
* As an example: a breakpoint at 980px
* 980px / 16px = 61.25em
*/
/* 1200px / 16px = 75em */
@media (max-width: 75em) {
html {
font-size: 60%;
}
}
/* 980px / 16px = 61.25em */
@media (max-width: 61.25em) {
html {
font-size: 58%;
}
}
/* 460px / 16px = 28.75em */
@media (max-width: 28.75em) {
html {
font-size: 55%;
}
}
/* Base styles */
body {
font-family: "vcr_osd_mono-webfont";
font-size: 1.8rem; /* 18px */
font-weight: 400;
line-height: 1.4;
color: var(--main-white);
cursor: url(https://cur.cursors-4u.net/toons/too-3/too297.cur), auto;
}
h1,
h2 {
font-family: "vcr_osd_mono-webfont";
font-weight: 700;
text-align: center;
}
h1 {
font-size: 6rem;
}
/* Background Text Clip */
h1 {
font-size: 13vw;
font-weight: 700;
font-family: "vcr_osd_mono-webfont";
position: relative;
text-align: center;
margin: 0;
-webkit-text-fill-color: transparent;
background-image: url("https://media.giphy.com/media/5k00E7cigvvqnBYDdP/giphy.gif");
background-size: cover;
-webkit-background-clip: text;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-repeat: no-repeat;
}
/* Background Text Clip End */
h2 {
font-size: 4.2rem;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: var(--main-white);
text-align: center;
}
img {
display: block;
width: 100%;
}
/* nav START */
.nav {
display: flex;
justify-content: flex-end;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--main-black);
/* took away box-shadow command ((box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);) that adds line under nav) */
z-index: 10;
}
.menu a {
text-decoration: none;
color: white(245, 0, 0);
margin: 0px 10px;
line-height: 50px;
display: block;
/* removed border-bottom: 1px solid red;*/
margin: 0;
clear: auto;
}
label {
margin: 0px 65px 0px 620px;
font-size: 65px;
line-height: 70px;
display: none;
width: 26px;
float: auto;
}
#toggle {
display: none;
}
#toggle:checked + .menu {
display: block;
}
@media only screen and (max-width: 1000px) { label { display: block; cursor: pointer;}}
.nav-list {
display: flex;
margin-right: 2rem;
}
@media (max-width: 28.75em) {
.nav {
justify-content: center;
}
.nav-list {
margin: 0 1rem;
}
}
.nav-list a {
display: block;
font-size: 2.2rem;
padding: 2rem;
}
.nav-list a:hover {
background:rgb(0, 0, 0);
}
/* NAV END */
/* Welcome section */
.welcome-section {
display: flex; /* OG one is Flex */
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 38vh; /* this will change the border in between Cinematography and Files [last was 50vh for normal]*/
background-color: #000;
background-image: linear-gradient(62deg, #000000 0%, #000000 100%);
}
.welcome-section > p {
font-size: 3rem;
font-weight: 200;
font-style: italic;
color: red;
}
/* Projects section */
.projects-section {
text-align: center;
padding: 10rem 2rem; /* 10rem 2rem is the OG */
background: url(textures.jpg);
}
.projects-section-header {
max-width: 333px; /* changes the white line under files width */
margin: 0 auto 6rem auto;
border-bottom: 0.2rem solid black; /* 0.2 rem is OG */
}
@media (max-width: 28.75em) {
.projects-section-header {
font-size: 4rem;
}
}
/* "Automagic" image grid using no media queries */
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 8rem;
width: 100%;
max-width: 1200px; /* 1280px is OG*/
margin: 0 auto;
margin-bottom: 6rem;
}
@media (max-width: 30.625em) {
.projects-section {
padding: 6rem 1rem;
}
.projects-grid {
grid-template-columns: 1fr;
}
}
.project {
background: black;
box-shadow: 1px 1px 2px red;
border-radius: 33px; /* 13px is the OG */ /* red lines project */
}
.code {
color: var(--main-white);
transition: color 0.3s ease-out;
}
.project:hover .code {
color: #00ff22;
}
.project-image {
height: calc(100% - 6.8rem);
width: 100%; /* 100% is OG - changes image size */
object-fit: cover;
}
.project-title {
/*deleting font-size: 2rem; */
padding: 2rem 0.5rem;
}
.btn {
display: inline-block;
padding: 1rem 2rem;
border-radius: 2px;
}
.btn-show-all {
font-size: 2rem;
background: black;
transition: background 0.3s ease-out;
}
.btn-show-all:hover {
background: black;;
}
.btn-show-all:hover > i {
transform: translateX(2px);
}
.btn-show-all > i {
margin-left: 10px;
transform: translateX(0);
transition: transform 0.3s ease-out;
}
/* Footer */
footer {
font-weight: 300;
display: flex;
justify-content: space-evenly;
padding: 2rem;
background: black;
border-top: 3px solid red;
}
footer > p {
margin: 0.5rem; /* changes size of the footer text and width */
}
footer i {
vertical-align: middle;
}
@media (max-width: 28.75em) {
footer {
flex-direction: column;
text-align: center;
}
}
/* Video Background Here */
.video-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 38%;
overflow: hidden; /* if you change this, the bottom of the website will start to expand - visible */
}
.video-container video {
min-width: 100%;
min-height: 100%;
position: cover;
top: 50%;
left: 50%;
transform: translate(-1%, -25%); /* FOUND IT! This changes files gap OG = -5%, -50%*/
object-fit: static;
}
.video-container:after {
content: '';
z-index: 1;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
position: static;
}
/* Video Background End */
.thin-red-border {
border-color: red;
border-width: 0px 0px 3px 0px;
border-style: inset;
}
font-face {
font-display: swap;
}
@font-face
{font-family:
'vcr_osd_mono-webfont';
src: url('vcr_osd_mono-webfont.eot');
src: url('vcr_osd_mono-webfont.eot?#iefix')
format('embedded-opentype'), url('vcr_osd_mono-webfont.woff2') format('woff2'), url('vcr_osd_mono-webfont.woff') format('woff'), url('vcr_osd_mono-webfont.ttf') format('truetype'), url('webfont.svg#svgFontname') format('svg') ;}
a
{text-align: auto;}
</style>
</script>
</body>该页面不是最好的，但我只是一个自学成才的人，为了乐趣和激情而这样做。因此，任何帮助或指导都会有帮助。
我不一定需要有人告诉我“答案”，尽管那很好，我喜欢学习，有一个大致的方向会很棒，或者甚至知道这是可能的，也许不会浪费我的时间，只是将所有内容合并为一个页面似乎是相反的。
感谢您的时间和任何考虑。我感谢 Stack OverFlow 社区！
我感谢任何人，无论他们是否做出了贡献。感谢您的阅读。
我已经尝试过研究并将继续这样做。
您可以使用带有两个 IFRAME 的单个主网页。
将第一个源页面加载到第一个 IFRAME 中。
将第二个源页面加载到第二个 IFRAME 中。