*{ margin : 0; font-family: Arial, Helvetica, sans-serif; border: border-box; } .navbar{ height : 60px; background-color: #0f1111; color : white; display:flex; align-items: center; justify-content: space-evenly; } .nav-logo{ height : 50px; width : 100px; } .logo{ background-image: url("amazon-logo.jpg"); background-size: cover; height : 50px; width :100%; } .border{ border : 1.5px solid transparent; } .border:hover{ border : 1.5px solid white; } .add-first{ color:#cccccc; font-size: 0.85rem; margin-left: 24px; } .add-second{ font-size : 1 rem; } .add-icon{ display: flex; align-items: center; } .nav-search{ display: flex; background-color: pink; justify-content: space-evenly; width: 620px; height: 40px; border-radius: 2px; } .search-select{ background-color: #f3f3f3; width:50px; text-align: left; border-top-left-radius: 2px; border-bottom-left-radius: 2px; border: none; } .search-select:focus { outline: none; } .search-input{ width: 100%; font-size: 1rem; border:none; } .search-icon{ width:45px; display :flex; justify-content: center; align-items: center; font-size: 1.2rem; background-color: rgb(255, 153, 0); border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .nav-search:hover{ border:2px solid orange; } .slideshow { max-width: 500px; margin: 0 auto; overflow: hidden; } .slides { display: flex; transition: transform 0.5s ease; } .slide { min-width: 100%; } /***box 4**/ span{ font-size: 0.7rem; } .nav-second{ font-size: 0.85rem; font-weight: 700px; } /***box5***/ .nav-cart{ font-size: 0.85rem; } .panel{ height:40px; background-color: #222f3d; display : flex; color: white; align-items: center; justify-content: space-evenly; } .panel-ops p{ display : inline; margin-left: 20px; } .panel-ops{ width : 70%; font-size: 0.85rem; } .panel-deals{ font-size: 0.9rem; font-weight: 700s ; } .hero-section{ background-image: url("hero-image.jpg"); height: 400px; background-size: cover; display: flex; justify-content: center; align-items: flex-end; } .hero-msg{ background-color: white; color:black; height: 25px; border-radius: 10px; display:flex; align-items: center; justify-content: center; font-size: 0.85rem; width : 80%; margin-bottom: 25px; } .hero msg a{ color:#007185; } .shop-section{ display:flex; flex-wrap:wrap; justify-content: space-evenly; background-color: #e2e7e6; } .box{ /*border : 2px solid black;*/ height : 400px; width :23%; background-color: white; padding :20px 0px 15px; margin-top: 15px; } .box-img{ height: 300px; background-size:cover; background-repeat: no-repeat; margin-top: 1rem; margin-bottom: 1rem; } .box-content{ margin-left:1rem; margin-right: 1rem; } .box-content p{ color :#007185; padding : 5px; } .box-content h2{ padding: 0 15px; font-size: 1.2rem; } footer{ margin-top: 15px; } .foot-panel1{ background-color:#37475a; color:aliceblue; forced-color-adjust: white; height:50px; display:flex; justify-content: center; align-items:center; font-size:0.85rem; } .foot-panel2 { background-color: #222f3d; color:white; height : 200px; display : flex; justify-content: space-evenly; align-items: center; } ul{ margin-top:10px; } ul a{ display: block; font-size: 0.85rem; margin-top: 10px; color:#dddddd; cursor: pointer; } ul a:hover { text-decoration: none;} .foot-panel3{ background-color: #222f3d; color:white; border-top:0.5px solid white; height : 70px; display: flex; } .policies { height: 8vw; } .pages a { text-decoration: none; color: white; margin-left: 1rem; }