Submitted over 4 years ago

Single column page using html and css(without js)

Guilherme Silva• 140

@silva-guilherme

Preview site View code

This is a solution for...

Ping single column coming soon page

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi everyone, first of all it's a pleasure to be here sharing my stuffs and acquiring knowledge with all of you.

I have some issues when i was doing this challenge.

First, i don't know javascript yet to build beautiful interfaces, so it was kind hard to me (a novice in web development) to complete perfectly the site exactly the same as the example.

The hover effects don't work as it should be when i hover the mouse on it, especifically on the social media icons, that i used svg's and i dont know how to change the color of it even passing hours trying to do so :x

I really really enjoy doing this, and i hope you guys read my submit and could give me a feedback and tips to improving my code.

(Sorry if you are reading grammar errors, english is not my primary language)

Community feedback

Simeon Udoh• 535

@simeon4real

Posted over 4 years ago

I have a couple of recommendations:

To get hover effects on buttons and links, add: display: inline-block to your .btn class
Your webpage breaks on screens sizes => 1400px
Learn CSS methodology, preferably BEM. Learn how here: https://www.smashingmagazine.com/2018/06/bem-for-beginners/
Don't use SVG images as Social icons. Instead, use SVG icons. You can use icomoon for that. It will improve performance.

Upvote my feedback if you found it useful.

Guilherme Silva• 140

@silva-guilherme

Posted over 4 years ago

@simeon4real thanks for answering Simeon, i will take a look at this methodology, it looks very useful and a golden tip,thank you!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord