Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
There’s a lot going on with my CSS but I have the nav-link with a fixed position on the top of the page. I am thinking that something else is blocking it from passing but I am not sure what.
Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

.nav-link{
 position: fixed;
 display:flex;
flex-direction: row; 
word-spacing: 2em;
  justify-content: space-around;  
  height: 10px;

}
fieldset{
  height:10px;
 
  align-items:center;
  justify-items:right;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #cc0000;
  color: white;
  font-family: 'Exo 2', sans-serif;
  padding: 1em;
}

header{
  padding-top: -1000px;
  margin-top:-150px;
  margin: 10px 10px;
  display:flex;
  align-items:center;
 
}
header-image{
  width: 200px;
  padding-top:-1400px;
}


h1{
  color: #bf9f11;
  background-color: linen;
  padding: 1.5rem 1.25rem;
  display: flex;
  margin: -2px 5px;
  text-align: right;
}

.img{
  align: left;
  padding-bottom: 10rem;
  margin: 0 auto;
  position: relative;
}

div{
  margin-bottom: -10px;
  margin-top: 2px;

}

body{
  background-color:
  font-family: sans-serif;
}
#nav-bar{
  width:40vw;
font-weight: 600px;
}
ul{
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content: space-around;
}
.logo{

}
li{
  list-style: none;
}
.nav-link{
  position:fixed;
  color: black;
  width: 35px;
}
#hero, #form{
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;
}
#hero input[type="email"]{
  max-width:275px;
  min-width: 100px;
  width: 275;
  height: 30px;
}
#hero input[type="submit"]{
  max-width:150px;
  height: 30px;
  background-color: #fe4266;
  border:none;
  font-weight: 900;
}
.grid{
  display: flex;
  flex-direction: row;
  align-items: center;
  
}
.features{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1000px;
}
.fa-solid{
  color:#fe4266;
  font-size: 50px;
}
.icon{
  width: 15vw;
  display:flex;
  justify-content: center;
  align-item:center;
}
#pricing{
  display:flex;
  flex-direction: row;
  width:100%;
  justify-content: space-around;
  margin-top:60px;
  margin-bottom 90px;
}

#level{
  display: flex;
  flex-direction: row;
  margin-top: 50px;
  padding: 1rem;
}
@media only screen and (min-width: 815px){}body{flex-direction:row} #navbar{
   width:300px;
   height:100%;
   position:fixed;
 }

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

I actually, just got it but it made my page extremely ugly now lol

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.