Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

Guys, I’m about to bang my head to the wall by now. This header is absolutely beyond me.
This is my third week coding from scratch, mind you, and I’m changing all my projects so the look a little better and I can’t figure a way to make the H2 align left a couple of pixels away from the IMG.

Last I tried was doing a Div and sticking IMG and Header into a flex using a class selector. The logo sticks on top, doesn’t respect the 100px size at first attempt. When I shimmy displays flex or inline block, or inline anything and aligns and god knows what else they finally stick side by side but the text aligns up top and I cant separate them with either margin or padding, sometimes the logo just disappears to the left.

I am absolutely at my wits ends, so sorry if a bunch of this text doesn’t come across very organized. I need help, I won’t rest easy this weekend if I can’t figure a way to solve this.

Thanks in advance for your patience, and good weekend y’all

Your code so far

<header class="sticky-header">
            <img class="logo" src="https://shorturl.at/dmq12" alt=""></br>
            <h2 class="company-name"> Adopt a Cat Resource</h2>  
        <nav class="nav-link">
            <a href="#lifestyle" class="segment">Life Style Improvement</a>
            <a href="#care" class="segment">Ease of Care</a>
            <a href="#mental-health" class="segment">Mental Health Benefits</a>
        </nav>
    </header>

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

body {
  font-family: Arial, sans-serif;
  width: 100vw;
  background-image: url(https://shorturl.at/AFLQ0);
  background-size: cover;
  background-position: center bottom;
  background-attachment:fixed;
  background-color: rgba(255, 255, 255, 0.9);
  background-blend-mode: overlay;
}

.page-body {
  position: relative;
  text-align: center;

}

header {
  position:  sticky;
  top: 0;
  height: 100px;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items:end;
  background-color: rgb(34, 34, 59);
  color: white;
  margin-bottom: 50px;
}

.logo {
  margin: 0;
  height: 100px;
}

h2 {
  font-size: 2.5rem;
  justify-content: space-around;
}

.nav-link {
  display: inline-block;
  font-size: 1.25rem;
  color: rgb(242, 233, 228);
  margin-right: 30px;
}

.nav-link a {
  padding: 0 10px;
}

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2 Likes
2

instead of align-items: end try typing align items centre in .header it aligns them in the centre vertically. And I don t know what you mean with the logo and what you want to do with it because it take whole available space and sticks to the left side. When you re using background image try using no repeating version so you type background-repeat: no-repeat;
and background-size cover

4 Likes
3

Hello!

Here are some articles from fCC News category that may help you sort things out.

FCC News HTML Elements Explained

FCC News CSS Handbook

Happy coding!

2 Likes
4

Thanks a lot.

To clarify by logo I meant the image on the header. I don’t know why but turning the IMG and H2 into a div together now did work into allowing me to keep those together to the left and all the over Nav links to the right.

Also your suggestion for the background image worked like a charm.

1 Like
5

will definetly read! Thank you

1 Like
6

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