Tell us what’s happening:
I’m trying in this code for more than two weeks. still I don’t know where I’m lacking. Tried in different way but didn’t get the solution yet. and I’m not get the footer css properly. Can anyone please help me where I’m lacking
Your code so far
*{
padding:0;
margin:0;
box-sizing:border-box;
background-color:#eee;
font-family:sarif;
}
/*nav-bar content*/
#header{
width:100%;
display:flex;
flex-direction:row;
justify-content:space-between;
align-items:center;
height:auto;
position:fixed;
top:0;
}
@media(max-width:600px){
#header{
display:flex;
flex-direction:column;
}
}
#header-img{
max-width:390px;
height:100%;
}
@media (max-width: 600px){
#header-img{
margin:2px 2px;
}
}
.logo{
width:70vw;
max-width:380px;
}
@media (max-width: 600px){
.logo{
margin:5px;
}
}
#nav-bar{
display: flex;
}
@media(max-width:500px){
#nav-bar{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
}
nav> ul{
width:100%;
display:flex;
justify-content:space-between;
list-style:none;
}
@media (max-width: 650px) {
nav > ul {
width:100%;
height:20vw;
flex-direction: column;
justify-content:space-between;
}
}
nav, a{
padding:5px 5px;
margin:10px 10px;
text-decoration:none;
color:black;
}
@media (max-width: 650px){
nav,a{
flex-direction:column;
}
}
a:hover{
color:red;
}
#entry{
width:100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 200px;
margin-top: 90px;
}
@media (max-width: 600px){
#entry{
width:100%;
margin-top:250px;
}
}
#form{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
#email{
margin-top:20px;
width:270px;
height:30px;
padding:0 10px;
background-color:white;
}
#submit{
width:150px;
height:35px;
background-color:yellow;
margin-top:25px;
margin-bottom:50px;
font-weight:bold;
font-size:20px;
border:none;
}
#submit:hover{
background-color:orange;
}
#products{
width:100%;
height:auto;
display:flex;
flex-direction:column;
}
@media (max-width: 600px){
#products{
flex-direction:column;
}
}
.full-details{
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
}
@media (max-width: 600px){
.full-details{
margin-top:30px;
display:flex;
justify-content:center;
align-items:center;
}
}
.product-image{
margin:5px 10px;
padding:10px 5px;
font-size:50px;
color:orange;
}
@media (max-width: 600px){
.product-image{display:none;
}
}
.product-description{
flex-direction:row;
font-size:20px;
padding:20px 20px;
margin:10px ;
margin-right:20px;
}
@media (max-width: 600px){
.product-description{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
}
#source{
display:flex;
justify-content:center;
align-items:center;
margin:50px 50px;
}
@media(max-width:500px){
#source{
max-width: 560px;
width: 100%;
}
}
#trombones{
width:100%;
height:auto;
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
}
@media(max-width:500px){
#trombones{
display:flex;
flex-direction:column;
}
}
.trombone{
width:300px;
height:300px;
margin:15px 10px;
border:ridge 3px;
}
.trombone h1{
background:#ccc;
text-align:center;
}
.trombone p{
display:flex;
justify-content:center;
align-items:center;
padding:8px;
}
.trombone .select{
width:50%;
height:15px;
text-align:center;
border:0;
margin:20px 70px;
padding:20px 40px;
font-weight:bold;
font-size:px;
background-color:yellow;
}
.dollar{
margin-top:5px;
font-weight:bold;
font-size:20px;
}
footer{
margin-top:20px;
background-color:#ddd;
display:flex;
}
footer >li{
justify-content:flex-end;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36 Edg/119.0.0.0
Challenge Information:
Product Landing Page - Build a Product Landing Page
!