Flexbox with my fictional company home page

Demo

For responsive mobile first design:

• use the media query for mobile portrait

@media only screen and (max-width: 480px) and (min-width: 320px), (orientation: portrait)
.page-description, .staff-intro {
    font-size: 1.8rem;
    line-height: 2rem;
}

• Flexbox for my photos so it fits well in different device sizes

.gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

• Use of flexbox flex-direction: column, so that name, photo, intro are lined up vertically.

  <div class="col">
    <h2 class="team-name">Ashley Sullivan</h2>
    <img src="./img/pro-asian-woman.jpg" alt="smile asian lady look up">
    <p class="staff-intro">Ashley has a MD/PhD and is creative director for anything user related.</p>
  </div>

.col {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
}

Comments

[aj9775]

Hi, can you please say how to publish my demo website using GitHub? I have already created a repository in GitHub and added all my codes on it.