Company Home Page Challenge Project (Css,Flexbox)

hi,
here is my site - a silly candle shop sort of thing
hope it works!

https://github524.github.io/flexbox

J

2 Likes

Hello everyone :grin:,
this my small website for my small dream business :relaxed:

website: Welcome To Otaku World
code: GitHub - Husain22/Otaku-World

hope you like it :blush:

2 Likes

I’m super biased because I’m into anime but I really like this site. Simple and easy on the eyes. The banner image looks pretty stretched but that’s a small complaint. The only thing I would try to include is a color theme. Even just one color that isn’t grayscale to identify with the brand.

You reminded me to add social icons and a few other things to my site so thanks!

My guitar service website.
I plan to work on the color theme a bit more and change the fonts around in the future.

code: GitHub - gnub33/Guitar-Savers: Code Academy Flex Box Project
website:Guitar Savers

2 Likes

Thank You , Glad that you like it :blush:,
i will try to improve it in the future :smiley:

by the way your guitar site is also nice, i recommend you to add more margin for each section heading (around 50px - 80px) and editing the footer section.

Here is the website that I created from this project https://jjaakk23.github.io/CompanyHomePage/ The GitHub repository is here https://github.com/jjaakk23/CompanyHomePage. I would love some feedback (I know there is an extra copy of the files, I don’t know how to delete folders on GitHub yet.

1 Like

Thanks for taking a look. I’ll play around with my site a bit more.

I lol’ed reading the hero banner

I liked everything about this site. It’s very well made!

My only suggestion is to remind you to ‘cursor: pointer;’ your links for the icons in the recipe and team sections and at the bottom in the footer.

1 Like

Hi

This is my take on a fictional company Olympus Corp.

Code here GitHub - alittlebroken/olympuscorp

1 Like

Hey codecademics!

I made a mock website for my brother-in-law’s store.
(It’s a small convenience store in a nearby village).
Also, if there are any Ukrainian speakers, please read the Відгуки,
because they are quite funny)

website: Магазин Вулик

github: GitHub - b-a-merritt/vulyk: Web-Store Vulyk in the town of Mushkutyntsi, Ukraine

3 Likes

Nicely done. Your site looks good on my phone and desktop.
Also, I really like the logo! It contrasts very nicely with the black background. Where did you find it?

I am definitely no expert but my two cents worth…its nice and responsive - looks good on mobile. I find flexbox a real challenge so admire anyone who can get it right! I just thought maybe the pics should be the same size on bigger screens. And maybe the big text blocks would be better less wide - add margins or padding.
Thanks for sharing!

Hello, world,
Here’s a link for my live Company Home Page Website: Classic Garage Showroom and here’s the source code: https://github.com/GabrielAllba/Company-Home-Page.
I hope you like that and thank you for coming there. All feedbacks are very welcome and valuable for me. :grinning:

3 Likes

Just finished with this project. You can view the site here: Motion | Move With Style

Source code: GitHub - daniellabrador/codecademy-motion_home_page

On the way I use CSS selectors, I wrote them like that so it’s easy for me to follow which specific elements I am selecting when I check the index.html file. Do you think this is an inefficient technique?

Anyway, I hope you like it.

2 Likes

Cool concept, Riel. I like it. I couldn’t even do animations yet. I’m still getting there.

I may have some suggestions on the following.

  • I’m a bit concerned with the negative space when you shrink the browser’s size, specifically on the OUR MISSION container.
  • The image sizes are too large. Some users with a slow internet connection might have trouble viewing your webpage. You can try simulating slow internet speeds using ChromeDevTools. You could head over to Reduce Images to reduce image sizes as a quick-fix remedy.
  • The menu hamburger icon also is too small after shrinking the browser window.

Nevertheless, great stuff, man!

2 Likes

Thank you, Will, your sites are great too, and thank you for your suggestions, I’ll fix that later :smiley:

Hello this is my Company Home Page Flexbox project, any comment is welcome, thanks

I finished my project, I create a site for a clothes store for a friend, in the future I will put a shopping, payment and calculate the delivery

Here is the repository in the GitHub: fullstack-engineer/projects/flexbox-business-site-starting at master · Henriqaraujo1/fullstack-engine

This is very important to training my skills and it was fun working out with flexbox.

Great design. Clean, responsive & modern!

Hi everyone,

This was a particularly exciting project for me because I decided to build and modify the website I had designed for my company Tune (15-minute sound and vibration sessions to regulate the nervous system and reduce stress and anxiety). Excited to become comfortable with React so I can build the full web app!

Website: Tune - Human Potential Powered by Sound
Code Repository: GitHub - jasbneal/CompanyHomeProject_Tune

Any feedback is welcome and appreciated! :upside_down_face:

If I were to do the project again I would change how I approached the div element class names. For example, I used the same class name in order to provide the same styling for the location boxes in order to avoid code duplication (HTML and CSS example below) but I realized that I could have done a similar technique with other aspects such as for buttons or specific font styling that was repetitive. Ex. <h1 class="h1-styling></h1> so that one CSS rule for .h1-styling could be applied throughout the site.

<div class="location-block" id="l4">
    <a href="./index.html">
         <h3>lululemon Lincoln Park</h3>
          <div class="location-address">
               <p>944 W North Avenue</p>
               <p>Chicago, IL 60642</p>
          </div>
          <p class="location-phone">+1 (123) 456-7890</p>
          <div class="loc-book">
               <p>Book</p>
               <img src="./assets/images/right2-green.svg">
          </div>
    </a>
</div>
.location-block {
    margin: 20px;
    width: 328px;
    min-width: 328px;
    height: 283px;
    min-height: 283px;
    border: 1px solid #FCE7D5;
}

.location-address,
.location-phone {
    padding-left: 21px;
    padding-top: 22px;
    height: 87px;
    width: 100%;
    color: #222222;
    font-family: "PT Serif";
    font-size: 18px;
    letter-spacing: 0;
    line-height: 29px;
}