Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Positioning of Elements
Hello! I’m pretty much finished with the HTML code for my landing page, but I’m having some trouble with the positioning of a few things. I’ll also link my CodePen if that’s easier to read.

Code for navigation icons
I want the icons always flush with the right side of the page. right: 0 did not have the intended effect. I also tried using percentages. (I omitted some code so it’s not super-super long, but I have two other div elements under header for navigation buttons and search bar)

<section class="main-section" id="navigation-menu">
			<div id="header-nav">
				<header id="header">
					(omitted)
					<div id="account-icons-div">
						<i class="fa-solid fa-magnifying-glass header-icon"></i>
						<i class="fa-solid fa-user header-icon"></i>
						<i class="fa-solid fa-bag-shopping header-icon"></i>
					</div>
				</header>
			</div>
		</section>

#account-icons-div {
	border: 2px solid green;
	display: inline-flex;
	width: 300px;
	justify-content: space-between;
	align-items: center;
	height: 30px;
	margin-left: 100px;
	font-size: 1.3rem;
	color: var(--text);
	position: relative;
	bottom: 3px;
	right: 0
}

.fa-magnifying-glass {
	font-size: 0rem
}

Code for Steps
I want the numbers to be flush against the top of .step

<div id="step-grid-container">
				<article class="step">
					<div class="number-div">
						<span>
							<p class="step-no">1</p>
						</span>
					</div>
					<h3>Create your scent</h3>
					<p class="step-p">Select your favorite notes and their intensity</p>
				</article>
				<article class="step">
					<div class="number-div">
						<span>
							<p class="step-no">2</p>
						</span>
					</div>
					<h3>Customize your bottle</h3>
					<p class="step-p">A unique bottle for your unique scent! You can customize to cap, label, and you could even name it if you want!
	</p>
				</article>
				<article class="step">
					<div class="number-div">
						<span>
							<p class="step-no">3</p>
						</span>
					</div>
					<h3>Stop and smell the roses</h3>
					<p class="step-p">We’ll get your signature scent to you as soon as possible!
	</p>
				</article>
			</div>

#step-grid-container {
	border: 2px solid brown;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 30px;
}

span {
	text-align: center;
	width: 60px;
	height: 60px;
	display: flex;
	border-radius: 50%;
	background: var(--secondary-color);
	position: relative;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px
}

/*trying to get it centered, come back to later*/
.number-div {
	border: 2px solid palevioletred;
	width: 65px;
	height: 65px;

}

.step-no {
	color: var(--text);
	text-align: center;
	font-weight: bold;
	font-size: 2rem;
	text-align: center
}

.step {
	border: 2px solid dodgerblue;
	display: grid;
	grid-template-rows: 3;
	place-items: center;
	gap: 0.5rem;
	position: relative;
	top: 0
}

.step-p {
	font-family: Kaisei Opti;
	text-align: center}

Code for quiz button
I also want this centered, but left: 50% makes it more to the right.

<div id="quiz-img-div">
				<img src="https://images.unsplash.com/photo-1634055769490-dc0a9f22826a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=910&q=80" id="quiz-img">
				<button id="quiz-button" class="button">TAKE THE QUIZ</button>
			</div>

#quiz-button {
	z-index: 3;
	position: relative;
	top: 50%;
	left: 50%;
	padding: 10px;
}

Also, I don’t know why position: sticky isn’t working. I read that I need a height set, which I do (8vh).

I know this is very long, so thank you for reading my post :slight_smile:

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

I’m not sure I understand exactly what you want here, but right: 0 will work if you change the positioning on the div from relative to absolute. (I’m talking about the #account-icons-div div).

Of course, as you narrow the browser then those icons are going to overlap the other things in the header, so you’ll probably want to use some media queries to rearrange things for narrower widths.

1 Like
3

I’m not sure you need to use grid display on those articles. I removed it and then used auto margins on the .number-divs to center them. You can add a bottom margin to separate them from the text below. Now your h3s will line up consistently as well.

1 Like
4

That’s because it is setting the left side of the button at 50%, so it isn’t taking the width of the button into account. It’s doing the same thing for top and the height of the button.

I would probably make this a background image on #quiz-img-div and then use either flexbox or grid to center the button.

5

Are you sure you don’t want “fixed” positioning on the header?

1 Like
6

Thank you so much! I always appreciate seeing your comments :smile:

Have a wonderful day!!

7

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