css_고친것들

<!-- Home  -->

  <!-- section class="home" 붙여줌 -->

  <section id="home">

    <div class="home__container">

      <img src="imgs/profile.png" alt="Jay's profile photo" class="home__avatar" />

      <h1 class="home__title">Hello, <br />I'm Dream Coder</h1>

      <h2 class="home__description">

        One moer step for front-end developers

      </h2>

      <button class="home__contact">Contact Me</button>

    </div>

  </section>

 

홈 부분에서 <section class="home">를 <section id="home"> 고치니까 올바르게 나옴

 

 

 

 

<!-- Testimonials -->

  <section id="testimonials" class="section">

    <div class="section__container">

      <h1>Testimonials</h1>

      <h3>See what they say about me</h3>

      <div class="testimonials">

        <div class="testimonial">

          <img src="imgs/testimonial/people.png" alt="People" class="testimonial__avatar" />

          <div class="testimonial__speech-bubble">

            <p>

              He is a passionate and very responsible person.

            </p>

            <p class="name"><a href="">Jay</a> /Samsung</p>

          </div>

        </div>

        <div class="testimonial">

          <div class="testimonial__speech-bubble">

            <p>

              He is a passionate and very responsible person.

            </p>

            <p class="name"><a href="">Jay</a> /Samsung</p>

          </div>

          <img src="imgs/testimonial/people.png" alt="People" class="testimonial__avatar" />

        </div>

      </div>

    </div>

  </section>

 

He is a passionate and very responsible person.

            </p>

            <p class="name"><a href="">Jay</a> /Samsung</p>

          </div>

        부분을 

 

 

He is a passionate and very responsible person.

            </p>

            <p class="name"><a href="">Jay</a> /Samsung</p>

          </div>

        </div>

</div> 밑에다가 한개 더 붙이니까 올바르게 나옴

 

 

 

---navbar--- 부분

/* For below 768px screen width */

@media screen and (max-width: 768px) {

  .navbar__toggle-btn {

    display: block;

  }

 

  #navbar {

    flex-direction: column;

    align-items: flex-start;

  }

 

  .navbar_menu {

    flex-direction: column;

    text-align: center;

    width: 100%;

    display: none;

  }

 

  .about__majors {

    flex-direction: column;

  }

 

  .major {

    margin-bottom: 38px;

  }

 

  .skillset {

    flex-direction: column;

  }

 

  .project {

    flex-grow: 1;

  }

 

  .testimonial__avatar {

    width: 80px;

    height: 80px;

  }

}

 

 

 

---navbar---부분

@media screen and (min-width: 768px) {

  .navbar__toggle-btn {

    display: block;

  } 

부분을

 

@media screen and (max-width: 768px) {

  .navbar__toggle-btn {

    display: block;

  }

min을 max로 바꾸니까 올바르게 나옴

 

 

 

 

 

 

 

 

----About----부분

<div class="about__jobs">

      <div class="job">

        <img src="imgs/schools/logo-pnu.png" alt="Busan national University" class="job__logo" />

        <div class="job__description">

          <p class="job__name">

            After graduating from the Department of Molecular Biology at

            Pusan ​​National University,

            I am studying developer

          </p>

          <p class="job__period">

            2014 March - Until 2020 August

          </p>

        </div>

      </div>

      <!-- <div class="about__jobs"></div> -->

      <div class="job">

        <img src="imgs/schools/logo-pnu.png" alt="Busan national University" class="job__logo" />

        <div class="job__description">

          <p class="job__name">

            After graduating from the Department of Molecular Biology at

            Pusan ​​National University,

            I am studying developer

          </p>

          <p class="job__period">

            2014 March - Until 2020 August

          </p>

        </div>

      </div>

분홍색부분 빼고 마지막 <p class="school__period">을 <p class="job__period">로 고치니까 

 

2014 March - Until 2020 August 진해졌던게

=> 2014 March - Until 2020 August 연하게 나옴