.footermain{ width:70%; height: 700px; margin:auto } .footertop{ width:100%; height: 15%; margin-bottom: 20px; display: flex; } #footerbottom{ width: 100%;; height:80%; border-top:gray 1px solid ; display: flex; border-bottom: gray 1px solid; } #bottom>div{ width:20%; height: 100%; } #footertxt{ font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; margin-top:30px ; padding-right:20px ; } .top>div{ width: 50%; height: 100%; } .subbox1>div{ width:16%; height: 100%; } .subbox1{ display: flex; } .subbox2{ display: flex; } #get{ width:16%; height: 100%; border-left: gray 1px solid; padding-left: 20px; } #bar{ width: 25%; height: 100%; padding-left: 10px; } #learn{ width: 40% ; height: 100%; } #infosi{ background-color: black; color: white; width: 100px; border-radius: 3px; border: transparent; height: 25px; font-family:Helvetica, Arial, sans-serif; cursor: pointer; } .foot{ width: 70%; height: 130px; margin: auto; text-align: center; } .fab{ color: black; margin-left: 30px; } .ad1{ width: 95%; height: 100px; border: green 7px solid; margin: auto; } .ad2{ width: 100%; height: 30px; margin-top: 30px; } #ad3{ width: 100%; height: 100px; margin-top: 30px; } #fullpage{ width: 100%; height: 2100px; display: flex; } #left{ width:20%; height: 700px; margin: 20px; } #right{ width : 70%; height: 100%; margin: 20px; display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(12,400px); line-height: 17px; text-align: center; grid-gap: 20px; } #right>div{ line-height: 17px; } #name{ font-family: "Gotham 7r", Helvetica, Arial, sans-serif; font-size: 17px; color: #666666; } #price{ font-family: "Gotham 7r", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 22px; color: #bd0f1b; } #price2{ font-family: "Gotham 7r", Helvetica, Arial, sans-serif; font-size: 12px; color: gray; text-decoration: line-through; font-weight: 400; } h3{ font-family: "Gotham 7r", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 22px; color: black; text-align: center; } #filterBar{ width: 100%; height: 150px; } select{ width: 200px; height: 50px; font-family: "Gotham 7r", Helvetica, Arial, sans-serif; border: gray 1px solids; } #sort{ margin-left: 25%; font-family: "Gotham 7r", Helvetica, Arial, sans-serif; } option{ width :200px; height: 70px; } .nav{ width: 100%; height: 60px; border-bottom: 1px solid gray; display: flex; background-color: white; } .brand{ font-family: helvetica, arial, sans-serif; margin: 10px 25px; height: 40px; width: 150px; } .search{ width: 490px; height: 40px; margin: 10px 30px; border: 1px solid gainsboro; border-radius: 5px; } input[type = text] { padding: 1px; font-size: 20px; border: none; width: 430px; height: 35px; } button{ width: 50px; height: 35px; border: none; background-color: white; } .account{ float: left; margin: auto; margin-right: 50px; margin-top: 5px; margin-bottom: 0px; } #dropdown{ display: none; width: 300px; height: 350px; background-color: rgb(238,238,238); position: absolute; } .dropdownone{ display: flex; } .dropdownone > button{ width: 100px; background-color: black; color: white; margin: 20px 20px; border-radius: 5px; font-weight: bold; } .dropdownone > a{ font-size: 16px; font-family:"Gotham 5r", Helvetica, Arial, sans-serif; margin-top: 30px; font-weight: bold; } .dropdowntwo{ width: 270px; height: 50px; background-color: white; margin: auto; margin-top: 10px; text-align: center; font-family:"Gotham 5r", Helvetica, Arial, sans-serif ; display: flex; } .dropdowntwo > .fas,span,a{ font-size: 16px; margin: 5px 5px; } .dropdowntwo > h3{ margin-top: 15px; font-weight: normal; } .dropdowntwo > .fa-wallet{ margin-top: 15px; margin-right: 10px; margin-left: 20px; font-size: 20px; } .color{ background-color: rgb(220,238,240); } .cart{ float: left; margin-top: 5px; margin-right: 50px; margin-bottom: 0px; } .checkout{ float: left; margin-right: 20px; margin-top: 5px; margin-bottom: 0px; } p{ margin: 0px 0px ; font-weight: bold; text-align: center; font-family: "Gotham 5r", Helvetica, Arial, sans-serif; font-size: 14px; } img{ margin-left: 10px; } /* menu & help section */ .secnav{ width: 100%; height: 40px; border-bottom: 1px solid gray; display: flex; } .shop{ border-right:1px solid gray; width: 250px; height: 100%; background-color: white; } .fa{ margin-left: 33px; margin-top: 10px; } .fa > span{ font-weight: bold; font-family: "Gotham 5r", Helvetica, Arial, sans-serif; } .mainmenu{ box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; width: 200px; display: none; background-color: white; position: relative; } .mainmenu li a{ font-family:"Gotham 5r", Helvetica, Arial, sans-serif; display: block; text-decoration: none; font-size: 16px; padding: 10px 0px; font-weight:600; position: relative; background-color: white } .selectstore{ height: 100%; width: 230px; font-size: 18px; } .selectstore > .fas{ margin-top: 10px; margin-left: 10px; } .selectstore > span{ font-family: "Gotham 5r", Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; } .coupon{ float: right; margin: auto; margin-right: 50px; } .coupon > span{ font-family: "Gotham 5r", Helvetica, Arial, sans-serif; } .coupon > .fas{ margin-right: 10px; } .help{ float: right; margin-top: 10px; margin-right: 50px; margin-left: 0px; } .help > span{ font-family: "Gotham 5r", Helvetica, Arial, sans-serif; } .help > .far{ margin-right: 10px; } li{ color: black } #deptsub{ cursor: pointer; background-color: white; color: black; border: 1px solid gray; } #leftlab{ font-family: "Gotham 5r", Helvetica, Arial, sans-serif; } #leftselect{ width:100%; border: 1px solid rgb(228, 214, 214); }