amazon-style.css

*{
    padding: 0px;
    margin: 0px;
    border: border-box;
    font-family:Arial;
}


.navbar{
    background-color: #0f1111;
    height: 65px;
    color: white;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

}
.border{
    border: 2px solid transparent;
    border-radius: 2px;
}
.border:hover{
    border: 2px solid white;
}
.nav-left{
    width: 230px;
    height: 60px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-logo{
    width: 110px;
    height: 50px;
    display: flex;
    align-items: center;
}
.nav-logo-picture{
    width: 110px;
    height: 42px;
    background-image: url("PngItem_12080.png");
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 8px;
}
.nav-address{
    width: 90px;
    height: 46px;
    margin-left: 15px;
    margin-top: 15px;
    margin-bottom: 10px;
  
   
}
.add-second{
    display: flex;
    align-items: center;
    
    
}
.nav-address p{
    margin-left: 4px;
}
.add-first{
    margin-left: 3px;
    color: #cccccc;
    font-size: 0.85rem;
}
.add-second p{
    font-weight: 700;
}
.nav-search{
    display: flex;
    justify-content: space-evenly;
    width: 830px;
    height: 46px;  
    border: 3px solid transparent;
    
}
.nav-search:hover{
    border: 3px solid #ec9625;
    border-radius: 3px;
}
.nav-search-select{
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    width: 60px;
    text-align: center;
    font-size: 1rem;
    background-color:#f4f2f2e9;
    border: none;

    
}
.search-icon i{
    background-color:#febd68;
    height: 46px;
    width: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    color: #0f1111;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    
}
.search-area{
    width: 100%;
    border: 0px;
    font-size: 1rem;
 
}
.language-selector{
   
    display: flex;
    background-color: #0f1111;
}
.nav-tools-layout{
    width: 420px;
    height: 58px;
    display:flex;
    justify-content: space-between;
    align-items: center;
   
}
.cart{
    display: flex;
    height: 40px;
    justify-content: center;
    align-items: center;

}
.cart i{
    font-size: 1.3rem;
    color: #febd68;

}
.cart p{
    font-size: 1.3rem;
    font-weight: 700;
}
.sign-in p{
    font-size: 0.85rem;

}
.return p{
    font-size: 0.85rem;
}
.sign-in div{
    font-weight: 700;
}
.return div{
    font-weight: 700;
}
.panel{
    background-color: #232f3e;
    height: 43px;
    color: white;
    display: flex;
    align-items: center;

}

.option-panel{
    display: flex;
    margin-right: 15px;
    width: 500px;
    justify-content: space-evenly;
}
.menu-panel {
    width: 58px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.option-panel p{
    height: 35px;
    display: flex;
    align-items: center;
}
.menu-panel {
    height: 35px;
    display: flex;
    align-items: center;
}
.hero{
    height: 450px;
    background-color: pink;
    background-image: url(background-image-amazon.jpg);
    background-size:cover;
    margin: 0px 10px 0px 10px;
}
.content-area{
    height: 1200px;
    display: flex;
    flex-wrap: wrap;
    background-color: #e3e6e6;

   
}
.content-box-1{
    width: 360px;
    height: 380px;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 15px;

}
.content-box-2{
    width: 360px;
    height: 380px;
    background-color: white;
    display: flex;
    flex-direction: column;
    margin-left: 15px;

}
.content-box-3{
    width: 360px;
    height: 380px;
    background-color: white;
    display: flex;
    flex-direction: column;
    margin-left: 15px;

}

.content-box-1 div{
    height:120px ;
    width:170px ;
    background-color: aliceblue;
    
    
}
.headset{
    background-image: url(Fuji_Quad_Headset_1x._SY116_CB667159060_.jpg);
    background-size: cover;
}
.keyboard{
    background-image: url(Fuji_Quad_Keyboard_1x._SY116_CB667159063_.jpg);
    background-size: cover;
}
.computer-mice{
    background-image: url(Fuji_Quad_Mouse_1x._SY116_CB667159063_.jpg);
    background-size: cover;
}
.chair{
    background-image: url(Fuji_Quad_Chair_1x._SY116_CB667159060_.jpg);
    background-size: cover;
}
.content-box-1 a p{
    color: #007185;
   
}
.content-box-1 a{
    text-decoration: none;
}
.content-box-2-img{
    height: 320px;
    width: 340px;
    background-color: #febd68;
    background-image: url(new\ year\ new\ supplies.jpg);
    background-size: cover;
    margin-left: 10px;
}
.content-box-2 a {
    text-decoration: none;
    color: #007185;
}
.content-box-3-img{
    height: 320px;
    width: 340px;
    background-color: #febd68;
    background-image: url(Fuji_Desktop_Single_image_EBF_1x_v1._SY304_CB573698005_.jpg);
    background-size: cover;
    margin-left: 10px;
}
.content-box-3 a {
    text-decoration: none;
    color: #007185;
}
.content-box-4{
    width: 360px;
    height: 380px;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 15px;

}
.content-box-4 div{
    height:160px ;
    width:155px ;
    background-color: aliceblue;
    margin-left: 10px;
    
    
}
.Dining{
    background-image: url(dining.jpg);
    background-size: cover;
}
.Home{
    background-image: url(home.jpg);
    background-size: cover;
}
.Kitchen{
    background-image: url(kitchen.jpg);
    background-size: cover;
}
.Health-and-beauty{
    background-image: url(health\ and\ beauty.jpg);
    background-size: cover;
}
.content-box-4 a p{
    color: #007185;
   
}
.content-box-4 a{
    text-decoration: none;
}
.content-box-4 div{
    color: white;
}
.content-box-5{
    width: 360px;
    height: 380px;
    background-color: white;
    display: flex;
    flex-direction: column;
    margin-left: 15px;
   

}
.content-box-5-img{
    height: 320px;
    width: 340px;
    background-color: #febd68;
    background-image: url(toys\ under\ $25.jpg);
    background-size: cover;
    margin-left: 10px;
}
.content-box-5 a {
    text-decoration: none;
    color: #007185;
}
.content-box-6{
    width: 360px;
    height: 380px;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 15px;

}
.content-box-6 div{
    height:160px ;
    width:155px ;
    background-color: aliceblue;
    margin-left: 10px;
    
}
.headphone{
    background-image: url(headphones.jpg);
    background-size: cover;
}
.guitar{
    background-image: url(guitars.jpg);
    background-size: cover;
}
.keyboard{
    background-image: url(keyboards.jpg);
    background-size: cover;
}
.microphone{
    background-image: url(microphones.jpg);
    background-size: cover;
}
.content-box-6 a p{
    color: #007185;
   
}
.content-box-6 a{
    text-decoration: none;
}
.content-area div:hover{
    border: 2PX solid red;
}
.content-box-7{
    width: 360px;
    height: 380px;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 15px;

}
.content-box-7 div{
    height:160px ;
    width:155px ;
    background-color: aliceblue;
    margin-left: 10px;
    
    
}
.jeans{
    background-image: url(jeans\ under.jpg);
    background-size: cover;
}
.tops{
    background-image: url(tops\ under.jpg);
    background-size: cover;
}
.dresses{
    background-image: url(dress\ under.jpg);
    background-size: cover;
}
.shoes{
    background-image: url(shoes\ under.jpg);
    background-size: cover;
}
.content-box-7 a p{
    color: #007185;
   
}
.content-box-7 a{
    text-decoration: none;
}
.content-box-7 div{
    color: white;
}

.content-box-8{
    width: 360px;
    height: 380px;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 15px;

}
.content-box-8-box1{
    width: 350px;
    height: 160px;
    
    margin-left: 5px;
    background-image: url(smartphones.jpg);
    background-size: cover;
}
.content-box-8-box2{
    width: 350px;
    height: 150px;
   
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-left: 5px;
}
.content-box-8-box2 div{
    width: 31%;
    height: 95%;
    

}
.tablets{
    background-image: url(tablets.jpg);
    background-size: cover;
}
.laptops{
    background-image: url(laptops.jpg);
    background-size: cover;
}
.tvs{
    background-image: url(tvs.jpg);
    background-size: cover;
}
.content-box-8 a{
    text-decoration: none;
}
.content-box-9{
    width: 360px;
    height: 380px;
    background-color: white;
    display: flex;
    flex-direction: column;
    margin-left: 15px;
   

}
.content-box-9-img{
    height: 320px;
    width: 340px;
    background-color: #febd68;
    background-image: url(home\ decor.jpg);
    background-size: cover;
    margin-left: 10px;
}
.content-box-9 a {
    text-decoration: none;
    color: #007185;
}
.content-box-10{
    width: 360px;
    height: 380px;
    background-color: white;
    display: flex;
    flex-direction: column;
    margin-left: 15px;
   

}
.content-box-10-img{
    height: 290px;
    width: 340px;
    background-color: #febd68;
    background-image: url(smartwatch.jpg);
    background-size: cover;
    margin-left: 10px;
}
.content-box-10 a {
    text-decoration: none;
    color: #007185;
}
.content-box-11{
    width: 360px;
    height: 380px;
    background-color: white;
    display: flex;
    flex-direction: column;
    margin-left: 15px;
   

}
.content-box-11-img{
    height: 320px;
    width: 340px;
    background-color: #febd68;
    background-image: url(new\ day\ to\ work.jpg);
    background-size: cover;
    margin-left: 10px;
}
.content-box-11 a {
    text-decoration: none;
    color: #007185;
}
.content-box-12{
    width: 360px;
    height: 380px;
    background-color: white;
    display: flex;
    flex-direction: column;
    margin-left: 15px;
   

}
.content-box-12-img{
    height: 320px;
    width: 340px;
    background-color: #febd68;
    background-image: url(gamings\ paradise.jpg);
    background-size: cover;
    margin-left: 10px;
}
.content-box-12 a {
    text-decoration: none;
    color: #007185;
}
.sign-in-area{
    height: 180px;
    width: 100%;
    background-color: white;
    margin-bottom: 10px;
}

.sign-in-area{
    display: flex;
    justify-content: center;
    align-items:center;
    display: flex;
    justify-content: center;
    border: 2px solid grey;
    border-radius: 4px;
    height: 95%;
    width: 99%;
    margin-left: 6px;
}
.sign-in-area2{
    width: 400px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.sign-in-button{
    height: 20px;
    width: 250px;
    background-color:#ffc634;
}
.sign-in-area2 p{
    font-size: 0.85rem;
}
.sign-in-area2 button{
    background-color: #ffc634;
    border-color: #ffc634;
    border-radius: 4px;
}
.sign-in-area2 a{
    text-decoration: none;
    color: #007185;
}
.back-to-top{
    height: 50px;
    width: 100%;
    background-color:#37475a;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer{
    height: 350px;
    width: 100%;
    background-color: #232f3e;
    display: flex;
    justify-content:space-around;
    color: white;
}
#details-in-footer{
    font-size: 0.75rem;  
}

.information-in-footer1{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 150px;
}
.information-in-footer2{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 200px;
}
.information-in-footer3{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100px;
}
.information-in-footer4{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 200px;
}
.footer2{
    display: flex;
    width: 68%;
    justify-content: space-evenly;
    margin-top: 50px;
}