プロフィールサイト
クレジット
デザイナー
HTML
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name= "viewport" content = "width = device-width, initial-scale=1, user-scalable=yes">
<meta name="Description" content="profilesite">
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="prpfilesite"/>
<meta property="og:site_name" content="matsumoto eri">
<meta property="og:type" content="website">
<meta property="og:locale" content="ja-JP">
<meta property="og:image" content="assets/top/section-favorite_image-illust.jpg">
<meta property="og:description" content="welcome to my page!"/>
<!-- Twitter Card data -->
<!-- The type of card to be created: summary, photo, or video -->
<meta name="twitter:card" content="summary" />
<title>cafe_mastumoto_eri</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/style.css">
<link rel="apple-touch-icon" href="assets/top/section-favorite_image-illust.jpg">
</head>
<body>
<header class="header">
<h1 id="top">Profilesite</h1>
<div id="nav-drawer">
<input id="nav-input" class="none" type="checkbox">
<label id="nav-open" for="nav-input"><span>
</span></label>
<label id="nav-close" class="none" for="nav-input"></label>
<nav id="nav-content" class="header_navigation">
<ul>
<li><a class="nav-drawer__link-top" href="#about">About</a></li>
<li><a href="#favorite">Favorite</a></li>
<li><a href="#access">Access</a></li>
<li><a href="#news">News</a></li>
</ul>
</nav>
</div>
</header>
<main class="main">
<section class="section-top">
<div class="section-top__image">
<h2>matsumoto eri</h2>
<div class="section-top__image-message"> welcome to my page! </div>
</div>
</section>
<section class="section-about">
<h2 id="about">About</h2>
<ul>
<li>
<h3 class="section-about__title"> 松本 愛理（まつもと えり）</h3>
<p class="section-about__discription">関西大学 人間健康学部 人間健康学科<br class="sp">
1998年11月25日生まれ / 滋賀県出身</p>
</li>
</ul>
</section>
<section class="section-favorite">
<h2 id="favorite">Favorite</h2>
<ul>
<li><img class="section-favorite__item-picture-travel" src="assets/top/section-favorite_image-travel.png" alt="travel">
<h3 class="section-favorite__title">旅行</h3>
<p class="section-favorite__title-discription">３年前に行った、バリ島のライステラスの写真です。世界遺産や絶景が好きで、最近はTV番組や写真集を見たりして旅行気分を味わっています。</p>
</li><!--
--><li><img class="section-favorite__item-picture-illust" src="assets/top/section-favorite_image-illust.jpg" alt="illust">
<h3 class="section-favorite__title">イラスト</h3>
<p class="section-favorite__title-discription">イラストが趣味で、人物や静物など、ジャンル問わず色々描きます。使用ツールは主にイラストソフトで、たまに水彩絵の具を使ったりします。</p>
</li><!--
--><li><img class="section-favorite__item-picture-game" src="assets/top/section-favorite_image-game.jpg" alt="game">
<h3 class="section-favorite__title">ゲーム</h3>
<p class="section-favorite__title-discription">最近は「Dead by Daylight」というホラーゲームにハマってます。プレイもそうですが、YouTubeなどで他の人のプレイ動画を見るのも好きです。</p>
</li>
</ul>
</section>
<section class="section-access">
<h2 id="access">Access</h2>
<address>
〒605-0079京都府京都市東山区常盤町165番地 みかく 1階 ビル<span class="section-access__break">E-mail:XXX@example.com</span>
</address>
<div class="section-access__map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3268.0619280332076!2d135.77046416518462!3d35.00515487435909!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x600108ea93d13407%3A0x41a67f3d7c118294!2zRGluaW5nIEJhciBXIOelh-WckuW6lw!5e0!3m2!1sja!2sjp!4v1638094229594!5m2!1sja!2sjp" allowfullscreen="" loading="lazy"></iframe>
</div>
</section>
<section class="section-news">
<h2 id="news">News</h2>
<ol>
<li>
<time datetime="2021-01-01">2021/10/03 </time>
<h3>移転しました</h3>
<p>兵庫県から群馬県へ引越ししました。</p>
</li>
<li>
<time datetime="2021-01-01">2021/10/01 </time>
<h3>お知らせ</h3>
<p>デジタルハリウッド大宮byLIGに入学しました。</p>
</li>
</ol>
</section>
</main>
<footer class="footer">
<div class="footer__container">
<div class="footer__site-map">
<h2 >Profilesite</h2>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#favorite">Favorite</a></li>
<li><a href="#access">Access</a></li>
<li><a href="#news">News</a></li>
</ul>
</div>
<div class="footer__sns-links">
<ul>
<li><img src="assets/common/instagram.png" alt="instagram icon"></li>
<li><img src="assets/common/twitter.png" alt="twitter icon"></li>
<li><img src="assets/common/facebook.png" alt="facebook icon"></li>
</ul>
</div>
<small>©️matsumoto eri</small> </div>
</footer>
</body>
</html>制作過程
もっとみる
CSS
もっとみる
fori.io/
fori.io/