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/reset02.css">
<link rel="stylesheet" href="assets/css/fonts02.css">
<link rel="stylesheet" href="assets/css/style02.css">
</head>
<body>
<header id="header">
<div class="container">
<div class="row">
<time class="header-data">2021년 12월 30일</time>
<h1 class="header-title">음악듣기</h1>
<div class="header-id"></div>
</div>
</div>
</header>
<!-- //header -->
</body>
</html>/* reset */
body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input,
legend, li, ol, p, select, table, td, textarea, th, ul {margin: 0; padding: 0}
body, button, h1, h2, h3, h4, h5, input, select, table, textarea {
font-family: "SF Display", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
font-weight: 500;
font-size: 15px;
line-height: 1.267em
}
body {
position: relative;
color: #000;
word-break: break-all;
-webkit-text-size-adjust: none /* 아이폰 가로 모드 */
}
table {border-collapse: collapse}
fieldset, img {border: 0}
ol, ul {list-style: none}
address, em {font-style: normal}
a {color: inherit; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, .1)}
img {vertical-align: top; width: 100%;}
mark {color: inherit; font-weight: 700; background: 0 0}
button, input {-webkit-border-radius: 0; border-radius: 0; background: 0 0}
video::-webkit-media-controls-start-playback-button {display: none !important}/* container */
.container {width: 1000px; margin: 0 auto;}
/* row */
.row {position: relative; margin: 0 20px;}
/* header */
#header .header-data {
font-weight: 600;
font-size: 12px;
padding-top: 30px;
display: block;
color: #a8a8a8;
}
#header .header-title {
font-weight: bold;
font-size: 32px;
}
#header .header-id {
position: absolute; right: 0; bottom: 5px;
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;
}
/* mediaquery */
@media (max-width: 1020px){
.container {width: 100%;}
}'내마음대로만들어보자 > figma' 카테고리의 다른 글
| Figma - 모바일 웹사이트 만들기 코딩(컨텐츠영역2) (0) | 2022.01.02 |
|---|---|
| Figma - 모바일 웹사이트 만들기 코딩(컨텐츠영역) (0) | 2022.01.02 |
| Figma - 모바일 웹 사이트 만들기(푸터영역) (0) | 2021.12.29 |
| Figma - 모바일 웹 사이트 만들기(컨텐츠 영역2) (0) | 2021.12.29 |
| Figma - 모바일 웹 사이트 만들기(컨텐츠 영역) (0) | 2021.12.26 |