Music App

23894 ワード
CSS html テキストリンク
ハブページ
1.実施画面

2.HTMLコード
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>You Are Awesome!</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/FortAwesome/[email protected]/css/all.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- 한페이지에 2개 화면 구현 : section 활용 -->
  <section class="phone">
    <header>
      <i class="fas fa-arrow-left"></i>
      <i class="fas fa-search"></i>
    </header>
    <div class="artist">
      <img src="https://static.billboard.com/files/media/Tyler-The-Creator-press-by-Sam-Rock-2019-billboard-1548-1024x677.jpg" />
      <h2>Tyler, The Creator</h2>
      <h6>Rap, Hip-Hop</h6>
    </div>
    <!-- 버튼 구현 코드 -->
    <div class="btns">
      <span class="btns__btn">Shuffle</span>
      <span class="btns__btn"><i class="fas fa-heart"></i> 227</span>
    </div>
    <!-- 리스트는 ul, li로  -->
    <ul class="songs">
      <li class="songs__song">
        <div class="songs__data">
          <img src="https://imgix.ranker.com/user_node_img/50092/1001832784/original/flower-boy-photo-u1?w=650&q=50&fm=pjpg&fit=crop&crop=faces"/>
          <div>
            <span class="songs__author">
              Tyler, The Creator
            </span>
            <span class="songs__title">911</span>
          </div>
        </div>
        <i class="fas fa-ellipsis-v"></i>
      </li>
      <li class="songs__song">
        <div class="songs__data">
          <img src="https://imgix.ranker.com/user_node_img/50092/1001832784/original/flower-boy-photo-u1?w=650&q=50&fm=pjpg&fit=crop&crop=faces"/>
          <div>
            <span class="songs__author">
              Tyler, The Creator
            </span>
            <span class="songs__title">911</span>
          </div>
        </div>
        <i class="fas fa-ellipsis-v"></i>
      </li>
    </ul>
    <div class="currently-playing">
      <div>
        <span class="current__author">Tyler, The Creator</span>
        <span class="currnt__song">November</span>
      </div>
      <div class="currnt__player">
        <i class="fas fa-step-backward"></i>
        <!-- fa-2x : 아이콘 크기 2배로 -->
        <i class="fas fa-pause fa-2x"></i>
        <i class="fas fa-step-forward"></i>
      </div>
    </div>
  </section>

  <section class="phone">
    <header>
      <i class="fas fa-arrow-left"></i>
      <i class="fas fa-ellipsis-v"></i>
    </header>
    <div class="cover">
      <img src="https://imgix.ranker.com/user_node_img/50092/1001832784/original/flower-boy-photo-u1?w=650&q=50&fm=pjpg&fit=crop&crop=faces" />
    </div>
    <div class="player">
      <h4>November</h4>
      <h5>Tyler, The  Creator</h5>
    </div>
    <div class="progress">
      <div class="progress__time">
        <span>1:56</span>
        <span>2:21</span>
      </div>
      <!-- 2개의 div를 만들어 색을 구별지어 진행바 구현 -->
      <div class="progress__bar">
        <div class="progress__played"></div>
        <div class="progress__total"></div>
      </div>
    </div>
    <div class="actions">
      <i class="fas fa-redo"></i>
      <i class="fas fa-step-backward fa-lg"></i>
      <span>
        <i class="fas fa-play fa-lg"></i>
      </span>
        <i class="fas fa-step-forward fa-lg"></i>
        <i class="fas fa-random"></i>
    </div>
  </section>
</body>
</html>
3.CSSコード
Supaapiのスプリンガー
最初のスタイル-反応スタイルのコンポーネント