Has been working on this project since couple of days. The main agenda of this project was to focus on transition and animation. Tried to make it mobile-responsive too. But was not able to hit the mark with perfection. A certain topic on which I faced difficulties are:-
The vertical motion in the small stars. I wanted it to stay in one position and change its size.
The navbar. I didn’t want the top margin. I tried a lot but couldn’t remove that margin gap.
How can I make it mobile responsive too? The stars get positioned unfavorably. And that turns the website ugly.
here is this link:-
to website
file:///C:/Users/Preeti%20Rajak/OneDrive/Desktop/My%20Project/html1.html
I tried, but i have added some pictures from my desktop files. And when i paste the codes on codepen, the images doesn’t appear, bcz it allows only the images which they have specifically.
You can link images in CodePen but you need to put them on a hosting site. I upload mine to Google Photos and then create a link for the photo. Once you have that link you can use https://www.labnol.org/embed/google/photos/ to create a link that allows you to embed it on your page. It may sound complicated but it’s not.
You can also use Github for you page if you don’t want to use CodePen.
The images don’t appear because codepen has no idea what those locations mean. If you include <img src="C:\\files\folder\imageFile/" />
You can imagine codepen like a person. When codepen reads this, it says: Oh, I will look for those files here, in my (house) system. But they are only in your house!
The solution is to put the images on the web. When codepen reads the src attribute it will say. Oh, I need to for look this image in someone else’s house (and then it says Damn! but that’s another story.)
So how do you fix the problem of including image files
You need this:
<img src="path/to/file"/>
But this “path to file” has to be a URL.
A very common site for this purpose is imgur is has a super nice, neat UI and after you upload your image publicly or privately you can link it to the src attribute in your <img/> html tag.
Something like this
<img src="urlToMyImgurImage" />
where urlToMyImgurImage will be replaced by a link provided by imgur.
Another option is uploading to Github, but that might be trickier.
As someone suggested there is also Google Photos, this is probably a good alternative too.
Thank you everybody for so many helps and suggestions. I was not into the tech field in any way prior 2 months. So I never thought that links too had to be copied cautiously. I learnt a lot guys and I have updated the project and uploaded the link in my latest topic. Thanks again tho.
What if I copy the image address from the google and directly paste it on the Codepen. Will it still work ?
I updated the project and implemented the way you 'll suggested but, I was confused by the reason behind using labnol. Like can’t I just paste the link generated by google photos . If not. why won’t this work?
Using the image address from photos on any website will normally work. So if you went to Google Images and copied the image link to your page it would work so long as you have internet. If you take your page to a restricted network or a network without internet then they of course wouldn’t load.
As for your personal uploaded photos on Google Photos, those links don’t work on your webpage (not that I could figure out). That is why I use that other page I mentioned to convert the link into a usable link for html.
Google Drive may act differently too but I haven’t played with it too much. You can always look at that also.
