[클론코딩/코코아톡] 노마드 코더 코코아톡 클론코딩 #5 수정 및 추가 기능 구현

Sign Up Screen - 필수로 입력하도록 설정

(index.html)

    <!-- Login Screen -->
    <form action="friends.html" method="get" id="login-form">
        <input required type="text" placeholder="Email or phone number"/>
        <input required type="password" placeholder="Password"/>
        <input type="submit" value="Log In"/>
        <input type="submit" value="Sign Up"/>

        <a href="#">Find Kokoa Account or Password</a>
    </form>

 

Friends Screen - header 아이콘 추가 및 아이콘 간의 간격 수정

(friends.html)

    <!-- Header -->
    <header class="screen-header">
        <h1 class="screen-header__title">Friends</h1>
        <div class="screen-header__icons">
            <span><i class="fas fa-magnifying-glass fa-lg"></i></span>
            <span><i class="fa-solid fa-user-plus fa-lg"></i></span>
            <span><i class="fas fa-music fa-lg"></i></span>
            <span><i class="fa-solid fa-gear fa-lg"></i></span>
        </div>
    </header>

(screen-header.css)

.screen-header__icons span {
    margin-left: 15px;
}

 

Friends Screen - 프로필 뮤직 추가

(friends.html)

    <!-- User Component -->
    <main class="friends-screen">
        <!-- User Profile -->
        <div class="user-component">
            <div class="user-component__column">
                <img src="img/user_img.jpg" class="user-component__avatar user-component__avatar--xl"/>
                <div class="user-component__text">
                    <h4 class="user-component__title">Smile:)</h4>
                    <!-- <h6 class="user-component__subtitle">Be Happy Don't Worry</h6> -->
                </div>
            </div>

            <div class="user-component__column">
                <div class="user-component__music-box">
                    <span>After LIKE - IVE(아이브)<i class="fas fa-play"></i></span>
                </div>
            </div>
        </div>

(user-component.css)

...

.user-component__music-box span {
    border: 2px solid #00cd3c;
    border-radius: 20px;
    padding: 7px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.7);
}

.user-component__music-box i {
    margin-left: 7px;
    color: #00cd3c;
}

 

Friends Screen - 채널 이미지 변경 및 친구 목록 추가

(friends.html)

        <!-- Friends Profile -->
        <div class="friends-screen__friends">
            <div class="friends-screen__friends-header">
                <span>Friends 13</span>
                <i class="fas fa-chevron-up fa-xs"></i>
            </div>

            <div class="user-component">
                <div class="user-component__column">
                    <img src="img/user_friends_img4.jpg" class="user-component__avatar user-component__avatar--sm"/>
                    <div class="user-component__text">
                        <h4 class="user-component__title user-component__title-sm">Hani</h4>
                        <h6 class="user-component__subtitle">Don't Worry Be Happy</h6>
                    </div>
                </div>
    
                <div class="user-component__column">
                    <div class="user-component__music-box">
                        <span>Left & Right - 세븐틴<i class="fas fa-play"></i></span>
                    </div>
                </div>
            </div>
            
            <div class="user-component">
                <div class="user-component__column">
                    <img src="img/user_friends_img3.jpg" class="user-component__avatar user-component__avatar--sm"/>
                    <div class="user-component__text">
                        <h4 class="user-component__title user-component__title-sm">Wendy</h4>
                        <h6 class="user-component__subtitle">todayis_wendy</h6>
                    </div>
                </div>
    
                <div class="user-component__column">
                    <div class="user-component__music-box">
                        <span>Psycho - Red Velvet(레드벨벳)<i class="fas fa-play"></i></span>
                    </div>
                </div>
            </div>
        </div>

(friends.css)

...

.friends-screen__friends {
    margin-top: 25px;
    border-top: var(--main-border);
    padding-top: 15px;
}

.friends-screen__friends-header {
    display: flex;
    justify-content: space-between;
    color:rgba(0, 0, 0, 0.5);
    margin-bottom: 30px;
}