how to create macOS folder view? - html

i saw a website which has the same thing with my wish: https://www.ignasimonreal.com/film
im actually creating a home page like its a macOS screen. individual folders are ok, like "works" folder. but when I click it, it should show me the inside of that folder like the link I shared above (ignasimonreal.com).
in the example, there are two folders: featured and works. guest can click both of them and see the options next to it. for example, I'll put "works" title in the left and when guest click it, there will be my brands in the right. and then if you pick one of that brands, there will be images in the right section about that brand. and it will be scrollable.
briefly, I want a folder system like ignasi monreal. thanks!
I created the desktop icons, I made them clickable and added hover effect for each icon.

Related

Canva.com, how can I have opend link in new tab

I am training to add links to my Canva project.
But I need links which one opens in new browser tab. Is anyone knows how to do this?
To link to another website page, enter the link, and press Enter on your keyboard or click anywhere on the editor.
To link to another page within the design, select the page you want to link to from the Pages in this document section in the dropdown.
To link to one of your recent designs, select it from the Recent section in the dropdown. Make sure have the right permissions to the design you’re linking to so it loads properly to your audience.

How Do I identify the background image of this site? I am cloning a site for Wordpress

I am cloning https://www.sovereignselfdefense.com per request from the owner. To create a Wordpress site. The site that is currently up is a Kajabi site. I have downloaded all images from the Kajabi site by simply right clicking the site and clicking download. I made the Wordpress theme and the images that did not download (shown with arrows) display fine in the custom wordpress theme.
All images, except these images in the CTA (for example, the gentleman with his arms out) are downloaded.
The client is transferring from Kajabi to Wordpress. I am afraid that the cloned wordpress theme is getting these images from the Kajabi site and, when said site is taken down, that I wouldn't be able to get these images. The Wordpress theme works, and displays these images for now.
I used Google Chrome Inspect Elements to try to find what this image is, and how this image is displaying. I am confused.
I'm requesting some tips on how to identify how the site loads these images in the CTA, so I can download them and link the wordpress theme's html accordingly. If someone could teach me how to identify one image, I believe I will be able to identify the rest of the images. Thank you for helping out.
In the inspect you can see the html code there is style expand it and you can access the background image's URL.I have just highlighted in the images.
They have attached a style block before the parent div of any container which has a background image just expand that style tag and get the image.
Image-1:
Image-2:
Image-3:
Image-1: https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2031124/settings_images/tzJ4ad46RcSJinm7qbnO_Edited-image.png
Image-2: https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2031124/settings_images/qqHvByszR1iu2rvfEQwg_defending2.jpg
Image-3: https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2031124/settings_images/AWzmDDsWTlKOdoWPatUA_SovereignSelfDefenseBrandingPhotography-59.jpg
By clicking the image if you can drag it directly to your desktop that means that image is used by
<img src="">
tag in the code. Either it's used through css.
For your code please check the css file and you will get the image use as "background-image:url()" or you can check through inspect element section by section.
If you are using Google chrome then you can download and install this cool extension.
I'm a Gentleman
Here is the description from that link.
Easily save images with a click, gestures or the extension button.
Save images with one click by using the alt + click hotkey (holding the alt key and clicking the image).
Or save images by dragging them (drag the image slightly on any direction).
Download every image on the page by using the extension button (green button on the top right).
Note: The images are downloaded in the default directory for downloads of Chrome.
Installation Note: After installing, Chrome doesn't add any extensions to the currently opened tabs (so, you have to reload the tabs that were opened before the extension was installed to work it to work on them).
Also, you can inspect the page. below is the step on how to access inspect Element.
Right-click anywhere on the webpage, and at the very bottom of the menu that pops up, you will see "Inspect." Click that.
Click the hamburger menu (the icon with 3 stacked dots) on the far
right of your Google Chrome toolbar, click More Tools, then select
Developer Tools.
Now if you want to find out the image you can simply find it by clicking CTRL+F and type like .png or .jpg any other extension that you want to find.
Here is the example.
You can click right click then click save image as and when you are saving it.under the name you will find the type.
Some websites make it almost impossible to get the image. I remember trying to save a background theme image from the old gmail.
If you find yourself in that situation, open the Developer Tools, go to Network, filter by Images then sort by Size descending, so you get the biggest image to be the first one, then hover over each file to find your image.
You want to sort by the file size, because most of the times, the big background images are the largest in size.
Just checked out your website out..
Image 1
You can find this right below the line where the section id is 1574286919067
Image 2
Similar to the first image, this is under the section 1589827030126
Image 3
Once again, under section 1589828889742
Hopes this helps you out.. Let me know if you want to have anymore queries about the same.
The images itself:
-> Image 1: https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2031124/settings_images/tzJ4ad46RcSJinm7qbnO_Edited-image.png
-> Image 2: https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2031124/settings_images/qqHvByszR1iu2rvfEQwg_defending2.jpg
-> Image 3: https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2031124/settings_images/AWzmDDsWTlKOdoWPatUA_SovereignSelfDefenseBrandingPhotography-59.jpg

html/css How can I show the clicked photo in a gallery at the top of the page?

I want to make 1 html page a gallery for my website. Instead of making a page for the title and description of every picture, I would like to show the information of the last clicked image above the gallery. (pics of video game items and how/where to obtain them, to be specific)
Basically when you go to the website, you will see a blank image spot, a description that says "click one below" and a gallery below. Once an image is clicked, it scrolls you back to the top and changes the blank image spot and description to the relevant picture.
This would save me from creating 100+ pages for each dedicated item and description, without clogging 1 page with TONS of information. Thanks
(preferably with only html/css because that's all I know, but a simple copy pasta of something else would help as well)

Why am I getting a doubled menu when I click the link for my main page?

Whenever I click the "Home" option on my menu (left hand side, frames), a second copy of the menu page appears on the left side of the main window. The html of this link is identical to the other links, which work fine. As I'm just developing the site at the moment, the HTML of all the links is also identical. There is no code difference between this link and the others in any way, only the behavior.
The doubled copy of the menu is a phantom. It will not double itself again, and goes away when any other link, other than the home page, is navigated to. I'm currently in school and this is my first ground-up project, so I'm sure it's something stupid and simple.
Well Aarron, your problem is indeed quite obvious. After looking for hours, the solution the whole time is that your "Home" link is pointed at Index.aspx, which is the page with your frames, instead of Main.aspx. You were thinking of Index as your home page, which it is, but linking there in this context gave you frames within frames, instead of the default opening display page you were aiming for.

Sublime Text 2 - Show Folders sidebar in different windows of same project

How can I configure Sublime Text 2 to show the Folders sidebar in different windows of the same project?
To further clarify, I have a single window opened for a project:
we see the Folders sidebar on the left, showing the hierarchy of the project (I've deleted a lot of content here due to privacy reasons). I proceed to drag the tab circled in red out to its own window.
Now, I get this window with the dragged out tab:
When I use View -> Side Bar -> Show Side Bar, I get the Open Files sidebar, which shows the files opened in that window. But what I want is the Folders side bar, just like the original window.
How do I do that?
Only drag and drop your folder to Side Bar of Sublime text
Just to illustrate, I've attached a screenshot showing how to do it:
I'm using Mac OS X, so I just opened up the Finder app, dragged the project folder over to the side bar and that shows the project folder hierarchy.