Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
How do i make the text ‘Handcrafted Home-made footgear’ to be beside the shoe icon not below it. i have tried using float left its not working help me

Your code so far

<!-- file: index.html -->
<DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"     content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="styles.css">

    <title>
      Essence Footwear
    </title>
  </head>
    <body>
      <section class="nav">
        </section>
        <section class="header">
          <header id="header">
            <img id="header-img" src="https://as1.ftcdn.net/v2/jpg/01/78/92/36/1000_F_178923645_5RX06lKid4PFyqShLHRVk2NxaCtaknYf.jpg"> 
            
            </img>
            <h1><span class="right">Handcrafted Home-made footgear </span></h1>
</header>
        </section>
        <section class="price-list">
        </section>

      </body>  
   </html>

/* file: styles.css */

#header-img {
  height:50px;
  width: 50px;
  object-fit: contain
}

.header {
  display: flex;
}
.right {
  float: left;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:107.0) Gecko/20100101 Firefox/107.0

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

I see the css selector is for the classname header, however, there is no classname header in your project. You’re probably meaning to use the selector #header.

1 Like
3

I think you would put the float on the image since that’s what you want the text to float around. But really, I probably wouldn’t use float here. I’d probably use flexbox.