Flexbox ninjas, please my landing page needs urgent help

I am trying to make my landing page look like this gregobyte.com not like the whole site but just the way the fonts are arranged side by side with the images, I feel I can use flexbox to do this but not just sure how and what exactly I need to do to get them to align properly. here is my codepen: my codepen someone please help.

I fixed all of your ’ "'s in your html with a simple replace and then rearranged your div/p’s. Here you go: https://codepen.io/DonTechSite/pen/gEzWLq?editors=1100

Should work as intended @Princenuel

yea @Destro168 does it mean the pictures cant at least lap properly and the button come under the write-up? and please leave comments in the areas you edited, thanks for the response though.

By lap, do you mean you want the text to be aligned vertically? If so, then check the codepen again. I added an example of how you can get the text to be aligned top-down by resetting the display property to inline. I added comments, and you can ctrl+f to 'DT@ ’ to see my changes.

edit: Actually reviewing project once again to check something.
edit2: Actually, you don’t even need the CSS change apparently. Just adding the div is enough. I didn’t review the website thoroughly enough originally. Sorry about that.

If you want to enforce veritcally alignment with flex, use css rules :

display: flex;
flex-direction: column;


That may be useful during browser compatibility checks. But in Firefox for me, it works fine with just a div.

am sorry, but I tried to see if you can see the picture of what I mean, the uploaded picture shows how the image laps well side by side the text and underneath the text you have the green learn more button, this is what I have been tried to achieve. @Destro168

Look at the IT CONSULTING section again and give your thoughts: https://codepen.io/DonTechSite/pen/gEzWLq?editors=1100

You should see: https://imgur.com/v1tNifH


I personally think using CSS GRID with this for the overall column row layout would be perfect, then use flexbox for your one-dimensonal “hotel management solution” text.

yes exactly, now you get my point @Destro168

Now the challenge is how to make the four images look like that “IT CONSULTING” @Destro168

cool bro but I’ve tried to replicate what you did in the IT CONSULTING text but the others didn’t behave in the same way, I still need your help bro or at least let me know how you did it @Destro168

@Destro168 I have been able to get the images where I want them, the only thing remaining now is the text formatting, getting them to look like the IT CONSULTING text format, that’s where I need help now, here is my codepen … codepen


Hey, I was sleeping. Here you go: https://codepen.io/DonTechSite/pen/gEzWLq?editors=1100

If you want to see changes, then I recommend you get a program with compare functionality. You can use GIT, or you can get Notepad++ and install the Compare Plugin (all free and highly recommended!). But, it will probably be pointless because I had to perform surgery on this code, so almost everything will be marked as changed.

Next, I strongly recommend to you that you get a good IDE. Visual Studio Code is great. And, get the Beautify plugin. It will help you keep your code formatted. I recommend this because you have some invalid CSS and VS Code will flag all of that. And, having well formatted code will let you see potential rule violations that maybe you would otherwise miss, like your <p> tags wrapping your <h3> tags doesn’t work.

Well, anyway, there was a lot more changed. But, I’m sure you’ll see all of it. Good luck beyond this point!

woooow! thanks man, you are the boss, had to write down all your recommendations, and i just installed vs code, although i don’t do the FCC projects with an editor i just use the codepen all the way through and after this project i will learn git so that i can push all the projects i’ve done so far to my git account. thanks boss for this i can see the changes you made cos i have the other version still open on my browser, am grateful @Destro168