diff options
| -rw-r--r-- | index.html | 69 | ||||
| -rw-r--r-- | shared/css/homepage.css | 95 |
2 files changed, 110 insertions, 54 deletions
@@ -9,14 +9,6 @@ <link href="shared/css/homepage.css" rel="stylesheet"> </head> <body> - <!-- <div id="snackbar">Some text some message..</div> - <div class="middle"> - <h1>ECommerce Login</h1> - Email: <input type="email" id="email" placeholder="email"><br><br> - Password: <input type="password" placeholder="password" id="password"><br><br> - <button id="login">Login</button><br><br> - <a href="signup">Not a user? Signup Now!</a> - </div> --> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <a class="navbar-brand" href="#">Firebase ECommerce</a> <button aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarText" data-toggle="collapse" type="button"> @@ -29,26 +21,67 @@ </div> </form> <span class="navbar-text"> - <a id="sign" class="nav-link" style="display: block; width: 100%; padding: .25rem 1.5rem; text-align: inherit; - white-space: nowrap;" href="#">Sign In/ Register</a> + <a class="nav-link" href="#" id="sign" style="display: block; width: 100%; padding: .25rem 1.5rem; text-align: inherit; + white-space: nowrap;">Sign In/ Register</a> <div class="nav-item dropdown"> - <a style="display: none;" aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button"> + <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button" style="display: none;"> My Account </a> - <div style="left: -40px;" aria-labelledby="navbarDropdown" class="dropdown-menu"> + <div + aria-labelledby="navbarDropdown" class="dropdown-menu" style="left: -40px;"> <!-- <h6 style="font-size: 1em; font-weight: 700; padding: .25rem 1.5rem; display: block; width: 100%; -webkit-user-select: none;">Account Management</h6> --> - <a style="color:black;" class="dropdown-item item-black" href="#">My Account</a> - <a style="color:black;" class="dropdown-item item-black" href="#">My Products</a> - <a style="color:black;" class="dropdown-item item-black" href="#">My Orders</a> + <a class="dropdown-item item-black" href="#" style="color:black;">My Account</a> + <a class="dropdown-item item-black" href="#" style="color:black;">My Products</a> + <a class="dropdown-item item-black" href="#" style="color:black;">My Orders</a> <div class="dropdown-divider"></div> - <a style="color:black;" class="dropdown-item item-black" href="#">SignOut</a> + <a class="dropdown-item item-black" href="#" style="color:black;">SignOut</a> </div> </div> </span> </div> </nav> - <div class="container"> - <h1>This site is broken for now. Going under complete rewrite with bootstrap, adding new features.</h1> + <div class="container-fluid"> + <div class="row"> + <div class="sidebar"> + <div class="padded"> + <h6 class="padded-bar">Mobiles and Computers</h6> + <ul class="list-group list-group-flush"> + <li class="list-group-item"><a href="#">Mobile Phones</a></li> + <li class="list-group-item"><a href="#">Mobile Accessories</a></li> + <li class="list-group-item"><a href="#">Cases and Covers</a></li> + <li class="list-group-item"><a href="#">Screen Protectors</a></li> + <li class="list-group-item"><a href="#">Power Banks</a></li> + <li class="list-group-item"><a href="#">Smart Watches</a></li> + <li class="list-group-item"><a href="#">Tablets</a></li> + <li class="list-group-item"><a href="#">Laptops</a></li> + <li class="list-group-item"><a href="#">Desktops</a></li> + <li class="list-group-item"><a href="#">Drives and Storage</a></li> + <li class="list-group-item"><a href="#">Monitors</a></li> + <li class="list-group-item"><a href="#">Printers</a></li> + <li class="list-group-item"><a href="#">Software</a></li> + </ul> + <h6 class="padded-bar">TV, Appliances, Electronics</h6> + <li class="list-group-item"><a href="#">Televisions</a></li> + <li class="list-group-item"><a href="#">Headphones</a></li> + <li class="list-group-item"><a href="#">Cameras</a></li> + <li class="list-group-item"><a href="#">Speakers</a></li> + <li class="list-group-item"><a href="#">Refrigerators</a></li> + <li class="list-group-item"><a href="#">Air Conditioners</a></li> + <li class="list-group-item"><a href="#">Washing Machines</a></li> + <li class="list-group-item"><a href="#">Kitchen/Home Appliances</a></li> + <li class="list-group-item"><a href="#">Heating/Cooling Appliances</a></li> + <li class="list-group-item"><a href="#">Gaming Consoles</a></li> + </div> + </div> + <div class="col-md-10 col-lg-10 col-xl-10 main"> + <div class="container-fluid sale-box"> + <img src="https://m.media-amazon.com/images/G/31/img19/AMS/banners1/Home-Products._CB454409463_.jpg" alt="Home Appliances Sale"> + </div> + <div class="recents"> + <h6>Newly Added Products</h6> + </div> + </div> + </div> </div> <script src="shared/jquery.js"></script> <script crossorigin="anonymous" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> diff --git a/shared/css/homepage.css b/shared/css/homepage.css index 044aec3..9b97325 100644 --- a/shared/css/homepage.css +++ b/shared/css/homepage.css @@ -1,45 +1,68 @@ -#snackbar { - visibility: hidden; - min-width: 250px; - background-color: rgb(231, 81, 81); - color: #fff; - text-align: center; - border-radius: 2px; - padding: 16px; +.padded { + padding: 0px 0px 30px 0px; +} +.padded-bar { + padding: 10px 0px 5px 10px; +} +.sidebar { + height: 100%; position: fixed; z-index: 1; - top: 30px; - right:30px; + left: 0; + overflow-y: scroll; + width: 240px; } -#snackbar.show { - visibility: visible; - -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; - animation: fadein 0.5s, fadeout 0.5s 2.5s; +.main { + margin-left: 245px; + padding-top: 10px; } -@-webkit-keyframes fadein { - from {opacity: 0;} - to { opacity: 1;} +.list-group-item > a { + color: black; + font-size: 0.8em; } - -@keyframes fadein { - from { opacity: 0;} - to { opacity: 1;} +.list-group-item { + padding: .35rem 1.25rem; } -@-webkit-keyframes fadeout { - from {opacity: 1;} - to {opacity: 0;} +::-webkit-scrollbar { + width: 8px; + height: 8px; } - -@keyframes fadeout { - from {opacity: 1;} - to {opacity: 0;} -} -.middle { - margin: 0 auto; - width: 50%; - justify-content: center; - justify-items: center; - align-content: center; - align-items: center; +::-webkit-scrollbar-button { + width: 0px; + height: 0px; +} +::-webkit-scrollbar-thumb { + background: #555555; + border: 0px none #ffffff; + border-radius: 50px; +} +::-webkit-scrollbar-thumb:hover { + background: #262626; +} +::-webkit-scrollbar-thumb:active { + background: #262626; +} +::-webkit-scrollbar-track { + background: #ffffff; + border: 0px none #ffffff; + border-radius: 50px; +} +::-webkit-scrollbar-track:hover { + background: #ffffff; +} +::-webkit-scrollbar-track:active { + background: #ffffff; +} +::-webkit-scrollbar-corner { + background: transparent; +} +.sale-box { + text-align: center; +} +.sale-box > img { + width: 100%; +} +.recents { + padding: 1.5rem; }
\ No newline at end of file |