Company Home Page Challenge Project (Css,Flexbox)

I really appreciate that!

1 Like

Hey all!

This is my project which is a fictional brewery.

My first real attempt at making a functional website.

I had a lot of issues starting out but it works pretty good now…I think. Still some responsive issues when I open it via GitHub on my iPhone.

Let me know what you think!

Code: GitHub - XxGr33nGoblinxX/XxGr33nGoblinxX.github.io
Website: https://xxgr33ngoblinxx.github.io/

1 Like

Hello folks, I hope you are all well and enjoying the codecadamy projects.

Here is my attempt at the website challenge: Funky Husky Band Site!

I hope it gets easier…!

Hello everyone!
Here is my flexbox practice for a photo studio.

The code is here: GitHub - TheAltamar/thealtamar

The website can be seen here: http://altamar.infinityfreeapp.com/photo-studio/studio-index.html

Thanks for your feedback!!

2 Likes

Hello,
this is my project for an imaginary web design studio.

GitHub repo: GitHub - D4GR4SS/Responsive-Landing-Page: Just a prototype of a Home page for web studio - Off Platform Codacademy Challenge
Demo: Scale Studio

Any feedback is welcome!
Grazie :slight_smile:

2 Likes

That looks really great!

1 Like

Hey everyone! I see a lot of great looking sites on here. Mine is pretty simple by comparison to a lot of these lol.

live: 🥡 T&D's Juicy Dumps
repository: GitHub - klunkyfungus/T-D-s-Juicy-Dumps: Ficticious Company Website made to practice CSS flexbox skills

Let me know if yall have any feedback for me. Thanks

1 Like

Hi guys!

Just completed my project for a fictional Engineering Firm!

Feedback is very welcome! Thanks for your time and happy coding! :slight_smile:

1 Like

Hey Guys.

Check out my fictional pet company
PetCo. Live site
GitHub

1 Like

Hello!

My project for the fictional company was a company that sold computers: Desktops, Laptops, and Tablets.

I took some inspiration from other companies that sell these devices and kept it pretty simple and modern in design.

I think it turned out pretty good!

The code can be found here: GitHub - Dbevan770/computer-business-website: Mockup for the landing page of a business website that sells computers.

and the live version can be found here: Computer Business

1 Like

Wow, lots a beautiful designs and sites for this project. Coding is new to me, so mine is a bit more basic.

Live

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Brews and Bubbies</title>
    <link rel="stylesheet" href="resources/style.css" type="text/css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif&family=Roboto:[email protected];700&display=swap" rel="stylesheet">
    <meta name="viewpoint" content="width=device-width, initial-scale=1.0">    
</head>
<body>

<!--Nav Bar-->

    <nav>
        <img class="logo" src="resources\images\logo.jpg">
        <ul class="navbar">
            <li><a href="#banner">Home</a></li>
            <li><a href="#locations">Locations</a></li>
            <li><a href="#dogs">Bubbies</a></li>
        </ul>
        </nav>

<!--Banner-->

    <div id="banner">
        <h1>Brews and Bubbies</h1>
        <p>Showcasing bubbies and some breweries</p>
    </div>

<!--Locations-->

    <div id="locations">
        <h2>Breweries That Allow Bubbies</h2>
        <div class="container">
            <div class="container-location">
                <img src="resources\images\mikerphone.jpg">
                <h3>Mikerphone</h3>
                <p>Garlisch Dr, Elk Grove Village</p>
                <p class="location-review">Bubbies allowed both inside and out. Staff & customers love to give pets to good girls and boys. Grassy area for the duties.</p>
            </div>
            <div class="container-location">
                <img src="resources\images\wolfden.jpg">
                <h3>Wolfden</h3>
                <p>W Lake St, Bloomingdale</p>
                <p class="location-review">Bubbies allowed only outside. Large outdoor space for duties with a firepit for the warms. Bubby beer on the menu</p>
            </div>
            <div class="container-location">
                <img src="resources\images\metro.jpg">
                <h3>Metropolitan</h3>
                <p>N. Rockwell St, Chicago</p>
                <p class="location-review">Bubbies allowed both inside and out. Outdoor space on the river for deck watching. Minimal grass area, but great views.</p>
            </div>
        </div>
    </div>

<!--Bubbies-->

    <div id="dogs">
        <h2>Featured Bubbies</h2>
        <div class="dogcontainer">
        <div class="container-dogs">
            <img src="resources\images\millie.jpg">
            <h3>Millie</h3>
            <p>Loves to sit in the walkways and beg for pets.</p>
        </div>
        <div class="container-dogs">
            <img src="resources\images\pais.jpg">
            <h3>Paisley</h3>
            <p>Aspiring actress. Loves to pretend she gets no love.</p>
        </div>
        <div class="container-dogs">
            <img src="resources\images\penny.jpg">
            <h3>Penny</h3>
            <p>Will herd anything in site. Much softer than you'd expect</p>
        </div>
        </div>
    </div>

    <!--Footers-->

    <footer>
        <p>I do not own the rights to these photos, and neither do you.</p>
        <a href="https://www.instagram.com/brewsandbubbies/"><img src="data:image/png;base64,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"></a>
    </footer>
    </body>


</html>

CSS:

body {
    background-color: black;
    color: white;
    font-size: 16px;
}

h2 {
    text-align: center;
    font-family: Roboto;
    font-size: 1.5625rem;
    text-decoration: underline;
    opacity: .9;
}

/*Nav Bar*/

nav {
    position: fixed;
    top: 0px;
    display: inline-block;
    width: 100%;
    z-index: 3;
    height: 80px;
    background-color: white;
    opacity: .7;
    padding: 15px 0px;
    margin: 0 auto;
    color: rgb(41, 41, 41);
    border-bottom: .5px white solid; 
}

.logo {
    width: 100px;
    height: 80px;
    padding-left: 10px;
    display: block;
    float: left;
}

.navbar li {
    display: inline-block;
    list-style-type: none;
    float: right;
    list-style: none;
    padding: 15px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}

.navbar a {
    text-decoration: underline;
    color: rgb(41, 41, 41);
}

/*Banner*/

#banner {
    background-image: url("https://media.istockphoto.com/id/1298643776/video/dark-beer-bubbles.jpg?s=640x640&k=20&c=BrEnvc0SQaE2PwZlKx34YvEXLpLZoKYKNpE_FiZxF2A=");
    height: 243px;
    width: 100%;
    color: white;
    opacity: .7;
    margin: 150px auto;
    text-align: center;
    border-top-left-radius: 10%;
    border-top-right-radius: 10%;
    font-family: Roboto;
}

#banner h1 {
    padding-top: 150px;
    margin: 0 auto;
    font-size: 65px;
    text-decoration: underline;
    font-weight: normal;
}
 
#banner p {
    padding-top: 0px;
    margin-top: 5px;
    font-size: 25px;
}

/*Location*/

#locations {
    opacity: .95;
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.container-location {
    text-align: center;
    font-family: "Noto serif";
    width: 400px;
    height: 500px;
    border: .1px solid white;
    opacity: .85;
    background-color:rgb(41, 41, 41);
    padding: 7px;
}

.container-location img {
    width: 320px;
    height: 210px;
    padding: 15px;
}

/*Bubbies*/

#dogs {
    margin: 7.5rem 1.5625rem 7.5rem 1.5625rem;
    border: .1px solid white;
    background-image: url("https://static.vecteezy.com/system/resources/thumbnails/001/616/826/original/texture-of-focused-bubbles-in-foreground-and-blurred-bubbles-in-dark-background-in-4k-free-video.jpg");
    background-repeat: no-repeat;
    background-position: center;
    opacity: .9; 
    height: 43.75rem;
}


.dogcontainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.container-dogs {
    text-align: center;
    font-family: "Noto serif";
    width: 18.75rem; 
    height: 25rem; 
    padding: 0.4375rem;
    opacity: .85;
}

.container-dogs img {
    width: 20rem;
    height: 18.75rem;
    padding: 0.9375rem;
}

@media only screen and (max-width: 1200px) {
    .container-dogs {
        max-width: 10.75rem; 
        max-height: 20rem; 
    }

    .container-dogs img {
        max-width: 10rem;
        max-height: 8.75rem;
    }
}

/*Footer*/

footer {
    border-top: 1px solid white;
    text-align: center;
    font-family: Roboto;
    padding: 10px 0;
}

footer img {
    width: 40px;
    height: 40px;
}

Cheers!

Hello! Here is my code for the Company Home Page Challenge. Thanks in advance for taking a look at it!

Black Thumb Nursery - Code Github

Also, I cannot figure out how to share the result through github (if anyone can help me, I’d really appreciate it)… so here is the result and code via Codepen:
Black Thumb Nursery Company Landing Page

Excellent work. Looks professional.

I struggled hardcore with this, still need to get my process right and fine tune my code, as it’s bit of a mess but I have two issues I can’t seem to figure out so any insight or advice would be deeply appreciated!

  1. in the section - titled ‘photos’ lol - with the three photos, I was trying to have the images fill the containers completely, so that they’re displayed like three square images…no idea how to make it work other than cropping the images to all be squares but I’m sure there has to be another way to achieve this.

  2. in the section - titled endbanner, that is currently all black - the background image will just NOT show up…i have no clue what else to try.

kg coffee :coffee:
git hub repo

I had a lot of fun.

Here is my creation, please rate:
https://basmong.github.io/CompanyMainPage/

I want to say that it’s nicer when you do it yourself from the very beginning, and for example you don’t need to adjust to the dimensions in the designer’s layout.