Codepen showing my project incorrectly

Codepen showing my project incorrectly
0

#1

I have made first 2 projects in codepen.

  1. The tribute page : https://codepen.io/achlendra/pen/oGgPRq
  2. The portfolio page : https://codepen.io/achlendra/pen/qPbdam

Both of them opens correctly in my browser(chrome) while opening the HTML file.But codepen is not showing images ( I’ve tried imgur and dropbox). And some colors and styling/ margins are also not there. But pasting the same HTML and CSS codes in respective files and opening on my PC shows different ( as I wanted them) result. Please help I’m new to web developing world.


#2

For the Dropbox images, try replacing the https://www.dropbox.com part of the image url to //dl.dropboxusercontent.com/

Example, instead of:

https://www.dropbox.com/s/2ly2nnyq7yij5zu/kodakold.jpg

link to:

//dl.dropboxusercontent.com/s/2ly2nnyq7yij5zu/kodakold.jpg

As for the imgur images, you are not allowed to hotlink as stated in their TOS (shown below). They block your image, so nothing shows.

Also, don’t use Imgur to host image libraries you link to from elsewhere, content for your website, advertising, avatars, or anything else that turns us into your content delivery network.


#3

And what about my colors and margins showing incorrectly. They seem to be working correctly in my chrome.


#4

You have references to local files. The following is found in your Tribute Codepen:

<link rel="stylesheet" href="Tribute.css">

Did you confirm all the CSS from this file is in CSS section of Codepen?

Can you show a screenshot of what you see on the non-Codepen version?


#5

See the navbar here is of different color.
The margin of (welcome to mwc…) block is shifted and in center.


#6

Remove the following reference in the head of your html section:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

You already had a bootstrap reference under the CSS settings in CodePen.


#7

Thanks a lot Sir…