読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

レスポンシブWebデザイン - 応用

レスポンシブWebデザイン - 応用

  • テキスト P.337

f:id:web-0818:20170308021823p:plain


f:id:web-0818:20170307104802p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Cafe Leaf</title>

<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="format-detection" content="telephone=no">

<!--icon -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" sizes="192x192" href="apple-touch-icon.png">


<!-- stylesheets -->
<link rel="stylesheet" href="css/base.css" media="all">

</head>
<body>
<header id="header">
<div class="container">
<h1 class="top-logo"><a href="index.html"><img src="img/logo_header.png" alt="おいしい紅茶と手作り焼き菓子の店 Cafe Leaf"></a></h1>
</div>
</header><!-- /#header -->

<nav id="gnav">
<ul class="container">
<li><a href="#">Home</a></li>
<li><a href="#">Concept</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Access</a></li>
</ul>
</nav><!-- /#gnav -->

<main id="main" class="container">

<div id="intro">
<div class="intro-text">
<p>Cafe Leafは、港区青山一丁目にある紅茶専門カフェです。<br>
オーナー自らが目利きして買い付けた厳選された茶葉を、ポットでお出ししています。<br>
都会の隠れ家カフェで、くつろぎのティータイムをごゆっくりお楽しみください。</p>
</div><!-- /.intro-text -->
<div class="intro-map">
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d3241.177172339873!2d139.72505595!3d35.672639249999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1z5p2x5Lqs6YO95riv5Yy66Z2S5bGxMS0x!5e0!3m2!1sja!2sjp!4v1439816808418" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div><!-- /.map -->
<address>
<p>東京都港区青山1-x-x 第一青山ビル1F</p>
<p><a href="tel:03-0000-0000" class="btn-tel">03-0000-0000</a></p>
</address>
</div><!-- /.intro-map -->
</div><!-- /#intro -->

<section id="menu">
<h2 class="heading">Pickup Menu <a href="#" class="more">more</a></h2>
<ul class="menu-list">
<li>
<img src="img/ph_menu01.jpg" alt="">
<p class="menu-text">ダージリン<br><b>800円</b></p>
</li>
<li>
<img src="img/ph_menu02.jpg" alt="">
<p class="menu-text">ロイヤルミルクティー<br><b>850円</b></p>
</li>
<li>
<img src="img/ph_menu03.jpg" alt="">
<p class="menu-text">ハーブティー<br><b>700円</b></p>
</li>
<li>
<img src="img/ph_menu04.jpg" alt="">
<p class="menu-text">プレーンワッフル<br><b>400円</b></p>
</li>
<li>
<img src="img/ph_menu05.jpg" alt="">
<p class="menu-text">アップルパイ<br><b>550円</b></p>
</li>
<li>
<img src="img/ph_menu06.jpg" alt="">
<p class="menu-text">マドレーヌ<br><b>300円</b></p>
</li>
</ul>
</section><!-- /#menu -->

<section id="info">
<h2 class="heading">Information <a href="#" class="more">more</a></h2>
<dl class="info-list">
<dt>2015-07-28</dt>
<dd><a href="#">臨時休業のお知らせ</a></dd>
<dt>2015-05-01</dt>
<dd><a href="#">紅茶教室(6月開催分)の受付を開始しました</a></dd>
<dt>2014-03-03</dt>
<dd><a href="#">消費税率変更に伴う料金改定について</a></dd>
</dl>
</section><!-- /#info -->

<section id="staff">
<div class="staff-photo"><img src="img/ph_staff.jpg" alt="スタッフ近影"></div>
<div class="staff-msg">
<h2 class="staff-heading">スタッフから一言</h2>
<p>ティーインストラクターの資格を持つスタッフが、一杯ずつ丁寧にお入れします。</p>
</div>
</section><!-- /#staff -->

<aside id="banner">
<ul class="banner-list clearfix">
<li><a href="#"><img src="img/bnr_blog.jpg" alt="ブログ始めました"></a></li>
<li><a href="#"><img src="img/bnr_lesson.jpg" alt="紅茶教室のご案内"></a></li>
<li><a href="#"><img src="img/bnr_recipe.jpg" alt="焼き菓子レシピ"></a></li>
</ul>
</aside><!-- /#banner -->
</main><!-- /#main -->

<footer id="footer">
<div class="container">
<div class="footer-photo"><img src="img/ph_shop.jpg" alt="店舗外観"></div>
<section class="footer-info">
<h2 class="footer-info-title"><img src="img/logo_footer.png" alt="Cafe Leaf"></h2>
<dl class="footer-info-list">
<dt>【営業時間】</dt>
<dd>10:00〜19:00(火曜定休)</dd>
<dt>【電話番号】</dt>
<dd>03-0000-0000</dd>
<dt>【住  所】</dt>
<dd>東京都港区青山1-x-x  青山第一ビル1F</dd>
<dt>【最寄り駅】</dt>
<dd>東京メトロ・都営大江戸線青山一丁目駅  1番出口徒歩3分</dd>
</dl>
</section>
<ul class="sns">
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Pinterst</a></li>
</ul>
<p class="copyright"><small>Copyrights (c) Cafe Leaf All Rights Reserved.</small></p>
<p class="pagetop"><a href="#header"><img src="img/btn_top.png" alt="ページのトップへ"></a></p>
</div><!-- /.container -->
</footer><!-- /#footer -->
</body>
</html>