Summary - Githubissues

The website came out jumbled up. I could see there was a lot of effort to get it working properly. I would suggest getting real time chat support to smooth out the layout. Here is the correct code for the web project in the mean time;

<!DOCTYPE html>
<html>
<head>
  <title>Colmar Academy</title>
  <link rel="icon" href="favicon.png" type="image/x-icon">
  <link rel="stylesheet" type="text/css" href="resources/css/reset.css">
  <link rel="stylesheet" type="text/css" href="resources/css/style.css">
</head>
<body>

  <!-- Header -->
  <header>
    <div class="desktop">
      <div class="logo">
        <img src="./resources/images/ic-logo.svg"">
        <span><strong>COLMAR</strong>ACADEMY</span>
      </div>
      <nav>
        <ul>
          <li><a href="#">On campus</a></li>
          <li><a href="#">Online</a></li>
          <li><a href="#">Sign in</a></li>
        </ul>
      </nav>
    </div>
    <div class="mobile">
      <ul>
        <li><img src="resources/images/ic-logo.svg"></li>
        <li><img src="resources/images/ic-on-campus.svg"></li>
        <li><img src="resources/images/ic-online.svg"></li>
        <li><img src="resources/images/ic-login.svg"></li>
      </ul>
    </div>
  </header>

  <!-- Banner -->
  <div id="banner" class="flex-content">
    <div class="media-container main-content">
      <img src="resources/images/banner.jpg">
    </div>
    <div class="supporting-content">
      <h3>Learn something new every day</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <a href="#" class="button">Start here</a>
    </div>
  </div>

  <!-- Information -->
  <div id="information-section" class="flex-content">
    <div class="main-content">
      <div class="media-container">
        <img src="resources/images/information-main.jpg">
      </div>
      <h3>It doesn't hurt to keep practicing</h3>
      <p>
        "I told my manager I wanted to learn design and shared ways it could be helpful in my current role. He responded right away, said, 'This is awesome,' and my company paid for the course."
      </p>
    </div>
    <div class="supporting-content">
      <div class="content-image-box">
        <div class="media-container">
          <img class="desktop" src="resources/images/information-orientation.jpg">
          <img class="mobile" src="resources/images/information-orientation-mobile.jpg">
        </div>
        <div class="text-content">
          <h4>Orientation date</h4>
          <p>Tue 10/11 & Wed 10/12: 8am - 3pm</p>
          <a href="#">Read more</a>
        </div>
      </div>
      <div class="content-image-box">
        <div class="media-container">
          <img class="desktop" src="resources/images/information-campus.jpg">
          <img class="mobile" src="resources/images/information-campus-mobile.jpg">
        </div>
        <div class="text-content">
          <h4>Our campus</h4>
          <p>Find which campus is close by you</p>
          <a href="#">Read more</a>
        </div>
      </div>
      <div class="content-image-box">
        <div class="media-container">
          <img class="desktop" src="resources/images/information-guest-lecture.jpg">
          <img class="mobile" src="resources/images/information-guest-lecture-mobile.jpg">
        </div>
        <div class="text-content">
          <h4>Our guest lecture</h4>
          <p>Join a keynote with Oliver Sack about music in medical treatment</p>
          <a href="#">Read more</a>
        </div>
      </div>
    </div>
  </div>

  <!-- Courses -->
  <div id="courses-section">
    <h2>Start learning</h2>
    <div class="courses-row">
      <a href="#" class="course">
        <div class="media-container">
          <img src="./Resources/capstone_colmar_assets/capstone_colmar_assets/images/course-software.jpg">
        </div>
        <div class="text-content">
          <h3>Software engineering</h3>
          <h4>COURSES</h4>
          <p>Web Development, Mobile Development, iOT, APIs</p>
        </div>
      </a>
      <a href="#" class="course">
        <div class="media-container">
          <img src="resources/images/course-computer-art.jpg">
        </div>
        <div class="text-content">
          <h3>Computer art</h3>
          <h4>COURSES</h4>
          <p>Imaging & Design, Web Design, Motion Graphics & Visual Effects, Computer Animation</p>
        </div>
      </a>
      <a href="#" class="course">
        <div class="media-container">
          <img src="resources/images/course-design.jpg">
        </div>
        <div class="text-content">
          <h3>Design</h3>
          <h4>COURSES</h4>
          <p>User Experience Design, User Research, Visual Design</p>
        </div>
      </a>
    </div>
    <div class="courses-row">
      <a href="#" class="course">
        <div class="media-container">
          <img src="resources/images/course-data.jpg">
        </div>
        <div class="text-content">
          <h3>Data</h3>
          <h4>COURSES</h4>
          <p>Data Science, Big Data, SQL, Data Visualization</p>
        </div>
      </a>
      <a href="#" class="course">
        <div class="media-container">
          <img src="resources/images/course-business.jpg">
        </div>
        <div class="text-content">
          <h3>Business</h3>
          <h4>COURSES</h4>
          <p>Product Development, Business Development, Startup</p>
        </div>
      </a>
      <a href="#" class="course">
        <div class="media-container">
          <img src="resources/images/course-marketing.jpg">
        </div>
        <div class="text-content">
          <h3>Marketing</h3>
          <h4>COURSES</h4>
          <p>Analytics, Content Marketing, Mobile Marketing</p>
        </div>
      </a>
    </div>
  </div>

  <!-- Thesis -->
  <div id="thesis-section">
    <h2>Thesis exhibits</h2>
    <div class="flex-content">
      <div class="main-content">
        <div class="media-container">
          <video src="resources/videos/thesis.mp4" controls>
            Video could not be loaded.
          </video>
        </div>
        <h3>Reimagine urban transportation</h3>
        <p>
          "Curabitur vitae libero in ipsum portitor consequat. Aliquam et commodo lectus, nec consequat neque. Sed non accumsan urna. Phasellus sed consequat ex. Etiam eget magna laoreet, effcitur dolor consequat, tristque ligula."
        </p>
      </div>
      <div class="supporting-content">
        <div class="content-image-box">
          <div class="media-container">
            <img src="resources/images/thesis-fisma.jpg">
          </div>
          <div class="text-content">
            <h4>Fisma: Design and Prototype</h4>
            <p>Designer showcase of new prototype product</p>
          </div>
        </div>
        <div class="content-image-box">
          <div class="media-container">
            <img src="resources/images/thesis-now-and-then.jpg">
          </div>
          <div class="text-content">
            <h4>Now and then</h4>
            <p>Research study about New York</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer>
    <span class="copyright">© 2016 Colmar Academy. All rights reserved</span>
    <a href="#">Terms</a>
    <a href="#">Privacy</a>
  </footer>
</body>
</html>

and

/* Universal Styles */

html {
  font-size: 16px;
}

a {
  text-decoration: none;
  color: inherit;
}

strong {
  font-weight: bold;
}

h2 {
  padding-bottom: 1rem;
  text-align: center;
  font-weight: bold;
  font-size: 2rem;
}

h3 {
  font-weight: bold;
}

.media-container {
  overflow: hidden;
}

.media-container img,
.media-container video {
  display: block;
  width: 100%;
}

/* Universal Component - Flex Content Container */

.flex-content {
  display: flex;
  padding: 0 1.5rem;
}

.flex-content .main-content {
  width: 60%;
  padding: 2rem 1.5rem 2rem 0;
  border-right: 1px solid rgb(245, 245, 245);
}

.flex-content .supporting-content {
  display: flex;
  flex-direction: column;
  width: 40%;
  padding: 2rem 0;
}

/* Universal Component - Content Image Box */

.content-image-box {
  display: flex;
  padding: 1rem 0 1rem 1rem;
  border-bottom: 1px solid rgb(245, 245, 245);
}

.content-image-box:first-child {
  padding-top: 0;
}

.content-image-box:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.content-image-box .media-container {
  width: 35%;
}

.content-image-box .text-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 65%;
  padding: 0 0.75rem 0 1rem;
}

.content-image-box h4 {
  padding-bottom: .5rem;
  font-size: 1.25rem;
  font-weight: bold;
}

.content-image-box p {
  padding-bottom: .5rem;
}

.content-image-box .mobile {
  display: none;
}

@media only screen and (max-width: 895px) {
  .content-image-box .desktop {
    display: none;
  }

  .content-image-box .mobile {
    display: block;
  }

  .content-image-box {
    padding-left: 0;
    border-bottom: none;
  }

  .content-image-box .media-container {
    width: 100%;
  }
}

/* Header */

header {
  padding: 1rem 1.5rem;
}

header .desktop {
  display: flex;
  align-items: center;
}

header .logo {
  flex-grow: 1;
  display: flex;
  align-items: center;
}

header .logo img {
  margin-right: .5rem;
}

header li {
  display: inline;
  padding-right: 1rem;
}

header li:last-child {
  padding-right: 0;
}

header .mobile {
  display: none;
}

@media only screen and (max-width: 550px) {
  header .desktop {
    display: none;
  }

  header .mobile {
    display: block;
    width: 100%;
  }

  header .mobile ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .logo {
    justify-content: center;
  }

  .logo span {
    display: none;
  }

  nav {
    display: none;
  }
}

/* Banner */

#banner {
  background-color: rgb(219, 219, 219);
}

#banner .main-content {
  border-right: none;
}

#banner .supporting-content {
  justify-content: center;
}

#banner h3 {
  padding-bottom: 2rem;
  font-size: 2rem;
}

#banner p {
  padding-bottom: 1.5rem;
}

#banner a {
  padding: .5rem 0;
  background-color: rgb(155, 155, 155);
  text-align: center;
  color: white;
}

@media only screen and (max-width: 770px) {
  #banner {
    flex-direction: column;
    padding: 0;
  }

  #banner .main-content {
    width: auto;
    padding: 0;
  }

  #banner .supporting-content {
    width: auto;
    padding: 2rem 1rem;
  }
}

/* Information */

#information-section .main-content h3 {
  padding-top: 2rem;
  padding-bottom: 1.5rem;
  font-size: 1.5rem;
}

#information-section .supporting-content {
  justify-content: space-between;
}

@media only screen and (max-width: 895px) {
  #information-section.flex-content {
    padding: 0 1rem;
  }

  #information-section .main-content {
    display: none;
  }

  #information-section .supporting-content {
    width: 100%;
  }

  #information-section .supporting-content .content-image-box {
    flex-direction: column;
  }

  #information-section .text-content {
    max-width: 14rem;
    padding: 1rem;
  }
}

/* Courses */

#courses-section {
  padding: 2rem 3.5rem;
  background-color: rgb(245, 245, 245);
}

.courses-row {
  display: flex;
}

.course {
  flex-basis: 33%;
  margin: 1rem;
  background-color: white;
}

.course .text-content {
  padding: 1rem 1rem 1.5rem 1rem;
}

.course h3,
.course h4 {
  padding-bottom: .5rem;
}

@media only screen and (max-width: 770px) {
  #courses-section {
    padding: 2rem 1rem;
    background-color: inherit;
  }

  .courses-row {
    flex-direction: column;
  }

  .course {
    margin: .25rem 0;
  }

  .course .text-content {
    background-color: rgb(216, 216, 216);
  }

  .course h3 {
    padding-bottom: 0;
  }

  .course .media-container,
  .course h4,
  .course p {
    display: none;
  }
}

/* Thesis */

#thesis-section {
  padding: 2rem 0;
}

#thesis-section .main-content {
  padding-bottom: 0;
}

#thesis-section h3 {
  padding: .5rem 0;
}

@media only screen and (max-width: 895px) {
  #thesis-section .main-content h3,
  #thesis-section .main-content p,
  #thesis-section .supporting-content {
    display: none;
  }

  #thesis-section {
    padding-bottom: 1.5rem;
  }

  #thesis-section .flex-content {
    padding: 0;
  }

  #thesis-section .main-content {
    width: 100%;
    padding: 0;
    margin-right: 0;
  }
}

/* Footer */

footer {
  display: flex;
  padding: 1rem 1.5rem;
  font-size: .75rem;
  color: rgb(112, 112, 112);
}

footer .copyright {
  flex-grow: 1;
}

footer a {
  margin-right: .75rem;
}

footer a:last-child {
  margin-right: 0;
}

@media only screen and (max-width: 600px) {
  footer a {
    display: none;
  }
}

retozon / colmar

Summary #2