Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Hi can anybody help? I cant seem to horizontally align the icon and text?

Tell us what’s happening:

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.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

You’ll need to paste your HTML and CSS in here so we can see what you’ve done. To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

1 Like
4 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #ffffff;
  font-family: "Montserrat", sans-serif;
}

#wrapper {
  position: relative;
}

li {
  list-style: none;
}

a {
  color: black;
  text-decoration: none;
}

/* Sets styling for all(global) elements */

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

header {
  position: fixed;
  top: 0;
  min-height: 75px;
  padding: 0px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white;
}

@media (max-width: 600px) {
  header {
    flex-wrap: wrap;
  }
}

.brand-logo {
  width: 60vw;
}

@media (max-width: 650px) {
  .brand-logo {
    margin-top: 15px;
    width: 100%;
    position: relative;
  }
}

.brand-logo > img {
  width: 100%;
  height: 100%;
  max-width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 20px;
}

@media (max-width: 650px) {
  .brand-logo > img {
    margin: 0 auto;
  }
}

nav {
  font-weight: 400;
}

@media (max-width: 650px) {
  nav {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 50px;
  }
  nav li {
    padding-bottom: 5px;
  }
}

nav > ul {
  width: 35vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

@media (max-width: 650px) {
  nav > ul {
    flex-direction: column;
  }
}

#hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 200px;
  margin-top: 50px;
}

#hero-section > h2 {
  margin-bottom: 20px;
  word-wrap: break-word;
}

#hero-section input[type="email"] {
  max-width: 400px;
  width: 100%;
  padding: 5px;
  border:  1.5px solid red;
  border-radius: 9px;
}

#hero-section input[type="submit"] {
  max-width: 150px;
  width: 100%;
  height: 30px;
  margin: 15px 0;
  border: 0;
  background-color: black;
  color: white;
  border-radius: 5px;
  font-size: 15px;
}

#hero-section input[type="submit"]:hover {
  background-color: blue;
  transition: background-color 1s;
}

@media (max-width: 650px) {
  #hero-section {
    margin-top: 120px;
  }
} 

#services {
  margin-top: 30px;
}

#services .service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 125px;
  width: 20vw;
  color: blue;
}

 @media (max-width: 550px) {
   #services .service-icon {
     display: none;
   }
 }

#services .service-description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 125px;
  width: 80vw;
  padding: 5px;
}

@media (max-width: 550px) {
  #services .service-description {
    width: 100%;
    text-align: center;
    padding: 0;
    height: 150px;
  }
}

@media (max-width: 650px) {
  #services {
    margin-top: 0;
  }
}

#work--preview-video {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

#work--preview-video > iframe {
   max-width: 560px;
   width: 100%;
}

#pricing {
  margin-top: 60px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.solution {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: calc(100% / 3);
  margin: 10px;
  border: 1px solid red;
  border-radius: 3px;
}

.solution > .utility {
  background-color: #cfe2fc;
  color: black;
  padding: 15px 0;
  width: 100%;
  text-transform: uppercase;
  font-weight: 700;
}

.solution > h2 {
  margin-top: 15px;
}

.solution > ol {
  margin: 15px;
}

.solution > ol > li {
  padding: 5px 0;
}

.solution > button {
  border: 0;
  margin: 15px 0;
  background-color: black;
  color: white;
}

.solution > button:hover {
  background-color: blue;
  transition: background-color 1s;
}

.quote--btn-sizing {
  padding: 0 20px;
  height: 40px;
  font-size: 1em;
  font-weight: 900;
  text-transform: uppercase;
  border: 3px black solid;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

#hero-grid {
  display: flex;
}

@media (max-width: 800px) {
  #pricing {
    flex-direction: column;
  }
  .solution {
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 10px;
  }
}

footer {
  margin-top: 30px;
  background-color: #cfe2fc;
  padding: 20px;
}

footer > ul {
  display: flex;
  justify-content: flex-end;
}

footer > ul > li {
  padding: 0 10px;
}

footer > span {
  margin-top: 5px;
  display: flex;
  justify-content: flex-end;
  font-size: 0.9em;
  color: gray;
}

HTML:

<!DOCTYPE html>
<html>
  </head>
    <link rel="stylesheet" href="styles.css" />
    <link 
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Denk+One&display=swap" rel="stylesheet"
    />
  </head>
  <body>
    <div id="wrapper">
      <header id="header">
        <div class="brand-logo">
          <img
            id="header-logo"
            src="https://pbs.twimg.com/profile_images/1581590118665752577/r9ztMMQO_400x400.jpg"
            alt="mentaltec logo"
          />
        </div>

        <nav id="navbar">
          <ul>
            <li><a class="nav-link" href="#About us">About us</a></li>
            <li><a class="nav-link" href="#Quote">Get Quote</a></li>
            <li><a class="nav-link" href="#Contact us">Contact us</a></li>
          </ul>
        </nav>
      </header>

      <div class="space--before-services"></div> 

      <section id="hero-section">
        <h2>Web Development for you, by us</h2>
        <form id="form" action="https://www.freecodecamp.com/email-submit">
          <input
            name="email"
            id="email"
            type="email"
            placeholder="Please enter your email address..."
            required
          />
          <input id="submit" type="submit" value="Sign Up" class="button" />
        </form>
      </section>

      <div class="container">
        <section id="services">
          <div class="hero-grid">
            <div class="service-icon"><i class="fa fa-3x fa-fire"></i></div>
            <div class="service-description">
              <h2>Web Prototyping and User Interface Design</h2>
              <p>
                Want to take your business online but not sure how it should look?
                We design mockup sites that will suit your business needs and promote high conversion rates.
              </p>
            </div>
          </div>
          <div class="hero-grid">
            <div class="service-icon"><i class="fa fa-3x fa-truck"></i></div>
            <div class="service-description">
              <h2>Copywriting</h2>
              <p>
                Copywriting services for any piece of literature you need.
              </p>
            </div>
          </div>
          <div class="hero-grid">
            <div class="service-icon"><i class="fa fa-3x fa-battery-full" aria-hidden="true"></i></div>
            <div class="service-description">
              <h2>System Support</h2>
              <p>
                Providing a wide variety of System and Technical support to ensure your organisation runs smoothly.
              </p>
            </div>
          </div>
        </section>
        <section id="work--preview-video">
          <iframe
            id="video"
            height="315"
            src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0"
            frameborder="0"
            allowfullscreen>
            </iframe>
            </section>
            <section id="pricing" >
              <div class="solution" id="web-dev">
                <div class="utility">Prototyping and UXD</div>
                <h2>Priced by quote</h2>
                <ol>
                  <li>Reservations</li>
                  <li>Product Discussions</li>
                  <li>Milestones</li>
                  <li>Final Product</li>
                </ol>
                <button class="quote--btn-sizing">Quote</button>
              </div>
              <div class="solution" id="copywriting">
                <div class="utility">Copywriting</div>
                <h2>Priced by quote</h2>
                <ol>
                  <li>Reservations</li>
                  <li>Product Discussions</li>
                  <li>Milestones</li>
                  <li>Final Product</li>
                </ol>
                <button class="quote--btn-sizing">Quote</button>
              </div>
              <div class="solution" id="system-support">
                <div class="utility">System Support</div>
                <h2>Priced by quote</h2>
                <ol>
                  <li>Reservations</li>
                  <li>Product Discussions</li>
                  <li>Milestones</li>
                  <li>Final Product</li>
                </ol>
                <button class="quote--btn-sizing">Quote</button>
              </div>
            </section>
            <footer>
              <ul>
                <li><a href="#">Privacy</a></li>
                <li><a href="#">Terms</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
              <span>Copyright 2022, Mentaltec tecent</span>
            </footer>
          </div>
        </div>
     </body>
   </html>
5

Can we see your HTML?

6

You can just scroll down you will see it there.

7

Thanks for the code. Can you be a little more specific about what you are trying to do?

8

I am trying to place the icons horizontally, inline with the h2 and p tags?

1 Like
9

I have edited your post for readability (you had not placed the backticks on a separate line above and below the code so it was not being displayed with syntax highlighting)

Please put your code into a codepen.
It will be easier for people to see your code live there.

1 Like
10

I personally would not use flexbox like that to add the icons. One way to do this would be to add the icon inside the h2 and then use absolute positioning to move it next to the text. Or I’m assuming you can add the font awesome icon using the CSS ::before pseudo class.

11

Can I not just use the span element?

12

I’ve added my icons in my h2 with a position of absolute like this:
HTML:
<h2><i class="fas fa-icon"></i>Web P....</h2>

CSS:

i {
position: absolute;
left: 10px;
align-items: center;
justify-content: center;
}

But now the icons arent fixed (doesnt tuck beneath navbar instead slides above)and my icon font size wont change?

13

I’ve added my icons in my h2 with a position of absolute like this:
HTML:
<h2><i class="fas fa-icon"></i>Web P....</h2>

CSS:

i {
position: absolute;
left: 10px;
align-items: center;
justify-content: center;
}

But now the icons arent fixed (doesnt tuck beneath navbar instead slides above)and my icon font size wont change?

14

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