Skip to content

Commit

Permalink
feat(): 基本的なデザインを完了
Browse files Browse the repository at this point in the history
  • Loading branch information
@rdlabo
rdlabo committed Sep 7, 2020
1 parent 3b66919 commit 494e006
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 42 deletions.
8 changes: 4 additions & 4 deletions www/css/_style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -665,10 +665,10 @@ footer {
text-align: center;
}

#contact .contactCell span {
#contact .form-line span {
color: #f00;
}
.contactCell {
.form-line {
border-bottom: #ccc 1px solid;
}

Expand Down Expand Up @@ -702,7 +702,7 @@ footer {
} */

@media screen and (min-width: 980px) {
.contactCell {
.form-line {
width: 100%;
display: table;
}
Expand All @@ -724,7 +724,7 @@ footer {
}

@media screen and (max-width: 480px) {
.contactCell {
.form-line {
width: 100%;
/*display:table;*/
}
Expand Down
24 changes: 23 additions & 1 deletion www/css/module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ nav ul li a:hover::after {
}

.equidistant-container > .equidistant-container-inner ul {
padding: 0 0 0 16px;
padding: 0 0 0 20px;
}

.equidistant-container > .equidistant-container-inner img {
Expand Down Expand Up @@ -189,3 +189,25 @@ nav ul li a:hover::after {
/**
* </leadingcontainer>
*/

form .form-line label {
display: block;
margin-bottom: 4px;
}

form .form-line input,
form .form-line textarea {
width: calc(100% - 16px);
margin-bottom: 16px;
padding: 8px 8px 6px;
}

.form-label {
background-color: red;
color: #ffffff;
font-size: 0.7rem;
padding: 2px 5px;
margin-right: 0.5rem;
border-radius: 3px;
position:relative; top: -1px;
}
14 changes: 10 additions & 4 deletions www/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ img {
max-width: 100%;
}

address {
font-style: normal;
}

img.radius {
border-radius: 100%;
display: block;
Expand Down Expand Up @@ -65,6 +69,7 @@ button {
border-width: 1px;
font-size: 1rem;
background: transparent;
margin: 0 !important;
}

button:hover {
Expand All @@ -79,6 +84,7 @@ button:hover {
#menu-lunch, #menu-wine, #menu-access, #menu-voyage, #menu-contact {
background-color: #EFEBE9;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}


Expand All @@ -91,6 +97,7 @@ button:hover {
}
.container-half {
width: calc(50% - 16px);
flex-shrink: 0;
}
.container-extend {
flex-grow: 10;
Expand Down Expand Up @@ -211,7 +218,7 @@ ul.list-news {
max-width: 800px;
margin: auto;
list-style: none;
padding-left: 20px;
padding: 0;
}

ul.list-news > li {
Expand Down Expand Up @@ -277,9 +284,8 @@ ul.reserved-system {
justify-content: center;
}

ul.reserved-system li button {
margin: 16px;
background-color: #fff;
ul.reserved-system li {
margin: 8px;
}


Expand Down
63 changes: 30 additions & 33 deletions www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -975,7 +975,7 @@ <h2>ACCESS</h2>
</p>
<address>
〒662-0047　兵庫県西宮市寿町4-12<br />
電話　　<a href="tel:0798-37-2655">0798-37-2655</a>（番号をクリックすると電話がかかります）<br />
電話　<a href="tel:0798-37-2655">0798-37-2655</a>（番号をクリックすると電話がかかります）<br />
ＦＡＸ　0798-37-2656
</address>
<p>テイクアウト、ケータリング等遠慮なくお問い合わせください。</p>
Expand Down Expand Up @@ -1028,7 +1028,6 @@ <h3>お休み： 毎週水曜日と不定休で月に2日</h3>
<div class="wrap">
<h2>お問い合わせフォーム</h2>


<div class="leading-container">
<h4>お問い合わせについて</h4>
<ul>
Expand All @@ -1046,39 +1045,35 @@ <h4>お問い合わせについて</h4>
</ul>
<h4>問い合わせフォーム</h4>
<form method="post" action="mail.php">
<div class="formTable">
<div class="contactCell">
<label>
お名前<span>*</span>
<input size="19" type="text" name="お名前" />
</label>
</div>
<div class="contactCell">
<label>メールアドレス（半角）<span>*</span>
<input size="19" type="text" name="Email" />
</label>
</div>
<div class="form-line">
<label for="name"><span class="form-label required">必須</span>お名前</label>
<input id="name" type="text" name="お名前"
required placeholder="例）山田太郎" />
</div>
<div class="form-line">
<label for="mail"><span class="form-label required">必須</span>メールアドレス（半角）</label>
<input type="text" name="mail" id="mail"
required placeholder="例）info@example.com" />
</div>

<div class="contactCell">
<label>お電話番号（半角）
<input size="19" type="text" name="電話番号" placeholder="例）09012345678" />
</label>
</div>
<div class="form-line">
<label for="tel">お電話番号（半角）</label>
<input type="text" name="電話番号" placeholder="例）09012345678" id="tel" />
</div>

<div class="contactCell">
<label>
メッセージ<span>*</span>
<textarea
name="ご質問内容"
cols="50"
rows="5"
placeholder="※ご予約は、電話または予約サイトより承ります。"
></textarea>
</label>
</div>
<div class="form-line">
<label for="message"><span class="form-label required">必須</span>メッセージ</label>
<textarea
id="message"
name="ご質問内容"
cols="50"
rows="5"
required
placeholder="※ご予約は、電話または予約サイトより承ります。"
></textarea>
</div>
<p class="text-center">
<button type="submit" class="submitButton">送信内容の確認</button>
<button type="submit" class="submitButton">問い合わせ送信</button>
</p>
</form>
</div>
Expand All @@ -1087,8 +1082,10 @@ <h4>問い合わせフォーム</h4>

<section>
<div class="wrap">
<h4>スタッフ募集</h4>
<p>ベナトンで一緒に働きませんか？やる気のあるあなたを募集しています。詳しくはお店までお問い合わせください</p>
<div class="leading-container">
<h4>スタッフ募集</h4>
<p>ベナトンで一緒に働きませんか？やる気のあるあなたを募集しています。詳しくはお店までお問い合わせください</p>
</div>
<ul class="no-list-style equidistant-container">
<li class="equidistant-container-inner container-half">
<div class="parenthesis">
Expand Down

0 comments on commit 494e006

Please sign in to comment.