amazon.css

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
    margin:0px;
    padding:0px;
    font-family: 'poppins';
}

body {
    background-color: rgb(227, 227, 227);
}

.navbar {
    background-color: rgb(0, 0, 17);
    width: 100%;
    height:60px;
}

.navbar img{
width:110px;
height:45px;
padding:15px;
}


.navbar h4{
display:inline-block;
position: absolute;
top:7px;
left:180px;
color:white;
font-size: 14px;
margin:0px;
padding:0px;
}

.navbar h4 span {
    font-family: arial;
    font-size: 12px;
    margin:0px;
    padding:0px;
}

.navbar select {
    width:52px;
    height:40px;
    display:inline-flexbox;
    position: absolute;
    top:10px;
    left:280px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    cursor:pointer;
}

.navbar input {
    width:422px;
    height:36px;
    padding:0px 10px;
    position: absolute;
    top:10px;
    left:332px;
}

.navbar button {
    width:45px;
    height:40px;
    background-color: rgb(255, 185, 54);
    border:0px;
    border-radius: 5px;
    position: absolute;
    top:10px;
    right:547px;
}

.navbar button img {
    width:15px;
    height:15px;
    
}

.select {
    background-color: white;
    padding:10px;
    border-radius: 5px;
    width:340px;
    height:220px;
    position: absolute;
    top:80px;
    right:300px;
    list-style: none;
    visibility: hidden;
    transition: all .2s linear;
    
}

.selectActive {
    visibility: visible;
    transform:scale(1.1);
    
}

.select button {
    width:95%;
    margin:10px;
    background-color: rgb(255, 185, 54);
    border:0;
    border-radius: 5px;
    height: 30px;
    position: absolute;
    top:180px;
    right:0px;
}

.select button:hover {
    visibility: visible;
    border:2px solid white;
}


.select h2 {
    color:black;
    font-size: 14px;
    
    
}

.select #hee {
    color:black;
    font-size: 14px;
    position: absolute;
    right:20px;
    top:9px;
}

.select #span1 {
    position: absolute;
    top:30px;
    right:60px;
}

.select h3 {
    color:black;
    font-size: 16px;
}

.select a {
    font-size: 12px;
    display:flex;
}

.select form {
    color:black;
    display:list-item;
    align-items: center;
    justify-content: center;
}

#Btn {
    width:45px;
    height:40px;
    background-color:transparent;
    border:0px;
    border-radius: 5px;
    position: absolute;
    top:10px;
    right:480px;
    color:white;
    font-size: 15px;
    border:2px solid white;
    cursor : pointer;
}

.nav-bar h2 {
    color:white;
    position: absolute;
    top:10px;
    right:320px;
    font-size: 12px;
    cursor:pointer;
}

.nav-bar h2:hover {
    border-bottom:2px solid rgb(255, 185, 54);
    border-radius: 4px;
}

 
.nav-bar span {
    font-size: 16px;
}

.nav-bar h3 {
    color:white;
    position: absolute;
    top:10px;
    right:210px;
    font-size: 12px;
    cursor:pointer;

}


.nav-bar h3:hover{
    border-bottom:2px solid rgb(255, 185, 54);
    border-radius: 4px;
}

.nav-bar img {
    width:60px;
    height:60px;
    position: absolute;
    top:0px;
    right:100px;
}

.nav-bar h4 {
    position: absolute;
    top:16px;
    right:55px;
    color:white;
    font-size: 17px;
    cursor:pointer;
}

.nav-bar h4:hover {
    border-bottom: 2px solid rgb(255, 185, 54);
    border-radius: 4px;
}
 

.nav-bar #Lol {
    position: absolute;
    top:23px;
    left:155px;
    height:25px;
    width:25px;
}

.subnav {
    background-color: #000732ee;
    height:40px;
    width:100%;
}

.subnav ul {
    display: flex;
    color:white;
    font-size: 14px;
}

.subnav ul li {
    padding:10px;
    list-style: none;
   cursor:pointer;
}

.subnav #head {
    font-size: 14px;
    position: absolute;
    right:10px;
    top:70px;
    color:white;
    cursor:pointer;
}

.subnav #topimg {
    /* width: 1348px;
    height:550px; */
    max-width: 100%;
    height: auto;
    
}

.subnav2 {
    background-color: white;
    height:35px;
    width:1300px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 25px;
    position: absolute;
    top:330px;
}

.block1 {
    width:300px;
    height:370px;
    background-color: white;
    position: absolute;
    top:380px;
    left:25px;
    border-radius: 5px;
    /* background-color: black; */
    cursor:pointer;
}

.block2 {
    width:300px;
    height:370px;
    background-color: white;
    position: absolute;
    top:380px;
    left:340px;
    border-radius: 5px;
    cursor:pointer;
}

.block3 {
    width:300px;
    height:370px;
    background-color: white;
    position: absolute;
    top:380px;
    left:655px;
    border-radius: 5px;
    cursor:pointer;
}

.block1 h2 {
    padding:10px;
    font-size: 21px;
}
.block1 h4 {
    font-size: 12px;
    padding:10px;
    margin: 0px;
}

.block1 #headset {
    width:146px;
    height:95px;
}

.block1 #mouse {
    width:146px;
    height:95px;
    
}

.block1 #keyboard {
    width:146px;
    height:95px;
    position: absolute;
    top:50px;
    left:150px;
}

.block1 #heading1 {
    position: absolute;
    top:150px;
    left:150px;
}

.block1 #chair {
    width:146px;
    height:95px;
    position: absolute;
    top:200px;
    left:150px;
}

.block1 #heading2 {
    position: absolute;
    top:295px;
    left:150px;
}

.block1 a {
    text-decoration: none;
    font-size: 15px;
    padding:10px;
}


.block2 h2 {
    padding:10px;
    font-size: 20px;
}

.block2 img {
    width:280px;
    height:250px;
    margin-left: 10px;
    margin-bottom: 25px;
}

.block2 a {
    text-decoration: none;
    font-size: 15px;
    padding:10px;
}

.block3 h2 {
    font-size: 21px;
    padding:10px;
}

.block3 #jeans {
    width:135px;
    height:85px;
    padding-left: 10px;
}

.block3 #dresses {
    width:135px;
    height:85px;
    padding-left: 10px;
}

.block3 #tops {
    width:135px;
    height:85px;
    padding-right: 10px;
}

.block3 h4 {
    font-size: 12px;
    padding-left:10px;
    margin: 0px;
}

.block3 #tops {
    width:135px;
    height:85px;
    padding-right:10px;
    position: absolute;
    top:50px;
    right:0px;
}

.block3 #shoes {
    width:135px;
    height:85px;
    padding-right:10px;
    position: absolute;
    top:160px;
    right:0px;
}

.block3 #heading3 {
    position: absolute;
    top:142px;
    right:50px;
}

.block3 #heading4 {
    position: absolute;
    top:253px;
    right:45px;
}

.block3 a {
    text-decoration: none;
    font-size: 15px;
    padding:10px;
    position: absolute;
    top:323px
}

.otherblocks  {
    background-color: white;
    width:350px;
    height:140px;
    border-radius: 5px;
    position:absolute;
    right:23px;
    top:380px;
}

.otherblocks #heading5 {
    padding:10px;
    font-size: 20px;
}

.otherblocks #Btn1 {
    width:90%;
    height:35px;
    color:black;
    border-radius: 10px;
    background-color: yellow;
    border:0px;
    margin-left: 17px;
    position: absolute;
    top:80px;
    cursor:pointer;
}

.otherblocks img {
    width:350px;
    height:220px;
    position: absolute;
    right:0px;
    top:151px;
    border-radius: 10px;
}


.block4 {
    width:300px;
    height:370px;
    background-color: white;
    position: absolute;
    top:760px;
    left:25px;
    border-radius: 5px;
    /* background-color: black; */
    cursor:pointer;
}

.block5 {
    width:300px;
    height:370px;
    background-color: white;
    position: absolute;
    top:760px;
    left:340px;
    border-radius: 5px;
    cursor:pointer;
}

.block6 {
    width:300px;
    height:370px;
    background-color: white;
    position: absolute;
    top:760px;
    left:655px;
    border-radius: 5px;
    cursor:pointer;
}

.block7 {
    width:300px;
    height:370px;
    background-color: white;
    position: absolute;
    top:760px;
    left:980px;
    border-radius: 5px;
    cursor:pointer;
}

.block4 h2 {
    padding:10px;
    font-size: 21px;
}

.block4 img {
    width:300px;
    height:280px;
    position: absolute;
    left:0px;
}

.block4 a {
    text-decoration: none;
    font-size: 15px;
    padding:10px;
    position: absolute;
    top:330px;
}

.block5 h2 {
    padding:10px;
    font-size: 21px;
}

.block5 img {
    width:270px;
    height:260px;
    position: absolute;
    left:15px;
}

.block5 a {
    text-decoration: none;
    font-size: 15px;
    padding:10px;
    position: absolute;
    top:330px;
}

.block6 h2 {
    padding:10px;
    font-size: 21px;
}

.block6 img {
    width:270px;
    height:260px;
    position: absolute;
    left:15px;
}

.block6 a {
    text-decoration: none;
    font-size: 15px;
    padding:10px;
    position: absolute;
    top:330px;
}

.block7 h2 {
    padding:10px;
    font-size: 21px;
}

.block7 #dressess{
    width:135px;
    height:85px;
    padding-left: 10px;
}

.block7 #jackets {
    width:135px;
    height:85px;
    padding-left: 10px;
}



.block7 #knits {
    width:135px;
    height:85px;
    padding-right:10px;
    position: absolute;
    top:50px;
    right:0px;
}

.block7 #jwelary {
    width:135px;
    height:85px;
    padding-right:10px;
    position: absolute;
    top:160px;
    right:0px;
}

.block7 #heading6 {
font-size: 12px;
padding:0px;
padding-left:10px;
}

.block7 #heading7 {
    font-size: 12px;
    padding-left: 10px;
}

.block7 #heading8 {
    position: absolute;
    top:142px;
    right:110px;
    font-size: 12px;
}

.block7 #heading9 {
    position: absolute;
    top:253px;
    right:100px;
    font-size: 12px;
}

.block7 a {
    text-decoration: none;
    font-size: 15px;
    padding:10px;
    position: absolute;
    top:330px;
}


.blocks4567 {
    border-bottom: 4px solid grey;
    height:500px;
}

.footer {
    background-color: rgb(0, 0, 47);
    width:100%;
    height:600px;
    margin-top: 20px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    
}

.footer #head1 {
    color:white;
    font-size: 20px;
    margin:10px;
}

.footer #col-1 a {
    color:white;
    text-decoration: none;
    font-size: 15px;
}

.footer #col-1 a:hover {
    text-decoration: underline;
}

.footer #head2 {
    color:white;
    font-size: 20px;
    margin:10px;
}

.footer #col-2 a {
    color:white;
    text-decoration: none;
    font-size: 15px;
}

.footer #col-2 a:hover {
    text-decoration: underline;
}

.footer #head3 {
    color:white;
    font-size: 20px;
    margin:10px;
}

.footer #col-3 a {
    color:white;
    text-decoration: none;
    font-size: 15px;
}

.footer #col-3 a:hover {
    text-decoration: underline;
}

.footer img {
    width:350px;
    height:140px;
    position:absolute;
    bottom:-740px;
}