Можно ли сохранить две отдельные HTML-страницы, как-то объединить их, чтобы создать эффект прокрутки вниз на другие стра ⇐ CSS

[Anonymous]

Я пытаюсь провести онлайн-исследование прямо сейчас и посмотреть, возможно ли объединить мой текущий проект и, по сути, заставить мою индексную страницу прокручиваться вниз до моей домашней страницы, а затем до моего контакта, если человек тоже захочет, или он может использовать "кнопка" на индексной странице, над которой я все еще работаю.

Код: Выделить всё

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-137617043-2');



(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');













[url=home.html]
[img]wh.png[/img]
[/url]













https://www.googletagmanager.com/ns.html?id=GTM-PTZXGBD





.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.  */
}

Код: Выделить всё

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-137617043-2');



(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');






[url=https://www.youtube.com/c/ghostrobles]Youtube[/url]

[url=https://www.twitch.tv/ghostrobless]Twitch[/url]

[url=contact.html]Contact[/url]



















Ghost Robles
 






https://www.googletagmanager.com/ns.html?id=GTM-PTZXGBD




Files



[url=https://www.youtube.com/watch?v=F7tcVwjj5x0]
[img]quadrino.jpg[/img]
  alt="Funny Marco, King Cid, JWondr, Luh Tyler Chilling"/>

<
Luh Tyler x SleazyWorld G0
/>

[/url]



[url=https://www.youtube.com/watch?v=8kmrgKSGgN4]
[img]tablemafia.png[/img]
  alt="Lucius Arthur Music Video shot in Los Angeles California by Katya Ganfeld on Kodak Film"/>

<
BAD TRIP by Lucius Arthur
/>

[/url]



[url=https://www.youtube.com/watch?v=9ZRWV3aW8pc]
[img]Ghost.jpg[/img]
   alt="I shot the Behind The Scenes for this Music Video and wanted to share the Official Music Video by DaBaby"/>

<
Shake Sumn' by DaBaby
/>

[/url]



[url=https://www.youtube.com/watch?v=I8DUHA0Lz60]
[img]let3mkn0w.jpg[/img]
   alt="DaBaby Productions with the Reel Goats and Offset from The Migos"/>

<
SELLING CRACK ft. OFFS3T
/>

[/url]


[url=https://youtu.be/g_5LIly8nVc]
[img]brothel.jpg[/img]
   alt="Brothel. Music Live in Los Angeles, CA at Los Globos filmed by Ghost Robles and Spicy Rico"/>

<
Brothel.✱Los Globos
/>

[/url]



[url=https://www.youtube.com/watch?v=ihkOYtflnLQ&t=29s]
[img]Laguna Girl.jpg[/img]
   alt="Going to Laguna Beach and capturing a visual with my friend Spicy Rico"/>

<
Models x Laguna Beach
/>

[/url]



[url=https://youtu.be/Dt1SwK-IjpM]
[img]NICKMERCS.jpg[/img]
   alt="NICKMERCS with a fan in San Diego California for his 500k Event for MFAM."/>

<
Nickmercs 300k+ MFAM Event!
/>

[/url]



[url=https://youtu.be/rTkBNso_UtY]

[img]OhGeesy.jpg[/img]
  alt="OhGeesy Live at The Observatory in San Diego, California.  Presented by Ghost Robles."
/>

<
OTXBOYZ OhGeesy
/>

[/url]



[url=https://youtu.be/ASrD3c95MlI]
[img]Desiigner.jpg[/img]
  alt="Blueface and Desiigner Visual filmed in Calabasas by Ghost Robles"
/>

<
Lifestyle 91301: Visual in Calabasas
/>

[/url]



[url=https://youtu.be/gGoQEMWxLFc]
[img]coicoi.jpg[/img]
  alt="Coi Leray Anxiety Behind-the-Scenes Visual by Ghost Robles"
/>

<
Coi Leray "Anxiety"
/>

[/url]



[url=https://www.youtube.com/watch?v=a-QsWT9ZQ7o]
[img]reelgoats.jpg[/img]
  alt="Rod Wave Cold December Behind-the-Scenes Visual by Ghost Robles"
/>

<
"Cold December" Visual in Malibu
/>

[/url]



[url=https://www.youtube.com/watch?v=JqsShaF12OA]
[img]3Three.jpg[/img]
  alt="NBA OG 3Three - Cardio Visual Behind-the-Scenes by Ghost Robles"
/>

<
NBA OG 3Three
/>

[/url]



[url=https://youtu.be/hYuWfoO6RHE]
[img]dipwithmychips.jpg[/img]
  alt="Lil Tracy and Big Head Live at The House of Blues in San Diego, California presented by Ghost Robles"
/>

<
Lil Tracy & Big Head
/>

[/url]



[url=https://youtu.be/NzLmU4qtFoE]
[img]denisvibe.jpg[/img]
    alt="Atmosphere - Woes Visual Behind-the-Scenes by Ghost Robles"
/>

<
It Takes Time
/>

[/url]



[url=https://youtu.be/CW999c2srPw]
[img]blueface.jpg[/img]
    alt="Blueface and Hardini Music Video Visual Behind-the-Scenes by Ghost Robles"
/>

<
Blueface and Hardini
/>

[/url]




[url=https://www.youtube.com/watch?v=pS1jRP3EnRo]
[img]SeVa.jpg[/img]
        alt="Delian Se Va Music Video Visual by Ghost Robles"
/>

<
Delian - Se Va
/>

[/url]



[url=https://www.youtube.com/watch?v=VCvm1xSX4zQ]
[img]BLMbalboa.jpg[/img]
        alt="BLM Peaceful Protest at Balboa Park in San Diego, California."
/>

<
BLM Peaceful Protest
/>

[/url]



[url=https://www.youtube.com/watch?v=J7kirbxR_Is]
[img]daybyday.jpg[/img]
        alt="project"
/>

<
Day by Day (ft.  Phaze Jones)
/>

[/url]




[url=https://www.youtube.com/channel/UCSM3fpzXloGLNL7N6qnjamA] Show All [/url]









Love Yourself

© Coded by
[url=https://www.youtube.com/channel/UCSM3fpzXloGLNL7N6qnjamA]GhostRobles[/url]









/* 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;}

Страница не самая лучшая, но я всего лишь самоучка человек, который делает это ради удовольствия и страсти. Итак, любая помощь или руководство помогут.
Мне не обязательно нужен кто-то, кто скажет мне «ответ», хотя это было бы неплохо, мне нравится учиться, и общее направление будет таким: здорово или даже знать, что это возможно и, возможно, не тратить зря время, а просто объединить все на одну страницу, а это, кажется, наоборот.
Спасибо за ваше время и внимание. Я ценю сообщество Stack OverFlow!
Я ценю всех, независимо от того, внесли ли они свой вклад или нет. Спасибо, что прочитали.
Я пытался исследовать и буду продолжать это делать.

Подробнее здесь: https://stackoverflow.com/questions/768 ... o-create-a