Adjusting <h3> and how to use project testing

Hi,

  1. What do you think about my product landing page so far?

https://codepen.io/CoderInCodeCamp/pen/oPgKmo


<!DOCTYPE html>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<header id="header">
  <nav class="Nav-bar" id=nav-bar>
  <img id=header-img src="https://store-images.s-microsoft.com/image/apps.34408.14290170513777332.851d50ac-6195-4729-838d-f7d661e2896a.08c49347-a53c-4d23-8328-30e7a3c428e1?mode=scale&q=90&h=1080&w=1920">
 <ul class="nav-links">
   <li><a href="#features" class="nav-link">FEATURES</a></li>
   <li><a href="#how-to-use-it" class="nav-link">HOW TO USE IT</a></li>
   <li><a href="#pricing" class="nav-link">PRICING</a></li>
    </ul>
    </div>
  </nav>
</header>

<div class="spaceafternav"></div>
<div class="spaceafternav"></div>
<div class="spaceafternav"></div>
<div class="spaceafternav"></div>


 <section id="contact">
    <h3>Contact</h3>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input
        name="email"
        id="email"
        type="email"
        placeholder="Enter your email address"
        required
      />
      <input id="submit" type="submit" value="Get Started" class="btn" />
    </form>
  </section>
 
<div class="container">
 <section id="features">
 <div class="grid">
 <div class="col">
    <h3>Auto Beautifying Effects</h3>
          <p>
            Choose from 14 different auto beautifying effects before you take a selfie!
          </p>
 </div>
 </div>
<div class="spaceafternav"></div>
 <div class="grid">
 <div class="col">
    <h3>Frames, Collages & More</h3>
          <p>
            Make your selfie more interesting with frames, collages, and scene templates. Add text bubble, paint brush, overlays and other effects.
          </p>
 </div>
 </div>
 <div class="spaceafternav"></div>
  <div class="grid">
 <div class="col">
    <h3>Image Cutouts</h3>
          <p>
            Cut out a subject of one photo and add it into another!
          </p>
 </div>
 </div>
 </section>
</div>
  <section id="how-to-use-it">
   <iframe id="video" width="560" height="315" src="https://www.youtube-nocookie.com/embed/6wLv9F3tJB8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </section>
</div>


         
<style = "text/css">

@import 'https://fonts.googleapis.com/css?family=Montserrat:400,700';

body{
background-image: url("https://cdn.pixabay.com/photo/2017/02/16/19/47/bokeh-2072271_960_720.jpg");
}

#header{
  position:fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  //background:#3c0020;
  background: #d80073;  KAUNIS MAGENTA
  height: 0.4vw;
  display: flex;
  font-color: white;
  font-size:medium;
  opacity:0.8;
}
  
  #nav-bar{
  border: 1px, solid, #c85cff;
  display:flex;
  width: 100%;
  //background-color: #111;
  background-color: #d80073;
  //height: 10%;
  height:5%;
  opacity 0.5;
 
  
}

.nav-links{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex:1;
}



#header-img{
  width: 9%;
  /*height:200%;*/
  height:9%;
  margin: 5px;
  border-radius: 60%;
}

ul{
  list-style-type: none;
    
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: "Palatino Linotype", "Book Antiqua",   Palatino, serif;
}

li a:hover {
  //color: #a20025 ;
  //color: #d80073;
  color:black;
}


.nav-link{
  font-weight: 700;
  margin: 10px 10px;
  color: white;
  border: 1px hidden #d80073;
 
}

.spaceafternav{
  height:1em;
}

#features {
  margin-top: 20px;
}


#features .col {
display: flex;
flex-direction: column;
justify-content: center;
height: 120px;
width: 80vw;
padding:5px;

}

 #form {
  width: 100%;
  display: flex;
 
}

.container {
  max-width: 1000px;
  width: 100%;
 
}





#features {
  margin-top: 25px;

}

.grid {
  display: flex;
 
}

#how-to-use-it {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  margin-bottom:23px;
}

#how-to-use-it > iframe {
  max-width: 500px;
  width: 100%;
}

label{
  margin-left: 10px;
  margin-top: 1px;
  margin-bottom: 2px;
  color:black;
  line-height:.7em;
  padding: 15px;
}

input[type=text], input[type=email]{
  width: 80%;
  padding: 15px;
  outline: none;
  display: inline-block;
  border: none;
  margin-top: 2px;
  margin-left: 7px;
  color: black;
  
}

.button{
  //border: 1px solid #8b00d1;
  //border: 3px solid #df2e8c;
  background: #852eff;
  color: white;
  display: inline-block;
  height: 26px;
  text-align: center;
  //margin-left: 94%;
  margin-right:6px;
  margin-top: 5px;
  margin-top: 0%;
  transition: all 0.5s ease;
  
 
}

.button:hover {
  background: #3c0020;
}



.section{
  width:100%;
  display: flex;
  margin-bottom: 1.5em;
  margin-top: 1em;
  flex-direction: row;
  flex-wrap: wrap;
  //background: #d80073;

}

h3{
    margin-left: 15%;
    color: #240c17;
    margin-top:20px;
    
    
}

p {
  margin: 1em 0;
  padding: 5px;
  /*border: 1px solid #999; */
  border: 1px hidden;
  color: #240c17;
  font-size: large;
  margin-left: 20px;
}


#contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 200px;
  
}

#contact input[type="email"] {
  /*background-image: url("https://cdn.pixabay.com/photo/2016/04/14/12/27/pink-1328819_960_720.jpg");*/
  
  margin-left: 6%;
  color: black;
  font-weight: bold;
  border-style: solid;
  border-width:1px;
  background-color:#ffe9ec;
  opacity:0.5;
}

#contact input[type="submit"] {
background-image: url("https://cdn.pixabay.com/photo/2016/03/17/22/30/texture-1264022_960_720.jpg");
color: black;
font-weight: bold;
border-width:1px;
border-style: solid;

}

#contact input[type="submit"]:hover {
  background-image: url("https://cdn.pixabay.com/photo/2014/09/29/10/18/background-465930_960_720.jpg");
  font-weight: bold;
  color: white;
 
}
</style>
  1. How could I get the highest h3 title, which is contact, horizontally/symmetrically to the same distance from margin left, where other titles (such as Auto Beautifying Effects) are?

  2. How does this testing actually work? This link seems to include just code? How can I test my project to see, if it passes all tests? Is passing every single test for every single project a requirement for getting the front end development certificate?

https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js

Well, it looks like you already know how to center using flexbox, see if you can’t apply some flexbox centering to the elements. You will also have to remove the margin-left from the text elements and let flexbox do the positioning for you.

Yes, you need to pass all the test. You can add the script in the Codepen settings. Click the Settings button, go to the JavaScript tab now paste in the script link in one of the lower boxes.

1 Like
  1. If you are going to use Bootstrap you should use the latest version (v4) and use it’s grid system for the layout as much as possible. It has flexbox build in and comes with flex utility classes. It’s OK to add some CSS yourself but when using Bootstrap it is better to use the build-in classes for as much as possible.

  2. I would really suggest using the CSS box for your CSS.

  3. Try using background-repeat and background-size on the body.

body {
  background-image: url(https://cdn.pixabay.com/photo/2017/02/16/19/47/bokeh-2072271_960_720.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
  1. Add margin: 0; to the .nav-links class to get the links vertically centered.

If you want more feedback for the page I would suggest using the Project Feedback forum section.

1 Like

I think it looks pretty good so far.

A couple of suggestions and opinions, feel free to disregard any and all of them if you want:

  1. you do not need a “/>” at the end of the input tag just <input> with the relevant attributes.
  2. As mentioned above by @lasjorg removed the 15% margin-left on the <h3>Contact</h3> to have it centered properly.
  3. for the form flex container, i would add justify-content:center to properly center it within the container rather than using the margin-left:6%
  4. this is more personal preference than anything, but i gave your email input a width:15% and margin-right:1% to shrink down the input field so its not taking up the entire width of the container and and the margin-right to add a small gap between the submit button and the input field.

looks good thus far though, keep up the good work

1 Like