Chapter05. Spotify 웹사이트 만들기

이재영·2022년 7월 21일
0

html/css

목록 보기
5/7

오늘은 Spotify 웹페이지를 html/css를 사용하여 만들어 보겠다.

일단 Spotify 웹페이지는 다음과 같다.
https://www.spotify.com/kr-ko/

소스코드

HTML 코드

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script src="https://kit.fontawesome.com/0bb6f287f4.js" crossorigin="anonymous"></script>
</head>

<body>
  <nav>
    <div>
      logo
    </div>
    
    <div>
      <a href="#" class="nav-item">프리미엄</a>
      <a href="#" class="nav-item">지원</a>
      <a href="#" class="nav-item">다운로드하기</a>
      <span>|</span>
      <a href="#" class="nav-item">가입하기</a>
      <a href="#" class="nav-item">로그인하기</a>
    </div>
  </nav>
  
  <main>
    <div class="main-item">
      <div class="headline">
        Spotify Premium 멤버가 되어보세요.<br> 
        3⁠개⁠월⁠간 무⁠료⁠로 이⁠용⁠하⁠세⁠요.
      </div>

      <div class="sub-headline">
        매월 최소 10,900원입니다(부가세 별도).<br>
        언제든 해지할 수 있습니다.
      </div>

      <div>
        <button class="first-button">시작하기</button>
        <button class="second-button">요금제 보기</button>
      </div>

      <div class="lastline">
        이후에는 월정액 요금이 적용됩니다. 개인 요금제에만 적용되며 아직 Premium에 가입하지 않은 사용자만 이 프로모션을 이용하실<br> 
        수 있습니다. <a href="#" class="main-a">약관</a>이 적용됩니다.
      </div>
    </div>

    <div>
      <img src="https://i.scdn.co/image/ab678e040000ed3a15b8bd60628173a13eb8d7ae" width="400px"/>
    </div>
  </main>

  <section>
  </section>

  <footer>
    <div class="container">
      <div class="footer-area">
        <div class="footer-menu">
          <div class="column">
            <div class="title">회사</div>
            <a href="#" class="menu-item">상세정보</a>
            <a href="#" class="menu-item">채용 정보</a>
            <a href="#" class="menu-item">For the Record</a>
          </div>
          <div class="column">
            <div class="title">커뮤니티</div>
            <a href="#" class="menu-item">아티스트</a>
            <a href="#" class="menu-item">개발자</a>
            <a href="#" class="menu-item">투자자</a>
            <a href="#" class="menu-item">공급업체</a>
          </div>
          <div class="column">
            <div class="title">유용한 링크</div>
            <a href="#" class="menu-item">지원</a>
            <a href="#" class="menu-item">웹 플레이어</a>
          </div>
          <div class="icon-area">
            <div class="icon-box">
              <i class="fa-brands fa-instagram icon"></i>
            </div>
            <div class="icon-box">
            <i class="fa-brands fa-twitter icon"></i>
            </div>
            <div class="icon-box">
            <i class="fa-brands fa-facebook-f icon"></i>
            </div>
          </div>
        </div>
      </div>  
      
      <div class="first-line">
        <a href="#" class="first-line-item">대한민국 (한국어)</a>
      </div>
      <div class="second-line">
        <div>
          <a href="#" class="second-line-item">법률 정보</a>
          <a href="#" class="second-line-item">개인정보 보호 센터</a>
          <a href="#" class="second-line-item">개인정보 처리방침</a>
        </div>
        <div class="first-line-item">© 2022 Spotify AB</div>
      </div>
    </div>
  </footer>

</body>

</html>

CSS 코드

body {
  margin: 0px;
  font-family: Circular,Helvetica,Arial,sans-serif!important;
  color: white
}

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

a:hover {
  color: #1ed760;
}

nav {
  height: 80px;
  background-color: black;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

main {
  height: 467px;
  background-color: rgb(255, 205, 210);
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-item {
  margin: 40px;
}

.main-a {
  color:black;
  text-decoration: underline;
}

.main-a:hover {
  color: black;
}

section {
  height: 480px;
  background-color: white;
}

footer {
  height: 532px;
  background-color: black;
  display: flex;
  justify-content: center;
}

.nav-item {
  padding: 28px 17px;
  font-weight: 700;
}

.headline {
  color: black;
  font-size: 40px;
  font-weight: 900;
}

.sub-headline {
  color: black;
  font-size: 24px;
  font-weight: 400;
  margin: 30px 0px;
}

.first-button {
  background: black;
  color: white;
  border-radius: 500px;  
  padding-block: 14px;
  padding-inline: 32px;
  font-weight: 700;
  margin-right: 8px;
}

.first-button:hover {
  transform: scale(1.03);
}

.second-button:hover {
  transform: scale(1.03);
}

.second-button {
  border: 1px solid black;
  color: black;
  background-color: rgb(255, 205, 210);
  border-radius: 500px;  
  padding-block: 14px;
  padding-inline: 32px;
  font-weight: 700;
}

.lastline {
  color: black;
  font-size: 0.6875rem;
  margin-top: 32px;
}

.container {
  max-width: 1170px;
  width: 60%;
  padding: 80px 0px 50px 0px;
}

.footer-area {
  display: flex;
  justify-content: center;
}

.footer-menu {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.column {
  display: flex;
  flex-direction: column;
  width: 165px;
  height: 346px;
}

.title {
  color: #919496;
  font-size: 12px;
  font-weight: 900;
  margin: 20px 0px;
}

.menu-item {
  font-size: 16px;
  font-weight: 400;
  padding: 3px 0 15px;
}

.first-line {
  display: flex;
  justify-content: flex-end;
}

.first-line-item {
  padding: 1em 0;
  font-size: 12px;
  color: #919496;
}

.icon-area {
  display: flex;
}

.icon-box {
  border-radius: 50%;
  background-color: #222326;
  width: 54px;
  height: 54px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 24px;
}

.icon {
  font-size: 24px;
}

.second-line {
  display: flex;
  justify-content: space-between;
}

.second-line-item {
  padding: 1em 0;
  font-size: 12px;
  color: #919496;
  margin-right: 20px;
}

결과 화면


profile
소프트웨어

0개의 댓글