[프로젝트1] 팀 소개 페이지(3)

오늘은 새벽 일찍 일어나서 전날 조율하지 못한 코드와 희찬님 코드를 조금 수정했다. 그리고 볼 일이 있어서 나갔다왔다가 수업시간에 늦지 않게 왔다.

영호님의 코드를 보고 코드 리뷰를 했고, 전부 합쳐서 웹상에 표현 해보았다.

놀라운 점은 맥과 윈도우가 조금 안맞는 부분이 있었다. 이런 현상은 처음 겪었기에, 당황스러웠으나, 팀원들의 조율과 매니저님의 도움과 2조의 경열님 도움으로 어느정도 해결이 된 것 같다.

중간 중간에 안되는 부분이 있어서 구글링도 해보고, 팀원들과 같이 이야기도 했었다.
즐거웠다.

21시가 되어서도 마무리가 되지 않아서 스케쥴을 서로 맞춰보았는데 애매해서 인준님이랑 같이 남아서 하기로 했다.

[css]

@font-face {
  font-family: 'Pretendard-Regular';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

* {
  padding: 0;
  margin: 0;
  font-family: 'Pretendard-Regular';
}
a{color:inherit; text-decoration: none;}

.bg-success {
  background-color: #34c88a !important;
  font-size: 16px;
  position: absolute;
  z-index: 999999;
    width: 100%;
}

#main {
  width: 100%;
  height: 100vh;
  background: url('images/main_bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

#main::before {
  position: absolute;
  content: "";
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  background-color: rgba(52, 200, 138, 50%);
}

#main .main_box {
  position: absolute;
  color: #fff;
  left: 50%;
  transform: translate(-50%, 0);
  top: 305px;
}
#main h1{
  font-size: 8rem;
  font-weight: 700;
}

#main .main_img, #main .main_txt{
  text-align: center;
}

#main .main_txt{
  position: absolute;
  color: #fff;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 30px;
  bottom: 150px;
  width: 100%;
}

#main .scroll_icon {
  position:absolute;
  z-index:9999;
  margin:0 auto;
  text-align:center;
  width:100%;
}
#main .scroll_down {
   position: relative;
   animation-name: scroll_down;
   animation-duration: 3s;
   animation-iteration-count: infinite;
   font-weight: 500;
 }

 #main .scroll_icon a{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  display: block;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: 0.5s;}

 @keyframes scroll_down {
  0%   {top:0px;}
  50%  {top:20px;}
  100% {top:0px;}
}

#team_info{
 
  text-align: center;
  margin: 372px 0;
}
#team_info img{
  width: 440px;padding: 40px;
  border:5px solid #eee;
  border-radius: 70px;
  box-shadow: 0px 4px 20px #eee;
}

#team_info .main_tit{
  font-size:6.25rem;
  color:#34c88a;
  font-weight: 700;
}

#team_info .team_info_txt{
  font-size: 2.5rem;
  color:#9a9a9a;
  line-height: 47px;
}

@media all and (max-width:1200px){
  #main h1{
    transition: 0.5s;
    font-size: 6rem;

  }
  #team_info .team_info_txt{
    transition: 0.5s;
    font-size: 2rem;
    line-height: 2rem;
    font-weight: 500;
  }
}
#my_point{
  text-align: center;
  margin: 372px 0;
  font-weight: 700;
  background-color: skyblue;
}
#my_point h2{
  color:#9a9a9a;
  font-size: 6rem;
  font-weight: 700;
}
#my_point h2 span{
  color:#34c88a;
}
#my_point .point_txt{
  font-size:2.5rem;
  color: #9a9a9a;
  line-height: 47px;
  font-weight: 500;
}
#my_point .point_big_box{
  overflow: hidden;
  margin: 50px 0;
}
#my_point .point_box{
display: flex;
flex-wrap: wrap;
width: 250vw;
}
#my_point .point_box p{
  font-size:74px;
  background-color: #34c88a;
  color:#fff;
  border-radius: 78px;
  padding: 32px 53px;
  margin: 20px 30px; 
}
#my_point .point_box .box_gray{
  background-color: #eee;
}

#my_point .point_box p:first-child{
  border-top-left-radius: 0;
  border-bottom-left-radius:0;
  margin-left:0
}
#my_point .point_box p:last-child{
  border-top-right-radius: 0;
  border-bottom-right-radius:0;
  margin-right:0;
}

@keyframes flowToLeft {
  0% {
      left: 100%;
  }
  100% {
      left: -100%; /* 원하는 이동 거리로 조절할 수 있습니다. */
  }
}

@keyframes flowToLeft2 {
  0% {
    transform: translateX(100%);
}
100% {
    transform: translateX(-100%);
}
}

#my_point2{
  text-align: center;
  margin: 372px 0;
  overflow: hidden;
}
#my_point2 h2{
  color:#9a9a9a;
  font-size: 6rem;
}
#my_point2 h2 span{
  color:#34c88a;
}
#my_point2 .point_txt{
  font-size:2.5rem;
  color: #9a9a9a;
  line-height: 47px;
}
#my_point2 .point_big_box{

  margin: 50px 0;
  animation: flowToLeft2 10s linear infinite;
  position: relative;
}

#my_point2 .point_big_box:hover {
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  }

#my_point2 .point_box{
display: flex;
flex-wrap: wrap;
width: 250vw;
}
#my_point2 .point_box p{
  font-size:74px;
  background-color: #34c88a;
  color:#fff;
  border-radius: 78px;
  padding: 32px 53px;
  margin: 20px 10px;

}
#my_point2 .point_box .box_gray{
  background-color: #eee;}


  

  #team_member .marketing {
    text-align: center;
}

#team_member .my_title {
    letter-spacing: -.05rem;
    font-size: 50px;
    color: #34C88A;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    /*margin-top: 300px;*/
    /*height: 625px;*/
    /*margin-bottom: 30px;*/
    
}

#team_member .mybutton {
    display: inline-flex;
    padding: 20px 37px;
    gap: 10px;
    border-radius: 52px;
    border: 3px solid #34C88A;
    /*background-color: green;*/

    background-color: #ffffff;
    ;
    color: #34C88A;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: 55px
}

#team_member .my_name {
    color: #9A9A9A;
    font-size: 96px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;

}

#team_member .my_image {
    width: 485px;
    height: 628px;
    border-radius: 44px;
    background: linear-gradient(0deg, rgba(52, 200, 138, 0.20) 0%, rgba(52, 200, 138, 0.20) 100%), url(<path-to-image>), lightgray 50% / cover no-repeat;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    background-color: red;

}

#team_member .row {
    margin-bottom: 300px;

}

#team_member .team_member_box_right {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}

#team_member .team_member_box {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

#team_member .mybutton:hover {
    background-color: #34C88A;
    color: #fff;
}


/*영호님 코딩 부분*/
#team_promiss p.youngho{
  font-size: 128px;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 0px;
  color: #9A9A9A;
  font-weight: bold;
}

#team_promiss div.youngho {
  font-size: 128px;
  text-align: center;
  margin-bottom: 0px;
  color: #9A9A9A;
  font-weight: bold;
}

#team_promiss #num {
  color: #34C88A;
  font-size: 300px;
  vertical-align: -0.15em;
  margin: 0px 15px;
}

#team_promiss h2{
  font-size: 128px;
    text-align: center;
    margin-bottom: 46px;
    color: #9A9A9A;
    font-weight: bold;
}

#team_promiss #distance {
  margin-top: 0px;
  margin-bottom: 200px;
}
 /* .youngho{
  margin : 0 323px;
} */

#team_promiss h2 span {
  color: #34C88A;
}

#team_promiss #promiss {
  background-color: #34C88A;
  color: #FFFFFF;
  padding-top: 70px;
  padding-bottom: 70px;
  margin-bottom: 0px;
  font-size: 96px;
  line-height: 144px;
}

#team_promiss .team {
  margin: 0px 15px;
}

#team_promiss .left-width {
  position: absolute;
  width: 50px;
  height: 100px;
  left: 30.87px;
 /* top: 720.43px;*/

  background: #FFFFFF;
  border-radius: 50px;
  transform: rotate(90deg);
}

#team_promiss .left-length {
  position: absolute;
  width: 50px;
  height: 100px;
  left: 5px;
  top: 29px;

  background: #FFFFFF;
  border-radius: 50px;
  transform: matrix(1, 0, 0, -1, 0, 0);
}

#team_promiss .promiss-area {
  width: 100%;
 /* height: 850px;*/
  position: relative;
}

#team_promiss .right-width {
  position: absolute;
  width: 50px;
  height: 100px;
  right: 30.87px;
  /*top: 1056.43px;*/
  bottom: 0;

  background: #FFFFFF;
  border-radius: 50px;
  transform: rotate(90deg);
}

#team_promiss .right-length {
  position: absolute;
  width: 50px;
  height: 100px;
  right: 5px;
  /*top: 1029.87px;*/
  bottom:25px;

  background: #FFFFFF;
  border-radius: 50px;
  transform: matrix(1, 0, 0, -1, 0, 0);
}


#team_promiss .team_promiss_txt{
  margin: 375px 0;
}

/*인준님 코딩*/

#team_cheer{
  margin-bottom:529px;
  /*background-color: skyblue;*/
}
#team_cheer .mypostingbox {
  border-radius: 30px;
  background: #FFF;

  /* Drop Shadow */
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
  width: 1274px;
  margin: 20px auto 20px auto;
  /* border: 1px solid white; */
  padding: 20px;
  border-radius: 10px;
}

#team_cheer .mypostingbox>button {
  border-radius: 16px;
  background: var(--main, #34C88A);
  width: 100%;
  height: 102px;
  flex-shrink: 0;
  margin: auto;
  display: block;
  border: none;
  color: #FFF;
  text-align: center;
  font-family: Pretendard;
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  padding: 29px 531px 29px 531;
}

#team_cheer .formControl::placeholder {
  color: #A6A6A6;
}

#team_cheer .formControl {
  border: none;
  width: 100%;
  height: 102px;
  flex-shrink: 0;
  border-radius: 16px;
  background: #F9FAFF;
  color: #666;
  font-family: Pretendard;
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 29px 53px 29px 53px;
}

#team_cheer .mycards {
  width: 1274px;
 /* height: 490px;*/
  margin: 91px auto 0 auto;
  flex-shrink: 0;

}


#team_cheer .card-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: var(--main, #34C88A);
  text-align: center;
  font-family: Pretendard;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.15));
  /*padding-top: 256px;
  padding-bottom: 256px;
  padding-left:85px;
  padding-right:85px;*/
  width: 408px;
  height: 616px;
  border:none;
  background: url('../images/letter.png');
  background-size: 100%;
  background-repeat: no-repeat;
  overflow-y: auto;
}

#team_cheer h2{
  color: #34C88A;
text-align: center;
font-family: Pretendard;
font-size: 96px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-bottom:48px;
}



#team_cheer .team_cheer_box{
  position: relative;
}

#team_cheer .card{
  background-color: transparent !important;
  border:none;
  
}
#team_cheer .card-title{
 /* background-color: yellow;*/
    width: 300px;
    height: 400px;
    top: -55px;
    position: relative;
    overflow: auto;
    align-items: center;
    display: flex;

}

/*푸터*/
footer {
  margin-top: 340px;
  width: 100%;
  height: 464px;
  background-color: #34C88A;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

footer>span {
  /* position: relative;
  inset: 159px 554px 152px 554px; */
  color: #FFF;
  text-align: center;
  font-family: Pretendard;
  font-size: 128px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

[HTML]

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>새싹의 반란</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>

<body>
  <div id="wrap">
    <header id="header" class="d-flex justify-content-center py-3 bg-success" style="display: none !important;">
      <ul class="nav nav-pills">
        <li class="nav-item "><a href="#" class="nav-link text-white" aria-current="page">홈으로</a></li>
        <li class="nav-item"><a href="#" class="nav-link text-white">김희찬</a></li>
        <li class="nav-item"><a href="#" class="nav-link text-white">여인준</a></li>
        <li class="nav-item"><a href="#" class="nav-link text-white">이다원</a></li>
        <li class="nav-item"><a href="#" class="nav-link text-white">진영호</a></li>
      </ul>
    </header>
    <section id="main">
      <div class="main_box">
        <p class="main_img"><img src="images/Union.png">&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/Union_2.png"></p>
        <h1>새싹의 반란</h1>
      </div>

      <div class="main_txt">
        <div class="scroll_icon">
          <a href="#team_info"></a>
          <p class="scroll_down">아래로 스크롤 해주세요 :)</p>
          <p class="scroll_down"><img src="images/mouse.png"></p>
        </div>
      </div>
    </section>
    <section id="team_info">
      <p><img src="images/team_logo.png"></p>
      <p class="main_tit">새싹의 반란</p>
      <p class="team_info_txt">우리 ‘새싹의 반란’은 코딩 교육생으로 새싹이지만</p>
      <p class="team_info_txt">새싹의 반란으로 일취월장 성장해 개발자로 취업에 성공한다는 의미를 담았어요</p>
    </section>

    <section id="team_promiss">
      <div class="youngho">
        <div>
          <h2>우리<span class="team">'팀'</span>은요!</h2>
          <div id="distance">총<span id="num">4</span>명이예요</div>
        </div>

        <div class="team_promiss_txt">
          <h2>우리<span class="team">'팀'</span>의 약속은요!</h2>
          <div class="promiss-area" style="background-color: skyblue;">
            <div class="left-width"></div>
            <div class="left-length"></div>
            <div class="right-width"></div>
            <div class="right-length"></div>
            <p id="promiss">지각하지 않기 <br>
              해야하는일은 꼭 해결하기 <br>
              포기하지 말고 팀원에게 SOS</p>
          </div>
        </div>
      </div>
    </section>
    <section id="team_member">
      <div class="container marketing">
        <!--<div class="row featurette">
              <div class="col-md-7 align-self-center">
                  <div class="team_member_box_right">
                      <h2 class="my_title">"미래의 떳떳한 개발자가 될"</h2>
                      <p class="my_name">김희찬이에요</p>
                      <button class="mybutton">프로필 자세히 보기</button>
                  </div>

              </div>
              <div class="col-md-5 my_content">
                  <img src="images/image_1.png" class="my_image">
              </div>
          </div> -->

        <div class="row featurette">
          <div class="col-md-7 order-md-2 align-self-center my_content">
            <div class="team_member_box">
              <h2 class="my_title">"미래의 떳떳한 개발자가 될"</h2>
              <p class="my_name">김희찬이에요</p>
              <button class="mybutton">프로필 자세히 보기</button>
            </div>
          </div>
          <div class="col-md-5 order-md-1">
            <img src="images/image_1.png" class="my_image" alt="...">

          </div>
        </div>
        <div class="row featurette">
          <div class="col-md-7 align-self-center my_content">
            <div class="team_member_box_right">
              <h2 class="my_title">"미래의 떳떳한 개발자가 될"</h2>
              <p class="my_name">여인준이에요</p>
              <button class="mybutton"><a href="sub_injun.html">프로필 자세히 보기</a></button>
            </div>
          </div>
          <div class="col-md-5">
            <img src="images/image_2.png" class="my_image">

          </div>
        </div>
        <div class="row featurette">
          <div class="col-md-7 order-md-2 align-self-center my_content">
            <div class="team_member_box">
              <h2 class="my_title">"미래의 떳떳한 개발자가 될"</h2>
              <p class="my_name">이다원이에요</p>
              <button class="mybutton">프로필 자세히 보기</button>
            </div>
          </div>
          <div class="col-md-5 order-md-1">
            <img src="images/image_3.png" class="my_image">

          </div>
        </div>

        <div class="row featurette">
          <div class="col-md-7 align-self-center">
            <div class="team_member_box_right">
              <h2 class="my_title">"미래의 떳떳한 개발자가 될"</h2>
              <p class="my_name">진영호이에요</p>
              <button class="mybutton">프로필 자세히 보기</button>
            </div>

          </div>
          <div class="col-md-5 my_content">
            <img src="images/image_4.png" class="my_image">
          </div>
        </div>

      </div>
    </section>


    <section id="team_cheer">
      <h2>저희를 응원해주세요!👍🏻</h2>
      <div class="team_cheer_box">
        <div class="mypostingbox" id="postingbox">
          <div class="form-floating mb-3">
            <input type="email" class="formControl" id="image" placeholder="응원의 한 마디">
            <label for="floatingInput"></label>
          </div>
          <button id="postingbtn" type="button">기록하기</button>
        </div>

    

      <div class="mycards">
        <div id="card" class="row row-cols-1 row-cols-md-3 g-4 ">
          <div class="col">
            <div class="card h-100">
              <div class="card-body">
                <h5 class="card-title">영화 제목</h5>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card h-100">
              <div class="card-body">
                <h5 class="card-title">영화 제목</h5>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card h-100">
              <div class="card-body">
                <h5 class="card-title">영화 제목</h5>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card h-100">
              <div class="card-body">
                <h5 class="card-title">영화 제목</h5>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card h-100">
              <div class="card-body">
                <h5 class="card-title">영화 제목영화 제목영화 제목영화 제목영화 제목영화 제목영화 제목영화 제목영화 제목영화 제목영화 제목영화 제목</h5>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card h-100">
              <div class="card-body">
                <h5 class="card-title">영화 제목</h5>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card h-100">
              <div class="card-body">
                <h5 class="card-title">제목영화 제목</h5>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card h-100">
              <div class="card-body">
                <h5 class="card-title">영화 제목</h5>
              </div>
            </div>
          </div>
        </div>
      </div>

  </div>
    </section>
<footer>
  <img src="images/Wheart.png">
  <span>새싹의 반란</span>
</footer>

</body>

</html>

오늘의 한줄평 : 같이 하니까 정말 즐겁고 좋았다. 내가 설명을 좀더 잘할 수 있었다면 좋았을텐데..