# Project: Web Page UI # codepen URL https://codepen.io/zz2748/pen/abZOWax https://hackmd.io/ # Problem > Experience Some people may be curious about what a coffee shop is ording, but they don't want to go to that coffee shop in person. > Interact Some people want to order things online because it is more efficient. # Solution > Experience Users of this web page can know what is offering in this coffee shop. > Interact Users of this web page can order the coffee they like via browsing the menu and find relevant information they are interested in. # Specification ## The top bar ![](https://i.imgur.com/lRUWMDr.png) * by clicking find a store, a google map will pop up. * If the user's automatic positioning system is on, it will automatically retrieve the nearest cafe to the user. ![](https://i.imgur.com/cpEtcUh.png) * by clicking the button [sign in], a new wizard will * users who are already members can log in directly with their existing accounts and passwords ![](https://i.imgur.com/xkoQn7v.png) * by clicking the button [join now], a new wizard will pop up automatically. * Users can choose to register as members of the coffee shop voluntarily. ```htm;=001 <!doctype html> <html> <head> <meta charset="utf-8"> <title>home</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="banner"> <ul class="nav"> <li><span><img src="https://png.pngtree.com/png-vector/20190115/ourmid/pngtree-vector-search-icon-png-image_320926.jpg" alt="" width="26"></span>&nbsp;find a store</li> <li><a href="#">Sign in</a></li> <li><a href="#" class="join-now">Join now</a></li> </ul> ``` ## The search engine bar ![](https://i.imgur.com/Jo8ymJ0.png) * type in the kind of coffee you'd like to order * the web page will directly jump to the details of that kind of coffee ```html=+ <div class="bg"> <h1>Coffee is what makes your day!</h1> <div class="search"> <button><img src="https://i.pinimg.com/originals/e7/d4/50/e7d450d8c31ae10aa663d082fdbb3db9.png" alt="" width="43"></button> <input type="text" placeholder="search for a cup of coffee"> </div> </div> </div> ``` ## Left component ![](https://i.imgur.com/igdlTig.png) * by seletcing the detailed order information, then completing the detailed personal information, the users can submit an order by clicking the button [place order], an order will be successfully made to the corressponding coffee shop. The [Reset] button can help the users to clear everything with one click. ```html=+ <div class="main"> <div class="left"> <fieldset> <br> <legend class="title">Order Infomation</legend> <p><span>Order Item:</span> <select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </p> <p><span>Cup Size：</span> <select> <option>Tall (355ml)</option> <option>Grande (473ml)</option> <option>Venti (592ml)</option> </select> </p> <p><span>Temperature:</span> <select> <option>Extra Hot</option> <option>Hot</option> <option>Kid</option> <option>Iced</option> <option>Less Ice</option> <option>No Ice</option> </select> </p> <p><span>Expresso:</span> <select> <option>Standard</option> <option>Decaf</option> </select> </p> <p><span>Milk:</span> <select> <option>Whole milk</option> <option>Skim milk</option> <option>Soy milk</option> </select> </p> <p><span>Syrup:</span> <select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </p> </fieldset> <br> <fieldset> <br> <legend class="title">Your details</legend> <p><span>Name:</span> <input type="text" class="ipt"> </p> <p><span>Phone number (verified):</span> <input type="text" class="ipt"> </p> <p><span>Address:</span> <input type="text" class="ipt"> </p> <p><span>Expected delivery time:</span> <input type="date" class="ipt"> </p> </fieldset> <div class="btn"> <input type="button" value="Place Order"> <input type="button" value="Reset"> </div> </div> ``` ## Right component ![](https://i.imgur.com/SXl85ZN.png) * by clicking the icon, the detailed introduction wizard will pop out automatically to let the users know more about the product. ```html=+ <div class="right"> <ul class="menu"> <li><a href="#">Hot Coffees</a></li> <li><a href="#">Hot Teas</a></li> <li><a href="#">Hot Drinks</a></li> <li><a href="#">Frappuccino</a></li> <li><a href="#">Cold Coffees</a></li> <li><a href="#">Iced Teas</a></li> <li><a href="#">Cold drinks</a></li> </ul> <div class="coffee"> <div class="tit">Menu<br> Drinks</div> <ul> <li><img src="https://globalassets.starbucks.com/assets/f12bc8af498d45ed92c5d6f1dac64062.jpg?impolicy=1by1_wide_1242" alt="" width="50"><span>Americano</span></li> <li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS8SGJuej04SMB9KJ1unkwcqgfmG_Z8xXhhfw&usqp=CAU" alt="" width="50"><span>Caffe Misto</span></li> <li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRJyZ1q6jHz3dC9bEOVzABGaEOvvcudWQ3X5g&usqp=CAU" alt="" width="50"><span>White Chocolate Moch</span></li> <li><img src="https://globalassets.starbucks.com/assets/259c28ab81a34479b56afa212329930b.jpg?impolicy=1by1_wide_1242" alt="" width="50"><span>Pumpkin Cream Cold Brew</span></li> <li><img src="https://globalassets.starbucks.com/assets/5c515339667943ce84dc56effdf5fc1b.jpg?impolicy=1by1_wide_1242" alt="" width="50"><span>Cappuccino</span></li> <li><img src="https://globalassets.starbucks.com/assets/fedee22e49724cd09fbcc7ee2e567377.jpg?impolicy=1by1_wide_1242" alt="" width="50"><span>Flat White</span></li> <li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRQAB_Z5YJ0VtBzmZM4KV94ZsAk5ApNNuJJNw&usqp=CAU" alt="" width="50"><span>Caffè Vanilla Frappuccino</span></li> <li><img src="https://globalassets.starbucks.com/assets/e4d9e996eb64453eb3ac7adb570c9b7b.jpg?impolicy=1by1_wide_1242" alt="" width="50"><span> Cookie Frappuccino</span></li> <li><img src="https://globalassets.starbucks.com/assets/58db701349cb48738069e8c912e2b3ac.jpg?impolicy=1by1_wide_1242" alt="" width="50"><span>Caramel Macchiato</span></li> <li><img src="https://globalassets.starbucks.com/assets/a5e64777b3cc412e9239b8a37328cb37.jpg?impolicy=1by1_wide_1242" alt="" width="50"><span>Honey Citrus Mint Tea</span></li> <li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRzx5Jl72zKqc0lOIeAJLDM6rM3JnMr2_vRvQ&usqp=CAU" alt="" width="50"><span>Hot Chocolate</span></li> <li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSvkAQIfoFxol6ZEY4EH_zqVZWQ6x4lq64D_Q&usqp=CAU" alt="" width="50"><span>Matcha Green Tea Latte</span></li> <li><img src="https://globalassets.starbucks.com/assets/49bf4333e9d048498a59a5a2b958165f.jpg?impolicy=1by1_wide_1242" alt="" width="50"><span>Chai Tea</span></li> </ul> </div> </div> </div> </body> </html> ``` # Reflection Design a web is not about UI(user interface), sometimes the imagination might be wild, but some function may be hard to realize ;( Css is a good tool to help make the web interface more beautiful and be more well arranged. In the last assignment, I only rely on HTML to do all the arrangement, but in this assignment, I deliberately rely more on CSS to help me beautifier the web page. In the future, I am eager to learn more about Javascript, which can help me realize the functions!