入門編:プロフィールサイト/LP
プロフィールサイト:LP
- 画像は、Pexels「bicycle」で検索
Profile About Bicycle About KAKERU MIYAICHI テキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキスト Bicycle タイトルタイトル テキストテキストテキスト タイトルタイトル テキストテキストテキスト タイトルタイトル テキストテキストテキスト © 2022 Profile
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【コーディング練習】プロフィールサイト / LP</title> <link rel="stylesheet" href="css/style.css"> <link rel="icon" sizes="16x16" href="img/favicon.ico"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet"> </head> <body> <!-- .header --> <header class="header"> <div class="container"> <h1><a href="index.html"><img src="img/logo.svg" alt="Profile"></a></h1> <nav class="nav"> <ul class="gnav"> <li><a href="#">About</a></li> <li><a href="#">Bicycle</a></li> </ul> </nav> </div><!-- /.container --> </header> <!-- /.header --> <!-- .main-content --> <main class="main-content"> <img src="img/keyvisual.jpg" alt="" class="keyvisual"> <div class="container"> <section class="about"> <h2>About</h2> <div class="wrapper"> <p class="portrait"><img src="img/about.jpg" alt=""></p> <div class="about-text"> <h3>FULL NAME</h3> <p>テキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキスト</p> </div><!-- /.about-text --> </div><!-- /.wrapper --> </section><!-- /.about --> <section class="bicycle"> <h2>Bicycle</h2> <ul> <li> <img src="img/bicycle1.jpg" alt=""> <h3>タイトル</h3> <p>テキストテキストテキスト</p> </li> <li> <img src="img/bicycle2.jpg" alt=""> <h3>タイトル</h3> <p>テキストテキストテキスト</p> </li> <li> <img src="img/bicycle3.jpg" alt=""> <h3>タイトル</h3> <p>テキストテキストテキスト</p> </li> </ul> </section><!-- /.bicycle --> </div><!-- /.container --> </main> <!-- /.main-content --> <!-- .footer --> <footer class="footer"> <p><small>©コピーライト</small></p> </footer> <!-- /.footer --> </body> </html>
@charset "UTF-8"; /* ---------------------------------------- reset ---------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } ul, li { list-style: none; } a { color: inherit; text-decoration: none; border: none; } img { max-width: 100%; vertical-align: bottom; } /* ---------------------------------------- body ---------------------------------------- */ body { color: #333; font-size: 16px; font-family: 'Noto Sans JP', sans-serif; line-height: 1.0; } /*------------------------------------------- layout -------------------------------------------*/ .container { padding: 0 20px; } @media screen and (min-width: 768px) { .container { max-width: 960px; margin: 0 auto; padding: 0 52px; } } /*------------------------------------------- header -------------------------------------------*/ .header > .container { display: grid; grid-template-columns: 130px 1fr; align-items: center; max-width: 960px; height: 60px; padding: 0 4%; } .header h1 { width: 120px; } /*------------------------------------------- main -------------------------------------------*/ .nav { align-self: center; justify-self: end; } .gnav { display: grid; grid-template-columns: repeat(2,1fr); } .gnav li { font-size: 14px; } .gnav a { display: block; padding: 6px 16px; } /*------------------------------------------- main -------------------------------------------*/ .keyvisual { width: 100%; height: calc(100vh - 60px); object-fit: cover; margin-bottom: 84px; } @media screen and (min-width: 768px) { .keyvisual { height: 600px; } } h2 { display: inline-block; margin-bottom: 60px; border-bottom: 1px solid #333; font-size: 32px; font-family: 'Hiragino Sans', sans-serif; line-height: 1.5; } /* ---------------- about ---------------- */ .about { margin: 0 auto 100px; text-align: center; } .portrait img { width: 100px; border-radius: 50%; } .about-text { width: 400px; margin: 0 auto; font-size: 14px; text-align: left; line-height: 1.6; } .about-text h3 { width: 100%; margin: 8px 0; font-family: 'Hiragino Sans', sans-serif; } @media screen and (min-width: 768px) { .about { width: 500px; } .wrapper { display: grid; grid-template-columns: 100px 1fr; gap: 30px; align-items: center; } .about-content { max-width: 75%; } .about-content h3 { width: 100%; margin-bottom: 10px; text-align: left; } } .about-content p { font-size: 14px; line-height: 1.5; text-align: left; } /* ---------------- bicycle ---------------- */ .bicycle { margin-bottom: 120px; text-align: center; } .bicycle ul { text-align: center; } @media screen and (min-width: 768px) { .bicycle ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: center; } } .bicycle img { margin-bottom: 18px; } .bicycle h3 { font-size: 18px; margin-bottom: 16px; } .bicycle p { margin-bottom: 32px; font-size: 14px; } /*------------------------------------------- footer -------------------------------------------*/ .footer { padding: 20px 0; font-size: 12px; } .footer > p { text-align: center; }