使用するテキスト
Cafe de Felica Home Concept Menu Access Cafe de Felicaは、 食とアートと音楽が交差する空間を創造します。 シェフ・矢島が提供するのは、スペイン料理に「東京」の エッセンスを取り入れたモダンスパニッシュ。 店内は、新進気鋭のアーティストとコラボレーションしたアートギャラリー。 心地よいチルアウトミュージックが流れる空間でくつろぎのひとときをお過ごしください。 Concept テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト Menu テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト Access テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>position:fixedを使ったサイト</title> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <link rel="stylesheet" href="css/style.css"> <link href="https://fonts.googleapis.com/css?family=Niconne&display=swap" rel="stylesheet"> </head> <body> <header> <div class="header-inner"> <h1 class="main-color">Cafe de Felica</h1> <nav class="g-nav"> <ul> <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> </div> </header> <div class="main"> <div class="keyvisual"> <img src="img/main.jpg" alt=""> </div> <h2>Cafe de Felicaは、<br> 食とアートと音楽が交差する空間を創造します。</h2> <p>シェフ・矢島が提供するのは、スペイン料理に「東京」の<br> エッセンスを取り入れたモダンスパニッシュ。<br> 店内は、新進気鋭のアーティストとコラボレーションしたアートギャラリー。<br> 心地よいチルアウトミュージックが流れる空間でくつろぎのひとときをお過ごしください。</p> </div> <div class="wrapper"> <div class="concept"> <h3>Concept</h3> <p class="photo"><img src="img/concept.jpg" alt=""></p> <p class="txt"> テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> </div> <div class="menu"> <h3>Menu</h3> <p class="photo"><img src="img/menu.jpg" alt=""></p> <p class="txt"> テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> </div> <div class="access"> <h3>Access</h3> <p class="photo"><img src="img/access.jpg" alt=""></p> <p class="txt"> テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> </div> </div> <footer class="main-bg-color"> <ul class="sns"> <li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li> </ul> <p><small>© 2019 Cafe de Felica</small></p> </footer> </body> </html>
@charset "utf-8"; /* CSS Document */ html,body,h1,h2,h3,p,ul,li,small { margin:0; padding:0; } ul { list-style:none; } a { text-decoration:none; } img { vertical-align:bottom; } .main-color { color:#1a60ed; } .main-bg-color { background-color:#1a60ed; } header { width:100%; height:80px; border-bottom:4px solid #1a60ed; background:#FFF; position:fixed; top:0; left:0; } .header-inner { width:960px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; } h1 { font-family: 'Niconne', cursive; font-size:48px; } .g-nav ul { display:flex; justify-content:space-around; } .g-nav li { margin: 0 20px; } .g-nav a { display:block; padding:20px; color:#222; font-size:18px; font-weight:bold; } .g-nav a:hover { color:#1a60ed; } .main { padding-top:80px; width:960px; margin:50px auto 100px; text-align:center; } .keyvisual { margin-bottom:60px; } .main h2 { margin-bottom:40px; } .wrapper { width:960px; margin:0 auto 80px; display:flex; justify-content:space-between; } .wrapper>div { width:300px; padding:10px; box-sizing:border-box; } .wrapper>div:hover { box-shadow:0 0 15px #AAA; transition:0.3s; } .wrapper>div img { max-width:100%; } .wrapper h3 { text-align:center; font-size:24px; font-weight:normal; margin-bottom:10px; } .photo { margin-bottom:20px; } footer { padding-top:20px; } .sns { display:flex; justify-content:center; margin-bottom:10px; } .sns a { display:block; font-size:50px; color:#FFF; margin:0 20px; } footer p { text-align:center; color:#FFF; font-size:18px; padding-bottom:20px; }
