Company Home Page Challenge Project (Css,Flexbox)

Here’s my completed Company Home Page Challenge Project (Css,Flexbox).

Now Then! Plants and Blooms


1 Like

Hi all,

It’s taken me forever to complete this but if anyone has time please let me know your thoughts

code GitHub - yomiboo/flexproject

Hi everyone!
I created my homepage for a fictional cat cafe (although I wish it were real). Any feedback is welcome!
Live site:

1 Like

Hi great job on your project. I really like the crisp style.

I have some feedback on your navigation. I notice you included links in your nav using href=“#” (lines 17-19), but didn’t connect them to the anchor points in your code. You can link them by referencing the associated id.

line 15:

    <nav class="nav-list">
            <li><a href="#mission-statement">mission statement</a></li>
            <li><a href="#services">services</a></li>
            <li><a href="#dream-container">dream team</a></li>

line 43:

<div class="services content" id="services">

You’ll notice the anchor does not account for the sticky header. I ran into this problem too and found adding this line to styles.css fixed it. Use whatever height your header is. It looks like yours is about 112px.


html {
scroll-padding-top: 112px;

Hey there! project bellow! thanks a lot!

Thanks so much for your time and feedback! I have implemented the changes now, appreciate it :slight_smile:

Hi Everyone!
i’ve created my coffee company :slight_smile:
Live site: My Coffee Company

I like look of your site and you’ve done a good job making it work for mobile devices.

I have some feedback regarding the Our Family section to improve the layout of the cards and images. In particular, the images of the staff could be made to look less stretched out and moved into the middle through the use of object fit and margin. You could try something like:

.combi img {
width: 220px; /*match the width of the text box below*/
height: 220px;
margin: 0 auto /*place in center in line with the text box*/
object-fit: contain /* scale the image to fit the width and height while maintain aspect ratio */
border-radius: 50%; /* make a circle */}

Otherwise, you’ve done a good job with this project. :slight_smile:

Here is the link to my finished project GitHub - kookontheloose/Company-Home-Page-Challenge: Company Home Page Challenge with Codecademy

Looking back over this post I meant to say object-fit: cover; not contain. whoops.