Feedback wanted | Code Challenge: Company Main Page

Hi there!

I just finished this project from my skill path. I actually had so much fun working on my own page, and I’m gonna own that fact!
The idea was partly done by ChatGPT, and helped me a little bit with the heading placement. Jakob Owens card gets bigger against the other two people when I shrink the browser, didn’t know what to do and it didn’t bother me that much so I just left it.

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="file:///Users/lohna/Desktop/GreenLeaf%20Tech/images/logo.png">
    <title>GreenLeaf Tech | Innovating for a Greener Tomorrow</title>
</head>
<body>
<header>
<div class="logo">
    <img src="./images/logo.png" title="Logo of GreenLeaf Tech">
  <h1>GreenLeaf Tech</h1>
</div>
<nav>
    <ul>
        <li><a href="#mission">Mission</a></li>
        <li><a href="#products">Products</a></li>
        <li><a href="#team">Our Team</a></li>
    </ul>
</nav>
</header>
<!-- Mission Statement -->
<div id="mission">
    <div class="container">
        <h2>Our Mission</h2>
        <p>At GreenLeaf Tech, we are committed to creating innovative, sustainable technology that enriches lives and protects our planet.</p>
    </div>
</div>
<!-- Products -->
<div id="products">
    <div class="container">
        <h2>Our Products</h2>
        <hr>
        <div class="product-list">
            <div class="product-card">
                <img src="./images/Eco=Charger.png" alt="An Image of Eco-Charger, our most powerful phone charger">
                <h3>Eco-Charger</h3>
                <hr>
                <p>A solar-powered phone charger.</p>
            </div>
                <div class="product-card">
                <img src="./images/GreenPC.png" alt="An Image of GreenPC, an energy-efficient personal computer">
                <h3>GreenPC</h3>
                <hr>
                <p>The Eco-Friendliest PC on the market.</p>
            </div>
    
        </div>
    </div>
</div>

<!-- Employees -->
<div id="team">
    <div class="container">
        <h2>Meet Our Team</h2>
        <hr>
        <div class="employee-list">
            <div class="employee-card">
                <img src="./images/john-doe.jpg" alt="A portrait of John Doe">
                <h3>John Doe</h3>
                <hr>
                <p class="position">CEO</p>
                <p>Loves hiking and believes in sustainable living</p>
            </div>
            <div class="employee-card">
                <img src="./images/jane-smith.jpg" alt="A portrait of Jane Smith">
                <h3>Jane Smith</h3>
                <hr>
                <p class="position">Lead Engineer</p>
                <p>Passionate about green technologies</p>
            </div>
            <div class="employee-card">
                <img src="./images/jakob-owens.jpg" alt="A portrait of Jakob Owens">
                <h3>Jakob Owens</h3>
                <hr>
                <p class="position">Lead Designer</p>
                <p> Has a cool beard</p>
            </div>
    
        </div>
    </div>
</div>
<footer>
    <p>© 2023 Greenleaf Tech Inc.</p>
</footer>
</body>
</html>
@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 400, 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/chakrapetch/v11/cIf6MapbsEk7TDLdtEz1BwkWn6pgar3I1A.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 400, 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/jost/v14/92zatBhPNqw73oTd4jQmfxI.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

html {
    font-size: 16px;
}

body {
    font-family: "Jost", Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
  }
  h1, h2, h3 {
    font-family: "Chakra Petch", Helvetica, sans-serif;
    font-weight: 700;
  }
  .container {
    padding: 20px;
  }
 .product-card, .employee-card {
    border-radius: 8px;
  }
  
  /* Header */
  header {
    position: fixed;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #09B523;
    color: #FFFFFF;
    padding: 0px;
    width: 100%;
    z-index: 100;
    top: 0;
    text-stroke: 500px #000000
  }

  header .logo {
    display: flex;
    align-items: center;
    margin-left: 25px;
  }

header .logo img {
    width: 40px;
    height: 50px;
    margin-right: 5px;
}
header nav {
    margin-left: auto;
    margin-right: 25px;
}
header nav ul {
    display: flex;
    list-style-type: none;
    justify-self: flex-end;
}

nav ul li {
    margin-left: 10px;
}

nav ul li a {
    color: #FFFFFF;
    text-decoration: none;
    padding: 5px;
    border-radius: 8px;
}

nav ul li a:hover {
    color: #FFFFFF;
    background-color:#016952;
}

nav ul li a:visited {
    color: #FFFFFF;
}

nav ul li a:hover:visited {
    color: #FFFFFF;
    background-color: #016952;
}

nav ul li a:active {
    color: goldenrod;
    background-color: rgb(43, 43, 43);
}

nav ul li a:active:visited {
    color: goldenrod;
    background-color: rgb(43, 43, 43);
}

/* Mission */

#mission {
    position: relative;
    background-image: url(./images/mission-background.jpg);
    background-position: bottom;
    margin-top: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff;
    height: 500px;
}

#mission .container h2 {
    font-size: 55px;
}

/* Products & Team*/
#products {
    margin-top: 70px;
}

#team {
    margin-bottom: 100px;
}

#products .container h2, #team .container h2 {
    font-size: 40px;
    margin-bottom: 10px;
}

hr {
    margin-bottom: 70px;
}

  .product-list, .employee-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .product-card, .employee-card {
    flex: 1;
    flex-shrink: 1;
    flex-grow: 1;
    max-width: 400px;
    min-width: 200px;
    margin: 15px;
    padding: 20px;
    border: 1px solid #7D7D7D;
    background-color: #00A878;
    color: #FFFFFF;
  }

  .product-card img,  .employee-card img {
    width: 100%;
    border-radius: 100%;

  }

  .employee-card img {
    border: 2px solid #ffffff
  }

  .product-card hr,  .employee-card hr {
    margin-bottom: 0;
    color: #FFFFFF;
  }

  .employee-card .position {
    font-weight: 700;
  }

  /* Footer */

  footer {
    background-color: rgb(43, 43, 43);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 20px;
  }```
![Eco=Charger|500x500](upload://ex5CRJ5hUE5pZEBWu7Ds8jaanFY.jpeg)
![GreenPC|500x500](upload://8wZEdNjj76i3GBTsVwQ0g4TV6PN.jpeg)
![jakob-owens|500x500](upload://g1fzkY4sUbUYTPXSiOYMN77Seq7.jpeg)
![logo|357x500](upload://o6eGqVbpnYXvclWHkbPZwKWuddN.png)
![mission-background|667x500](upload://ukP1VAbjPpZAbmcRsJAcyooa4hF.jpeg)
[quote="samuraiykb, post:1, topic:775846, full:true"]
Hi there!

I just finished this project from my skill path. I actually had so much fun working on my own page, and I'm gonna own that fact!
The idea was partly done by ChatGPT, and helped me a little bit with the heading placement. Jakob Owens card gets bigger against the other two people when I shrink the browser, didn't know what to do and it didn't bother me that much so I just left it.

!DOCTYPE html>

GreenLeaf Tech | Innovating for a Greener Tomorrow

GreenLeaf Tech

Our Mission

At GreenLeaf Tech, we are committed to creating innovative, sustainable technology that enriches lives and protects our planet.

Our Products


An Image of Eco-Charger, our most powerful phone charger

Eco-Charger


A solar-powered phone charger.

An Image of GreenPC, an energy-efficient personal computer

GreenPC


The Eco-Friendliest PC on the market.

    </div>
</div>

Meet Our Team


A portrait of John Doe

John Doe


CEO

Loves hiking and believes in sustainable living

A portrait of Jane Smith

Jane Smith


Lead Engineer

Passionate about green technologies

A portrait of Jakob Owens

Jakob Owens


Lead Designer

Has a cool beard

    </div>
</div>

© 2023 Greenleaf Tech Inc.

``` ``` @font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 400, 700; font-display: swap; src: url(https://fonts.gstatic.com/s/chakrapetch/v11/cIf6MapbsEk7TDLdtEz1BwkWn6pgar3I1A.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
font-family: ‘Jost’;
font-style: normal;
font-weight: 400, 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/jost/v14/92zatBhPNqw73oTd4jQmfxI.woff2) format(‘woff2’);
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
font-size: 16px;
}

body {
font-family: “Jost”, Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
h1, h2, h3 {
font-family: “Chakra Petch”, Helvetica, sans-serif;
font-weight: 700;
}
.container {
padding: 20px;
}
.product-card, .employee-card {
border-radius: 8px;
}

/* Header */
header {
position: fixed;
display: flex;
justify-content: flex-start;
align-items: center;
background-color: #09B523;
color: #FFFFFF;
padding: 0px;
width: 100%;
z-index: 100;
top: 0;
text-stroke: 500px #000000
}

header .logo {
display: flex;
align-items: center;
margin-left: 25px;
}

header .logo img {
width: 40px;
height: 50px;
margin-right: 5px;
}
header nav {
margin-left: auto;
margin-right: 25px;
}
header nav ul {
display: flex;
list-style-type: none;
justify-self: flex-end;
}

nav ul li {
margin-left: 10px;
}

nav ul li a {
color: #FFFFFF;
text-decoration: none;
padding: 5px;
border-radius: 8px;
}

nav ul li a:hover {
color: #FFFFFF;
background-color:#016952;
}

nav ul li a:visited {
color: #FFFFFF;
}

nav ul li a:hover:visited {
color: #FFFFFF;
background-color: #016952;
}

nav ul li a:active {
color: goldenrod;
background-color: rgb(43, 43, 43);
}

nav ul li a:active:visited {
color: goldenrod;
background-color: rgb(43, 43, 43);
}

/* Mission */

#mission {
position: relative;
background-image: url(./images/mission-background.jpg);
background-position: bottom;
margin-top: 75px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #ffffff;
height: 500px;
}

#mission .container h2 {
font-size: 55px;
}

/* Products & Team*/
#products {
margin-top: 70px;
}

#team {
margin-bottom: 100px;
}

#products .container h2, #team .container h2 {
font-size: 40px;
margin-bottom: 10px;
}

hr {
margin-bottom: 70px;
}

.product-list, .employee-list {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.product-card, .employee-card {
flex: 1;
flex-shrink: 1;
flex-grow: 1;
max-width: 400px;
min-width: 200px;
margin: 15px;
padding: 20px;
border: 1px solid #7D7D7D;
background-color: #00A878;
color: #FFFFFF;
}

.product-card img, .employee-card img {
width: 100%;
border-radius: 100%;

}

.employee-card img {
border: 2px solid #ffffff
}

.product-card hr, .employee-card hr {
margin-bottom: 0;
color: #FFFFFF;
}

.employee-card .position {
font-weight: 700;
}

/* Footer */

footer {
background-color: rgb(43, 43, 43);
color: #FFFFFF;
display: flex;
align-items: center;
padding: 20px;
}```

Can you do me a favor and post your code on Github OR in a Codecademy workspace. I appreciate that you posted your HTML and CSS document on in 2 seperate code blocks but it would help to see it visually. Posting the raw html/css file underneith both code blocks just created a huge visual mess and didn’t add any value to the post. Both Github pages and Codecademy workspaces would showcase it visually.

Thank you!

Sure thing :+1:

https://samuraiykb.github.io/greenleaf.github.io/

Thank you so much!

In terms of accessibility, “At GreenLeaf Tech, we are committed to creating innovative, sustainable technology that enriches lives and protects our planet.” against the light green background makes it a little hard to read.

My suggestion would be to either add a very light almost invisible background to that text or perhaps adding a text-stroke CSS property to that area with a darker outline that will make it pop a little more.

Great work though aside from that small suggestion. Keep up the great work!

1 Like