본문 바로가기
내마음대로만들어보자/figma

Figma - 모바일 웹사이트 만들기 코딩(컨텐츠영역2)

by 소농민! 2022. 1. 2.
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/reset05.css">
    <link rel="stylesheet" href="assets/css/fonts05.css">
    <link rel="stylesheet" href="assets/css/style05.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">
                <div class="container">
                    <div class="row">
                        <h2>다음 재생 음악</h2>
                        <div class="next-wrap">
                            <div class="next">
                                <div class="next-img">
                                     <picture>
                                        <source srcset="assets/img/next01@3x.jpg" media="(min-width: 800px)">
                                        <source srcset="assets/img/next01@2x.jpg" media="(min-width: 600px)">
                                        <img src="assets/img/next01.jpg" srcset="assets/img/next01.jpg 1x, assets/img/next01@2x 2x, assets/img/next01@3x.jpg 3x" alt="YOUNHA UNSTABLE MINDSET">
                                     </picture>
                                </div>
                                <div class="next-tit">
                                    <span class="nt-stit">어쿠스틱콜라보</span>
                                    <h3 class="nt-tit">묘해, 너와</h3>
                                    <p class="nt-desc">피그마를 통한 웹 사이트 만들기</p>
                                </div> 
                            </div>
                            <div class="next">
                                <div class="next-img">
                                     <picture>
                                        <source srcset="assets/img/next02@3x.jpg" media="(min-width: 800px)">
                                        <source srcset="assets/img/next02@2x.jpg" media="(min-width: 600px)">
                                        <img src="assets/img/next02.jpg" srcset="assets/img/next02.jpg 1x, assets/img/next02@2x 2x, assets/img/next02@3x.jpg 3x" alt="YOUNHA UNSTABLE MINDSET">
                                     </picture>
                                </div>
                                <div class="next-tit">
                                    <span class="nt-stit">폴킴</span>
                                    <h3 class="nt-tit">비</h3>
                                    <p class="nt-desc">피그마를 통한 웹 사이트 만들기</p>
                                </div> 
                            </div>
                            <div class="next">
                                <div class="next-img">
                                     <picture>
                                        <source srcset="assets/img/next03@3x.jpg" media="(min-width: 800px)">
                                        <source srcset="assets/img/next03@2x.jpg" media="(min-width: 600px)">
                                        <img src="assets/img/next03.jpg" srcset="assets/img/next03.jpg 1x, assets/img/next03@2x 2x, assets/img/next03@3x.jpg 3x" alt="YOUNHA UNSTABLE MINDSET">
                                     </picture>
                                </div>
                                <div class="next-tit">
                                    <span class="nt-stit">윤하</span>
                                    <h3 class="nt-tit">서른밤째</h3>
                                    <p class="nt-desc">피그마를 통한 웹 사이트 만들기</p>
                                </div> 
                            </div>
                            <div class="next">
                                <div class="next-img">
                                     <picture>
                                        <source srcset="assets/img/next04@3x.jpg" media="(min-width: 800px)">
                                        <source srcset="assets/img/next04@2x.jpg" media="(min-width: 600px)">
                                        <img src="assets/img/next04.jpg" srcset="assets/img/next04.jpg 1x, assets/img/next04@2x 2x, assets/img/next04@3x.jpg 3x" alt="YOUNHA UNSTABLE MINDSET">
                                     </picture>
                                </div>
                                <div class="next-tit">
                                    <span class="nt-stit">jawsh685</span>
                                    <h3 class="nt-tit">savage love</h3>
                                    <p class="nt-desc">피그마를 통한 웹 사이트 만들기</p>
                                </div> 
                            </div>
                            <div class="next">
                                <div class="next-img">
                                     <picture>
                                        <source srcset="assets/img/next05@3x.jpg" media="(min-width: 800px)">
                                        <source srcset="assets/img/next05@2x.jpg" media="(min-width: 600px)">
                                        <img src="assets/img/next05.jpg" srcset="assets/img/next05.jpg 1x, assets/img/next05@2x 2x, assets/img/next05@3x.jpg 3x" alt="YOUNHA UNSTABLE MINDSET">
                                     </picture>
                                </div>
                                <div class="next-tit">
                                    <span class="nt-stit">태연</span>
                                    <h3 class="nt-tit">그대라는 시</h3>
                                    <p class="nt-desc">피그마를 통한 웹 사이트 만들기</p>
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>
            </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: 10px 0; margin-top: 19px; overflow: hidden;}
.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;}

/* nextM */
.nextM {padding-bottom: 120px;}
.nextM h2 {font-size: 20px; font-weight: bold; margin-bottom: 12px; margin-top: 16px;padding-top: 20px; border-top: 1px solid #EBEBEB;}
.nextM .next {display: flex; margin-bottom: 16px; position: relative;}
.nextM .next:after {
    content: '';
    position: absolute; right: 0; bottom: -8px;
    width: calc(100% - 114px);
    height: 1px; 
    background: #ebebeb;
}
.nextM .next .next-img {width: 102px; margin-right: 12px; }
.nextM .next .next-tit {display: flex; flex-direction: column; justify-content: center;}
.nextM .next .next-tit .nt-stit {color: #da5e7c; font-size: 12px;}
.nextM .next .next-tit .nt-tit {font-size: 16px;}
.nextM .next .next-tit .nt-desc {
    font-size: 13px; color: #a1a1a1; font-weight: 300;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* mediaquery */
@media (max-width: 1020px){
    .container {width: 100%;}
}
저작자표시

'내마음대로만들어보자 > figma' 카테고리의 다른 글

Figma - 모바일 웹사이트 만들기 코딩(컨텐츠영역)  (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

관련글

티스토리툴바