finished mideterm

Nathan95567 · Oct 17, 2023 · 98d92ed · 98d92ed
1 parent fe8b964
commit 98d92ed
Show file tree

Hide file tree

Showing 17 changed files with 197 additions and 46 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/homeworks/.DS_Store b/homeworks/.DS_Store
diff --git a/midterm/.DS_Store b/midterm/.DS_Store
diff --git a/midterm/Orderonline.html b/midterm/Orderonline.html
@@ -4,18 +4,91 @@
         <title>Welcome Page</title>
     </head>
     <body>
-        <div id="title">Welcome to Deheng's website</div>
-            <div id="navbar">
-                <a href="https://nathan95567.github.io/homepage"class="navbar-item">Homepage</a>
-                <a href="https://linkedin.com/in/deheng-peng"class="navbar-item">Linkedin</a>
-                <a href="https://github.com/Nathan95567"class="navbar-item">Github</a>
-                <a href="https://leetcode.com/Nathan95567/"class="navbar-item">LeetCode</a>
-                <a href="https://www.kaggle.com/deheng7733"class="navbar-item">Kaggle</a>
-                <a href="https://nathan95567.github.io/portfolio"class="navbar-item">Portfolio</a>
+        <div id="navbar">
+                <div id="title">
+                    Welcome to Ethiopia Restaurant
+                </div>
+                <div class="navbar--button--area">
+                    <button class="nav--button">
+                        <a href="index.html"class="navbar-item">
+                            Home
+                        </a>
+                    </button>
+                    <button class="nav--button">
+                        <a href="Orderonline.html"class="navbar-item">
+                            Menu
+                        </a>
+                    </button>
+                    <button class="nav--button">
+                        <a href="Orderonline.html"class="navbar-item">
+                            Special
+                        </a>
+                    </button>
+                    <button class="nav--button">
+                        <a href="Orderonline.html"class="navbar-item">
+                            Location
+                        </a>
+                    </button>
+                    <button class="nav--button">
+                        <a href="Orderonline.html"class="navbar-item">
+                            Order online
+                        </a>
+                    </button>
+                </div>
         </div>
         <div class="content">
-            <div>
-                <p>Under Construction</p>
+            <div class="cuisine2">
+                <img src="assets/img/3.jpeg", width="250"/>
+                <p>
+                    Food name: Food A<br>
+                    Price: $A
+                </p>
+                <img src="assets/img/4.jpeg", width="250"/>
+                <p>
+                    Food name: Food B<br>
+                    Price: $B
+                </p>
+                <img src="assets/img/5.jpeg", width="250"/>
+                <p>
+                    Food name: Food C<br>
+                    Price: $C
+                </p>
+            </div>
+            <div class="centered-content">
+                <div class="bottom_timeAndAddress">
+                    <p><strong>
+                        OPENING HOURS
+                    </strong></p>
+                    <p>
+                        EVERYDAY 11:30 am - 9:00 pm
+                    </p>
+                    <p><strong>
+                        ETHIOPIA RESTAURANT
+                    </strong></p>
+                    <p>
+                        2955 Telegraph Ave,<br>
+                        Berkeley, CA 94705<br>
+                        (510) 843-1992
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div class="bottombar">
+            <div class="bottom--button bottom--button--INSTAGRAM">
+                <img src="assets/img/Instagramlogo.jpg" width=50px alt="INSTAGRAM">
+                IG
+            </div>
+            <div class="bottom--button bottom--button--FACEBOOK">
+                <img src="assets/img/facebooklogo.jpg" width=50px alt="FACEBOOK">
+                FB
+            </div>
+            <div class="bottom--button bottom--button--YELP">
+                <img src="assets/img/yelplogo.jpg" width=50px alt="YELP">
+                YELP
+            </div>
+            <div class="bottom--button bottom--button--GOOGLE">
+                <img src="assets/img/googlelogo.jpg" width=50px alt="GOOGLE">
+                GOOGLE
             </div>
         </div>
     </body>

diff --git a/midterm/assets/.DS_Store b/midterm/assets/.DS_Store
diff --git a/midterm/assets/css/style.css b/midterm/assets/css/style.css
@@ -1,8 +1,11 @@
+html {
+    background-color:#333;
+}
 #navbar {
     display: flex; 
     justify-content: space-between; 
-    background-color: #333; 
-    color: white; 
+    background-color: blanchedalmond; 
+    color: black; 
     padding: 10px; 
 }
 .nav--button--area{
@@ -16,12 +19,11 @@
     font-size:14px;
     color:#fff;
 }
-/* Style the navbar items */
 .navbar-item {
     margin-right: 20px; /*Add margin between navbar items */
     margin-left: 20px;
     text-decoration: none; /* Remove underline from links */
-    color: gree; /* Set text color for links */
+    color: black; /* Set text color for links */
 }
 /* .navbar-item:hover {
     transform: scale(1.25);
@@ -32,9 +34,72 @@
     align-items: center; /* Center content vertically */
 }
 .content {
-    justify-content: center; /* Center content horizontally */
-    align-items: center; /* Center content vertically */
+    width:100%;
+}
+#title_pic, #now_serving {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+#order_button {
+    position: absolute;
+    bottom: 300px;
+    left: 45%;
+    transform: translateY(-45%);
+    padding: 20px;
+    background-color: wheat;
+}
+#title_pic {
+    position: relative;
+    opacity: 0.8;
+}
+.cuisine{
+    margin-left: 100px;
+    margin-right: 100px;
+    display: flex;
+    /* flex-direction: row; */
+    justify-content:space-around;
+    text-align: center;
+}
+.cuisine2{
+    margin-left: 100px;
+    margin-right: 100px;
+    display: flex;
+    flex-direction: column;
+    justify-content:center;
+    align-items: center;
+    text-align: center;
+}
+#cuisine1,#cuisine3{
+    margin-bottom: 20px;
+}
+#cuisine2{
+    margin-top: 20px;
+}
+.centered-content {
+    text-align: center;
+}
+.bottom_timeAndAddress{
+    display: inline-block;
+    text-align: center;
 }
 .bottombar {
-    background-color: #333;
+    /* margin: 50px; */
+    display: flex;
+    /* justify-content:space-around; */
+    text-align: center;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+.bottom--button img {
+    display: block; /* Make the image a block element to stack text below it */
+    margin: 10px; 
+}
+.bottom--button:hover {
+    transform: scale(1.25);
+}
+body {
+    color:#fff
 }
+
diff --git a/midterm/assets/img/5.jpeg b/midterm/assets/img/5.jpeg
diff --git a/midterm/assets/img/6.jpeg b/midterm/assets/img/6.jpeg
diff --git a/midterm/assets/img/Instagram-PNGinstagram-icon-png.png b/midterm/assets/img/Instagram-PNGinstagram-icon-png.png
diff --git a/midterm/assets/img/Instagramlogo.jpg b/midterm/assets/img/Instagramlogo.jpg
diff --git a/midterm/assets/img/facebooklogo.avif b/midterm/assets/img/facebooklogo.avif
diff --git a/midterm/assets/img/facebooklogo.jpg b/midterm/assets/img/facebooklogo.jpg
diff --git a/midterm/assets/img/googlelogo.jpg b/midterm/assets/img/googlelogo.jpg
diff --git a/midterm/assets/img/purple-gradiend-social-media-logo_197792-1883.avif b/midterm/assets/img/purple-gradiend-social-media-logo_197792-1883.avif
diff --git a/midterm/assets/img/texturepic.avif b/midterm/assets/img/texturepic.avif
diff --git a/midterm/assets/img/yelplogo.jpg b/midterm/assets/img/yelplogo.jpg
diff --git a/midterm/index.html b/midterm/index.html
@@ -35,51 +35,64 @@
                         </a>
                     </button>
                 </div>
-                <div id="profile_pic">
-                    <img src="assets/img/2.jpeg", alt="big pic" />
-                </div>
         </div>
         <div class="content">
-            <!-- <div id="profile_pic">
-                <img src="assets/img/2.jpeg", alt="big pic" />
-            </div> -->
-            <div id="name">
-                <h1><strong>Deheng Peng</strong></h1>
-            </div>
-            <div id="resume">
-                <h2><a href="pdf/UC Berkeley_Peng_Deheng_Resume_2023.pdf">Resume</a></h2>
+            <div class="top_part">    
+                <div id="title_pic">
+                    <img src="assets/img/6.jpeg", alt="big pic" />
+                </div> 
+                <button id="order_button">
+                    <a href="Orderonline.html">
+                        Order Now
+                    </a>
+                </button>
             </div>
-            <div>
-                <p>Hi! My name is Deheng and I am a senior transfer student at UC Berkeley with a <a href="https://data.berkeley.edu/academics/data-science-undergraduate-studies/data-science-major">data science major</a> (Business Analytics emphasis).</p>
-                <p>Feel free to reach out to me if you have any questions :)Look forward to connecting!</p>   
+            <div id="now_serving">
+                <p>
+                    <h1>
+                        Now serving: Ethiopian, Vegetarian, Poultry, Beef & Lamb
+                    </h1>
+                </p>
             </div>
-            <div>
-                <h3><strong>Currently I am taking website design course and this personal website is Under Construction :)</strong></h3>
+            <div class="cuisine">
+                <img src="assets/img/3.jpeg", id='cuisine1', width="250"/>
+                <img src="assets/img/4.jpeg", id='cuisine2', width="250"/>
+                <img src="assets/img/5.jpeg", id='cuisine3', width="250"/>
             </div>
-            <div>
-                <h3>PigZzz handcrafts!</h3>
-                <p>I am a co-founder of <strong>PigZzz handcrafts</strong>. 
-                    My girlfriend and I used resin, cream glue to make tabletop ornaments, hair clips, mobile phone cases and so on. Business cooperation is welcome.</p>
-            </div>
-            <div id="context_channel">
-                <img src="img/商标.png" width="400"/>
+            <div class="centered-content">
+                <div class="bottom_timeAndAddress">
+                    <p><strong>
+                        OPENING HOURS
+                    </strong></p>
+                    <p>
+                        EVERYDAY 11:30 am - 9:00 pm
+                    </p>
+                    <p><strong>
+                        ETHIOPIA RESTAURANT
+                    </strong></p>
+                    <p>
+                        2955 Telegraph Ave,<br>
+                        Berkeley, CA 94705<br>
+                        (510) 843-1992
+                    </p>
+                </div>
             </div>
         </div>
         <div class="bottombar">
             <div class="bottom--button bottom--button--INSTAGRAM">
-                <img src="assets/img/instagramlogo.jpeg" alt="INSTAGRAM">
-                INSTAGRAM
+                <img src="assets/img/Instagramlogo.jpg" width=50px alt="INSTAGRAM">
+                IG
             </div>
             <div class="bottom--button bottom--button--FACEBOOK">
-                <img src="assets/img/facebooklogo.jpeg" alt="FACEBOOK">
-                FACEBOOK
+                <img src="assets/img/facebooklogo.jpg" width=50px alt="FACEBOOK">
+                FB
             </div>
             <div class="bottom--button bottom--button--YELP">
-                <img src="assets/img" alt="YELP">
+                <img src="assets/img/yelplogo.jpg" width=50px alt="YELP">
                 YELP
             </div>
             <div class="bottom--button bottom--button--GOOGLE">
-                <img src="assets/img/" alt="GOOGLE">
+                <img src="assets/img/googlelogo.jpg" width=50px alt="GOOGLE">
                 GOOGLE
             </div>
         </div>