-BrownBakery-
-HTML-
Brown Bakery
Various Breads and Sandwiches
こだわりの素材で作ったおいしいパンをお届けします。
Home
News
Concept
Menu
Shop
2019.07.01
夏野菜サンドを始めました。
2019.06.10
当店が新聞(朝刊)に掲載されました。
2019.05.15
パン・ド・カンパーニュが新登場
-CSS-
@charset "UTF-8"; * { margin: 0; padding: 0; } .clearfix:after { content: ""; display: block; clear: both; } ul { list-style: none; } a { text-decoration: none; } img { width: 100%; height: auto; vertical-align: bottom; } /* --- #wrap --- */ #wrap { width: 840px; margin: 0 auto; padding: 0 50px; background : url(images/brownbakery3.jpg); font-family: 'M PLUS 1p', sans-serif; } /* --- header --- */ header { padding-bottom: 20px; position: relative; } #logo { width: 357px; height: 115px; background: url(images/logoBg.png)no-repeat left top / 100%; float: left; } h1 { padding-top: 10px; text-align: center; font-family : Gabriola; font-size : 60px; color : #ffffff; } #logo > p { font-family : Gabriola; position: absolute; top: 80px; left: 90px; } header > p { float: left; font-size: 16px; position: absolute; top: 50px; left: 450px; } header > p:before, header > p:after { content: ""; display: inline-block; width: 70px; height: 43px; background: url(images/BrownPan.png)no-repeat; position: absolute; } header > p:before { top: 10px; left: -50px; } header > p:after { top: -40px; right: -30px; } /* --- nav --- */ nav { width: 834px; margin-bottom: 30px; padding: 3px; background: rgba(255,255,255,0.6); } nav ul { border: dotted 2px #784823; } nav ul li { width: 166px; text-align: center; font-family : Gabriola; font-size: 20px; float: left; } /* --- #main --- */ section { width: 800px; padding: 20px; background: url(images/brownbakery2.png)no-repeat left top / cover; } section > div { float: left; } section > div:first-of-type { width: 580px; } section > div:last-of-type { width: 180px; margin-left: 40px; } dd { padding-bottom: 35px; position: relative; } dd:after { content: ""; display: block; width: 180px; height: 15px; background: url(images/BrownLine.png) no-repeat left bottom / 100%; position: absolute; top: 45px; left: -10px; } /* --- footer --- */ footer { text-align: center; font-family : Gabriola; font-size: 14px; }