首页/ mobileweb/ 品牌展示 H5 模板(初见美学)/ 代码预览

💻 代码预览 · 品牌展示 H5 模板(初见美学)

mw_brand · 上传者 驰旭教育
← 返回详情
contact.html · 约 2011 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
6<title>初见美学 - 联系方式</title>
7<style>:root{--theme:#7c3aed;--theme-d:#6d28d9}</style>
8<link rel="stylesheet" href="css/style.css">
9</head>
10<body>
11<div class="phone">
12  <header class="appbar">
13    <div class="logo">✨</div>
14    <div class="brand">初见美学<small>美,触手可及</small></div>
15  </header>
16  <main class="screen">
17<div class="card"><div class="info-row"><div class="ic">📞</div><div><div class="t">服务热线</div><div class="v">400-520-1314</div></div></div><div class="info-row"><div class="ic">✉️</div><div><div class="t">邮箱</div><div class="v">hi@chujian.com</div></div></div><div class="info-row"><div class="ic">📍</div><div><div class="t">地址</div><div class="v">成都市锦江区太古里 M68 号</div></div></div><div class="info-row"><div class="ic">🕒</div><div><div class="t">营业 / 服务时间</div><div class="v">门店 10:00 - 22:00</div></div></div></div>
18<div class="card"><div class="sec-title"><span class="bar"></span>在线留言</div><form id="contactForm"><div class="field"><label>姓名</label><input name="name" placeholder="您的称呼"></div><div class="field"><label>联系电话</label><input name="phone" placeholder="方便回访的号码"></div><div class="field"><label>需求留言</label><textarea name="msg" rows="3" placeholder="简单描述您的需求"></textarea></div><button class="btn full" type="submit">提交留言</button></form></div>
19  </main>
20  <nav class="tabbar">
21    <a href="index.html"><span>🏠</span>首页</a>
22    <a href="products.html"><span>🛍️</span>产品</a>
23    <a href="list.html"><span>📰</span>资讯</a>
24    <a href="about.html"><span>ℹ️</span>关于</a>
25    <a href="contact.html"><span>📞</span>联系</a>
26  </nav>
27</div>
28<script src="js/main.js"></script>
29</body>
30</html>