728x90
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="author" content="webstoryboy">
<meta name="description" content="뮤직 모바일 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">
<meta name="keywords" content="듣기, 2019년 최고의 음악 100선, Apple Music">
<title>Apple Music App</title>
<!-- meta -->
<meta name="format-detection" content="telephone=no">
<meta property="og:title" content="뮤직 모바일 메인">
<meta property="og:url" content="https://webstoryboy.github.io/apple">
<meta property="og:image" content="https://webstoryboy.github.io/apple/assets/icon/icon.jpg">
<meta property="og:description" content="뮤직 모바일 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="뮤직 모바일 메인">
<meta name="twitter:url" content="https://webstoryboy.github.io/apple">
<meta name="twitter:image" content="https://webstoryboy.github.io/apple/assets/icon/icon.jpg">
<meta name="twitter:description" content="뮤직 모바일 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">
<!-- icon -->
<link rel="apple-touch-icon-precomposed" href="https://webstoryboy.github.io/apple/assets/icon/icon.jpg">
<link rel="apple-touch-icon-precomposed" sizes="96x96" href="https://webstoryboy.github.io/apple/assets/icon/icon_96.jpg">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://webstoryboy.github.io/apple/assets/icon/icon_144.jpg">
<link rel="apple-touch-icon-precomposed" sizes="192x192" href="https://webstoryboy.github.io/apple/assets/icon/icon_192.jpg">
<!-- style -->
<link rel="stylesheet" href="assets/css/reset04.css">
<link rel="stylesheet" href="assets/css/fonts04.css">
<link rel="stylesheet" href="assets/css/style04.css">
</head>
<body>
<header id="header">
<div class="container">
<div class="row">
<time class="header-date">2021년 12월 30일</time>
<h1 class="header-title">음악듣기</h1>
<div class="header-id">W</div>
</div>
</div>
</header>
<!-- //header -->
<main>
<section class="music">
<article class="bestM">
<div class="container">
<div class="row">
<div class="best">
<div class="best-title">
<span class="bt-stit">BEAT1 ON AIR</span>
<h2 class="bt-tit">YOUNHA</h2>
<p class="bt-desc">UNSTABLE MINDSET</p>
</div>
<picture>
<source srcset="assets/img/bestM01@3x.jpg" media="(min-width: 800px)">
<source srcset="assets/img/bestM01@2x.jpg" media="(min-width: 600px)">
<img src="assets/img/bestM01.jpg" srcset="assets/img/bestM01.jpg 1x, assets/img/bestM01@2x.jpg 2x, assets/img/bestM01@3x.jpg 3x" alt="YOUNHA UNSTABLE MINDSET">
</picture>
</div>
</div>
</div>
</article>
<!-- //bestM -->
<article class="recentM">
<div class="container">
<div class="row">
<h2>최근 재생한 음악</h2>
<div class="recent">
<picture>
<source srcset="assets/img/recent_img01@3x.jpg" media="(min-width: 800px)">
<source srcset="assets/img/recent_img01@2x.jpg" media="(min-width: 600px)">
<img src="assets/img/recent_img01.jpg" srcset="assets/img/recent_img01.jpg 1x, assets/img/recent_img01@2x 2x, assets/img/recent_img01@3x.jpg 3x" alt="YOUNHA UNSTABLE MINDSET">
</picture>
<div class="recent-title">
<span class="rt-stit">먹구름</span>
<h3 class="rt-tit">오늘의 발라드 사운드</h3>
</div>
</div>
<div class="recent">
<picture>
<source srcset="assets/img/recent_img02@3x.jpg" media="(min-width: 800px)">
<source srcset="assets/img/recent_img02@2x.jpg" media="(min-width: 600px)">
<img src="assets/img/recent_img02.jpg" srcset="assets/img/recent_img02.jpg 1x, assets/img/recent_img02@2x 2x, assets/img/recent_img02@3x.jpg 3x" alt="YOUNHA UNSTABLE MINDSET">
</picture>
<div class="recent-title">
<span class="rt-stit">별의조각</span>
<h3 class="rt-tit">오늘의 발라드 사운드</h3>
</div>
</div>
</div>
</div>
</article>
<!-- //recentM -->
<article class="nextM">
</article><!-- //nextM -->
</section>
</main>
</body>
</html>/* container */
.container {width: 1000px; margin: 0 auto;}
/* row */
.row {position: relative; margin: 0 20px;}
/* header */
#header .header-date {
font-weight: 600;
font-size: 12px;
padding-top: 30px;
display: block;
color: #a8a8a8;
}
#header .header-title {
font-weight: bold;
font-size: 32px;
border-bottom: 1px solid #ebebeb;
padding-bottom: 10px;
margin-bottom: 10px;
}
#header .header-id {
position: absolute; right: 0; bottom: 10px;
width: 40px;
height: 40px;
border-radius: 50%;
font-weight: 300;
font-size: 18px;
color: #fff;
/*text-align: center;
line-height: 40px; */
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
background: linear-gradient(149.16deg, #A4A9B5 10.18%, rgba(164, 169, 181, 0) 81.31%), #C4C4C4;
}
/* bestM */
.bestM .best-title .bt-stit {color:#DA5E7C;font-size: 12px;line-height: 20px;}
.bestM .best-title .bt-tit {font-size: 22px; padding-bottom: 5px;}
.bestM .best-title .bt-desc {font-size: 22px;font-weight: 300; color: #818181;margin-bottom: 10px;}
/* bestM */
.recentM {padding-top: 10px;margin-top: 19px;}
.recentM .recent {float: left; width: 49%; margin-right: 2%;}
.recentM .recent img {height: 200px;}
.recentM .recent:last-child {margin-right: 0;}
.recentM h2 {font-size: 20px;font-weight: bold; margin-bottom: 12px;margin-top: 16px; padding-top: 20px; border-top: 1px solid #ebebeb;}
.recentM .recent-title .rt-stit {color:#da5e7c; font-size: 12px; line-height: 1.67;}
.recentM .recent-title .rt-tit {font-size: 15px; padding-bottom: 5px;}
/* mediaquery */
@media (max-width: 1020px){
.container {width: 100%;}
}'내마음대로만들어보자 > figma' 카테고리의 다른 글
| Figma - 모바일 웹사이트 만들기 코딩(컨텐츠영역2) (0) | 2022.01.02 |
|---|---|
| Figma - 모바일 웹사이트 만들기 코딩(헤더영역) (0) | 2021.12.30 |
| Figma - 모바일 웹 사이트 만들기(푸터영역) (0) | 2021.12.29 |
| Figma - 모바일 웹 사이트 만들기(컨텐츠 영역2) (0) | 2021.12.29 |
| Figma - 모바일 웹 사이트 만들기(컨텐츠 영역) (0) | 2021.12.26 |
