Exileking

@HoaLT I added in the above code and the code below it but I still dont see any hover states?

@Lesum By any chance is there a way to do this without code injection? I dont have the business plan that uses code injection?

Ahhh got ya! I was confused for a second. I just went through and added alt text for all of those images.

@HoaLT Sorry mate that did not work?

@Lesum Im not sure what script you are referring to? I added the alt text to the first icon but I didnt see anything happen. Any suggestion?

Is it possible to mimic this text and look? Id like the image to fade and the white text be centered with the name of the project?

Whoops my apologies! Here we go! And i added it above. https://www.jefferyl.com/work

Hello!! I am looking to add a hover state on top of these images where white text will overlay and darken the image below? Any help? https://www.jefferyl.com/work

Hi @tuanphan Indeed I do! I have otfs of both fonts used on the website. DO i need to change?

Below are the screenshots of what it looks like on MacBook which is the pixel font Chicago and on windows the font is not showing.

Hi all, I am having trouble with displaying a custom font on Windows OS. I had someone review my portfolio yesterday and the custom fonts converted to normal fonts. Any reason why this is happening? https://www.jefferyl.com/ The custom code it below: .header--menu-open a {font-family: pixChicago} .header-menu-nav-item a { font-size: 23px; } /* remove dark background from all sections of site */ body, .header, .page-section .section-border, :not(.has-background) .section-background { background-color: transparent !important; } /* add repeating seamless background image sitewide - replace url with locally hosted version of image file */ body { background-image: url(https://content.invisioncic.com/p289038/monthly_2023_11/Image.thumb.png.feabc75f3081e1db301ea993557e1567.png); background-repeat: repeat; } @font-face { font-family: 'pixChicago'; src: url('https://static1.squarespace.com/static/653977e6631d6e2bb1418d04/t/65428be1564e95715793c4f8/1698860001828/pixChicago.ttf'); } @font-face { font-family: 'NeueBit-Regular'; src: url('https://static1.squarespace.com/static/653977e6631d6e2bb1418d04/t/65427b3493577f32c73cdefb/1698855733001/NeueBit-Regular.ttf'); } h1, h2, h3, h4, .header-nav-item a { font-family: 'pixChicago' !important; } h1 { font-family: 'pixChicago' !important; } h2 { font-family: 'pixChicago' !important; } h3 { font-family: 'pixChicago' !important; } h4 { font-family: 'pixChicago' !important; } .sqsrte-large { font-family: 'NeueBit-Regular' !important; } p { font-family: 'NeueBit-Regular' !important; } .sqsrte-small { font-family: 'NeueBit-Regular' !important; } a.btn { font-family: 'pixChicago' !important; } /* Custom cursor for body */ body{ margin: 1 !important; height:10vh !important; cursor: url(https://static1.squarespace.com/static/653977e6631d6e2bb1418d04/t/654ce8f422fc887ad4bc2f23/1699539188367/Cursor.png), auto !important; } body * { cursor: url(https://content.invisioncic.com/p289038/monthly_2023_11/Pixel.png.9b9f30f6eb0b1e89d19a49aad6337bdd.png), auto; }

@tuanphan I ended up getting it working mate!

Howdy folks! Everyones been super helpful as of late and I have another awesome idea to add to my site. I was wondering if there's a way to add the custom cursor to my website. Mind you i dont have code injection. Below you will find the pixelated mouse cursor and the image id be using. Thoughts? Help?

@SaranyaDesigns This worked perfect thank you!!!!MUCHO

@melody495 THAT DID It! Thank you so so much!

@melody495 Is this what you mean? So how i organized the fonts before i published was that head header was pixChicgago and the body copy was NeueBit-Regular. Everything was working before i published. Seems like nothing is working font wise at all? @font-face { font-family: pixChicago'; src: url('https://static1.squarespace.com/static/653977e6631d6e2bb1418d04/t/65428be1564e95715793c4f8/1698860001828/pixChicago.ttf'); } @font-face { font-family: NeueBit-Regular'; src: url('https://static1.squarespace.com/static/653977e6631d6e2bb1418d04/t/65427b3493577f32c73cdefb/1698855733001/NeueBit-Regular.ttf'); } h1, h2, h3, h4, .header-nav-item a { font-family: 'pixChicago' !important; } h1 { font-family: 'pixChicago' !important; } h2 { font-family: 'pixChicago' !important; } h3 { font-family: 'pixChicago' !important; } h4 { font-family: 'pixChicago' !important; } .sqsrte-large { font-family: 'NeueBit-Regular' !important; } p { font-family: 'NeueBit-Regular' !important; } .sqsrte-small { font-family: 'NeueBit-Regular' !important; } a.btn { font-family: 'pixChicago' !important; }

Howdy folks! Everyones been SUPER helpful as of late helping me get my website up and running but I ran into an issue when I published it. Seems none of the fonts are working now. Im super sad now! Would anyone know why this isnt working? Below is the code. @font-face { font-family: 'PPNeueBit-Bold'; src: url('https://static1.squarespace.com/static/653977e6631d6e2bb1418d04/t/65428be1564e95715793c4f8/1698860001828/pixChicago.ttf'); } h1, h2, h3, h4, .header-nav-item a { font-family: 'pixChicago' !important; } h1 { font-family: 'pixChicago' !important; } h2 { font-family: 'pixChicago' !important; } h3 { font-family: 'pixChicago' !important; } h4 { font-family: 'pixChicago' !important; } .sqsrte-large { font-family: 'NeueBit-Regular' !important; } p { font-family: 'NeueBit-Regular' !important; } .sqsrte-small { font-family: 'NeueBit-Regular' !important; } a.btn { font-family: 'pixChicago' !important; } #loadingscreen{ background: #000; opacity: 1; position: fixed; z-index:10; top: 0px; width: 100%; height: 1600px; } #loadingscreen > #loading { color:#FFF; width:120px; height:24px; margin: 300px auto; } .lds-spinner { color: official; display: inline-block; position: relative; width: 64px; height: 64px; } .lds-spinner div { transform-origin: 32px 32px; animation: lds-spinner 1.2s linear infinite; } .lds-spinner div:after { content: " "; display: block; position: absolute; top: 3px; left: 29px; width: 5px; height: 14px; border-radius: 20%; background: #fff; } .lds-spinner div:nth-child(1) { transform: rotate(0deg); animation-delay: -1.1s; } .lds-spinner div:nth-child(2) { transform: rotate(30deg); animation-delay: -1s; } .lds-spinner div:nth-child(3) { transform: rotate(60deg); animation-delay: -0.9s; } .lds-spinner div:nth-child(4) { transform: rotate(90deg); animation-delay: -0.8s; } .lds-spinner div:nth-child(5) { transform: rotate(120deg); animation-delay: -0.7s; } .lds-spinner div:nth-child(6) { transform: rotate(150deg); animation-delay: -0.6s; } .lds-spinner div:nth-child(7) { transform: rotate(180deg); animation-delay: -0.5s; } .lds-spinner div:nth-child(8) { transform: rotate(210deg); animation-delay: -0.4s; } .lds-spinner div:nth-child(9) { transform: rotate(240deg); animation-delay: -0.3s; } .lds-spinner div:nth-child(10) { transform: rotate(270deg); animation-delay: -0.2s; } .lds-spinner div:nth-child(11) { transform: rotate(300deg); animation-delay: -0.1s; } .lds-spinner div:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; } @keyframes lds-spinner { 0% { opacity: 1; } 100% { opacity: 0; } }

@SaranyaDesigns The image in the background is a seamless pixel/ checkered background i created. Here are two versions but the background version is black. https://www.jefferyl.com/

Howdy! @tuanphan When i published the entire site broke! Any help? Below is the code? @font-face { font-family: 'PPNeueBit-Bold'; src: url('https://static1.squarespace.com/static/653977e6631d6e2bb1418d04/t/65428be1564e95715793c4f8/1698860001828/pixChicago.ttf'); } h1, h2, h3, h4, .header-nav-item a { font-family: 'pixChicago' !important; } h1 { font-family: 'pixChicago' !important; } h2 { font-family: 'pixChicago' !important; } h3 { font-family: 'pixChicago' !important; } h4 { font-family: 'pixChicago' !important; } .sqsrte-large { font-family: 'NeueBit-Regular' !important; } p { font-family: 'NeueBit-Regular' !important; } .sqsrte-small { font-family: 'NeueBit-Regular' !important; } a.btn { font-family: 'pixChicago' !important; } #loadingscreen{ background: #000; opacity: 1; position: fixed; z-index:10; top: 0px; width: 100%; height: 1600px; } #loadingscreen > #loading { color:#FFF; width:120px; height:24px; margin: 300px auto; } .lds-spinner { color: official; display: inline-block; position: relative; width: 64px; height: 64px; } .lds-spinner div { transform-origin: 32px 32px; animation: lds-spinner 1.2s linear infinite; } .lds-spinner div:after { content: " "; display: block; position: absolute; top: 3px; left: 29px; width: 5px; height: 14px; border-radius: 20%; background: #fff; } .lds-spinner div:nth-child(1) { transform: rotate(0deg); animation-delay: -1.1s; } .lds-spinner div:nth-child(2) { transform: rotate(30deg); animation-delay: -1s; } .lds-spinner div:nth-child(3) { transform: rotate(60deg); animation-delay: -0.9s; } .lds-spinner div:nth-child(4) { transform: rotate(90deg); animation-delay: -0.8s; } .lds-spinner div:nth-child(5) { transform: rotate(120deg); animation-delay: -0.7s; } .lds-spinner div:nth-child(6) { transform: rotate(150deg); animation-delay: -0.6s; } .lds-spinner div:nth-child(7) { transform: rotate(180deg); animation-delay: -0.5s; } .lds-spinner div:nth-child(8) { transform: rotate(210deg); animation-delay: -0.4s; } .lds-spinner div:nth-child(9) { transform: rotate(240deg); animation-delay: -0.3s; } .lds-spinner div:nth-child(10) { transform: rotate(270deg); animation-delay: -0.2s; } .lds-spinner div:nth-child(11) { transform: rotate(300deg); animation-delay: -0.1s; } .lds-spinner div:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; } @keyframes lds-spinner { 0% { opacity: 1; } 100% { opacity: 0; } }

Howdy folks! Thanks for all the help so far with my website! I have another interesting question. Is it possible to create a seamless backround for the website using a custom PNG or image. I created a pixelated background for the website but im not sure how to put it in the background as a seamless pattern. I have attached a before and after of what id like it to look like.

Thanks mate! Much love and thanks @tuanphan

Howdy folks! Everyones been so helpful with helping! I was wondering if anyone might know how i can change the button font to match the rest of the fonts. Im musing chicago pix for the the header and nav menus. Below is the code. @font-face { font-family: 'PPNeueBit-Bold'; src: url('https://static1.squarespace.com/static/653977e6631d6e2bb1418d04/t/65428be1564e95715793c4f8/1698860001828/pixChicago.ttf'); } h1, h2, h3, h4, .header-nav-item a { font-family: 'pixChicago' !important; } h1 { font-family: 'pixChicago' !important; } h2 { font-family: 'pixChicago' !important; } h3 { font-family: 'pixChicago' !important; } h4 { font-family: 'pixChicago' !important; } .sqsrte-large { font-family: 'NeueBit-Regular' !important; } p { font-family: 'NeueBit-Regular' !important; } .sqsrte-small { font-family: 'NeueBit-Regular' !important; }

@SaranyaDesigns heres what im trying to do!

Of course please let me know if this link works! https://hexaflexagon-dogfish-9g6n.squarespace.com/config/

Howdy everyone! Im trying to have two different weights of the pixel font so that I can have it look different on my site BUT i cant seem to get the secondary weight to work. uve uploaded it into the custom files section but idk what im doing. Any suggestions? What do i need to do to make the lighter weight work for the paragraphs and the heavier for the headers? Heres the code: @font-face { font-family: 'PPNeueBit-Bold'; src: url('https://static1.squarespace.com/static/653977e6631d6e2bb1418d04/t/65427a15f69795345707f54f/1698855445688/PPNeueBit-Bold.otf'); } h1, h2, h3, .header-nav-item a { font-family: 'PPNeueBit-Bold' !important; } h1 { font-family: 'PPNeueBit-Bold' !important; } h2 { font-family: 'PPNeueBit-Bold' !important; } h3 { font-family: 'PPNeueBit-Bold' !important; } .sqsrte-large { font-family: 'NeueBit-Regular' !important; } p { font-family: 'NeueBit-Regular' !important; } .sqsrte-small { font-family: 'NeueBit-Regular' !important; }