Company Home Page Challenge Project (Css,Flexbox)

awww… Image issues! I had them as well, your site look great! keep going!

Thanks! I appreciate the feedback!

Yeah, no shortcuts… you’re right.
I find it can be hard to motivate yourself to give 100% when its just a project, that’s one of the reasons i was so impressed with your site. You’ve really done it properly!
Onwards!!!

1 Like

Hello,
I’ve just finished working on my version of the challenge project Company Home Page.
I’m open to hearing any suggestions in regard to code quality and readability.

GitHub repo:

Live:
https://nastyyvolk.github.io/

2 Likes

Hey Guys!

I would love to get some feedback on my site I built.
visit the link below :slight_smile:

Thanks
Luke.

1 Like

Hi! I finished the project and a did of a real company (Husqvarna)

Github Page: Husqvarna Motorcycles

Code: GitHub - matiaslupa/husqvarna: Company Home Page with Flexbox (Codecademy)

1 Like

Hi there,

Good work everyone, there are some fantastic designs here. :+1:

Here is my code for this project:

Live front end:
https://wpbc.github.io/company-home-page

Feedback would be very much appreciated.

Thank you

Wesley

1 Like

Wow, this is fantastic, love the design :+1:

2 Likes

Hello Guys,

I just completed my Flexbox project. The design was done a few years back when I used to work as a UI Designer. Now I thought why don’t I bring back life to this static template. Although I have changed a little bit. Contact section must be deleted as it is not looking that good. So here it is:

For good looking:
Original Design: https://www.behance.net/gallery/30419405/one-page-agency-psd-template(Freebie)
Webpage link: Foinni Website
And the code goes here: https://github.com/zillur-rgb/nexus.git

Any kind of suggestion is highly appreciable.

I have a thing for pies so decided to go with that.
here is my live website.
the code can be found here.

its very simple and not as good as some of the posts I’ve seen here but I did learn a lot on this project, especially more about how flexbox works. As always welcome the feedback and any advice you guys might have.

Wow very nice design! It’s so clean and beautiful :slight_smile:

1 Like

Hello

Could someone help me ? My photos are not uploading and i don’t know what to do ?
please see my below codes.

Also I would like to share URL of my web page but i don’t know how to do to get HTTP URL like the other people share ?

Could you please advise ?

thanks

<!DOCTYPE html>
<html>
<head>
    <title>Amorcito Perfumes & Accessories</title>
    <link rel="stylesheet" href="styles.css" type="text/css"/>
</head>

<body>
<!-- Header -->
<header class="flex-container">
    <img src="resources /Images /LogoSample_ByTailorBrands.png"/>
    <nav>
        <span><a href="#mission">Our Mission</a></span>
        <span><a href="#Products">Our Products</a></span>
        <span><a href="#Team">Our Team </a></span>
        <span><a href="#Contact">Contact</a></span>
    </nav>

</header>
<!-- Main Content Container -->
<div class="main">
    <!-- Mission Section-->

    <div id="mission" class="flex-container">
        <div class="content">
            <h1>Our Mission</h1>
            <h3>Quality, Value for money,customer's satisfaction, autantic </h3>
        </div>
    </div>

    <!-- Product section-->
<div id="products">
    <h2>Our Products</h2>
    <h4>Do you want to buy the authentic luxury perfumes?</h4>
    
<div class="flex-container items">
    <div class="items">
        <img src="resources /Images /tresor.jpg"/>
        <span>Tresor</span>
    </div>
    <div class="items">
        <img src="resources/Images/armani.jpg"/>
        <span>Armani</span>
    </div>
    <div class="items">
        <img src="resources/Images/dkny.jpg"/>
        <span>Dkny</span>
    </div>
    <div class="items">
        <img src="resources /Images /gucci.jpg"/>
        <span>Gucci</span>
    </div>
    <div class="items">
        <img src="resources/Images/tommygirl.jpg"/>
        <span>Tommygirl</span>
    </div>
</div>

</div>
</div>
<!--Team--> 
<div id="Team">
    <div class="title">
    <h2>Our Team</h2>
    </div>
<div class="flex-container team">
    <div class="content">
        <div class="team-member">
            <img src="resources/Images/Awin.jpeg"/>
        
        <div class="label">
            <h4>Ashley win</h4>
            <p>Procurrement Director</p>
        </div>
    </div>
        <div class="team-member">
            <img src="resources/Images/Mee gne.jpg"/>
            
        <div class="label">
            <h4>Alessandra Lei Phyu win</h4>
            <p>Sales and Marketing Director</p>
        </div>
        </div>
        <div class="team-member">
            <img src="resources/Images/Dimitri.jpg"/>
        
        <div class="label">
            <h4>Dimitri Richie</h4>
            <p>Sales Director</p>
        </div>
        </div>
        <div class="team-member">
            <img src="resources/Images/Marcio.jpg"/>
        
        <div class="label">
            <h4>Marcio Nunes</h4>
            <p>Operation Director</p>
        </div>
        </div>

        </div>

        </div>

    </div>

<!--Contact section-->
<div id="Contact" class="address">
    <h3>Our Contact</h3>
    <h4>London UK </h4>
    <span><strong>Email:</strong>amorcito.sales@yahoo.net</span>
    <br>
    <span>phone:00440245884678</span>
</div>


</body>
</html>

/* Universal Styles */

body {
    margin: 0;
    font-family:"Arial", Helvetica, sans-serif;
    color:darkblue;
    background-color:cornsilk;
    font-size: 22px;
    text-align:center;

}

a {
    color:darkblue

}
h1,
h2,
h3,
h4 {
    margin: 0;
    padding: 10px;
    font-weight: normal;
}

.flex-container {
    display: flex;
justify-content:center;
    flex-wrap:wrap;

    
    }

/* Header Section */
header {
  width: 100%;
  position:fixed;
  z-index: 1;
  height: 70px;
  background-color:cornsilk;
  border-bottom: 1px solid cornsilk
  align-items: center;
}

header img{
height: 50px;
padding: 10px;

}
nav{
    text-align:right;
    flex-grow: 1;
}
nav span{
    display: inline-block;
    padding: 20px 10px;

}

/* Main section */
.main {
    padding-top: 70px;
    opacity: 0.7;
    margin:auto;
    width:1200px;

}

/*Mission section */
#mission {
    height: 700px;
    background-image: url("Images/accessories.jpg");
    padding: 70px;
    background-size:cover;
    background-attachment:fixed;
    width:100%;
}
#mission .content {
    margin:auto;
    background-color:cornsilk;
    width: 150%;
}

/*Product Section*/

#products {
    height:700px;
    width: 700px;
    margin-bottom:auto;
    padding-top: 70px;
}
.items {
    padding:5px;

}
.items img{
    height:200px;
    margin:5px;
    display:inline-flex;
    align-items: stretch;

}
.items span{
    display:block;
    padding: 5px;
    font-weight:bold;
    text-align:center;
}
#Team .title{
 margin-bottom: 1em;
 margin-top: -15em;
 }
 #Team .flex-container .content {
     padding: 3rem 1.5rem;
     justify-content:center;
     
     flex-flow: row wrap;
     flex-direction: row;
 }
 /*#Team .flex-container .content .team-member {
     margin: 1rem;
     display: flex;
     flex-direction:column;
     flex-flow: row wrap;
     width: 19rem;
     justify-content: center;
     margin-bottom: 1rem;
 }*/

#Team .flex-container .content .team-member img{ 
    display: flex;
    flex-direction: row;
    justify-content:center;
    width: 50%;
    height: 50%;
    margin-bottom: 1rem;
    
}

#Team .flex-container .content .label .p{
    font-family: Helvetica, sans-serif;
    line-height: normal;
    text-transform: capitalize;
    display:flex;
}





Hi everyone!

I just completed the project “Company Home Page with Flexbox” from the Front-End-Engineer Career Path.
Please let me know what you think! :slight_smile:

Link to the repo
Link to the site

Hello everyone :slight_smile:

I’ve completed the project and would be pleased to get feedbacks.

My project

Have a nice day

Nice job :grinning:

I really like the hover effect on the

withe class “card”