API tools faq
paste
Advertisement
JustinzocktYT

index.html

JustinzocktYT
Feb 19th, 2023
794
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.08 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta property="og:title" content="こころメロディ" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta charset="UTF-8">
  7.     <meta property="twitter:card" content="summary_large_image" />
  8.     <title>こころメロディ</title>
  9.     <style data-tag="reset-style-sheet">
  10.       html {  line-height: 1.15;}body {  margin: 0;}* {  box-sizing: border-box;  border-width: 0;  border-style: solid;}p,li,ul,pre,div,h1,h2,h3,h4,h5,h6,figure,blockquote,figcaption {  margin: 0;  padding: 0;}button {  background-color: transparent;}button,input,optgroup,select,textarea {  font-family: inherit;  font-size: 100%;  line-height: 1.15;  margin: 0;}button,select {  text-transform: none;}button,[type="button"],[type="reset"],[type="submit"] {  -webkit-appearance: button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {  border-style: none;  padding: 0;}button:-moz-focus,[type="button"]:-moz-focus,[type="reset"]:-moz-focus,[type="submit"]:-moz-focus {  outline: 1px dotted ButtonText;}a {  color: inherit;  text-decoration: inherit;}input {  padding: 2px 4px;}img {  display: block;}html { scroll-behavior: smooth  }
  11.     </style>
  12.     <style>
  13.         body {
  14.             font-family: 'Arial', sans-serif;
  15.             margin: 0;
  16.             padding: 0;
  17.             background-color: #FFC0CB;
  18.             color: var(--dl-color-gray-black);
  19.                     font-weight: 400;
  20.         font-style:normal;
  21.         text-decoration: none;
  22.         text-transform: none;
  23.         letter-spacing: normal;
  24.         line-height: 1.15;
  25.         }
  26.  
  27.         header {
  28.             background-color: #666;
  29.             padding: 20px;
  30.             text-align: center;
  31.         }
  32.  
  33.         header h1 {
  34.             margin: 0;
  35.             font-size: 40px;
  36.             color: #fff;
  37.             text-shadow: 1px 1px #000;
  38.         }
  39.  
  40.         nav {
  41.             background-color: #eee;
  42.             padding: 10px 20px;
  43.         }
  44.  
  45.         nav ul {
  46.             margin: 0;
  47.             padding: 0;
  48.             list-style: none;
  49.         }
  50.  
  51.         nav li {
  52.             display: inline-block;
  53.             margin: 0 10px;
  54.         }
  55.  
  56.         nav a {
  57.             color: #333;
  58.             text-decoration: none;
  59.             font-size: 18px;
  60.             text-transform: uppercase;
  61.             transition: color 0.2s ease;
  62.         }
  63.  
  64.         nav a:hover {
  65.             color: #666;
  66.         }
  67.  
  68.         section {
  69.             padding: 20px;
  70.             max-width: 800px;
  71.             margin: 0 auto;
  72.         }
  73.  
  74.         h2 {
  75.             font-size: 28px;
  76.             margin-bottom: 20px;
  77.         }
  78.  
  79.         p {
  80.             line-height: 1.5;
  81.             margin-bottom: 20px;
  82.         }
  83.  
  84.         button {
  85.             background-color: #666;
  86.             color: #fff;
  87.             padding: 10px 20px;
  88.             border: none;
  89.             border-radius: 5px;
  90.             font-size: 18px;
  91.             text-transform: uppercase;
  92.             cursor: pointer;
  93.             transition: background-color 0.2s ease;
  94.         }
  95.  
  96.         button:hover {
  97.             background-color: #333;
  98.         }
  99.  
  100.         footer {
  101.             background-color: #eee;
  102.             padding: 20px;
  103.             text-align: center;
  104.             font-size: 14px;
  105.             color: #666;
  106.         }
  107.              #content {
  108.         display: flex;
  109.         flex-wrap: wrap;
  110.         justify-content: space-around;
  111.         padding: 20px;
  112.       }
  113.       .music-item {
  114.         width: 30%;
  115.         margin: 10px;
  116.         background-color: #dfe6e9;
  117.         box-shadow: 0 2px 2px rgba(0,0,0,0.3);
  118.         text-align: center;
  119.         cursor: pointer;
  120.       }
  121.       .music-item img {
  122.         width: 100%;
  123.       }
  124.       .music-item h2 {
  125.         margin: 10px 0;
  126.         font-size: 1.2em;
  127.       }
  128.       .music-item p {
  129.         margin: 5px 0;
  130.         font-size: 0.8em;
  131.         color: #636e72;
  132.       }
  133.      
  134.       html {
  135.         font-family: Inter;
  136.         font-size: 16px;
  137.       }
  138.     </style>
  139.      <link
  140.      rel="stylesheet"
  141.      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&amp;display=swap"
  142.      data-tag="font"
  143.    />
  144.     <link rel="stylesheet" href="./style.css" />
  145. </head>
  146. <body>
  147.     <header>
  148.         <h1>こころメロディ</h1>
  149.     </header>
  150.  
  151.     <nav>
  152.         <ul>
  153.             <li><a href="#">Home</a></li>
  154.             <li><a href="./artist.html"></a>Artist</li>
  155.             <li><a href="./music.html">Music</a></li>
  156.             <li><a href="./files.html">Files</a></li>
  157.         </ul>
  158.     </nav>
  159.  
  160.     <section>
  161.     <div>
  162.       <link href="./home.css" rel="stylesheet" />
  163.  
  164.       <div class="home-container">
  165.         <h1>
  166.           <br />
  167.           <br />
  168.         </h1>
  169.         <div class="home-banner">
  170.           <h1 class="home-text03">私たちの使命</h1>
  171.           <span class="home-text04">
  172.             私たちは、日本の音楽業界で活躍する新進気鋭のアーティストを支援することを使命としています。彼らの才能を広く世に知らしめ、彼らがさらに輝ける場を提供することで、彼らが愛する音楽をたくさんの人々に届けるお手伝いをしています。
  173.           </span>
  174.           <button type="button" class="home-button button">続きを読む</button>
  175.         </div>
  176.         <div class="home-stats">
  177.           <div class="home-stat">
  178.             <svg viewBox="0 0 1152 1024" class="home-icon">
  179.               <path
  180.                d="M768 770.612v-52.78c70.498-39.728 128-138.772 128-237.832 0-159.058 0-288-192-288s-192 128.942-192 288c0 99.060 57.502 198.104 128 237.832v52.78c-217.102 17.748-384 124.42-384 253.388h896c0-128.968-166.898-235.64-384-253.388z"
  181.              ></path>
  182.               <path
  183.                d="M327.196 795.328c55.31-36.15 124.080-63.636 199.788-80.414-15.054-17.784-28.708-37.622-40.492-59.020-30.414-55.234-46.492-116.058-46.492-175.894 0-86.042 0-167.31 30.6-233.762 29.706-64.504 83.128-104.496 159.222-119.488-16.914-76.48-61.94-126.75-181.822-126.75-192 0-192 128.942-192 288 0 99.060 57.502 198.104 128 237.832v52.78c-217.102 17.748-384 124.42-384 253.388h279.006c14.518-12.91 30.596-25.172 48.19-36.672z"
  184.              ></path>
  185.             </svg>
  186.             <span class="home-text05">アーティスト</span>
  187.             <span class="home-text06">音楽を共有するアーティスト</span>
  188.             <h1 class="home-text07">2</h1>
  189.           </div>
  190.           <div class="home-stat1">
  191.             <svg viewBox="0 0 1024 1024" class="home-icon3">
  192.               <path
  193.                d="M598 512h234l-234-234v234zM640 214l256 256v426q0 34-26 60t-60 26h-470q-34 0-59-26t-25-60v-598q0-34 26-59t60-25h298zM682 42v86h-512v598h-84v-598q0-34 25-60t59-26h512z"
  194.              ></path>
  195.             </svg>
  196.             <span class="home-text08">プロジェクト</span>
  197.             <span class="home-text09">
  198.               私たちと私たちのアーティストのプロジェクト"
  199.             </span>
  200.             <h1 class="home-text10">1</h1>
  201.           </div>
  202.         </div>
  203.       </div>
  204.     </div>
  205.     <div id="header">
  206.       <h1>アーティストの音楽</h1>
  207.     </div>
  208.     <div id="content">
  209.       <div class="music-item">
  210.         <img src="./src/album-cover/74732e92d821ni01w810917d73bzbui21b.png" alt="Coverbimg-Lost_once_weeping">
  211.         <h2>ロストワンの号哭</h2>
  212.         <p>justinさん</p>
  213.       </div>
  214.     </div>
  215.  
  216.  
  217.  
  218. <script>
  219. function showPopup() {
  220.   alert("Unfortunately, we haven't released a beta or stable version yet! please be patience");
  221. }
  222. </script>
  223.  
  224.             </section>
  225.  
  226.     <footer>
  227.         <p>&copy; 2023  KokoroMelody. All rights reserved.</p>
  228.     </footer>
  229. </body>
  230. </html>
  231.  
  232.  
Tags: html
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!