Social Links Profile (HTML | CSS)

Hello @mazhar1857, thank you very much for your comment, you are absolutely right, there are problems when rotating the screen horizontally, but I have solved it, I established a fixed height for the container (main label in my case) and for the body, and I also added some top and bottom padding to the body to create some space in the landscape view.

hello @Cheosphere, it just takes a small change like using min-height instead of height to resolve a layout issue. but it took 5 to 6 hours .

Hello @Nantue , I have some knowledge of graphic design, what I do is carefully examine the "desktop-design.jpg" file, using photoshop or illustrator, so I can measure the sizes, margins and padding of each element, and apply it to my development to achieve a result almost identical to the UI design that they give us in the project files folder. It's a bit stressful and time-consuming work, but I like seeing the end result.

hello @Cheosphere, Yes, the final result is very Good.

But padding and margins depend on the size of the screenshot how you get the size @Cheosphere

@Cheosphere do you use figma?

@CaioQuerino I don't have access to figma, because my account is free.

@Cheosphere I understood. Your design is great, I use figma to help me from time to time.

card

@Cheosphere Your work is amazing bro....Man...i hope i get to be better just like you are in this filed of coding !!!! :)

Hi @Cheosphere , I want to learn more about the graphic design ( UI ) any YouTube channel you can recommend

@Cheosphere

Hello, I came across this comment after you liked one of my designs. I can see you love this work. I just figured out a good solution that should save you a lot of time, which I will start using as well. There is a chrome extension called "PixelParallel" which allows you to upload the design JPG files as overlays over the localhost browser window with some custom transparency. This way you can build on top of the transparency instead of painstakingly measuring in software.

@Cheosphere We need a tutorial on how you do that, please

Hello @justinconnell thank you very much for your comment. I try to arrange the CSS code in the simplest way possible depending on the complexity of the project. In this case, for a small project, I applied CSS styles directly on the HTML tags, but when the project is larger and/or complex, I do so by establishing classes to avoid problems in the CSS code cascade. Systems like the one you mention (BEM) honestly I have not studied them in depth, it is a task that I have pending.

@Cheosphere thank you for responding to my question - that makes sense to me.

Hello @hebaahmedsaleh, thank you very much for appreciating my work, regarding what you mention about using fixed or dynamic measurements, in this case I was simply guided by the design reference that they gave us in the project folder (desktop-design.jpg and mobile-design.jpg), and in both views the size of the links is the same, for that reason I decided to leave the height at 45 pixels.

@matthewkuria Thanks!! 😺

@dashaunn Thank you so much!!!