I am a student and this is my first time using GitHub Pages. I am looking for help in linking my secondary webpages and images that are in folders in my repository.
I pushed HTML and CSS pages to GitHub and made a GitHub Pages. None of my images are showing up and links are not working as the addresses are no longer in my computer, but on GitHub. I cannot figure out how to get the proper address for images.
I started making a website for a school project, but before we go any further we now have to host the webpage onto GitHub Pages. When I run the html pages through VSCode, every page works flawlessly with the images and links. Now that I am using GitHub Pages, none of my images or links are working/ showing up. I understand I have to change the url of each one individually in my code to the new address through GitHub Pages, but everything I have researched from other questions is not working for me.
My "index.html" and its css "landingpage.css" are located on the main branch. The images are under a folder on the main branch called "img". // The background picture I am having the first issue with is labeled "frame- 2@1x.png" under the "img" folder. The secondary pages are under a folder on the main branch called "link-pages".
I have not started trying to link the secondary pages as my first goal is to get the "home page" to have it's desired look again, but the images will not show up after trying multiple different addresses.
I have tried copying the path after clicking on the image under the "img" folder: /img/frame-2@1x.png or img/frame-2@1x.png As well as copying the permalink address which is: "https://github.com/vjsarlo/bioSite/blob/c0ef6aef3fb0f37ff63152338909086ba94bb486/img/frame-2@1x.png".
I have read that I may need to use a "raw absolutely link" answered here in the first comment (not given answer upvoted): Images in github pages and relative links But I cannot find how to get the "raw absolutely link".
Here is my code for the html and the corresponding css. CSS is line 93-103/ HTML is line 1-17:
HTML Section Where The Background "frame" is located:
@import url("https://fonts.googleapis.com/css?family=Abel:400|Adamina:400|Abhaya+Libre:400|Advent+Pro:500");
/* !! Figure Out Slider If Wanted !! Image Imported For Reference Of Placing and Look !! */
/* Style Guide Variables */
:root {
--black: rgba(0, 0, 0, 1);
--bg: rgba(11, 29, 38, 1);
--accent: rgba(251, 215, 132, 1);
--white: rgba(255, 255, 255, 1);
--font-size-m2: 18px;
--font-size-l2: 24px;
--font-size-xl2: 36px;
--font-size-xxl: 48px;
--font-size-xxxl: 64px;
--font-size-xxxxl: 96px;
--font-size-xxxxxl: 240px;
--font-family-abel: "Abel";
--font-family-abhaya_libre: "Abhaya Libre";
--font-family-adamina: "Adamina";
--font-family-advent_pro: "Advent Pro";
}
/* Preset Classes */
.abel-normal-white-240px {
color: var(--white);
font-family: var(--font-family-abel);
font-size: var(--font-size-xxxxxl);
font-weight: 400;
font-style: normal;
}
.abhayalibre-normal-white-64px {
color: var(--white);
font-family: var(--font-family-abhaya_libre);
font-size: var(--font-size-xxxl);
font-weight: 400;
font-style: normal;
}
.adamina-normal-grandis-48px {
color: var(--accent);
font-family: var(--font-family-adamina);
font-size: var(--font-size-xxl);
font-weight: 400;
font-style: normal;
}
.adamina-normal-grandis-18px {
color: var(--accent);
font-family: var(--font-family-adamina);
font-size: var(--font-size-m2);
font-weight: 400;
font-style: normal;
}
.abel-normal-white-18px {
color: var(--white);
font-family: var(--font-family-abel);
font-size: var(--font-size-m2);
font-weight: 400;
font-style: normal;
}
.abel-normal-grandis-18px {
color: var(--accent);
font-family: var(--font-family-abel);
font-size: var(--font-size-m2);
font-weight: 400;
font-style: normal;
}
.adventpro-medium-white-18px {
color: var(--white);
font-family: var(--font-family-advent_pro);
font-size: var(--font-size-m2);
font-weight: 500;
font-style: normal;
}
/* HEADER */
* {
box-sizing: border-box;
}
.hidden,
.hidden * {
pointer-events: none;
visibility: hidden;
}
.overlap-group-1 {
height: 4232px;
position: relative;
width: 1940px;
}
.frame {
background-image: url(https://github.com/vjsarlo/bioSite/blob/c0ef6aef3fb0f37ff63152338909086ba94bb486/img/frame-2@1x.png);
background-position: 50% 50%;
background-size: cover;
height: 1529px;
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
width: 1920px;
}
.slider {
height: 440px;
left: 1663px;
position: absolute;
top: 226px;
width: 277px;
}
.content-top {
align-items: flex-start;
display: flex;
flex-direction: column;
height: 197px;
left: 500px;
position: absolute;
top: 287px;
width: 950px;
}
.group-1 {
align-items: center;
display: flex;
height: 65px;
min-width: 333px;
padding: 0 0px;
}
.rectangle {
background-color: var(--accent);
height: 4px;
margin-top: 3px;
width: 120px;
}
.meet {
color: var(--accent);
font-family: var(--font-family-adamina);
font-size: var(--font-size-xxl);
font-weight: 400;
letter-spacing: 6px;
margin-left: 41px;
min-height: 65px;
min-width: 170px;
}
.kaley-mc-carthy {
color: var(--white);
font-family: var(--font-family-abhaya_libre);
font-size: var(--font-size-xxxxl);
font-weight: 400;
letter-spacing: 0;
line-height: 100px;
margin-top: 32px;
min-height: 100px;
text-align: center;
white-space: nowrap;
width: 950px;
}
.header {
align-items: flex-start;
display: flex;
height: 52px;
left: 80px;
position: absolute;
top: 64px;
width: 1760px;
}
.logo {
color: var(--white);
font-family: var(--font-family-abhaya_libre);
font-size: var(--font-size-xl2);
font-weight: 400;
letter-spacing: 0.36px;
min-height: 42px;
width: 253px;
text-underline-position: auto;
height: 37px;
width: 346px;
}
.about-me {
cursor: pointer;
transition: all 0.2s ease;
height: 23px;
letter-spacing: 0;
margin-left: 393px;
margin-top: 2px;
min-width: 64px;
}
.hobbies {
cursor: pointer;
transition: all 0.2s ease;
letter-spacing: 0;
margin-left: 66px;
margin-top: 2px;
min-height: 23px;
min-width: 55px;
}
.connect {
cursor: pointer;
transition: all 0.2s ease;
letter-spacing: 0;
margin-left: 60px;
margin-top: 2px;
min-height: 23px;
}
.connect:hover,
.hobbies:hover,
.about-me:hover {
color: #fbd784;
}
/* CONTENT */
.content {
align-items: flex-start;
display: flex;
flex-direction: column;
height: 2772px;
left: 271px;
position: absolute;
top: 1460px;
width: 1465px;
}
.content-1 {
align-items: center;
display: flex;
margin-left: 1px;
min-width: 1463px;
}
.overlap-group-2 {
height: 579px;
margin-bottom: 72.58px;
position: relative;
width: 789px;
}
.equipment-01 {
left: 0;
letter-spacing: 0;
line-height: 240px;
opacity: 0.1;
position: absolute;
top: 0;
white-space: nowrap;
width: 248px;
}
.content-2 {
align-items: flex-start;
display: flex;
flex-direction: column;
height: 377px;
left: 157px;
position: absolute;
top: 202px;
width: 632px;
}
.tagline-01 {
align-items: center;
display: flex;
height: 25px;
min-width: 255px;
}
.line {
background-color: var(--accent);
height: 2px;
margin-bottom: 3px;
width: 72px;
}
.who-am-i {
letter-spacing: 6px;
margin-left: 24px;
min-height: 25px;
min-width: 157px;
}
.the-princess {
letter-spacing: 0;
margin-top: 27px;
min-height: 152px;
width: 555px;
}
.with-a-passion {
letter-spacing: 0;
line-height: 32px;
margin-top: 27px;
min-height: 96px;
width: 632px;
}
.more:hover {
transform: scale(1.1);
}
.more {
align-items: center;
cursor: pointer;
display: flex;
height: 23px;
margin-top: 27px;
min-width: 199px;
transition: all 1s ease-in-out;
}
.learn-about-me {
letter-spacing: 0;
min-height: 23px;
min-width: 105px;
}
.iconnavigationarrow_downward_24px {
height: 17px;
margin-bottom: 0;
margin-left: 9px;
width: 24px;
}
.image-1 {
height: 728px;
margin-left: 101px;
object-fit: cover;
width: 573px;
}
.content-3 {
align-items: center;
display: flex;
margin-left: 1px;
margin-top: 200px;
min-width: 1463px;
}
.image-2 {
height: 732px;
object-fit: cover;
width: 567px;
}
.overlap-group-3 {
height: 579px;
margin-bottom: 75.37px;
margin-left: 114px;
position: relative;
width: 775px;
}
.equipment-02 {
left: 0;
letter-spacing: 0;
line-height: 240px;
opacity: 0.1;
position: absolute;
top: 0;
white-space: nowrap;
width: 243px;
}
.content-4 {
align-items: flex-start;
display: flex;
flex-direction: column;
height: 377px;
left: 143px;
position: absolute;
top: 202px;
width: 632px;
}
.tagline-02 {
align-items: center;
display: flex;
height: 25px;
min-width: 276px;
}
.my-hobbies {
letter-spacing: 6px;
margin-left: 24px;
min-height: 25px;
min-width: 178px;
}
.gross-food {
letter-spacing: 0;
margin-top: 27px;
min-height: 152px;
width: 555px;
}
.cows-brain {
letter-spacing: 0;
line-height: 32px;
margin-top: 27px;
min-height: 96px;
width: 632px;
}
.more-1:hover {
transform: scale(1.1);
}
.more-1 {
align-items: center;
cursor: pointer;
display: flex;
height: 23px;
margin-top: 27px;
min-width: 199px;
transition: all 1s ease-in-out;
}
.discover-more {
letter-spacing: 0;
min-height: 23px;
min-width: 96px;
}
.iconnavigationarrow_downward_24px-2 {
height: 16px;
margin-left: 15px;
margin-top: 1px;
width: 24px;
}
.content-5 {
align-items: flex-start;
display: flex;
margin-top: 200px;
min-width: 1465px;
}
.equipment-2 {
letter-spacing: 0;
line-height: 240px;
margin-top: 48.13px;
min-height: 304px;
opacity: 0.1;
width: 249px;
}
.image-3 {
height: 912px;
margin-left: 643px;
object-fit: cover;
width: 574px;
}
.content-7 {
align-items: flex-start;
display: flex;
flex-direction: column;
height: 529px;
left: 419px;
position: absolute;
top: 3570px;
width: 632px;
}
.tagline-03 {
align-items: center;
display: flex;
height: 25px;
min-width: 413px;
}
.follow-my-journey {
letter-spacing: 6px;
margin-left: 24px;
min-height: 25px;
min-width: 315px;
}
.where-will-i-be {
letter-spacing: 0;
margin-top: 27px;
min-height: 304px;
width: 555px;
}
.my-journey-has-been {
letter-spacing: 0;
line-height: 32px;
margin-top: 27px;
min-height: 96px;
width: 632px;
}
.more-2:hover {
transform: scale(1.1);
}
.more-2 {
align-items: center;
cursor: pointer;
display: flex;
height: 23px;
margin-top: 27px;
min-width: 199px;
transition: all 1s ease-in-out;
}
.discover-more-1 {
letter-spacing: 0;
min-height: 23px;
min-width: 150px;
}
.iconnavigationarrow_downward_24px-3 {
height: 16px;
margin-left: 23px;
margin-top: 1px;
width: 24px;
}
/* FOOTER */
.footer {
align-items: flex-start;
align-self: center;
display: flex;
height: 190px;
margin-left: 9px;
margin-top: 57px;
min-width: 1529px;
}
.kaley-mccarthy {
align-items: flex-start;
background-color: var(--bg);
display: flex;
flex-direction: column;
height: 4672px;
overflow: hidden;
width: 1920px;
}
.flex-col {
align-items: flex-start;
display: flex;
flex-direction: column;
min-height: 190px;
width: 319px;
}
.kaley {
color: var(--white);
font-family: var(--font-family-abhaya_libre);
font-size: var(--font-size-xl2);
font-weight: 400;
letter-spacing: 0.36px;
min-height: 42px;
width: 253px;
}
.its-a-dangerous {
letter-spacing: 0;
line-height: 32px;
margin-top: 20px;
min-height: 128px;
width: 319px;
}
.links {
align-items: center;
align-self: center;
display: flex;
flex-direction: column;
margin-bottom: 3px;
margin-left: 984px;
min-height: 181px;
width: 232px;
}
.connect-1 {
cursor: pointer;
transition: all 0.2s ease;
letter-spacing: 0;
line-height: 32px;
margin-bottom: 0;
margin-right: 40.65px;
margin-top: 16px;
min-height: 32px;
white-space: nowrap;
width: 57px;
}
.about-her {
cursor: pointer;
transition: all 0.2s ease;
letter-spacing: 0;
line-height: 32px;
margin-bottom: 0;
margin-right: 23.8px;
margin-top: 21px;
min-height: 32px;
white-space: nowrap;
width: 74px;
}
.explore-kaley-mc-carthy {
color: var(--accent);
font-family: var(--font-family-abel);
font-size: var(--font-size-l2);
font-weight: 400;
letter-spacing: 0;
line-height: 32px;
margin-bottom: 0;
margin-right: 8px;
min-height: 32px;
white-space: nowrap;
width: 224px;
}
.her-hobbies {
cursor: pointer;
transition: all 0.2s ease;
letter-spacing: 0;
line-height: 32px;
margin-bottom: 0;
margin-right: 6.95px;
margin-top: 16px;
min-height: 32px;
white-space: nowrap;
width: 91px;
}
.valign-text-middle {
display: flex;
flex-direction: column;
justify-content: center;
}
.about-her:hover,
.her-hobbies:hover,
.connect-1:hover {
color: #fbd784;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="landingpage.css" />
</head>
<body>
<div class="kaley-mccarthy screen">
<div class="overlap-group-1">
<div class="frame"></div>
<img class="slider" src="/Users/vince/csd/bioSite/img/slider@2x.svg" />
<div class="content-top">
<div class="group-1">
<div class="rectangle"></div>
<div class="meet">MEET</div>
</div>
<h1 class="kaley-mc-carthy">Kaley McCarthy</h1>
</div>
<h2>
<div class="header">
<div class="logo">Kaley McCarthy</div>
<a href="/Users/vince/csd/bioSite/link-pages/aboutpage.html" target="_blank">
<div class="about-me valign-text-middle abel-normal-white-18px">About Me</div>
</a>
<a href="/Users/vince/csd/bioSite/link-pages/hobbiespage.html" target="_blank">
<div class="hobbies abel-normal-white-18px">Hobbies</div>
</a>
<a href="/Users/vince/csd/bioSite/link-pages/connectpage.html" target="_blank">
<div class="connect abel-normal-white-18px">Connect</div>
</a>
</div>
</h2>
<div class="content">
<div class="content-1">
<div class="overlap-group-2">
<div class="equipment-01 abel-normal-white-240px">01</div>
<div class="content-2">
<h3 class="tagline-01">
<div class="line"></div>
<div class="who-am-i adamina-normal-grandis-18px">WHO AM I?</div>
</h3>
<div class="the-princess abhayalibre-normal-white-64px">
The Princess Who Will Eat Frog Legs
</div>
<div class="with-a-passion abel-normal-white-18px">
''With a passion for learning and discovering the world, I hope to
one day call the globe my home. While creating magic for visitors
from around the world has been my career, I now want to see the
magic that comes from their homes.''
</div>
<a href="/Users/vince/csd/bioSite/link-pages/aboutpage.html" target="_blank">
<div class="more">
<div class="learn-about-me abel-normal-grandis-18px">
Learn About Me
</div>
<img class="iconnavigationarrow_downward_24px" src="/Users/vince/csd/bioSite/img/icon-navigation-arrow-downward-24px-2@2x.svg"/>
</div>
</a>
</div>
</div>
<img class="image-1" src="/Users/vince/csd/bioSite/img/01.png" />
</div>
<div class="content-3">
<img class="image-2" src="/Users/vince/csd/bioSite/img/02.png" />
<div class="overlap-group-3">
<div class="equipment-02 abel-normal-white-240px">02</div>
<div class="content-4">
<h4 class="tagline-02">
<div class="line"></div>
<div class="my-hobbies adamina-normal-grandis-18px">MY HOBBIES</div>
</h4>
<div class="gross-food abhayalibre-normal-white-64px">
Gross Food, Open Doors, And Sore Feet
</div>
<div class="cows-brain abel-normal-white-18px">
''Cow's brain from New York has a mousse-texture. Pig's brain in
China is serve raw and you should "just know" how long to cook it
in a hot pot. Both places I've worn out a pair of shoes
traversing. Where will I go next?''
</div>
<a href="/Users/vince/csd/bioSite/link-pages/hobbiespage.html" target="_blank">
<div class="more-1">
<div class="discover-more abel-normal-grandis-18px">
Discover More
</div>
<img class="iconnavigationarrow_downward_24px-2" src="/Users/vince/csd/bioSite/img/icon-navigation-arrow-downward-24px-2@2x.svg"/>
</div>
</a>
</div>
</div>
</div>
<div class="content-5">
<div class="equipment-2 abel-normal-white-240px">03</div>
<img class="image-3" src="/Users/vince/csd/bioSite/img/03.png" />
</div>
</div>
<div class="content-7">
<h5 class="tagline-03">
<div class="line"></div>
<div class="follow-my-journey adamina-normal-grandis-18px">
FOLLOW MY JOURNEY
</div>
</h5>
<div class="where-will-i-be abhayalibre-normal-white-64px">
Where Will I be Tomorrow? What Food Can I Try? What Will I See?
</div>
<div class="my-journey-has-been abel-normal-white-18px">
''My journey has been filled with nothing short of wonder and amazement. I
want to share everything I'll discover with who ever is interested in
what the world really has to offer. My game show is the world, so what's
behind curtain number 1?''
</div>
<a href="/Users/vince/csd/bioSite/link-pages/connectpage.html" target="_blank">
<div class="more-2">
<div class="discover-more-1 abel-normal-grandis-18px">
Open Curtain Number 1
</div>
<img class="iconnavigationarrow_downward_24px-3" src="/Users/vince/csd/bioSite/img/icon-navigation-arrow-downward-24px-2@2x.svg"/>
</div>
</a>
</div>
</div>
<div class="footer">
<div class="flex-col">
<div class="kaley">Kaley McCarthy</div>
<div class="its-a-dangerous abel-normal-white-18px">
''It's a dangerous business, Frodo, going out of your door. You step into
the Road, and if you don't keep your feet, there is no knowing where you
might be swept off too.''
</div>
</div>
<div class="links">
<div class="explore-kaley-mc-carthy">Explore Kaley McCarthy</div>
<a href="/Users/vince/csd/bioSite/link-pages/aboutpage.html" target="_blank">
<div class="about-her adventpro-medium-white-18px">About Her</div>
</a>
<a href="/Users/vince/csd/bioSite/link-pages/hobbiespage.html" target="_blank">
<div class="her-hobbies adventpro-medium-white-18px">Her Hobbies</div>
</a>
<a href="/Users/vince/csd/bioSite/link-pages/connectpage.html" target="_blank">
<div class="connect-1 adventpro-medium-white-18px">Connect</div>
</a>
</div>
</div>
</div>
</body>
</html>The background image is not showing up at the top of the page as it did when running through VSCode. None of the images are showing up, however I am just looking for help so I can figure the rest out from this answer.
GitHub Repository: https://github.com/vjsarlo/bioSite
What can I try to resolve this?
