@longani974
Latest solutions
Latest comments
- @annesophie22
Well this is what I call "going further than what is requested" ! That's awesome, that's so neat. I am a stranger to React and ignored it would be useful for this kind of projects. Did you use "high level" React or would it be something that a beginner in React could achieve without too much hair pulling ? Great work !
- @gerkim62@annesophie22
Hi there :)
From what I can see, here are some hints that might help you : -- you used position: absolute on your illustration without declaring any parent container as position: relative. Meaning that your image has an absolute position based on the "position" of your body. That's why on desktop, your image is 45px from the right side of the window, and 12px from the top of your window. If your plan was to use position absolute to place your image on the top of your wrapper, then you would need to declare position: relative on your wrapper container.
-- instead of using position absolute to position your illustration, try to use margin-top instead, by declaring a negative value. Something like -100px worked quite well when I tried in my browser.
-- the "easiest" way to make your layout responsive is to use flexbox for desktop version. For this to work, inside your wrapper you will need 2 container : 1 for your illustration and 1 for the rest of your content (h1 + your onefaq divs). Then you can declare your wrapper as flex, which should get your illustration just next to the rest of your content. Then you need to play with flex position a bit to get what you want.
-- Once you're comfortable with flexbox, you can improve your code and css by building your onefaq div with flexbox as well. This means that instead of using position: absolute for your icon-arrow-down, you use flexbox to control its position.
My advice would be to learn a bit more on flexbox (have a look on css tricks website) and try again this challenge. You'll see that your life will be much more easier than with absolute positioning :)
Flexbox, grid layouts and declaring width with % instead of with px are some of the best ways to achieve responsive layouts.
Good luck !
Marked as helpful - @Elelu@annesophie22
Hello Elelu, The overall design is here, good job ! You can improve your solution with quick improvements :
- by giving white space between your elements : play with padding or margin of your containers containing the main sections (nav, section 1 "all your files in 1 location", section 2 "stay productive wherever you are etc)
- I see in your code that your put your body font family between square brackets "Open Sans". This is preventing your CSS to compile this font family, that's why you do not have Open Sans as a font family in your final design (same for your a tags)
- I see also in your code that for your "footer" your planned a grid of 4 columns but you coded only 3 columns, the social media icons are missing. That should also be easy to fix since you already "prepared" your container with 4 columns. Keep the good job up ! Have fun
- @Rutwik1801@annesophie22
Hi Rutwik1801, that's great work ! I can see that the picture is a bit too narrow though - compared to the design. I guess the proportion of your main content (image + text) should be re-balanced a bit, maybe 40% for the image and 60% for your text. Not sure how you manage to get proportions in case you did not have the Sketch file. On my side, I use Figma (free tool) to measure space between elements. It's not pixel perfect since the design is in .jpg, but at least I can get a better idea about space and proportions. Keep up the good job :)
