Product Landing Page - Build a Product Landing Page

Tell us what’s happening:

My problem is I need to link an img from a website and I used an icon from the fontawesome library. fontawesome requires I use an i tag.
I could just add a random image to pass the challange, but how do I go about making it look like nice? like it’s part of the website?

Your code so far

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Electric Sheep</title>
        <link rel="stylesheet" href="./styles.css">
        <script src="https://kit.fontawesome.com/088ceb7c40.js" crossorigin="anonymous"></script>
    </head>
    
    <body>
        <!-- top bar with nav options, always on top 
        so here I want to have to containers, one to the left and one to the right.
        -->
        <header id="header">
            <div class="left-container">
                <i class="fa-solid fa-hippo" id="header-img"></i>
                <h1>Electric Sheep</h1>
            </div>
            <nav class="nav-bar" id="nav-bar">
                <a class="nav-link" href="#features">features</a>
                <a class="nav-link" href="#product">product</a>
                <a class="nav-link" href="#contact">contact</a>
            </nav>
        </header>
        <main>
            <section class="features" id="features">
                <div class="prop">
                    <i class="fa-solid fa-shield-heart"></i>
                    <h2>High Quality</h2>
                    <p>Our Electric Sheep are made from the highest quality, guaranting stability and endurance over long periods of time.</p>
                </div>
                <div class="prop">
                    <i class="fa-solid fa-leaf"></i>
                    <h2>Eco-friendly!</h2>
                    <p>Not only we use bio-degradeable material, your sheep can compost and reduce waste in your home!</p>
                </div>
                <div class="prop">
                    <i class="fa-solid fa-infinity"></i>
                    <h2>Ever Lasting Love</h2>
                    <p>No more having to worry over broken heart or disappointment! Your sheep is here to stay!</p>
                </div>
            </section>
            <section class="demo">
                <iframe  id="video" width="560" height="315" src="https://www.youtube.com/embed/w2kr2G6onKw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </section>
            <section class="product" id="product">
                <!-- three types of sheep -->
                <div class="product-container">
                    <h1>Product 1</h1>
                    <h2>$600</h2>
                    <p>
                        Lorem ipsum.
                        Lorem ipsum.
                        Lorem ipsum dolor.
                        Lorem ipsum.
                    </p>
                    <button type="button">Order now!</button>
                </div>
                <div class="product-container">
                    <h1>Product 2</h1>
                    <h2>$600</h2>
                    <p>
                        Lorem ipsum.
                        Lorem ipsum.
                        Lorem ipsum dolor.
                        Lorem ipsum.
                    </p>
                    <button type="button">Order now!</button>
                </div>
                <div class="product-container">
                    <h1>Product 3</h1>
                    <h2>$600</h2>
                    <p>
                        Lorem ipsum.
                        Lorem ipsum.
                        Lorem ipsum dolor.
                        Lorem ipsum.
                    </p>
                    <button type="button">Order now!</button>
                </div>
                
            </section>
           
        </main>
        <footer id="contact">
            <form action="https://www.freecodecamp.com/email-submit" id="form">
                <label>Enter your email for more information:</label>
                <input type="email" name="email" id="email" placeholder="youremail@yourserver.com">
                <input type="submit" form="https://www.freecodecamp.com/email-submit" id="submit">  
            </form>
            
            <div class="right-container">
                <p>privacy</p>
                <p>terms</p>
                <p>contact</p>
            </div>
        </footer>
    </body>
</html>

* {
    /* border: thin solid black; */
    margin: 0;
    padding: 0;
}

html {
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100%;

    background-image: radial-gradient(ellipse, skyblue 70%, whitesmoke);
    background-size: 100%;
    background-repeat: no-repeat;
    
    font-family: Bradely Hand, cursive, sans-serif;
}

header {
    width: 100%;
    height: 15%;
    position: fixed;
    top: 0;
    z-index: 10;
    background: radial-gradient(ellipse, skyblue, whitesmoke);
    border-radius: 15%;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.left-container {
    display: flex;
    align-items: center;
    gap: 2em;
}

header i {
    font-size: 4em;
    align-self:flex-start;
    margin-top: auto;
    margin-bottom: auto;
}

header nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap:wrap;
    gap: 5em;
    padding-right: 5em;
}

a:link, a:visited {
    text-decoration: none;
    color: black;
}

main {
    margin-top: 8%;
}

.features {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;

}

.features i {
    float: left;
    font-size: 3em;
    margin-right: 1em;
}
.prop {
    width: 80%;
    margin: 3em;
}

.demo {
    text-align: center;
    margin-top: 3em;
    margin-bottom: 3em;
}

.product {
    display: flex;
    justify-content: center;
    gap: 3em;
    padding: 1em;
}

.product-container {

    width: 20em;
    height: 20em;
    padding: 1em;

    text-align:center;
    background: radial-gradient(circle, linen, transparent);
    border-radius: 15%;

    display: flex;
    flex-flow: column;
    justify-content: space-around;
    align-items: center;
}

.product-container button {
    width: 50%;
    background-color: radial-gradient(circle, linen, transparent); 
    border: thin solid black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
}

footer {
    width: 90%;
    margin: 3em;
    display: flex;
    justify-content: space-between;
    
}

#form {
    display: block;
}

.right-container {
    display: flex;
    gap: 5em;
}

@media only screen and (max-width:600px) {
    .product {
        flex-flow: column;
    }
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

Hey there! it seems your code is missing from your post

Could you please add your code in there?

Woops! I edited the post, thanks

With the right amount of css I would say
You can find comparable icons in an image format, you can also download the fontawesome icons in svg and upload them somewhere yourself (like github for example)

I had to convert it from svg to jpeg but that worked, thx :slight_smile: