Company Home Page

Hello People.
I’m finishing my project but i really need help to evaluate and to know where i can improve.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Nature Photography</title>
    <link rel="stylesheet" href="./resources/index.css" />
    <link rel="shortcut-icon" href="favicon.ico" type="/image-x-icon" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <!--nav-->

    <header class="navbar">
      <h1>Nature & Architecture</h1>
      <nav>
        <ul>
          <li><a href="#">Mission</a></li>
          <li><a href="#">Nature</a></li>
          <li><a href="#">Architecture</a></li>
        </ul>
      </nav>
    </header>

    <!--first-section-->

    <main>
      <section class="first-section section">
        <div class="container">
          <h2>The perfect mixing between Architecture and nature</h2>
          <h4>
            Our concept it's to educate people to enfatize modern respecting our
            nature
          </h4>
        </div>
      </section>

      <!--second-section-->

      <section class="second-section">
        <div class="container-main">
          <h2>Our concept of beautiful Architecture</h2>
          <h4>
            Impacting diverse sectors of architecture to better the human
            experience and the world we inhabit
          </h4>
        </div>
        <div class="image-flex image">
          <div class="imaging">
            <img
              src="./resources/images/rudy-dong-yAf7VPPUhwU-unsplash.jpg"
              alt="rudy-dong"
            />
            <span>China</span>
          </div>
          <div class="imaging">
            <img
              src="./resources/images/adam-borkowski-tg6mapSIO8Q-unsplash.jpg"
              alt="adam-borkowsky"
            />
            <span>Skyscrapers</span>
          </div>
          <div class="imaging">
            <img
              src="./resources/images/adam-borkowski-ZHGcut3YFlA-unsplash.jpg"
              alt="borkowsky"
            />
            <span>City</span>
          </div>
          <div class="imaging">
            <img
              src="./resources/images/reed-geiger-00fXh4P3SVU-unsplash.jpg"
              alt="reed-geiger"
            />
            <span>Waterfall</span>
          </div>
          <div class="imaging">
            <img
              src="./resources/images/cash-macanaya-sK7M8FYIzWU-unsplash.jpg"
              alt="cash-macanaya"
            />
            <span>Scare</span>
          </div>
        </div>
      </section>

      <!--people team-->

      <section class="third-section">
        <div class="people">
          <h2>Our Team</h2>
        </div>
        <div class="people-image-flex image">
          <div class="images bobby">
            <img
              src="./resources/images/johan-mouchet-1qFmB3sZPSo-unsplash.jpg"
              alt="people"
            />
            <h3>Bobby Myrtle</h3>
            <p>Mountain Lover</p>
          </div>
          <div class="images jerry">
            <img
              src="./resources/images/johan-mouchet-uCJLGn5kJkE-unsplash.jpg"
              alt="people"
            />
            <h3>Jerry Pencil</h3>
            <p>Our nature and City Ambassador</p>
          </div>
          <div class="images lisa">
            <img
              src="./resources/images/iam_os-I-MYe9bdopM-unsplash.jpg"
              alt="people"
            />
            <h3>Lisa West</h3>
            <p>Architect inside nature</p>
          </div>
        </div>
      </section>
    </main>
    <footer>
      <h2>Nature & Architecture</h2>
      <h3>introduction@Nature&Architecture.investors</h3>
      <h3>555-867-5309</h3>
      <h3>copyright VC Enterprises 2020</h3>
    </footer>
  </body>
</html>


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
font-size: 16px;
}

body {
background-color: #fafaec;
color: hsla(30, 79%, 7%, 0.884);
}


h1 {
    font-size: 2rem;
    text-align: center;
    font-family: 'Permanent Marker';
    text-transform: uppercase;
    font-weight: 700;
    
}


h2, h3, h4 {
    text-align: center;
    font-size: 1.2rem;
    font-family: 'Roboto';
    text-transform: uppercase;
    font-weight: 700;
}

span {
    font-size:1.2rem;
    font-weight: bold;
    text-transform: uppercase;
}

p {
    text-align: center;
    color: hsla(30, 79%, 7%, 0.884);
}

img {
     height: 150px; 
     width: 200px;
     border-radius: 3px;
}

/*Navbar*/

nav ul {
    display: flex;
    justify-content: center;
    padding: 10px;
    font-size: 1.2em;
}

nav ul li {
    width: 120px;
    list-style: none;
    margin: 15px auto;
}

a {
    color:hsla(30, 79%, 7%, 0.884);
    text-decoration: none;
    font-weight: bold;
    font-style: oblique;
    font-size: 1.5rem;
}

a:hover {
    color: blue;
    text-decoration: underline;
}

/*First-Section*/


.first-section {
    background-image: url('./images/misael-moreno-Ev85w3dgfmc-unsplash.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 1200px;
    height: 400px; 
    display: flex;
    flex-direction: column;
    justify-content: center;

}



.container {
    background-color: #fafaec;
    width: 100%;
    padding: 5px;
}

h2 h4 .container {
    font-size: 10px;
}

/*Second-section*/

.second-section {
    padding: 10px;
}

.container-main {
    padding: 20px;
}

.image-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 1100px;
    padding: 20px;
}


.imaging {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}


/*thirdsection*/


.third-section {
    background-image: url('./images/zhan-zhang-w9cqxT1d6n8-unsplash.jpg');
}


.people-image-flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
    align-content: flex-end;
    height: 400px;
}

.people h2 {
    margin-bottom: 15px;
}

.people-image-flex h3  {
    text-align: center;
    font-weight: 900;
    font-size: 1.4rem;
    color: #ff0;
    text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
    padding: 5px;
}

.people-image-flex p  {
    text-align: center;
    font-weight: 800;
    font-size: 1.1rem;
    padding: 5px;
    color: #ff0;
    text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
}


.images {
display: block;
}

.jerry {
    justify-items: center;
}
/*Footer*/

footer h2 {
    padding: 20px;
}

footer h3 {
    padding: 20px;
}`Preformatted text`

Thanks for any suggestion

1 Like