diff --git "a/\345\220\203\347\232\204.css" "b/\345\220\203\347\232\204.css"
new file mode 100644
index 0000000000000000000000000000000000000000..4049219b363ef52257de60f180ec8ed2db7043d0
--- /dev/null
+++ "b/\345\220\203\347\232\204.css"
@@ -0,0 +1,495 @@
+.body {
+    width: 1200px;
+    margin: 0 auto;
+    background-color: #eee;
+}
+
+.head {
+    display: flex;
+    flex-direction: column;
+    background-image: url(img/top.png);
+    background-size: 100%;
+    height: 650px;
+}
+
+.head-top {
+    display: flex;
+    flex-direction: row;
+}
+
+.head-top-left {
+    display: flex;
+    font-weight: bold;
+    color: orange;
+    font-size: 40px;
+    margin-top: 20px;
+    margin-left: 100px;
+}
+
+.head-top-center {
+    display: flex;
+    flex-direction: column;
+    margin-left: 80px;
+    margin-top: 20px;
+    color: #fff;
+}
+
+.head-middle-up {
+    line-height: 60px;
+    font-size: 40px;
+    text-align: center;
+    width: 500px;
+    height: 60px;
+    margin: 10px auto;
+    margin-top: 50px;
+    color: #fff;
+}
+
+.head-middle-down {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    font-size: 24px;
+    text-align: center;
+    width: 800px;
+    height: 100px;
+    margin: 0 auto;
+    color: #fff;
+}
+
+.head-bottom {
+    display: flex;
+    width: 500px;
+    height: 60px;
+    margin: 10px auto;
+}
+
+.head-bottom-left {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-left: 30px;
+    width: 200px;
+    height: 50px;
+    text-align: center;
+    line-height: 50px;
+    background: orange;
+    color: #fff;
+}
+
+.head-bottom-right {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-left: 40px;
+    width: 200px;
+    height: 50px;
+    text-align: center;
+    line-height: 50px;
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+}
+
+.head-footer-up {
+    display: flex;
+    color: #fff;
+    margin-top: 300px;
+    height: 50px;
+    line-height: 50px;
+    margin: 80px auto 0;
+    text-align: center;
+}
+
+.head-footer-down {
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    margin: 0 auto;
+    background-image: url(img/down-arrow-icon.png);
+    background-size: 100%;
+}
+
+.description {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 1200px;
+    background: #fff;
+    height: 700px;
+    margin-top: 150px;
+}
+
+.description-left {
+    display: flex;
+    flex-direction: column;
+    width: 500px;
+    height: 600px;
+}
+
+.description-left-top {
+    display: flex;
+    flex-direction: row;
+}
+
+.description-left-top1 {
+    display: flex;
+    width: 225px;
+    height: 225px;
+    background: url(img/Steak%20and%20vegetables%20-%20Foodies%20Feed.png);
+    background-size: 100%;
+}
+
+.description-left-top2 {
+    display: flex;
+    width: 225px;
+    height: 225px;
+    background: url(img/Beef-steak-pineapple-salad%20Foodies%20Feed.png);
+    background-size: 100%;
+    margin-left: 50px;
+}
+
+.description-left-bottom {
+    display: flex;
+    width: 500px;
+    background: url(img/Cup%20cakes.png);
+    height: 220px;
+    margin-top: 50px;
+    background-size: 100%;
+}
+
+.description-right {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: 70px;
+    text-align: center;
+    width: 500px;
+    height: 600px;
+}
+
+.description-right-bottom {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    text-align: center;
+    width: 200px;
+    height: 40px;
+    background: orange;
+    color: #fff;
+    line-height: 40px;
+    margin-top: 50px;
+    margin-left: 100px;
+}
+
+.menu {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 1200px;
+    height: 800px;
+}
+
+.menu-left {
+    display: flex;
+    flex-direction: column;
+    width: 480px;
+    height: 600px;
+    border: 1px solid #ccc;
+    box-shadow: 5px 5px 5px #888888;
+    background: #fff;
+}
+
+.menu-left-top {
+    width: 300px;
+    border: 1px solid #ccc;
+    background: #eee;
+    height: 50px;
+    line-height: 50px;
+    padding-left: 20px;
+    margin: 0 auto;
+}
+
+.menu-left-center {
+    width: 300px;
+    border: 1px solid #ccc;
+    background: #eee;
+    height: 50px;
+    line-height: 50px;
+    padding-left: 20px;
+    margin: 15px auto;
+}
+
+.menu-left-bottom {
+    width: 300px;
+    background: #000;
+    color: #fff;
+    height: 50px;
+    line-height: 50px;
+    padding-left: 20px;
+    margin: 15px auto;
+    text-align: center;
+}
+
+.menu-right {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    width: 480px;
+    height: 600px;
+    border: 1px solid #ccc;
+    box-shadow: 5px 5px 5px #888888;
+    background: #fff;
+    margin-left: 50px;
+}
+
+.A {
+    display: flex;
+}
+
+.D {
+    display: flex;
+    height: 50px;
+    margin-left: 110px;
+    margin-right: 40px;
+    text-align: justify;
+    margin-top: -10px;
+}
+
+.E {
+    display: flex;
+    color: rgb(248, 107, 56);
+    margin-left: 110px;
+}
+
+.F {
+    display: flex;
+    margin-top: 20px;
+}
+
+.menu-right-top {
+    display: flex;
+    margin-left: 20px;
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+    background: url(img/Live%20music%20Fridays.png);
+    background-size: 100%;
+}
+
+.menu-right-center {
+    display: flex;
+    margin-left: 20px;
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+    background: url(img/Festival.png);
+    background-size: 100%;
+}
+
+.menu-right-bottom {
+    margin-left: 20px;
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+    background: url(img/magic%20show.png);
+    background-size: 100%;
+}
+
+.choose {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    height: 300px;
+    width: 1200px;
+    background: #fff;
+}
+
+.choose-left {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    width: 400px;
+    height: 200px;
+    box-sizing: border-box;
+    padding: 10px 45px;
+}
+
+.choose-left-bottom {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    text-align: center;
+    width: 150px;
+    height: 40px;
+    margin: 0 auto;
+    background-color: orange;
+    color: #fff;
+    line-height: 40px;
+}
+
+.choose-center {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+}
+
+.choose-center-other {
+    display: flex;
+    height: 80px;
+    width: 0px;
+    border: 1px solid #ccc;
+    margin-left: 12px;
+    margin-bottom: 10px;
+}
+
+.choose-center-center {
+    display: flex;
+    background-image: url(img/Or.png);
+    width: 30px;
+    height: 18px;
+    background-size: 100%;
+}
+
+.choose-right {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    width: 400px;
+    height: 200px;
+    box-sizing: border-box;
+    padding: 10px 45px;
+}
+
+.choose-right-bottom {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    text-align: center;
+    width: 200px;
+    height: 50px;
+}
+
+.d {
+    display: flex;
+    margin-left: 100px;
+    background: url(img/Facebook%20Share%20button.png);
+    width: 50px;
+    height: 13px;
+    background-size: 100%;
+}
+
+.e {
+    display: flex;
+    background: url(img/Tweet%20button.png);
+    width: 50px;
+    height: 13px;
+    background-size: 100%;
+    margin-left: 20px;
+}
+
+.footer {
+    display: flex;
+    flex-direction: row;
+    background-color: #000;
+    height: 300px;
+    width: 1200px;
+}
+
+.footer-left {
+    font-weight: bold;
+    color: orange;
+    font-size: 40px;
+    margin-top: 20px;
+    margin-left: 100px;
+}
+
+.footer-cneter {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-left: 250px;
+    margin-top: 20px;
+    color: #fff;
+}
+
+.footer-center-bottom {
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+    font-size: 0.6em;
+}
+
+.footer-right {
+    display: flex;
+    flex-direction: column;
+    margin-left: 250px;
+    margin-top: 20px;
+    margin-right: 40px;
+    color: #fff;
+}
+
+.footer-right-center {
+    display: flex;
+    color: #fff;
+    font-size: 0.9em;
+}
+
+.footer-right-bottom {
+    display: flex;
+    flex-direction: row;
+}
+
+.footer-right-bottom1 {
+    display: flex;
+    background: url(img/Facebook%20icon.png);
+    width: 9px;
+    height: 16px;
+}
+
+.footer-right-bottom2 {
+    display: flex;
+    background: url(img/Twitter%20icon.png);
+    width: 14px;
+    height: 13px;
+    margin-top: 2px;
+    margin-left: 15px;
+}
+
+.footer-right-bottom3 {
+    display: flex;
+    background: url(img/Instagram.png);
+    width: 14px;
+    height: 13px;
+    margin-top: 2px;
+    margin-left: 15px;
+}
+
+.footer-right-bottom4 {
+    display: flex;
+    background: url(img/Trip%20advisor%20icon.png);
+    width: 22px;
+    height: 13px;
+    margin-top: 2px;
+    margin-left: 15px;
+}
+
+#span1 {
+    font-style: italic;
+    font-size: 0.8em;
+}
+
+#span2 {
+    text-decoration: underline;
+}
+
+#span3 {
+    font-size: 0.9em;
+}
+
+#span4 {
+    color: orange;
+}
\ No newline at end of file
diff --git "a/\345\220\203\347\232\204.html" "b/\345\220\203\347\232\204.html"
new file mode 100644
index 0000000000000000000000000000000000000000..e3749581ece8d9c70f069a7bdaa2929ec25aad78
--- /dev/null
+++ "b/\345\220\203\347\232\204.html"
@@ -0,0 +1,272 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <!-- 表示根据设备的大小调整页面显示的宽度-->
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
+    <title>吃的</title>
+    <link rel="stylesheet" href="吃的.css">
+    </link>
+</head>
+
+<body>
+    <div class="body">
+        <div class="head">
+            <div class="head-top">
+                <div class="head-top-left">Voila
+                </div>
+                <div class="head-top-center">
+                    <p>MENU</p>
+                    <span id="span1">
+                        <p>Sit amet constetur</p>
+                        <p>adipisicing elit</p>
+                        <p>Fugit perspiciatis</p>
+                    </span>
+                </div>
+                <div class="head-top-center">
+                    <p>ABOUT</p>
+                    <span id="span1">
+                        <p>Adipisicing elit</p>
+                        <p>Fugit pipsam</p>
+                        <p>ratione numquam</p>
+                    </span>
+                </div>
+                <div class="head-top-center">
+                    <p>EVENTS</p>
+                    <span id="span1">
+                        <p>Ratione numquam</p>
+                        <p>Lorem ipsum dolor</p>
+                        <p>sit amet tetur</p>
+                    </span>
+                </div>
+                <div class="head-top-center">
+                    <p>RESERVATIONS</p>
+                    <span id="span1">
+                        <p>Voluptates animi</p>
+                        <p>cupiditate</p>
+                        <p>similique sint</p>
+                    </span>
+                </div>
+                <div style="margin-left: 40px;margin-top: 20px;color: #fff;">
+                    <p style="color:orange">CONTACT</p>
+                    <span id="span1">
+                        <p>Quis nemo odio</p>
+                        <p>saepe ullam vitae</p>
+                        <p>officiis delectus</p>
+                    </span>
+                </div>
+            </div>
+            <div class="head-middle-up">
+                WELCOME TO VOILA</div>
+            <div class="head-middle-down">
+                We offer mouth watering
+                <span id="span2">French cuisine</span></div>
+            <div class="head-bottom">
+                <div class="head-bottom-left">
+                    SEE&nbsp;MENU</div>
+                <div class="head-bottom-right">
+                    FIND&nbsp;A&nbsp;TABLE</div>
+            </div>
+            <div class="head-footer-up">
+                Scroll down for details</div>
+            <div class="head-footer-down">
+            </div>
+        </div>
+
+        <div style="height: 600px;margin-top: 100px;">
+            <div style="display: flex;">
+                <div style="width: 600px;padding: 20px 50px 0 150px;">
+                    <h2 style="text-align: center;">About Voila Restaurant</h2>
+                    <span id="span3">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donecconvallis lorem nec enim tempus
+                            viverra condimentum egetdui.Quisque ac ornare orci lacinia facilisis velit
+                            <span id="span4">eget interdum.</span></p>
+                        <p>Quisqueorci neque, euismod vitae turpis quis, accumsan iaculis velit. Nulla lacinia facilisis
+                            velit
+                            eget interdum.</p>
+                    </span>
+                    <div style="width: 200px;
+                        height:40px;
+                        background: orange;color: #fff;
+                        text-align: center;
+                        line-height: 40px;
+                        margin-top: 50px;
+                        margin-left: 300px;">
+                        READ MORE</div>
+                </div>
+                <div style="width: 600px;
+                    height:390px;
+                    background-image: url(img/glass%20of%20wine.png);
+                    background-size: 100%;">
+                </div>
+            </div>
+            <div style="display: flex;">
+                <div style="margin-left: 200px;
+                    margin-top:-100px;
+                    width: 700px;
+                    height:350px;
+                    background: url(img/Eric-McGregor-flickr.png);
+                    background-size: 100%;">
+                </div>
+                <div style="margin:100px 20px 0 20px;
+                    width: 300px;
+                    height:150px;
+                    background-image: url(img/Restaurant%20kitchen.png);
+                    background-size: 100%;">
+                </div>
+                <div style="margin:100px 0 0 0;
+                    width: 300px;
+                    height:150px;
+                    background-image: url(img/Beef-steak-pineapple-salad%20Foodies%20Feed.png);
+                    background-size: 100%;">
+                </div>
+            </div>
+        </div>
+        <div class="description">
+            <div class="description-left">
+                <div class="description-left-top">
+                    <div class="description-left-top1"></div>
+                    <div class="description-left-top2"></div>
+                </div>
+                <div class="description-left-bottom"></div>
+            </div>
+            <div class="description-right">
+                <h2>Tasteful French Cuisine</h2>
+                <p>Lorem lpsum roin gravida nibh vel velit auctor aliquet.AeneaniDoum.necaiis semibhidel.tDuis sed odio
+                    sit amet nibh vulputate cursus a sit amet mauris.Morbi accumsan ipsum velit. Nam nec tellus a odio
+                    tinciduntauctor a ormnare odio. This duis sed odio sit amet nibh cursus asit amet mauris. Morbi
+                    accumsan ipsum vulputate.</p>
+                <div class="description-right-bottom">VIEW MENU</div>
+            </div>
+        </div>
+
+        <div class="menu">
+            <div class="menu-left">
+                <h2 style="text-align: center;margin-top: 70px;margin-bottom: 40px;">Make a Reservation</h2>
+                <div class="menu-left-top">
+                    Name<img style="margin-left: 220px;" src="img/User-icon.png" /></div>
+                <div class="menu-left-center">
+                    Date<img style="margin-left: 230px;" src="img/Date-icon.png" /></div>
+                <div class="menu-left-center">
+                    Time<img style="margin-left: 230px;" src="img/Time-icon.png" /></div>
+                <div class="menu-left-center">
+                    Commensals<img style="margin-left: 170px;" src="img/commensals-icon.png" /></div>
+                <div class="menu-left-bottom">
+                    FIND A TABLE</div>
+            </div>
+            <div class="menu-right">
+                <h2 style="text-align: center;margin-top: 70px;margin-bottom: 40px;">Upcoming Events</h2>
+                <div class="A">
+                    <div class="menu-right-top">
+                    </div>
+                    <div style="margin-left: 20px;margin-top: -20px;">
+                        <h3 style="color: rgb(248,107,56);margin-left: -46px;">Live Music Fridays</h3>
+                        <div style="display: flex;margin-top: -10px;">
+                            <img src="img/Date-icon.png" width="16px" height="16px" />
+                            <div style="margin-left: 5px;margin-top: -3px;">February 28th</div>
+                            <img src="img/Time-icon.png" width="16px" height="16px" style="margin-left: 5px;" />
+                            <div style="margin-left: 5px;margin-top: -3px;">6:00 PM</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="D">
+                    <span id="span3"> Morbi accumsan ipsum. Nam nec tellus aodio auctor a ornare odio non mauris.</span>
+                </div>
+                <div class="E"><span id="span3">Read more...</span></div>
+
+                <div class="F">
+                    <div class="menu-right-center">
+                    </div>
+                    <div style="margin-left: 20px;margin-top: -20px;">
+                        <h3 style="color: rgb(248,107,56);margin-left: -1px;">Louis XII Food Festival</h3>
+                        <div style="display: flex;margin-top: -10px;">
+                            <img src="img/Date-icon.png" width="16px" height="16px" />
+                            <div style="margin-left: 5px;margin-top: -3px;">March 12th</div>
+                            <img src="img/Time-icon.png" width="16px" height="16px" style="margin-left: 5px;" />
+                            <div style="margin-left: 5px;margin-top: -3px;">12:00 PM</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="D">
+                    <span id="span3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum atque, optio
+                        veritatis.
+                    </span></div>
+                <div class="E"><span id="span3">Read more...</span></div>
+
+                <div class="F">
+                    <div class="menu-right-bottom">
+                    </div>
+                    <div style="margin-left: 20px;margin-top: -20px;">
+                        <h3 style="color: rgb(248,107,56);">Magic show with Karim Diaw</h3>
+                        <div style="display: flex;margin-top: -10px;">
+                            <img src="img/Date-icon.png" width="16px" height="16px" />
+                            <div style="margin-left: 5px;margin-top: -3px;">March 22nd</div>
+                            <img src="img/Time-icon.png" width="16px" height="16px" style="margin-left: 5px;" />
+                            <div style="margin-left: 5px;margin-top: -3px;">8:00 PM</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="D">
+                    <span id="span3"> Vel aliquid porro repellendus neque impeditassumenda quas a libero.</span></div>
+                <div class="E"><span id="span3">Read more...</span></div>
+            </div>
+        </div>
+        <div class="choose">
+            <div class="choose-left">
+                <h2>Book a Table</h2>
+                <p>Like our restaurant concept? Book a table and taste our dishes on first hand.</p>
+                <div class="choose-left-bottom">
+                    BOOK A TABLE</div>
+            </div>
+            <div class="choose-center">
+                <div class="choose-center-other">
+                </div>
+                <div class="choose-center-center"></div>
+                <div class="choose-center-other"></div>
+            </div>
+            <div class="choose-right">
+                <h2>Tell to Your Friends</h2>
+                <p>Some of your friends may like to visit if yourecommend us.They'll trust your taste!</p>
+                <div class="choose-right-bottom">
+                    <div class="d">
+                    </div>
+                    <div class="e">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="footer">
+            <div class="footer-left">Voila</div>
+            <div class="footer-cneter">
+                <p>NAVIGATION</p>
+                <div class="footer-center-bottom">
+                    <p>MENU</p>
+                    <p>ABOUT</p>
+                    <p>EVENTS</p>
+                    <p>RESERVATIONS</p>
+                    <p>CONTACT</p>
+                </div>
+            </div>
+            <div class="footer-right">
+                <p>VISIT US</p>
+                <div class="footer-right-center">
+                    <p>Nec sagittis sem nibh id elit. Duis sedodio sit amet nibh.
+                        <span id="span4">View on the map.</span></p>
+
+                </div>
+                <p style="margin-top: 40px;">CONNECT WITH US</p>
+                <div class="footer-right-bottom">
+                    <div class="footer-right-bottom1"></div>
+                    <div class="footer-right-bottom2"></div>
+                    <div class="footer-right-bottom3"></div>
+                    <div class="footer-right-bottom4"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file